mirror of https://github.com/go-gitea/gitea.git
32 lines
1.0 KiB
JavaScript
32 lines
1.0 KiB
JavaScript
export async function initColorPickers(selector = '.js-color-picker-input input', opts = {}) {
|
|
const inputEls = document.querySelectorAll(selector);
|
|
if (!inputEls.length) return;
|
|
|
|
const [{coloris, init}] = await Promise.all([
|
|
import(/* webpackChunkName: "colorpicker" */'@melloware/coloris'),
|
|
import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
|
|
]);
|
|
|
|
init();
|
|
coloris({
|
|
el: selector,
|
|
alpha: false,
|
|
focusInput: true,
|
|
selectInput: false,
|
|
...opts,
|
|
});
|
|
|
|
for (const inputEl of inputEls) {
|
|
const parent = inputEl.closest('.js-color-picker-input');
|
|
// prevent tabbing on the color preview `button` inside the input
|
|
parent.querySelector('button').tabIndex = -1;
|
|
// init precolors
|
|
for (const el of parent.querySelectorAll('.precolors .color')) {
|
|
el.addEventListener('click', (e) => {
|
|
inputEl.value = e.target.getAttribute('data-color-hex');
|
|
inputEl.dispatchEvent(new Event('input', {bubbles: true}));
|
|
});
|
|
}
|
|
}
|
|
}
|