Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@ephox/acid
Advanced tools
@ephox/acid - npm Package Compare versions
Comparing version 1.0.73 to 1.0.75
| export interface Hex { | ||
| value: () => string; | ||
| readonly value: string; | ||
| } | ||
| export interface Hsv { | ||
| hue: () => number; | ||
| saturation: () => number; | ||
| value: () => number; | ||
| readonly hue: number; | ||
| readonly saturation: number; | ||
| readonly value: number; | ||
| } | ||
| export interface Rgba { | ||
| red: () => number; | ||
| green: () => number; | ||
| blue: () => number; | ||
| alpha: () => number; | ||
| readonly red: number; | ||
| readonly green: number; | ||
| readonly blue: number; | ||
| readonly alpha: number; | ||
| } | ||
| //# sourceMappingURL=ColourTypes.d.ts.map |
| import { Option } from '@ephox/katamari'; | ||
| import { Hex, Rgba } from './ColourTypes'; | ||
| declare const hexColour: (hexString: string) => Hex; | ||
| declare const hexColour: (value: string) => Hex; | ||
| declare const isHexString: (hex: string) => boolean; | ||
@@ -5,0 +5,0 @@ declare const fromString: (hex: string) => Option<Hex>; |
@@ -1,25 +0,19 @@ | ||
| import { Fun, Option } from '@ephox/katamari'; | ||
| var hexColour = function (hexString) { | ||
| return { | ||
| value: Fun.constant(hexString) | ||
| }; | ||
| }; | ||
| import { Option } from '@ephox/katamari'; | ||
| var hexColour = function (value) { return ({ | ||
| value: value | ||
| }); }; | ||
| var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; | ||
| var longformRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i; | ||
| var isHexString = function (hex) { | ||
| return shorthandRegex.test(hex) || longformRegex.test(hex); | ||
| }; | ||
| var fromString = function (hex) { | ||
| return isHexString(hex) ? Option.some({ value: Fun.constant(hex) }) : Option.none(); | ||
| }; | ||
| var isHexString = function (hex) { return shorthandRegex.test(hex) || longformRegex.test(hex); }; | ||
| var fromString = function (hex) { return isHexString(hex) ? Option.some({ value: hex }) : Option.none(); }; | ||
| // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") | ||
| var getLongForm = function (hex) { | ||
| var hexString = hex.value().replace(shorthandRegex, function (m, r, g, b) { | ||
| var hexString = hex.value.replace(shorthandRegex, function (m, r, g, b) { | ||
| return r + r + g + g + b + b; | ||
| }); | ||
| return { value: Fun.constant(hexString) }; | ||
| return { value: hexString }; | ||
| }; | ||
| var extractValues = function (hex) { | ||
| var longForm = getLongForm(hex); | ||
| var splitForm = longformRegex.exec(longForm.value()); | ||
| var splitForm = longformRegex.exec(longForm.value); | ||
| return splitForm === null ? ['FFFFFF', 'FF', 'FF', 'FF'] : splitForm; | ||
@@ -32,3 +26,3 @@ }; | ||
| var fromRgba = function (rgbaColour) { | ||
| var value = toHex(rgbaColour.red()) + toHex(rgbaColour.green()) + toHex(rgbaColour.blue()); | ||
| var value = toHex(rgbaColour.red) + toHex(rgbaColour.green) + toHex(rgbaColour.blue); | ||
| return hexColour(value); | ||
@@ -35,0 +29,0 @@ }; |
@@ -1,9 +0,6 @@ | ||
| import { Fun } from '@ephox/katamari'; | ||
| var hsvColour = function (hue, saturation, value) { | ||
| return { | ||
| hue: Fun.constant(hue), | ||
| saturation: Fun.constant(saturation), | ||
| value: Fun.constant(value) | ||
| }; | ||
| }; | ||
| var hsvColour = function (hue, saturation, value) { return ({ | ||
| hue: hue, | ||
| saturation: saturation, | ||
| value: value | ||
| }); }; | ||
| var fromRgb = function (rgbaColour) { | ||
@@ -13,5 +10,5 @@ var h = 0; | ||
| var v = 0; | ||
| var r = rgbaColour.red() / 255; | ||
| var g = rgbaColour.green() / 255; | ||
| var b = rgbaColour.blue() / 255; | ||
| var r = rgbaColour.red / 255; | ||
| var g = rgbaColour.green / 255; | ||
| var b = rgbaColour.blue / 255; | ||
| var minRGB = Math.min(r, Math.min(g, b)); | ||
@@ -23,3 +20,3 @@ var maxRGB = Math.max(r, Math.max(g, b)); | ||
| } | ||
| /*eslint no-nested-ternary:0 */ | ||
| /* eslint no-nested-ternary:0 */ | ||
| var d = (r === minRGB) ? g - b : ((b === minRGB) ? r - g : b - r); | ||
@@ -26,0 +23,0 @@ h = (r === minRGB) ? 3 : ((b === minRGB) ? 1 : 5); |
@@ -9,4 +9,4 @@ import { Option } from '@ephox/katamari'; | ||
| declare const toString: (rgba: Rgba) => string; | ||
| declare const redColour: () => Rgba; | ||
| export { rgbaColour, isRgbaComponent, fromHsv, fromHex, fromString, toString, redColour as red }; | ||
| declare const red: Rgba; | ||
| export { rgbaColour, isRgbaComponent, fromHsv, fromHex, fromString, toString, red }; | ||
| //# sourceMappingURL=RgbaColour.d.ts.map |
@@ -1,2 +0,2 @@ | ||
| import { Fun, Option } from '@ephox/katamari'; | ||
| import { Option } from '@ephox/katamari'; | ||
| import * as HexColour from './HexColour'; | ||
@@ -8,10 +8,8 @@ var min = Math.min; | ||
| var rgbaRegex = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d?(?:\.\d+)?)\)/; | ||
| var rgbaColour = function (red, green, blue, alpha) { | ||
| return { | ||
| red: Fun.constant(red), | ||
| green: Fun.constant(green), | ||
| blue: Fun.constant(blue), | ||
| alpha: Fun.constant(alpha) | ||
| }; | ||
| }; | ||
| var rgbaColour = function (red, green, blue, alpha) { return ({ | ||
| red: red, | ||
| green: green, | ||
| blue: blue, | ||
| alpha: alpha | ||
| }); }; | ||
| var isRgbaComponent = function (value) { | ||
@@ -25,5 +23,5 @@ var num = parseInt(value, 10); | ||
| var b; | ||
| var hue = (hsv.hue() || 0) % 360; | ||
| var saturation = hsv.saturation() / 100; | ||
| var brightness = hsv.value() / 100; | ||
| var hue = (hsv.hue || 0) % 360; | ||
| var saturation = hsv.saturation / 100; | ||
| var brightness = hsv.value / 100; | ||
| saturation = max(0, min(saturation, 1)); | ||
@@ -107,5 +105,5 @@ brightness = max(0, min(brightness, 1)); | ||
| }; | ||
| var toString = function (rgba) { return "rgba(" + rgba.red() + "," + rgba.green() + "," + rgba.blue() + "," + rgba.alpha() + ")"; }; | ||
| var redColour = Fun.constant(rgbaColour(255, 0, 0, 1)); | ||
| export { rgbaColour, isRgbaComponent, fromHsv, fromHex, fromString, toString, redColour as red }; | ||
| var toString = function (rgba) { return "rgba(" + rgba.red + "," + rgba.green + "," + rgba.blue + "," + rgba.alpha + ")"; }; | ||
| var red = rgbaColour(255, 0, 0, 1); | ||
| export { rgbaColour, isRgbaComponent, fromHsv, fromHex, fromString, toString, red }; | ||
| //# sourceMappingURL=RgbaColour.js.map |
@@ -1,9 +0,9 @@ | ||
| import { SliderTypes, EventFormat } from '@ephox/alloy'; | ||
| declare const fieldsUpdate: () => string; | ||
| declare const sliderUpdate: () => string; | ||
| declare const paletteUpdate: () => string; | ||
| export interface SliderUpdateEvent extends EventFormat { | ||
| import { CustomEvent, SliderTypes } from '@ephox/alloy'; | ||
| declare const fieldsUpdate: string; | ||
| declare const sliderUpdate: string; | ||
| declare const paletteUpdate: string; | ||
| export interface SliderUpdateEvent extends CustomEvent { | ||
| value: () => SliderTypes.SliderValueY; | ||
| } | ||
| export interface PaletteUpdateEvent extends EventFormat { | ||
| export interface PaletteUpdateEvent extends CustomEvent { | ||
| value: () => SliderTypes.SliderValueXY; | ||
@@ -10,0 +10,0 @@ } |
@@ -1,6 +0,6 @@ | ||
| import { Id, Fun } from '@ephox/katamari'; | ||
| var fieldsUpdate = Fun.constant(Id.generate('rgb-hex-update')); | ||
| var sliderUpdate = Fun.constant(Id.generate('slider-update')); | ||
| var paletteUpdate = Fun.constant(Id.generate('palette-update')); | ||
| import { Id } from '@ephox/katamari'; | ||
| var fieldsUpdate = Id.generate('rgb-hex-update'); | ||
| var sliderUpdate = Id.generate('slider-update'); | ||
| var paletteUpdate = Id.generate('palette-update'); | ||
| export { fieldsUpdate, sliderUpdate, paletteUpdate }; | ||
| //# sourceMappingURL=ColourEvents.js.map |
| import { AlloyComponent, RawDomSchema, Sketcher } from '@ephox/alloy'; | ||
| export interface ColourPickerDetail extends Sketcher.SingleSketchDetail { | ||
| dom: RawDomSchema; | ||
| onValidHex: (component: AlloyComponent) => void; | ||
| onInvalidHex: (component: AlloyComponent) => void; | ||
| readonly dom: RawDomSchema; | ||
| readonly onValidHex: (component: AlloyComponent) => void; | ||
| readonly onInvalidHex: (component: AlloyComponent) => void; | ||
| } | ||
| export interface ColourPickerSpec extends Sketcher.SingleSketchSpec { | ||
| dom: RawDomSchema; | ||
| onValidHex?: (component: AlloyComponent) => void; | ||
| onInvalidHex?: (component: AlloyComponent) => void; | ||
| readonly dom: RawDomSchema; | ||
| readonly onValidHex?: (component: AlloyComponent) => void; | ||
| readonly onInvalidHex?: (component: AlloyComponent) => void; | ||
| } | ||
@@ -12,0 +12,0 @@ export interface ColourPickerSketcher extends Sketcher.SingleSketch<ColourPickerSpec> { |
@@ -17,3 +17,3 @@ import { AddEventsBehaviour, AlloyEvents, Behaviour, Composing, Keying, Memento, Sketcher } from '@ephox/alloy'; | ||
| var state = { | ||
| paletteRgba: Fun.constant(Cell(RgbaColour.red())) | ||
| paletteRgba: Cell(RgbaColour.red) | ||
| }; | ||
@@ -25,3 +25,3 @@ var memPalette = Memento.record(sbPalette.sketch({})); | ||
| var rgba = RgbaColour.fromHex(hex); | ||
| state.paletteRgba().set(rgba); | ||
| state.paletteRgba.set(rgba); | ||
| sbPalette.setRgba(palette, rgba); | ||
@@ -44,5 +44,5 @@ }); | ||
| var value = simulatedEvent.event().value(); | ||
| var oldRgb = state.paletteRgba().get(); | ||
| var oldRgb = state.paletteRgba.get(); | ||
| var hsvColour = HsvColour.fromRgb(oldRgb); | ||
| var newHsvColour = HsvColour.hsvColour(hsvColour.hue(), value.x(), (100 - value.y())); | ||
| var newHsvColour = HsvColour.hsvColour(hsvColour.hue, value.x(), (100 - value.y())); | ||
| var rgb = RgbaColour.fromHsv(newHsvColour); | ||
@@ -72,9 +72,7 @@ var nuHex = HexColour.fromRgba(rgb); | ||
| // AlloyEvents.run(ColourEvents.fieldsUpdate(), fieldsUpdates()), | ||
| AlloyEvents.run(ColourEvents.paletteUpdate(), paletteUpdates()), | ||
| AlloyEvents.run(ColourEvents.sliderUpdate(), sliderUpdates()) | ||
| AlloyEvents.run(ColourEvents.paletteUpdate, paletteUpdates()), | ||
| AlloyEvents.run(ColourEvents.sliderUpdate, sliderUpdates()) | ||
| ]), | ||
| Composing.config({ | ||
| find: function (comp) { | ||
| return memRgb.getOpt(comp); | ||
| } | ||
| find: function (comp) { return memRgb.getOpt(comp); } | ||
| }), | ||
@@ -81,0 +79,0 @@ Keying.config({ |
@@ -44,3 +44,3 @@ import { AlloyTriggers, Behaviour, Focusing, Slider } from '@ephox/alloy'; | ||
| onChange: function (slider, _thumb, value) { | ||
| AlloyTriggers.emitWith(slider, sliderUpdate(), { | ||
| AlloyTriggers.emitWith(slider, sliderUpdate, { | ||
| value: value | ||
@@ -47,0 +47,0 @@ }); |
| import { __assign } from "tslib"; | ||
| /* eslint-disable max-len */ | ||
| import { AddEventsBehaviour, AlloyEvents, AlloyTriggers, Behaviour, Focusing, Form, FormField, Input, Invalidating, Memento, Representing, Sketcher, Tabstopping } from '@ephox/alloy'; | ||
@@ -8,2 +9,3 @@ import { Cell, Fun, Future, Id, Merger, Option, Result } from '@ephox/katamari'; | ||
| import * as ColourEvents from '../ColourEvents'; | ||
| /* eslint-enable max-len */ | ||
| var validInput = Id.generate('valid-input'); | ||
@@ -14,34 +16,32 @@ var invalidInput = Id.generate('invalid-input'); | ||
| var rgbFormFactory = function (translate, getClass, onValidHexx, onInvalidHexx) { | ||
| var invalidation = function (label, isValid) { | ||
| return Invalidating.config({ | ||
| invalidClass: getClass('invalid'), | ||
| notify: { | ||
| onValidate: function (comp) { | ||
| AlloyTriggers.emitWith(comp, validatingInput, { | ||
| type: label | ||
| }); | ||
| }, | ||
| onValid: function (comp) { | ||
| AlloyTriggers.emitWith(comp, validInput, { | ||
| type: label, | ||
| value: Representing.getValue(comp) | ||
| }); | ||
| }, | ||
| onInvalid: function (comp) { | ||
| AlloyTriggers.emitWith(comp, invalidInput, { | ||
| type: label, | ||
| value: Representing.getValue(comp) | ||
| }); | ||
| } | ||
| var invalidation = function (label, isValid) { return Invalidating.config({ | ||
| invalidClass: getClass('invalid'), | ||
| notify: { | ||
| onValidate: function (comp) { | ||
| AlloyTriggers.emitWith(comp, validatingInput, { | ||
| type: label | ||
| }); | ||
| }, | ||
| validator: { | ||
| validate: function (comp) { | ||
| var value = Representing.getValue(comp); | ||
| var res = isValid(value) ? Result.value(true) : Result.error(translate('aria.input.invalid')); | ||
| return Future.pure(res); | ||
| }, | ||
| validateOnLoad: false | ||
| onValid: function (comp) { | ||
| AlloyTriggers.emitWith(comp, validInput, { | ||
| type: label, | ||
| value: Representing.getValue(comp) | ||
| }); | ||
| }, | ||
| onInvalid: function (comp) { | ||
| AlloyTriggers.emitWith(comp, invalidInput, { | ||
| type: label, | ||
| value: Representing.getValue(comp) | ||
| }); | ||
| } | ||
| }); | ||
| }; | ||
| }, | ||
| validator: { | ||
| validate: function (comp) { | ||
| var value = Representing.getValue(comp); | ||
| var res = isValid(value) ? Result.value(true) : Result.error(translate('aria.input.invalid')); | ||
| return Future.pure(res); | ||
| }, | ||
| validateOnLoad: false | ||
| } | ||
| }); }; | ||
| var renderTextField = function (isValid, name, label, description, data) { | ||
@@ -93,3 +93,3 @@ var helptext = translate(translatePrefix + 'range'); | ||
| Representing.setValue(form, { | ||
| hex: hex.value() | ||
| hex: hex.value | ||
| }); | ||
@@ -101,5 +101,5 @@ } | ||
| var copyRgbToForm = function (form, rgb) { | ||
| var red = rgb.red(); | ||
| var green = rgb.green(); | ||
| var blue = rgb.blue(); | ||
| var red = rgb.red; | ||
| var green = rgb.green; | ||
| var blue = rgb.blue; | ||
| Representing.setValue(form, { red: red, green: green, blue: blue }); | ||
@@ -121,3 +121,3 @@ }; | ||
| memPreview.getOpt(anyInSystem).each(function (preview) { | ||
| Css.set(preview.element(), 'background-color', '#' + hex.value()); | ||
| Css.set(preview.element(), 'background-color', '#' + hex.value); | ||
| }); | ||
@@ -127,6 +127,6 @@ }; | ||
| var state = { | ||
| red: Fun.constant(Cell(Option.some(255))), | ||
| green: Fun.constant(Cell(Option.some(255))), | ||
| blue: Fun.constant(Cell(Option.some(255))), | ||
| hex: Fun.constant(Cell(Option.some('ffffff'))) | ||
| red: Cell(Option.some(255)), | ||
| green: Cell(Option.some(255)), | ||
| blue: Cell(Option.some(255)), | ||
| hex: Cell(Option.some('ffffff')) | ||
| }; | ||
@@ -138,18 +138,12 @@ var copyHexToRgb = function (form, hex) { | ||
| }; | ||
| var get = function (prop) { | ||
| return state[prop]().get(); | ||
| }; | ||
| var get = function (prop) { return state[prop].get(); }; | ||
| var set = function (prop, value) { | ||
| state[prop]().set(value); | ||
| state[prop].set(value); | ||
| }; | ||
| var getValueRgb = function () { | ||
| return get('red').bind(function (red) { return get('green').bind(function (green) { return get('blue').map(function (blue) { | ||
| return RgbaColour.rgbaColour(red, green, blue, 1); | ||
| }); }); }); | ||
| }; | ||
| var getValueRgb = function () { return get('red').bind(function (red) { return get('green').bind(function (green) { return get('blue').map(function (blue) { return RgbaColour.rgbaColour(red, green, blue, 1); }); }); }); }; | ||
| // TODO: Find way to use this for palette and slider updates | ||
| var setValueRgb = function (rgb) { | ||
| var red = rgb.red(); | ||
| var green = rgb.green(); | ||
| var blue = rgb.blue(); | ||
| var red = rgb.red; | ||
| var green = rgb.green; | ||
| var blue = rgb.blue; | ||
| set('red', Option.some(red)); | ||
@@ -175,3 +169,3 @@ set('green', Option.some(green)); | ||
| setValueRgb(rgb); | ||
| AlloyTriggers.emitWith(form, ColourEvents.fieldsUpdate(), { | ||
| AlloyTriggers.emitWith(form, ColourEvents.fieldsUpdate, { | ||
| hex: hex | ||
@@ -189,5 +183,3 @@ }); | ||
| }; | ||
| var isHexInputEvent = function (data) { | ||
| return data.type() === 'hex'; | ||
| }; | ||
| var isHexInputEvent = function (data) { return data.type() === 'hex'; }; | ||
| var onValidInput = function (form, simulatedEvent) { | ||
@@ -202,8 +194,6 @@ var data = simulatedEvent.event(); | ||
| }; | ||
| var formPartStrings = function (key) { | ||
| return { | ||
| label: translate(translatePrefix + key + '.label'), | ||
| description: translate(translatePrefix + key + '.description') | ||
| }; | ||
| }; | ||
| var formPartStrings = function (key) { return ({ | ||
| label: translate(translatePrefix + key + '.label'), | ||
| description: translate(translatePrefix + key + '.description') | ||
| }); }; | ||
| var redStrings = formPartStrings('red'); | ||
@@ -214,32 +204,30 @@ var greenStrings = formPartStrings('green'); | ||
| // TODO: Provide a nice way of adding APIs to existing sketchers | ||
| return Merger.deepMerge(Form.sketch(function (parts) { | ||
| return { | ||
| dom: { | ||
| tag: 'form', | ||
| classes: [getClass('rgb-form')], | ||
| attributes: { 'aria-label': translate('aria.color.picker') } | ||
| }, | ||
| components: [ | ||
| parts.field('red', FormField.sketch(renderTextField(RgbaColour.isRgbaComponent, 'red', redStrings.label, redStrings.description, 255))), | ||
| parts.field('green', FormField.sketch(renderTextField(RgbaColour.isRgbaComponent, 'green', greenStrings.label, greenStrings.description, 255))), | ||
| parts.field('blue', FormField.sketch(renderTextField(RgbaColour.isRgbaComponent, 'blue', blueStrings.label, blueStrings.description, 255))), | ||
| parts.field('hex', FormField.sketch(renderTextField(HexColour.isHexString, 'hex', hexStrings.label, hexStrings.description, 'ffffff'))), | ||
| memPreview.asSpec() | ||
| ], | ||
| formBehaviours: Behaviour.derive([ | ||
| Invalidating.config({ | ||
| invalidClass: getClass('form-invalid') | ||
| }), | ||
| AddEventsBehaviour.config('rgb-form-events', [ | ||
| AlloyEvents.run(validInput, onValidInput), | ||
| AlloyEvents.run(invalidInput, onInvalidInput), | ||
| AlloyEvents.run(validatingInput, onInvalidInput) | ||
| ]) | ||
| return Merger.deepMerge(Form.sketch(function (parts) { return ({ | ||
| dom: { | ||
| tag: 'form', | ||
| classes: [getClass('rgb-form')], | ||
| attributes: { 'aria-label': translate('aria.color.picker') } | ||
| }, | ||
| components: [ | ||
| parts.field('red', FormField.sketch(renderTextField(RgbaColour.isRgbaComponent, 'red', redStrings.label, redStrings.description, 255))), | ||
| parts.field('green', FormField.sketch(renderTextField(RgbaColour.isRgbaComponent, 'green', greenStrings.label, greenStrings.description, 255))), | ||
| parts.field('blue', FormField.sketch(renderTextField(RgbaColour.isRgbaComponent, 'blue', blueStrings.label, blueStrings.description, 255))), | ||
| parts.field('hex', FormField.sketch(renderTextField(HexColour.isHexString, 'hex', hexStrings.label, hexStrings.description, 'ffffff'))), | ||
| memPreview.asSpec() | ||
| ], | ||
| formBehaviours: Behaviour.derive([ | ||
| Invalidating.config({ | ||
| invalidClass: getClass('form-invalid') | ||
| }), | ||
| AddEventsBehaviour.config('rgb-form-events', [ | ||
| AlloyEvents.run(validInput, onValidInput), | ||
| AlloyEvents.run(invalidInput, onInvalidInput), | ||
| AlloyEvents.run(validatingInput, onInvalidInput) | ||
| ]) | ||
| }; | ||
| }), { | ||
| ]) | ||
| }); }), { | ||
| apis: { | ||
| updateHex: function (form, hex) { | ||
| Representing.setValue(form, { | ||
| hex: hex.value() | ||
| hex: hex.value | ||
| }); | ||
@@ -246,0 +234,0 @@ copyHexToRgb(form, hex); |
@@ -55,3 +55,3 @@ import { AlloyTriggers, Behaviour, Composing, Focusing, Sketcher, Slider } from '@ephox/alloy'; | ||
| var onChange = function (slider, _thumb, value) { | ||
| AlloyTriggers.emitWith(slider, ColourEvents.paletteUpdate(), { | ||
| AlloyTriggers.emitWith(slider, ColourEvents.paletteUpdate, { | ||
| value: value | ||
@@ -62,3 +62,3 @@ }); | ||
| // Maybe make this initial value configurable? | ||
| setColour(spectrum.element().dom(), RgbaColour.toString(RgbaColour.red())); | ||
| setColour(spectrum.element().dom(), RgbaColour.toString(RgbaColour.red)); | ||
| }; | ||
@@ -65,0 +65,0 @@ var sliderBehaviours = Behaviour.derive([ |
@@ -8,6 +8,6 @@ import { assert, UnitTest } from '@ephox/bedrock-client'; | ||
| var hexBlack = HexColour.fromRgba(rgbaBlack); | ||
| assert.eq('000000', hexBlack.value()); | ||
| assert.eq('000000', hexBlack.value); | ||
| var hexWhite = HexColour.fromRgba(rgbaWhite); | ||
| assert.eq('ffffff', hexWhite.value()); | ||
| assert.eq('ffffff', hexWhite.value); | ||
| }); | ||
| //# sourceMappingURL=ConversionsTest.js.map |
| { | ||
| "name": "@ephox/acid", | ||
| "description": "Color library including Alloy UI component for a color picker", | ||
| "version": "1.0.73", | ||
| "version": "1.0.75", | ||
| "repository": { | ||
@@ -10,7 +10,7 @@ "type": "git", | ||
| "dependencies": { | ||
| "@ephox/alloy": "^6.0.6", | ||
| "@ephox/boulder": "^4.0.3", | ||
| "@ephox/alloy": "^7.0.1", | ||
| "@ephox/boulder": "^4.0.5", | ||
| "@ephox/dom-globals": "^1.1.2", | ||
| "@ephox/katamari": "^5.0.2", | ||
| "@ephox/sugar": "^5.1.3", | ||
| "@ephox/katamari": "^6.0.1", | ||
| "@ephox/sugar": "^6.0.1", | ||
| "tslib": "^1.9.3" | ||
@@ -36,7 +36,7 @@ }, | ||
| "prepublishOnly": "tsc -b", | ||
| "lint": "tslint --config ../../tslint.json --project tsconfig.json", | ||
| "lint": "eslint --config ../../.eslintrc.json src/**/*.ts", | ||
| "test": "bedrock-auto -b phantomjs -d src/test/ts", | ||
| "test-manual": "bedrock -d src/test/ts" | ||
| }, | ||
| "gitHead": "399ebc0921c6131f6341c58b28c499098b889a43" | ||
| "gitHead": "ea55538783127ba465b968d89dbf7087c80882a7" | ||
| } |
@@ -15,3 +15,3 @@ import { Debugging, Gui, GuiFactory, Channels } from '@ephox/alloy'; | ||
| if (evt.raw().button === 0) { | ||
| gui.broadcastOn([Channels.mouseReleased()], { | ||
| gui.broadcastOn([ Channels.mouseReleased() ], { | ||
| target: evt.target() | ||
@@ -36,3 +36,3 @@ }); | ||
| tag: 'div', | ||
| classes: ['example-colour-picker'] | ||
| classes: [ 'example-colour-picker' ] | ||
| } | ||
@@ -39,0 +39,0 @@ })); |
| export interface Hex { | ||
| value: () => string; | ||
| readonly value: string; | ||
| } | ||
| export interface Hsv { | ||
| hue: () => number; | ||
| saturation: () => number; | ||
| value: () => number; | ||
| readonly hue: number; | ||
| readonly saturation: number; | ||
| readonly value: number; | ||
| } | ||
| export interface Rgba { | ||
| red: () => number; | ||
| green: () => number; | ||
| blue: () => number; | ||
| alpha: () => number; | ||
| readonly red: number; | ||
| readonly green: number; | ||
| readonly blue: number; | ||
| readonly alpha: number; | ||
| } |
@@ -1,9 +0,7 @@ | ||
| import { Fun, Option } from '@ephox/katamari'; | ||
| import { Option } from '@ephox/katamari'; | ||
| import { Hex, Rgba } from './ColourTypes'; | ||
| const hexColour = (hexString: string): Hex => { | ||
| return { | ||
| value: Fun.constant(hexString) | ||
| }; | ||
| }; | ||
| const hexColour = (value: string): Hex => ({ | ||
| value | ||
| }); | ||
@@ -13,17 +11,13 @@ const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; | ||
| const isHexString = (hex: string): boolean => { | ||
| return shorthandRegex.test(hex) || longformRegex.test(hex); | ||
| }; | ||
| const isHexString = (hex: string): boolean => shorthandRegex.test(hex) || longformRegex.test(hex); | ||
| const fromString = (hex: string): Option<Hex> => { | ||
| return isHexString(hex) ? Option.some({ value: Fun.constant(hex) }) : Option.none(); | ||
| }; | ||
| const fromString = (hex: string): Option<Hex> => isHexString(hex) ? Option.some({ value: hex }) : Option.none(); | ||
| // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF") | ||
| const getLongForm = (hex: Hex): Hex => { | ||
| const hexString = hex.value().replace(shorthandRegex, (m, r, g, b) => | ||
| const hexString = hex.value.replace(shorthandRegex, (m, r, g, b) => | ||
| r + r + g + g + b + b | ||
| ); | ||
| return { value: Fun.constant(hexString) }; | ||
| return { value: hexString }; | ||
| }; | ||
@@ -33,3 +27,3 @@ | ||
| const longForm = getLongForm(hex); | ||
| const splitForm = longformRegex.exec(longForm.value()); | ||
| const splitForm = longformRegex.exec(longForm.value); | ||
| return splitForm === null ? [ 'FFFFFF', 'FF', 'FF', 'FF' ] : splitForm; | ||
@@ -44,3 +38,3 @@ }; | ||
| const fromRgba = (rgbaColour: Rgba): Hex => { | ||
| const value = toHex(rgbaColour.red()) + toHex(rgbaColour.green()) + toHex(rgbaColour.blue()); | ||
| const value = toHex(rgbaColour.red) + toHex(rgbaColour.green) + toHex(rgbaColour.blue); | ||
| return hexColour(value); | ||
@@ -47,0 +41,0 @@ }; |
@@ -1,17 +0,14 @@ | ||
| import { Fun } from '@ephox/katamari'; | ||
| import { Hsv, Rgba } from './ColourTypes'; | ||
| const hsvColour = (hue: number, saturation: number, value: number): Hsv => { | ||
| return { | ||
| hue: Fun.constant(hue), | ||
| saturation: Fun.constant(saturation), | ||
| value: Fun.constant(value) | ||
| }; | ||
| }; | ||
| const hsvColour = (hue: number, saturation: number, value: number): Hsv => ({ | ||
| hue, | ||
| saturation, | ||
| value | ||
| }); | ||
| const fromRgb = (rgbaColour: Rgba): Hsv => { | ||
| let h = 0; let s = 0; let v = 0; | ||
| const r = rgbaColour.red() / 255; | ||
| const g = rgbaColour.green() / 255; | ||
| const b = rgbaColour.blue() / 255; | ||
| const r = rgbaColour.red / 255; | ||
| const g = rgbaColour.green / 255; | ||
| const b = rgbaColour.blue / 255; | ||
@@ -31,3 +28,3 @@ const minRGB = Math.min(r, Math.min(g, b)); | ||
| /*eslint no-nested-ternary:0 */ | ||
| /* eslint no-nested-ternary:0 */ | ||
| const d = (r === minRGB) ? g - b : ((b === minRGB) ? r - g : b - r); | ||
@@ -49,2 +46,2 @@ h = (r === minRGB) ? 3 : ((b === minRGB) ? 1 : 5); | ||
| fromRgb | ||
| }; | ||
| }; |
@@ -1,2 +0,2 @@ | ||
| import { Fun, Option } from '@ephox/katamari'; | ||
| import { Option } from '@ephox/katamari'; | ||
| import { Hex, Hsv, Rgba } from './ColourTypes'; | ||
@@ -12,10 +12,8 @@ import * as HexColour from './HexColour'; | ||
| const rgbaColour = (red: number, green: number, blue: number, alpha: number): Rgba => { | ||
| return { | ||
| red: Fun.constant(red), | ||
| green: Fun.constant(green), | ||
| blue: Fun.constant(blue), | ||
| alpha: Fun.constant(alpha) | ||
| }; | ||
| }; | ||
| const rgbaColour = (red: number, green: number, blue: number, alpha: number): Rgba => ({ | ||
| red, | ||
| green, | ||
| blue, | ||
| alpha | ||
| }); | ||
@@ -29,5 +27,5 @@ const isRgbaComponent = (value: string): boolean => { | ||
| let r; let g; let b; | ||
| const hue = (hsv.hue() || 0) % 360; | ||
| let saturation = hsv.saturation() / 100; | ||
| let brightness = hsv.value() / 100; | ||
| const hue = (hsv.hue || 0) % 360; | ||
| let saturation = hsv.saturation / 100; | ||
| let brightness = hsv.value / 100; | ||
| saturation = max(0, min(saturation, 1)); | ||
@@ -126,5 +124,5 @@ brightness = max(0, min(brightness, 1)); | ||
| const toString = (rgba: Rgba): string => `rgba(${rgba.red()},${rgba.green()},${rgba.blue()},${rgba.alpha()})`; | ||
| const toString = (rgba: Rgba): string => `rgba(${rgba.red},${rgba.green},${rgba.blue},${rgba.alpha})`; | ||
| const redColour = Fun.constant(rgbaColour(255, 0, 0, 1)); | ||
| const red = rgbaColour(255, 0, 0, 1); | ||
@@ -138,3 +136,3 @@ export { | ||
| toString, | ||
| redColour as red | ||
| }; | ||
| red | ||
| }; |
@@ -1,13 +0,13 @@ | ||
| import { Id, Fun } from '@ephox/katamari'; | ||
| import { SliderTypes, EventFormat } from '@ephox/alloy'; | ||
| import { CustomEvent, SliderTypes } from '@ephox/alloy'; | ||
| import { Id } from '@ephox/katamari'; | ||
| const fieldsUpdate = Fun.constant(Id.generate('rgb-hex-update')); | ||
| const sliderUpdate = Fun.constant(Id.generate('slider-update')); | ||
| const paletteUpdate = Fun.constant(Id.generate('palette-update')); | ||
| const fieldsUpdate = Id.generate('rgb-hex-update'); | ||
| const sliderUpdate = Id.generate('slider-update'); | ||
| const paletteUpdate = Id.generate('palette-update'); | ||
| export interface SliderUpdateEvent extends EventFormat { | ||
| export interface SliderUpdateEvent extends CustomEvent { | ||
| value: () => SliderTypes.SliderValueY; | ||
| } | ||
| export interface PaletteUpdateEvent extends EventFormat { | ||
| export interface PaletteUpdateEvent extends CustomEvent { | ||
| value: () => SliderTypes.SliderValueXY; | ||
@@ -20,2 +20,2 @@ } | ||
| paletteUpdate | ||
| }; | ||
| }; |
@@ -15,11 +15,11 @@ import { AddEventsBehaviour, AlloyComponent, AlloyEvents, Behaviour, Composing, Keying, Memento, RawDomSchema, SimulatedEvent, Sketcher } from '@ephox/alloy'; | ||
| export interface ColourPickerDetail extends Sketcher.SingleSketchDetail { | ||
| dom: RawDomSchema; | ||
| onValidHex: (component: AlloyComponent) => void; | ||
| onInvalidHex: (component: AlloyComponent) => void; | ||
| readonly dom: RawDomSchema; | ||
| readonly onValidHex: (component: AlloyComponent) => void; | ||
| readonly onInvalidHex: (component: AlloyComponent) => void; | ||
| } | ||
| export interface ColourPickerSpec extends Sketcher.SingleSketchSpec { | ||
| dom: RawDomSchema; | ||
| onValidHex?: (component: AlloyComponent) => void; | ||
| onInvalidHex?: (component: AlloyComponent) => void; | ||
| readonly dom: RawDomSchema; | ||
| readonly onValidHex?: (component: AlloyComponent) => void; | ||
| readonly onInvalidHex?: (component: AlloyComponent) => void; | ||
| } | ||
@@ -39,3 +39,3 @@ | ||
| const state = { | ||
| paletteRgba: Fun.constant(Cell(RgbaColour.red())) | ||
| paletteRgba: Cell(RgbaColour.red) | ||
| }; | ||
@@ -53,3 +53,3 @@ | ||
| const rgba = RgbaColour.fromHex(hex); | ||
| state.paletteRgba().set(rgba); | ||
| state.paletteRgba.set(rgba); | ||
| sbPalette.setRgba(palette, rgba); | ||
@@ -72,8 +72,8 @@ }); | ||
| const paletteUpdates = () => { | ||
| const updates = [updateFields]; | ||
| const updates = [ updateFields ]; | ||
| return (form: AlloyComponent, simulatedEvent: SimulatedEvent<ColourEvents.PaletteUpdateEvent>) => { | ||
| const value = simulatedEvent.event().value(); | ||
| const oldRgb = state.paletteRgba().get(); | ||
| const oldRgb = state.paletteRgba.get(); | ||
| const hsvColour = HsvColour.fromRgb(oldRgb); | ||
| const newHsvColour = HsvColour.hsvColour(hsvColour.hue(), value.x(), (100 - value.y())); | ||
| const newHsvColour = HsvColour.hsvColour(hsvColour.hue, value.x(), (100 - value.y())); | ||
| const rgb = RgbaColour.fromHsv(newHsvColour); | ||
@@ -86,3 +86,3 @@ const nuHex = HexColour.fromRgba(rgb); | ||
| const sliderUpdates = () => { | ||
| const updates = [updatePalette, updateFields]; | ||
| const updates = [ updatePalette, updateFields ]; | ||
| return (form: AlloyComponent, simulatedEvent: SimulatedEvent<ColourEvents.SliderUpdateEvent>) => { | ||
@@ -107,9 +107,7 @@ const value = simulatedEvent.event().value(); | ||
| // AlloyEvents.run(ColourEvents.fieldsUpdate(), fieldsUpdates()), | ||
| AlloyEvents.run(ColourEvents.paletteUpdate(), paletteUpdates()), | ||
| AlloyEvents.run(ColourEvents.sliderUpdate(), sliderUpdates()) | ||
| AlloyEvents.run(ColourEvents.paletteUpdate, paletteUpdates()), | ||
| AlloyEvents.run(ColourEvents.sliderUpdate, sliderUpdates()) | ||
| ]), | ||
| Composing.config({ | ||
| find: (comp) => { | ||
| return memRgb.getOpt(comp); | ||
| } | ||
| find: (comp) => memRgb.getOpt(comp) | ||
| }), | ||
@@ -116,0 +114,0 @@ Keying.config({ |
@@ -37,3 +37,3 @@ import { AlloyComponent, AlloyTriggers, Behaviour, Focusing, SketchSpec, Slider } from '@ephox/alloy'; | ||
| mode: 'y', | ||
| getInitialValue: Fun.constant({y: Fun.constant(0) }) | ||
| getInitialValue: Fun.constant({ y: Fun.constant(0) }) | ||
| }, | ||
@@ -49,3 +49,3 @@ components: [ | ||
| onChange: (slider: AlloyComponent, _thumb: any, value: any) => { | ||
| AlloyTriggers.emitWith(slider, sliderUpdate(), { | ||
| AlloyTriggers.emitWith(slider, sliderUpdate, { | ||
| value | ||
@@ -52,0 +52,0 @@ }); |
@@ -0,1 +1,2 @@ | ||
| /* eslint-disable max-len */ | ||
| import { AddEventsBehaviour, AlloyComponent, AlloyEvents, AlloyTriggers, Behaviour, EventFormat, Focusing, Form, FormField, FormTypes, Input, Invalidating, Memento, Representing, SimulatedEvent, Sketcher, SketchSpec, Tabstopping, UiSketcher } from '@ephox/alloy'; | ||
@@ -8,2 +9,3 @@ import { Cell, Fun, Future, Id, Merger, Option, Result } from '@ephox/katamari'; | ||
| import * as ColourEvents from '../ColourEvents'; | ||
| /* eslint-enable max-len */ | ||
@@ -46,43 +48,47 @@ const validInput = Id.generate('valid-input'); | ||
| ): RgbFormSketcher => { | ||
| const invalidation = (label: string, isValid: (value: string) => boolean) => { | ||
| return Invalidating.config({ | ||
| invalidClass: getClass('invalid'), | ||
| const invalidation = (label: string, isValid: (value: string) => boolean) => Invalidating.config({ | ||
| invalidClass: getClass('invalid'), | ||
| notify: { | ||
| onValidate: (comp: AlloyComponent) => { | ||
| AlloyTriggers.emitWith(comp, validatingInput, { | ||
| type: label | ||
| }); | ||
| }, | ||
| onValid: (comp: AlloyComponent) => { | ||
| AlloyTriggers.emitWith(comp, validInput, { | ||
| type: label, | ||
| value: Representing.getValue(comp) | ||
| }); | ||
| }, | ||
| onInvalid: (comp: AlloyComponent) => { | ||
| AlloyTriggers.emitWith(comp, invalidInput, { | ||
| type: label, | ||
| value: Representing.getValue(comp) | ||
| }); | ||
| } | ||
| notify: { | ||
| onValidate: (comp: AlloyComponent) => { | ||
| AlloyTriggers.emitWith(comp, validatingInput, { | ||
| type: label | ||
| }); | ||
| }, | ||
| onValid: (comp: AlloyComponent) => { | ||
| AlloyTriggers.emitWith(comp, validInput, { | ||
| type: label, | ||
| value: Representing.getValue(comp) | ||
| }); | ||
| }, | ||
| validator: { | ||
| validate: (comp: AlloyComponent) => { | ||
| const value = Representing.getValue(comp); | ||
| const res = isValid(value) ? Result.value(true) : Result.error(translate('aria.input.invalid')); | ||
| return Future.pure(res); | ||
| }, | ||
| validateOnLoad: false | ||
| onInvalid: (comp: AlloyComponent) => { | ||
| AlloyTriggers.emitWith(comp, invalidInput, { | ||
| type: label, | ||
| value: Representing.getValue(comp) | ||
| }); | ||
| } | ||
| }); | ||
| }; | ||
| }, | ||
| const renderTextField = (isValid: (value: string) => boolean, name: string, label: string, description: string, data: string | number) => { | ||
| validator: { | ||
| validate: (comp: AlloyComponent) => { | ||
| const value = Representing.getValue(comp); | ||
| const res = isValid(value) ? Result.value(true) : Result.error(translate('aria.input.invalid')); | ||
| return Future.pure(res); | ||
| }, | ||
| validateOnLoad: false | ||
| } | ||
| }); | ||
| const renderTextField = ( | ||
| isValid: (value: string) => boolean, | ||
| name: string, | ||
| label: string, | ||
| description: string, | ||
| data: string | number | ||
| ) => { | ||
| const helptext = translate(translatePrefix + 'range'); | ||
| const pLabel = FormField.parts().label({ | ||
| dom: { tag: 'label', innerHtml: label, attributes: { 'aria-label': description } } | ||
| dom: { tag: 'label', innerHtml: label, attributes: { 'aria-label': description }} | ||
| }); | ||
@@ -97,3 +103,3 @@ | ||
| }, | ||
| inputClasses: [getClass('textfield')], | ||
| inputClasses: [ getClass('textfield') ], | ||
@@ -115,6 +121,6 @@ // Have basic invalidating and tabstopping behaviour. | ||
| const comps = [pLabel, pField]; | ||
| const concats = name !== 'hex' ? [FormField.parts()['aria-descriptor']({ | ||
| const comps = [ pLabel, pField ]; | ||
| const concats = name !== 'hex' ? [ FormField.parts()['aria-descriptor']({ | ||
| text: helptext | ||
| })] : []; | ||
| }) ] : []; | ||
| const components = comps.concat(concats); | ||
@@ -141,3 +147,3 @@ | ||
| Representing.setValue(form, { | ||
| hex: hex.value() | ||
| hex: hex.value | ||
| }); | ||
@@ -150,3 +156,3 @@ } | ||
| const copyRgbToForm = (form: AlloyComponent, rgb: Rgba): void => { | ||
| const red = rgb.red(); const green = rgb.green(); const blue = rgb.blue(); | ||
| const red = rgb.red; const green = rgb.green; const blue = rgb.blue; | ||
| Representing.setValue(form, { red, green, blue }); | ||
@@ -159,3 +165,3 @@ }; | ||
| tag: 'div', | ||
| classes: [getClass('rgba-preview')], | ||
| classes: [ getClass('rgba-preview') ], | ||
| styles: { | ||
@@ -173,3 +179,3 @@ 'background-color': 'white' | ||
| memPreview.getOpt(anyInSystem).each((preview: AlloyComponent) => { | ||
| Css.set(preview.element(), 'background-color', '#' + hex.value()); | ||
| Css.set(preview.element(), 'background-color', '#' + hex.value); | ||
| }); | ||
@@ -180,6 +186,6 @@ }; | ||
| const state = { | ||
| red: Fun.constant(Cell(Option.some(255))), | ||
| green: Fun.constant(Cell(Option.some(255))), | ||
| blue: Fun.constant(Cell(Option.some(255))), | ||
| hex: Fun.constant(Cell(Option.some('ffffff'))) | ||
| red: Cell(Option.some(255)), | ||
| green: Cell(Option.some(255)), | ||
| blue: Cell(Option.some(255)), | ||
| hex: Cell(Option.some('ffffff')) | ||
| }; | ||
@@ -193,25 +199,19 @@ | ||
| const get = (prop: keyof typeof state): Option<any> => { | ||
| return state[prop]().get(); | ||
| }; | ||
| const get = (prop: keyof typeof state): Option<any> => state[prop].get(); | ||
| const set = (prop: keyof typeof state, value: Option<any>): void => { | ||
| state[prop]().set(value); | ||
| state[prop].set(value); | ||
| }; | ||
| const getValueRgb = () => { | ||
| return get('red').bind( | ||
| (red) => get('green').bind( | ||
| (green) => get('blue').map( | ||
| (blue) => { | ||
| return RgbaColour.rgbaColour(red, green, blue, 1); | ||
| } | ||
| ) | ||
| const getValueRgb = () => get('red').bind( | ||
| (red) => get('green').bind( | ||
| (green) => get('blue').map( | ||
| (blue) => RgbaColour.rgbaColour(red, green, blue, 1) | ||
| ) | ||
| ); | ||
| }; | ||
| ) | ||
| ); | ||
| // TODO: Find way to use this for palette and slider updates | ||
| const setValueRgb = (rgb: Rgba): void => { | ||
| const red = rgb.red(); const green = rgb.green(); const blue = rgb.blue(); | ||
| const red = rgb.red; const green = rgb.green; const blue = rgb.blue; | ||
| set('red', Option.some(red)); | ||
@@ -240,3 +240,3 @@ set('green', Option.some(green)); | ||
| AlloyTriggers.emitWith(form, ColourEvents.fieldsUpdate(), { | ||
| AlloyTriggers.emitWith(form, ColourEvents.fieldsUpdate, { | ||
| hex | ||
@@ -257,5 +257,3 @@ }); | ||
| const isHexInputEvent = (data: InputEvent): data is HexInputEvent => { | ||
| return data.type() === 'hex'; | ||
| }; | ||
| const isHexInputEvent = (data: InputEvent): data is HexInputEvent => data.type() === 'hex'; | ||
@@ -271,8 +269,6 @@ const onValidInput = (form: AlloyComponent, simulatedEvent: SimulatedEvent<InputEvent>) => { | ||
| const formPartStrings = (key: string) => { | ||
| return { | ||
| label: translate(translatePrefix + key + '.label'), | ||
| description: translate(translatePrefix + key + '.description') | ||
| }; | ||
| }; | ||
| const formPartStrings = (key: string) => ({ | ||
| label: translate(translatePrefix + key + '.label'), | ||
| description: translate(translatePrefix + key + '.description') | ||
| }); | ||
@@ -286,30 +282,36 @@ const redStrings = formPartStrings('red'); | ||
| return Merger.deepMerge( | ||
| Form.sketch((parts: FormTypes.FormParts) => { | ||
| return { | ||
| dom: { | ||
| tag: 'form', | ||
| classes: [getClass('rgb-form')], | ||
| attributes: { 'aria-label': translate('aria.color.picker') } | ||
| }, | ||
| components: [ | ||
| parts.field('red', FormField.sketch(renderTextField(RgbaColour.isRgbaComponent, 'red', redStrings.label, redStrings.description, 255))), | ||
| parts.field('green', FormField.sketch(renderTextField(RgbaColour.isRgbaComponent, 'green', greenStrings.label, greenStrings.description, 255))), | ||
| parts.field('blue', FormField.sketch(renderTextField(RgbaColour.isRgbaComponent, 'blue', blueStrings.label, blueStrings.description, 255))), | ||
| parts.field('hex', FormField.sketch(renderTextField(HexColour.isHexString, 'hex', hexStrings.label, hexStrings.description, 'ffffff'))), | ||
| memPreview.asSpec() | ||
| ], | ||
| Form.sketch((parts: FormTypes.FormParts) => ({ | ||
| dom: { | ||
| tag: 'form', | ||
| classes: [ getClass('rgb-form') ], | ||
| attributes: { 'aria-label': translate('aria.color.picker') } | ||
| }, | ||
| components: [ | ||
| parts.field('red', FormField.sketch( | ||
| renderTextField(RgbaColour.isRgbaComponent, 'red', redStrings.label, redStrings.description, 255) | ||
| )), | ||
| parts.field('green', FormField.sketch( | ||
| renderTextField(RgbaColour.isRgbaComponent, 'green', greenStrings.label, greenStrings.description, 255) | ||
| )), | ||
| parts.field('blue', FormField.sketch( | ||
| renderTextField(RgbaColour.isRgbaComponent, 'blue', blueStrings.label, blueStrings.description, 255) | ||
| )), | ||
| parts.field('hex', FormField.sketch( | ||
| renderTextField(HexColour.isHexString, 'hex', hexStrings.label, hexStrings.description, 'ffffff') | ||
| )), | ||
| memPreview.asSpec() | ||
| ], | ||
| formBehaviours: Behaviour.derive([ | ||
| Invalidating.config({ | ||
| invalidClass: getClass('form-invalid') | ||
| }), | ||
| formBehaviours: Behaviour.derive([ | ||
| Invalidating.config({ | ||
| invalidClass: getClass('form-invalid') | ||
| }), | ||
| AddEventsBehaviour.config('rgb-form-events', [ | ||
| AlloyEvents.run(validInput, onValidInput), | ||
| AlloyEvents.run(invalidInput, onInvalidInput), | ||
| AlloyEvents.run(validatingInput, onInvalidInput) | ||
| ]) | ||
| AddEventsBehaviour.config('rgb-form-events', [ | ||
| AlloyEvents.run(validInput, onValidInput), | ||
| AlloyEvents.run(invalidInput, onInvalidInput), | ||
| AlloyEvents.run(validatingInput, onInvalidInput) | ||
| ]) | ||
| }; | ||
| }), | ||
| ]) | ||
| })), | ||
| { | ||
@@ -319,3 +321,3 @@ apis: { | ||
| Representing.setValue(form, { | ||
| hex: hex.value() | ||
| hex: hex.value | ||
| }); | ||
@@ -322,0 +324,0 @@ copyHexToRgb(form, hex); |
@@ -27,3 +27,3 @@ import { AlloyComponent, AlloyTriggers, Behaviour, Composing, Focusing, Sketcher, SketchSpec, Slider, SliderTypes, UiSketcher } from '@ephox/alloy'; | ||
| }, | ||
| classes: [getClass('sv-palette-spectrum')] | ||
| classes: [ getClass('sv-palette-spectrum') ] | ||
| } | ||
@@ -38,3 +38,3 @@ }); | ||
| }, | ||
| classes: [getClass('sv-palette-thumb')], | ||
| classes: [ getClass('sv-palette-thumb') ], | ||
| innerHtml: `<div class=${getClass('sv-palette-inner-thumb')} role="presentation"></div>` | ||
@@ -80,3 +80,3 @@ } | ||
| const onChange = (slider: AlloyComponent, _thumb: AlloyComponent, value: number | SliderTypes.SliderValue) => { | ||
| AlloyTriggers.emitWith(slider, ColourEvents.paletteUpdate(), { | ||
| AlloyTriggers.emitWith(slider, ColourEvents.paletteUpdate, { | ||
| value | ||
@@ -88,3 +88,3 @@ }); | ||
| // Maybe make this initial value configurable? | ||
| setColour(spectrum.element().dom(), RgbaColour.toString(RgbaColour.red())); | ||
| setColour(spectrum.element().dom(), RgbaColour.toString(RgbaColour.red)); | ||
| }; | ||
@@ -105,3 +105,3 @@ | ||
| }, | ||
| classes: [getClass('sv-palette')] | ||
| classes: [ getClass('sv-palette') ] | ||
| }, | ||
@@ -108,0 +108,0 @@ model: { |
@@ -10,6 +10,6 @@ import { assert, UnitTest } from '@ephox/bedrock-client'; | ||
| const hexBlack = HexColour.fromRgba(rgbaBlack); | ||
| assert.eq('000000', hexBlack.value()); | ||
| assert.eq('000000', hexBlack.value); | ||
| const hexWhite = HexColour.fromRgba(rgbaWhite); | ||
| assert.eq('ffffff', hexWhite.value()); | ||
| assert.eq('ffffff', hexWhite.value); | ||
| }); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-1.58%
130473
- Lines of code
- decreased by-1.87%
1735
Dependency changes
+ Added@ephox/alloy@7.0.7(transitive)
- Removed@ephox/alloy@6.0.6(transitive)
- Removed@ephox/katamari@5.0.2(transitive)
- Removed@ephox/sugar@5.1.3(transitive)
Updated@ephox/alloy@^7.0.1
Updated@ephox/boulder@^4.0.5
Updated@ephox/katamari@^6.0.1
Updated@ephox/sugar@^6.0.1