From 8c3d7c049a3540dfccf81a79e33a52b5f3172488 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 19 Mar 2024 17:28:46 +0100 Subject: [PATCH] Forbid jQuery `.css` and refactor all usage (#29852) Tested all functionality. There is a [pre-existing bug](https://github.com/go-gitea/gitea/issues/29853) when moving a project panels which is not caused by this refactoring. --------- Co-authored-by: wxiaoguang (cherry picked from commit fa100618c4b644346bf5666f92d33dce0747d0a2) --- .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 | 6 +- web_src/js/features/imagediff.js | 108 ++++++++++++------------ web_src/js/features/repo-legacy.js | 2 +- web_src/js/features/repo-projects.js | 7 +- 7 files changed, 78 insertions(+), 73 deletions(-) diff --git a/.eslintrc.yaml b/.eslintrc.yaml index b65fe56cf2..72039a6013 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -286,7 +286,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] @@ -409,7 +409,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 a5fdb3f5a6..df0353376d 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 5665b7a24a..d7e7038803 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 26800ae05c..44fc9d9b6b 100644 --- a/web_src/js/features/comp/LabelEdit.js +++ b/web_src/js/features/comp/LabelEdit.js @@ -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 80b7e83385..293e1f809a 100644 --- a/web_src/js/features/imagediff.js +++ b/web_src/js/features/imagediff.js @@ -133,24 +133,25 @@ 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 - }); + 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) { @@ -159,36 +160,39 @@ 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 */, - }); + 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 + 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(); @@ -200,13 +204,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 6155b3a5da..11bb758187 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 1f86711ab1..e95d875ec4 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) {