| Current Path : /var/www/homesaver/www/bitrix/js/landing/ui/button/ |
| Current File : /var/www/homesaver/www/bitrix/js/landing/ui/button/table_color_button.js |
(function() {
'use strict';
BX.namespace('BX.Landing.UI.Button');
/**
* Implements interface for works with color picker button
*
* @extends {BX.Landing.UI.Button.EditorAction}
*
* @param {string} id - Action id
* @param {?object} [options]
*
* @constructor
*/
BX.Landing.UI.Button.TableColorAction = function(id, options, textNode)
{
BX.Landing.UI.Button.EditorAction.apply(this, arguments);
this.id = id;
this.options = options;
this.textNode = textNode;
if (this.id !== 'tableBgColor')
{
BX.Dom.addClass(this.layout, 'landing-ui-button-editor-action-color');
}
const pickerWindow = BX.Landing.UI.Panel.EditorPanel.getInstance().isOutOfFrame()
? window.parent
: window
;
this.colorPicker = new pickerWindow.BX.Landing.UI.Tool.ColorPicker(this, this.onColorSelected.bind(this));
BX.Landing.UI.Button.TableColorAction.instances.push(this);
};
BX.Landing.UI.Button.TableColorAction.instances = [];
BX.Landing.UI.Button.TableColorAction.hideAll = function()
{
BX.Landing.UI.Button.TableColorAction.instances.forEach((button) => {
button.colorPicker.hide();
});
};
BX.Landing.UI.Button.TableColorAction.prototype = {
constructor: BX.Landing.UI.Button.TableColorAction,
__proto__: BX.Landing.UI.Button.EditorAction.prototype,
/**
* Handles event on this button click
* @param {MouseEvent} event
*/
onClick(event)
{
event.preventDefault();
event.stopPropagation();
const position = BX.Landing.UI.Panel.EditorPanel.getInstance().isFixed() ? 'fixed' : 'relative';
if (this.colorPicker.isShown())
{
this.colorPicker.hide();
}
else
{
this.colorPicker.show(position);
if (BX.Landing.UI.Button.ChangeTag.menu)
{
BX.Landing.UI.Button.ChangeTag.menu.close();
}
}
},
/**
* Handles event on color selected
* @param {string} color - Selected color
*/
onColorSelected(color)
{
if (this.id === 'tableTextColor')
{
this.applyColorInTableCells(color);
}
if (this.id === 'tableBgColor')
{
this.applyBgInTableCells(color);
}
},
/**
* Apply selected color to text in table cells
* @param {string} color - Selected color
*/
applyColorInTableCells(color)
{
const setTd = [...this.options.setTd];
setTd.forEach((td) => {
if (td.nodeType === 1)
{
BX.Dom.style(td, 'color', color);
}
});
if (this.options.target === 'table')
{
this.options.table.setAttribute('text-color', color);
}
},
/**
* Apply selected text color when changed table style
* @param {string} color - Needed color for dark or light table style
* @param {object} options - All options
*/
prepareOptionsForApplyColorInTableCells(color, options)
{
this.options = options;
this.applyColorInTableCells(color);
},
/**
* Apply selected background color to table cells
* @param {string} color - Selected color
*/
applyBgInTableCells(color)
{
const setTd = [...this.options.setTd];
setTd.forEach((td) => {
if (
td.nodeType === 1
&& !BX.Dom.hasClass(td, 'landing-table-col-dnd')
&& !BX.Dom.hasClass(td, 'landing-table-row-dnd')
&& !BX.Dom.hasClass(td, 'landing-table-th-select-all')
)
{
BX.Dom.style(td, 'background-color', color);
}
});
if (this.options.target === 'table')
{
this.options.table.setAttribute('bg-color', color);
}
},
/**
* @param contextDocument document
*/
setContextDocument(contextDocument)
{
BX.Landing.UI.Button.EditorAction.prototype.setContextDocument.apply(this, arguments);
this.colorPicker.setContextDocument(contextDocument);
},
};
})();