Function addKeyColorInput

docs/ui/src/js/keyColors.js:23–101

(c, thisId = this.id, currentColorName, index)

import {createDetailOutputColors} from './createOutputColors';

function addKeyColorInput(c, thisId = this.id, currentColorName, index) {
  let parent = thisId.replace('_addKeyColor', '');
  let destId = parent.concat('_keyColors');
  let dest = document.getElementById(destId);
  let div = document.createElement('div');

  let randId = randomId();
  div.className = 'keyColor';
  div.id = randId + '-item';
  let sw = document.createElement('input');
  sw.type = 'color';
  sw.value = c;

  const currentColorIndex = _theme.colors.map((e) => e.name).indexOf(currentColorName);
  const chartsModeSelect = document.getElementById('chartsMode');
  const currentColor = _theme.colors[currentColorIndex];

  sw.oninput = (e) => {
    // Replace current indexed value from color keys with new value from color input field
    let currentKeys = currentColor.colorKeys;
    let currentColorName = _theme.colors[currentColorIndex].name;
    currentKeys.splice(index, 1, e.target.value);

    _theme.updateColor = {color: currentColorName, colorKeys: currentKeys};

    throttle(updateRamps(currentColor, parent), 10);
    throttle(createDetailOutputColors(currentColorName), 10);

    setTimeout(function () {
      updateColorDots(chartsModeSelect.value, 'colorScale', currentKeys, parent);
    }, 500);
  };

  const updateModel = () => {
    create3dModel('tabModelContent', [currentColor], chartsModeSelect.value);
  };

  sw.addEventListener('input', throttle(updateModel, 50));

  sw.className = 'keyColor-Item';
  sw.id = randId + '-sw';
  sw.style.backgroundColor = c;

  let button = document.createElement('button');
  button.className = 'spectrum-ActionButton spectrum-ActionButton--sizeM';
  button.innerHTML = `
  <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Delete">
    <use xlink:href="#spectrum-icon-18-Delete" />
  </svg>`;

  button.addEventListener('click', function (e) {
    // Remove current indexed value from color keys
    let currentColor = _theme.colors[currentColorIndex];
    let currentKeys = currentColor.colorKeys;
    currentKeys.splice(index, 1);
    _theme.updateColor = {color: currentColorName, colorKeys: currentKeys};

    updateRamps(currentColor, parent);