Mercurial > hg > cmmr2012-drupal-site
comparison core/misc/tabledrag.js @ 0:c75dbcec494b
Initial commit from drush-created site
author | Chris Cannam |
---|---|
date | Thu, 05 Jul 2018 14:24:15 +0000 |
parents | |
children | a9cd425dd02b |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:c75dbcec494b |
---|---|
1 /** | |
2 * DO NOT EDIT THIS FILE. | |
3 * See the following change record for more information, | |
4 * https://www.drupal.org/node/2815083 | |
5 * @preserve | |
6 **/ | |
7 | |
8 (function ($, Drupal, drupalSettings) { | |
9 var showWeight = JSON.parse(localStorage.getItem('Drupal.tableDrag.showWeight')); | |
10 | |
11 Drupal.behaviors.tableDrag = { | |
12 attach: function attach(context, settings) { | |
13 function initTableDrag(table, base) { | |
14 if (table.length) { | |
15 Drupal.tableDrag[base] = new Drupal.tableDrag(table[0], settings.tableDrag[base]); | |
16 } | |
17 } | |
18 | |
19 Object.keys(settings.tableDrag || {}).forEach(function (base) { | |
20 initTableDrag($(context).find('#' + base).once('tabledrag'), base); | |
21 }); | |
22 } | |
23 }; | |
24 | |
25 Drupal.tableDrag = function (table, tableSettings) { | |
26 var _this = this; | |
27 | |
28 var self = this; | |
29 var $table = $(table); | |
30 | |
31 this.$table = $(table); | |
32 | |
33 this.table = table; | |
34 | |
35 this.tableSettings = tableSettings; | |
36 | |
37 this.dragObject = null; | |
38 | |
39 this.rowObject = null; | |
40 | |
41 this.oldRowElement = null; | |
42 | |
43 this.oldY = 0; | |
44 | |
45 this.changed = false; | |
46 | |
47 this.maxDepth = 0; | |
48 | |
49 this.rtl = $(this.table).css('direction') === 'rtl' ? -1 : 1; | |
50 | |
51 this.striping = $(this.table).data('striping') === 1; | |
52 | |
53 this.scrollSettings = { amount: 4, interval: 50, trigger: 70 }; | |
54 | |
55 this.scrollInterval = null; | |
56 | |
57 this.scrollY = 0; | |
58 | |
59 this.windowHeight = 0; | |
60 | |
61 this.indentEnabled = false; | |
62 Object.keys(tableSettings || {}).forEach(function (group) { | |
63 Object.keys(tableSettings[group] || {}).forEach(function (n) { | |
64 if (tableSettings[group][n].relationship === 'parent') { | |
65 _this.indentEnabled = true; | |
66 } | |
67 if (tableSettings[group][n].limit > 0) { | |
68 _this.maxDepth = tableSettings[group][n].limit; | |
69 } | |
70 }); | |
71 }); | |
72 if (this.indentEnabled) { | |
73 this.indentCount = 1; | |
74 | |
75 var indent = Drupal.theme('tableDragIndentation'); | |
76 var testRow = $('<tr/>').addClass('draggable').appendTo(table); | |
77 var testCell = $('<td/>').appendTo(testRow).prepend(indent).prepend(indent); | |
78 var $indentation = testCell.find('.js-indentation'); | |
79 | |
80 this.indentAmount = $indentation.get(1).offsetLeft - $indentation.get(0).offsetLeft; | |
81 testRow.remove(); | |
82 } | |
83 | |
84 $table.find('> tr.draggable, > tbody > tr.draggable').each(function () { | |
85 self.makeDraggable(this); | |
86 }); | |
87 | |
88 $table.before($('<button type="button" class="link tabledrag-toggle-weight"></button>').attr('title', Drupal.t('Re-order rows by numerical weight instead of dragging.')).on('click', $.proxy(function (e) { | |
89 e.preventDefault(); | |
90 this.toggleColumns(); | |
91 }, this)).wrap('<div class="tabledrag-toggle-weight-wrapper"></div>').parent()); | |
92 | |
93 self.initColumns(); | |
94 | |
95 $(document).on('touchmove', function (event) { | |
96 return self.dragRow(event.originalEvent.touches[0], self); | |
97 }); | |
98 $(document).on('touchend', function (event) { | |
99 return self.dropRow(event.originalEvent.touches[0], self); | |
100 }); | |
101 $(document).on('mousemove pointermove', function (event) { | |
102 return self.dragRow(event, self); | |
103 }); | |
104 $(document).on('mouseup pointerup', function (event) { | |
105 return self.dropRow(event, self); | |
106 }); | |
107 | |
108 $(window).on('storage', $.proxy(function (e) { | |
109 if (e.originalEvent.key === 'Drupal.tableDrag.showWeight') { | |
110 showWeight = JSON.parse(e.originalEvent.newValue); | |
111 this.displayColumns(showWeight); | |
112 } | |
113 }, this)); | |
114 }; | |
115 | |
116 Drupal.tableDrag.prototype.initColumns = function () { | |
117 var _this2 = this; | |
118 | |
119 var $table = this.$table; | |
120 var hidden = void 0; | |
121 var cell = void 0; | |
122 var columnIndex = void 0; | |
123 Object.keys(this.tableSettings || {}).forEach(function (group) { | |
124 for (var d in _this2.tableSettings[group]) { | |
125 if (_this2.tableSettings[group].hasOwnProperty(d)) { | |
126 var field = $table.find('.' + _this2.tableSettings[group][d].target).eq(0); | |
127 if (field.length && _this2.tableSettings[group][d].hidden) { | |
128 hidden = _this2.tableSettings[group][d].hidden; | |
129 cell = field.closest('td'); | |
130 break; | |
131 } | |
132 } | |
133 } | |
134 | |
135 if (hidden && cell[0]) { | |
136 columnIndex = cell.parent().find('> td').index(cell.get(0)) + 1; | |
137 $table.find('> thead > tr, > tbody > tr, > tr').each(_this2.addColspanClass(columnIndex)); | |
138 } | |
139 }); | |
140 this.displayColumns(showWeight); | |
141 }; | |
142 | |
143 Drupal.tableDrag.prototype.addColspanClass = function (columnIndex) { | |
144 return function () { | |
145 var $row = $(this); | |
146 var index = columnIndex; | |
147 var cells = $row.children(); | |
148 var cell = void 0; | |
149 cells.each(function (n) { | |
150 if (n < index && this.colSpan && this.colSpan > 1) { | |
151 index -= this.colSpan - 1; | |
152 } | |
153 }); | |
154 if (index > 0) { | |
155 cell = cells.filter(':nth-child(' + index + ')'); | |
156 if (cell[0].colSpan && cell[0].colSpan > 1) { | |
157 cell.addClass('tabledrag-has-colspan'); | |
158 } else { | |
159 cell.addClass('tabledrag-hide'); | |
160 } | |
161 } | |
162 }; | |
163 }; | |
164 | |
165 Drupal.tableDrag.prototype.displayColumns = function (displayWeight) { | |
166 if (displayWeight) { | |
167 this.showColumns(); | |
168 } else { | |
169 this.hideColumns(); | |
170 } | |
171 | |
172 $('table').findOnce('tabledrag').trigger('columnschange', !!displayWeight); | |
173 }; | |
174 | |
175 Drupal.tableDrag.prototype.toggleColumns = function () { | |
176 showWeight = !showWeight; | |
177 this.displayColumns(showWeight); | |
178 if (showWeight) { | |
179 localStorage.setItem('Drupal.tableDrag.showWeight', showWeight); | |
180 } else { | |
181 localStorage.removeItem('Drupal.tableDrag.showWeight'); | |
182 } | |
183 }; | |
184 | |
185 Drupal.tableDrag.prototype.hideColumns = function () { | |
186 var $tables = $('table').findOnce('tabledrag'); | |
187 | |
188 $tables.find('.tabledrag-hide').css('display', 'none'); | |
189 | |
190 $tables.find('.tabledrag-handle').css('display', ''); | |
191 | |
192 $tables.find('.tabledrag-has-colspan').each(function () { | |
193 this.colSpan = this.colSpan - 1; | |
194 }); | |
195 | |
196 $('.tabledrag-toggle-weight').text(Drupal.t('Show row weights')); | |
197 }; | |
198 | |
199 Drupal.tableDrag.prototype.showColumns = function () { | |
200 var $tables = $('table').findOnce('tabledrag'); | |
201 | |
202 $tables.find('.tabledrag-hide').css('display', ''); | |
203 | |
204 $tables.find('.tabledrag-handle').css('display', 'none'); | |
205 | |
206 $tables.find('.tabledrag-has-colspan').each(function () { | |
207 this.colSpan = this.colSpan + 1; | |
208 }); | |
209 | |
210 $('.tabledrag-toggle-weight').text(Drupal.t('Hide row weights')); | |
211 }; | |
212 | |
213 Drupal.tableDrag.prototype.rowSettings = function (group, row) { | |
214 var field = $(row).find('.' + group); | |
215 var tableSettingsGroup = this.tableSettings[group]; | |
216 | |
217 for (var delta in tableSettingsGroup) { | |
218 if (tableSettingsGroup.hasOwnProperty(delta)) { | |
219 var targetClass = tableSettingsGroup[delta].target; | |
220 if (field.is('.' + targetClass)) { | |
221 var rowSettings = {}; | |
222 | |
223 for (var n in tableSettingsGroup[delta]) { | |
224 if (tableSettingsGroup[delta].hasOwnProperty(n)) { | |
225 rowSettings[n] = tableSettingsGroup[delta][n]; | |
226 } | |
227 } | |
228 return rowSettings; | |
229 } | |
230 } | |
231 } | |
232 }; | |
233 | |
234 Drupal.tableDrag.prototype.makeDraggable = function (item) { | |
235 var self = this; | |
236 var $item = $(item); | |
237 | |
238 $item.find('td:first-of-type').find('a').addClass('menu-item__link'); | |
239 | |
240 var handle = $('<a href="#" class="tabledrag-handle"><div class="handle"> </div></a>').attr('title', Drupal.t('Drag to re-order')); | |
241 | |
242 var $indentationLast = $item.find('td:first-of-type').find('.js-indentation').eq(-1); | |
243 if ($indentationLast.length) { | |
244 $indentationLast.after(handle); | |
245 | |
246 self.indentCount = Math.max($item.find('.js-indentation').length, self.indentCount); | |
247 } else { | |
248 $item.find('td').eq(0).prepend(handle); | |
249 } | |
250 | |
251 handle.on('mousedown touchstart pointerdown', function (event) { | |
252 event.preventDefault(); | |
253 if (event.originalEvent.type === 'touchstart') { | |
254 event = event.originalEvent.touches[0]; | |
255 } | |
256 self.dragStart(event, self, item); | |
257 }); | |
258 | |
259 handle.on('click', function (e) { | |
260 e.preventDefault(); | |
261 }); | |
262 | |
263 handle.on('focus', function () { | |
264 self.safeBlur = true; | |
265 }); | |
266 | |
267 handle.on('blur', function (event) { | |
268 if (self.rowObject && self.safeBlur) { | |
269 self.dropRow(event, self); | |
270 } | |
271 }); | |
272 | |
273 handle.on('keydown', function (event) { | |
274 if (event.keyCode !== 9 && !self.rowObject) { | |
275 self.rowObject = new self.row(item, 'keyboard', self.indentEnabled, self.maxDepth, true); | |
276 } | |
277 | |
278 var keyChange = false; | |
279 var groupHeight = void 0; | |
280 | |
281 switch (event.keyCode) { | |
282 case 37: | |
283 case 63234: | |
284 keyChange = true; | |
285 self.rowObject.indent(-1 * self.rtl); | |
286 break; | |
287 | |
288 case 38: | |
289 case 63232: | |
290 { | |
291 var $previousRow = $(self.rowObject.element).prev('tr:first-of-type'); | |
292 var previousRow = $previousRow.get(0); | |
293 while (previousRow && $previousRow.is(':hidden')) { | |
294 $previousRow = $(previousRow).prev('tr:first-of-type'); | |
295 previousRow = $previousRow.get(0); | |
296 } | |
297 if (previousRow) { | |
298 self.safeBlur = false; | |
299 self.rowObject.direction = 'up'; | |
300 keyChange = true; | |
301 | |
302 if ($(item).is('.tabledrag-root')) { | |
303 groupHeight = 0; | |
304 while (previousRow && $previousRow.find('.js-indentation').length) { | |
305 $previousRow = $(previousRow).prev('tr:first-of-type'); | |
306 previousRow = $previousRow.get(0); | |
307 groupHeight += $previousRow.is(':hidden') ? 0 : previousRow.offsetHeight; | |
308 } | |
309 if (previousRow) { | |
310 self.rowObject.swap('before', previousRow); | |
311 | |
312 window.scrollBy(0, -groupHeight); | |
313 } | |
314 } else if (self.table.tBodies[0].rows[0] !== previousRow || $previousRow.is('.draggable')) { | |
315 self.rowObject.swap('before', previousRow); | |
316 self.rowObject.interval = null; | |
317 self.rowObject.indent(0); | |
318 window.scrollBy(0, -parseInt(item.offsetHeight, 10)); | |
319 } | |
320 | |
321 handle.trigger('focus'); | |
322 } | |
323 break; | |
324 } | |
325 | |
326 case 39: | |
327 case 63235: | |
328 keyChange = true; | |
329 self.rowObject.indent(self.rtl); | |
330 break; | |
331 | |
332 case 40: | |
333 case 63233: | |
334 { | |
335 var $nextRow = $(self.rowObject.group).eq(-1).next('tr:first-of-type'); | |
336 var nextRow = $nextRow.get(0); | |
337 while (nextRow && $nextRow.is(':hidden')) { | |
338 $nextRow = $(nextRow).next('tr:first-of-type'); | |
339 nextRow = $nextRow.get(0); | |
340 } | |
341 if (nextRow) { | |
342 self.safeBlur = false; | |
343 self.rowObject.direction = 'down'; | |
344 keyChange = true; | |
345 | |
346 if ($(item).is('.tabledrag-root')) { | |
347 groupHeight = 0; | |
348 var nextGroup = new self.row(nextRow, 'keyboard', self.indentEnabled, self.maxDepth, false); | |
349 if (nextGroup) { | |
350 $(nextGroup.group).each(function () { | |
351 groupHeight += $(this).is(':hidden') ? 0 : this.offsetHeight; | |
352 }); | |
353 var nextGroupRow = $(nextGroup.group).eq(-1).get(0); | |
354 self.rowObject.swap('after', nextGroupRow); | |
355 | |
356 window.scrollBy(0, parseInt(groupHeight, 10)); | |
357 } | |
358 } else { | |
359 self.rowObject.swap('after', nextRow); | |
360 self.rowObject.interval = null; | |
361 self.rowObject.indent(0); | |
362 window.scrollBy(0, parseInt(item.offsetHeight, 10)); | |
363 } | |
364 | |
365 handle.trigger('focus'); | |
366 } | |
367 break; | |
368 } | |
369 } | |
370 | |
371 if (self.rowObject && self.rowObject.changed === true) { | |
372 $(item).addClass('drag'); | |
373 if (self.oldRowElement) { | |
374 $(self.oldRowElement).removeClass('drag-previous'); | |
375 } | |
376 self.oldRowElement = item; | |
377 if (self.striping === true) { | |
378 self.restripeTable(); | |
379 } | |
380 self.onDrag(); | |
381 } | |
382 | |
383 if (keyChange) { | |
384 return false; | |
385 } | |
386 }); | |
387 | |
388 handle.on('keypress', function (event) { | |
389 | |
390 switch (event.keyCode) { | |
391 case 37: | |
392 case 38: | |
393 case 39: | |
394 case 40: | |
395 return false; | |
396 } | |
397 }); | |
398 }; | |
399 | |
400 Drupal.tableDrag.prototype.dragStart = function (event, self, item) { | |
401 self.dragObject = {}; | |
402 self.dragObject.initOffset = self.getPointerOffset(item, event); | |
403 self.dragObject.initPointerCoords = self.pointerCoords(event); | |
404 if (self.indentEnabled) { | |
405 self.dragObject.indentPointerPos = self.dragObject.initPointerCoords; | |
406 } | |
407 | |
408 if (self.rowObject) { | |
409 $(self.rowObject.element).find('a.tabledrag-handle').trigger('blur'); | |
410 } | |
411 | |
412 self.rowObject = new self.row(item, 'pointer', self.indentEnabled, self.maxDepth, true); | |
413 | |
414 self.table.topY = $(self.table).offset().top; | |
415 self.table.bottomY = self.table.topY + self.table.offsetHeight; | |
416 | |
417 $(item).addClass('drag'); | |
418 | |
419 $('body').addClass('drag'); | |
420 if (self.oldRowElement) { | |
421 $(self.oldRowElement).removeClass('drag-previous'); | |
422 } | |
423 }; | |
424 | |
425 Drupal.tableDrag.prototype.dragRow = function (event, self) { | |
426 if (self.dragObject) { | |
427 self.currentPointerCoords = self.pointerCoords(event); | |
428 var y = self.currentPointerCoords.y - self.dragObject.initOffset.y; | |
429 var x = self.currentPointerCoords.x - self.dragObject.initOffset.x; | |
430 | |
431 if (y !== self.oldY) { | |
432 self.rowObject.direction = y > self.oldY ? 'down' : 'up'; | |
433 | |
434 self.oldY = y; | |
435 | |
436 var scrollAmount = self.checkScroll(self.currentPointerCoords.y); | |
437 | |
438 clearInterval(self.scrollInterval); | |
439 | |
440 if (scrollAmount > 0 && self.rowObject.direction === 'down' || scrollAmount < 0 && self.rowObject.direction === 'up') { | |
441 self.setScroll(scrollAmount); | |
442 } | |
443 | |
444 var currentRow = self.findDropTargetRow(x, y); | |
445 if (currentRow) { | |
446 if (self.rowObject.direction === 'down') { | |
447 self.rowObject.swap('after', currentRow, self); | |
448 } else { | |
449 self.rowObject.swap('before', currentRow, self); | |
450 } | |
451 if (self.striping === true) { | |
452 self.restripeTable(); | |
453 } | |
454 } | |
455 } | |
456 | |
457 if (self.indentEnabled) { | |
458 var xDiff = self.currentPointerCoords.x - self.dragObject.indentPointerPos.x; | |
459 | |
460 var indentDiff = Math.round(xDiff / self.indentAmount); | |
461 | |
462 var indentChange = self.rowObject.indent(indentDiff); | |
463 | |
464 self.dragObject.indentPointerPos.x += self.indentAmount * indentChange * self.rtl; | |
465 self.indentCount = Math.max(self.indentCount, self.rowObject.indents); | |
466 } | |
467 | |
468 return false; | |
469 } | |
470 }; | |
471 | |
472 Drupal.tableDrag.prototype.dropRow = function (event, self) { | |
473 var droppedRow = void 0; | |
474 var $droppedRow = void 0; | |
475 | |
476 if (self.rowObject !== null) { | |
477 droppedRow = self.rowObject.element; | |
478 $droppedRow = $(droppedRow); | |
479 | |
480 if (self.rowObject.changed === true) { | |
481 self.updateFields(droppedRow); | |
482 | |
483 Object.keys(self.tableSettings || {}).forEach(function (group) { | |
484 var rowSettings = self.rowSettings(group, droppedRow); | |
485 if (rowSettings.relationship === 'group') { | |
486 Object.keys(self.rowObject.children || {}).forEach(function (n) { | |
487 self.updateField(self.rowObject.children[n], group); | |
488 }); | |
489 } | |
490 }); | |
491 | |
492 self.rowObject.markChanged(); | |
493 if (self.changed === false) { | |
494 $(Drupal.theme('tableDragChangedWarning')).insertBefore(self.table).hide().fadeIn('slow'); | |
495 self.changed = true; | |
496 } | |
497 } | |
498 | |
499 if (self.indentEnabled) { | |
500 self.rowObject.removeIndentClasses(); | |
501 } | |
502 if (self.oldRowElement) { | |
503 $(self.oldRowElement).removeClass('drag-previous'); | |
504 } | |
505 $droppedRow.removeClass('drag').addClass('drag-previous'); | |
506 self.oldRowElement = droppedRow; | |
507 self.onDrop(); | |
508 self.rowObject = null; | |
509 } | |
510 | |
511 if (self.dragObject !== null) { | |
512 self.dragObject = null; | |
513 $('body').removeClass('drag'); | |
514 clearInterval(self.scrollInterval); | |
515 } | |
516 }; | |
517 | |
518 Drupal.tableDrag.prototype.pointerCoords = function (event) { | |
519 if (event.pageX || event.pageY) { | |
520 return { x: event.pageX, y: event.pageY }; | |
521 } | |
522 return { | |
523 x: event.clientX + document.body.scrollLeft - document.body.clientLeft, | |
524 y: event.clientY + document.body.scrollTop - document.body.clientTop | |
525 }; | |
526 }; | |
527 | |
528 Drupal.tableDrag.prototype.getPointerOffset = function (target, event) { | |
529 var docPos = $(target).offset(); | |
530 var pointerPos = this.pointerCoords(event); | |
531 return { x: pointerPos.x - docPos.left, y: pointerPos.y - docPos.top }; | |
532 }; | |
533 | |
534 Drupal.tableDrag.prototype.findDropTargetRow = function (x, y) { | |
535 var rows = $(this.table.tBodies[0].rows).not(':hidden'); | |
536 for (var n = 0; n < rows.length; n++) { | |
537 var row = rows[n]; | |
538 var $row = $(row); | |
539 var rowY = $row.offset().top; | |
540 var rowHeight = void 0; | |
541 | |
542 if (row.offsetHeight === 0) { | |
543 rowHeight = parseInt(row.firstChild.offsetHeight, 10) / 2; | |
544 } else { | |
545 rowHeight = parseInt(row.offsetHeight, 10) / 2; | |
546 } | |
547 | |
548 if (y > rowY - rowHeight && y < rowY + rowHeight) { | |
549 if (this.indentEnabled) { | |
550 for (n in this.rowObject.group) { | |
551 if (this.rowObject.group[n] === row) { | |
552 return null; | |
553 } | |
554 } | |
555 } else if (row === this.rowObject.element) { | |
556 return null; | |
557 } | |
558 | |
559 if (!this.rowObject.isValidSwap(row)) { | |
560 return null; | |
561 } | |
562 | |
563 while ($row.is(':hidden') && $row.prev('tr').is(':hidden')) { | |
564 $row = $row.prev('tr:first-of-type'); | |
565 row = $row.get(0); | |
566 } | |
567 return row; | |
568 } | |
569 } | |
570 return null; | |
571 }; | |
572 | |
573 Drupal.tableDrag.prototype.updateFields = function (changedRow) { | |
574 var _this3 = this; | |
575 | |
576 Object.keys(this.tableSettings || {}).forEach(function (group) { | |
577 _this3.updateField(changedRow, group); | |
578 }); | |
579 }; | |
580 | |
581 Drupal.tableDrag.prototype.updateField = function (changedRow, group) { | |
582 var rowSettings = this.rowSettings(group, changedRow); | |
583 var $changedRow = $(changedRow); | |
584 var sourceRow = void 0; | |
585 var $previousRow = void 0; | |
586 var previousRow = void 0; | |
587 var useSibling = void 0; | |
588 | |
589 if (rowSettings.relationship === 'self' || rowSettings.relationship === 'group') { | |
590 sourceRow = changedRow; | |
591 } else if (rowSettings.relationship === 'sibling') { | |
592 $previousRow = $changedRow.prev('tr:first-of-type'); | |
593 previousRow = $previousRow.get(0); | |
594 var $nextRow = $changedRow.next('tr:first-of-type'); | |
595 var nextRow = $nextRow.get(0); | |
596 sourceRow = changedRow; | |
597 if ($previousRow.is('.draggable') && $previousRow.find('.' + group).length) { | |
598 if (this.indentEnabled) { | |
599 if ($previousRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) { | |
600 sourceRow = previousRow; | |
601 } | |
602 } else { | |
603 sourceRow = previousRow; | |
604 } | |
605 } else if ($nextRow.is('.draggable') && $nextRow.find('.' + group).length) { | |
606 if (this.indentEnabled) { | |
607 if ($nextRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) { | |
608 sourceRow = nextRow; | |
609 } | |
610 } else { | |
611 sourceRow = nextRow; | |
612 } | |
613 } | |
614 } else if (rowSettings.relationship === 'parent') { | |
615 $previousRow = $changedRow.prev('tr'); | |
616 previousRow = $previousRow; | |
617 while ($previousRow.length && $previousRow.find('.js-indentation').length >= this.rowObject.indents) { | |
618 $previousRow = $previousRow.prev('tr'); | |
619 previousRow = $previousRow; | |
620 } | |
621 | |
622 if ($previousRow.length) { | |
623 sourceRow = $previousRow.get(0); | |
624 } else { | |
625 sourceRow = $(this.table).find('tr.draggable:first-of-type').get(0); | |
626 if (sourceRow === this.rowObject.element) { | |
627 sourceRow = $(this.rowObject.group[this.rowObject.group.length - 1]).next('tr.draggable').get(0); | |
628 } | |
629 useSibling = true; | |
630 } | |
631 } | |
632 | |
633 this.copyDragClasses(sourceRow, changedRow, group); | |
634 rowSettings = this.rowSettings(group, changedRow); | |
635 | |
636 if (useSibling) { | |
637 rowSettings.relationship = 'sibling'; | |
638 rowSettings.source = rowSettings.target; | |
639 } | |
640 | |
641 var targetClass = '.' + rowSettings.target; | |
642 var targetElement = $changedRow.find(targetClass).get(0); | |
643 | |
644 if (targetElement) { | |
645 var sourceClass = '.' + rowSettings.source; | |
646 var sourceElement = $(sourceClass, sourceRow).get(0); | |
647 switch (rowSettings.action) { | |
648 case 'depth': | |
649 targetElement.value = $(sourceElement).closest('tr').find('.js-indentation').length; | |
650 break; | |
651 | |
652 case 'match': | |
653 targetElement.value = sourceElement.value; | |
654 break; | |
655 | |
656 case 'order': | |
657 { | |
658 var siblings = this.rowObject.findSiblings(rowSettings); | |
659 if ($(targetElement).is('select')) { | |
660 var values = []; | |
661 $(targetElement).find('option').each(function () { | |
662 values.push(this.value); | |
663 }); | |
664 var maxVal = values[values.length - 1]; | |
665 | |
666 $(siblings).find(targetClass).each(function () { | |
667 if (values.length > 0) { | |
668 this.value = values.shift(); | |
669 } else { | |
670 this.value = maxVal; | |
671 } | |
672 }); | |
673 } else { | |
674 var weight = parseInt($(siblings[0]).find(targetClass).val(), 10) || 0; | |
675 $(siblings).find(targetClass).each(function () { | |
676 this.value = weight; | |
677 weight++; | |
678 }); | |
679 } | |
680 break; | |
681 } | |
682 } | |
683 } | |
684 }; | |
685 | |
686 Drupal.tableDrag.prototype.copyDragClasses = function (sourceRow, targetRow, group) { | |
687 var sourceElement = $(sourceRow).find('.' + group); | |
688 var targetElement = $(targetRow).find('.' + group); | |
689 if (sourceElement.length && targetElement.length) { | |
690 targetElement[0].className = sourceElement[0].className; | |
691 } | |
692 }; | |
693 | |
694 Drupal.tableDrag.prototype.checkScroll = function (cursorY) { | |
695 var de = document.documentElement; | |
696 var b = document.body; | |
697 | |
698 var windowHeight = window.innerHeight || (de.clientHeight && de.clientWidth !== 0 ? de.clientHeight : b.offsetHeight); | |
699 this.windowHeight = windowHeight; | |
700 var scrollY = void 0; | |
701 if (document.all) { | |
702 scrollY = !de.scrollTop ? b.scrollTop : de.scrollTop; | |
703 } else { | |
704 scrollY = window.pageYOffset ? window.pageYOffset : window.scrollY; | |
705 } | |
706 this.scrollY = scrollY; | |
707 var trigger = this.scrollSettings.trigger; | |
708 var delta = 0; | |
709 | |
710 if (cursorY - scrollY > windowHeight - trigger) { | |
711 delta = trigger / (windowHeight + scrollY - cursorY); | |
712 delta = delta > 0 && delta < trigger ? delta : trigger; | |
713 return delta * this.scrollSettings.amount; | |
714 } else if (cursorY - scrollY < trigger) { | |
715 delta = trigger / (cursorY - scrollY); | |
716 delta = delta > 0 && delta < trigger ? delta : trigger; | |
717 return -delta * this.scrollSettings.amount; | |
718 } | |
719 }; | |
720 | |
721 Drupal.tableDrag.prototype.setScroll = function (scrollAmount) { | |
722 var self = this; | |
723 | |
724 this.scrollInterval = setInterval(function () { | |
725 self.checkScroll(self.currentPointerCoords.y); | |
726 var aboveTable = self.scrollY > self.table.topY; | |
727 var belowTable = self.scrollY + self.windowHeight < self.table.bottomY; | |
728 if (scrollAmount > 0 && belowTable || scrollAmount < 0 && aboveTable) { | |
729 window.scrollBy(0, scrollAmount); | |
730 } | |
731 }, this.scrollSettings.interval); | |
732 }; | |
733 | |
734 Drupal.tableDrag.prototype.restripeTable = function () { | |
735 $(this.table).find('> tbody > tr.draggable, > tr.draggable').filter(':visible').filter(':odd').removeClass('odd').addClass('even').end().filter(':even').removeClass('even').addClass('odd'); | |
736 }; | |
737 | |
738 Drupal.tableDrag.prototype.onDrag = function () { | |
739 return null; | |
740 }; | |
741 | |
742 Drupal.tableDrag.prototype.onDrop = function () { | |
743 return null; | |
744 }; | |
745 | |
746 Drupal.tableDrag.prototype.row = function (tableRow, method, indentEnabled, maxDepth, addClasses) { | |
747 var $tableRow = $(tableRow); | |
748 | |
749 this.element = tableRow; | |
750 this.method = method; | |
751 this.group = [tableRow]; | |
752 this.groupDepth = $tableRow.find('.js-indentation').length; | |
753 this.changed = false; | |
754 this.table = $tableRow.closest('table')[0]; | |
755 this.indentEnabled = indentEnabled; | |
756 this.maxDepth = maxDepth; | |
757 | |
758 this.direction = ''; | |
759 if (this.indentEnabled) { | |
760 this.indents = $tableRow.find('.js-indentation').length; | |
761 this.children = this.findChildren(addClasses); | |
762 this.group = $.merge(this.group, this.children); | |
763 | |
764 for (var n = 0; n < this.group.length; n++) { | |
765 this.groupDepth = Math.max($(this.group[n]).find('.js-indentation').length, this.groupDepth); | |
766 } | |
767 } | |
768 }; | |
769 | |
770 Drupal.tableDrag.prototype.row.prototype.findChildren = function (addClasses) { | |
771 var parentIndentation = this.indents; | |
772 var currentRow = $(this.element, this.table).next('tr.draggable'); | |
773 var rows = []; | |
774 var child = 0; | |
775 | |
776 function rowIndentation(indentNum, el) { | |
777 var self = $(el); | |
778 if (child === 1 && indentNum === parentIndentation) { | |
779 self.addClass('tree-child-first'); | |
780 } | |
781 if (indentNum === parentIndentation) { | |
782 self.addClass('tree-child'); | |
783 } else if (indentNum > parentIndentation) { | |
784 self.addClass('tree-child-horizontal'); | |
785 } | |
786 } | |
787 | |
788 while (currentRow.length) { | |
789 if (currentRow.find('.js-indentation').length > parentIndentation) { | |
790 child++; | |
791 rows.push(currentRow[0]); | |
792 if (addClasses) { | |
793 currentRow.find('.js-indentation').each(rowIndentation); | |
794 } | |
795 } else { | |
796 break; | |
797 } | |
798 currentRow = currentRow.next('tr.draggable'); | |
799 } | |
800 if (addClasses && rows.length) { | |
801 $(rows[rows.length - 1]).find('.js-indentation:nth-child(' + (parentIndentation + 1) + ')').addClass('tree-child-last'); | |
802 } | |
803 return rows; | |
804 }; | |
805 | |
806 Drupal.tableDrag.prototype.row.prototype.isValidSwap = function (row) { | |
807 var $row = $(row); | |
808 if (this.indentEnabled) { | |
809 var prevRow = void 0; | |
810 var nextRow = void 0; | |
811 if (this.direction === 'down') { | |
812 prevRow = row; | |
813 nextRow = $row.next('tr').get(0); | |
814 } else { | |
815 prevRow = $row.prev('tr').get(0); | |
816 nextRow = row; | |
817 } | |
818 this.interval = this.validIndentInterval(prevRow, nextRow); | |
819 | |
820 if (this.interval.min > this.interval.max) { | |
821 return false; | |
822 } | |
823 } | |
824 | |
825 if (this.table.tBodies[0].rows[0] === row && $row.is(':not(.draggable)')) { | |
826 return false; | |
827 } | |
828 | |
829 return true; | |
830 }; | |
831 | |
832 Drupal.tableDrag.prototype.row.prototype.swap = function (position, row) { | |
833 this.group.forEach(function (row) { | |
834 Drupal.detachBehaviors(row, drupalSettings, 'move'); | |
835 }); | |
836 $(row)[position](this.group); | |
837 | |
838 this.group.forEach(function (row) { | |
839 Drupal.attachBehaviors(row, drupalSettings); | |
840 }); | |
841 this.changed = true; | |
842 this.onSwap(row); | |
843 }; | |
844 | |
845 Drupal.tableDrag.prototype.row.prototype.validIndentInterval = function (prevRow, nextRow) { | |
846 var $prevRow = $(prevRow); | |
847 var maxIndent = void 0; | |
848 | |
849 var minIndent = nextRow ? $(nextRow).find('.js-indentation').length : 0; | |
850 | |
851 if (!prevRow || $prevRow.is(':not(.draggable)') || $(this.element).is('.tabledrag-root')) { | |
852 maxIndent = 0; | |
853 } else { | |
854 maxIndent = $prevRow.find('.js-indentation').length + ($prevRow.is('.tabledrag-leaf') ? 0 : 1); | |
855 | |
856 if (this.maxDepth) { | |
857 maxIndent = Math.min(maxIndent, this.maxDepth - (this.groupDepth - this.indents)); | |
858 } | |
859 } | |
860 | |
861 return { min: minIndent, max: maxIndent }; | |
862 }; | |
863 | |
864 Drupal.tableDrag.prototype.row.prototype.indent = function (indentDiff) { | |
865 var $group = $(this.group); | |
866 | |
867 if (!this.interval) { | |
868 var prevRow = $(this.element).prev('tr').get(0); | |
869 var nextRow = $group.eq(-1).next('tr').get(0); | |
870 this.interval = this.validIndentInterval(prevRow, nextRow); | |
871 } | |
872 | |
873 var indent = this.indents + indentDiff; | |
874 indent = Math.max(indent, this.interval.min); | |
875 indent = Math.min(indent, this.interval.max); | |
876 indentDiff = indent - this.indents; | |
877 | |
878 for (var n = 1; n <= Math.abs(indentDiff); n++) { | |
879 if (indentDiff < 0) { | |
880 $group.find('.js-indentation:first-of-type').remove(); | |
881 this.indents--; | |
882 } else { | |
883 $group.find('td:first-of-type').prepend(Drupal.theme('tableDragIndentation')); | |
884 this.indents++; | |
885 } | |
886 } | |
887 if (indentDiff) { | |
888 this.changed = true; | |
889 this.groupDepth += indentDiff; | |
890 this.onIndent(); | |
891 } | |
892 | |
893 return indentDiff; | |
894 }; | |
895 | |
896 Drupal.tableDrag.prototype.row.prototype.findSiblings = function (rowSettings) { | |
897 var siblings = []; | |
898 var directions = ['prev', 'next']; | |
899 var rowIndentation = this.indents; | |
900 var checkRowIndentation = void 0; | |
901 for (var d = 0; d < directions.length; d++) { | |
902 var checkRow = $(this.element)[directions[d]](); | |
903 while (checkRow.length) { | |
904 if (checkRow.find('.' + rowSettings.target)) { | |
905 if (this.indentEnabled) { | |
906 checkRowIndentation = checkRow.find('.js-indentation').length; | |
907 } | |
908 | |
909 if (!this.indentEnabled || checkRowIndentation === rowIndentation) { | |
910 siblings.push(checkRow[0]); | |
911 } else if (checkRowIndentation < rowIndentation) { | |
912 break; | |
913 } | |
914 } else { | |
915 break; | |
916 } | |
917 checkRow = checkRow[directions[d]](); | |
918 } | |
919 | |
920 if (directions[d] === 'prev') { | |
921 siblings.reverse(); | |
922 siblings.push(this.element); | |
923 } | |
924 } | |
925 return siblings; | |
926 }; | |
927 | |
928 Drupal.tableDrag.prototype.row.prototype.removeIndentClasses = function () { | |
929 var _this4 = this; | |
930 | |
931 Object.keys(this.children || {}).forEach(function (n) { | |
932 $(_this4.children[n]).find('.js-indentation').removeClass('tree-child').removeClass('tree-child-first').removeClass('tree-child-last').removeClass('tree-child-horizontal'); | |
933 }); | |
934 }; | |
935 | |
936 Drupal.tableDrag.prototype.row.prototype.markChanged = function () { | |
937 var marker = Drupal.theme('tableDragChangedMarker'); | |
938 var cell = $(this.element).find('td:first-of-type'); | |
939 if (cell.find('abbr.tabledrag-changed').length === 0) { | |
940 cell.append(marker); | |
941 } | |
942 }; | |
943 | |
944 Drupal.tableDrag.prototype.row.prototype.onIndent = function () { | |
945 return null; | |
946 }; | |
947 | |
948 Drupal.tableDrag.prototype.row.prototype.onSwap = function (swappedRow) { | |
949 return null; | |
950 }; | |
951 | |
952 $.extend(Drupal.theme, { | |
953 tableDragChangedMarker: function tableDragChangedMarker() { | |
954 return '<abbr class="warning tabledrag-changed" title="' + Drupal.t('Changed') + '">*</abbr>'; | |
955 }, | |
956 tableDragIndentation: function tableDragIndentation() { | |
957 return '<div class="js-indentation indentation"> </div>'; | |
958 }, | |
959 tableDragChangedWarning: function tableDragChangedWarning() { | |
960 return '<div class="tabledrag-changed-warning messages messages--warning" role="alert">' + Drupal.theme('tableDragChangedMarker') + ' ' + Drupal.t('You have unsaved changes.') + '</div>'; | |
961 } | |
962 }); | |
963 })(jQuery, Drupal, drupalSettings); |