From 6a43b511df9e26aa5abf0d1e473da450d2c3d690 Mon Sep 17 00:00:00 2001
From: Lee Rowlands <lee.rowlands@previousnext.com.au>
Date: Tue, 27 Jun 2023 06:26:47 +1000
Subject: [PATCH] Issue #3238308 by mstrelan, bnjmnm, nod_, smustgrave,
larowlan, rikki_iki: Refactor (if feasible) uses of the jQuery css function
to use Vanilla/native
---
core/.eslintrc.jquery.json | 2 +-
core/misc/ajax.js | 1 +
core/misc/dialog/dialog.ajax.js | 3 +-
core/misc/dialog/dialog.position.js | 6 +--
core/misc/dialog/off-canvas/js/off-canvas.js | 40 ++++++++++---------
core/misc/position.js | 8 ++--
core/misc/progress.js | 4 +-
core/misc/tabledrag.js | 18 ++++++---
core/misc/tableheader.js | 38 +++++++++---------
core/modules/contextual/js/contextual.js | 3 +-
core/modules/toolbar/js/toolbar.js | 11 ++---
.../toolbar/js/views/ToolbarVisualView.js | 8 +---
core/modules/user/user.js | 9 ++---
core/modules/views_ui/js/dialog.views.js | 15 +++++--
core/modules/views_ui/js/views-admin.js | 3 +-
.../Tests/jQueryUIPositionShimTest.js | 31 +++++++-------
16 files changed, 110 insertions(+), 90 deletions(-)
diff --git a/core/.eslintrc.jquery.json b/core/.eslintrc.jquery.json
index 2719cafc298a..dda0cf76f761 100644
--- a/core/.eslintrc.jquery.json
+++ b/core/.eslintrc.jquery.json
@@ -11,7 +11,7 @@
"jquery/no-class": 0,
"jquery/no-clone": 0,
"jquery/no-closest": 0,
- "jquery/no-css": 0,
+ "jquery/no-css": 2,
"jquery/no-data": 0,
"jquery/no-deferred": 0,
"jquery/no-delegate": 2,
diff --git a/core/misc/ajax.js b/core/misc/ajax.js
index 9f659c799fe2..8544f6a1049e 100644
--- a/core/misc/ajax.js
+++ b/core/misc/ajax.js
@@ -1486,6 +1486,7 @@
* The XMLHttpRequest status.
*/
css(ajax, response, status) {
+ // eslint-disable-next-line jquery/no-css
$(response.selector).css(response.argument);
},
diff --git a/core/misc/dialog/dialog.ajax.js b/core/misc/dialog/dialog.ajax.js
index 4549813abe25..7e439974df6d 100644
--- a/core/misc/dialog/dialog.ajax.js
+++ b/core/misc/dialog/dialog.ajax.js
@@ -89,7 +89,8 @@
'.form-actions input[type=submit], .form-actions a.button, .form-actions a.action-link',
);
$buttons.each(function () {
- const $originalButton = $(this).css({ display: 'none' });
+ const $originalButton = $(this);
+ this.style.display = 'none';
buttons.push({
text: $originalButton.html() || $originalButton.attr('value'),
class: $originalButton.attr('class'),
diff --git a/core/misc/dialog/dialog.position.js b/core/misc/dialog/dialog.position.js
index d6394c471f0c..8864496cb079 100644
--- a/core/misc/dialog/dialog.position.js
+++ b/core/misc/dialog/dialog.position.js
@@ -118,10 +118,10 @@
const autoResize = debounce(resetSize, 20);
const eventData = { settings, $element };
if (settings.autoResize === true || settings.autoResize === 'true') {
- $element
+ const uiDialog = $element
.dialog('option', { resizable: false, draggable: false })
- .dialog('widget')
- .css('position', 'fixed');
+ .dialog('widget');
+ uiDialog[0].style.position = 'fixed';
$(window)
.on('resize.dialogResize scroll.dialogResize', eventData, autoResize)
.trigger('resize.dialogResize');
diff --git a/core/misc/dialog/off-canvas/js/off-canvas.js b/core/misc/dialog/off-canvas/js/off-canvas.js
index a61224459f15..a6400415889b 100644
--- a/core/misc/dialog/off-canvas/js/off-canvas.js
+++ b/core/misc/dialog/off-canvas/js/off-canvas.js
@@ -182,7 +182,7 @@
let offset = 0;
// Let scroll element take all the height available.
- $element.css({ height: 'auto' });
+ $element[0].style.height = 'auto';
const modalHeight = $container.height();
$offsets.each((i, e) => {
@@ -214,7 +214,7 @@
}
// Set a minimum height on $element
if (position === 'top') {
- $element.css('min-height', `${Drupal.offCanvas.minimumHeight}px`);
+ $element[0].style.minHeight = `${Drupal.offCanvas.minimumHeight}px`;
}
displace();
@@ -236,9 +236,12 @@
position === 'side'
? `${$(window).height() - (offsets.top + offsets.bottom)}px`
: event.data.settings.height;
- container.css({
+
+ Object.assign(container[0].style, {
position: 'fixed',
- height,
+ height: Number.isNaN(parseFloat(height))
+ ? height
+ : `${parseFloat(height)}px`,
});
$element
@@ -267,24 +270,26 @@
Drupal.offCanvas.resetPadding();
const $element = event.data.$element;
const $container = Drupal.offCanvas.getContainer($element);
- const $mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper;
+ const mainCanvasWrapper = Drupal.offCanvas.$mainCanvasWrapper[0];
const width = $container.outerWidth();
- const mainCanvasPadding = $mainCanvasWrapper.css(
- `padding-${Drupal.offCanvas.getEdge()}`,
- );
+ const mainCanvasPadding =
+ window.getComputedStyle(mainCanvasWrapper)[
+ `padding-${Drupal.offCanvas.getEdge()}`
+ ];
+
if (position === 'side' && width !== mainCanvasPadding) {
- $mainCanvasWrapper.css(
- `padding-${Drupal.offCanvas.getEdge()}`,
- `${width}px`,
- );
+ mainCanvasWrapper.style[
+ `padding-${Drupal.offCanvas.getEdge()}`
+ ] = `${width}px`;
+
$container.attr(`data-offset-${Drupal.offCanvas.getEdge()}`, width);
displace();
}
const height = $container.outerHeight();
if (position === 'top') {
- $mainCanvasWrapper.css('padding-top', `${height}px`);
+ mainCanvasWrapper.style.paddingTop = `${height}px`;
$container.attr('data-offset-top', height);
displace();
}
@@ -316,11 +321,10 @@
* Resets main canvas wrapper and toolbar padding / margin.
*/
resetPadding() {
- Drupal.offCanvas.$mainCanvasWrapper.css(
- `padding-${Drupal.offCanvas.getEdge()}`,
- 0,
- );
- Drupal.offCanvas.$mainCanvasWrapper.css('padding-top', 0);
+ Drupal.offCanvas.$mainCanvasWrapper[0].style[
+ `padding-${Drupal.offCanvas.getEdge()}`
+ ] = 0;
+ Drupal.offCanvas.$mainCanvasWrapper[0].style.paddingTop = 0;
displace();
},
};
diff --git a/core/misc/position.js b/core/misc/position.js
index a42f2331f249..c1aa34da783c 100644
--- a/core/misc/position.js
+++ b/core/misc/position.js
@@ -42,7 +42,7 @@
}
function parseCss(element, property) {
- return parseInt($.css(element, property), 10) || 0;
+ return parseInt(window.getComputedStyle(element)[property], 10) || 0;
}
function getDimensions(elem) {
@@ -311,7 +311,7 @@
$('body').append(div);
const w1 = innerDiv.offsetWidth;
- div.css('overflow', 'scroll');
+ div[0].style.overflow = 'scroll';
let w2 = innerDiv.offsetWidth;
@@ -327,11 +327,11 @@
const overflowX =
within.isWindow || within.isDocument
? ''
- : within.element.css('overflow-x');
+ : window.getComputedStyle(within.element[0])['overflow-x'];
const overflowY =
within.isWindow || within.isDocument
? ''
- : within.element.css('overflow-y');
+ : window.getComputedStyle(within.element[0])['overflow-y'];
const hasOverflowX =
overflowX === 'scroll' ||
(overflowX === 'auto' && within.width < within.element[0].scrollWidth);
diff --git a/core/misc/progress.js b/core/misc/progress.js
index 24c13af0cc34..ae1d2d7d1af8 100644
--- a/core/misc/progress.js
+++ b/core/misc/progress.js
@@ -76,7 +76,9 @@
if (percentage >= 0 && percentage <= 100) {
$(this.element)
.find('div.progress__bar')
- .css('width', `${percentage}%`);
+ .each(function () {
+ this.style.width = `${percentage}%`;
+ });
$(this.element)
.find('div.progress__percentage')
.html(`${percentage}%`);
diff --git a/core/misc/tabledrag.js b/core/misc/tabledrag.js
index 722a36a1ec37..47fa97a83da4 100644
--- a/core/misc/tabledrag.js
+++ b/core/misc/tabledrag.js
@@ -129,7 +129,7 @@
*
* @type {number}
*/
- this.rtl = $(this.table).css('direction') === 'rtl' ? -1 : 1;
+ this.rtl = window.getComputedStyle(this.table).direction === 'rtl' ? -1 : 1;
/**
*
@@ -423,9 +423,13 @@
Drupal.tableDrag.prototype.hideColumns = function () {
const $tables = $(once.filter('tabledrag', 'table'));
// Hide weight/parent cells and headers.
- $tables.find('.tabledrag-hide').css('display', 'none');
+ $tables.find('.tabledrag-hide').each(function () {
+ this.style.display = 'none';
+ });
// Show TableDrag handles.
- $tables.find('.tabledrag-handle').css('display', '');
+ $tables.find('.tabledrag-handle').each(function () {
+ this.style.display = '';
+ });
// Reduce the colspan of any effected multi-span columns.
$tables.find('.tabledrag-has-colspan').each(function () {
this.colSpan -= 1;
@@ -440,9 +444,13 @@
Drupal.tableDrag.prototype.showColumns = function () {
const $tables = $(once.filter('tabledrag', 'table'));
// Show weight/parent cells and headers.
- $tables.find('.tabledrag-hide').css('display', '');
+ $tables.find('.tabledrag-hide').each(function () {
+ this.style.display = '';
+ });
// Hide TableDrag handles.
- $tables.find('.tabledrag-handle').css('display', 'none');
+ $tables.find('.tabledrag-handle').each(function () {
+ this.style.display = 'none';
+ });
// Increase the colspan for any columns where it was previously reduced.
$tables.find('.tabledrag-has-colspan').each(function () {
this.colSpan += 1;
diff --git a/core/misc/tableheader.js b/core/misc/tableheader.js
index 4c60e6d51797..2c7624023ca9 100644
--- a/core/misc/tableheader.js
+++ b/core/misc/tableheader.js
@@ -211,12 +211,9 @@
// Clone the table header so it inherits original jQuery properties.
const $stickyHeader = this.$originalHeader.clone(true);
// Hide the table to avoid a flash of the header clone upon page load.
- this.$stickyTable = $('<table class="sticky-header"></table>')
- .css({
- visibility: 'hidden',
- position: 'fixed',
- top: '0px',
- })
+ this.$stickyTable = $(
+ '<table class="sticky-header" style="visibility: hidden; position: fixed; top: 0;"></table>',
+ )
.append($stickyHeader)
.insertBefore(this.$originalTable);
@@ -245,12 +242,13 @@
if (typeof offsetLeft === 'number') {
css.left = `${this.tableOffset.left - offsetLeft}px`;
}
- this.$html.css(
- 'scroll-padding-top',
+ this.$html[0].style.scrollPaddingTop =
displace.offsets.top +
- (this.stickyVisible ? this.$stickyTable.height() : 0),
- );
- return this.$stickyTable.css(css);
+ (this.stickyVisible ? this.$stickyTable.height() : 0);
+
+ Object.assign(this.$stickyTable[0].style, css);
+
+ return this.$stickyTable;
},
/**
@@ -286,10 +284,9 @@
this.checkStickyVisible();
// Track horizontal positioning relative to the viewport.
this.stickyPosition(null, scrollValue('scrollLeft'));
- this.$stickyTable.css(
- 'visibility',
- this.stickyVisible ? 'visible' : 'hidden',
- );
+ this.$stickyTable[0].style.visibility = this.stickyVisible
+ ? 'visible'
+ : 'hidden';
},
/**
@@ -318,14 +315,17 @@
for (let i = 0; i < il; i++) {
$that = $(this.$originalHeaderCells[i]);
$stickyCell = this.$stickyHeaderCells.eq($that.index());
- display = $that.css('display');
+ display = window.getComputedStyle($that[0]).display;
if (display !== 'none') {
- $stickyCell.css({ width: $that.css('width'), display });
+ Object.assign($stickyCell[0].style, {
+ width: window.getComputedStyle($that[0]).width,
+ display,
+ });
} else {
- $stickyCell.css('display', 'none');
+ $stickyCell[0].style.display = 'none';
}
}
- this.$stickyTable.css('width', this.$originalTable.outerWidth());
+ this.$stickyTable[0].style.width = this.$originalTable.outerWidth();
},
},
);
diff --git a/core/modules/contextual/js/contextual.js b/core/modules/contextual/js/contextual.js
index 7d916d5e3cb1..75abe445b567 100644
--- a/core/modules/contextual/js/contextual.js
+++ b/core/modules/contextual/js/contextual.js
@@ -71,7 +71,8 @@
$trigger.addClass('visually-hidden');
// Adjust nested contextual link's position.
- $nestedContextual.css({ top: $nestedContextual.position().top + height });
+ $nestedContextual[0].style.top =
+ $nestedContextual.position().top + height;
}
}
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index c7eba1e805ea..1ca75fcf46a9 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -207,26 +207,27 @@
$(window).on({
'dialog:aftercreate': (event, dialog, $element, settings) => {
- const $toolbar = $('#toolbar-bar');
- $toolbar.css('margin-top', '0');
+ const toolbarBar = document.getElementById('toolbar-bar');
+ toolbarBar.style.marginTop = '0';
// When off-canvas is positioned in top, toolbar has to be moved down.
if (settings.drupalOffCanvasPosition === 'top') {
const height = Drupal.offCanvas
.getContainer($element)
.outerHeight();
- $toolbar.css('margin-top', `${height}px`);
+ toolbarBar.style.marginTop = `${height}px`;
$element.on('dialogContentResize.off-canvas', () => {
const newHeight = Drupal.offCanvas
.getContainer($element)
.outerHeight();
- $toolbar.css('margin-top', `${newHeight}px`);
+ toolbarBar.style.marginTop = `${newHeight}px`;
});
}
},
'dialog:beforeclose': () => {
- $('#toolbar-bar').css('margin-top', '0');
+ const toolbarBar = document.getElementById('toolbar-bar');
+ toolbarBar.style.marginTop = '0';
},
});
});
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index e2d78cd956de..89f472f0eafa 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -84,12 +84,8 @@
toolbarTabOuterHeight + toolbarTrayHorizontalOuterHeight,
);
- $('body').css({
- 'padding-top': this.model.get('height'),
- });
- $('html').css({
- 'scroll-padding-top': this.model.get('height'),
- });
+ $('body')[0].style.paddingTop = `${this.model.get('height')}px`;
+ $('html')[0].style.scrollPaddingTop = `${this.model.get('height')}px`;
this.triggerDisplace();
},
diff --git a/core/modules/user/user.js b/core/modules/user/user.js
index 8652cc467d4e..e1832ee72e9e 100644
--- a/core/modules/user/user.js
+++ b/core/modules/user/user.js
@@ -221,9 +221,8 @@
);
}
// Adjust the length of the strength indicator.
- password.$strengthBar
- .css('width', `${result.strength}%`)
- .addClass(result.indicatorClass);
+ password.$strengthBar[0].style.width = `${result.strength}%`;
+ password.$strengthBar.addClass(result.indicatorClass);
// Update the strength indication text.
password.$strengthTextWrapper.html(result.indicatorText);
@@ -232,9 +231,9 @@
// Check the value in the confirm input and show results.
if ($confirmInput[0].value) {
passwordCheckMatch($confirmInput[0].value);
- $passwordConfirmMessage.css({ visibility: 'visible' });
+ $passwordConfirmMessage[0].style.visibility = 'visible';
} else {
- $passwordConfirmMessage.css({ visibility: 'hidden' });
+ $passwordConfirmMessage[0].style.visibility = 'hidden';
}
if (widgetClassesToRemove) {
diff --git a/core/modules/views_ui/js/dialog.views.js b/core/modules/views_ui/js/dialog.views.js
index b5cbb91fbb5b..78fe9c9994b1 100644
--- a/core/modules/views_ui/js/dialog.views.js
+++ b/core/modules/views_ui/js/dialog.views.js
@@ -14,7 +14,12 @@
// Add a class to do some styles adjustments.
$modal.closest('.views-ui-dialog').addClass('views-ui-dialog-scroll');
// Let scroll element take all the height available.
- $scroll.css({ overflow: 'visible', height: 'auto' });
+ $scroll.each(function () {
+ Object.assign(this.style, {
+ overflow: 'visible',
+ height: 'auto',
+ });
+ });
modalHeight = $modal.height();
$viewsOverride.each(function () {
offset += $(this).outerHeight();
@@ -24,8 +29,12 @@
const scrollOffset = $scroll.outerHeight() - $scroll.height();
$scroll.height(modalHeight - offset - scrollOffset);
// Reset scrolling properties.
- $modal.css('overflow', 'hidden');
- $scroll.css('overflow', 'auto');
+ $modal.each(function () {
+ this.style.overflow = 'hidden';
+ });
+ $scroll.each(function () {
+ this.style.overflow = 'auto';
+ });
}
}
diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js
index f0a6da9fbef2..d046d08a92b3 100644
--- a/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@@ -320,7 +320,8 @@
const label = $target.closest('td').next().html().trim();
// Add/remove the checked item to the list.
if (event.target.checked) {
- this.$selected_div.show().css('display', 'block');
+ this.$selected_div.show();
+ this.$selected_div[0].style.display = 'block';
this.checkedItems.push(label);
} else {
const position = $.inArray(label, this.checkedItems);
diff --git a/core/tests/Drupal/Nightwatch/Tests/jQueryUIPositionShimTest.js b/core/tests/Drupal/Nightwatch/Tests/jQueryUIPositionShimTest.js
index c013a52016d9..7c82cc83c6b0 100644
--- a/core/tests/Drupal/Nightwatch/Tests/jQueryUIPositionShimTest.js
+++ b/core/tests/Drupal/Nightwatch/Tests/jQueryUIPositionShimTest.js
@@ -1931,9 +1931,10 @@ module.exports = {
function () {
const $ = jQuery;
const toReturn = {};
- const $elx = $('#elx').css({
- marginTop: 6,
- marginLeft: 4,
+ const $elx = $('#elx');
+ Object.assign($elx[0].style, {
+ marginTop: '6px',
+ marginLeft: '4px',
});
$elx.position({
my: 'left top',
@@ -1983,9 +1984,10 @@ module.exports = {
function () {
const $ = jQuery;
const toReturn = {};
- const $elx = $('#elx').css({
- marginTop: 6,
- marginLeft: 4,
+ const $elx = $('#elx');
+ Object.assign($elx[0].style, {
+ marginTop: '6px',
+ marginLeft: '4px',
});
$elx.position({
my: 'left top',
@@ -2182,9 +2184,9 @@ module.exports = {
const toReturn = {};
const $scrollX = $('#scrollX');
- $scrollX.css({
- width: 100,
- height: 100,
+ Object.assign($scrollX[0].style, {
+ width: '100px',
+ height: '100px',
left: 0,
top: 0,
});
@@ -2225,9 +2227,7 @@ module.exports = {
},
};
- $scrollX.css({
- overflow: 'auto',
- });
+ $scrollX[0].style.overflow = 'auto';
toReturn['auto, no scroll"'] = {
actual: $elx.offset(),
@@ -2237,11 +2237,8 @@ module.exports = {
},
};
- $scrollX
- .css({
- overflow: 'auto',
- })
- .append($('<div>').height(300).width(300));
+ $scrollX[0].style.overflow = 'auto';
+ $scrollX.append($('<div>').height(300).width(300));
$elx.position({
of: '#scrollX',
--
GitLab