Unverified Commit 56aa6328 authored by lauriii's avatar lauriii
Browse files

Issue #3084916 by bnjmnm, sibustephen, lauriii, nod_: Add a new Drupal.theme...

Issue #3084916 by bnjmnm, sibustephen, lauriii, nod_: Add a new Drupal.theme JavaScript function for theming the the show/hide row weight toggle and its wrapper in draggable tables
parent 9346c2ff
......@@ -171,6 +171,11 @@
*/
this.windowHeight = 0;
/**
* @type {?jQuery}
*/
this.$toggleWeightButton = null;
/**
* Check this table's settings for parent relationships.
*
......@@ -226,19 +231,18 @@
self.makeDraggable(this);
});
// Add a link before the table for users to show or hide weight columns.
$table.before(
$('<button type="button" class="link tabledrag-toggle-weight"></button>')
.on(
'click',
$.proxy(function(e) {
e.preventDefault();
this.toggleColumns();
}, this),
)
.wrap('<div class="tabledrag-toggle-weight-wrapper"></div>')
.parent(),
const $toggleWeightWrapper = $(Drupal.theme('tableDragToggle'));
this.$toggleWeightButton = $toggleWeightWrapper.find(
'[data-drupal-selector="tabledrag-toggle-weight"]',
);
this.$toggleWeightButton.on(
'click',
$.proxy(function(e) {
e.preventDefault();
this.toggleColumns();
}, this),
);
$table.before($toggleWeightWrapper);
// Initialize the specified columns (for example, weight or parent columns)
// to show or hide according to user preference. This aids accessibility
......@@ -368,6 +372,11 @@
else {
this.hideColumns();
}
this.$toggleWeightButton.html(
Drupal.theme('toggleButtonContent', displayWeight),
);
// Trigger an event to allow other scripts to react to this display change.
// Force the extra parameter as a bool.
$('table')
......@@ -407,8 +416,6 @@
$tables.find('.tabledrag-has-colspan').each(function() {
this.colSpan -= 1;
});
// Change link text.
$('.tabledrag-toggle-weight').text(Drupal.t('Show row weights'));
};
/**
......@@ -426,8 +433,6 @@
$tables.find('.tabledrag-has-colspan').each(function() {
this.colSpan += 1;
});
// Change link text.
$('.tabledrag-toggle-weight').text(Drupal.t('Hide row weights'));
};
/**
......@@ -1707,6 +1712,29 @@
'tableDragChangedMarker',
)} ${Drupal.t('You have unsaved changes.')}</div>`;
},
/**
* The button for toggling table row weight visibility.
*
* @return {string}
* HTML markup for the weight toggle button and its container.
*/
tableDragToggle: () =>
`<div class="tabledrag-toggle-weight-wrapper" data-drupal-selector="tabledrag-toggle-weight-wrapper">
<button type="button" class="link tabledrag-toggle-weight" data-drupal-selector="tabledrag-toggle-weight"></button>
</div>`,
/**
* The contents of the toggle weight button.
*
* @param {boolean} show
* If the table weights are currently displayed.
*
* @return {string}
* HTML markup for the weight toggle button content.s
*/
toggleButtonContent: show =>
show ? Drupal.t('Hide row weights') : Drupal.t('Show row weights'),
},
);
})(jQuery, Drupal, drupalSettings);
......@@ -47,6 +47,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
this.scrollInterval = null;
this.scrollY = 0;
this.windowHeight = 0;
this.$toggleWeightButton = null;
this.indentEnabled = false;
Object.keys(tableSettings || {}).forEach(function (group) {
Object.keys(tableSettings[group] || {}).forEach(function (n) {
......@@ -73,10 +74,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
$table.find('> tr.draggable, > tbody > tr.draggable').each(function () {
self.makeDraggable(this);
});
$table.before($('<button type="button" class="link tabledrag-toggle-weight"></button>').on('click', $.proxy(function (e) {
var $toggleWeightWrapper = $(Drupal.theme('tableDragToggle'));
this.$toggleWeightButton = $toggleWeightWrapper.find('[data-drupal-selector="tabledrag-toggle-weight"]');
this.$toggleWeightButton.on('click', $.proxy(function (e) {
e.preventDefault();
this.toggleColumns();
}, this)).wrap('<div class="tabledrag-toggle-weight-wrapper"></div>').parent());
}, this));
$table.before($toggleWeightWrapper);
self.initColumns();
$(document).on('touchmove', function (event) {
return self.dragRow(event.originalEvent.touches[0], self);
......@@ -157,6 +161,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
this.hideColumns();
}
this.$toggleWeightButton.html(Drupal.theme('toggleButtonContent', displayWeight));
$('table').findOnce('tabledrag').trigger('columnschange', !!displayWeight);
};
......@@ -178,7 +183,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
$tables.find('.tabledrag-has-colspan').each(function () {
this.colSpan -= 1;
});
$('.tabledrag-toggle-weight').text(Drupal.t('Show row weights'));
};
Drupal.tableDrag.prototype.showColumns = function () {
......@@ -188,7 +192,6 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
$tables.find('.tabledrag-has-colspan').each(function () {
this.colSpan += 1;
});
$('.tabledrag-toggle-weight').text(Drupal.t('Hide row weights'));
};
Drupal.tableDrag.prototype.rowSettings = function (group, row) {
......@@ -992,6 +995,12 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
},
tableDragChangedWarning: function tableDragChangedWarning() {
return "<div class=\"tabledrag-changed-warning messages messages--warning\" role=\"alert\">".concat(Drupal.theme('tableDragChangedMarker'), " ").concat(Drupal.t('You have unsaved changes.'), "</div>");
},
tableDragToggle: function tableDragToggle() {
return "<div class=\"tabledrag-toggle-weight-wrapper\" data-drupal-selector=\"tabledrag-toggle-weight-wrapper\">\n <button type=\"button\" class=\"link tabledrag-toggle-weight\" data-drupal-selector=\"tabledrag-toggle-weight\"></button>\n </div>";
},
toggleButtonContent: function toggleButtonContent(show) {
return show ? Drupal.t('Hide row weights') : Drupal.t('Show row weights');
}
});
})(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