Function addScaleKeyColorInput

docs/ui/src/js/scaleKeyColors.js:22–122

(c, thisId = this.id, scaleType, index, scalePosition)

import {extendChroma} from './chroma-plus';

function addScaleKeyColorInput(c, thisId = this.id, scaleType, index, scalePosition) {
  let sampleNumber = document.getElementById(`${scaleType}Samples`);
  let chartsModeSelect = document.getElementById(`${scaleType}_chartsMode`);
  let currentColor;
  if (scaleType === 'sequential') currentColor = _sequentialScale;
  if (scaleType === 'diverging') currentColor = _divergingScale;
  let currentKeys = scaleType === 'sequential' ? currentColor.colorKeys : scalePosition === 'start' ? currentColor.startKeys : scalePosition === 'end' ? currentColor.endKeys : currentColor.middleKey;
  let parent = thisId.replace('_addKeyColor', '').replace('_addStartKeyColor', '').replace('_addEndKeyColor', '');

  let concatString = scaleType === 'theme' || scaleType === 'sequential' ? '_keyColors' : `_${scalePosition}KeyColors`;

  let destId = parent.concat(concatString);

  let dest = document.getElementById(destId);
  let div = document.createElement('div');

  let randId = randomId();
  if (scalePosition === 'middle') {
    div.className = `keyColor keyColor-${scaleType} keyColor-${scaleType}-${scalePosition}`;
  } else {
    div.className = `keyColor keyColor-${scaleType}`;
  }
  div.id = randId + '-item';
  let sw = document.createElement('input');
  sw.type = 'color';
  sw.value = c;

  sw.addEventListener(
    'input',
    throttle((e) => {
      // Replace current indexed value from color keys with new value from color input field
      c = e.target.value;

      if (scaleType === 'sequential') {
        // let currentKeys = currentColor.colorKeys;
        currentKeys.splice(index, 1, c);
        currentColor.colorKeys = currentKeys;
      }
      if (scaleType === 'diverging') {
        if (scalePosition === 'start') {
          // let currentKeys = currentColor.startKeys;
          currentKeys.splice(index, 1, c);
          currentColor.startKeys = currentKeys;
        }
        if (scalePosition === 'end') {
          // let currentKeys = currentColor.endKeys;
          currentKeys.splice(index, 1, c);
          currentColor.endKeys = currentKeys;
        }
        if (scalePosition === 'middle') {
          currentColor.middleKey = c;
        }
      }

      updateRamps(currentColor, parent, scaleType);
      updateColorDots(chartsModeSelect.value, scaleType);
      createSamples(sampleNumber.value, scaleType);
      if (scaleType === 'sequential' || scaleType === 'diverging') {