Your IP : 3.149.254.35
(function() {
"use strict";
BX.namespace("BX.Landing");
var attr = BX.Landing.Utils.attr;
var data = BX.Landing.Utils.data;
var encodeDataValue = BX.Landing.Utils.encodeDataValue;
var decodeDataValue = BX.Landing.Utils.decodeDataValue;
/**
* Implements interface for works with image node
*
* @extends {BX.Landing.Block.Node}
* @param {nodeOptions} options
* @property node {HTMLImageElement|HTMLElement}
*
* @constructor
*/
BX.Landing.Block.Node.Img = function(options)
{
BX.Landing.Block.Node.apply(this, arguments);
this.type = "img";
this.editPanel = null;
this.lastValue = null;
this.field = null;
this.uploadParams = options.uploadParams;
if (!this.isGrouped())
{
this.node.addEventListener("click", this.onClick.bind(this));
}
if (this.isAllowInlineEdit())
{
this.node.setAttribute("title", BX.Landing.Loc.getMessage("LANDING_TITLE_OF_IMAGE_NODE"));
}
};
/**
* Checks that node use backgroundImage
* @param {BX.Landing.Block.Node.Img} node
* @return {boolean}
*/
function isBackground(node)
{
return node.node.nodeName !== "IMG";
}
/**
* Checks that node is image
* @param {BX.Landing.Block.Node.Img} node
* @return {boolean}
*/
function isImage(node)
{
return node.node.nodeName === "IMG";
}
/**
* Checks that node is icon
* @param {BX.Landing.Block.Node.Img} node
* @return {boolean}
*/
function isIcon(node)
{
return node.node.nodeName === "SPAN" || node.node.nodeName === "I" || node.node.nodeName === "EM";
}
/**
* Gets background url
* @param {BX.Landing.Block.Node.Img} node
* @return {boolean}
*/
function getBackgroundUrl(node)
{
var bg = node.node.style.getPropertyValue('background-image');
if (bg)
{
var res = bg.match(/url\((.*?)\)/);
if (res && res[1])
{
return res[1].replace(/["|']/g, "");
}
}
return "";
}
/**
* Gets background url 2x
* @param {BX.Landing.Block.Node.Img} node
* @return {boolean}
*/
function getBackgroundUrl2x(node)
{
var bg = node.node.style.getPropertyValue('background-image');
if (bg)
{
var res = bg.match(/1x, url\(["|'](.*)["|']\) 2x\)/);
if (res && res[1])
{
return res[1].replace(/["|']/g, "");
}
}
return "";
}
/**
* Gets file id
* @param {BX.Landing.Block.Node.Img} node
* @return {int}
*/
function getFileId(node)
{
var fileId = parseInt(node.node.dataset.fileid);
return fileId === fileId ? fileId : -1;
}
/**
* Gets file id 2x
* @param {BX.Landing.Block.Node.Img} node
* @return {int}
*/
function getFileId2x(node)
{
var fileId = parseInt(node.node.dataset.fileid2x);
return fileId === fileId ? fileId : -1;
}
/**
* Gets image alt
* @param {BX.Landing.Block.Node.Img} node
* @return {string}
*/
function getAlt(node)
{
var alt = attr(node.node, "alt");
return !!alt ? alt : "";
}
function getPseudoUrl(node)
{
var url = data(node.node, "data-pseudo-url");
return !!url ? url : "";
}
/**
* Gets image src
* @param {BX.Landing.Block.Node.Img} node
* @return {string}
*/
function getImageSrc(node)
{
var src = attr(node.node, "src");
return !!src ? src : "";
}
/**
* Gets image src 2x
* @param {BX.Landing.Block.Node.Img} node
* @return {string}
*/
function getImageSrc2x(node)
{
var src = attr(node.node, "srcset");
return !!src ? src.replace(" 2x", "") : "";
}
/**
* Sets image value or converts to image and sets value
* @param {BX.Landing.Block.Node.Img} node
* @param {object} value
*/
function setImageValue(node, value)
{
if (!isImage(node))
{
var newNode = BX.create("img", {
attrs: {src: value.src, alt: value.alt, "data-fileid": value.id}
});
node.node.parentNode.insertBefore(newNode, node.node);
BX.remove(node.node);
node.node = newNode;
}
else
{
node.node.src = value.src;
node.node.alt = value.alt || '';
node.node.dataset.fileid = value.id || -1;
node.node.srcset = value.src2x ? value.src2x + " 2x" : "";
node.node.dataset.fileid2x = value.id2x || -1;
}
}
/**
* Sets background value or converts to div and sets value
* @param {BX.Landing.Block.Node.Img} node
* @param {object} value
*/
function setBackgroundValue(node, value)
{
if (!isBackground(node))
{
var newNode = BX.create("div", {
attrs: {
style: "background-image: url(\""+value.src+"\")",
"data-fileid": value.id
}
});
node.node.parentNode.insertBefore(newNode, node.node);
BX.remove(node.node);
node.node = newNode;
}
else
{
if (value.src)
{
const style = ["background-image: url(\""+value.src+"\");"];
if (value.src2x)
{
style.push("background-image: -webkit-image-set(url(\""+value.src+"\") 1x, url(\""+value.src2x+"\") 2x);");
style.push("background-image: image-set(url(\""+value.src+"\") 1x, url(\""+value.src2x+"\") 2x);");
}
// save css-vars and other styles
const oldStyleObj = node.node.style;
const oldStyle = {};
Array.from(oldStyleObj).map(prop =>
{
oldStyle[prop] = oldStyleObj.getPropertyValue(prop);
});
node.node.setAttribute("style", style.join(' '));
for(let prop in oldStyle)
{
if (prop !== 'background-image')
{
node.node.style.setProperty(prop, oldStyle[prop]);
}
}
}
else
{
if (node.node.style)
{
node.node.style.removeProperty("background-image");
}
}
node.node.dataset.fileid = value.id || -1;
node.node.dataset.fileid2x = value.id2x || -1;
}
}
BX.Landing.Block.Node.Img.prototype = {
__proto__: BX.Landing.Block.Node.prototype,
constructor: BX.Landing.Block.Node.Img,
/**
* Click on field - edit mode.
* @param {MouseEvent} event
*/
onClick: function(event)
{
if (this.manifest.allowInlineEdit !== false &&
BX.Landing.Main.getInstance().isControlsEnabled() &&
(!BX.Landing.Block.Node.Text.currentNode ||
!BX.Landing.Block.Node.Text.currentNode.isEditable()) &&
!BX.Landing.UI.Panel.StylePanel.getInstance().isShown()
)
{
event.preventDefault();
event.stopPropagation();
BX.Landing.UI.Button.ColorAction.hideAll();
if (!this.editPanel)
{
this.editPanel = new BX.Landing.UI.Panel.Content(this.selector, {
title: BX.Landing.Loc.getMessage("LANDING_IMAGE_PANEL_TITLE"),
className: "landing-ui-panel-edit-image"
});
this.editPanel.appendFooterButton(
new BX.Landing.UI.Button.BaseButton("save_block_content", {
text: BX.Landing.Loc.getMessage("BLOCK_SAVE"),
onClick: this.save.bind(this),
className: "landing-ui-button-content-save"
})
);
this.editPanel.appendFooterButton(
new BX.Landing.UI.Button.BaseButton("cancel_block_content", {
text: BX.Landing.Loc.getMessage("BLOCK_CANCEL"),
onClick: this.editPanel.hide.bind(this.editPanel),
className: "landing-ui-button-content-cancel"
})
);
window.parent.document.body.appendChild(this.editPanel.layout);
}
var form = new BX.Landing.UI.Form.BaseForm({title: this.manifest.name});
form.addField(this.getField());
this.editPanel.clear();
this.editPanel.appendForm(form);
this.editPanel.show();
BX.Landing.UI.Panel.EditorPanel.getInstance().hide();
}
},
/**
* Saves value changes
*/
save: function()
{
var value = this.editPanel.forms[0].fields[0].getValue();
if (JSON.stringify(this.getValue()) !== JSON.stringify(value))
{
this.setValue(value);
}
this.editPanel.hide();
},
/**
* Gets form field
* @return {?BX.Landing.UI.Field.Image}
*/
getField: function()
{
if (!this.field)
{
var description = "";
if (this.manifest.dimensions)
{
var dimensions = this.manifest.dimensions;
var width = (
dimensions.width
|| dimensions.maxWidth
|| dimensions.minWidth
);
var height = (
dimensions.height
|| dimensions.maxHeight
|| dimensions.minHeight
);
if (width && !height)
{
description = BX.Landing.Loc.getMessage('LANDING_CONTENT_IMAGE_RECOMMENDED_WIDTH') + ' ';
description += width + 'px';
}
else if (height && !width)
{
description = BX.Landing.Loc.getMessage('LANDING_CONTENT_IMAGE_RECOMMENDED_HEIGHT') + ' ';
description += height + 'px';
}
else if (width && height)
{
description = BX.Landing.Loc.getMessage("LANDING_CONTENT_IMAGE_RECOMMENDED_SIZE") + " ";
description += width + "px / ";
description += height + "px";
}
}
var value = this.getValue();
value.url = decodeDataValue(value.url);
var disableLink = !!this.node.closest("a") || !!this.manifest.disableLink;
if (this.manifest['editInStyle'] !== true)
{
this.field = new BX.Landing.UI.Field.Image({
selector: this.selector,
title: this.manifest.name,
description: description,
disableLink: disableLink,
content: value,
dimensions: !!this.manifest.dimensions ? this.manifest.dimensions : {},
create2xByDefault: this.manifest.create2xByDefault,
disableAltField: isBackground(this),
uploadParams: this.uploadParams
});
}
}
else
{
this.field.setValue(this.getValue());
this.field.content = this.getValue();
requestAnimationFrame(function() {
this.field.adjustPreviewBackgroundSize();
}.bind(this));
}
return this.field;
},
/**
* Sets node value
* @param value - Path to image
* @param {?boolean} [preventSave = false]
* @param {?boolean} [preventHistory = false]
*/
setValue: function(value, preventSave, preventHistory)
{
this.lastValue = this.lastValue || this.getValue();
this.preventSave(preventSave);
value.src = decodeURIComponent(value.src);
if (isImage(this))
{
setImageValue(this, value);
}
if (isBackground(this))
{
setBackgroundValue(this, value);
}
if (value.url)
{
const url = this.preparePseudoUrl(value.url);
if (url !== null)
{
attr(this.node, "data-pseudo-url", url);
}
}
this.onChange(preventHistory);
if (!preventHistory)
{
BX.Landing.History.getInstance().push();
}
this.lastValue = this.getValue();
},
/**
* Gets node value
* @return {{src: string}}
*/
getValue: function()
{
const value = {type: "", src: "", alt: "", url: ""};
const fileId = getFileId(this);
if (fileId > 0)
{
value.id = fileId;
}
const fileId2x = getFileId2x(this);
if (fileId2x > 0)
{
value.id2x = fileId2x;
}
if (isBackground(this))
{
value.type = "background";
value.src = getBackgroundUrl(this);
const src2x = getBackgroundUrl2x(this);
if (src2x)
{
value.src2x = src2x;
}
}
if (isImage(this))
{
value.type = "image";
value.alt = getAlt(this);
value.src = getImageSrc(this);
const src2x = getImageSrc2x(this);
if (src2x)
{
value.src2x = src2x;
}
}
value.url = (
encodeDataValue(getPseudoUrl(this)) ||
{text: "", href: "", target: "_self", enabled: false}
);
return value;
}
};
})();