%PDF- %PDF-
Server IP : 37.220.80.31 / Your IP : 18.188.254.131 Web Server : Apache/2.4.52 (Ubuntu) System : Linux 3051455-guretool.twc1.net 5.15.0-107-generic #117-Ubuntu SMP Fri Apr 26 12:26:49 UTC 2024 x86_64 User : www-root ( 1010) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/www-root/data/www/dev.artlot24.ru/bitrix/js/landing/ui/field/colorpickerfield/src/ |
Upload File : |
import {Dom, Tag, Text, Type} from 'main.core'; import {BaseField} from 'landing.ui.field.basefield'; import {Loc} from 'landing.loc'; import Opacity from './internal/opacity/opacity'; import './css/style.css'; export class ColorPickerField extends BaseField { static id: number = 0; constructor(options) { super(options); this.setEventNamespace('BX.Landing.UI.Field.ColorPickerField'); this.setLayoutClass('landing-ui-field-colorpicker'); Dom.append(this.getColorLayout(), this.input); this.setValue(this.options.value); } getUid(): string { return this.cache.remember('uid', () => { ColorPickerField.id += 1; return `${Text.getRandom()}${ColorPickerField.id}`; }); } getColorLabelInner() { return this.cache.remember('colorLabelInner', () => { return Tag.render` <span class="landing-ui-field-colorpicker-label-inner"></span> `; }); } getColorLabel(): HTMLElement { return this.cache.remember('colorLabel', () => { return Tag.render` <label class="landing-ui-field-colorpicker-label" for="${this.getUid()}" title="${Loc.getMessage('LANDING_COLORPICKER_FIELD_CHANGE_COLOR_TITLE')}" > ${this.getColorLabelInner()} </label> `; }); } getColorInput(): HTMLInputElement { return this.cache.remember('colorInput', () => { return Tag.render` <input type="color" class="landing-ui-field-colorpicker-input" id="${this.getUid()}" oninput="${this.onInputChange.bind(this)}" onchange="${this.onInputChange.bind(this)}" > `; }); } onInputChange() { this.setValue(this.getColorInput().value, false, true); } getColorLayout(): HTMLDivElement { return this.cache.remember('colorLayout', () => { return Tag.render` <div class="landing-ui-field-colorpicker-layout"> ${this.getColorLabel()} ${this.getColorInput()} ${this.getOpacityField().getLayout()} </div> `; }); } getOpacityField(): BX.Landing.UI.Field.Range { return this.cache.remember('opacityField', () => { return new Opacity({ onChange: () => { const parsedValue = ColorPickerField.parseHex(this.getColorInput().value); parsedValue[3] = this.getOpacityField().getValue(); Dom.style(this.getColorLabelInner(), { backgroundColor: ColorPickerField.toRgba(...parsedValue), }); this.emit('onChange'); }, }); }); // return this.cache.remember('opacityField', () => { // const createOpacityItems = () => { // return Array.from({length: 101}, (item, index) => { // return {name: `${index}%`, value: `${(100 - index) / 100}`}; // }); // }; // // return new window.top.BX.Landing.UI.Field.Range({ // title: Loc.getMessage('LANDING_COLORPICKER_FIELD_OPACITY_TITLE'), // items: createOpacityItems(), // onChange: () => { // this.emit('onChange'); // }, // }); // }); } static prepareHex(hex: string): string { if (Type.isStringFilled(hex)) { const preparedHex = hex.replace('#', ''); if (preparedHex.length === 3) { return `#${preparedHex.split('').reduce((acc, item) => { return `${acc}${item}${item}`; }, '')}`; } } return hex; } static parseHex(hex) { hex = ColorPickerField.fillHex(hex); let parts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex); if (!parts) { parts = [0, 0, 0, 1]; } else { parts = [ parseInt(parts[1], 16), parseInt(parts[2], 16), parseInt(parts[3], 16), parseInt(100 * (parseInt(parts[4] || 'ff', 16) / 255)) / 100, ]; } return parts; } static fillHex(hex, fillAlpha) { if (hex.length === 4 || (fillAlpha && hex.length === 5)) { hex = hex.replace(/([a-f0-9])/gi, '$1$1'); } if (fillAlpha && hex.length === 7) { hex += 'ff'; } return hex; } static toHex(...args) { args[3] = typeof args[3] === 'undefined' ? 1 : args[3]; args[3] = parseInt(255 * args[3]); return `#${args.map((part) => { part = part.toString(16); return part.length === 1 ? `0${part}` : part; }).join('')}`; } static hexToRgba(hex) { return `rgba(${this.parseHex(hex).join(', ')})`; } static toRgba(...args) { return `rgba(${args.join(', ')})`; } setValue(value: string, preventEvent = false, skipOpacity = false) { const parsedValue = ColorPickerField.parseHex(value); const hex = ColorPickerField.toHex(...parsedValue); if (value.length === 7) { parsedValue[3] = this.getOpacityField().getValue(); } Dom.style(this.getColorLabelInner(), { backgroundColor: ColorPickerField.toRgba(parsedValue), }); this.getColorInput().value = hex.slice(0, 7); this.getOpacityField().setValue({ parsedColor: parsedValue, skipOpacity, }); if (!preventEvent) { this.emit('onChange'); } } getValue(): string { const parsedHex = ColorPickerField.parseHex(this.getColorInput().value); parsedHex[3] = this.getOpacityField().getValue(); return ColorPickerField.toHex(...parsedHex); } }