| Server IP : 37.220.80.31 / Your IP : 18.191.233.34 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/components/bitrix/catalog.productcard.variation.grid/templates/.default/ |
Upload File : |
import {Dom, Event, Loc, Reflection, Runtime, Tag, Text, Type} from 'main.core';
import {typeof BaseEvent, EventEmitter} from 'main.core.events';
import {MenuManager, PopupManager} from 'main.popup';
import {MessageBox, MessageBoxButtons} from 'ui.dialogs.messagebox';
const GRID_TEMPLATE_ROW = 'template_0';
class VariationGrid
{
grid = null;
isNew = false;
propertiesWithMenu = []
constructor(settings = {})
{
this.createPropertyId = settings.createPropertyId;
this.createPropertyHintId = settings.createPropertyHintId;
this.gridId = settings.gridId;
this.isNew = settings.isNew;
this.hiddenProperties = settings.hiddenProperties;
this.modifyPropertyLink = settings.modifyPropertyLink;
this.gridEditData = settings.gridEditData;
this.canHaveSku = settings.canHaveSku || false;
if (settings.copyItemsMap)
{
this.getGrid().arParams.COPY_ITEMS_MAP = settings.copyItemsMap;
}
const isGridReload = settings.isGridReload || false;
if (!isGridReload)
{
this.addCustomClassToGrid();
this.bindCreateNewVariation();
this.bindCreateSkuProperty();
this.clearGridSettingsPopupStuff();
}
const gridEditData = settings.gridEditData || null;
if (gridEditData)
{
this.setGridEditData(gridEditData);
}
if (this.isNew)
{
this.enableEdit();
this.prepareNewNodes();
this.getGrid().updateCounterSelected();
this.getGrid().disableCheckAllCheckboxes();
}
else
{
this.bindInlineEdit();
}
Event.bind(this.getGrid().getScrollContainer(), 'scroll', Runtime.throttle(this.onScrollHandler.bind(this), 50));
Event.bind(this.getGridSettingsButton(), 'click', this.showGridSettingsWindowHandler.bind(this));
this.subscribeCustomEvents();
}
subscribeCustomEvents()
{
this.onGridUpdatedHandler = this.onGridUpdated.bind(this);
EventEmitter.subscribe('Grid::updated', this.onGridUpdatedHandler);
this.onPropertySaveHandler = this.onPropertySave.bind(this);
EventEmitter.subscribe('SidePanel.Slider:onMessage', this.onPropertySaveHandler);
this.onAllRowsSelectHandler = this.enableEdit.bind(this)
EventEmitter.subscribe('Grid::allRowsSelected', this.onAllRowsSelectHandler);
this.onAllRowsUnselectHandler = this.disableEdit.bind(this);
EventEmitter.subscribe('Grid::allRowsUnselected', this.onAllRowsUnselectHandler);
this.showPropertySettingsSliderHandler = this.showPropertySettingsSlider.bind(this);
EventEmitter.subscribe('VariationGrid::propertyModify', this.showPropertySettingsSliderHandler);
this.onPrepareDropDownItemsHandler = this.onPrepareDropDownItems.bind(this);
EventEmitter.subscribe('Dropdown::onPrepareItems', this.onPrepareDropDownItemsHandler);
this.onCreatePopupHandler = this.onCreatePopup.bind(this);
EventEmitter.subscribe('UiSelect::onCreatePopup', this.onCreatePopupHandler);
}
unsubscribeCustomEvents()
{
if (this.onGridUpdatedHandler)
{
EventEmitter.unsubscribe('Grid::updated', this.onGridUpdatedHandler);
this.onGridUpdatedHandler = null;
}
if (this.onPropertySaveHandler)
{
EventEmitter.unsubscribe('SidePanel.Slider:onMessage', this.onPropertySaveHandler);
this.onPropertySaveHandler = null;
}
if (this.showPropertySettingsSliderHandler)
{
EventEmitter.unsubscribe('VariationGrid::propertyModify', this.showPropertySettingsSliderHandler);
this.showPropertySettingsSliderHandler = null;
}
if (this.onPrepareDropDownItemsHandler)
{
EventEmitter.unsubscribe('Dropdown::onPrepareItems', this.onPrepareDropDownItemsHandler);
this.onPrepareDropDownItemsHandler = null;
}
if (this.onAllRowsSelectHandler)
{
EventEmitter.unsubscribe('Grid::allRowsSelected', this.onAllRowsSelectHandler);
this.onAllRowsSelectHandler = null;
}
if (this.onAllRowsUnselectHandler)
{
EventEmitter.unsubscribe('Grid::allRowsUnselected', this.onAllRowsUnselectHandler);
this.onAllRowsUnselectHandler = null;
}
if (this.onCreatePopupHandler)
{
EventEmitter.unsubscribe('UiSelect::onCreatePopup', this.onCreatePopupHandler);
this.onCreatePopupHandler = null;
}
}
getGridSettingsButton()
{
return this.getGrid().getContainer().querySelector('.' + this.getGrid().settings.get('classSettingsButton'))
}
showGridSettingsWindowHandler(event)
{
event.preventDefault();
event.stopPropagation();
this.askToLossGridData(() => {
this.getGrid().getSettingsWindow()._onSettingsButtonClick();
});
}
onScrollHandler(event)
{
const popup = PopupManager.getCurrentPopup();
if (popup)
{
popup.close();
}
this.propertiesWithMenu.forEach(propertyId => {
let menu = MenuManager.getMenuById(propertyId + '_menu');
if (menu)
{
menu.close();
}
})
}
onPrepareDropDownItems(event)
{
const [controlId, menuId, items] = event.getData();
if (!Type.isStringFilled(controlId))
{
return;
}
this.propertiesWithMenu.push(controlId);
if (controlId.indexOf('SKU_GRID_PROPERTY_') === -1)
{
return;
}
if (!Type.isArray(items))
{
return;
}
const actionList = items.filter((item) => {
return (item.action === 'create-new');
});
if (actionList.length > 0)
{
return;
}
const propertyId = controlId.replace('SKU_GRID_PROPERTY_', '').replace('_control', '');
items.push({
'action': 'create-new',
'html': `
<li data-role="createItem" class="catalog-productcard-popup-select-item catalog-productcard-popup-select-item-new">
<label class="catalog-productcard-popup-select-label main-dropdown-item" data-pseudo="true">
<span class="catalog-productcard-popup-select-add"></span>
<span class="catalog-productcard-popup-select-text">
${Loc.getMessage('C_PVG_ADD_NEW_PROPERTY_VALUE_BUTTON')}
</span>
</label>
</li>`,
'onclick': () => BX.Catalog.VariationGrid.firePropertyModification(propertyId, menuId)
});
requestAnimationFrame(function() {
const popup = document.getElementById('menu-popup-' + menuId);
Dom.addClass(popup, 'catalog-productcard-popup-list');
});
}
onCreatePopup(event)
{
const [popup] = event.getData();
const bindElementId = popup?.bindElement?.id;
if (!Type.isStringFilled(bindElementId))
{
return;
}
if (bindElementId.indexOf('SKU_GRID_PROPERTY_') === -1)
{
return;
}
const propertyId = bindElementId.replace('SKU_GRID_PROPERTY_', '').replace('_control', '');
const addButton = Tag.render`
<div class="catalog-productcard-popup-select-item catalog-productcard-popup-multi-select-item-new">
<label
class="catalog-productcard-popup-select-label main-dropdown-item">
<span class="catalog-productcard-popup-select-add"></span>
<span class="catalog-productcard-popup-select-text">
${Loc.getMessage('C_PVG_ADD_NEW_PROPERTY_VALUE_BUTTON')}
</span>
</label>
</div>
`;
Event.bind(addButton, 'mousedown', BX.Catalog.VariationGrid.firePropertyModification.bind(this, propertyId));
popup.contentContainer.appendChild(addButton);
}
clearGridSettingsPopupStuff()
{
Dom.remove(document.getElementById(this.gridId + '-grid-settings-window'));
}
bindCreateNewVariation()
{
if (!this.canHaveSku)
{
return;
}
const addRowButton = document.querySelector('[data-role="catalog-productcard-variation-add-row"]');
if (Type.isDomNode(addRowButton))
{
Event.bind(addRowButton, 'click', this.addRowToGrid.bind(this));
}
}
addCustomClassToGrid()
{
Dom.addClass(this.getGrid().getContainer(), 'catalog-product-variation-grid');
}
/**
* @returns {BX.Main.grid|null}
*/
getGrid()
{
if (this.grid === null)
{
if (!Reflection.getClass('BX.Main.gridManager.getInstanceById'))
{
throw Error(`Cannot find grid with '${this.gridId}' id.`)
}
this.grid = BX.Main.gridManager.getInstanceById(this.gridId);
}
return this.grid;
}
emitEditedRowsEvent()
{
if (this.getGrid().getRows().isSelected())
{
EventEmitter.emit('Grid::thereEditedRows', []);
}
else
{
EventEmitter.emit('Grid::noEditedRows', []);
}
}
disableEdit()
{
if (this.isNew)
{
return;
}
this.getGrid().getRows().getRows().forEach((current) => {
if (!Dom.hasClass(current.getNode(), 'main-grid-row-new'))
{
current.editCancel();
current.unselect();
}
});
this.emitEditedRowsEvent();
}
enableEdit()
{
this.getGrid().getRows().selectAll();
this.getGrid().getRows().editSelected();
}
prepareNewNodes()
{
this.getGrid().getRows().getBodyChild().map(row => {
const newNode = row.getNode();
this.markNodeAsNew(newNode)
this.addSkuListCreationItem(newNode);
this.modifyCustomSkuProperties(newNode);
this.disableCheckbox(row);
});
}
disableCheckbox(row)
{
const checkbox = row.getCheckbox();
if (Type.isDomNode(checkbox))
{
checkbox.setAttribute('disabled', 'disabled');
}
}
markNodeAsNew(node)
{
Dom.addClass(node, 'main-grid-row-new');
}
bindInlineEdit()
{
this.getGrid().getRows().getBodyChild().forEach(
item => Event.bind(item.node, 'click', event => this.toggleInlineEdit(item, event))
);
}
/**
* @returns {BX.UI.EntityEditor|null}
*/
getEditorInstance()
{
if (Reflection.getClass('BX.UI.EntityEditor'))
{
return BX.UI.EntityEditor.getDefault();
}
return null;
}
bindCreateSkuProperty()
{
if (!this.canHaveSku)
{
return;
}
const createPropertyNode = document.getElementById(this.createPropertyId);
const control = this.getEditorInstance().getControlByIdRecursive('variation_grid');
if (Type.isDomNode(createPropertyNode) && control)
{
control._createChildButton = createPropertyNode;
Event.bind(createPropertyNode, 'click', control.onCreateFieldBtnClick.bind(control));
}
const createPropertyHintNode = document.getElementById(this.createPropertyHintId);
Event.bind(createPropertyHintNode, 'click', this.showHelp.bind(this));
}
showHelp(event)
{
if (Reflection.getClass('top.BX.Helper'))
{
top.BX.Helper.show('redirect=detail&code=11657102');
event.preventDefault();
}
}
// ToDo auto focus on input under event.point?
toggleInlineEdit(item: BX.Grid.Row, event)
{
let changed = false;
if (item.isEdit())
{
if (this.hasClickedOnCheckboxArea(item, event.target))
{
changed = true;
this.deactivateInlineEdit(item);
}
}
else
{
if (event.target.nodeName !== 'A')
{
changed = true;
this.activateInlineEdit(item);
}
}
if (changed)
{
this.emitEditedRowsEvent();
this.getGrid().adjustRows();
this.getGrid().updateCounterSelected();
this.getGrid().updateCounterDisplayed();
this.getGrid().adjustCheckAllCheckboxes();
}
}
hasClickedOnCheckboxArea(item: BX.Grid.Row, target)
{
if (!Type.isDomNode(target))
{
return;
}
const cells = item.getCells();
for (let i in cells)
{
if (
cells.hasOwnProperty(i)
&& cells[i].contains(item.getCheckbox())
&& (cells[i] === target || cells[i].contains(target))
)
{
return true;
}
}
return false;
}
activateInlineEdit(item: BX.Grid.Row)
{
item.select();
item.edit();
this.addSkuListCreationItem(item.getNode());
}
deactivateInlineEdit(item: BX.Grid.Row)
{
item.editCancel();
item.unselect();
// disable multi-selection(and self re-selection) while disabling editing
this.getGrid().clickPrevent = true;
setTimeout(() => {
this.getGrid().clickPrevent = false;
}, 100);
}
modifyCustomSkuProperties(node)
{
const postfix = '_' + node.getAttribute('data-id');
node.querySelectorAll('input[type="radio"]').forEach(input => {
input.id += postfix;
input.setAttribute('name', input.getAttribute('name') + postfix);
});
node.querySelectorAll('label[data-role]').forEach(label => {
label.setAttribute('for', label.getAttribute('for') + postfix);
});
}
addSkuListCreationItem(node)
{
node.querySelectorAll('[data-role="dropdownContent"] ul').forEach((listNode) => {
if (!listNode.querySelector('[data-role="createItem"]'))
{
const propertyId = listNode.getAttribute('data-propertyId');
const createItem = Tag.render`
<li data-role="createItem"
class="catalog-productcard-popup-select-item catalog-productcard-popup-select-item-new"
onclick="BX.Catalog.VariationGrid.firePropertyModification(${propertyId})">
<label class="catalog-productcard-popup-select-label">
<span class="catalog-productcard-popup-select-add"></span>
<span class="catalog-productcard-popup-select-text">
${BX.message('C_PVG_ADD_NEW_PROPERTY_VALUE_BUTTON')}
</span>
</label>
</li>`;
listNode.appendChild(createItem);
}
});
}
addRowToGrid()
{
const originalTemplate = this.redefineTemplateEditData();
const grid = this.getGrid();
const newRow = grid.prependRowEditor();
this.disableCheckbox(newRow);
const newNode = newRow.getNode();
grid.getRows().reset();
if (Type.isDomNode(newNode))
{
const newRowDataId = Text.getRandom();
this.gridEditData[newRowDataId] = {...this.gridEditData['template_0']};
newNode.setAttribute('data-id', newRowDataId);
this.markNodeAsNew(newNode);
this.modifyCustomSkuProperties(newNode);
this.addSkuListCreationItem(newNode);
this.setDeleteButton(newNode);
newRow.makeCountable();
}
if (originalTemplate)
{
this.setOriginalTemplateEditData(originalTemplate);
}
EventEmitter.emit('Grid::thereEditedRows', []);
grid.adjustRows();
grid.updateCounterDisplayed();
grid.updateCounterSelected();
this.updateCounterTotal();
}
updateCounterTotal()
{
const grid = this.getGrid();
const counterTotalTextContainer = grid.getCounterTotal().querySelector('.main-grid-panel-content-text');
counterTotalTextContainer.textContent = grid.getRows().getCountDisplayed();
}
setDeleteButton(row)
{
const actionCellContentContainer = row.querySelector('.main-grid-cell-action .main-grid-cell-content');
const rowId = row?.dataset?.id;
if (rowId)
{
const deleteButton = Tag.render`
<span
class="main-grid-delete-button"
onclick="${this.removeNewRowFromGrid.bind(this, rowId)}"
></span>
`;
Dom.append(deleteButton, actionCellContentContainer);
}
}
removeNewRowFromGrid(rowId)
{
if (!Type.isStringFilled(rowId))
{
return;
}
const gridRow = this.getGrid().getRows().getById(rowId);
if (gridRow)
{
Dom.remove(gridRow.getNode());
this.getGrid().getRows().reset();
this.getGrid().updateCounterDisplayed();
this.getGrid().updateCounterSelected();
this.updateCounterTotal();
this.emitEditedRowsEvent();
}
}
removeRowFromGrid(skuId)
{
const data = {
'id': skuId,
'action': 'deleteRow'
}
this.getGrid().reloadTable('POST', data);
}
getGridEditData()
{
return this.getGrid().arParams.EDITABLE_DATA;
}
// rewrite edit data because of grid component cuts necessary fields (VIEW_HTML/EDIT_HTML)
setGridEditData(data)
{
this.getGrid().arParams.EDITABLE_DATA = data;
}
setOriginalTemplateEditData(data)
{
this.getGrid().arParams.EDITABLE_DATA[GRID_TEMPLATE_ROW] = data;
}
redefineTemplateEditData()
{
let newRowData = this.getEditDataFromSelectedValues();
if (!newRowData)
{
newRowData = this.getEditDataFromNotSelectedValues();
}
if (newRowData)
{
newRowData = {...newRowData};
this.prepareNewRowData(newRowData);
const data = this.getGridEditData();
const originalTemplateData = data[GRID_TEMPLATE_ROW];
const customEditData = this.prepareCustomEditData(originalTemplateData);
this.setOriginalTemplateEditData({...originalTemplateData, ...newRowData, ...customEditData})
return originalTemplateData;
}
return null;
}
getEditDataFromSelectedValues()
{
const rowNodes = this.getGrid().getRows().getSelected();
return rowNodes.length ? rowNodes[0].editGetValues() : null;
}
getEditDataFromNotSelectedValues()
{
const values = this.getGrid().arParams.EDITABLE_DATA;
const id = Object.keys(values)
.reverse()
.find(index => index !== GRID_TEMPLATE_ROW && Type.isPlainObject(values[index]))
;
return id ? values[id] : null;
}
prepareNewRowData(newRowData)
{
for (let i in newRowData)
{
if (newRowData.hasOwnProperty(i) && (i.includes('[VIEW_HTML]') || i.includes('[EDIT_HTML]')))
{
delete newRowData[i]
}
}
}
prepareCustomEditData(originalEditData)
{
const customEditData = {};
for (let i in originalEditData)
{
if (originalEditData.hasOwnProperty(i) && i.includes('[EDIT_HTML]'))
{
// modify file input instance ids (due to collisions with default id)
if (originalEditData[i].indexOf('new BX.UI.ImageInput') >= 0)
{
const filePrefix = 'bx_file_' + i.replace('[EDIT_HTML]', '').toLowerCase() + '_';
const matches = originalEditData[i].match(new RegExp('\'(' + filePrefix + '[A-Za-z0-9_]+)\''));
if (matches[1])
{
customEditData[i] = originalEditData[i].replace(
new RegExp(matches[1], 'g'),
filePrefix + this.getRandomInt()
);
}
}
}
}
return customEditData;
}
getRandomInt(max = 100000)
{
return Math.floor(Math.random() * Math.floor(max));
}
getHeaderNames()
{
const headers = [];
const cells = this.getGrid().getRows().getHeadFirstChild().getCells();
Array.from(cells).forEach((header) => {
if ('name' in header.dataset)
{
headers.push(header.dataset.name);
}
});
return headers;
}
addPropertyToGridHeader(item)
{
BX.ajax.runComponentAction(
'bitrix:catalog.productcard.variation.grid',
'addPropertyHeader',
{
mode: 'ajax',
data: {
gridId: this.getGrid().getId(),
propertyCode: item.id,
anchor: item.anchor || null,
currentHeaders: this.getHeaderNames()
}
}
).then((response) => {
this.reloadGrid();
});
}
reloadGrid()
{
this.getGrid().reload();
}
onGridUpdated(event: BaseEvent)
{
this.getGrid().getSettingsWindow().getItems().forEach((column) => {
if(this.getHeaderNames().indexOf(column.node.dataset.name) !== -1)
{
column.state.selected = true;
column.checkbox.checked = true;
}
else{
column.state.selected = false;
column.checkbox.checked = false;
}
});
}
onPropertySave(event: BaseEvent)
{
const [sliderEvent] = event.getCompatData();
if (sliderEvent.getEventId() === 'PropertyCreationForm:onAdd')
{
const eventArgs = sliderEvent.getData();
this.addPropertyToGridHeader({
id: eventArgs.fields.CODE
});
}
if (sliderEvent.getEventId() === 'PropertyCreationForm:onModify')
{
this.reloadGrid();
}
}
showPropertySettingsSlider(event: BaseEvent)
{
const [propertyId] = event.getData();
const link = this.modifyPropertyLink.replace('#PROPERTY_ID#', propertyId);
this.askToLossGridData(() => {
BX.SidePanel.Instance.open(link, {
width: 550,
allowChangeHistory: false,
cacheable: false
});
});
}
askToLossGridData(okCallback?, cancelCallback?, options?: {})
{
if (this.isGridInEditMode())
{
const defaultOptions = {
title: Loc.getMessage('C_PVG_UNSAVED_DATA_TITLE'),
message: Loc.getMessage('C_PVG_UNSAVED_DATA_MESSAGE'),
modal: true,
buttons: MessageBoxButtons.OK_CANCEL,
okCaption: Loc.getMessage('C_PVG_UNSAVED_DATA_CONTINUE'),
onOk: messageBox => {
okCallback && okCallback();
messageBox.close();
},
onCancel: messageBox => {
cancelCallback && cancelCallback();
messageBox.close();
}
};
MessageBox.show({...defaultOptions, ...options});
}
else
{
okCallback && okCallback();
}
}
isGridInEditMode()
{
return this.getGrid()
.getRows()
.getBodyChild()
.filter(row => row.isShown() && row.isEdit())
.length > 0;
}
static firePropertyModification(propertyId, menuId)
{
if (menuId)
{
const menu = MenuManager.getMenuById(menuId);
if (menu)
{
menu.close();
menu.destroy();
}
}
else
{
const popup = PopupManager.getCurrentPopup();
if (popup)
{
popup.close();
}
}
EventEmitter.emit('VariationGrid::propertyModify', [propertyId]);
}
}
Reflection.namespace('BX.Catalog').VariationGrid = VariationGrid;