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 <wxiaoguang@gmail.com> (cherry picked from commit fa100618c4b644346bf5666f92d33dce0747d0a2)
This commit is contained in:
parent
272dffb0d6
commit
8c3d7c049a
7 changed files with 78 additions and 73 deletions
|
@ -286,7 +286,7 @@ rules:
|
||||||
jquery/no-class: [0]
|
jquery/no-class: [0]
|
||||||
jquery/no-clone: [2]
|
jquery/no-clone: [2]
|
||||||
jquery/no-closest: [0]
|
jquery/no-closest: [0]
|
||||||
jquery/no-css: [0]
|
jquery/no-css: [2]
|
||||||
jquery/no-data: [0]
|
jquery/no-data: [0]
|
||||||
jquery/no-deferred: [2]
|
jquery/no-deferred: [2]
|
||||||
jquery/no-delegate: [2]
|
jquery/no-delegate: [2]
|
||||||
|
@ -409,7 +409,7 @@ rules:
|
||||||
no-jquery/no-constructor-attributes: [2]
|
no-jquery/no-constructor-attributes: [2]
|
||||||
no-jquery/no-contains: [2]
|
no-jquery/no-contains: [2]
|
||||||
no-jquery/no-context-prop: [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-data: [0]
|
||||||
no-jquery/no-deferred: [2]
|
no-jquery/no-deferred: [2]
|
||||||
no-jquery/no-delegate: [2]
|
no-jquery/no-delegate: [2]
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
export async function createColorPicker($els) {
|
import $ from 'jquery';
|
||||||
if (!$els || !$els.length) return;
|
|
||||||
|
export async function createColorPicker(els) {
|
||||||
|
if (!els.length) return;
|
||||||
|
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors'),
|
import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors'),
|
||||||
import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors/jquery.minicolors.css'),
|
import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors/jquery.minicolors.css'),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
$els.minicolors();
|
return $(els).minicolors();
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,11 +2,15 @@ import $ from 'jquery';
|
||||||
import {createColorPicker} from '../colorpicker.js';
|
import {createColorPicker} from '../colorpicker.js';
|
||||||
|
|
||||||
export function initCompColorPicker() {
|
export function initCompColorPicker() {
|
||||||
createColorPicker($('.color-picker'));
|
(async () => {
|
||||||
|
await createColorPicker(document.querySelectorAll('.color-picker'));
|
||||||
|
|
||||||
$('.precolors .color').on('click', function () {
|
for (const el of document.querySelectorAll('.precolors .color')) {
|
||||||
const color_hex = $(this).data('color-hex');
|
el.addEventListener('click', (e) => {
|
||||||
$('.color-picker').val(color_hex);
|
const color = e.target.getAttribute('data-color-hex');
|
||||||
$('.minicolors-swatch-color').css('background-color', color_hex);
|
const parent = e.target.closest('.color.picker');
|
||||||
});
|
$(parent.querySelector('.color-picker')).minicolors('value', color);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})();
|
||||||
}
|
}
|
||||||
|
|
|
@ -43,7 +43,6 @@ export function initCompLabelEdit(selector) {
|
||||||
|
|
||||||
// Edit label
|
// Edit label
|
||||||
$('.edit-label-button').on('click', function () {
|
$('.edit-label-button').on('click', function () {
|
||||||
$('.edit-label .color-picker').minicolors('value', $(this).data('color'));
|
|
||||||
$('#label-modal-id').val($(this).data('id'));
|
$('#label-modal-id').val($(this).data('id'));
|
||||||
|
|
||||||
const $nameInput = $('.edit-label .label-name-input');
|
const $nameInput = $('.edit-label .label-name-input');
|
||||||
|
@ -60,9 +59,8 @@ export function initCompLabelEdit(selector) {
|
||||||
(!this.hasAttribute('data-exclusive') || !isExclusiveScopeName($nameInput.val())));
|
(!this.hasAttribute('data-exclusive') || !isExclusiveScopeName($nameInput.val())));
|
||||||
updateExclusiveLabelEdit('.edit-label');
|
updateExclusiveLabelEdit('.edit-label');
|
||||||
|
|
||||||
$('.edit-label .label-desc-input').val($(this).data('description'));
|
$('.edit-label .label-desc-input').val(this.getAttribute('data-description'));
|
||||||
$('.edit-label .color-picker').val($(this).data('color'));
|
$('.edit-label .color-picker').minicolors('value', this.getAttribute('data-color'));
|
||||||
$('.edit-label .minicolors-swatch-color').css('background-color', $(this).data('color'));
|
|
||||||
|
|
||||||
$('.edit-label.modal').modal({
|
$('.edit-label.modal').modal({
|
||||||
onApprove() {
|
onApprove() {
|
||||||
|
|
|
@ -133,24 +133,25 @@ export function initImageDiff() {
|
||||||
$container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : '');
|
$container.find('.bounds-info-before .bounds-info-height').text(`${sizes.image2[0].naturalHeight}px`).addClass(heightChanged ? 'red' : '');
|
||||||
}
|
}
|
||||||
|
|
||||||
sizes.image1.css({
|
const image1 = sizes.image1[0];
|
||||||
width: sizes.size1.width * factor,
|
if (image1) {
|
||||||
height: sizes.size1.height * factor
|
const container = image1.parentNode;
|
||||||
});
|
image1.style.width = `${sizes.size1.width * factor}px`;
|
||||||
sizes.image1.parent().css({
|
image1.style.height = `${sizes.size1.height * factor}px`;
|
||||||
margin: `10px auto`,
|
container.style.margin = '10px auto';
|
||||||
width: sizes.size1.width * factor + 2,
|
container.style.width = `${sizes.size1.width * factor + 2}px`;
|
||||||
height: sizes.size1.height * factor + 2
|
container.style.height = `${sizes.size1.height * factor + 2}px`;
|
||||||
});
|
}
|
||||||
sizes.image2.css({
|
|
||||||
width: sizes.size2.width * factor,
|
const image2 = sizes.image2[0];
|
||||||
height: sizes.size2.height * factor
|
if (image2) {
|
||||||
});
|
const container = image2.parentNode;
|
||||||
sizes.image2.parent().css({
|
image2.style.width = `${sizes.size2.width * factor}px`;
|
||||||
margin: `10px auto`,
|
image2.style.height = `${sizes.size2.height * factor}px`;
|
||||||
width: sizes.size2.width * factor + 2,
|
container.style.margin = '10px auto';
|
||||||
height: sizes.size2.height * factor + 2
|
container.style.width = `${sizes.size2.width * factor + 2}px`;
|
||||||
});
|
container.style.height = `${sizes.size2.height * factor + 2}px`;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function initSwipe(sizes) {
|
function initSwipe(sizes) {
|
||||||
|
@ -159,36 +160,39 @@ export function initImageDiff() {
|
||||||
factor = (diffContainerWidth - 12) / sizes.max.width;
|
factor = (diffContainerWidth - 12) / sizes.max.width;
|
||||||
}
|
}
|
||||||
|
|
||||||
sizes.image1.css({
|
const image1 = sizes.image1[0];
|
||||||
width: sizes.size1.width * factor,
|
if (image1) {
|
||||||
height: sizes.size1.height * factor
|
const container = image1.parentNode;
|
||||||
});
|
const swipeFrame = container.parentNode;
|
||||||
sizes.image1.parent().css({
|
image1.style.width = `${sizes.size1.width * factor}px`;
|
||||||
margin: `0px ${sizes.ratio[0] * factor}px`,
|
image1.style.height = `${sizes.size1.height * factor}px`;
|
||||||
width: sizes.size1.width * factor + 2,
|
container.style.margin = `0px ${sizes.ratio[0] * factor}px`;
|
||||||
height: sizes.size1.height * factor + 2
|
container.style.width = `${sizes.size1.width * factor + 2}px`;
|
||||||
});
|
container.style.height = `${sizes.size1.height * factor + 2}px`;
|
||||||
sizes.image1.parent().parent().css({
|
swipeFrame.style.padding = `${sizes.ratio[1] * factor}px 0 0 0`;
|
||||||
padding: `${sizes.ratio[1] * factor}px 0 0 0`,
|
swipeFrame.style.width = `${sizes.max.width * factor + 2}px`;
|
||||||
width: sizes.max.width * factor + 2
|
}
|
||||||
});
|
|
||||||
sizes.image2.css({
|
const image2 = sizes.image2[0];
|
||||||
width: sizes.size2.width * factor,
|
if (image2) {
|
||||||
height: sizes.size2.height * factor
|
const container = image2.parentNode;
|
||||||
});
|
const swipeFrame = container.parentNode;
|
||||||
sizes.image2.parent().css({
|
image2.style.width = `${sizes.size2.width * factor}px`;
|
||||||
margin: `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`,
|
image2.style.height = `${sizes.size2.height * factor}px`;
|
||||||
width: sizes.size2.width * factor + 2,
|
container.style.margin = `${sizes.ratio[3] * factor}px ${sizes.ratio[2] * factor}px`;
|
||||||
height: sizes.size2.height * factor + 2
|
container.style.width = `${sizes.size2.width * factor + 2}px`;
|
||||||
});
|
container.style.height = `${sizes.size2.height * factor + 2}px`;
|
||||||
sizes.image2.parent().parent().css({
|
swipeFrame.style.width = `${sizes.max.width * factor + 2}px`;
|
||||||
width: sizes.max.width * factor + 2,
|
swipeFrame.style.height = `${sizes.max.height * factor + 2}px`;
|
||||||
height: sizes.max.height * factor + 2
|
}
|
||||||
});
|
|
||||||
$container.find('.diff-swipe').css({
|
// extra height for inner "position: absolute" elements
|
||||||
width: sizes.max.width * factor + 2,
|
const swipe = $container.find('.diff-swipe')[0];
|
||||||
height: sizes.max.height * factor + 30 /* extra height for inner "position: absolute" elements */,
|
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) {
|
$container.find('.swipe-bar').on('mousedown', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
|
@ -200,13 +204,9 @@ export function initImageDiff() {
|
||||||
e2.preventDefault();
|
e2.preventDefault();
|
||||||
|
|
||||||
const value = Math.max(0, Math.min(e2.clientX - $swipeFrame.offset().left, width));
|
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).on('mouseup.diff-swipe', () => {
|
||||||
$(document).off('.diff-swipe');
|
$(document).off('.diff-swipe');
|
||||||
});
|
});
|
||||||
|
|
|
@ -389,7 +389,7 @@ async function onEditContent(event) {
|
||||||
dz.emit('complete', attachment);
|
dz.emit('complete', attachment);
|
||||||
dz.files.push(attachment);
|
dz.files.push(attachment);
|
||||||
fileUuidDict[attachment.uuid] = {submitted: true};
|
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 = $(`<input id="${attachment.uuid}" name="files" type="hidden">`).val(attachment.uuid);
|
const $input = $(`<input id="${attachment.uuid}" name="files" type="hidden">`).val(attachment.uuid);
|
||||||
$dropzone.find('.files').append($input);
|
$dropzone.find('.files').append($input);
|
||||||
}
|
}
|
||||||
|
|
|
@ -72,7 +72,7 @@ async function initRepoProjectSortable() {
|
||||||
await PUT($(column).data('url'), {
|
await PUT($(column).data('url'), {
|
||||||
data: {
|
data: {
|
||||||
sorting: i,
|
sorting: i,
|
||||||
color: rgbToHex($(column).css('backgroundColor')),
|
color: rgbToHex(window.getComputedStyle($(column)[0]).backgroundColor),
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
@ -111,8 +111,9 @@ export function initRepoProject() {
|
||||||
const $projectColorInput = $(this).find('#new_project_column_color');
|
const $projectColorInput = $(this).find('#new_project_column_color');
|
||||||
const $boardColumn = $(this).closest('.project-column');
|
const $boardColumn = $(this).closest('.project-column');
|
||||||
|
|
||||||
if ($boardColumn.css('backgroundColor')) {
|
const bgColor = $boardColumn[0].style.backgroundColor;
|
||||||
setLabelColor($projectHeader, rgbToHex($boardColumn.css('backgroundColor')));
|
if (bgColor) {
|
||||||
|
setLabelColor($projectHeader, rgbToHex(bgColor));
|
||||||
}
|
}
|
||||||
|
|
||||||
$(this).find('.edit-project-column-button').on('click', async function (e) {
|
$(this).find('.edit-project-column-button').on('click', async function (e) {
|
||||||
|
|
Loading…
Reference in a new issue