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>tags/v1.22.0-rc0
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] | ||||
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] |
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([ | 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(); | |||||
} | } |
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 () { | |||||
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); | |||||
}); | |||||
} | |||||
})(); | |||||
} | } |
// 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'); | ||||
(!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 .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({ | $('.edit-label.modal').modal({ | ||||
onApprove() { | onApprove() { |
$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({ | |||||
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) { | function initSwipe(sizes) { | ||||
factor = (diffContainerWidth - 12) / sizes.max.width; | 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) { | $container.find('.swipe-bar').on('mousedown', function(e) { | ||||
e.preventDefault(); | e.preventDefault(); | ||||
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'); | ||||
}); | }); |
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); | ||||
} | } |
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) { | ||||
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')) { | |||||
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) { | $(this).find('.edit-project-column-button').on('click', async function (e) { |