phonon
Version:
Phonon is an open source HTML, CSS and JavaScript agnostic framework that allows to create a website or a hybrid Web app.
1,194 lines (1,171 loc) • 111 kB
JavaScript
/*!
* Phonon v2.0.0-alpha.1 (https://github.com/quark-dev/Phonon-Framework)
* Copyright 2015-2019 qathom
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.phonon = factory());
}(this, function () { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
function __awaiter(thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
}
function __generator(thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
}
function elementEvent(domElement, eventName, moduleName, detail) {
if (detail === void 0) { detail = {}; }
var fullEventName = eventName + ".ph." + moduleName;
domElement.dispatchEvent(new CustomEvent(fullEventName, { detail: detail }));
}
function pageEvent(eventName, pageName, detail) {
if (detail === void 0) { detail = {}; }
var fullEventName = pageName + "." + eventName;
window.dispatchEvent(new CustomEvent(fullEventName, { detail: detail }));
document.dispatchEvent(new CustomEvent(fullEventName, { detail: detail }));
}
function winDocEvent(eventName, moduleName, detail) {
if (detail === void 0) { detail = {}; }
var fullEventName = eventName + ".ph." + moduleName;
window.dispatchEvent(new CustomEvent(fullEventName, { detail: detail }));
document.dispatchEvent(new CustomEvent(fullEventName, { detail: detail }));
}
var dispatch = {
elementEvent: elementEvent,
pageEvent: pageEvent,
winDocEvent: winDocEvent,
};
function onError() {
if (typeof window === 'undefined') {
return;
}
window.addEventListener('error', function (event) {
console.error('-- Phonon Error --');
console.error('An error has occured!'
+ ' ' + 'You can pen an issue here: https://github.com/quark-dev/Phonon-Framework/issues');
console.error(JSON.stringify(event));
});
}
var availableEvents = ['mousedown', 'mousemove', 'mouseup'];
var touchScreen = false;
if (typeof window !== 'undefined') {
if (('ontouchstart' in window) || window.DocumentTouch
&& document instanceof window.DocumentTouch) {
touchScreen = true;
availableEvents = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
}
if (window.navigator.pointerEnabled) {
availableEvents = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
}
else if (window.navigator.msPointerEnabled) {
availableEvents = ['MSPointerDown', 'MSPointerMove', 'MSPointerUp', 'MSPointerCancel'];
}
}
var transitions = [
{ name: 'transition', start: 'transitionstart', end: 'transitionend' },
{ name: 'MozTransition', start: 'transitionstart', end: 'transitionend' },
{ name: 'msTransition', start: 'msTransitionStart', end: 'msTransitionEnd' },
{ name: 'WebkitTransition', start: 'webkitTransitionStart', end: 'webkitTransitionEnd' },
];
var animations = [
{ name: 'animation', start: 'animationstart', end: 'animationend' },
{ name: 'MozAnimation', start: 'animationstart', end: 'animationend' },
{ name: 'msAnimation', start: 'msAnimationStart', end: 'msAnimationEnd' },
{ name: 'WebkitAnimation', start: 'webkitAnimationStart', end: 'webkitAnimationEnd' },
];
var el = window.document.createElement('div');
var transition = transitions.find(function (t) { return typeof el.style[t.name] !== 'undefined'; });
var animation = animations.find(function (t) { return typeof el.style[t.name] !== 'undefined'; });
var transitionStart = transition ? transition.start : 'transitionstart';
var transitionEnd = transition ? transition.end : 'transitionend';
var animationStart = animation ? animation.start : 'animationstart';
var animationEnd = animation ? animation.end : 'animationend';
var events = {
TOUCH_SCREEN: touchScreen,
NETWORK_ONLINE: 'online',
NETWORK_OFFLINE: 'offline',
NETWORK_RECONNECTING: 'reconnecting',
NETWORK_RECONNECTING_SUCCESS: 'reconnect.success',
NETWORK_RECONNECTING_FAILURE: 'reconnect.failure',
SHOW: 'show',
SHOWN: 'shown',
HIDE: 'hide',
HIDDEN: 'hidden',
HASH: 'hash',
START: availableEvents[0],
MOVE: availableEvents[1],
END: availableEvents[2],
CANCEL: typeof availableEvents[3] === 'undefined' ? null : availableEvents[3],
CLICK: 'click',
TRANSITION_START: transitionStart,
TRANSITION_END: transitionEnd,
ANIMATION_START: animationStart,
ANIMATION_END: animationEnd,
ITEM_SELECTED: 'itemSelected',
};
function closest(element, selector) {
if (!Element.prototype.matches) ;
var el = element;
do {
if (el.matches(selector)) {
return el;
}
el = (el.parentElement || el.parentNode);
} while (el !== null && el.nodeType === 1);
return null;
}
function attrConfig(element) {
if (!element) {
return null;
}
var attr = element.getAttribute('data-config');
if (!attr) {
return null;
}
try {
var config = JSON.parse(attr);
return config;
}
catch (e) {
}
var keys = (attr.match(/(\w+)\s*:\s*(["'])?/igm) || [])
.map(function (e) { return e.replace(/(\w+)\s*:\s*(["'])?/igm, '$1'); });
var values = attr.match(/[^:]+(?=,|$)/igm) || [];
var json = {};
keys.forEach(function (key, i) {
var value = values[i].replace(/ /g, '').replace(/\'|"/g, '');
var convertedValue = '';
if (value === 'true' || value === 'false') {
convertedValue = value === 'true';
}
else if (!isNaN(value)) {
convertedValue = parseFloat(value);
}
else {
convertedValue = value;
}
json[key] = convertedValue;
});
return json;
}
function removeClasses(element, classList, prefix) {
if (prefix === void 0) { prefix = null; }
classList.forEach(function (className) {
var cName = prefix ? prefix + "-" + className : className;
if (element.classList.contains(cName)) {
element.classList.remove(cName);
}
});
}
function isElement(node) {
return node.nodeType === 1
&& typeof node.className === 'string';
}
var selector = {
attrConfig: attrConfig,
removeClasses: removeClasses,
closest: closest,
isElement: isElement,
};
var components = {};
function getName(component) {
if (typeof component === 'string') {
return component.toLowerCase();
}
return component.constructor.name.toLowerCase();
}
function addComponent(component) {
var name = getName(component);
if (!components[name]) {
components[name] = [];
}
components[name].push(component);
}
function removeComponent(componentName, element) {
var name = getName(componentName);
var index = (components[name] || []).findIndex(function (c) { return c.getElement() === element; });
if (index === -1) {
return;
}
var component = components[name][index];
component.destroy();
components[name].splice(index, 1);
}
function getComponent(component, options) {
var className = getName(component);
var element = options.element;
if (!element) {
return null;
}
var selector = typeof element === 'string' ? document.querySelector(element) : element;
var existingComponent = (components[className] || [])
.find(function (c) { return c.getElement() === selector; });
if (!existingComponent) {
return null;
}
if (options) {
existingComponent.setProps(options);
}
return existingComponent;
}
var stack = {
addComponent: addComponent,
getComponent: getComponent,
removeComponent: removeComponent,
};
var mutatorSubscribers = [];
function subscribe(subscriber) {
mutatorSubscribers.push(subscriber);
if (document.body) {
Array.from(document.body.querySelectorAll("." + subscriber.componentClass) || [])
.filter(function (component) { return component.getAttribute('data-no-boot') === null; })
.forEach(function (component) {
dispatchChangeEvent(subscriber, 'onAdded', component, stack.addComponent);
});
}
}
function dispatchChangeEvent(subscriber, eventName) {
var args = [];
for (var _i = 2; _i < arguments.length; _i++) {
args[_i - 2] = arguments[_i];
}
var callback = subscriber[eventName];
if (!callback) {
return;
}
callback.apply(callback, args);
}
function nodeFn(element, added) {
if (added === void 0) { added = true; }
if (element.getAttribute('data-no-boot') !== null) {
return;
}
var elementClasses = element.className.split(' ');
var subscriber = mutatorSubscribers.find(function (l) { return elementClasses.indexOf(l.componentClass) > -1; });
if (!subscriber) {
return;
}
var eventName = added ? 'onAdded' : 'onRemoved';
var args = added ? [element, stack.addComponent] : [element, stack.removeComponent];
dispatchChangeEvent.apply(void 0, [subscriber, eventName].concat(args));
}
function apply(node, added) {
if (added === void 0) { added = true; }
nodeFn(node, added);
var nextNode = node.firstElementChild;
while (nextNode) {
var next = nextNode.nextElementSibling;
if (isElement(nextNode)) {
apply(nextNode, added);
}
nextNode = next;
}
}
function getElements(nodes) {
return Array
.from(nodes)
.filter(function (node) { return isElement(node); });
}
function observe() {
(new MutationObserver(function (mutations) { return mutations.forEach(function (mutation) {
if (mutation.type === 'attributes') {
return;
}
var addedNodes = mutation.addedNodes, removedNodes = mutation.removedNodes;
getElements(addedNodes).forEach(function (node) { return apply(node, true); });
getElements(removedNodes).forEach(function (node) { return apply(node, false); });
}); })).observe(document, {
childList: true,
subtree: true,
characterData: true,
attributes: true,
});
}
function boot() {
if (!('MutationObserver' in window)) {
return;
}
if (document.body) {
observe();
}
else {
var obs_1 = new MutationObserver(function () {
if (document.body) {
obs_1.disconnect();
observe();
}
});
obs_1.observe(document, { childList: true, subtree: true });
}
}
boot();
var observer = {
subscribe: subscribe,
getComponent: stack.getComponent,
};
var sleep = (function (timeout) {
return new Promise(function (resolve) {
setTimeout(resolve, timeout);
});
});
onError();
var utils = {
sleep: sleep,
Event: events,
Dispatch: dispatch,
Selector: selector,
Observer: observer,
};
/*
* Fix module resolution error with Typescript (for CommonJS components in dist/)
* by creating util.js
* Current fix is to add explicit .js extension in all components (accordion.ts, modal.ts, etc.)
*
* Resources:
* https://www.typescriptlang.org/docs/handbook/module-resolution.html
* https://github.com/Microsoft/TypeScript/issues/16577
*/
var Component = (function () {
function Component(name, defaultProps, props) {
var _this = this;
this.template = '';
this.id = null;
this.eventHandlers = [];
this.registeredElements = [];
this.name = name;
var element = typeof props.element === 'string'
? document.querySelector(props.element) : props.element;
var config = {};
if (element) {
var dataConfig = utils.Selector.attrConfig(element);
if (dataConfig) {
config = dataConfig;
}
}
this.defaultProps = defaultProps;
this.props = Object.assign(defaultProps, config, props, { element: element });
this.id = this.uid();
this.elementListener = function (event) { return _this.onBeforeElementEvent(event); };
this.setEventsHandler();
}
Component.prototype.setTemplate = function (template) {
this.template = template;
};
Component.prototype.getTemplate = function () {
return this.template;
};
Component.prototype.getElement = function () {
return this.getProp('element') || null;
};
Component.prototype.setElement = function (element) {
this.props.element = element;
};
Component.prototype.getId = function () {
return this.id;
};
Component.prototype.uid = function () {
return Math.random().toString(36).substr(2, 10);
};
Component.prototype.getName = function () {
return this.name;
};
Component.prototype.getProps = function () {
return this.props;
};
Component.prototype.getProp = function (name) {
var defaultValue = this.defaultProps[name];
return typeof this.props[name] !== 'undefined' ? this.props[name] : defaultValue;
};
Component.prototype.setProps = function (props) {
var componentProps = Object.assign({}, props);
this.props = Object.assign(this.props, componentProps);
};
Component.prototype.setProp = function (name, value) {
if (typeof this.props[name] === 'undefined') {
throw new Error('Cannot set an invalid prop');
}
this.props[name] = value;
};
Component.prototype.registerElements = function (elements) {
var _this = this;
elements.forEach(function (element) { return _this.registerElement(element); });
};
Component.prototype.registerElement = function (element) {
element.target.addEventListener(element.event, this.elementListener);
this.registeredElements.push(element);
};
Component.prototype.unregisterElements = function () {
var _this = this;
this.registeredElements.forEach(function (element) {
_this.unregisterElement(element);
});
};
Component.prototype.unregisterElement = function (element) {
var registeredElementIndex = this.registeredElements
.findIndex(function (el) { return el.target === element.target && el.event === element.event; });
if (registeredElementIndex > -1) {
element.target.removeEventListener(element.event, this.elementListener);
this.registeredElements.splice(registeredElementIndex, 1);
}
else {
console.error('Warning! Could not remove element:'
+ ' ' + (element.target + " with event: " + element.event + "."));
}
};
Component.prototype.triggerEvent = function (eventName, detail, objectEventOnly) {
var _this = this;
if (detail === void 0) { detail = {}; }
if (objectEventOnly === void 0) { objectEventOnly = false; }
var eventNameObject = eventName.split('.').reduce(function (acc, current, index) {
if (index === 0) {
return current;
}
return acc + current.charAt(0).toUpperCase() + current.slice(1);
});
var eventNameAlias = "on" + eventNameObject
.charAt(0).toUpperCase() + eventNameObject.slice(1);
var props = this.getProps();
this.eventHandlers.forEach(function (scope) {
if (typeof scope[eventNameObject] === 'function') {
scope[eventNameObject].apply(_this, [detail]);
}
if (typeof scope[eventNameAlias] === 'function') {
props[eventNameAlias].apply(_this, [detail]);
}
});
if (objectEventOnly) {
return;
}
var element = this.getElement();
if (element) {
utils.Dispatch.elementEvent(element, eventName, this.name, detail);
}
else {
utils.Dispatch.winDocEvent(eventName, this.name, detail);
}
};
Component.prototype.preventClosable = function () {
return false;
};
Component.prototype.destroy = function () {
this.unregisterElements();
};
Component.prototype.onElementEvent = function (event) {
};
Component.prototype.setEventsHandler = function () {
var props = this.getProps();
var scope = Object.keys(props).reduce(function (cur, key) {
if (typeof props[key] === 'function') {
cur[key] = props[key];
}
return cur;
}, {});
if (Object.keys(scope).length > 0) {
this.eventHandlers.push(scope);
}
};
Component.prototype.onBeforeElementEvent = function (event) {
if (this.preventClosable()) {
return;
}
this.onElementEvent(event);
};
return Component;
}());
var Collapse = (function (_super) {
__extends(Collapse, _super);
function Collapse(props) {
if (props === void 0) { props = { toggle: false }; }
var _this = _super.call(this, 'collapse', { toggle: false }, props) || this;
var toggle = _this.getProp('toggle');
if (toggle) {
_this.toggle();
}
return _this;
}
Collapse.attachDOM = function () {
var className = 'collapse';
utils.Observer.subscribe({
componentClass: className,
onAdded: function (element, create) {
create(new Collapse({ element: element }));
},
onRemoved: function (element, remove) {
remove('Collapse', element);
},
});
document.addEventListener(utils.Event.CLICK, function (event) {
if (!event.target) {
return;
}
var target = utils.Selector.closest(event.target, '[data-toggle]');
if (!target) {
return;
}
var dataToggleAttr = target.getAttribute('data-toggle');
if (dataToggleAttr && dataToggleAttr === className) {
var id = target.getAttribute('data-target') || target.getAttribute('href');
if (!id) {
return;
}
event.preventDefault();
var collapse = document.querySelector(id);
if (!collapse) {
return;
}
var collapseComponent = utils.Observer.getComponent(className, { element: collapse });
if (!collapseComponent) {
return;
}
collapseComponent.toggle({ element: collapse, toggle: true });
}
});
};
Collapse.prototype.getHeight = function () {
return this.getElement().getBoundingClientRect(this.getElement()).height;
};
Collapse.prototype.toggle = function () {
if (this.isVisible()) {
return this.hide();
}
return this.show();
};
Collapse.prototype.show = function () {
var _this = this;
var element = this.getElement();
if (element.classList.contains('collapsing') || this.isVisible()) {
return false;
}
this.triggerEvent(utils.Event.SHOW);
var onCollapsed = function () {
_this.triggerEvent(utils.Event.SHOWN);
element.classList.add('show');
element.classList.remove('collapsing');
element.removeEventListener(utils.Event.TRANSITION_END, onCollapsed);
element.setAttribute('aria-expanded', true);
element.style.height = 'auto';
};
if (!element.classList.contains('collapsing')) {
element.classList.add('collapsing');
}
element.addEventListener(utils.Event.TRANSITION_END, onCollapsed);
var height = this.getHeight();
element.style.height = '0px';
setTimeout(function () {
element.style.height = height + "px";
}, 20);
return true;
};
Collapse.prototype.hide = function () {
var _this = this;
var element = this.getElement();
if (element.classList.contains('collapsing')) {
return false;
}
if (!element.classList.contains('show')) {
return false;
}
this.triggerEvent(utils.Event.HIDE);
var onCollapsed = function () {
_this.triggerEvent(utils.Event.HIDDEN);
element.classList.remove('collapsing');
element.style.height = 'auto';
element.removeEventListener(utils.Event.TRANSITION_END, onCollapsed);
element.setAttribute('aria-expanded', false);
};
element.style.height = element.offsetHeight + "px";
setTimeout(function () {
element.style.height = '0px';
}, 20);
element.addEventListener(utils.Event.TRANSITION_END, onCollapsed);
if (!element.classList.contains('collapsing')) {
element.classList.add('collapsing');
}
element.classList.remove('show');
return true;
};
Collapse.prototype.isVisible = function () {
return this.getElement().classList.contains('show');
};
return Collapse;
}(Component));
Collapse.attachDOM();
var Accordion = (function (_super) {
__extends(Accordion, _super);
function Accordion(props) {
var _this = _super.call(this, 'accordion', { multiple: false }, props) || this;
_this.collapses = [];
var element = _this.getElement();
var toggles = Array
.from(element.querySelectorAll('[data-toggle="accordion"]') || []);
toggles.forEach(function (toggle) {
var collapseId = toggle.getAttribute('href') || toggle.getAttribute('data-target');
if (collapseId === null) {
throw new Error('Accordion: collapse is missing href or data-target attribute');
}
var collapse = document.querySelector(collapseId);
if (collapse) {
_this.addCollapse(collapse);
}
});
_this.registerElement({ target: element, event: utils.Event.CLICK });
return _this;
}
Accordion.attachDOM = function () {
utils.Observer.subscribe({
componentClass: 'accordion',
onAdded: function (element, create) {
create(new Accordion({ element: element }));
},
onRemoved: function (element, remove) {
remove('Accordion', element);
},
});
};
Accordion.prototype.addCollapse = function (element) {
var collapse = new Collapse({
element: element,
});
this.collapses.push(collapse);
return collapse;
};
Accordion.prototype.getCollapse = function (element) {
var el = this.getElement();
var collapse = this.collapses.find(function (c) { return el.getAttribute('id') === element.getAttribute('id'); });
if (!collapse) {
collapse = this.addCollapse(element);
}
return collapse;
};
Accordion.prototype.getCollapses = function () {
return this.collapses;
};
Accordion.prototype.setCollapses = function (showCollapse) {
var _this = this;
var element = this.getElement();
var collapse = this.getCollapse(showCollapse);
var multipleOpen = this.getProp('multiple');
if (!multipleOpen) {
this.collapses.filter(function (c) { return c.getElement() !== collapse.getElement(); }).forEach(function (c) {
_this.toggleIcon(c.getElement(), 'icon-minus', 'icon-plus');
c.hide();
});
}
var v = collapse.isVisible();
this.toggleIcon(collapse.getElement(), v ? 'icon-minus' : 'icon-plus', v ? 'icon-plus' : 'icon-minus');
collapse.toggle();
};
Accordion.prototype.onElementEvent = function (event) {
var target = event.target;
var toggleEl = utils.Selector.closest(target, '[data-toggle="accordion"]');
if (!toggleEl) {
return;
}
var collapseId = toggleEl.getAttribute('data-target') || toggleEl.getAttribute('href');
if (!collapseId) {
return;
}
var collapseEl = document.querySelector(collapseId);
var accordion = utils.Selector.closest(toggleEl, '.accordion');
if (!accordion || !collapseEl) {
return;
}
event.preventDefault();
this.show(collapseEl);
};
Accordion.prototype.toggleIcon = function (collapse, remove, add) {
var id = collapse.getAttribute('id');
var selector = "[data-toggle=\"accordion\"][href=\"#" + id + "\"] .collapse-toggle";
var iconEl = document.querySelector(selector);
if (!iconEl) {
return;
}
if (iconEl.classList.contains(remove)) {
iconEl.classList.remove(remove);
iconEl.classList.add(add);
}
};
Accordion.prototype.show = function (collapseEl) {
var collapse = collapseEl;
if (typeof collapseEl === 'string') {
collapse = document.querySelector(collapseEl);
}
if (!collapse) {
throw new Error("The collapsible " + collapseEl + " is an invalid HTMLElement.");
}
this.setCollapses(collapse);
return true;
};
Accordion.prototype.hide = function (collapseEl) {
var collapse = collapseEl;
if (typeof collapseEl === 'string') {
collapse = document.querySelector(collapseEl);
}
if (!collapse) {
throw new Error("The collapsible " + collapseEl + " is an invalid HTMLElement.");
}
var collapseObj = this.getCollapse(collapse);
return collapseObj.hide();
};
return Accordion;
}(Component));
Accordion.attachDOM();
var Alert = (function (_super) {
__extends(Alert, _super);
function Alert(props) {
if (props === void 0) { props = { fade: true }; }
var _this = _super.call(this, 'alert', { fade: true }, props) || this;
_this.onTransition = false;
if (_this.getOpacity() !== 0) {
var target = _this.getElement().querySelector('[data-dismiss="alert"]');
if (target) {
_this.registerElement({ target: target, event: utils.Event.CLICK });
}
}
return _this;
}
Alert.attachDOM = function () {
utils.Observer.subscribe({
componentClass: 'alert',
onAdded: function (element, create) {
create(new Alert({ element: element }));
},
onRemoved: function (element, remove) {
remove('Alert', element);
},
});
};
Alert.prototype.show = function () {
var _this = this;
if (this.onTransition) {
return false;
}
var element = this.getElement();
if (element.classList.contains('show') && this.getOpacity() !== 0) {
return false;
}
this.onTransition = true;
this.triggerEvent(utils.Event.SHOW);
var onShow = function () {
_this.triggerEvent(utils.Event.SHOWN);
if (element.classList.contains('fade')) {
element.classList.remove('fade');
}
var target = utils.Selector.closest(_this.getElement(), '[data-dismiss="alert"]');
if (target) {
_this.registerElement({ target: target, event: utils.Event.CLICK });
}
element.removeEventListener(utils.Event.TRANSITION_END, onShow);
_this.onTransition = false;
};
var fade = this.getProp('fade');
if (fade && !element.classList.contains('fade')) {
element.classList.add('fade');
}
element.classList.add('show');
element.addEventListener(utils.Event.TRANSITION_END, onShow);
if (element.classList.contains('hide')) {
element.classList.remove('hide');
}
if (!fade) {
onShow();
}
return true;
};
Alert.prototype.hide = function (el) {
var _this = this;
if (this.onTransition || this.getOpacity() === 0) {
return false;
}
this.onTransition = true;
var element = el || this.getElement();
this.triggerEvent(utils.Event.HIDE);
var onHide = function () {
_this.triggerEvent(utils.Event.HIDDEN);
element.removeEventListener(utils.Event.TRANSITION_END, onHide);
_this.onTransition = false;
};
var fade = this.getProp('fade');
if (fade && !element.classList.contains('fade')) {
element.classList.add('fade');
}
element.addEventListener(utils.Event.TRANSITION_END, onHide);
if (!element.classList.contains('hide')) {
element.classList.add('hide');
}
if (element.classList.contains('show')) {
element.classList.remove('show');
}
if (!fade) {
onHide();
}
return true;
};
Alert.prototype.onElementEvent = function (event) {
if (event.type !== utils.Event.CLICK) {
return;
}
this.hide();
};
Alert.prototype.destroy = function () {
this.unregisterElements();
this.hide();
};
Alert.prototype.getOpacity = function () {
var element = this.getElement();
var opacity = window.getComputedStyle(element).opacity;
return parseFloat(opacity || '');
};
return Alert;
}(Component));
Alert.attachDOM();
var Size;
(function (Size) {
Size["sm"] = "sm";
Size["md"] = "md";
Size["lg"] = "lg";
Size["xl"] = "xl";
})(Size || (Size = {}));
var Color;
(function (Color) {
Color["primary"] = "primary";
Color["secondary"] = "secondary";
Color["success"] = "success";
Color["warning"] = "warning";
Color["danger"] = "danger";
})(Color || (Color = {}));
var Direction;
(function (Direction) {
Direction["top"] = "top";
Direction["right"] = "right";
Direction["bottom"] = "bottom";
Direction["left"] = "left";
})(Direction || (Direction = {}));
var Loader = (function (_super) {
__extends(Loader, _super);
function Loader(props) {
if (props === void 0) { props = { color: Color.primary, size: Size.md }; }
return _super.call(this, 'loader', { fade: true, size: Size.md, color: Color.primary }, props) || this;
}
Loader.prototype.show = function () {
var element = this.getElement();
if (element.classList.contains('hide')) {
element.classList.remove('hide');
}
this.triggerEvent(utils.Event.SHOW);
var size = this.getProp('size');
utils.Selector.removeClasses(element, Object.values(Size), 'loader');
element.classList.add("loader-" + size);
var color = this.getProp('color');
var spinner = this.getSpinner();
utils.Selector.removeClasses(spinner, Object.values(Color), 'loader');
spinner.classList.add("loader-" + color);
this.triggerEvent(utils.Event.SHOWN);
return true;
};
Loader.prototype.animate = function (startAnimation) {
if (startAnimation === void 0) { startAnimation = true; }
if (startAnimation) {
this.show();
}
else {
this.hide();
}
var loaderSpinner = this.getSpinner();
if (startAnimation
&& !loaderSpinner.classList.contains('loader-spinner-animated')) {
loaderSpinner.classList.add('loader-spinner-animated');
return true;
}
if (!startAnimation
&& loaderSpinner.classList.contains('loader-spinner-animated')) {
loaderSpinner.classList.remove('loader-spinner-animated');
}
return true;
};
Loader.prototype.hide = function () {
var element = this.getElement();
if (!element.classList.contains('hide')) {
element.classList.add('hide');
}
this.triggerEvent(utils.Event.HIDE);
this.triggerEvent(utils.Event.HIDDEN);
return true;
};
Loader.prototype.getSpinner = function () {
return this.getElement().querySelector('.loader-spinner');
};
return Loader;
}(Component));
var Modal = (function (_super) {
__extends(Modal, _super);
function Modal(props, autoCreate) {
if (autoCreate === void 0) { autoCreate = true; }
var _this = _super.call(this, 'modal', {
title: null,
message: null,
cancelable: true,
background: null,
cancelableKeyCodes: [
27,
13,
],
buttons: [
{ event: 'confirm', text: 'Ok', dismiss: true, class: 'btn btn-primary' },
],
center: true,
}, props) || this;
_this.backdropSelector = 'modal-backdrop';
_this.elementGenerated = false;
_this.setTemplate(''
+ '<div class="modal" tabindex="-1" role="modal" data-no-boot>'
+ '<div class="modal-inner" role="document">'
+ '<div class="modal-content">'
+ '<div class="modal-header">'
+ '<h5 class="modal-title"></h5>'
+ '<button type="button" class="icon-close" data-dismiss="modal" aria-label="Close">'
+ '<span class="icon" aria-hidden="true"></span>'
+ '</button>'
+ '</div>'
+ '<div class="modal-body">'
+ '<p></p>'
+ '</div>'
+ '<div class="modal-footer">'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>');
if (autoCreate && _this.getElement() === null) {
_this.build();
}
return _this;
}
Modal.attachDOM = function () {
var className = 'modal';
utils.Observer.subscribe({
componentClass: className,
onAdded: function (element, create) {
create(new Modal({ element: element }));
},
onRemoved: function (element, remove) {
remove('Modal', element);
},
});
document.addEventListener(utils.Event.CLICK, function (event) {
var target = event.target;
if (!target) {
return;
}
var toggleEl = utils.Selector.closest(target, "[data-toggle=\"" + className + "\"]");
if (toggleEl) {
var selector = toggleEl.getAttribute('data-target');
if (!selector) {
return;
}
var modal = document.querySelector(selector);
if (!modal) {
return;
}
var modalComponent = utils.Observer.getComponent(className, { element: modal });
if (!modalComponent) {
return;
}
target.blur();
modalComponent.show();
}
});
};
Modal.prototype.build = function () {
var _this = this;
this.elementGenerated = true;
var builder = document.createElement('div');
builder.innerHTML = this.getTemplate();
this.setElement(builder.firstChild);
var element = this.getElement();
var title = this.getProp('title');
if (title !== null) {
element.querySelector('.modal-title').innerHTML = title;
}
var message = this.getProp('message');
if (message !== null) {
element.querySelector('.modal-body').firstChild.innerHTML = message;
}
else {
this.removeTextBody();
}
var cancelable = this.getProp('cancelable');
if (!cancelable) {
element.querySelector('.close').style.display = 'none';
}
var buttons = this.getProp('buttons');
if (Array.isArray(buttons) && buttons.length > 0) {
buttons.forEach(function (button) {
element.querySelector('.modal-footer').appendChild(_this.buildButton(button));
});
}
else {
this.removeFooter();
}
document.body.appendChild(element);
};
Modal.prototype.show = function () {
var _this = this;
var element = this.getElement();
if (element === null) {
this.build();
}
if (element.classList.contains('show')) {
return false;
}
document.body.style.overflow = 'hidden';
(function () { return __awaiter(_this, void 0, void 0, function () {
var onShown;
var _this = this;
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4, utils.sleep(20)];
case 1:
_a.sent();
this.triggerEvent(utils.Event.SHOW);
this.buildBackdrop();
this.attachEvents();
onShown = function () {
_this.triggerEvent(utils.Event.SHOWN);
element.removeEventListener(utils.Event.TRANSITION_END, onShown);
};
element.addEventListener(utils.Event.TRANSITION_END, onShown);
if (this.getProp('center')) {
this.center();
}
element.classList.add('show');
return [2];
}
});
}); })();
return true;
};
Modal.prototype.hide = function () {
var _this = this;
var element = this.getElement();
if (!element.classList.contains('show')) {
return false;
}
document.body.style.overflow = 'visible';
this.triggerEvent(utils.Event.HIDE);
this.detachEvents();
element.classList.add('hide');
element.classList.remove('show');
var backdrop = this.getBackdrop();
var onHidden = function () {
if (backdrop) {
document.body.removeChild(backdrop);
backdrop.removeEventListener(utils.Event.TRANSITION_END, onHidden);
}
element.classList.remove('hide');
_this.triggerEvent(utils.Event.HIDDEN);
if (_this.elementGenerated) {
document.body.removeChild(element);
}
};
if (backdrop) {
backdrop.addEventListener(utils.Event.TRANSITION_END, onHidden);
backdrop.classList.add('fadeout');
}
return true;
};
Modal.prototype.onElementEvent = function (event) {
if (event.type === 'keyup') {
var keycodes = this.getProp('cancelableKeyCodes');
if (keycodes.find(function (k) { return k === event.keyCode; })) {
this.hide();
}
return;
}
if (event.type === utils.Event.START) {
this.hide();
return;
}
if (event.type === utils.Event.CLICK) {
var target = event.target;
var eventName = target.getAttribute('data-event');
if (eventName) {
this.triggerEvent(eventName);
}
var dismissButton = utils.Selector.closest(target, '[data-dismiss]');
if (dismissButton && dismissButton.getAttribute('data-dismiss') === 'modal') {
this.hide();
}
}
};
Modal.prototype.setBackgroud = function () {
var element = this.getElement();
var background = this.getProp('background');
if (!background) {
return;
}
if (!element.classList.contains("modal-" + background)) {
element.classList.add("modal-" + background);
}
if (!element.classList.contains('text-white')) {
element.classList.add('text-white');
}
};
Modal.prototype.buildButton = function (buttonInfo) {
var button = document.createElement('button');
button.setAttribute('type', 'button');
button.setAttribute('class', buttonInfo.class || 'btn');
button.setAttribute('data-event', buttonInfo