code.gitea.io/gitea@v1.22.3/web_src/js/features/colorpicker.js (about)

     1  import {createTippy} from '../modules/tippy.js';
     2  
     3  export async function initColorPickers() {
     4    const els = document.getElementsByClassName('js-color-picker-input');
     5    if (!els.length) return;
     6  
     7    await Promise.all([
     8      import(/* webpackChunkName: "colorpicker" */'vanilla-colorful/hex-color-picker.js'),
     9      import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
    10    ]);
    11  
    12    for (const el of els) {
    13      initPicker(el);
    14    }
    15  }
    16  
    17  function updateSquare(el, newValue) {
    18    el.style.color = /#[0-9a-f]{6}/i.test(newValue) ? newValue : 'transparent';
    19  }
    20  
    21  function updatePicker(el, newValue) {
    22    el.setAttribute('color', newValue);
    23  }
    24  
    25  function initPicker(el) {
    26    const input = el.querySelector('input');
    27  
    28    const square = document.createElement('div');
    29    square.classList.add('preview-square');
    30    updateSquare(square, input.value);
    31    el.append(square);
    32  
    33    const picker = document.createElement('hex-color-picker');
    34    picker.addEventListener('color-changed', (e) => {
    35      input.value = e.detail.value;
    36      input.focus();
    37      updateSquare(square, e.detail.value);
    38    });
    39  
    40    input.addEventListener('input', (e) => {
    41      updateSquare(square, e.target.value);
    42      updatePicker(picker, e.target.value);
    43    });
    44  
    45    createTippy(input, {
    46      trigger: 'focus click',
    47      theme: 'bare',
    48      hideOnClick: true,
    49      content: picker,
    50      placement: 'bottom-start',
    51      interactive: true,
    52      onShow() {
    53        updatePicker(picker, input.value);
    54      },
    55    });
    56  
    57    // init precolors
    58    for (const colorEl of el.querySelectorAll('.precolors .color')) {
    59      colorEl.addEventListener('click', (e) => {
    60        const newValue = e.target.getAttribute('data-color-hex');
    61        input.value = newValue;
    62        input.dispatchEvent(new Event('input', {bubbles: true}));
    63        updateSquare(square, newValue);
    64      });
    65    }
    66  }