Function createSamples

docs/ui/src/js/createSamples.js:22–73

(samples, scaleType)

hljs.registerLanguage('css', css);

function createSamples(samples, scaleType) {
  const colorClass = scaleType === 'sequential' ? _sequentialScale : _divergingScale;
  const originalSwatches = colorClass.swatches;
  const originalOutput = colorClass.output;
  const outputFormatPicker = document.getElementById(`${scaleType}_format`);
  const output = outputFormatPicker.value;
  const quoteSwitch = document.getElementById(`${scaleType}paramStringQuotes`);
  const quotes = quoteSwitch.checked;
  // reassign new swatch value
  colorClass.swatches = samples;
  const panelOutputContent = document.getElementById(`${scaleType}ColorScaleOutput`);
  panelOutputContent.innerHTML = ' ';

  let samplesWrapper = document.getElementById(`${scaleType}SampleSwatches`);
  samplesWrapper.innerHTML = ' ';

  let sampleColors = colorClass.colors;
  for (let i = 0; i < samples; i++) {
    createHtmlElement({
      element: 'div',
      className: 'sampleSwatch',
      styles: {
        backgroundColor: sampleColors[i]
      },
      appendTo: `${scaleType}SampleSwatches`
    });
  }

  colorClass.output = output;
  sampleColors = colorClass.colors;

  colorClass.samples =
    colorClass.output === 'HEX' || colorClass.output === 'RGB'
      ? sampleColors
      : sampleColors.map((c) => {
          return cssColorToRgb(c);
        });

  let colorvalueString = quotes
    ? sampleColors
        .map((c) => {
          return `"${c}"`;
        })
        .toString()
        .replaceAll(',', ', ')
    : sampleColors.toString().replaceAll(',', ', ');
  panelOutputContent.innerHTML = colorvalueString;

  // Reset color class to original swatches
  colorClass.swatches = originalSwatches;
  colorClass.output = originalOutput;
}

export {createSamples};