X-Git-Url: https://yaffs.net/gitweb/?a=blobdiff_plain;f=web%2Fcore%2Fmisc%2Ftabledrag.es6.js;h=76643c3a478c70fd3ea61e6d421296b9c75fb7dc;hb=4e1bfbf98b844da83b18aca92ef00f11a4735806;hp=0a69deb2ca78bcf5e079b7a905e0a231310d7b63;hpb=af6d1fb995500ae68849458ee10d66abbdcfb252;p=yaffs-website diff --git a/web/core/misc/tabledrag.es6.js b/web/core/misc/tabledrag.es6.js index 0a69deb2c..76643c3a4 100644 --- a/web/core/misc/tabledrag.es6.js +++ b/web/core/misc/tabledrag.es6.js @@ -9,13 +9,15 @@ * @event columnschange */ -(function ($, Drupal, drupalSettings) { +(function($, Drupal, drupalSettings) { /** * Store the state of weight columns display for all tables. * * Default value is to hide weight columns. */ - let showWeight = JSON.parse(localStorage.getItem('Drupal.tableDrag.showWeight')); + let showWeight = JSON.parse( + localStorage.getItem('Drupal.tableDrag.showWeight'), + ); /** * Drag and drop table rows with field manipulation. @@ -37,12 +39,20 @@ if (table.length) { // Create the new tableDrag instance. Save in the Drupal variable // to allow other scripts access to the object. - Drupal.tableDrag[base] = new Drupal.tableDrag(table[0], settings.tableDrag[base]); + Drupal.tableDrag[base] = new Drupal.tableDrag( + table[0], + settings.tableDrag[base], + ); } } - Object.keys(settings.tableDrag || {}).forEach((base) => { - initTableDrag($(context).find(`#${base}`).once('tabledrag'), base); + Object.keys(settings.tableDrag || {}).forEach(base => { + initTableDrag( + $(context) + .find(`#${base}`) + .once('tabledrag'), + base, + ); }); }, }; @@ -57,7 +67,7 @@ * @param {object} tableSettings * Settings for the table added via drupal_add_dragtable(). */ - Drupal.tableDrag = function (table, tableSettings) { + Drupal.tableDrag = function(table, tableSettings) { const self = this; const $table = $(table); @@ -170,8 +180,8 @@ * @type {bool} */ this.indentEnabled = false; - Object.keys(tableSettings || {}).forEach((group) => { - Object.keys(tableSettings[group] || {}).forEach((n) => { + Object.keys(tableSettings || {}).forEach(group => { + Object.keys(tableSettings[group] || {}).forEach(n => { if (tableSettings[group][n].relationship === 'parent') { this.indentEnabled = true; } @@ -192,33 +202,46 @@ // manually append 2 indentations in the first draggable row, measure // the offset, then remove. const indent = Drupal.theme('tableDragIndentation'); - const testRow = $('').addClass('draggable').appendTo(table); - const testCell = $('').appendTo(testRow).prepend(indent).prepend(indent); + const testRow = $('') + .addClass('draggable') + .appendTo(table); + const testCell = $('') + .appendTo(testRow) + .prepend(indent) + .prepend(indent); const $indentation = testCell.find('.js-indentation'); /** * * @type {number} */ - this.indentAmount = $indentation.get(1).offsetLeft - $indentation.get(0).offsetLeft; + this.indentAmount = + $indentation.get(1).offsetLeft - $indentation.get(0).offsetLeft; testRow.remove(); } // Make each applicable row draggable. // Match immediate children of the parent element to allow nesting. - $table.find('> tr.draggable, > tbody > tr.draggable').each(function () { + $table.find('> tr.draggable, > tbody > tr.draggable').each(function() { self.makeDraggable(this); }); // Add a link before the table for users to show or hide weight columns. - $table.before($('') - .attr('title', Drupal.t('Re-order rows by numerical weight instead of dragging.')) - .on('click', $.proxy(function (e) { - e.preventDefault(); - this.toggleColumns(); - }, this)) - .wrap('
') - .parent(), + $table.before( + $('') + .attr( + 'title', + Drupal.t('Re-order rows by numerical weight instead of dragging.'), + ) + .on( + 'click', + $.proxy(function(e) { + e.preventDefault(); + this.toggleColumns(); + }, this), + ) + .wrap('
') + .parent(), ); // Initialize the specified columns (for example, weight or parent columns) @@ -229,21 +252,28 @@ // Add event bindings to the document. The self variable is passed along // as event handlers do not have direct access to the tableDrag object. - $(document).on('touchmove', event => self.dragRow(event.originalEvent.touches[0], self)); - $(document).on('touchend', event => self.dropRow(event.originalEvent.touches[0], self)); + $(document).on('touchmove', event => + self.dragRow(event.originalEvent.touches[0], self), + ); + $(document).on('touchend', event => + self.dropRow(event.originalEvent.touches[0], self), + ); $(document).on('mousemove pointermove', event => self.dragRow(event, self)); $(document).on('mouseup pointerup', event => self.dropRow(event, self)); // React to localStorage event showing or hiding weight columns. - $(window).on('storage', $.proxy(function (e) { - // Only react to 'Drupal.tableDrag.showWeight' value change. - if (e.originalEvent.key === 'Drupal.tableDrag.showWeight') { - // This was changed in another window, get the new value for this - // window. - showWeight = JSON.parse(e.originalEvent.newValue); - this.displayColumns(showWeight); - } - }, this)); + $(window).on( + 'storage', + $.proxy(function(e) { + // Only react to 'Drupal.tableDrag.showWeight' value change. + if (e.originalEvent.key === 'Drupal.tableDrag.showWeight') { + // This was changed in another window, get the new value for this + // window. + showWeight = JSON.parse(e.originalEvent.newValue); + this.displayColumns(showWeight); + } + }, this), + ); }; /** @@ -253,32 +283,38 @@ * show/hide it. Finally, hide columns if user does not have a * 'Drupal.tableDrag.showWeight' localStorage value. */ - Drupal.tableDrag.prototype.initColumns = function () { + Drupal.tableDrag.prototype.initColumns = function() { const $table = this.$table; let hidden; let cell; let columnIndex; - Object.keys(this.tableSettings || {}).forEach((group) => { + Object.keys(this.tableSettings || {}).forEach(group => { // Find the first field in this group. - // eslint-disable-next-line no-restricted-syntax - for (const d in this.tableSettings[group]) { - if (this.tableSettings[group].hasOwnProperty(d)) { - const field = $table.find(`.${this.tableSettings[group][d].target}`).eq(0); - if (field.length && this.tableSettings[group][d].hidden) { - hidden = this.tableSettings[group][d].hidden; - cell = field.closest('td'); - break; - } + Object.keys(this.tableSettings[group]).some(tableSetting => { + const field = $table + .find(`.${this.tableSettings[group][tableSetting].target}`) + .eq(0); + if (field.length && this.tableSettings[group][tableSetting].hidden) { + hidden = this.tableSettings[group][tableSetting].hidden; + cell = field.closest('td'); + return true; } - } + return false; + }); // Mark the column containing this field so it can be hidden. if (hidden && cell[0]) { // Add 1 to our indexes. The nth-child selector is 1 based, not 0 // based. Match immediate children of the parent element to allow // nesting. - columnIndex = cell.parent().find('> td').index(cell.get(0)) + 1; - $table.find('> thead > tr, > tbody > tr, > tr').each(this.addColspanClass(columnIndex)); + columnIndex = + cell + .parent() + .find('> td') + .index(cell.get(0)) + 1; + $table + .find('> thead > tr, > tbody > tr, > tr') + .each(this.addColspanClass(columnIndex)); } }); this.displayColumns(showWeight); @@ -295,14 +331,14 @@ * @return {function} * Function to add colspan class. */ - Drupal.tableDrag.prototype.addColspanClass = function (columnIndex) { - return function () { + Drupal.tableDrag.prototype.addColspanClass = function(columnIndex) { + return function() { // Get the columnIndex and adjust for any colspans in this row. const $row = $(this); let index = columnIndex; const cells = $row.children(); let cell; - cells.each(function (n) { + cells.each(function(n) { if (n < index && this.colSpan && this.colSpan > 1) { index -= this.colSpan - 1; } @@ -312,8 +348,7 @@ if (cell[0].colSpan && cell[0].colSpan > 1) { // If this cell has a colspan, mark it so we can reduce the colspan. cell.addClass('tabledrag-has-colspan'); - } - else { + } else { // Mark this cell so we can hide it. cell.addClass('tabledrag-hide'); } @@ -329,7 +364,7 @@ * @param {bool} displayWeight * 'true' will show weight columns. */ - Drupal.tableDrag.prototype.displayColumns = function (displayWeight) { + Drupal.tableDrag.prototype.displayColumns = function(displayWeight) { if (displayWeight) { this.showColumns(); } @@ -339,7 +374,9 @@ } // Trigger an event to allow other scripts to react to this display change. // Force the extra parameter as a bool. - $('table').findOnce('tabledrag').trigger('columnschange', !!displayWeight); + $('table') + .findOnce('tabledrag') + .trigger('columnschange', !!displayWeight); }; /** @@ -347,14 +384,13 @@ * * Store only default override. */ - Drupal.tableDrag.prototype.toggleColumns = function () { + Drupal.tableDrag.prototype.toggleColumns = function() { showWeight = !showWeight; this.displayColumns(showWeight); if (showWeight) { // Save default override. localStorage.setItem('Drupal.tableDrag.showWeight', showWeight); - } - else { + } else { // Reset the value to its default. localStorage.removeItem('Drupal.tableDrag.showWeight'); } @@ -365,14 +401,14 @@ * * Undo showColumns(). */ - Drupal.tableDrag.prototype.hideColumns = function () { + Drupal.tableDrag.prototype.hideColumns = function() { const $tables = $('table').findOnce('tabledrag'); // Hide weight/parent cells and headers. $tables.find('.tabledrag-hide').css('display', 'none'); // Show TableDrag handles. $tables.find('.tabledrag-handle').css('display', ''); // Reduce the colspan of any effected multi-span columns. - $tables.find('.tabledrag-has-colspan').each(function () { + $tables.find('.tabledrag-has-colspan').each(function() { this.colSpan = this.colSpan - 1; }); // Change link text. @@ -384,14 +420,14 @@ * * Undo hideColumns(). */ - Drupal.tableDrag.prototype.showColumns = function () { + Drupal.tableDrag.prototype.showColumns = function() { const $tables = $('table').findOnce('tabledrag'); // Show weight/parent cells and headers. $tables.find('.tabledrag-hide').css('display', ''); // Hide TableDrag handles. $tables.find('.tabledrag-handle').css('display', 'none'); // Increase the colspan for any columns where it was previously reduced. - $tables.find('.tabledrag-has-colspan').each(function () { + $tables.find('.tabledrag-has-colspan').each(function() { this.colSpan = this.colSpan + 1; }); // Change link text. @@ -409,26 +445,23 @@ * @return {object} * The table row settings. */ - Drupal.tableDrag.prototype.rowSettings = function (group, row) { + Drupal.tableDrag.prototype.rowSettings = function(group, row) { const field = $(row).find(`.${group}`); const tableSettingsGroup = this.tableSettings[group]; - // eslint-disable-next-line no-restricted-syntax - for (const delta in tableSettingsGroup) { - if (tableSettingsGroup.hasOwnProperty(delta)) { + return Object.keys(tableSettingsGroup) + .map(delta => { const targetClass = tableSettingsGroup[delta].target; + let rowSettings; if (field.is(`.${targetClass}`)) { // Return a copy of the row settings. - const rowSettings = {}; - // eslint-disable-next-line no-restricted-syntax - for (const n in tableSettingsGroup[delta]) { - if (tableSettingsGroup[delta].hasOwnProperty(n)) { - rowSettings[n] = tableSettingsGroup[delta][n]; - } - } - return rowSettings; + rowSettings = {}; + Object.keys(tableSettingsGroup[delta]).forEach(n => { + rowSettings[n] = tableSettingsGroup[delta][n]; + }); } - } - } + return rowSettings; + }) + .filter(rowSetting => rowSetting)[0]; }; /** @@ -437,25 +470,38 @@ * @param {HTMLElement} item * The item to add event handlers to. */ - Drupal.tableDrag.prototype.makeDraggable = function (item) { + Drupal.tableDrag.prototype.makeDraggable = function(item) { const self = this; const $item = $(item); // Add a class to the title link. - $item.find('td:first-of-type').find('a').addClass('menu-item__link'); + $item + .find('td:first-of-type') + .find('a') + .addClass('menu-item__link'); // Create the handle. - const handle = $('
 
').attr('title', Drupal.t('Drag to re-order')); + const handle = $( + '
 
', + ).attr('title', Drupal.t('Drag to re-order')); // Insert the handle after indentations (if any). - const $indentationLast = $item.find('td:first-of-type').find('.js-indentation').eq(-1); + const $indentationLast = $item + .find('td:first-of-type') + .find('.js-indentation') + .eq(-1); if ($indentationLast.length) { $indentationLast.after(handle); // Update the total width of indentation in this entire table. - self.indentCount = Math.max($item.find('.js-indentation').length, self.indentCount); - } - else { - $item.find('td').eq(0).prepend(handle); + self.indentCount = Math.max( + $item.find('.js-indentation').length, + self.indentCount, + ); + } else { + $item + .find('td') + .eq(0) + .prepend(handle); } - handle.on('mousedown touchstart pointerdown', (event) => { + handle.on('mousedown touchstart pointerdown', event => { event.preventDefault(); if (event.originalEvent.type === 'touchstart') { event = event.originalEvent.touches[0]; @@ -464,7 +510,7 @@ }); // Prevent the anchor tag from jumping us to the top of the page. - handle.on('click', (e) => { + handle.on('click', e => { e.preventDefault(); }); @@ -475,17 +521,23 @@ // On blur, fire the same function as a touchend/mouseup. This is used to // update values after a row has been moved through the keyboard support. - handle.on('blur', (event) => { + handle.on('blur', event => { if (self.rowObject && self.safeBlur) { self.dropRow(event, self); } }); // Add arrow-key support to the handle. - handle.on('keydown', (event) => { + handle.on('keydown', event => { // If a rowObject doesn't yet exist and this isn't the tab key. if (event.keyCode !== 9 && !self.rowObject) { - self.rowObject = new self.row(item, 'keyboard', self.indentEnabled, self.maxDepth, true); + self.rowObject = new self.row( + item, + 'keyboard', + self.indentEnabled, + self.maxDepth, + true, + ); } let keyChange = false; @@ -521,18 +573,25 @@ if ($(item).is('.tabledrag-root')) { // Swap with the previous top-level row. groupHeight = 0; - while (previousRow && $previousRow.find('.js-indentation').length) { + while ( + previousRow && + $previousRow.find('.js-indentation').length + ) { $previousRow = $(previousRow).prev('tr:first-of-type'); previousRow = $previousRow.get(0); - groupHeight += $previousRow.is(':hidden') ? 0 : previousRow.offsetHeight; + groupHeight += $previousRow.is(':hidden') + ? 0 + : previousRow.offsetHeight; } if (previousRow) { self.rowObject.swap('before', previousRow); // No need to check for indentation, 0 is the only valid one. window.scrollBy(0, -groupHeight); } - } - else if (self.table.tBodies[0].rows[0] !== previousRow || $previousRow.is('.draggable')) { + } else if ( + self.table.tBodies[0].rows[0] !== previousRow || + $previousRow.is('.draggable') + ) { // Swap with the previous row (unless previous row is the first // one and undraggable). self.rowObject.swap('before', previousRow); @@ -557,7 +616,9 @@ case 40: // Safari down arrow. case 63233: { - let $nextRow = $(self.rowObject.group).eq(-1).next('tr:first-of-type'); + let $nextRow = $(self.rowObject.group) + .eq(-1) + .next('tr:first-of-type'); let nextRow = $nextRow.get(0); while (nextRow && $nextRow.is(':hidden')) { $nextRow = $(nextRow).next('tr:first-of-type'); @@ -572,18 +633,25 @@ if ($(item).is('.tabledrag-root')) { // Swap with the next group (necessarily a top-level one). groupHeight = 0; - const nextGroup = new self.row(nextRow, 'keyboard', self.indentEnabled, self.maxDepth, false); + const nextGroup = new self.row( + nextRow, + 'keyboard', + self.indentEnabled, + self.maxDepth, + false, + ); if (nextGroup) { - $(nextGroup.group).each(function () { + $(nextGroup.group).each(function() { groupHeight += $(this).is(':hidden') ? 0 : this.offsetHeight; }); - const nextGroupRow = $(nextGroup.group).eq(-1).get(0); + const nextGroupRow = $(nextGroup.group) + .eq(-1) + .get(0); self.rowObject.swap('after', nextGroupRow); // No need to check for indentation, 0 is the only valid one. window.scrollBy(0, parseInt(groupHeight, 10)); } - } - else { + } else { // Swap with the next row. self.rowObject.swap('after', nextRow); self.rowObject.interval = null; @@ -621,7 +689,7 @@ // scrolling. IE and Safari will suppress scrolling on keydown, but all // other browsers need to return false on keypress. // http://www.quirksmode.org/js/keys.html - handle.on('keypress', (event) => { + handle.on('keypress', event => { /* eslint-disable no-fallthrough */ switch (event.keyCode) { @@ -650,7 +718,7 @@ * @param {HTMLElement} item * The item that that is being dragged. */ - Drupal.tableDrag.prototype.dragStart = function (event, self, item) { + Drupal.tableDrag.prototype.dragStart = function(event, self, item) { // Create a new dragObject recording the pointer information. self.dragObject = {}; self.dragObject.initOffset = self.getPointerOffset(item, event); @@ -661,11 +729,19 @@ // If there's a lingering row object from the keyboard, remove its focus. if (self.rowObject) { - $(self.rowObject.element).find('a.tabledrag-handle').trigger('blur'); + $(self.rowObject.element) + .find('a.tabledrag-handle') + .trigger('blur'); } // Create a new rowObject for manipulation of this row. - self.rowObject = new self.row(item, 'pointer', self.indentEnabled, self.maxDepth, true); + self.rowObject = new self.row( + item, + 'pointer', + self.indentEnabled, + self.maxDepth, + true, + ); // Save the position of the table. self.table.topY = $(self.table).offset().top; @@ -692,7 +768,7 @@ * @return {bool|undefined} * Undefined if no dragObject is defined, false otherwise. */ - Drupal.tableDrag.prototype.dragRow = function (event, self) { + Drupal.tableDrag.prototype.dragRow = function(event, self) { if (self.dragObject) { self.currentPointerCoords = self.pointerCoords(event); const y = self.currentPointerCoords.y - self.dragObject.initOffset.y; @@ -708,8 +784,10 @@ // Stop any current scrolling. clearInterval(self.scrollInterval); // Continue scrolling if the mouse has moved in the scroll direction. - if ((scrollAmount > 0 && self.rowObject.direction === 'down') - || (scrollAmount < 0 && self.rowObject.direction === 'up')) { + if ( + (scrollAmount > 0 && self.rowObject.direction === 'down') || + (scrollAmount < 0 && self.rowObject.direction === 'up') + ) { self.setScroll(scrollAmount); } @@ -718,8 +796,7 @@ if (currentRow) { if (self.rowObject.direction === 'down') { self.rowObject.swap('after', currentRow, self); - } - else { + } else { self.rowObject.swap('before', currentRow, self); } if (self.striping === true) { @@ -730,7 +807,8 @@ // Similar to row swapping, handle indentations. if (self.indentEnabled) { - const xDiff = self.currentPointerCoords.x - self.dragObject.indentPointerPos.x; + const xDiff = + self.currentPointerCoords.x - self.dragObject.indentPointerPos.x; // Set the number of indentations the pointer has been moved left or // right. const indentDiff = Math.round(xDiff / self.indentAmount); @@ -738,7 +816,8 @@ // restricted according to the rows around this row. const indentChange = self.rowObject.indent(indentDiff); // Update table and pointer indentations. - self.dragObject.indentPointerPos.x += self.indentAmount * indentChange * self.rtl; + self.dragObject.indentPointerPos.x += + self.indentAmount * indentChange * self.rtl; self.indentCount = Math.max(self.indentCount, self.rowObject.indents); } @@ -754,7 +833,7 @@ * @param {Drupal.tableDrag} self * The tableDrag instance. */ - Drupal.tableDrag.prototype.dropRow = function (event, self) { + Drupal.tableDrag.prototype.dropRow = function(event, self) { let droppedRow; let $droppedRow; @@ -769,10 +848,10 @@ // If a setting exists for affecting the entire group, update all the // fields in the entire dragged group. - Object.keys(self.tableSettings || {}).forEach((group) => { + Object.keys(self.tableSettings || {}).forEach(group => { const rowSettings = self.rowSettings(group, droppedRow); if (rowSettings.relationship === 'group') { - Object.keys(self.rowObject.children || {}).forEach((n) => { + Object.keys(self.rowObject.children || {}).forEach(n => { self.updateField(self.rowObject.children[n], group); }); } @@ -780,7 +859,10 @@ self.rowObject.markChanged(); if (self.changed === false) { - $(Drupal.theme('tableDragChangedWarning')).insertBefore(self.table).hide().fadeIn('slow'); + $(Drupal.theme('tableDragChangedWarning')) + .insertBefore(self.table) + .hide() + .fadeIn('slow'); self.changed = true; } } @@ -814,13 +896,13 @@ * @return {object} * An object with `x` and `y` keys indicating the position. */ - Drupal.tableDrag.prototype.pointerCoords = function (event) { + Drupal.tableDrag.prototype.pointerCoords = function(event) { if (event.pageX || event.pageY) { return { x: event.pageX, y: event.pageY }; } return { - x: (event.clientX + document.body.scrollLeft) - document.body.clientLeft, - y: (event.clientY + document.body.scrollTop) - document.body.clientTop, + x: event.clientX + document.body.scrollLeft - document.body.clientLeft, + y: event.clientY + document.body.scrollTop - document.body.clientTop, }; }; @@ -838,7 +920,7 @@ * @return {object} * An object with `x` and `y` keys indicating the position. */ - Drupal.tableDrag.prototype.getPointerOffset = function (target, event) { + Drupal.tableDrag.prototype.getPointerOffset = function(target, event) { const docPos = $(target).offset(); const pointerPos = this.pointerCoords(event); return { x: pointerPos.x - docPos.left, y: pointerPos.y - docPos.top }; @@ -857,7 +939,7 @@ * @return {*} * The drop target row, if found. */ - Drupal.tableDrag.prototype.findDropTargetRow = function (x, y) { + Drupal.tableDrag.prototype.findDropTargetRow = function(x, y) { const rows = $(this.table.tBodies[0].rows).not(':hidden'); for (let n = 0; n < rows.length; n++) { let row = rows[n]; @@ -876,14 +958,15 @@ } // Because we always insert before, we need to offset the height a bit. - if ((y > (rowY - rowHeight)) && (y < (rowY + rowHeight))) { + if (y > rowY - rowHeight && y < rowY + rowHeight) { if (this.indentEnabled) { // Check that this row is not a child of the row being dragged. - // eslint-disable-next-line no-restricted-syntax - for (n in this.rowObject.group) { - if (this.rowObject.group[n] === row) { - return null; - } + if ( + Object.keys(this.rowObject.group).some( + o => this.rowObject.group[o] === row, + ) + ) { + return null; } } // Do not allow a row to be swapped with itself. @@ -915,8 +998,8 @@ * @param {HTMLElement} changedRow * DOM object for the row that was just dropped. */ - Drupal.tableDrag.prototype.updateFields = function (changedRow) { - Object.keys(this.tableSettings || {}).forEach((group) => { + Drupal.tableDrag.prototype.updateFields = function(changedRow) { + Object.keys(this.tableSettings || {}).forEach(group => { // Each group may have a different setting for relationship, so we find // the source rows for each separately. this.updateField(changedRow, group); @@ -931,7 +1014,7 @@ * @param {string} group * The settings group on which field updates will occur. */ - Drupal.tableDrag.prototype.updateField = function (changedRow, group) { + Drupal.tableDrag.prototype.updateField = function(changedRow, group) { let rowSettings = this.rowSettings(group, changedRow); const $changedRow = $(changedRow); let sourceRow; @@ -939,7 +1022,10 @@ let previousRow; let useSibling; // Set the row as its own target. - if (rowSettings.relationship === 'self' || rowSettings.relationship === 'group') { + if ( + rowSettings.relationship === 'self' || + rowSettings.relationship === 'group' + ) { sourceRow = changedRow; } // Siblings are easy, check previous and next rows. @@ -949,23 +1035,32 @@ const $nextRow = $changedRow.next('tr:first-of-type'); const nextRow = $nextRow.get(0); sourceRow = changedRow; - if ($previousRow.is('.draggable') && $previousRow.find(`.${group}`).length) { + if ( + $previousRow.is('.draggable') && + $previousRow.find(`.${group}`).length + ) { if (this.indentEnabled) { - if ($previousRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) { + if ( + $previousRow.find('.js-indentations').length === + $changedRow.find('.js-indentations').length + ) { sourceRow = previousRow; } - } - else { + } else { sourceRow = previousRow; } - } - else if ($nextRow.is('.draggable') && $nextRow.find(`.${group}`).length) { + } else if ( + $nextRow.is('.draggable') && + $nextRow.find(`.${group}`).length + ) { if (this.indentEnabled) { - if ($nextRow.find('.js-indentations').length === $changedRow.find('.js-indentations').length) { + if ( + $nextRow.find('.js-indentations').length === + $changedRow.find('.js-indentations').length + ) { sourceRow = nextRow; } - } - else { + } else { sourceRow = nextRow; } } @@ -975,7 +1070,10 @@ else if (rowSettings.relationship === 'parent') { $previousRow = $changedRow.prev('tr'); previousRow = $previousRow; - while ($previousRow.length && $previousRow.find('.js-indentation').length >= this.rowObject.indents) { + while ( + $previousRow.length && + $previousRow.find('.js-indentation').length >= this.rowObject.indents + ) { $previousRow = $previousRow.prev('tr'); previousRow = $previousRow; } @@ -989,9 +1087,13 @@ // Use the first row in the table as source, because it's guaranteed to // be at the root level. Find the first item, then compare this row // against it as a sibling. - sourceRow = $(this.table).find('tr.draggable:first-of-type').get(0); + sourceRow = $(this.table) + .find('tr.draggable:first-of-type') + .get(0); if (sourceRow === this.rowObject.element) { - sourceRow = $(this.rowObject.group[this.rowObject.group.length - 1]).next('tr.draggable').get(0); + sourceRow = $(this.rowObject.group[this.rowObject.group.length - 1]) + .next('tr.draggable') + .get(0); } useSibling = true; } @@ -1019,7 +1121,9 @@ switch (rowSettings.action) { case 'depth': // Get the depth of the target row. - targetElement.value = $(sourceElement).closest('tr').find('.js-indentation').length; + targetElement.value = $(sourceElement) + .closest('tr') + .find('.js-indentation').length; break; case 'match': @@ -1032,29 +1136,39 @@ if ($(targetElement).is('select')) { // Get a list of acceptable values. const values = []; - $(targetElement).find('option').each(function () { - values.push(this.value); - }); + $(targetElement) + .find('option') + .each(function() { + values.push(this.value); + }); const maxVal = values[values.length - 1]; // Populate the values in the siblings. - $(siblings).find(targetClass).each(function () { - // If there are more items than possible values, assign the - // maximum value to the row. - if (values.length > 0) { - this.value = values.shift(); - } - else { - this.value = maxVal; - } - }); - } - else { + $(siblings) + .find(targetClass) + .each(function() { + // If there are more items than possible values, assign the + // maximum value to the row. + if (values.length > 0) { + this.value = values.shift(); + } else { + this.value = maxVal; + } + }); + } else { // Assume a numeric input field. - let weight = parseInt($(siblings[0]).find(targetClass).val(), 10) || 0; - $(siblings).find(targetClass).each(function () { - this.value = weight; - weight++; - }); + let weight = + parseInt( + $(siblings[0]) + .find(targetClass) + .val(), + 10, + ) || 0; + $(siblings) + .find(targetClass) + .each(function() { + this.value = weight; + weight++; + }); } break; } @@ -1076,7 +1190,11 @@ * @param {string} group * The group selector. */ - Drupal.tableDrag.prototype.copyDragClasses = function (sourceRow, targetRow, group) { + Drupal.tableDrag.prototype.copyDragClasses = function( + sourceRow, + targetRow, + group, + ) { const sourceElement = $(sourceRow).find(`.${group}`); const targetElement = $(targetRow).find(`.${group}`); if (sourceElement.length && targetElement.length) { @@ -1093,17 +1211,20 @@ * @return {number} * The suggested scroll. */ - Drupal.tableDrag.prototype.checkScroll = function (cursorY) { + Drupal.tableDrag.prototype.checkScroll = function(cursorY) { const de = document.documentElement; const b = document.body; - const windowHeight = window.innerHeight || (de.clientHeight && de.clientWidth !== 0 ? de.clientHeight : b.offsetHeight); + const windowHeight = + window.innerHeight || + (de.clientHeight && de.clientWidth !== 0 + ? de.clientHeight + : b.offsetHeight); this.windowHeight = windowHeight; let scrollY; if (document.all) { scrollY = !de.scrollTop ? b.scrollTop : de.scrollTop; - } - else { + } else { scrollY = window.pageYOffset ? window.pageYOffset : window.scrollY; } this.scrollY = scrollY; @@ -1112,13 +1233,13 @@ // Return a scroll speed relative to the edge of the screen. if (cursorY - scrollY > windowHeight - trigger) { - delta = trigger / ((windowHeight + scrollY) - cursorY); - delta = (delta > 0 && delta < trigger) ? delta : trigger; + delta = trigger / (windowHeight + scrollY - cursorY); + delta = delta > 0 && delta < trigger ? delta : trigger; return delta * this.scrollSettings.amount; } - else if (cursorY - scrollY < trigger) { + if (cursorY - scrollY < trigger) { delta = trigger / (cursorY - scrollY); - delta = (delta > 0 && delta < trigger) ? delta : trigger; + delta = delta > 0 && delta < trigger ? delta : trigger; return -delta * this.scrollSettings.amount; } }; @@ -1129,7 +1250,7 @@ * @param {number} scrollAmount * The amount of scroll to apply to the window. */ - Drupal.tableDrag.prototype.setScroll = function (scrollAmount) { + Drupal.tableDrag.prototype.setScroll = function(scrollAmount) { const self = this; this.scrollInterval = setInterval(() => { @@ -1137,8 +1258,10 @@ self.checkScroll(self.currentPointerCoords.y); const aboveTable = self.scrollY > self.table.topY; const belowTable = self.scrollY + self.windowHeight < self.table.bottomY; - if ((scrollAmount > 0 && belowTable) - || (scrollAmount < 0 && aboveTable)) { + if ( + (scrollAmount > 0 && belowTable) || + (scrollAmount < 0 && aboveTable) + ) { window.scrollBy(0, scrollAmount); } }, this.scrollSettings.interval); @@ -1147,7 +1270,7 @@ /** * Command to restripe table properly. */ - Drupal.tableDrag.prototype.restripeTable = function () { + Drupal.tableDrag.prototype.restripeTable = function() { // :even and :odd are reversed because jQuery counts from 0 and // we count from 1, so we're out of sync. // Match immediate children of the parent element to allow nesting. @@ -1169,7 +1292,7 @@ * @return {null} * Returns null when the stub function is used. */ - Drupal.tableDrag.prototype.onDrag = function () { + Drupal.tableDrag.prototype.onDrag = function() { return null; }; @@ -1179,7 +1302,7 @@ * @return {null} * Returns null when the stub function is used. */ - Drupal.tableDrag.prototype.onDrop = function () { + Drupal.tableDrag.prototype.onDrop = function() { return null; }; @@ -1199,7 +1322,13 @@ * Whether we want to add classes to this row to indicate child * relationships. */ - Drupal.tableDrag.prototype.row = function (tableRow, method, indentEnabled, maxDepth, addClasses) { + Drupal.tableDrag.prototype.row = function( + tableRow, + method, + indentEnabled, + maxDepth, + addClasses, + ) { const $tableRow = $(tableRow); this.element = tableRow; @@ -1218,7 +1347,10 @@ this.group = $.merge(this.group, this.children); // Find the depth of this entire group. for (let n = 0; n < this.group.length; n++) { - this.groupDepth = Math.max($(this.group[n]).find('.js-indentation').length, this.groupDepth); + this.groupDepth = Math.max( + $(this.group[n]).find('.js-indentation').length, + this.groupDepth, + ); } } }; @@ -1233,7 +1365,7 @@ * @return {Array} * An array of children of the row. */ - Drupal.tableDrag.prototype.row.prototype.findChildren = function (addClasses) { + Drupal.tableDrag.prototype.row.prototype.findChildren = function(addClasses) { const parentIndentation = this.indents; let currentRow = $(this.element, this.table).next('tr.draggable'); const rows = []; @@ -1241,13 +1373,12 @@ function rowIndentation(indentNum, el) { const self = $(el); - if (child === 1 && (indentNum === parentIndentation)) { + if (child === 1 && indentNum === parentIndentation) { self.addClass('tree-child-first'); } if (indentNum === parentIndentation) { self.addClass('tree-child'); - } - else if (indentNum > parentIndentation) { + } else if (indentNum > parentIndentation) { self.addClass('tree-child-horizontal'); } } @@ -1260,14 +1391,15 @@ if (addClasses) { currentRow.find('.js-indentation').each(rowIndentation); } - } - else { + } else { break; } currentRow = currentRow.next('tr.draggable'); } if (addClasses && rows.length) { - $(rows[rows.length - 1]).find(`.js-indentation:nth-child(${parentIndentation + 1})`).addClass('tree-child-last'); + $(rows[rows.length - 1]) + .find(`.js-indentation:nth-child(${parentIndentation + 1})`) + .addClass('tree-child-last'); } return rows; }; @@ -1281,7 +1413,7 @@ * @return {bool} * Whether the swap is a valid swap or not. */ - Drupal.tableDrag.prototype.row.prototype.isValidSwap = function (row) { + Drupal.tableDrag.prototype.row.prototype.isValidSwap = function(row) { const $row = $(row); if (this.indentEnabled) { let prevRow; @@ -1289,8 +1421,7 @@ if (this.direction === 'down') { prevRow = row; nextRow = $row.next('tr').get(0); - } - else { + } else { prevRow = $row.prev('tr').get(0); nextRow = row; } @@ -1318,14 +1449,14 @@ * @param {HTMLElement} row * DOM element what will be swapped with the row group. */ - Drupal.tableDrag.prototype.row.prototype.swap = function (position, row) { + Drupal.tableDrag.prototype.row.prototype.swap = function(position, row) { // Makes sure only DOM object are passed to Drupal.detachBehaviors(). - this.group.forEach((row) => { + this.group.forEach(row => { Drupal.detachBehaviors(row, drupalSettings, 'move'); }); $(row)[position](this.group); // Makes sure only DOM object are passed to Drupal.attachBehaviors()s. - this.group.forEach((row) => { + this.group.forEach(row => { Drupal.attachBehaviors(row, drupalSettings); }); this.changed = true; @@ -1346,7 +1477,10 @@ * An object with the keys `min` and `max` to indicate the valid indent * interval. */ - Drupal.tableDrag.prototype.row.prototype.validIndentInterval = function (prevRow, nextRow) { + Drupal.tableDrag.prototype.row.prototype.validIndentInterval = function( + prevRow, + nextRow, + ) { const $prevRow = $(prevRow); let maxIndent; @@ -1355,19 +1489,27 @@ const minIndent = nextRow ? $(nextRow).find('.js-indentation').length : 0; // Maximum indentation: - if (!prevRow || $prevRow.is(':not(.draggable)') || $(this.element).is('.tabledrag-root')) { + if ( + !prevRow || + $prevRow.is(':not(.draggable)') || + $(this.element).is('.tabledrag-root') + ) { // Do not indent: // - the first row in the table, // - rows dragged below a non-draggable row, // - 'root' rows. maxIndent = 0; - } - else { + } else { // Do not go deeper than as a child of the previous row. - maxIndent = $prevRow.find('.js-indentation').length + ($prevRow.is('.tabledrag-leaf') ? 0 : 1); + maxIndent = + $prevRow.find('.js-indentation').length + + ($prevRow.is('.tabledrag-leaf') ? 0 : 1); // Limit by the maximum allowed depth for the table. if (this.maxDepth) { - maxIndent = Math.min(maxIndent, this.maxDepth - (this.groupDepth - this.indents)); + maxIndent = Math.min( + maxIndent, + this.maxDepth - (this.groupDepth - this.indents), + ); } } @@ -1385,12 +1527,17 @@ * @return {number} * The number of indentations applied. */ - Drupal.tableDrag.prototype.row.prototype.indent = function (indentDiff) { + Drupal.tableDrag.prototype.row.prototype.indent = function(indentDiff) { const $group = $(this.group); // Determine the valid indentations interval if not available yet. if (!this.interval) { - const prevRow = $(this.element).prev('tr').get(0); - const nextRow = $group.eq(-1).next('tr').get(0); + const prevRow = $(this.element) + .prev('tr') + .get(0); + const nextRow = $group + .eq(-1) + .next('tr') + .get(0); this.interval = this.validIndentInterval(prevRow, nextRow); } @@ -1405,9 +1552,10 @@ if (indentDiff < 0) { $group.find('.js-indentation:first-of-type').remove(); this.indents--; - } - else { - $group.find('td:first-of-type').prepend(Drupal.theme('tableDragIndentation')); + } else { + $group + .find('td:first-of-type') + .prepend(Drupal.theme('tableDragIndentation')); this.indents++; } } @@ -1433,7 +1581,9 @@ * @return {Array} * An array of siblings. */ - Drupal.tableDrag.prototype.row.prototype.findSiblings = function (rowSettings) { + Drupal.tableDrag.prototype.row.prototype.findSiblings = function( + rowSettings, + ) { const siblings = []; const directions = ['prev', 'next']; const rowIndentation = this.indents; @@ -1449,15 +1599,13 @@ checkRowIndentation = checkRow.find('.js-indentation').length; } - if (!(this.indentEnabled) || (checkRowIndentation === rowIndentation)) { + if (!this.indentEnabled || checkRowIndentation === rowIndentation) { siblings.push(checkRow[0]); - } - else if (checkRowIndentation < rowIndentation) { + } else if (checkRowIndentation < rowIndentation) { // No need to keep looking for siblings when we get to a parent. break; } - } - else { + } else { break; } checkRow = checkRow[directions[d]](); @@ -1475,9 +1623,10 @@ /** * Remove indentation helper classes from the current row group. */ - Drupal.tableDrag.prototype.row.prototype.removeIndentClasses = function () { - Object.keys(this.children || {}).forEach((n) => { - $(this.children[n]).find('.js-indentation') + Drupal.tableDrag.prototype.row.prototype.removeIndentClasses = function() { + Object.keys(this.children || {}).forEach(n => { + $(this.children[n]) + .find('.js-indentation') .removeClass('tree-child') .removeClass('tree-child-first') .removeClass('tree-child-last') @@ -1488,7 +1637,7 @@ /** * Add an asterisk or other marker to the changed row. */ - Drupal.tableDrag.prototype.row.prototype.markChanged = function () { + Drupal.tableDrag.prototype.row.prototype.markChanged = function() { const marker = Drupal.theme('tableDragChangedMarker'); const cell = $(this.element).find('td:first-of-type'); if (cell.find('abbr.tabledrag-changed').length === 0) { @@ -1502,7 +1651,7 @@ * @return {null} * Returns null when the stub function is used. */ - Drupal.tableDrag.prototype.row.prototype.onIndent = function () { + Drupal.tableDrag.prototype.row.prototype.onIndent = function() { return null; }; @@ -1515,34 +1664,40 @@ * @return {null} * Returns null when the stub function is used. */ - Drupal.tableDrag.prototype.row.prototype.onSwap = function (swappedRow) { + Drupal.tableDrag.prototype.row.prototype.onSwap = function(swappedRow) { return null; }; - $.extend(Drupal.theme, /** @lends Drupal.theme */{ - - /** - * @return {string} - * Markup for the marker. - */ - tableDragChangedMarker() { - return `*`; - }, + $.extend( + Drupal.theme, + /** @lends Drupal.theme */ { + /** + * @return {string} + * Markup for the marker. + */ + tableDragChangedMarker() { + return `*`; + }, - /** - * @return {string} - * Markup for the indentation. - */ - tableDragIndentation() { - return '
 
'; - }, + /** + * @return {string} + * Markup for the indentation. + */ + tableDragIndentation() { + return '
 
'; + }, - /** - * @return {string} - * Markup for the warning. - */ - tableDragChangedWarning() { - return ``; + /** + * @return {string} + * Markup for the warning. + */ + tableDragChangedWarning() { + return ``; + }, }, - }); -}(jQuery, Drupal, drupalSettings)); + ); +})(jQuery, Drupal, drupalSettings);