/* wolf.ui 0.7, UI components for wolf, a lightweight framework for web page creation.
* Copyright 2020 XWolfOverride (under lockdown)
*
* Licensed under the MIT License
*
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software
* and associated documentation files (the "Software"), to deal in the Software without restriction,
* including without limitation the rights to use, copy, modify, merge, publish, distribute,
* sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all copies or
* substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
* BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
* DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
(function () {
'use strict';
wolf.wolfExtension(function (K, D, UI, TOOLS) {
/**
* Common dialog controller
*/
function dialogControl(modal, element, controller) {
var modalWall; //Modal wall DOM instance
var base; //Base dialog DOM
var dialog; //Dialog DOM element
var body; //Dialog body DOM element
var buttons;// Dialog buttons footer DOM element
var onClose; //Callback for on close
// Process modaling
if (modal) {
modalWall = UI.instanceTemplate(new UI.Template("div", { "class": "wolf-dialog-modal-wall", $controller: controller }), { parent: element })[0];
element.appendChild(modalWall);
base = modalWall;
} else
base = element;
// Create dialog row
var dialog_row=UI.instanceTemplate(new UI.Template("div", { "class": "wolf-dialog-row", $controller: controller }), { parent: base })[0];
base.appendChild(dialog_row);
// Create dialog frame
var dialog = UI.instanceTemplate(new UI.Template("div", { "class": "wolf-dialog", $controller: controller }), { parent: base })[0];
dialog_row.appendChild(dialog);
dialog.close = function () {
element.removeChild((modal ? modalWall : dialog_row));
controller && controller.close && controller.close();
onClose && onClose(dialog.dialogController.result);
};
// Controller logic
/**
* Adds a UI template to the dialog and instences it
* @param {*} ui UI template object or array
*/
function append(ui) {
if (!body) {
body = UI.instanceTemplate(new UI.Template("div", { "class": "wolf-dialog-body" }), { parent: dialog })[0];
if (buttons)
body.classList.add("with-footer");
dialog.appendChild(body);
}
if (ui.insertTo) //Assuming fragment
ui.insertTo(body);
else {
if (!Array.isArray(ui))
ui = [ui];
ui.forEach(function (uielem) {
var uiDOM = UI.instanceTemplate(uielem, { parent: body });
uiDOM.forEach(function (dom) { body.appendChild(dom) });
})
}
}
/**
* Adds buttons definitions or UI template to the dialog foooter
* @param {*} buttonsDef Button definition or UI template object or array
*/
function appendButtons(buttonsDef) {
if (body)
body.classList.add("with-footer");
if (!buttons) {
buttons = UI.instanceTemplate(new UI.Template("div", { "class": "wolf-dialog-buttons" }), { parent: dialog })[0];
dialog.appendChild(buttons);
}
if (!Array.isArray(buttonsDef))
buttonsDef = [buttonsDef];
buttonsDef.forEach(function (uidef) {
if (uidef.type || uidef.value) {
var uiDOM = UI.instanceTemplate(uidef);
uiDOM.forEach(function (dom) { buttons.appendChild(dom) });
} else
for (var k in uidef) {
var def = uidef[k];
if (!def)
continue; //def can be null in order to cancel a button in json strucutres
var button;
if (def.t)
button = UI.instanceTemplate(def.t, { parent: dialog })[0];
else {
var btcontent = [];
if (def.icon)
btcontent.push(new UI.Template("i", { class: "icon" + (def.text ? " with-text" : "") }, { value: def.icon }));
if (def.text)
btcontent.push(new UI.Template(null, null, def.text));
button = UI.instanceTemplate(new UI.Template("button", null, btcontent), { parent: dialog })[0];
if (def.class)
button.className = def.class;
if (def.default)
button.classList.add("default");
if (def.cancel)
button.classList.add("cancel");
}
installEvent(button, k, def);
buttons.appendChild(button);
}
function installEvent(button, id, def) {
button.addEventListener("click", function (evt) {
var evtMethod;
if (controller)
evtMethod = controller[id];
if (!evtMethod)
evtMethod = def.click;
if (!evtMethod)
evtMethod = function () {
dialog.dialogController.result = id;
dialog.close();
}
evtMethod(element, evt, dialog);
});
}
});
}
/**
* Raises the callback of the dialog
* @param {*} cb callback
* @param {*} close callback for on close
*/
function callback(cb, close) {
cb && cb(dialog, element, controller);
onClose = close;
}
// Return controller
return dialog.dialogController = {
append: append,
appendButtons: appendButtons,
callback: callback,
}
}
// ====================
// ====================
// == Public
// ====================
/**
* Shows a non blocking message to the user
* @param {string} text Text to show
* @param {string} type (error|warning|default)
*/
function toast(text, type) {
var div = document.createElement("div");
div.className = "wolf-toast wolf-toast-" + type;
div.innerText = text;
document.body.appendChild(div);
setTimeout(function () {
div.style.opacity = 0;
setTimeout(function () {
document.body.removeChild(div);
}, 1000);
}, 1500);
}
/**
* Show a dialog embedding a fragment.
* @param {element} element Destination element, application element recommended
* @param {boolean} modal True to show the dialog in modal way
* @param {string} url Url of the fragment
* @param {*} [buttons] Button definition
* @param {*} [controller] Controller for the dialogs events, if none the parent element one will be used
* @param {function} [callback] Callback when the dialog is shown
* @param {function} [onclose] Callback when dialog close, passing the dialog result
*/
function dialog(element, modal, url, buttons, controller, callback, onclose) {
var dc = dialogControl(modal, element, controller);
UI.loadFragment(url, function (fragment) {
dc.append(fragment);
if (buttons)
dc.appendButtons(buttons);
dc.callback(callback, onclose);
});
}
/**
* Show a dialog asking or showing information.
* @param {element} element Destination element, application element recommended
* @param {boolean} modal True to show the dialog in modal way
* @param {string} text Text to show
* @param {*} [buttons] Button definition
* @param {*} [controller] Controller for the dialogs events, if none the parent element one will be used
* @param {function} [callback] Callback when the dialog is shown
* @param {function} [onclose] Callback when dialog close, passing the dialog result
*/
function messageDialog(element, modal, text, buttons, controller, callback, onclose) {
if (!buttons)
buttons = { close: { icon: "close", cancel: true } };
uiDialog(new UI.Template(null, null, text), buttons, element, modal, controller, callback, onclose)
}
/**
* Show a dialog asking or showing information.
* @param {element} element Destination element, application element recommended
* @param {boolean} modal True to show the dialog in modal way
* @param {*} ui UI body definition
* @param {*} [buttons] Button definition
* @param {*} [controller] Controller for the dialogs events, if none the parent element one will be used
* @param {function} [callback] Callback when the dialog is shown
* @param {function} [onclose] Callback when dialog close, passing the dialog result
*/
function uiDialog(ui, buttons, element, modal, controller, callback, onclose) {
var dc = dialogControl(modal, element, controller);
dc.append(ui);
if (buttons)
dc.appendButtons(buttons);
dc.callback(callback, onclose);
}
/**
* Loads and initializes a UI library
* @param {string} path Path of the UI library to load
*/
function loadLibrary(path) {
UI.fetchFragment(path, function (dom) {
UI.readTemplate(dom, null, {
});
});
}
// ====================
// ====================
// == Private
// ====================
/**
* Create the base element needed for the extensible UI and control building system
*/
function InitControlDefinitions() {
var controlGlobal = {}; //Global control space
/**
* Return the control instance attribute values
* @param {*} controller controller object of control definition
* @param {*} template template of control usage
*/
function getControlAttributesTable(controller, template) {
var values = {};
// Control definition defaults
for (var k in controller) {
var attr = controller[k];
if (attr && attr.default)
values[k] = attr.default;
}
// UI usage values
for (var k in template) {
if (k[0] == "$")
continue;
values[k] = template[k];
}
return values;
}
/**
* Generates the DOM of the control based on the script render method
* @param {*} ext ctor extended info
*/
function renderControlDOM(ext) {
var tux = ext.customController.build();
if (!tux)
return [];
if (!Array.isArray(tux))
tux = [tux];
var ux = [];
for (var i in tux)
ux = ux.concat(UI.instanceTemplate(tux[i], ext));
ext.customController.processDOM && ext.customController.processDOM(ux);
return ux;
}
/**
* Create event proxy for linked event call
* @param {string} method Controller method name
* @param {string} ename Event name
*/
function eventProxy(method, ename, ext) {
return function (element, event) {
var ctrl = ext.parentCustom || element.getController(); //TODO: This hide the controller if there is a custom
var evtMethod = ctrl[method];
if (!evtMethod)
throw new Error("Method '" + method + "' not found for event '" + ename + "'.");
evtMethod(element, event);
}
}
/**
* Register wolf:control as control definition structure
*/
UI.registerElement("control", {
$init: function (template) {
var id = template.id;
var allowChildren = template.allowchildren == "true";
var controller = {};
var ui = {};
var scriptFactory;
if (!id)
throw new Error("Can't define a control without id");
if (!template.$) {
console.warn("wolf:" + id + " empty definition");
return null;
}
// Read definition
template.$.forEach(function (c) {
switch (c.$t) {
case null:
break;
case "attr": {
if (!c.$ || c.$.length != 1 || c.$[0].$t)
throw new Error("Control definition wolf:" + id + " attribute name missing or type error");
var name = c.$[0].$;
if (name[0] == "$" || name == "ui")
throw new Error("Control definition wolf:" + id + " attribute '" + name + "' not valid or reserved.");
if (name.indexOf(":") >= 0)
throw new Error("Control definition wolf:" + id + " attribute '" + name + "' can not have namespaces.");
if (controller[name])
throw new Error("Control definition wolf:" + id + " attribute '" + name + "' already defined.");
var attr = controller[name] = {};
attr.bindable = c.bindable !== "false";
attr.mandatory = c.mandatory == "true";
attr.default = c.default;
break;
}
case "event": {
if (!c.$ || c.$.length != 1 || c.$[0].$t)
throw new Error("Control definition wolf:" + id + " event name missing or type error");
var name = c.$[0].$;
if (controller[name])
throw new Error("Control definition wolf:" + id + " events and values can not share the same name (" + name + ").");
if (controller["event:" + name])
throw new Error("Control definition wolf:" + id + " event '" + name + "' already defined.");
controller["event:" + name] = { bindable: false, mandatory: false };
break;
}
case "ui": {
var uid = c.id || "";
if (ui[uid])
throw new Error("Control definition wolf:" + id + " ui " + (uid == "" ? "[default]" : "'" + uid + "'") + " already defined.");
ui[uid] = c.$;
break;
}
case "script": {
if (scriptFactory)
throw new Error("Control definition wolf:" + id + " script already defined.");
var script = c.$[0].$;
if (script && (typeof script != "string" || script.indexOf("use strict") < 1))
throw new Error("Control definition wolf:" + id + " script 'use strict'; mandatory");
scriptFactory = new Function('control', 'K', 'D', 'UI', 'TOOLS', script + ";\n//# sourceURL=wolf:" + id);
break;
}
default:
throw new Error("Control definition wolf:" + id + " " + c.$t + " not allowed here.");
}
});
if (scriptFactory) {//TODO: use this single instance of script
var script = new scriptFactory(null, K, D, UI, TOOLS);
if (script.define)
controller = script.define(controller);
}
// Controller logics (new definition rendering) =============
controller.$init = function (template) {
if (template.$ && template.$.length && !allowChildren)
throw new Error("wolf:" + id + " does not allow child nodes");
var values = getControlAttributesTable(controller, template);
var API = {
ui: function (name, clone) {
var result = name ? ui[name] : ui[""];
return clone !== false ? UI.cloneTemplate(result) : result;
},
value: function (name) {
var data = values[name];
if (data instanceof D.Binding)
data = data.getValue(ext.parent);
return data;
},
binding: function (name) {
var data = values[name];
if (data instanceof D.Binding)
return data;
return null;
},
childs: function (name) {
//ID for usage on future with multiple chilnodes block definitions
return template.$;
},
global: controlGlobal,
values: values,
}
var script = scriptFactory ? new scriptFactory(API, K, D, UI, TOOLS) : {};
API.controller = script;
API.instanceTemplate = function (templ, ext2) { UI.instanceTemplate(templ, ext2 ? ext2 : { parent: API.parent, customController: script }) };
if (!script.build)
script.build = function () {
return ui[""];
}
template.$api = API;
template.$c = script;
//TODO: Create control defined custom properties for attributes that change the attribute values
script.init && script.init();
};
controller.$ctor = function (template, ext) {
var parentCustom = ext.customController;
ext = {}.merge(ext); //Copy of ext instance
// Initialize attributes and script
var values = template.$api.values;
template.$api.parent = ext.parent; //TODO: Not here, thsi is shared between renderings of same template
template.$api.context = ext;
// Event mirror and attribute hook
// TODO MOVE TO $init (now needs the ext instance)
for (var k in values)
if (k.startsWith("event:")) {
var name = k.substring(6);
template.$c["$" + name] = eventProxy(values["event:" + name], name, ext);
}
for (var k in controller)
if (k.startsWith("event:") && !template.$c["$" + k.substring(6)])
template.$c["$" + k.substring(6)] = function () { }; //Empty event (avoid errors)
ext.getChildNodes = template.$api.childs;
ext.customController = template.$c;
ext.parentCustom = parentCustom;
//TODO: Replace with a local binding (bindings to values object only, creating a local model only for this control)
// - access this local binding with {$name}
ext.onRender = function (element, template) {
if (!template.$t && template.$ && template.$[0] == "$") {
var data = values[template.$.substr(1)];
if (data instanceof D.Binding)
data.bindExecutor(element,
null,
null,
function (read) { element.nodeValue = read({ element: element }) }
);
else
element.nodeValue = data;
}
for (var k in template) {
if (k[0] == "$")
continue;
var attr = template[k];
if (attr && attr[0] == "$") {
var data = values[attr.substr(1)];
if (data instanceof D.Binding)
data.bindExecutor(element,
null,
null,
function (read) { element.setAttribute(k, read({ element: element })) }
);
else
element.setAttribute(k, data);
}
}
}
// Generate DOM
return renderControlDOM(ext);
};
UI.registerElement(id, controller);
},
id: { bindable: false, mandatory: true },
allowchildren: { bindable: false },
childs: { bindable: false }
});
UI.registerElement("children", {
$ctor: function (template, ext) {
if (!ext.getChildNodes)
throw new Error("wolf:children can only be used inside a wolf:control UI definition");
var childTemplate = ext.getChildNodes(template.id);
var dom = [];
// Clear custom control private controller and API
ext = { parent: ext.parent }
for (var i in childTemplate)
dom = dom.concat(UI.instanceTemplate(childTemplate[i], ext));
return dom;
},
id: { bindable: false }
})
}
// ====================
// ====================
// == Injection
// ====================
InitControlDefinitions();
wolf.merge({
// UI
toast: toast,
dialog: dialog,
messageDialog: messageDialog,
uiDialog: uiDialog,
loadLibrary: loadLibrary,
});
});
})();
Iván Dominguez