Issue #3077938 by bnjmnm, komalkolekar, ravi.shankar, sibustephen, nod_: Add a... (4790a87d) · Commits · project / drupal

core/misc/tabledrag.es6.js

+20 −13

Original line number	Diff line number	Diff line
		@@ -480,16 +480,14 @@
		.find('a')
		.addClass('menu-item__link');
		// Create the handle.
		const handle = $(
		'<a href="#" class="tabledrag-handle"><div class="handle"> </div></a>',
		).attr('title', Drupal.t('Drag to re-order'));
		const $handle = $(Drupal.theme('tableDragHandle'));
		// Insert the handle after indentations (if any).
		const $indentationLast = $item
		.find('td:first-of-type')
		.find('.js-indentation')
		.eq(-1);
		if ($indentationLast.length) {
		$indentationLast.after(handle);
		$indentationLast.after($handle);
		// Update the total width of indentation in this entire table.
		self.indentCount = Math.max(
		$item.find('.js-indentation').length,
		@@ -499,10 +497,10 @@
		$item
		.find('td')
		.eq(0)
		.prepend(handle);
		.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];
		@@ -511,25 +509,25 @@
		});

		// Prevent the anchor tag from jumping us to the top of the page.
		handle.on('click', e => {
		$handle.on('click', e => {
		e.preventDefault();
		});

		// Set blur cleanup when a handle is focused.
		handle.on('focus', () => {
		$handle.on('focus', () => {
		self.safeBlur = true;
		});

		// 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(
		@@ -607,7 +605,7 @@
		window.scrollBy(0, -parseInt(item.offsetHeight, 10));
		}
		// Regain focus after the DOM manipulation.
		handle.trigger('focus');
		$handle.trigger('focus');
		}
		break;
		}
		@@ -669,7 +667,7 @@
		window.scrollBy(0, parseInt(item.offsetHeight, 10));
		}
		// Regain focus after the DOM manipulation.
		handle.trigger('focus');
		$handle.trigger('focus');
		}
		break;
		}
		@@ -699,7 +697,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) {
		@@ -1735,6 +1733,15 @@
		*/
		toggleButtonContent: show =>
		show ? Drupal.t('Hide row weights') : Drupal.t('Show row weights'),

		/**
		* @return {string}
		* HTML markup for a tableDrag handle.
		*/
		tableDragHandle() {
		return `<a href="#" title="${Drupal.t('Drag to re-order')}"
		class="tabledrag-handle"><div class="handle"> </div></a>`;
		},
		},
		);
		})(jQuery, Drupal, drupalSettings);

core/misc/tabledrag.js

+14 −11

Original line number	Diff line number	Diff line
		@@ -218,17 +218,17 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
		var self = this;
		var $item = $(item);
		$item.find('td:first-of-type').find('a').addClass('menu-item__link');
		var handle = $('<a href="#" class="tabledrag-handle"><div class="handle"> </div></a>').attr('title', Drupal.t('Drag to re-order'));
		var $handle = $(Drupal.theme('tableDragHandle'));
		var $indentationLast = $item.find('td:first-of-type').find('.js-indentation').eq(-1);

		if ($indentationLast.length) {
		$indentationLast.after(handle);
		$indentationLast.after($handle);
		self.indentCount = Math.max($item.find('.js-indentation').length, self.indentCount);
		} else {
		$item.find('td').eq(0).prepend(handle);
		$item.find('td').eq(0).prepend($handle);
		}

		handle.on('mousedown touchstart pointerdown', function (event) {
		$handle.on('mousedown touchstart pointerdown', function (event) {
		event.preventDefault();

		if (event.originalEvent.type === 'touchstart') {
		@@ -237,18 +237,18 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi

		self.dragStart(event, self, item);
		});
		handle.on('click', function (e) {
		$handle.on('click', function (e) {
		e.preventDefault();
		});
		handle.on('focus', function () {
		$handle.on('focus', function () {
		self.safeBlur = true;
		});
		handle.on('blur', function (event) {
		$handle.on('blur', function (event) {
		if (self.rowObject && self.safeBlur) {
		self.dropRow(event, self);
		}
		});
		handle.on('keydown', function (event) {
		$handle.on('keydown', function (event) {
		if (event.keyCode !== 9 && !self.rowObject) {
		self.rowObject = new self.row(item, 'keyboard', self.indentEnabled, self.maxDepth, true);
		}
		@@ -299,7 +299,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
		window.scrollBy(0, -parseInt(item.offsetHeight, 10));
		}

		handle.trigger('focus');
		$handle.trigger('focus');
		}

		break;
		@@ -346,7 +346,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
		window.scrollBy(0, parseInt(item.offsetHeight, 10));
		}

		handle.trigger('focus');
		$handle.trigger('focus');
		}

		break;
		@@ -373,7 +373,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
		return false;
		}
		});
		handle.on('keypress', function (event) {
		$handle.on('keypress', function (event) {
		switch (event.keyCode) {
		case 37:
		case 38:
		@@ -1001,6 +1001,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
		},
		toggleButtonContent: function toggleButtonContent(show) {
		return show ? Drupal.t('Hide row weights') : Drupal.t('Show row weights');
		},
		tableDragHandle: function tableDragHandle() {
		return "<a href=\"#\" title=\"".concat(Drupal.t('Drag to re-order'), "\"\n class=\"tabledrag-handle\"><div class=\"handle\"> </div></a>");
		}
		});
		})(jQuery, Drupal, drupalSettings);
		No newline at end of file