OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 06:45:48 AM	rwxr-xr-x
📄 AndroidRealm.ts	2.43 KB	02/20/2020 06:32:39 AM	rw-r--r--
📄 Buttons.ts	2.4 KB	02/20/2020 06:32:40 AM	rw-r--r--
📄 ColorSlider.ts	3.21 KB	02/20/2020 06:32:40 AM	rw-r--r--
📄 CommonRealm.ts	1.49 KB	02/20/2020 06:32:41 AM	rw-r--r--
📄 Dropup.ts	2.38 KB	02/20/2020 06:32:41 AM	rw-r--r--
📄 FontSizeSlider.ts	1.34 KB	02/20/2020 06:32:42 AM	rw-r--r--
📄 HeadingSlider.ts	1.63 KB	02/20/2020 06:32:42 AM	rw-r--r--
📄 ImagePicker.ts	2.13 KB	02/20/2020 06:32:43 AM	rw-r--r--
📄 Inputs.ts	2.86 KB	02/20/2020 06:32:43 AM	rw-r--r--
📄 IosRealm.ts	2.65 KB	02/20/2020 06:32:44 AM	rw-r--r--
📄 LinkButton.ts	2.33 KB	02/20/2020 06:32:45 AM	rw-r--r--
📄 OuterContainer.ts	953 bytes	02/20/2020 06:32:45 AM	rw-r--r--
📄 SerialisedDialog.ts	8.2 KB	02/20/2020 06:32:46 AM	rw-r--r--
📄 SizeSlider.ts	2.32 KB	02/20/2020 06:32:46 AM	rw-r--r--
📄 StylesMenu.ts	6.51 KB	02/20/2020 06:32:47 AM	rw-r--r--
📄 ToolbarWidgets.ts	645 bytes	02/20/2020 06:32:47 AM	rw-r--r--

Editing: SizeSlider.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 { Behaviour, Slider, Toggling, SketchSpec } from '@ephox/alloy';
import { FieldSchema, ValueSchema } from '@ephox/boulder';

import Receivers from '../channels/Receivers';
import Styles from '../style/Styles';
import * as UiDomFactory from '../util/UiDomFactory';

const schema = ValueSchema.objOfOnly([
  FieldSchema.strict('getInitialValue'),
  FieldSchema.strict('onChange'),
  FieldSchema.strict('category'),
  FieldSchema.strict('sizes')
]);

const sketch = function (rawSpec): SketchSpec {
  const spec = ValueSchema.asRawOrDie('SizeSlider', schema, rawSpec);

const isValidValue = function (valueIndex) {
    return valueIndex >= 0 && valueIndex < spec.sizes.length;
  };

const onChange = function (slider, thumb, valueIndex) {
    const index = valueIndex.x();
    if (isValidValue(index)) {
      spec.onChange(index);
    }
  };

return Slider.sketch({
    dom: {
      tag: 'div',
      classes: [
        Styles.resolve('slider-' + spec.category + '-size-container'),
        Styles.resolve('slider'),
        Styles.resolve('slider-size-container') ]
    },
    onChange,
    onDragStart (slider, thumb) {
      Toggling.on(thumb);
    },
    onDragEnd (slider, thumb) {
      Toggling.off(thumb);
    },
    model: {
      mode: 'x',
      minX: 0,
      maxX: spec.sizes.length - 1,
      getInitialValue: () => {
        return {
          x: () => spec.getInitialValue()
        };
      }
    },
    stepSize: 1,
    snapToGrid: true,

sliderBehaviours: Behaviour.derive([
      Receivers.orientation(Slider.refresh)
    ]),

components: [
      Slider.parts().spectrum({
        dom: UiDomFactory.dom('<div class="${prefix}-slider-size-container"></div>'),
        components: [
          UiDomFactory.spec('<div class="${prefix}-slider-size-line"></div>')
        ]
      }),

Slider.parts().thumb({
        dom: UiDomFactory.dom('<div class="${prefix}-slider-thumb"></div>'),
        behaviours: Behaviour.derive([
          Toggling.config({
            toggleClass: Styles.resolve('thumb-active')
          })
        ])
      })
    ]
  });
};

export default {
  sketch
};