From 12ecd903b6be2c9f82998c87b3a0d2240e50de6f Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 16 Mar 2024 19:34:28 +0100 Subject: [PATCH 1/4] Forbid jQuery .css and refactor all usage --- .eslintrc.yaml | 4 +- web_src/js/features/colorpicker.js | 8 ++- web_src/js/features/comp/ColorPicker.js | 16 +++-- web_src/js/features/comp/LabelEdit.js | 8 +-- web_src/js/features/imagediff.js | 90 ++++++++++--------------- web_src/js/features/repo-legacy.js | 2 +- web_src/js/features/repo-projects.js | 7 +- 7 files changed, 61 insertions(+), 74 deletions(-) diff --git a/.eslintrc.yaml b/.eslintrc.yaml index b62b13cefea3e..d5804b79c879d 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -290,7 +290,7 @@ rules: jquery/no-class: [0] jquery/no-clone: [2] jquery/no-closest: [0] - jquery/no-css: [0] + jquery/no-css: [2] jquery/no-data: [0] jquery/no-deferred: [2] jquery/no-delegate: [2] @@ -413,7 +413,7 @@ rules: no-jquery/no-constructor-attributes: [2] no-jquery/no-contains: [2] no-jquery/no-context-prop: [2] - no-jquery/no-css: [0] + no-jquery/no-css: [2] no-jquery/no-data: [0] no-jquery/no-deferred: [2] no-jquery/no-delegate: [2] diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js index a5fdb3f5a6e53..f91df67d64438 100644 --- a/web_src/js/features/colorpicker.js +++ b/web_src/js/features/colorpicker.js @@ -1,10 +1,12 @@ -export async function createColorPicker($els) { - if (!$els || !$els.length) return; +import $ from 'jquery'; + +export async function createColorPicker(els) { + if (!els?.length) return; await Promise.all([ import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors'), import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors/jquery.minicolors.css'), ]); - $els.minicolors(); + return $(els).minicolors(); } diff --git a/web_src/js/features/comp/ColorPicker.js b/web_src/js/features/comp/ColorPicker.js index 5665b7a24aae1..d7e703880377a 100644 --- a/web_src/js/features/comp/ColorPicker.js +++ b/web_src/js/features/comp/ColorPicker.js @@ -2,11 +2,15 @@ import $ from 'jquery'; import {createColorPicker} from '../colorpicker.js'; export function initCompColorPicker() { - createColorPicker($('.color-picker')); + (async () => { + await createColorPicker(document.querySelectorAll('.color-picker')); - $('.precolors .color').on('click', function () { - const color_hex = $(this).data('color-hex'); - $('.color-picker').val(color_hex); - $('.minicolors-swatch-color').css('background-color', color_hex); - }); + for (const el of document.querySelectorAll('.precolors .color')) { + el.addEventListener('click', (e) => { + const color = e.target.getAttribute('data-color-hex'); + const parent = e.target.closest('.color.picker'); + $(parent.querySelector('.color-picker')).minicolors('value', color); + }); + } + })(); } diff --git a/web_src/js/features/comp/LabelEdit.js b/web_src/js/features/comp/LabelEdit.js index 26800ae05c92e..6631835f3ed93 100644 --- a/web_src/js/features/comp/LabelEdit.js +++ b/web_src/js/features/comp/LabelEdit.js @@ -26,7 +26,7 @@ function updateExclusiveLabelEdit(form) { } } -export function initCompLabelEdit(selector) { +export async function initCompLabelEdit(selector) { if (!$(selector).length) return; initCompColorPicker(); @@ -43,7 +43,6 @@ export function initCompLabelEdit(selector) { // Edit label $('.edit-label-button').on('click', function () { - $('.edit-label .color-picker').minicolors('value', $(this).data('color')); $('#label-modal-id').val($(this).data('id')); const $nameInput = $('.edit-label .label-name-input'); @@ -60,9 +59,8 @@ export function initCompLabelEdit(selector) { (!this.hasAttribute('data-exclusive') || !isExclusiveScopeName($nameInput.val()))); updateExclusiveLabelEdit('.edit-label'); - $('.edit-label .label-desc-input').val($(this).data('description')); - $('.edit-label .color-picker').val($(this).data('color')); - $('.edit-label .minicolors-swatch-color').css('background-color', $(this).data('color')); + $('.edit-label .label-desc-input').val(this.getAttribute('data-description')); + $('.edit-label .color-picker').minicolors('value', this.getAttribute('data-color')); $('.edit-label.modal').modal({ onApprove() { diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index 80b7e83385cc7..c7cc8f5cd3ed8 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -133,24 +133,17 @@ export function initImageDiff() { $container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : ''); } - sizes.image1.css({ - width: sizes.size1.width * factor, - height: sizes.size1.height * factor - }); - sizes.image1.parent().css({ - margin: `10px auto`, - width: sizes.size1.width * factor + 2, - height: sizes.size1.height * factor + 2 - }); - sizes.image2.css({ - width: sizes.size2.width * factor, - height: sizes.size2.height * factor - }); - sizes.image2.parent().css({ - margin: `10px auto`, - width: sizes.size2.width * factor + 2, - height: sizes.size2.height * factor + 2 - }); + sizes.image1[0].style.width = `${sizes.size1.width * factor}px`; + sizes.image1[0].style.height = `${sizes.size1.height * factor}px`; + sizes.image1.parent()[0].style.margin = '10px auto'; + sizes.image1.parent()[0].style.width = `${sizes.size1.width * factor + 2}px`; + sizes.image1.parent()[0].style.height = `${sizes.size1.height * factor + 2}px`; + + sizes.image2[0].style.width = `${sizes.size2.width * factor}px`; + sizes.image2[0].style.height = `${sizes.size2.height * factor}px`; + sizes.image2.parent()[0].style.margin = '10px auto'; + sizes.image2.parent()[0].style.width = `${sizes.size2.width * factor + 2}px`; + sizes.image2.parent()[0].style.height = `${sizes.size2.height * factor + 2}px`; } function initSwipe(sizes) { @@ -159,36 +152,29 @@ export function initImageDiff() { factor = (diffContainerWidth - 12) / sizes.max.width; } - sizes.image1.css({ - width: sizes.size1.width * factor, - height: sizes.size1.height * factor - }); - sizes.image1.parent().css({ - margin: `0px ${sizes.ratio[0] * factor}px`, - width: sizes.size1.width * factor + 2, - height: sizes.size1.height * factor + 2 - }); - sizes.image1.parent().parent().css({ - padding: `${sizes.ratio[1] * factor}px 0 0 0`, - width: sizes.max.width * factor + 2 - }); - sizes.image2.css({ - width: sizes.size2.width * factor, - height: sizes.size2.height * factor - }); - sizes.image2.parent().css({ - margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`, - width: sizes.size2.width * factor + 2, - height: sizes.size2.height * factor + 2 - }); - sizes.image2.parent().parent().css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 2 - }); - $container.find('.diff-swipe').css({ - width: sizes.max.width * factor + 2, - height: sizes.max.height * factor + 30 /* extra height for inner "position: absolute" elements */, - }); + sizes.image1[0].style.width = `${sizes.size1.width * factor}px`; + sizes.image1[0].style.height = `${sizes.size1.height * factor}px`; + sizes.image1.parent()[0].style.margin = `0px ${sizes.ratio[0] * factor}px`; + sizes.image1.parent()[0].style.width = `${sizes.size1.width * factor + 2}px`; + sizes.image1.parent()[0].style.height = `${sizes.size1.height * factor + 2}px`; + sizes.image1.parent().parent()[0].style.padding = `${sizes.ratio[1] * factor}px 0 0 0`; + sizes.image1.parent().parent()[0].style.width = `${sizes.max.width * factor + 2}px`; + + sizes.image2[0].style.width = `${sizes.size2.width * factor}px`; + sizes.image2[0].style.height = `${sizes.size2.height * factor}px`; + sizes.image2.parent()[0].style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`; + sizes.image2.parent()[0].style.width = `${sizes.size2.width * factor + 2}px`; + sizes.image2.parent()[0].style.height = `${sizes.size2.height * factor + 2}px`; + sizes.image2.parent().parent()[0].style.width = `${sizes.max.width * factor + 2}px`; + sizes.image2.parent().parent()[0].style.height = `${sizes.max.height * factor + 2}px`; + + $container.find('.diff-swipe')[0].style.width = `${sizes.max.width * factor + 2}px`; + $container.find('.diff-swipe')[0].style.height = `${sizes.max.height * factor + 30}px`; + + // extra height for inner "position: absolute" elements + $container.find('.diff-swipe')[0].style.width = `${sizes.max.width * factor + 2}px`; + $container.find('.diff-swipe')[0].style.height = `${sizes.max.height * factor + 30}px`; + $container.find('.swipe-bar').on('mousedown', function(e) { e.preventDefault(); @@ -200,13 +186,9 @@ export function initImageDiff() { e2.preventDefault(); const value = Math.max(0, Math.min(e2.clientX - $swipeFrame.offset().left, width)); + $swipeBar[0].style.left = `${value}px`; + $container.find('.swipe-container')[0].style.width = `${$swipeFrame.width() - value}px`; - $swipeBar.css({ - left: value - }); - $container.find('.swipe-container').css({ - width: $swipeFrame.width() - value - }); $(document).on('mouseup.diff-swipe', () => { $(document).off('.diff-swipe'); }); diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 96cfa78d0b7a2..5afb407223b0f 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -389,7 +389,7 @@ async function onEditContent(event) { dz.emit('complete', attachment); dz.files.push(attachment); fileUuidDict[attachment.uuid] = {submitted: true}; - $dropzone.find(`img[src='${imgSrc}']`).css('max-width', '100%'); + $dropzone.find(`img[src='${imgSrc}']`)[0].style.maxWidth = '100%'; const $input = $(``).val(attachment.uuid); $dropzone.find('.files').append($input); } diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js index 1f86711ab16e0..e95d875ec4e2e 100644 --- a/web_src/js/features/repo-projects.js +++ b/web_src/js/features/repo-projects.js @@ -72,7 +72,7 @@ async function initRepoProjectSortable() { await PUT($(column).data('url'), { data: { sorting: i, - color: rgbToHex($(column).css('backgroundColor')), + color: rgbToHex(window.getComputedStyle($(column)[0]).backgroundColor), }, }); } catch (error) { @@ -111,8 +111,9 @@ export function initRepoProject() { const $projectColorInput = $(this).find('#new_project_column_color'); const $boardColumn = $(this).closest('.project-column'); - if ($boardColumn.css('backgroundColor')) { - setLabelColor($projectHeader, rgbToHex($boardColumn.css('backgroundColor'))); + const bgColor = $boardColumn[0].style.backgroundColor; + if (bgColor) { + setLabelColor($projectHeader, rgbToHex(bgColor)); } $(this).find('.edit-project-column-button').on('click', async function (e) { From 6c5681ebca163ab7d3c510537d4794a4425b141c Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 16 Mar 2024 19:43:58 +0100 Subject: [PATCH 2/4] tweaks --- web_src/js/features/comp/LabelEdit.js | 2 +- web_src/js/features/imagediff.js | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/web_src/js/features/comp/LabelEdit.js b/web_src/js/features/comp/LabelEdit.js index 6631835f3ed93..44fc9d9b6b37e 100644 --- a/web_src/js/features/comp/LabelEdit.js +++ b/web_src/js/features/comp/LabelEdit.js @@ -26,7 +26,7 @@ function updateExclusiveLabelEdit(form) { } } -export async function initCompLabelEdit(selector) { +export function initCompLabelEdit(selector) { if (!$(selector).length) return; initCompColorPicker(); diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index c7cc8f5cd3ed8..ab30515104577 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -168,9 +168,6 @@ export function initImageDiff() { sizes.image2.parent().parent()[0].style.width = `${sizes.max.width * factor + 2}px`; sizes.image2.parent().parent()[0].style.height = `${sizes.max.height * factor + 2}px`; - $container.find('.diff-swipe')[0].style.width = `${sizes.max.width * factor + 2}px`; - $container.find('.diff-swipe')[0].style.height = `${sizes.max.height * factor + 30}px`; - // extra height for inner "position: absolute" elements $container.find('.diff-swipe')[0].style.width = `${sizes.max.width * factor + 2}px`; $container.find('.diff-swipe')[0].style.height = `${sizes.max.height * factor + 30}px`; From 8b6199ccade147e68919ee1e65df6213efa9a6a8 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 18 Mar 2024 23:43:10 +0100 Subject: [PATCH 3/4] clean up image code --- web_src/js/features/imagediff.js | 77 ++++++++++++++++++++------------ 1 file changed, 49 insertions(+), 28 deletions(-) diff --git a/web_src/js/features/imagediff.js b/web_src/js/features/imagediff.js index ab30515104577..293e1f809a799 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -133,17 +133,25 @@ export function initImageDiff() { $container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : ''); } - sizes.image1[0].style.width = `${sizes.size1.width * factor}px`; - sizes.image1[0].style.height = `${sizes.size1.height * factor}px`; - sizes.image1.parent()[0].style.margin = '10px auto'; - sizes.image1.parent()[0].style.width = `${sizes.size1.width * factor + 2}px`; - sizes.image1.parent()[0].style.height = `${sizes.size1.height * factor + 2}px`; - - sizes.image2[0].style.width = `${sizes.size2.width * factor}px`; - sizes.image2[0].style.height = `${sizes.size2.height * factor}px`; - sizes.image2.parent()[0].style.margin = '10px auto'; - sizes.image2.parent()[0].style.width = `${sizes.size2.width * factor + 2}px`; - sizes.image2.parent()[0].style.height = `${sizes.size2.height * factor + 2}px`; + const image1 = sizes.image1[0]; + if (image1) { + const container = image1.parentNode; + image1.style.width = `${sizes.size1.width * factor}px`; + image1.style.height = `${sizes.size1.height * factor}px`; + container.style.margin = '10px auto'; + container.style.width = `${sizes.size1.width * factor + 2}px`; + container.style.height = `${sizes.size1.height * factor + 2}px`; + } + + const image2 = sizes.image2[0]; + if (image2) { + const container = image2.parentNode; + image2.style.width = `${sizes.size2.width * factor}px`; + image2.style.height = `${sizes.size2.height * factor}px`; + container.style.margin = '10px auto'; + container.style.width = `${sizes.size2.width * factor + 2}px`; + container.style.height = `${sizes.size2.height * factor + 2}px`; + } } function initSwipe(sizes) { @@ -152,25 +160,38 @@ export function initImageDiff() { factor = (diffContainerWidth - 12) / sizes.max.width; } - sizes.image1[0].style.width = `${sizes.size1.width * factor}px`; - sizes.image1[0].style.height = `${sizes.size1.height * factor}px`; - sizes.image1.parent()[0].style.margin = `0px ${sizes.ratio[0] * factor}px`; - sizes.image1.parent()[0].style.width = `${sizes.size1.width * factor + 2}px`; - sizes.image1.parent()[0].style.height = `${sizes.size1.height * factor + 2}px`; - sizes.image1.parent().parent()[0].style.padding = `${sizes.ratio[1] * factor}px 0 0 0`; - sizes.image1.parent().parent()[0].style.width = `${sizes.max.width * factor + 2}px`; - - sizes.image2[0].style.width = `${sizes.size2.width * factor}px`; - sizes.image2[0].style.height = `${sizes.size2.height * factor}px`; - sizes.image2.parent()[0].style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`; - sizes.image2.parent()[0].style.width = `${sizes.size2.width * factor + 2}px`; - sizes.image2.parent()[0].style.height = `${sizes.size2.height * factor + 2}px`; - sizes.image2.parent().parent()[0].style.width = `${sizes.max.width * factor + 2}px`; - sizes.image2.parent().parent()[0].style.height = `${sizes.max.height * factor + 2}px`; + const image1 = sizes.image1[0]; + if (image1) { + const container = image1.parentNode; + const swipeFrame = container.parentNode; + image1.style.width = `${sizes.size1.width * factor}px`; + image1.style.height = `${sizes.size1.height * factor}px`; + container.style.margin = `0px ${sizes.ratio[0] * factor}px`; + container.style.width = `${sizes.size1.width * factor + 2}px`; + container.style.height = `${sizes.size1.height * factor + 2}px`; + swipeFrame.style.padding = `${sizes.ratio[1] * factor}px 0 0 0`; + swipeFrame.style.width = `${sizes.max.width * factor + 2}px`; + } + + const image2 = sizes.image2[0]; + if (image2) { + const container = image2.parentNode; + const swipeFrame = container.parentNode; + image2.style.width = `${sizes.size2.width * factor}px`; + image2.style.height = `${sizes.size2.height * factor}px`; + container.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`; + container.style.width = `${sizes.size2.width * factor + 2}px`; + container.style.height = `${sizes.size2.height * factor + 2}px`; + swipeFrame.style.width = `${sizes.max.width * factor + 2}px`; + swipeFrame.style.height = `${sizes.max.height * factor + 2}px`; + } // extra height for inner "position: absolute" elements - $container.find('.diff-swipe')[0].style.width = `${sizes.max.width * factor + 2}px`; - $container.find('.diff-swipe')[0].style.height = `${sizes.max.height * factor + 30}px`; + const swipe = $container.find('.diff-swipe')[0]; + if (swipe) { + swipe.style.width = `${sizes.max.width * factor + 2}px`; + swipe.style.height = `${sizes.max.height * factor + 30}px`; + } $container.find('.swipe-bar').on('mousedown', function(e) { e.preventDefault(); From e37e06f0c322a2f312c28c115c7711efc0bc65f6 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 19 Mar 2024 11:16:57 +0100 Subject: [PATCH 4/4] Update web_src/js/features/colorpicker.js Co-authored-by: wxiaoguang --- web_src/js/features/colorpicker.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/features/colorpicker.js b/web_src/js/features/colorpicker.js index f91df67d64438..df0353376d756 100644 --- a/web_src/js/features/colorpicker.js +++ b/web_src/js/features/colorpicker.js @@ -1,7 +1,7 @@ import $ from 'jquery'; export async function createColorPicker(els) { - if (!els?.length) return; + if (!els.length) return; await Promise.all([ import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors'),