mirror of https://github.com/go-gitea/gitea
Replace coloris with vanilla-colorful (#30201)
Found [a better color picker](https://github.com/web-padawan/vanilla-colorful) that [does not rely](https://github.com/mdbassit/Coloris/issues/139) on `querySelectorAll` or a global shared instance, and is also around a third of the size of the previous one. The popover is handled by tippy.js for which I introduced a new "bare" theme and it uses a new sibling-based mechanism which should prove useful later to create tippy popovers via HTML only. <img width="846" alt="Screenshot 2024-03-31 at 04 03 38" src="https://github.com/go-gitea/gitea/assets/115237/7639b911-a2d7-4f5c-bffd-a9d84561e747">pull/30256/head^2
silverwind
8 months ago
committed by
GitHub
parent
654cfd1dfb
commit
1195be41a1
@ -1,31 +1,66 @@ |
||||
export async function initColorPickers(selector = '.js-color-picker-input input', opts = {}) { |
||||
const inputEls = document.querySelectorAll(selector); |
||||
if (!inputEls.length) return; |
||||
import {createTippy} from '../modules/tippy.js'; |
||||
|
||||
const [{coloris, init}] = await Promise.all([ |
||||
import(/* webpackChunkName: "colorpicker" */'@melloware/coloris'), |
||||
export async function initColorPickers() { |
||||
const els = document.getElementsByClassName('js-color-picker-input'); |
||||
if (!els.length) return; |
||||
|
||||
await Promise.all([ |
||||
import(/* webpackChunkName: "colorpicker" */'vanilla-colorful/hex-color-picker.js'), |
||||
import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'), |
||||
]); |
||||
|
||||
init(); |
||||
coloris({ |
||||
el: selector, |
||||
alpha: false, |
||||
focusInput: true, |
||||
selectInput: false, |
||||
...opts, |
||||
for (const el of els) { |
||||
initPicker(el); |
||||
} |
||||
} |
||||
|
||||
function updateSquare(el, newValue) { |
||||
el.style.color = /#[0-9a-f]{6}/i.test(newValue) ? newValue : 'transparent'; |
||||
} |
||||
|
||||
function updatePicker(el, newValue) { |
||||
el.setAttribute('color', newValue); |
||||
} |
||||
|
||||
function initPicker(el) { |
||||
const input = el.querySelector('input'); |
||||
|
||||
const square = document.createElement('div'); |
||||
square.classList.add('preview-square'); |
||||
updateSquare(square, input.value); |
||||
el.append(square); |
||||
|
||||
const picker = document.createElement('hex-color-picker'); |
||||
picker.addEventListener('color-changed', (e) => { |
||||
input.value = e.detail.value; |
||||
input.focus(); |
||||
updateSquare(square, e.detail.value); |
||||
}); |
||||
|
||||
input.addEventListener('input', (e) => { |
||||
updateSquare(square, e.target.value); |
||||
updatePicker(picker, e.target.value); |
||||
}); |
||||
|
||||
createTippy(input, { |
||||
trigger: 'focus click', |
||||
theme: 'bare', |
||||
hideOnClick: true, |
||||
content: picker, |
||||
placement: 'bottom-start', |
||||
interactive: true, |
||||
onShow() { |
||||
updatePicker(picker, input.value); |
||||
}, |
||||
}); |
||||
|
||||
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})); |
||||
}); |
||||
} |
||||
// init precolors
|
||||
for (const colorEl of el.querySelectorAll('.precolors .color')) { |
||||
colorEl.addEventListener('click', (e) => { |
||||
const newValue = e.target.getAttribute('data-color-hex'); |
||||
input.value = newValue; |
||||
input.dispatchEvent(new Event('input', {bubbles: true})); |
||||
updateSquare(square, newValue); |
||||
}); |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue