Unverified Commit 4790a87d authored by lauriii's avatar lauriii
Browse files

Issue #3077938 by bnjmnm, komalkolekar, ravi.shankar, sibustephen, nod_: Add a...

Issue #3077938 by bnjmnm, komalkolekar, ravi.shankar, sibustephen, nod_: Add a new Drupal.theme JavaScript function for tabledrag handle to allow themes customize the handle's markup
parent 4a84fa3e
......@@ -480,16 +480,14 @@
.find('a')
.addClass('menu-item__link');
// Create the handle.
const handle = $(
'<a href="#" class="tabledrag-handle"><div class="handle">&nbsp;</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">&nbsp;</div></a>`;
},
},
);
})(jQuery, Drupal, drupalSettings);
......@@ -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">&nbsp;</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\">&nbsp;</div></a>");
}
});
})(jQuery, Drupal, drupalSettings);
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment