@ -1,18 +1,19 @@
@@ -1,18 +1,19 @@
import { createTippy } from '../modules/tippy.ts' ;
import type { DOMEvent } from '../utils/dom.ts' ;
import { registerGlobalInitFunc } from '../modules/observer.ts' ;
export async function initColorPickers() {
const els = document . querySelectorAll < HTMLElement > ( '.js-color-picker-input' ) ;
if ( ! els . length ) return ;
let imported = false ;
registerGlobalInitFunc ( 'initColorPicker' , async ( el ) = > {
if ( ! imported ) {
await Promise . all ( [
import ( /* webpackChunkName: "colorpicker" */ 'vanilla-colorful/hex-color-picker.js' ) ,
import ( /* webpackChunkName: "colorpicker" */ '../../css/features/colorpicker.css' ) ,
] ) ;
for ( const el of els ) {
initPicker ( el ) ;
imported = true ;
}
initPicker ( el ) ;
} ) ;
}
function updateSquare ( el : HTMLElement , newValue : string ) : void {
@ -55,13 +56,20 @@ function initPicker(el: HTMLElement): void {
@@ -55,13 +56,20 @@ function initPicker(el: HTMLElement): void {
} ,
} ) ;
// init precolors
// init random color & precolors
const setSelectedColor = ( color : string ) = > {
input . value = color ;
input . dispatchEvent ( new Event ( 'input' , { bubbles : true } ) ) ;
updateSquare ( square , color ) ;
} ;
el . querySelector ( '.generate-random-color' ) . addEventListener ( 'click' , ( ) = > {
const newValue = ` # ${ Math . floor ( Math . random ( ) * 0xFFFFFF ) . toString ( 16 ) . padStart ( 6 , '0' ) } ` ;
setSelectedColor ( newValue ) ;
} ) ;
for ( const colorEl of el . querySelectorAll < HTMLElement > ( '.precolors .color' ) ) {
colorEl . addEventListener ( 'click' , ( e : DOMEvent < MouseEvent , HTMLAnchorElement > ) = > {
const newValue = e . target . getAttribute ( 'data-color-hex' ) ;
input . value = newValue ;
input . dispatchEvent ( new Event ( 'input' , { bubbles : true } ) ) ;
updateSquare ( square , newValue ) ;
setSelectedColor ( newValue ) ;
} ) ;
}
}
wxiaoguang
5 months ago
committed by
GitHub