517 lines
11 KiB
JavaScript
517 lines
11 KiB
JavaScript
(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;
|
|
}
|
|
};
|
|
|
|
})(); |