-
-
Notifications
You must be signed in to change notification settings - Fork 5.8k
Replace coloris with vanilla-colorful #30201
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 11 commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
001e94c
Replace coloris with vanilla-colorful
silverwind cdb21a0
explicitely import hex
silverwind f4ba144
remove unused css
silverwind 469914b
add box-shadow
silverwind 961d743
pass documented false to tippy
silverwind 031dce7
fix color attribute
silverwind 02e6048
Merge branch 'main' into color2
silverwind c0bffc5
more tweaks
silverwind 2210256
tweak precolor click
silverwind 6287731
fix pointer
silverwind 52b56b7
use document.getElementsByClassName for performance
silverwind 348875c
Update web_src/js/modules/tippy.js
silverwind 39590cf
make arrow option overidable
silverwind 164e95d
Merge branch 'main' into color2
silverwind 3a5661a
Merge branch 'main' into color2
silverwind c59d573
Merge branch 'main' into color2
GiteaBot File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| }); | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So it really have an attributed called "color"?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes: https://github.com/web-padawan/vanilla-colorful?tab=readme-ov-file#usage