| Server IP : 37.220.80.31 / Your IP : 3.144.9.82 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);
}
}