%PDF- %PDF-
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]); } } }