diff options
Diffstat (limited to 'core/misc/tabledrag.es6.js')
-rw-r--r-- | core/misc/tabledrag.es6.js | 226 |
1 files changed, 92 insertions, 134 deletions
diff --git a/core/misc/tabledrag.es6.js b/core/misc/tabledrag.es6.js index 70305d26303d..21a971d2b778 100644 --- a/core/misc/tabledrag.es6.js +++ b/core/misc/tabledrag.es6.js @@ -9,7 +9,7 @@ * @event columnschange */ -(function($, Drupal, drupalSettings) { +(function ($, Drupal, drupalSettings) { /** * Store the state of weight columns display for all tables. * @@ -46,13 +46,8 @@ } } - 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); }); }, }; @@ -67,7 +62,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); @@ -185,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; } @@ -207,9 +202,7 @@ // manually append 2 indentations in the first draggable row, measure // the offset, then remove. const indent = Drupal.theme('tableDragIndentation'); - const testRow = $('<tr></tr>') - .addClass('draggable') - .appendTo(table); + const testRow = $('<tr></tr>').addClass('draggable').appendTo(table); const testCell = $('<td></td>') .appendTo(testRow) .prepend(indent) @@ -227,7 +220,7 @@ // 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); }); @@ -237,7 +230,7 @@ ); this.$toggleWeightButton.on( 'click', - $.proxy(function(e) { + $.proxy(function (e) { e.preventDefault(); this.toggleColumns(); }, this), @@ -252,19 +245,21 @@ // 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 => + $(document).on('touchmove', (event) => self.dragRow(event.originalEvent.touches[0], self), ); - $(document).on('touchend', event => + $(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)); + $(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) { + $.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 @@ -283,14 +278,14 @@ * 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. - Object.keys(this.tableSettings[group]).some(tableSetting => { + Object.keys(this.tableSettings[group]).some((tableSetting) => { const field = $table .find(`.${this.tableSettings[group][tableSetting].target}`) .eq(0); @@ -307,11 +302,7 @@ // 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; + columnIndex = cell.parent().find('> td').index(cell.get(0)) + 1; $table .find('> thead > tr, > tbody > tr, > tr') .each(this.addColspanClass(columnIndex)); @@ -331,14 +322,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; } @@ -364,7 +355,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(); } @@ -379,9 +370,7 @@ // 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); }; /** @@ -389,7 +378,7 @@ * * Store only default override. */ - Drupal.tableDrag.prototype.toggleColumns = function() { + Drupal.tableDrag.prototype.toggleColumns = function () { showWeight = !showWeight; this.displayColumns(showWeight); if (showWeight) { @@ -406,14 +395,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 -= 1; }); }; @@ -423,14 +412,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 += 1; }); }; @@ -446,23 +435,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]; return Object.keys(tableSettingsGroup) - .map(delta => { + .map((delta) => { const targetClass = tableSettingsGroup[delta].target; let rowSettings; if (field.is(`.${targetClass}`)) { // Return a copy of the row settings. rowSettings = {}; - Object.keys(tableSettingsGroup[delta]).forEach(n => { + Object.keys(tableSettingsGroup[delta]).forEach((n) => { rowSettings[n] = tableSettingsGroup[delta][n]; }); } return rowSettings; }) - .filter(rowSetting => rowSetting)[0]; + .filter((rowSetting) => rowSetting)[0]; }; /** @@ -471,14 +460,11 @@ * @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 = $(Drupal.theme('tableDragHandle')); // Insert the handle after indentations (if any). @@ -494,13 +480,10 @@ self.indentCount, ); } else { - $item - .find('td') - .eq(0) - .prepend($handle); + $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]; @@ -509,7 +492,7 @@ }); // Prevent the anchor tag from jumping us to the top of the page. - $handle.on('click', e => { + $handle.on('click', (e) => { e.preventDefault(); }); @@ -520,14 +503,14 @@ // 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( @@ -557,14 +540,10 @@ case 38: // Safari up arrow. case 63232: { - let $previousRow = $(self.rowObject.element) - .prev('tr') - .eq(0); + let $previousRow = $(self.rowObject.element).prev('tr').eq(0); let previousRow = $previousRow.get(0); while (previousRow && $previousRow.is(':hidden')) { - $previousRow = $(previousRow) - .prev('tr') - .eq(0); + $previousRow = $(previousRow).prev('tr').eq(0); previousRow = $previousRow.get(0); } if (previousRow) { @@ -580,9 +559,7 @@ previousRow && $previousRow.find('.js-indentation').length ) { - $previousRow = $(previousRow) - .prev('tr') - .eq(0); + $previousRow = $(previousRow).prev('tr').eq(0); previousRow = $previousRow.get(0); groupHeight += $previousRow.is(':hidden') ? 0 @@ -621,15 +598,10 @@ case 40: // Safari down arrow. case 63233: { - let $nextRow = $(self.rowObject.group) - .eq(-1) - .next('tr') - .eq(0); + let $nextRow = $(self.rowObject.group).eq(-1).next('tr').eq(0); let nextRow = $nextRow.get(0); while (nextRow && $nextRow.is(':hidden')) { - $nextRow = $(nextRow) - .next('tr') - .eq(0); + $nextRow = $(nextRow).next('tr').eq(0); nextRow = $nextRow.get(0); } if (nextRow) { @@ -649,12 +621,10 @@ 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)); @@ -697,7 +667,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) { @@ -726,7 +696,7 @@ * @param {HTMLElement} item * The item 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); @@ -737,9 +707,7 @@ // 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. @@ -780,7 +748,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; @@ -845,7 +813,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; @@ -860,10 +828,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); }); } @@ -908,7 +876,7 @@ * @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 }; } @@ -932,7 +900,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 }; @@ -951,7 +919,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]; @@ -975,7 +943,7 @@ // Check that this row is not a child of the row being dragged. if ( Object.keys(this.rowObject.group).some( - o => this.rowObject.group[o] === row, + (o) => this.rowObject.group[o] === row, ) ) { return null; @@ -1010,8 +978,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); @@ -1026,7 +994,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; @@ -1099,9 +1067,7 @@ // 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') @@ -1150,14 +1116,14 @@ const values = []; $(targetElement) .find('option') - .each(function() { + .each(function () { values.push(this.value); }); const maxVal = values[values.length - 1]; // Populate the values in the siblings. $(siblings) .find(targetClass) - .each(function() { + .each(function () { // If there are more items than possible values, assign the // maximum value to the row. if (values.length > 0) { @@ -1169,15 +1135,10 @@ } else { // Assume a numeric input field. let weight = - parseInt( - $(siblings[0]) - .find(targetClass) - .val(), - 10, - ) || 0; + parseInt($(siblings[0]).find(targetClass).val(), 10) || 0; $(siblings) .find(targetClass) - .each(function() { + .each(function () { this.value = weight; weight++; }); @@ -1202,7 +1163,7 @@ * @param {string} group * The group selector. */ - Drupal.tableDrag.prototype.copyDragClasses = function( + Drupal.tableDrag.prototype.copyDragClasses = function ( sourceRow, targetRow, group, @@ -1223,7 +1184,7 @@ * @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; @@ -1262,7 +1223,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(() => { @@ -1282,7 +1243,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. @@ -1304,7 +1265,7 @@ * @return {null} * Returns null when the stub function is used. */ - Drupal.tableDrag.prototype.onDrag = function() { + Drupal.tableDrag.prototype.onDrag = function () { return null; }; @@ -1314,7 +1275,7 @@ * @return {null} * Returns null when the stub function is used. */ - Drupal.tableDrag.prototype.onDrop = function() { + Drupal.tableDrag.prototype.onDrop = function () { return null; }; @@ -1334,7 +1295,7 @@ * Whether we want to add classes to this row to indicate child * relationships. */ - Drupal.tableDrag.prototype.row = function( + Drupal.tableDrag.prototype.row = function ( tableRow, method, indentEnabled, @@ -1377,7 +1338,9 @@ * @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 = []; @@ -1425,7 +1388,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; @@ -1461,14 +1424,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; @@ -1489,7 +1452,7 @@ * An object with the keys `min` and `max` to indicate the valid indent * interval. */ - Drupal.tableDrag.prototype.row.prototype.validIndentInterval = function( + Drupal.tableDrag.prototype.row.prototype.validIndentInterval = function ( prevRow, nextRow, ) { @@ -1539,17 +1502,12 @@ * @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); } @@ -1593,7 +1551,7 @@ * @return {Array} * An array of siblings. */ - Drupal.tableDrag.prototype.row.prototype.findSiblings = function( + Drupal.tableDrag.prototype.row.prototype.findSiblings = function ( rowSettings, ) { const siblings = []; @@ -1635,8 +1593,8 @@ /** * Remove indentation helper classes from the current row group. */ - Drupal.tableDrag.prototype.row.prototype.removeIndentClasses = function() { - Object.keys(this.children || {}).forEach(n => { + Drupal.tableDrag.prototype.row.prototype.removeIndentClasses = function () { + Object.keys(this.children || {}).forEach((n) => { $(this.children[n]) .find('.js-indentation') .removeClass('tree-child') @@ -1649,7 +1607,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) { @@ -1663,7 +1621,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; }; @@ -1676,7 +1634,7 @@ * @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; }; @@ -1731,7 +1689,7 @@ * @return {string} * HTML markup for the weight toggle button content.s */ - toggleButtonContent: show => + toggleButtonContent: (show) => show ? Drupal.t('Hide row weights') : Drupal.t('Show row weights'), /** |