Your IP : 3.149.230.132
;(function() {
"use strict";
BX.namespace("BX.Landing.UI.Field");
BX.Runtime.loadExtension('landing.ui.component.link');
var isFunction = BX.Landing.Utils.isFunction;
var isPlainObject = BX.Landing.Utils.isPlainObject;
var bind = BX.Landing.Utils.bind;
var proxy = BX.Landing.Utils.proxy;
var escapeHtml = BX.Landing.Utils.escapeHtml;
var addClass = BX.Landing.Utils.addClass;
var clone = BX.Landing.Utils.clone;
var REG_CLASS_FONT = /g-font-(?!size-|weight-)[a-z0-9-]+/ig;
var REG_NAME_FONT = /[a-z0-9 ]*[a-z0-9]/i;
var REG_SYNTAX = /['|"]/g;
var REG_SPACE = / /g;
/**
* Implements interface for works with text field
*
* @extends {BX.Landing.UI.Field.BaseField}
*
* @inheritDoc
* @constructor
*/
BX.Landing.UI.Field.Font = function(data)
{
BX.Landing.UI.Field.BaseField.apply(this, arguments);
addClass(this.layout, "landing-ui-field-font");
this.value = data.value;
this.headlessMode = data.headlessMode === true;
this.frame = data.frame;
this.items = [];
this.defaultFontFamily = null;
this.defaultFontLink = new BX.Landing.UI.Component.Link({
text: BX.Landing.Loc.getMessage("LANDING_EDIT_BLOCK_DEFAULT_FONT"),
});
addClass(this.defaultFontLink.getLayout(), "landing-ui-field-font-link");
if (isPlainObject(data.items))
{
var keys = Object.keys(this.items);
this.items = keys.map(function(key) {
return {name: this.items[key], value: key};
}, this);
}
// Make event external event handler
this.onChangeHandler = isFunction(data.onChange) ? data.onChange : (function() {});
this.onValueChangeHandler = isFunction(data.onValueChange) ? data.onValueChange : (function() {});
if (this.value)
{
this.content = escapeHtml(this.value.family);
this.input.innerHTML = this.value.family;
}
else
{
this.content = escapeHtml(this.content);
this.input.innerHTML = this.content;
}
if (this.frame)
{
this.element = this.frame.document.querySelectorAll(this.selector)[0];
if (this.element)
{
var family = BX.style(this.element, "font-family");
if (family)
{
family = family.replace(REG_SYNTAX, "");
this.content = family.split(",")[0];
this.input.innerHTML = this.content;
}
this.createLinkContainer();
this.setConditionLink();
}
}
bind(this.input, "click", proxy(this.onInputClick, this));
this.defaultFontLink.subscribe('onClick', proxy(this.onLinkClick, this));
};
function makeFontClassName(family)
{
return "g-font-" + family.toLowerCase().replace(REG_SPACE, "-");
}
BX.Landing.UI.Field.Font.prototype = {
constructor: BX.Landing.UI.Field.Font,
__proto__: BX.Landing.UI.Field.BaseField.prototype,
/**
* Handles input click event
* @param {MouseEvent} event
*/
onInputClick: function(event)
{
event.preventDefault();
event.stopPropagation();
BX.Landing.UI.Panel.GoogleFonts.getInstance().show().then(function(font) {
if (!this.response)
{
this.response = clone(BX.Landing.UI.Panel.GoogleFonts.getInstance().response);
this.response.forEach(function(fontItem) {
this.items.push({name: fontItem.family, value: makeFontClassName(fontItem.family)});
}, this);
}
this.setValue(font);
}.bind(this));
},
/**
* Handles link click event
* @param {MouseEvent} event
*/
onLinkClick: function()
{
if (this.defaultFontFamily)
{
var foundedClasses = this.element.classList.value.match(REG_CLASS_FONT);
if (foundedClasses !== null)
{
var element = this.element;
foundedClasses.forEach(function(foundedClass) {
element.classList.remove(foundedClass);
});
}
this.content = this.defaultFontFamily.replace(REG_SYNTAX, "").split(",")[0];
var font = {
family: this.content
};
this.setValue(font);
}
},
createLinkContainer: function()
{
this.linkContainer = document.createElement("div");
this.linkContainer.classList.add('landing-ui-component-link-container');
this.layout.append(this.linkContainer);
},
setConditionLink: function()
{
this.defaultFontFamily = getComputedStyle(document.body).fontFamily;
this.defaultFont = this.defaultFontFamily.match(REG_NAME_FONT)[0];
this.currentFont = getComputedStyle(this.element).fontFamily.match(REG_NAME_FONT)[0];
if (this.defaultFont !== this.currentFont)
{
this.linkContainer.append(this.defaultFontLink.getLayout());
}
else
{
if (this.linkContainer.hasChildNodes())
{
this.linkContainer.removeChild(this.linkContainer.firstChild);
}
}
},
setValue: function(value)
{
if (isPlainObject(value))
{
var className = makeFontClassName(value.family);
var weightList = [100, 200, 300, 400, 500, 600, 700, 800, 900];
var weightParams = ':wght@' + weightList.join(';');
var family = value.family.replace(REG_SPACE, "+");
var familyParams = family + weightParams;
var href = BX.Landing.UI.Panel.GoogleFonts.getInstance().client.makeUrl({
family: familyParams
});
if (this.headlessMode)
{
this.value = {
family: value.family,
public: 'https://fonts.google.com/specimen/' + family,
uri: href,
};
this.input.innerHTML = escapeHtml(value.family);
this.emit('onChange');
}
else
{
var FontManager = BX.Landing.UI.Tool.FontManager.getInstance();
// Add font to current document
FontManager.addFont({
className: className,
family: value.family,
href: href,
category: value.category
}, window);
// Update display field value
this.input.innerHTML = escapeHtml(value.family);
// Call handlers
this.onChangeHandler(className, this.items, this.postfix, this.property);
this.onValueChangeHandler(this);
// Remove unused handlers
FontManager.removeUnusedFonts();
var headString = "";
FontManager.getUsedLoadedFonts().forEach(function(item) {
if (item.element)
{
item.element.setAttribute("rel", "stylesheet");
item.element.removeAttribute("media");
headString += "<noscript>"+item.element.outerHTML+"</noscript>\n";
item.element.setAttribute("rel", "preload");
item.element.setAttribute("onload", "this.removeAttribute('onload');this.rel='stylesheet'");
item.element.setAttribute("as", "style");
headString += item.element.outerHTML + "\n";
}
if (item.CSSDeclaration)
{
headString += item.CSSDeclaration.outerHTML;
}
});
headString = headString
.replace("async@load", "all")
.replace(/data-loadcss="true"/g, "");
BX.Landing.Backend.getInstance()
.action("Landing::updateHead", {content: headString});
}
}
this.setConditionLink();
},
getValue: function()
{
return this.value;
}
}
})();