gd-bs
Version:
Bootstrap JavaScript, TypeScript and Web Components library.
533 lines (532 loc) • 23.8 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomElement = void 0;
var CustomElement = /** @class */ (function () {
function CustomElement(el) {
var componentName = el.nodeName.substring(3);
// Get the component props
var props = __assign(__assign({}, this.getProps(el, componentName)), { el: el });
switch (componentName) {
case "ACCORDION":
props.items = this.getChildItems(el, "item", componentName);
GD.Components.Accordion(props);
break;
case "ALERT":
GD.Components.Alert(props);
break;
case "BADGE":
GD.Components.Badge(props);
break;
case "BREADCRUMB":
props.items = this.getChildItems(el, "item", componentName);
GD.Components.Breadcrumb(props);
break;
case "BUTTON":
GD.Components.Button(props);
break;
case "BUTTON-GROUP":
props.buttons = this.getChildItems(el, "bs-button", "BUTTON");
GD.Components.ButtonGroup(props);
break;
case "CARD":
props.body = this.getChildItems(el, "card-body", componentName);
props.header = this.getChildItems(el, "card-footer", componentName);
props.footer = this.getChildItems(el, "card-header", componentName);
GD.Components.Card(props);
break;
case "CARD-GROUP":
props.cards = this.getChildItems(el, "bs-card", "CARD");
GD.Components.CardGroup(props);
break;
case "CAROUSEL":
props.items = this.getChildItems(el, "item", componentName);
GD.Components.Carousel(props);
break;
case "CHECKBOX-GROUP":
props.items = this.getChildItems(el, "item", componentName);
GD.Components.CheckboxGroup(props);
break;
case "COLLAPSE":
GD.Components.Collapse(props);
break;
case "DROPDOWN":
props.items = this.getChildItems(el, "item", componentName);
GD.Components.Dropdown(props);
break;
case "FORM":
var controls = [];
var rows = [];
var _loop_1 = function (i) {
var elChild = el.children[i];
switch (elChild.nodeName) {
// Append the control
case "BS-FORM-CONTROL":
controls.push(this_1.getProps(elChild, "FORM-CONTROL"));
break;
// Append the row
case "ROW":
// Get the controls
var columns_1 = [];
this_1.getChildItems(elChild, "bs-form-control", "FORM-CONTROL").forEach(function (control) {
// Append the control
columns_1.push({ control: control });
});
// Append the columns to the row
rows.push({ columns: columns_1 });
break;
// Default
default:
// Add it to the appropriate property
// Move the custom html
if (rows.length > 0) {
rows.push({
columns: [{
control: {
onControlRendered: function (ctrl) { ctrl.el.appendChild(elChild); }
}
}]
});
}
else {
controls.push({
onControlRendered: function (ctrl) { ctrl.el.appendChild(elChild); }
});
}
break;
}
};
var this_1 = this;
// Parse the child elements
for (var i = 0; i < el.children.length; i++) {
_loop_1(i);
}
// Set the rows
props.rows = rows.length > 0 ? rows : undefined;
// Set the controls
props.controls = this.getChildItems(el, "bs-form-control", componentName);
props.controls = controls.length > 0 ? controls : undefined;
// Render the form
GD.Components.Form(props);
break;
case "FORM-CONTROL":
props.items = this.getChildItems(el, "item", componentName);
GD.Components.FormControl(props);
break;
case "ICON-LINK":
GD.Components.IconLink(props);
break;
case "INPUT-GROUP":
// Get the prepended label
var prependedLabel = el.querySelector("prepended-label");
if (prependedLabel) {
// Set the property
props.prependedLabel = prependedLabel.innerHTML.trim();
}
// Set the properties
props.appendedButtons = this.getChildItems(el, "appended-button", "APPENDED-BUTTON");
props.prependedButtons = this.getChildItems(el, "prepended-button", "PREPENDED-BUTTON");
GD.Components.InputGroup(props);
break;
case "LIST-BOX":
props.items = this.getChildItems(el, "item", componentName);
GD.Components.ListBox(props);
break;
case "LIST-GROUP":
props.items = this.getChildItems(el, "item", componentName);
GD.Components.ListGroup(props);
break;
case "MODAL":
// Set the custom elements
props.body = this.getElement(el, "bs-modal-body");
props.footer = this.getElement(el, "bs-modal-footer");
props.header = this.getElement(el, "bs-modal-header");
props.title = this.getElement(el, "bs-modal-title");
// Render the modal
GD.Components.Modal(props);
break;
case "NAV":
props.items = this.getChildItems(el, "nav-item", componentName);
GD.Components.Nav(props);
break;
case "NAVBAR":
// Parse the child elements
for (var i = 0; i < el.children.length; i++) {
var elChild = el.children[i];
switch (elChild.nodeName) {
// Append the item
case "NAVBAR-ITEM":
var item = this.getProps(elChild, elChild.nodeName);
item.items = this.getChildItems(elChild, "navbar-item", componentName);
props.items = props.items || [];
props.items.push(item);
break;
// Append the item
case "NAVBAR-ITEM-END":
var itemEnd = this.getProps(elChild, elChild.nodeName);
itemEnd.itemsEnd = this.getChildItems(elChild, "navbar-item-end", componentName);
props.itemsEnd = props.itemsEnd || [];
props.itemsEnd.push(itemEnd);
break;
// Set the searchbox
case "NAVBAR-SEARCH-BOX":
props.searchBox = this.getProps(elChild, elChild.nodeName);
break;
}
}
// Render the navbar
GD.Components.Navbar(props);
break;
case "OFFCANVAS":
props.body = this.createElement(el, false);
GD.Components.Offcanvas(props);
break;
case "PAGING":
GD.Components.Pagination(props);
break;
case "POPOVER":
props.btnProps = this.getChildItems(el, "btn-props", componentName);
props.options = props.options || {};
props.options["content"] = this.createElement(el, false);
GD.Components.Popover(props);
break;
case "PROGRESS":
GD.Components.Progress(props);
break;
case "PROGRESS-GROUP":
props.progressbars = this.getChildItems(el, "bs-progress", componentName);
GD.Components.ProgressGroup(props);
break;
case "SPINNER":
GD.Components.Spinner(props);
break;
case "TABLE":
// Set the rows
try {
if (props.rows == null) {
var elRows = el.querySelector("bs-rows");
if (elRows) {
// Set the rows
props.rows = JSON.parse(elRows.innerHTML);
el.removeChild(elRows);
}
}
}
catch (_a) { }
// Set the properties
props.columns = this.getChildItems(el, "bs-col", componentName);
GD.Components.Table(props);
break;
case "TOAST":
props.body = this.createElement(el, false);
GD.Components.Toast(props);
break;
case "TOOLBAR":
props.items = this.getChildItems(el, "toolbar-item", componentName);
GD.Components.Toolbar(props);
break;
case "TOOLTIP":
props.btnProps = this.getChildItems(el, "btn-props", componentName);
props.content = props.content || this.createElement(el, false);
GD.Components.Tooltip(props);
break;
// Do nothing
default:
return;
}
}
// Creates an element and appends the children to it
CustomElement.prototype.createElement = function (elSource, removeFl) {
if (removeFl === void 0) { removeFl = true; }
var elTarget = document.createElement("div");
// See if the target exists
while (elSource.firstChild) {
elTarget.appendChild(elSource.firstChild);
}
// Render any custom elements
//new RenderComponents(elTarget);
// Remove the element
removeFl ? elSource.remove() : null;
// Return the target element
return elTarget.childNodes.length > 0 ? elTarget : null;
};
// Converts the custom childelements
CustomElement.prototype.getChildItems = function (el, propName, componentName) {
var _this = this;
var items = [];
// Get the item elements
el.querySelectorAll(propName).forEach(function (elItem) {
var _a, _b, _c, _d, _e;
// Ensure this is an item
if (elItem.nodeName == propName.toUpperCase()) {
var item = _this.getProps(elItem, componentName);
// See if there is content
if (elItem.innerHTML) {
// Set custom child elements
switch (elItem.nodeName) {
case "APPENDED-BUTTON":
case "BTN-PROPS":
case "CARD-ACTION":
case "PREPENDED-BUTTON":
item.text = (_a = (item.text || elItem.innerHTML)) === null || _a === void 0 ? void 0 : _a.trim();
break;
case "BS-CARD":
item.body = _this.getChildItems(elItem, "card-body", componentName);
item.header = _this.getChildItems(elItem, "card-footer", componentName);
item.footer = _this.getChildItems(elItem, "card-header", componentName);
break;
case "BS-COL":
item.title = (_b = (item.title || elItem.innerHTML)) === null || _b === void 0 ? void 0 : _b.trim();
break;
case "BS-FORM-CONTROL":
item.items = _this.getChildItems(elItem, "item", elItem.nodeName);
break;
case "CARD-BODY":
item.actions = _this.getChildItems(elItem, "card-action", elItem.nodeName);
break;
case "ITEM":
item.text = (_c = (item.text || elItem.innerHTML)) === null || _c === void 0 ? void 0 : _c.trim();
break;
case "NAVBAR-ITEM":
item.items = _this.getChildItems(elItem, "navbar-item", componentName);
item.text = (_d = (item.text || elItem.innerHTML)) === null || _d === void 0 ? void 0 : _d.trim();
break;
case "NAVBAR-ITEM-END":
item.items = _this.getChildItems(elItem, "navbar-item-end", componentName);
item.text = (_e = (item.text || elItem.innerHTML)) === null || _e === void 0 ? void 0 : _e.trim();
break;
case "TOOLBAR-ITEM":
item.buttons = _this.getChildItems(elItem, "bs-button", "BUTTON");
break;
}
// See if there is a sub-component
switch (componentName) {
case "LIST-GROUP":
// Set the badge
var badge = _this.getChildItems(elItem, "bs-badge", componentName);
if ((badge === null || badge === void 0 ? void 0 : badge.length) > 0) {
item.badge = badge[0];
}
break;
}
// Set the custom property
switch (componentName) {
// content
case "ACCORDION":
case "CARD":
case "CAROUSEL":
case "LIST-GROUP":
item.content = item.content || _this.createElement(elItem);
break;
// label
case "CHECKBOX-GROUP":
item.label = item.label || elItem.innerHTML;
break;
// tab content
case "NAV":
item.tabContent = item.tabContent || _this.createElement(elItem);
break;
// text
case "CARD-BODY":
break;
case "BREADCRUMB":
case "DROPDOWN":
case "FORM-CONTROL":
case "LIST-BOX":
item.text = item.text || elItem.innerHTML;
break;
}
}
// Add the item
items.push(item);
// Remove the item
elItem.remove();
}
});
// See if items exist
if (items.length > 0) {
switch (propName) {
case "btn-props":
return items[0];
default:
return items;
}
}
// Return nothing
return undefined;
};
// Converts the target component name to an element
CustomElement.prototype.getElement = function (elSource, componentName) {
var elTarget = null;
// See if the target exists
elSource.childNodes.forEach(function (el) {
if (el.nodeName == componentName.toUpperCase()) {
// Create the element
elTarget = document.createElement("div");
// Set the element
while (el.firstChild) {
elTarget.appendChild(el.firstChild);
}
// Remove the element
el.remove();
}
});
// Return the target element
return elTarget;
};
// Gets the property name
CustomElement.prototype.getPropName = function (propName) {
var idx = propName.indexOf('-');
while (idx > 0) {
// Update the key and index
propName = propName.substring(0, idx) + propName[idx + 1].toUpperCase() + propName.substring(idx + 2);
idx = propName.indexOf('-');
}
// Return the property name
return propName;
};
// Gets the properties of an element and returns an object
CustomElement.prototype.getProps = function (el, componentName) {
var _a, _b;
var props = {};
// Parse the attributes
for (var i = 0; i < el.attributes.length; i++) {
var attribute = el.attributes[i];
// Set the value
var value = attribute.value;
// Convert the value
if (typeof (value) === "string") {
// See if it's a boolean value
if ((value === null || value === void 0 ? void 0 : value.toLowerCase()) == "true") {
value = true;
}
else if ((value === null || value === void 0 ? void 0 : value.toLowerCase()) == "false") {
value = false;
}
// Else, see if it's linked to a global library
else if (value.indexOf('.') > 0) {
// Split the value
var objInfo = value.split('.');
// See if this is linked to a global library
var objProp = null;
for (var i_1 = 0; i_1 < objInfo.length; i_1++) {
if (i_1 == 0) {
objProp = window[objInfo[0]];
if (objProp) {
continue;
}
else {
break;
}
;
}
// Update the object
objProp = objProp[objInfo[i_1]];
if (objProp == null) {
break;
}
}
// See if the object exists
if (objProp) {
// Update the value
value = objProp;
}
}
else {
try {
// See if it's JSON
var jsonObj = JSON.parse(value);
value = jsonObj;
}
catch (_c) {
try {
// See if it's a reference
var elTarget = document.querySelector(value);
if (elTarget) {
value = elTarget;
}
}
catch (_d) { }
}
}
}
// Add the property
props[this.getPropName(attribute.name)] = value;
}
// See if there is a sub-component
switch (componentName) {
case "BUTTON":
// Set the spinner
var spinner = this.getChildItems(el, "bs-spinner", componentName);
if ((spinner === null || spinner === void 0 ? void 0 : spinner.length) > 0) {
props.spinner = spinner[0];
}
break;
}
// Set common properties
var clearElementFl = false;
switch (componentName) {
// content
case "ALERT":
case "BADGE":
case "COLLAPSE":
case "ICON-LINK":
props.content = this.createElement(el, false);
break;
// data
case "DATA":
// Try to parse the value
try {
var data = JSON.parse(el.innerHTML.trim());
props.data = data;
clearElementFl = true;
}
catch (_e) { }
break;
// label
case "PROGRESS":
clearElementFl = props.label ? false : true;
props.label = (_a = (props.label || el.innerHTML)) === null || _a === void 0 ? void 0 : _a.trim();
break;
// text
case "BUTTON":
case "NAVBAR-ITEM":
case "NAVBAR-ITEM-END":
clearElementFl = props.text ? false : true;
props.text = (_b = (props.text || el.innerHTML)) === null || _b === void 0 ? void 0 : _b.trim();
break;
// value
case "INPUT-GROUP":
case "NAVBAR-SEARCH-BOX":
// Ensure the value exists
if (typeof (props.value) != "undefined") {
props.value = typeof (props.value) === "string" ? props.value : props.value;
}
else {
clearElementFl = true;
props.value = el.innerHTML.trim();
}
break;
}
// Clear the element
if (clearElementFl) {
while (el.firstChild) {
el.removeChild(el.firstChild);
}
}
// Return the properties
return props;
};
return CustomElement;
}());
exports.CustomElement = CustomElement;