| Server IP : 37.220.80.31 / Your IP : 3.144.40.182 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/panel/formsettingspanel/content/fields-rules/src/internal/rule-entry/ |
Upload File : |
import {BaseEvent, EventEmitter} from 'main.core.events';
import {Cache, Dom, Tag, Type} from 'main.core';
import {Loc} from 'landing.loc';
import {ActionPanel} from 'landing.ui.component.actionpanel';
import {FieldElement} from '../field-element/field-element';
import FieldValueElement from '../field-value-element/field-value-element';
import TypeSeparator from '../type-separator/type-separator';
import './css/style.css';
type RuleEntryOptions = {
enableHeader?: boolean,
typeId: number,
fields: Array<any>,
conditions: Array<FieldElement>,
expressions: Array<FieldElement>,
};
export default class RuleEntry extends EventEmitter
{
options: RuleEntryOptions;
conditions: Array<FieldElement | FieldValueElement> = [];
expressions: Array<FieldElement> = [];
constructor(options: RuleEntryOptions) {
super(options);
this.setEventNamespace('BX.Landing.UI.Panel.FormSettingsPanel.RuleEntry');
this.options = {enableHeader: true, expressions: [], ...options};
this.cache = new Cache.MemoryCache();
this.onConditionFieldValueRemove = this.onConditionFieldValueRemove.bind(this);
this.onConditionFieldRemove = this.onConditionFieldRemove.bind(this);
if (Type.isArrayFilled(this.options.conditions))
{
this.options.conditions.forEach((item) => {
this.addCondition(item);
});
this.options.expressions.forEach((item) => {
this.addExpression(item);
});
}
}
getConditionsLayout(): HTMLDivElement
{
return this.cache.remember('conditionsLayout', () => {
return Tag.render`
<div class="landing-ui-rule-entry-conditions"></div>
`;
});
}
getExpressionsLayout(): HTMLDivElement
{
return this.cache.remember('expressionsLayout', () => {
return Tag.render`
<div class="landing-ui-rule-entry-expressions">
${this.getAddExpresionFieldLinkLayout()}
</div>
`;
});
}
getHeaderLayout(): HTMLDivElement
{
return this.cache.remember('headerLayout', () => {
return Tag.render`
<div class="landing-ui-rule-entry-header">${Loc.getMessage('LANDING_RULE_ENTRY_HEADER')}</div>
`;
});
}
getLayout(): HTMLDivElement
{
return this.cache.remember('layout', () => {
return Tag.render`
<div class="landing-ui-rule-entry">
${this.options.enableHeader ? this.getHeaderLayout() : ''}
<div class="landing-ui-rule-entry-body">
${this.getConditionsLayout()}
${this.getExpressionsLayout()}
</div>
</div>
`;
});
}
onConditionFieldRemove(event: BaseEvent)
{
const target: FieldElement = event.getTarget();
const targetLayout = target.getLayout();
this.conditions = this.conditions.filter((item) => {
return item !== target;
});
let nextNode = targetLayout.nextElementSibling;
while (
Type.isDomNode(nextNode)
&& !nextNode.matches('[class*="landing-ui-field-element"]')
)
{
this.conditions = this.conditions.filter((item) => {
return item.getLayout() !== nextNode;
});
Dom.remove(nextNode);
nextNode = targetLayout.nextElementSibling;
}
if (!Type.isDomNode(nextNode))
{
const prevNode = targetLayout.previousElementSibling;
if (
Type.isDomNode(prevNode)
&& Dom.hasClass(prevNode, 'landing-ui-rule-entry-type-separator')
)
{
Dom.remove(prevNode);
}
}
Dom.remove(targetLayout);
this.emit('onChange');
}
onConditionFieldValueRemove(event: BaseEvent)
{
const target: FieldValueElement = event.getTarget();
const targetLayout = target.getLayout();
this.conditions = this.conditions.filter((item) => {
return item !== target;
});
if (Dom.hasClass(targetLayout.nextElementSibling, 'landing-ui-rule-entry-type-separator'))
{
Dom.remove(targetLayout.nextElementSibling);
}
else if (Dom.hasClass(targetLayout.previousElementSibling, 'landing-ui-rule-entry-type-separator'))
{
Dom.remove(targetLayout.previousElementSibling);
}
Dom.remove(targetLayout);
}
addCondition(element: FieldValueElement)
{
if (!this.conditions.includes(element))
{
this.conditions.push(element);
if (element instanceof FieldValueElement)
{
element.subscribe('onRemove', this.onConditionFieldValueRemove);
element.subscribe('onChange', () => this.emit('onChange'));
const conditionsNodes = [...this.getConditionsLayout().childNodes];
const lastElement = conditionsNodes.reduce((acc, node) => {
if (
(
Dom.hasClass(node, 'landing-ui-rule-value')
&& String(Dom.attr(node, 'data-target')) === String(element.options.data.target)
)
|| (
node.matches('[class*="landing-ui-field-element"]')
&& String(Dom.attr(node, 'data-field-id')) === String(element.options.data.target)
)
)
{
return node;
}
return acc;
}, null);
if (Type.isDomNode(lastElement))
{
Dom.insertAfter(element.getLayout(), lastElement);
if (Dom.hasClass(lastElement, 'landing-ui-rule-value'))
{
const separator = new TypeSeparator({
typeId: this.options.typeId,
});
Dom.insertBefore(separator.getLayout(), element.getLayout());
}
return;
}
}
if (element instanceof FieldElement)
{
element.subscribe('onRemove', this.onConditionFieldRemove);
element.subscribe('onChange', () => this.emit('onChange'));
if ([...this.getConditionsLayout().childNodes].length > 0)
{
const separator = new TypeSeparator({
typeId: this.options.typeId,
});
Dom.append(separator.getLayout(), this.getConditionsLayout());
}
}
Dom.append(
element.getLayout(),
this.getConditionsLayout(),
);
this.emit('onChange');
}
}
getExpressionActionPanel(): ActionPanel
{
return this.cache.remember('expressionActionPanel', () => {
return new ActionPanel({
left: [
{
id: 'addField',
text: Loc.getMessage('LANDING_RULE_ENTRY_ADD_FIELD_LABEL'),
onClick: this.onAddExpressionFieldClick.bind(this),
},
],
});
});
}
onAddExpressionFieldClick(event: MouseEvent)
{
event.preventDefault();
const menu = this.getFieldsListMenu();
menu.getMenuItems().forEach((item) => {
const isUsed = this.expressions.some((expressionItem) => {
return String(expressionItem.options.id) === String(item.getId());
});
if (isUsed)
{
Dom.addClass(item.getLayout().item, 'landing-ui-disabled');
}
else
{
Dom.removeClass(item.getLayout().item, 'landing-ui-disabled');
}
});
this.getFieldsListMenu().show();
}
getExpressionAllowedFieldsList(): Array<any>
{
const disallowedTypes = ['page', 'layout'];
return this.options.fields.filter((field) => {
if (!disallowedTypes.includes(field.type))
{
return !this.conditions.find((condition) => {
return (
Type.isPlainObject(condition.options)
&& (
(
Type.isPlainObject(condition.options.data)
&& String(condition.options.data.target) === String(field.id)
)
|| String(condition.options.id) === String(field.id)
)
);
});
}
return true;
});
}
getFieldsListMenu()
{
return this.cache.remember('fieldsListMenu', () => {
return new window.top.BX.Main.Menu({
bindElement: this.getExpressionActionPanel().getLayout(),
maxHeight: 205,
items: this.getExpressionAllowedFieldsList()
.map((item) => {
return {
id: item.id,
text: item.label,
onclick: this.onAddExpressionField.bind(this, item),
};
}),
});
});
}
getAddExpresionFieldLinkLayout(): HTMLDivElement
{
return this.cache.remember('addExpressionFieldLinkLayout', () => {
return Tag.render`
<div class="landing-ui-rule-entry-add-expression-field-link">
<div class="landing-ui-rule-entry-add-expression-field-link-action-panel">
${this.getExpressionActionPanel().getLayout()}
</div>
<div class="landing-ui-rule-entry-add-expression-field-link-separator"></div>
</div>
`;
});
}
onAddExpressionField(field)
{
const element = new FieldElement({
id: field.id,
title: field.label,
removable: true,
color: FieldElement.Colors.green,
actionsLabel: Loc.getMessage('LANDING_RULE_EXPRESSION_FIELD_ACTION_LABEL'),
actionsList: [
{name: Loc.getMessage('LANDING_RULE_EXPRESSION_FIELD_ACTION_SHOW_LABEL'), value: 'show'},
{name: Loc.getMessage('LANDING_RULE_EXPRESSION_FIELD_ACTION_HIDE_LABEL'), value: 'hide'},
],
actionsValue: 'show',
});
this.addExpression(element);
this.getFieldsListMenu().close();
this.emit('onChange');
}
onExpressionFieldRemove(event: BaseEvent)
{
const target = event.getTarget();
Dom.remove(target.getLayout());
this.expressions = this.expressions.filter((field) => {
return String(field.options.id) !== String(target.options.id);
});
this.adjustExpressionFieldsZIndexes();
this.emit('onChange');
}
onExpressionFieldChange()
{
this.emit('onChange');
}
adjustExpressionFieldsZIndexes()
{
[...this.getExpressionsLayout().children]
.reverse()
.forEach((node, index) => {
if (node.matches('[class*="landing-ui-field-element"]'))
{
Dom.style(node, 'z-index', index + 2);
}
});
}
addExpression(element: FieldElement)
{
if (!this.expressions.includes(element))
{
this.expressions.push(element);
element.subscribe('onRemove', this.onExpressionFieldRemove.bind(this));
element.subscribe('onChange', this.onExpressionFieldChange.bind(this));
// @todo: refactoring
void this.getLayout();
Dom.insertBefore(element.getLayout(), this.getAddExpresionFieldLinkLayout());
this.adjustExpressionFieldsZIndexes();
}
}
getValue()
{
return this.conditions
.filter((item) => item instanceof FieldValueElement)
.reduce((acc, conditionsItem: FieldValueElement) => {
return [
...acc,
...this.expressions.map((expressionItem) => {
return {
condition: {
...conditionsItem.getValue(),
event: 'change',
},
action: {
target: expressionItem.options.id,
type: expressionItem.getActionsDropdown().getValue(),
},
};
}),
];
}, []);
}
}