| Server IP : 37.220.80.31 / Your IP : 18.119.139.219 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/modules/catalog/install/js/catalog/sku-tree/src/ |
Upload File : |
import {Dom, Tag, Text, Type} from 'main.core';
import {EventEmitter} from 'main.core.events';
import {SkuTree} from 'catalog.sku-tree';
export default class SkuProperty
{
parent: ?SkuTree;
skuSelectHandler = this.handleSkuSelect.bind(this);
constructor(options)
{
this.parent = options.parent || null;
if (!this.parent)
{
throw new Error('Parent is not defined.');
}
this.property = options.property || {};
this.offers = options.offers || [];
this.existingValues = options.existingValues || [];
this.nodeDescriptions = [];
this.hideUnselected = options.hideUnselected;
}
getId()
{
return this.property.ID;
}
getSelectedSkuId()
{
return this.parent.getSelectedSku().ID;
}
hasSkuValues()
{
return this.property.VALUES.length;
}
renderPictureSku(propertyValue, uniqueId)
{
const propertyName = Type.isStringFilled(propertyValue.NAME) ? Text.encode(propertyValue.NAME) : '';
let nameNode = '';
if (Type.isStringFilled(propertyName))
{
nameNode = Tag.render`<span class="ui-ctl-label-text">${propertyName}</span>`;
}
let iconNode = '';
if (propertyValue.PICT && propertyValue.PICT.SRC)
{
let style = "background-image: url('" + propertyValue.PICT.SRC + "');";
iconNode = Tag.render`<span class="ui-ctl-label-img" style="${style}"></span>`;
}
else if (nameNode)
{
nameNode.style.paddingLeft = '0';
}
else
{
nameNode = Tag.render`<span class="ui-ctl-label-text">-</span>`;
}
return Tag.render`
<label class="ui-ctl ui-ctl-radio-selector"
onclick="${this.skuSelectHandler}"
title="${propertyName}"
data-property-id="${this.getId()}"
data-property-value="${propertyValue.ID}">
<input type="radio"
disabled="${!this.parent.isSelectable()}"
name="property-${this.getSelectedSkuId()}-${this.getId()}-${uniqueId}"
class="ui-ctl-element">
<span class="ui-ctl-inner">
${iconNode}
${nameNode}
</span>
</label>
`;
}
renderTextSku(propertyValue, uniqueId)
{
const propertyName = Type.isStringFilled(propertyValue.NAME) ? Text.encode(propertyValue.NAME) : '-';
return Tag.render`
<label class="ui-ctl ui-ctl-radio-selector"
onclick="${this.skuSelectHandler}"
title="${propertyName}"
data-property-id="${this.getId()}"
data-property-value="${propertyValue.ID}">
<input type="radio"
disabled="${!this.parent.isSelectable()}"
name="property-${this.getSelectedSkuId()}-${this.getId()}-${uniqueId}"
class="ui-ctl-element">
<span class="ui-ctl-inner">
<span class="ui-ctl-label-text">${propertyName}</span>
</span>
</label>
`;
}
layout()
{
if (!this.hasSkuValues())
{
return;
}
this.skuList = this.renderProperties();
this.toggleSkuPropertyValues();
return Tag.render`
<div class="product-item-detail-info-container">
<div class="product-item-detail-info-container-title">${Text.encode(this.property.NAME)}</div>
<div class="product-item-scu-container">
${this.skuList}
</div>
</div>
`;
}
renderProperties()
{
const skuList = Tag.render`<div class="product-item-scu-list ui-ctl-spacing-right"></div>`;
this.property.VALUES.forEach((propertyValue) => {
let propertyValueId = propertyValue.ID;
let node;
let uniqueId = Text.getRandom();
if (!propertyValueId || this.existingValues.includes(propertyValueId))
{
if (this.property.SHOW_MODE === 'PICT')
{
Dom.addClass(skuList, 'product-item-scu-list--pick-color');
node = this.renderPictureSku(propertyValue, uniqueId);
}
else
{
Dom.addClass(skuList, 'product-item-scu-list--pick-size');
node = this.renderTextSku(propertyValue, uniqueId);
}
this.nodeDescriptions.push({propertyValueId, node});
skuList.appendChild(node);
}
});
return skuList;
}
toggleSkuPropertyValues()
{
const selectedSkuProperty = this.parent.getSelectedSkuProperty(this.getId());
const activeSkuProperties = this.parent.getActiveSkuProperties(this.getId());
this.nodeDescriptions.forEach((item) => {
let id = Text.toNumber(item.propertyValueId);
let input = item.node.querySelector('input[type="radio"]');
if (selectedSkuProperty === id)
{
input.checked = true;
Dom.addClass(item.node, 'selected');
}
else
{
input.checked = false;
Dom.removeClass(item.node, 'selected');
}
if (
(this.hideUnselected && selectedSkuProperty !== id)
|| !activeSkuProperties.includes(id)
)
{
Dom.style(item.node, {display: 'none'});
}
else
{
Dom.style(item.node, {display: null});
}
});
}
handleSkuSelect(event)
{
event.stopPropagation();
const selectedSkuProperty = event.target.closest('[data-property-id]');
if (!this.parent.isSelectable() || Dom.hasClass(selectedSkuProperty, 'selected'))
{
return;
}
const propertyId = Text.toNumber(selectedSkuProperty.getAttribute('data-property-id'));
const propertyValue = Text.toNumber(selectedSkuProperty.getAttribute('data-property-value'));
this.parent.setSelectedProperty(propertyId, propertyValue);
this.parent.toggleSkuProperties();
EventEmitter.emit('SkuProperty::onChange', [this.parent.getSelectedSku(), this.property]);
if (this.parent)
{
this.parent.emit('SkuProperty::onChange', [this.parent.getSelectedSku(), this.property]);
}
}
}