91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
import { throttle } from '@common/utils/common'
|
|
import Pickr from '@simonwep/pickr'
|
|
import '@simonwep/pickr/dist/themes/classic.min.css'
|
|
|
|
export interface PickrTools {
|
|
pickr: Pickr | null
|
|
create: (dom: HTMLElement, color: string, swatches: string[] | null, change: (color: string) => void, reset?: () => void) => PickrTools
|
|
destroy: () => void
|
|
setColor: (color: string) => void
|
|
}
|
|
|
|
export const pickrTools: PickrTools = {
|
|
pickr: null,
|
|
create(dom, color, swatches, change, reset) {
|
|
const pickrTools: PickrTools = Object.create(this)
|
|
|
|
pickrTools.pickr = Pickr.create({
|
|
el: dom,
|
|
default: color,
|
|
theme: 'classic', // or 'monolith', or 'nano'
|
|
defaultRepresentation: 'RGBA',
|
|
autoReposition: false,
|
|
closeWithKey: '',
|
|
appClass: 'color-picker',
|
|
comparison: false,
|
|
useAsButton: true,
|
|
|
|
swatches,
|
|
|
|
components: {
|
|
|
|
// Main components
|
|
preview: true,
|
|
opacity: true,
|
|
hue: true,
|
|
|
|
// Input / output Options
|
|
interaction: {
|
|
hex: true,
|
|
rgba: true,
|
|
input: true,
|
|
cancel: true,
|
|
// save: true,
|
|
},
|
|
},
|
|
|
|
i18n: {
|
|
// Strings visible in the UI
|
|
'ui:dialog': ' ',
|
|
'btn:toggle': window.i18n.t('theme_edit_modal__pick_color'),
|
|
'btn:swatch': ' ',
|
|
'btn:last-color': window.i18n.t('theme_edit_modal__pick_last_color'),
|
|
'btn:save': window.i18n.t('theme_edit_modal__pick_save'),
|
|
'btn:cancel': window.i18n.t('theme_edit_modal__pick_cancel'),
|
|
|
|
// Strings used for aria-labels
|
|
'aria:btn:save': ' ',
|
|
'aria:btn:cancel': ' ',
|
|
'aria:input': ' ',
|
|
'aria:palette': ' ',
|
|
'aria:hue': '',
|
|
'aria:opacity': ' ',
|
|
},
|
|
})
|
|
|
|
let swatchselectColor: any
|
|
|
|
const throttleChange = throttle((color: any, source: string) => {
|
|
if (source == 'swatch' && swatchselectColor !== color) return
|
|
change(color.toRGBA().toString())
|
|
})
|
|
pickrTools.pickr.on('swatchselect', (color: any) => {
|
|
swatchselectColor = color
|
|
}).on('change', throttleChange).on('cancel', () => {
|
|
console.log('cancel')
|
|
change(color)
|
|
reset?.()
|
|
})
|
|
|
|
return pickrTools
|
|
},
|
|
destroy() {
|
|
if (!this.pickr) return
|
|
this.pickr.destroyAndRemove()
|
|
this.pickr = null
|
|
},
|
|
setColor(color) {
|
|
this.pickr?.setColor(color)
|
|
},
|
|
}
|