1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 | 1× 1× 2× 2× 1× 1× 1× 1× 1× 1× 2× 2× 2× 2× 2× 2× | import Component from '@ember/component'; import { computed } from '@ember/object'; import { typeOf } from '@ember/utils'; import { htmlSafe } from '@ember/string'; import layout from '../../templates/components/polaris-color-picker/alpha-picker'; import { clamp } from '../../utils/math'; import { hsbaToRgba } from '../../utils/color'; const VERTICAL_PADDING = 13; function offsetForAlpha(alpha, sliderHeight, draggerHeight) { const slidableArea = sliderHeight - (draggerHeight + VERTICAL_PADDING); return clamp(((1 - alpha) * slidableArea) + VERTICAL_PADDING, 0, sliderHeight - draggerHeight); } function alphaForOffset(offset, sliderHeight) { const selectionHeight = (offset - VERTICAL_PADDING); const slidableArea = sliderHeight - (2 * VERTICAL_PADDING); return clamp(1 - (selectionHeight / slidableArea), 0, 1); } export default Component.extend({ classNames: ['Polaris-ColorPicker__AlphaPicker'], layout, /* * Public attributes. */ /** * The current alpha value * * @property alpha * @type {Number} * @default 1 */ alpha: 1, /* * Internal properties. */ sliderHeight: null, draggerHeight: null, colorLayerStyle: computed('color.{hue,saturation,brightness}', function() { const color = this.get('color'); const { red, green, blue } = hsbaToRgba(color); const rgb = `${ red }, ${ green }, ${ blue }`; const background = `linear-gradient(to top, rgba(${ rgb }, 0) 18px, rgba(${ rgb }, 1) calc(100% - 18px))`; return htmlSafe(`background: ${ background };`); }).readOnly(), draggerY: computed('alpha', 'sliderHeight', function() { const { alpha, sliderHeight, draggerHeight } = this.getProperties('alpha', 'sliderHeight', 'draggerHeight'); const offset = offsetForAlpha(alpha, sliderHeight, draggerHeight); return clamp(offset, 0, sliderHeight); }).readOnly(), /* * Lifecycle hooks. */ didRender() { this._super(...arguments); // Grab the size of the component for positioning the draggable marker. const alphaPickerElement = this.$()[0]; this.set('sliderHeight', alphaPickerElement.clientHeight); }, actions: { handleChange({y}) { const { sliderHeight, onChange } = this.getProperties('sliderHeight', 'onChange'); if (typeOf(onChange) !== 'function') { return; } const offsetY = clamp(y, 0, sliderHeight); const alpha = alphaForOffset(offsetY, sliderHeight); onChange(alpha); }, } }); |