blob: bd71717d28f516f90976da99f1b3347b8aa638c9 [file] [log] [blame]
class CommonComponentBase {
renderReplace(element, content) { CommonComponentBase.renderReplace(element, content); }
// FIXME: Deprecate these static functions.
static renderReplace(element, content)
{
element.textContent = '';
if (content)
ComponentBase._addContentToElement(element, content);
}
_recursivelyUpgradeUnknownElements(parent, findUpgrade, didConstructComponent = () => { })
{
let nextSibling;
for (let child of parent.childNodes) {
const componentClass = findUpgrade(child);
if (componentClass) {
const intance = this._upgradeUnknownElement(parent, child, componentClass);
didConstructComponent(intance);
}
if (child.childNodes)
this._recursivelyUpgradeUnknownElements(child, findUpgrade, didConstructComponent);
}
}
_upgradeUnknownElement(parent, unknownElement, componentClass)
{
const instance = new componentClass;
const newElement = instance.element();
for (let i = 0; i < unknownElement.attributes.length; i++) {
const attr = unknownElement.attributes[i];
newElement.setAttribute(attr.name, attr.value);
}
parent.replaceChild(newElement, unknownElement);
for (const child of Array.from(unknownElement.childNodes))
newElement.appendChild(child);
return instance;
}
static _constructStylesheetFromTemplate(styleTemplate, didCreateRule = (selector, rule) => selector)
{
let stylesheet = '';
for (const selector in styleTemplate) {
const rules = styleTemplate[selector];
let ruleText = '';
for (const property in rules) {
const value = rules[property];
ruleText += ` ${property}: ${value};\n`;
}
const modifiedSelector = didCreateRule(selector, ruleText);
stylesheet += modifiedSelector + ' {\n' + ruleText + '}\n\n';
}
return stylesheet;
}
static _constructNodeTreeFromTemplate(template, didCreateElement = (element) => { })
{
if (typeof(template) == 'string')
return [CommonComponentBase._context.createTextNode(template)];
console.assert(Array.isArray(template));
if (typeof(template[0]) == 'string') {
const tagName = template[0];
let attributes = {};
let content = null;
if (Array.isArray(template[1])) {
content = template[1];
} else {
attributes = template[1];
content = template[2];
}
const element = this.createElement(tagName, attributes);
didCreateElement(element);
const children = content && content.length ? this._constructNodeTreeFromTemplate(content, didCreateElement) : [];
for (const child of children)
element.appendChild(child);
return [element];
} else {
let result = [];
for (const item of template) {
if (typeof(item) == 'string')
result.push(CommonComponentBase._context.createTextNode(item));
else
result = result.concat(this._constructNodeTreeFromTemplate(item, didCreateElement));
}
return result;
}
}
createElement(name, attributes, content) { return CommonComponentBase.createElement(name, attributes, content); }
static createElement(name, attributes, content)
{
const element = CommonComponentBase._context.createElement(name);
if (!content && (Array.isArray(attributes) || CommonComponentBase._isNode(attributes)
|| attributes instanceof CommonComponentBase._baseClass || typeof(attributes) != 'object')) {
content = attributes;
attributes = {};
}
if (attributes) {
for (const name in attributes) {
if (name.startsWith('on'))
element.addEventListener(name.substring(2), attributes[name]);
else if (attributes[name] === true)
element.setAttribute(name, '');
else if (attributes[name] !== false)
element.setAttribute(name, attributes[name]);
}
}
if (content)
CommonComponentBase._addContentToElement(element, content);
return element;
}
static _addContentToElement(element, content)
{
if (Array.isArray(content)) {
for (var nestedChild of content)
this._addContentToElement(element, nestedChild);
} else if (CommonComponentBase._isNode(content))
element.appendChild(content);
else if (content instanceof CommonComponentBase._baseClass)
element.appendChild(content.element());
else
element.appendChild(CommonComponentBase._context.createTextNode(content));
}
createLink(content, titleOrCallback, callback, isExternal, tabIndex = null)
{
return CommonComponentBase.createLink(content, titleOrCallback, callback, isExternal, tabIndex);
}
static createLink(content, titleOrCallback, callback, isExternal, tabIndex = null)
{
var title = titleOrCallback;
if (callback === undefined) {
title = content;
callback = titleOrCallback;
}
var attributes = {
href: '#',
title: title,
};
if (tabIndex)
attributes['tabindex'] = tabIndex;
if (typeof(callback) === 'string')
attributes['href'] = callback;
else
attributes['onclick'] = CommonComponentBase._baseClass.createEventHandler(callback);
if (isExternal)
attributes['target'] = '_blank';
return CommonComponentBase.createElement('a', attributes, content);
}
};
CommonComponentBase._context = null;
CommonComponentBase._isNode = null;
CommonComponentBase._baseClass = null;
if (typeof module != 'undefined')
module.exports.CommonComponentBase = CommonComponentBase;