OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:40:48 AM	rwxr-xr-x
📄 AlertDialog.ts	1.7 KB	02/20/2020 06:38:15 AM	rw-r--r--
📄 Autocomplete.ts	1.78 KB	02/20/2020 06:38:15 AM	rw-r--r--
📄 Bar.ts	689 bytes	02/20/2020 06:38:16 AM	rw-r--r--
📄 BodyPanel.ts	2.11 KB	02/20/2020 06:38:16 AM	rw-r--r--
📄 Collection.ts	5.65 KB	02/20/2020 06:38:17 AM	rw-r--r--
📄 ColorInput.ts	5.81 KB	02/20/2020 06:38:17 AM	rw-r--r--
📄 ColorPicker.ts	4.06 KB	02/20/2020 06:38:19 AM	rw-r--r--
📄 ConfirmDialog.ts	2.13 KB	02/20/2020 06:38:19 AM	rw-r--r--
📄 CustomEditor.ts	2.04 KB	02/20/2020 06:38:20 AM	rw-r--r--
📄 Dialogs.ts	3.91 KB	02/20/2020 06:38:20 AM	rw-r--r--
📄 Dropzone.ts	4.89 KB	02/20/2020 06:38:21 AM	rw-r--r--
📄 Grid.ts	735 bytes	02/20/2020 06:38:21 AM	rw-r--r--
📄 IFrame.ts	3.3 KB	02/20/2020 06:38:22 AM	rw-r--r--
📄 Label.ts	1.29 KB	02/20/2020 06:38:22 AM	rw-r--r--
📄 SelectBox.ts	2.37 KB	02/20/2020 06:38:23 AM	rw-r--r--
📄 SizeInput.ts	4.96 KB	02/20/2020 06:38:23 AM	rw-r--r--
📄 TabPanel.ts	5.41 KB	02/20/2020 06:38:24 AM	rw-r--r--
📄 Table.ts	1.52 KB	02/20/2020 06:38:24 AM	rw-r--r--
📄 TextField.ts	4.24 KB	02/20/2020 06:38:25 AM	rw-r--r--
📄 TypeAheadInput.ts	1.31 KB	02/20/2020 06:38:26 AM	rw-r--r--
📄 UrlInput.ts	9.25 KB	02/20/2020 06:38:26 AM	rw-r--r--
📄 WindowManager.ts	6.3 KB	02/20/2020 06:38:27 AM	rw-r--r--
📁 imagetools	-	02/20/2020 06:42:42 AM	rwxr-xr-x

Editing: ColorPicker.ts

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */

import { ColourPicker } from '@ephox/acid';
import { AlloyTriggers, Behaviour, Composing, Form, Memento, NativeEvents, Representing, SimpleSpec } from '@ephox/alloy';
import { Types } from '@ephox/bridge';
import { console } from '@ephox/dom-globals';
import { Option } from '@ephox/katamari';

import { ComposingConfigs } from '../alien/ComposingConfigs';
import { formActionEvent } from '../general/FormEvents';

// import I18n from 'tinymce/core/api/util/I18n';

const english = {
  'colorcustom.rgb.red.label': 'R',
  'colorcustom.rgb.red.description': 'Red component',
  'colorcustom.rgb.green.label': 'G',
  'colorcustom.rgb.green.description': 'Green component',
  'colorcustom.rgb.blue.label': 'B',
  'colorcustom.rgb.blue.description': 'Blue component',
  'colorcustom.rgb.hex.label': '#',
  'colorcustom.rgb.hex.description': 'Hex color code',
  'colorcustom.rgb.range': 'Range 0 to 255',
  'colorcustom.sb.saturation': 'Saturation',
  'colorcustom.sb.brightness': 'Brightness',
  'colorcustom.sb.picker': 'Saturation and Brightness Picker',
  'colorcustom.sb.palette': 'Saturation and Brightness Palette',
  'colorcustom.sb.instructions': 'Use arrow keys to select saturation and brightness, on x and y axes',
  'colorcustom.hue.hue': 'Hue',
  'colorcustom.hue.slider': 'Hue Slider',
  'colorcustom.hue.palette': 'Hue Palette',
  'colorcustom.hue.instructions': 'Use arrow keys to select a hue',
  'aria.color.picker': 'Color Picker',
  'aria.input.invalid': 'Invalid input'
};

const getEnglishText = function (key) {
  return english[key];
};

const translate = function (key) {
  // TODO: use this: I18n.translate()
  return getEnglishText(key);
};

export const renderColorPicker = (spec: Types.ColorPicker.ColorPicker): SimpleSpec => {
  const getClass = (key: string) => 'tox-' + key;

const colourPickerFactory = ColourPicker.makeFactory(translate, getClass);

const onValidHex = (form) => {
    AlloyTriggers.emitWith(form, formActionEvent, { name: 'hex-valid', value: true },  );
  };

const onInvalidHex = (form) => {
    AlloyTriggers.emitWith(form, formActionEvent, { name: 'hex-valid', value: false } );
  };

const memPicker = Memento.record(
    colourPickerFactory.sketch({
      dom: {
        tag: 'div',
        classes: [getClass('color-picker-container')],
        attributes: {
          role: 'presentation'
        }
      },
      onValidHex,
      onInvalidHex
    })
  );

return {
    dom: {
      tag: 'div'
    },
    components: [
      memPicker.asSpec()
    ],
    behaviours: Behaviour.derive([
      // We'll allow invalid values
      Representing.config({
        store: {
          mode: 'manual',
          getValue: (comp) => {
            const picker = memPicker.get(comp);
            const optRgbForm = Composing.getCurrent(picker);
            const optHex = optRgbForm.bind((rgbForm) => {
              const formValues = Representing.getValue(rgbForm);
              return formValues.hex as Option<string>;
            }) ;
            return optHex.map((hex) => '#' + hex).getOr('');
          },
          setValue: (comp, newValue) => {
            const pattern = /^#([a-fA-F0-9]{3}(?:[a-fA-F0-9]{3})?)/;
            const m = pattern.exec(newValue);
            const picker = memPicker.get(comp);
            const optRgbForm = Composing.getCurrent(picker);
            optRgbForm.fold(() => {
              // tslint:disable-next-line:no-console
              console.log('Can not find form');
            }, (rgbForm) => {
              Representing.setValue(rgbForm, {
                hex: Option.from(m[1]).getOr('')
              });

// So not the way to do this.
              Form.getField(rgbForm, 'hex').each((hexField) => {
                AlloyTriggers.emit(hexField, NativeEvents.input());
              });
            });
          }
        }
      }),
      ComposingConfigs.self()
    ])
  };
};