Your IP : 3.142.174.58
import {Type, Dom, Cache, Tag, Text, Runtime} from 'main.core';
import {EventEmitter} from 'main.core.events';
import {Env} from 'landing.env';
import {Loc} from 'landing.loc';
import {Content} from 'landing.ui.panel.content';
import {SaveBlock} from 'landing.ui.panel.saveblock';
import {SliderHacks} from 'landing.sliderhacks';
import {PageObject} from 'landing.pageobject';
import hasBlock from './internal/has-block';
import hasCreateButton from './internal/has-create-button';
import onAnimationEnd from './internal/on-animation-end';
import isEmpty from './internal/is-empty';
import {ExternalControls} from './external.controls';
import {Backend} from 'landing.backend';
BX.Landing.getMode = () => 'edit';
/**
* @memberOf BX.Landing
*/
export class Main extends EventEmitter
{
static TYPE_PAGE = 'PAGE';
static TYPE_STORE = 'STORE';
static TYPE_KNOWLEDGE = 'KNOWLEDGE';
static TYPE_GROUP = 'GROUP';
static getMode()
{
return 'edit';
}
static createInstance(id: number)
{
const rootWindow = BX.Landing.PageObject.getRootWindow();
rootWindow.BX.Landing.Main.instance = new BX.Landing.Main(id);
}
static getInstance(): Main
{
const rootWindow = BX.Landing.PageObject.getRootWindow();
rootWindow.BX.Reflection.namespace('BX.Landing.Main');
if (rootWindow.BX.Landing.Main.instance)
{
return rootWindow.BX.Landing.Main.instance;
}
rootWindow.BX.Landing.Main.instance = new Main(-1);
return rootWindow.BX.Landing.Main.instance;
}
/**
* Returns true, if current page is Editor.
* @return {boolean}
*/
static isEditorMode()
{
return Dom.hasClass(document.body, 'landing-editor');
}
/**
* Returns true, if external controls is enabled.
* @return {boolean}
*/
static isExternalControlsEnabled()
{
return Dom.hasClass(document.body, 'enable-external-controls');
}
/**
* Returns in percent scroll position of page.
*
* @return {number}
*/
static topInPercent(): number
{
const scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
return scrollTop / scrollHeight * 100;
}
/**
* Landing ID
* @type {number}
*/
id: number;
constructor(id: number)
{
super();
this.setEventNamespace('BX.Landing.Main');
const options = Env.getInstance().getOptions();
this.id = id;
this.options = Object.freeze(options);
this.blocks = this.options.blocks;
this.currentBlock = null;
this.isDesignBlockModeFlag = this.options["design_block"] === true;
this.loadedDeps = {};
this.cache = new Cache.MemoryCache();
this.externalControls = new ExternalControls;
this.onSliderFormLoaded = this.onSliderFormLoaded.bind(this);
this.onBlockDelete = this.onBlockDelete.bind(this);
BX.addCustomEvent('Landing.Block:onAfterDelete', this.onBlockDelete);
this.adjustEmptyAreas();
BX.Landing.UI.Panel.StatusPanel.setLastModified(options.lastModified);
if (!this.isDesignBlockModeFlag)
{
BX.Landing.UI.Panel.StatusPanel.getInstance().show();
}
const pageType = Env.getInstance().getType();
if (
pageType === Main.TYPE_KNOWLEDGE
|| pageType === Main.TYPE_GROUP
)
{
const mainArea = document.querySelector('.landing-main');
if (Type.isDomNode(mainArea))
{
Dom.addClass(mainArea, 'landing-ui-collapse');
}
}
}
isCrmFormPage(): boolean
{
return Env.getInstance().getOptions().specialType === 'crm_forms';
}
isDesignBlockMode()
{
return this.isDesignBlockModeFlag;
}
getSaveBlockPanel(): Content
{
const panel = new SaveBlock('save_block_panel', {block: this.currentBlock});
panel.layout.hidden = true;
panel.content.hidden = false;
Dom.append(panel.layout, window.parent.document.body);
return panel;
}
getBlocksPanel(): Content
{
return this.cache.remember('blockPanel', () => {
const blocksPanel = this.createBlocksPanel();
setTimeout(() => {
if (blocksPanel.sidebarButtons.get(this.options.default_section))
{
blocksPanel.sidebarButtons.get(this.options.default_section).layout.click();
}
else
{
[...blocksPanel.sidebarButtons][0].layout.click();
}
});
blocksPanel.layout.hidden = true;
blocksPanel.content.hidden = false;
Dom.append(blocksPanel.layout, window.parent.document.body);
return blocksPanel;
});
}
hideBlocksPanel()
{
if (this.getBlocksPanel())
{
return this.getBlocksPanel().hide();
}
return Promise.resolve();
}
getLayoutAreas(): Array<HTMLElement>
{
return this.cache.remember('layoutAreas', () => {
return [
...document.body.querySelectorAll('.landing-header'),
...document.body.querySelectorAll('.landing-sidebar'),
...document.body.querySelectorAll('.landing-main'),
...document.body.querySelectorAll('.landing-footer'),
];
});
}
/**
* Creates insert block button
* @param {HTMLElement} area
* @return {BX.Landing.UI.Button.Plus}
*/
createInsertBlockButton(area: HTMLElement)
{
const button = new BX.Landing.UI.Button.Plus('insert_first_block', {
text: Loc.getMessage('ACTION_BUTTON_CREATE'),
});
button.on('click', this.showBlocksPanel.bind(this, null, area, button));
button.on('mouseover', this.onCreateButtonMouseover.bind(this, area, button));
button.on('mouseout', this.onCreateButtonMouseout.bind(this, area, button));
return button;
}
onCreateButtonMouseover(area: HTMLElement, button)
{
if (
Dom.hasClass(area, 'landing-header')
|| Dom.hasClass(area, 'landing-footer')
)
{
const areas = this.getLayoutAreas();
if (areas.length > 1)
{
const createText = Loc.getMessage('ACTION_BUTTON_CREATE');
if (Dom.hasClass(area, 'landing-main'))
{
button.setText(
`${createText} ${Loc.getMessage('LANDING_ADD_BLOCK_TO_MAIN')}`,
);
}
if (Dom.hasClass(area, 'landing-header'))
{
button.setText(
`${createText} ${Loc.getMessage('LANDING_ADD_BLOCK_TO_HEADER')}`,
);
}
if (Dom.hasClass(area, 'landing-sidebar'))
{
button.setText(
`${createText} ${Loc.getMessage('LANDING_ADD_BLOCK_TO_SIDEBAR')}`,
);
}
if (Dom.hasClass(area, 'landing-footer'))
{
button.setText(
`${createText} ${Loc.getMessage('LANDING_ADD_BLOCK_TO_FOOTER')}`,
);
}
clearTimeout(this.fadeTimeout);
this.fadeTimeout = setTimeout(() => {
Dom.addClass(area, 'landing-area-highlight');
areas
.filter((currentArea) => currentArea !== area)
.forEach((currentArea) => {
Dom.addClass(currentArea, 'landing-area-fade');
});
}, 400);
}
}
}
onCreateButtonMouseout(area, button)
{
clearTimeout(this.fadeTimeout);
if (Dom.hasClass(area, 'landing-header')
|| Dom.hasClass(area, 'landing-footer'))
{
const areas = this.getLayoutAreas();
if (areas.length > 1)
{
button.setText(Loc.getMessage('ACTION_BUTTON_CREATE'));
areas.forEach((currentArea) => {
Dom.removeClass(currentArea, 'landing-area-highlight');
Dom.removeClass(currentArea, 'landing-area-fade');
});
}
}
}
initEmptyArea(area: HTMLElement)
{
if (area)
{
area.innerHTML = '';
Dom.append(this.createInsertBlockButton(area).layout, area);
Dom.addClass(area, 'landing-empty');
}
}
// eslint-disable-next-line class-methods-use-this
destroyEmptyArea(area: HTMLElement)
{
if (area)
{
const button = area.querySelector('button[data-id="insert_first_block"]');
if (button)
{
Dom.remove(button);
}
Dom.removeClass(area, 'landing-empty');
}
}
/**
* Adjusts areas
*/
adjustEmptyAreas()
{
this.getLayoutAreas()
.filter((area) => {
return hasBlock(area) && hasCreateButton(area);
})
.forEach(this.destroyEmptyArea, this);
this.getLayoutAreas()
.filter((area) => {
return !hasBlock(area) && !hasCreateButton(area);
})
.forEach(this.initEmptyArea, this);
const main = document.body.querySelector('main.landing-edit-mode');
const isAllEmpty = !this.getLayoutAreas().some(hasBlock);
if (main)
{
if (isAllEmpty)
{
Dom.addClass(main, 'landing-empty');
return;
}
Dom.removeClass(main, 'landing-empty');
}
}
/**
* Enables landing controls
*/
// eslint-disable-next-line class-methods-use-this
enableControls()
{
Dom.removeClass(document.body, 'landing-ui-hide-controls');
}
/**
* Disables landing controls
*/
// eslint-disable-next-line class-methods-use-this
disableControls()
{
Dom.addClass(document.body, 'landing-ui-hide-controls');
}
/**
* Checks that landing controls is enabled
* @return {boolean}
*/
// eslint-disable-next-line class-methods-use-this
isControlsEnabled()
{
return !Dom.hasClass(document.body, 'landing-ui-hide-controls');
}
/**
* Makes landing controls internal.
*/
// eslint-disable-next-line class-methods-use-this
makeControlsInternal()
{
BX.onCustomEvent('BX.Landing.Main:changeControls', ['internal', Main.topInPercent()]);
Dom.removeClass(document.body, 'landing-ui-external-controls');
}
/**
* Makes landing controls external.
*/
// eslint-disable-next-line class-methods-use-this
makeControlsExternal()
{
BX.onCustomEvent('BX.Landing.Main:changeControls', ['external', Main.topInPercent()]);
Dom.addClass(document.body, 'landing-ui-external-controls');
}
/**
* Checks that landing controls is external.
* @return {boolean}
*/
// eslint-disable-next-line class-methods-use-this
isControlsExternal()
{
return Dom.hasClass(document.body, 'landing-ui-external-controls');
}
/**
* Set device code in body data-attribute.
* @param {string} code
*/
setDeviceCode(code: string)
{
document.body.setAttribute('data-device', code);
}
/**
* Get device code from body attribute.
* @return {string}
*/
getDeviceCode(): ?string
{
return document.body.getAttribute('data-device');
}
/**
* Set BX classes to mark this landing frame as mobile (touch) device
*/
setTouchDevice()
{
Dom.removeClass(document.documentElement, 'bx-no-touch');
Dom.addClass(document.documentElement, 'bx-touch');
}
/**
* Set BX classes to mark this landing frame as desktop (no touch) device
*/
setNoTouchDevice()
{
Dom.removeClass(document.documentElement, 'bx-touch');
Dom.addClass(document.documentElement, 'bx-no-touch');
}
/**
* Appends block
* @param {addBlockResponse} data
* @param {boolean} [withoutAnimation]
* @returns {HTMLElement}
*/
appendBlock(data, withoutAnimation)
{
const block = Tag.render`${data.content}`;
block.id = `block${data.id}`;
if (!withoutAnimation)
{
Dom.addClass(block, 'landing-ui-show');
onAnimationEnd(block, 'showBlock').then(() => {
Dom.removeClass(block, 'landing-ui-show');
});
}
this.insertToBlocksFlow(block);
return block;
}
/**
* Shows blocks list panel
* @param {BX.Landing.Block} block
* @param {HTMLElement} [area]
* @param [button]
* @param [insertBefore]
*/
showBlocksPanel(block, area, button, insertBefore)
{
this.currentBlock = block;
this.currentArea = area;
this.insertBefore = insertBefore;
BX.Landing.UI.Panel.EditorPanel.getInstance().hide();
if (this.isCrmFormPage() || this.isControlsExternal())
{
const rootWindow = PageObject.getRootWindow();
Dom.append(this.getBlocksPanel().layout, rootWindow.document.body);
Dom.append(this.getBlocksPanel().overlay, rootWindow.document.body);
}
this.getBlocksPanel().show();
this.disableAddBlockButtons();
if (!!area && !!button)
{
this.onCreateButtonMouseout(area, button);
}
}
showSaveBlock(block)
{
this.currentBlock = block;
this.getSaveBlockPanel().show();
}
disableAddBlockButtons()
{
PageObject.getBlocks().forEach((block) => {
const panel = block.panels.get('create_action');
if (panel)
{
const button = panel.buttons.get('insert_after');
if (button)
{
button.disable();
}
}
});
}
enableAddBlockButtons()
{
PageObject.getBlocks().forEach((block) => {
const panel = block.panels.get('create_action');
if (panel)
{
const button = panel.buttons.get('insert_after');
if (button)
{
button.enable();
}
}
});
}
/**
* Creates blocks list panel
* @returns {BX.Landing.UI.Panel.Content}
*/
createBlocksPanel()
{
const {blocks} = this.options;
const categories = Object.keys(blocks);
const panel = new Content('blocks_panel', {
title: Loc.getMessage('LANDING_CONTENT_BLOCKS_TITLE'),
className: 'landing-ui-panel-block-list',
scrollAnimation: true,
});
panel.subscribe('onCancel', () => {
this.enableAddBlockButtons();
});
categories.forEach((categoryId) => {
const hasItems = !isEmpty(blocks[categoryId].items);
const isPopular = categoryId === 'popular';
const isSeparator = blocks[categoryId].separator;
if ((hasItems && !isPopular) || isSeparator)
{
panel.appendSidebarButton(
this.createBlockPanelSidebarButton(categoryId, blocks[categoryId]),
);
}
});
panel.appendSidebarButton(
new BX.Landing.UI.Button.SidebarButton('feedback_button', {
className: 'landing-ui-button-sidebar-feedback',
text: Loc.getMessage('LANDING_BLOCKS_LIST_FEEDBACK_BUTTON'),
onClick: this.showFeedbackForm.bind(this),
}),
);
return panel;
}
/**
* Shows feedback form
* @param data
*/
showSliderFeedbackForm(data = {})
{
Runtime.loadExtension('ui.feedback.form').then(() => {
const data = {};
data.bitrix24 = this.options.server_name;
data.siteId = this.options.site_id;
data.siteUrl = this.options.url;
data.siteTemplate = this.options.xml_id;
data.productType = this.options.productType || 'Undefined';
data.typeproduct = (() =>
{
if (this.options.params.type === Main.TYPE_GROUP)
{
return 'KNOWLEDGE_GROUP';
}
return this.options.params.type;
})();
BX.UI.Feedback.Form.open(
{
id: Math.random()+'',
forms: this.getFeedbackFormOptions(),
presets: data,
}
);
});
}
/**
* Gets feedback form options
* @return {{id: string, sec: string, lang: string}}
*/
// eslint-disable-next-line class-methods-use-this
getFeedbackFormOptions()
{
return [
{zones: ['en', 'eu', 'in', 'uk'], id: 16, lang: 'en', sec: '3h483y'},
{zones: ['ru', 'by', 'kz'], id: 8, lang: 'ru', sec: 'x80yjw'},
{zones: ['ua'], id: 18, lang: 'ua', sec: 'd9e09o'},
{zones: ['la', 'co', 'mx'], id: 14, lang: 'la', sec: 'wu561i'},
{zones: ['de'], id: 10, lang: 'de', sec: 'eraz2q'},
{zones: ['com.br', 'br'], id: 12, lang: 'br', sec: 'r6wvge'},
];
}
/**
* Handles feedback loaded event
*/
onSliderFormLoaded()
{
this.sliderFormLoader.hide();
}
/**
* Shows feedback form for blocks list panel
*/
showFeedbackForm()
{
this.showSliderFeedbackForm({target: 'blocksList'});
}
/**
* Initialises feedback form
*/
// eslint-disable-next-line class-methods-use-this
initFeedbackForm()
{
const rootWindow = PageObject.getRootWindow();
((w, d, u, b) => {
w.Bitrix24FormObject = b; w[b] = w[b] || function() {
// eslint-disable-next-line prefer-rest-params
arguments[0].ref = u;
// eslint-disable-next-line prefer-rest-params
(w[b].forms = w[b].forms || []).push(arguments[0]);
};
if (w[b].forms) return;
const s = d.createElement('script');
const r = 1 * new Date(); s.async = 1; s.src = `${u}?${r}`;
const h = d.getElementsByTagName('script')[0]; h.parentNode.insertBefore(s, h);
})(rootWindow, rootWindow.document, 'https://product-feedback.bitrix24.com/bitrix/js/crm/form_loader.js', 'b24formFeedBack');
}
/**
* Creates blocks list panel sidebar button
* @param {string} category
* @param {object} options
* @returns {BX.Landing.UI.Button.SidebarButton}
*/
createBlockPanelSidebarButton(category, options)
{
return new BX.Landing.UI.Button.SidebarButton(category, {
text: options.name,
child: !options.separator,
className: options.new ? 'landing-ui-new-section' : '',
onClick: this.onBlocksListCategoryChange.bind(this, category),
});
}
/**
* Adds dynamically new block to the category.
* @param {string} category Category code.
* @param {{code: string, name: string, preview: string, section: Array<string>}} block Block data.
*/
addNewBlockToCategory(category, block)
{
if (this.blocks[category])
{
const blockCode = block['codeOriginal'] || block['code'];
if (category === 'last')
{
if (!this.lastBlocks)
{
this.lastBlocks = Object.keys(this.blocks.last.items);
}
this.lastBlocks.unshift(blockCode);
}
else
{
this.blocks[category].items[blockCode] = block;
}
this.onBlocksListCategoryChange(category);
}
}
removeBlockFromList(blockCode: string)
{
let removed = false;
for (let category in this.blocks)
{
if (this.blocks[category].items[blockCode] !== undefined)
{
delete this.blocks[category].items[blockCode];
removed = true;
}
}
if (this.lastBlocks.indexOf(blockCode) !== -1)
{
this.lastBlocks.splice(this.lastBlocks.indexOf(blockCode), 1);
removed = true;
}
// refresh panel
if (removed)
{
const activeCategoryButton = this.getBlocksPanel().sidebarButtons.find((button) => {
return Dom.hasClass(button.layout, 'landing-ui-active');
});
if (activeCategoryButton)
{
this.onBlocksListCategoryChange(activeCategoryButton.id);
}
}
}
/**
* Returns page's template code if exists.
* @return {string|null}
*/
getTemplateCode()
{
let { tplCode } = Env.getInstance().getOptions();
if (tplCode.indexOf('@') > 0)
{
tplCode = tplCode.split('@')[1];
}
if (!tplCode || tplCode.length <= 0)
{
tplCode = null;
}
return tplCode;
}
/**
* Handles event on blocks list category change
* @param {string} category - Category id
*/
onBlocksListCategoryChange(category)
{
const templateCode = this.getTemplateCode();
this.getBlocksPanel().content.hidden = false;
this.getBlocksPanel().sidebarButtons.forEach((button) => {
const action = button.id === category ? 'add' : 'remove';
button.layout.classList[action]('landing-ui-active');
});
this.getBlocksPanel().content.innerHTML = '';
if (category === 'last')
{
if (!this.lastBlocks)
{
this.lastBlocks = Object.keys(this.blocks.last.items);
}
this.lastBlocks = [...new Set(this.lastBlocks)];
this.lastBlocks.forEach((blockKey) => {
const block = this.getBlockFromRepository(blockKey);
this.getBlocksPanel().appendCard(this.createBlockCard(blockKey, block));
});
return;
}
Object.keys(this.blocks[category].items).forEach((blockKey) => {
const block = this.blocks[category].items[blockKey];
const blockTplCode = (block['tpl_code'] && block['tpl_code'].length > 0) ? block['tpl_code'] : null;
if (
!templateCode || !blockTplCode ||
(blockTplCode && blockTplCode === templateCode)
)
{
this.getBlocksPanel().appendCard(this.createBlockCard(blockKey, block));
}
});
if (this.getBlocksPanel().content.scrollTop)
{
requestAnimationFrame(() => {
this.getBlocksPanel().content.scrollTop = 0;
});
}
}
// eslint-disable-next-line consistent-return
getBlockFromRepository(code)
{
const {blocks} = this.options;
const categories = Object.keys(blocks);
const category = categories.find((categoryId) => {
return code in blocks[categoryId].items;
});
if (category)
{
return blocks[category].items[code];
}
}
/**
* Handles copy block event
* @param {BX.Landing.Block} block
*/
// eslint-disable-next-line class-methods-use-this
onCopyBlock(block)
{
window.localStorage.landingBlockId = block.id;
window.localStorage.landingBlockName = block.manifest.block.name;
window.localStorage.landingBlockAction = 'copy';
try
{
window.localStorage.requiredUserAction = JSON.stringify(
block.requiredUserActionOptions,
);
}
catch (err)
{
window.localStorage.requiredUserAction = '';
}
}
/**
* Handles cut block event
* @param {BX.Landing.Block} block
*/
// eslint-disable-next-line class-methods-use-this
onCutBlock(block)
{
window.localStorage.landingBlockId = block.id;
window.localStorage.landingBlockName = block.manifest.block.name;
window.localStorage.landingBlockAction = 'cut';
try
{
window.localStorage.requiredUserAction = JSON.stringify(
block.requiredUserActionOptions,
);
}
catch (err)
{
window.localStorage.requiredUserAction = '';
}
BX.Landing.PageObject.getBlocks().remove(block);
Dom.remove(block.node);
BX.onCustomEvent('Landing.Block:onAfterDelete', [block]);
}
/**
* Handles paste block event
* @param {BX.Landing.Block} block
* @param {() => {}} callback
*/
onPasteBlock(block, callback)
{
if (window.localStorage.landingBlockId)
{
let action = 'Landing::copyBlock';
if (window.localStorage.landingBlockAction === 'cut')
{
action = 'Landing::moveBlock';
}
const requestBody = {};
requestBody[action] = {
action,
data: {
lid: block.lid || BX.Landing.Main.getInstance().id,
block: window.localStorage.landingBlockId,
params: {
AFTER_ID: block.id,
RETURN_CONTENT: 'Y',
},
},
};
BX.Landing.Backend.getInstance()
.batch(action, requestBody, {action})
.then((res) => {
this.currentBlock = block;
return this.addBlock(res[action].result.content, false, false, callback);
});
}
}
/**
* Adds block from server response
* @param {addBlockResponse} res
* @param {boolean} [withoutAnimation = false]
* @param {boolean} [insertBefore = false]
* @param {() => {}} callback
* @return {Promise<T>}
*/
addBlock(res, withoutAnimation, insertBefore = false, callback)
{
if (this.lastBlocks)
{
this.lastBlocks.unshift(res.manifest.codeOriginal || res.manifest.code);
}
const self = this;
const block = this.appendBlock(res, withoutAnimation);
return this.loadBlockDeps(res)
.then((blockRes) => {
self.currentBlock = null;
self.currentArea = null;
const blockId = parseInt(res.id);
const allOldBlocks = BX.Landing.PageObject.getBlocks();
if (allOldBlocks)
{
allOldBlocks.forEach((oldBlock) => {
if (oldBlock.id === blockId)
{
Dom.remove(oldBlock.node);
BX.Landing.PageObject.getBlocks().remove(oldBlock);
}
});
}
// Init block entity
void new BX.Landing.Block(block, {
id: blockId,
sections: res.sections,
requiredUserAction: res.requiredUserAction,
manifest: res.manifest,
access: res.access,
active: Text.toBoolean(res.active),
php: res.php,
designed: res.designed,
anchor: res.anchor,
dynamicParams: res.dynamicParams,
repoId: res.repoId,
});
return self.runBlockScripts(res)
.then(() => {
if (callback)
{
callback(blockId);
}
return block;
});
})
.catch((err) => {
console.warn(err);
});
}
/**
* Handles edd block event
* @param {string} blockCode
* @param {*} [restoreId]
* @param {?boolean} [preventHistory = false]
* @return {Promise<BX.Landing.Block>}
*/
onAddBlock(blockCode, restoreId, preventHistory: ?boolean = false)
{
const id = Text.toNumber(restoreId);
this.hideBlocksPanel();
return this.showBlockLoader()
.then(this.loadBlock(blockCode, id, preventHistory))
.then((res) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(res);
}, 500);
});
})
.then((res) => {
res.manifest.codeOriginal = blockCode;
const p = this.addBlock(res, false, this.insertBefore);
this.insertBefore = false;
this.adjustEmptyAreas();
void this.hideBlockLoader();
this.enableAddBlockButtons();
BX.onCustomEvent('BX.Landing.Block:onAfterAdd', res);
return p;
});
}
/**
* Inserts element to blocks flow.
* Element can be inserted after current block or after last block
* @param {HTMLElement} element
*/
insertToBlocksFlow(element)
{
const isCurrentBlockAvailable = (
this.currentBlock
&& this.currentBlock.node
&& this.currentBlock.node.parentNode
);
if (isCurrentBlockAvailable && !this.insertBefore)
{
Dom.insertAfter(element, this.currentBlock.node);
return;
}
if (isCurrentBlockAvailable && this.insertBefore)
{
Dom.insertBefore(element, this.currentBlock.node);
}
Dom.prepend(element, this.currentArea);
}
/**
* Gets block loader
* @return {HTMLElement}
*/
getBlockLoader()
{
if (!this.blockLoader)
{
this.blockLoader = new BX.Loader({size: 60});
this.blockLoaderContainer = Dom.create('div', {
props: {className: 'landing-block-loader-container'},
children: [this.blockLoader.layout],
});
}
return this.blockLoaderContainer;
}
/**
* Shows block loader
* @return {Function}
*/
showBlockLoader()
{
this.insertToBlocksFlow(this.getBlockLoader());
this.blockLoader.show();
return Promise.resolve();
}
/**
* Hides block loader
* @return {Function}
*/
hideBlockLoader()
{
Dom.remove(this.getBlockLoader());
this.blockLoader = null;
return Promise.resolve();
}
/**
* Loads block dependencies
* @param {addBlockResponse} data
* @returns {Promise<addBlockResponse>}
*/
loadBlockDeps(data)
{
const ext = BX.processHTML(data.content_ext);
if (BX.type.isArray(ext.SCRIPT))
{
ext.SCRIPT = ext.SCRIPT.filter((item) => {
return !item.isInternal;
});
}
let loadedScripts = 0;
const scriptsCount = (data.js.length + ext.SCRIPT.length + ext.STYLE.length + data.css.length);
let resPromise = null;
if (!this.loadedDeps[data.manifest.code] && scriptsCount > 0)
{
resPromise = new Promise(((resolve) => {
function onLoad()
{
loadedScripts += 1;
if (loadedScripts === scriptsCount)
{
resolve(data);
}
}
if (scriptsCount > loadedScripts)
{
// Load extensions files
ext.SCRIPT.forEach((item) => {
if (!item.isInternal)
{
BX.loadScript(item.JS, onLoad);
}
});
ext.STYLE.forEach((item) => {
BX.loadScript(item, onLoad);
});
// Load block files
data.css.forEach((item) => {
BX.loadScript(item, onLoad);
});
data.js.forEach((item) => {
BX.loadScript(item, onLoad);
});
}
else
{
onLoad();
}
this.loadedDeps[data.manifest.code] = true;
}));
}
else
{
resPromise = Promise.resolve(data);
}
return resPromise;
}
/**
* Executes block scripts
* @param data
* @return {Promise}
*/
// eslint-disable-next-line class-methods-use-this
runBlockScripts(data)
{
return new Promise(((resolve) => {
const scripts = BX.processHTML(data.content).SCRIPT;
if (scripts.length)
{
BX.ajax.processScripts(scripts, undefined, () => {
resolve(data);
});
}
else
{
resolve(data);
}
}));
}
/**
* Load new block from server
* @param {string} blockCode
* @param {int} [restoreId]
* @param {boolean} [preventHistory = false]
* @returns {Function}
*/
loadBlock(blockCode, restoreId, preventHistory)
{
return () => {
let lid = this.id;
let siteId = this.options.site_id;
if (this.currentBlock)
{
lid = this.currentBlock.lid;
siteId = this.currentBlock.siteId;
}
if (this.currentArea)
{
lid = Dom.attr(this.currentArea, 'data-landing');
siteId = Dom.attr(this.currentArea, 'data-site');
}
let requestBody = {
lid,
siteId,
preventHistory: preventHistory ? 1 : 0,
};
const fields = {
ACTIVE: 'Y',
CODE: blockCode,
AFTER_ID: this.currentBlock ? this.currentBlock.id : 0,
RETURN_CONTENT: 'Y',
};
if (!Type.isBoolean(preventHistory) || preventHistory === false)
{
// Change history steps
BX.Landing.History.getInstance().push();
}
if (!restoreId)
{
requestBody.fields = fields;
return Backend
.getInstance()
.action('Landing::addBlock', requestBody, {code: blockCode})
.then(result => {
if (this.insertBefore)
{
return Backend
.getInstance()
.action('Landing::upBlock', {
lid,
siteId,
block: result.id,
})
.then(() => {
return result;
});
}
return result;
});
}
return BX.Landing.Backend.getInstance()
.action('Block::getContent', {
block: restoreId,
lid,
fields,
editMode: 1,
})
.then((res) => {
res.id = restoreId;
return res;
});
};
}
/**
* Creates block preview card
* @param {string} blockKey - Block key (folder name)
* @param {{name: string, [preview]: ?string, [new]: ?boolean}} block - Object with block data
* @param {string} [mode]
* @returns {BX.Landing.UI.Card.BlockPreviewCard}
*/
createBlockCard(blockKey, block, mode)
{
return new BX.Landing.UI.Card.BlockPreviewCard({
title: block.name,
image: block.preview,
code: blockKey,
app_expired: block.app_expired,
favorite: !!block.favorite,
favoriteMy: !!block.favoriteMy,
repo_id: block.repo_id,
mode,
isNew: block.new === true,
onClick: this.onAddBlock.bind(this, blockKey),
});
}
/**
* Handles block delete event
*/
onBlockDelete(block)
{
if (!block.parent.querySelector('.block-wrapper'))
{
this.adjustEmptyAreas();
}
}
/**
* Shows page overlay
*/
// eslint-disable-next-line class-methods-use-this
showOverlay()
{
const main = document.querySelector('main.landing-edit-mode');
if (main)
{
Dom.addClass(main, 'landing-ui-overlay');
}
}
/**
* Hides page overlay
*/
// eslint-disable-next-line class-methods-use-this
hideOverlay()
{
const main = document.querySelector('main.landing-edit-mode');
if (main)
{
Dom.removeClass(main, 'landing-ui-overlay');
}
}
reloadSlider(url: string): Promise<any>
{
return SliderHacks.reloadSlider(url, window.parent);
}
}