const U = (function (){
const PROP = 0,
ACTION = 1,
FUNCTION = 2,
PROP_SETTER = 3,
PROP_SETTER_FIXED = 4,
__CONNEXIONS__ = Symbol ("connexions");
function In (source, id, setter){
return {
source: source,
id : id ,
setter: setter, }; }
function Target (source, id, setter) {
if (setter)
if (typeof setter === "function") return {
type : PROP_SETTER,
source: source,
id : id,
setter: setter, };
else return {
type : PROP_SETTER_FIXED,
source: source,
id : id,
setter: setter, };
if (typeof source === "function") return {
type : ACTION,
source: source,
id : id, };
if (typeof id === "function") return {
type : FUNCTION,
source: source,
action: id,
id : id, };
if (typeof source[id] === "function") return {
type : FUNCTION,
source: source,
action: source[id],
id : id, };
return {
type : PROP,
source: source,
id : id, }; }
class Binder {
constructor (source, source_id) {
this.value = source[source_id];
this.source = source;
this.id = source_id;
this.targets = [ ];
Object.defineProperty (source, source_id, {
get: ( ) => this.value ,
set: (v) => this.set (v), }); }
connect (target) {
this.targets.push (target);
this.update (this.targets[this.targets.length - 1], this.value);
return this; }
set (new_value) {
if (this.value !== new_value) {
for (let i = 0; i < this.targets.length; i++)
this.update (this.targets[i], new_value);
this.value = new_value ; } }
remove (source, id) {
for (let i = this.targets.length - 1; i >= 0; i--) {
if (this.targets[i].source === source) {
if (!id)
this.removeAtIndex(i,1);
else if (this.targets[i].id === id)
this.removeAtIndex(i,1); } } }
removeAtIndex (i) {
const proxy = this.targets[i].source[__CONNEXIONS__];
if (proxy) {
const inputs = proxy.inputs;
for (let j = inputs.length - 1; j >= 0; j--) {
const input = inputs[j];
if (input[0] === this.source && input[1] === this.id)
inputs.splice(j,1); } }
this.targets.splice(i,1); }
reset () {
this.targets = []; }
update (target, new_value) {
switch (target.type) {
case ACTION :
target.source (new_value, this.value);
break;
case FUNCTION :
target.action.call (target.source, new_value, this.value)
break;
case PROP_SETTER :
target.source[target.id] = target.setter.call (target.source, new_value, this.value);
break;
case PROP_SETTER_FIXED :
target.source[target.id] = target + setter;
break;
default :
target.source[target.id] = new_value; } } }
function bind (source, id) {
if (source instanceof In)
return (target, target_id, setter) => bindOn (source.source, source.id, Target (target, target_id, source.setter ? source.setter : setter), target, target_id);
else
return (target, target_id, setter) => bindOn (source, id, Target (target, target_id, setter), target, target_id); }
function bindOn (s, id, Target, t, t_id) {
if (! s[__CONNEXIONS__])
s[__CONNEXIONS__] = {
binders: { },
inputs : [ ], };
const proxy = s[__CONNEXIONS__];
if (! t[__CONNEXIONS__])
t[__CONNEXIONS__] = {
binders: { },
inputs : [ ], };
t[__CONNEXIONS__].inputs.push([s, id, t_id]);
if (proxy.binders[id]) {
proxy.binders[id].connect (Target); }
else {
proxy.binders[id] = new Binder (s, id)
proxy.binders[id].connect (Target); } }
function unbind (s, id) {
return (t, t_id) => unbindOn (s, id, t, t_id); }
function unbindOn (s, id, t, t_id) {
if ((!t || t[__CONNEXIONS__]) && (!s || s[__CONNEXIONS__])) {
if (t) {
const inputs = t[__CONNEXIONS__].inputs;
if (t_id) {
for (let i = inputs.length - 1; i >= 0; i--) {
const input = inputs[i];
if (input && input[2] === t_id)
if (!s || (s && input[0] === s && (!id || id === input[1]) ) )
input[0][__CONNEXIONS__].binders[input[1]].remove(t, t_id); } }
else {
for (let i = inputs.length - 1; i >= 0; i--) {
const input = inputs[i];
if (!s || (s && input[0] === s && (!id || id === input[1]) ) )
input[0][__CONNEXIONS__].binders[input[1]].remove(t); } } }
else if (s) {
const binders = s[__CONNEXIONS__].binders;
if (id)
binders[id].reset();
else for (let id in binders) {
binders[id].reset(); } } } }
function set (s, id, value) {
if (! s[__CONNEXIONS__])
s[__CONNEXIONS__] = {
binders: { },
inputs : [ ] };
const proxy = s[__CONNEXIONS__];
if (proxy.binders[id])
proxy.binders[id].value = value; }
const proxy = {
set: (t, p, v) => {
t[p] = v;
if (!t.lock && typeof p === "string" && Number.isInteger (Number (p)))
t.set (p, v);
return true; } };
const _b_ = Symbol("binder");
class BindableArray extends Array {
constructor(d/*data = [obj_source, prop_name]*/) {
if (typeof d === "object") { // Is the data an array ?
// Initialize Array
super();
d[0][d[1]] .forEach ((v,i) => this[i] = v);
// Initialize b, array for the binders
this[_b_] = [];
// Initialize l through setL(), l always equal to length => allow binding of length
this.setL();
// Replace the initial array by this in a proxy
d[0][d[1]] = new Proxy(this, proxy); }
else // Create an empty array with length = d. Used by super.splice()
super(d);
}
// Bind this Array to another
bind (b) {
const c = { // Binder config
t : b.target,
s : b.setter,
r : b.remover,
i : typeof b.index !== "string" ?
b.index
: (o, i) => o[b.index] = i };
this[_b_].push (c);
this.initTarget (c);
return this; }
// Initialize the bound array
initTarget (b) {
const t = b.t[0][b.t[1]];
this.forEach ((v,i) => {
const o = b.s (v,i,this);
if (b.i)
b.i (o, i);
t[i] = o; } ); }
// Set a specific value. Used by the proxy when a value is set by array[i] = v
set (i, v) {
this.setL();
this[_b_].forEach((b) => {
const t = b.t[0][b.t[1]];
if (b.r && t[i])
b.r (t[i], i);
t[i] = this.setItem (b, v, Number(i)); }) }
// Shortcut to set a value in a binder
setItem (b, v, i) {
const o = b.s (v, i, this);
if (b.i)
b.i (o, i);
return o; }
// Set the bindable length
setL () {
return this.l = this.length; }
// Extends default push to the arrays in the binders
push (...v) {
this.splice (this.length - 1, 0, ...v);
return this.length; }
// Extends default pop to the arrays in the binders
pop (n = 1) {
return this.splice (this.length - 1, n); }
// Extends default shift to the arrays in the binders
shift (n = 1) {
return this.splice (0, n); }
// Extends default unshift to the arrays in the binders
unshift (...v) {
this.splice (0, 0, ...v);
return this.length; }
// Extends default splice to the arrays in the binders
splice (i0, n, ...v) {
this.lock = true;
const R = super.splice (i0, n, ...v),
l = this.setL(),
vl= v.length;
this[_b_].forEach((b) => {
const t = b.t[0][b.t[1]],
o = v.map ((v,i,d) => this.setItem (b, v, i0+i)),
r = t.splice (i0, n, ...o);
if (b.r) r.forEach ((v,i) => b.r (v, i+i0));
this.setIndex (b, i0+vl, l, t);
});
this.lock = false;
return R; }
// Update the index property of the binders (if exists)
setIndex (b, i0, i1, t) {
if (b.i) for (let i = i0; i < i1; i++) {
b.i (t[i], i); } }
// Swap two value when sorting an array, to avoid triggering the remover
swap (i1, i2) {
this.lock = true;
const temp = this[i1];
this[i1] = this[i2];
this[i2] = temp;
this[_b_].forEach((b) => {
const t = b.t[0][b.t[1]];
if (t.swap)
t.swap (i1, i2);
else
[t[i1], t[i2]] = [t[i2], t[i1]];
if (b.i) {
b.i (t[i1], i1);
b.i (t[i2], i2); }
});
this.lock = false;}
// Remove a specific value
remove (v) {
let i;
while ((i = this.indexOf(v)) !== -1) {
console.log(i)
this.splice (i, 1); } }
// Remove values satisfying the condition
removeWhere (f) {
let i;
while ((i = this.findIndex(f)) !== -1) {
this.splice (i, 1); } }
up (v) {
const i = this.indexOf(v);
if (i !== -1 && i < this.length-1)
this.swap(i, i+1); }
down (v) {
const i = this.indexOf(v);
if (i !== -1 && i > 0)
this.swap(i, i-1); }
partition (f, left, right) {
let pivot = this[Math.floor((right + left) / 2)],
i = left,
j = right;
while (i <= j) {
while (f (this[i], pivot) < 0) { i++; }
while (f (this[j], pivot) > 0) { j--; }
if (i <= j) {
if (i !== j)
this.swap(i, j);
i++;
j--; } }
return i; }
quickSort (f, left, right) {
const i = this.partition (f, left, right);
if (left < i - 1)
this.quickSort (f, left, i - 1);
if (i < right)
this.quickSort (f, i, right); }
sort (f) {
f = f ? f : (a,b) => a>b ? 1 : a<b ? -1 : 0;
if (this.length > 1)
this.quickSort (f, 0, this.length - 1); }
}
return {
bind : bind,
unbind: unbind,
set : set,
bindableArray: (s) => {
if (s[0][s[1]] instanceof BindableArray)
return s[0][s[1]];
else
return new BindableArray(s); },
BindableArray: BindableArray,
};
})();
const O_Core = (function () {
return class O {
constructor (tag = "div", ...args) {
this.DOM = document.createElement (tag);
this.DOM.REF = this;
this.set (...args); }
ref (t, v) {
t[v] = this;
return this; }
render (elem) {
return elem.appendChild(this.DOM); }
/// ADD ///
add (...args) {
if (args !== undefined) {
for (let i = 0; i < args.length; i++) {
const elem = args[i];
if (elem !== undefined) {
if (elem === "\n")
this.DOM.appendChild (new O("br").DOM);
else if (Array.isArray (elem))
this.add (...elem);
else if (typeof elem !== "object")
this.DOM.appendChild (new O("span").html(elem).DOM);
else
this.DOM.appendChild (elem.DOM); } } }
return this; }
appendTo (element) {
if (element)
element.add (this);
return this; }
/// --- ///
/// DELETE ///
reset () {
for (let i = this.DOM.children.length - 1; i >= 0; i--) {
this.DOM.children[i].REF.close (); }
U.unbind () (this.DOM);
U.unbind () (this.DOM.style); }
close () {
this.DOM.remove();
this.reset();
U.unbind () (this); }
/// PROPERTIES ///
set (...configs) {
if (configs.tag)
tag(configs.tag);
for (let i = 0; i < configs.length; i++) {
const config = configs[i];
if (config instanceof O || Array.isArray (config) || typeof config !== "object")
this.add (config);
else for (const key in config) {
this [key] (config[key]); } }
return this; }
map (source, setter) {
if( typeof source === "object" ) {
if( Array.isArray( source ) )
this.add( source.map( setter ) );
else
for( const key in source ) {
this.add( setter( source[key], key, source ) ); } }
return this; }
tag (tag) {
if (this.DOM.tagName !== tag) {
const oldDOM = this.DOM;
const temp = oldDOM.childNodes;
this.DOM = document.createElement (tag);
let item;
while (item = temp[0]) {
this.DOM.appendChild (item);}
oldDOM.parentNode.insertBefore (this.DOM, oldDOM);
oldDOM.remove(); } }
prop (props) {
for (const key in props) {
this.p( key, props[key] ); }
return this; }
p( key, object, prop, setter ) {
if( !object )
return this.DOM[key];
if( Array.isArray (object) )
[object, prop, setter] = object;
if( !prop )
this.DOM[key] = object;
else
U.bind (object, prop) (this.DOM, key, setter);
return this; }
attr (p, v) { return this.prop ({ [p]: v }); }
accept(o,p,s){return this.p("accept",o,p,s);}
acceptCharset(o,p,s){return this.p("accept-charset",o,p,s);}
accesskey(o,p,s){return this.p("accesskey",o,p,s);}
action(o,p,s){return this.p("action",o,p,s);}
align(o,p,s){return this.p("align",o,p,s);}
alt(o,p,s){return this.p("alt",o,p,s);}
async(o,p,s){return this.p("async",o,p,s);}
autocomplete(o,p,s){return this.p("autocomplete",o,p,s);}
autofocus(o,p,s){return this.p("autofocus",o,p,s);}
autoplay(o,p,s){return this.p("autoplay",o,p,s);}
bgcolor(o,p,s){return this.p("bgcolor",o,p,s);}
border(o,p,s){return this.p("border",o,p,s);}
buffered(o,p,s){return this.p("buffered",o,p,s);}
challenge(o,p,s){return this.p("challenge",o,p,s);}
charset(o,p,s){return this.p("charset",o,p,s);}
checked(o,p,s){return this.p("checked",o,p,s);}
cite(o,p,s){return this.p("cite",o,p,s);}
className(o,p,s){return this.p("className",o,p,s);}
code(o,p,s){return this.p("code",o,p,s);}
codebase(o,p,s){return this.p("codebase",o,p,s);}
color(o,p,s){return this.p("color",o,p,s);}
cols(o,p,s){return this.p("cols",o,p,s);}
colspan(o,p,s){return this.p("colspan",o,p,s);}
content(o,p,s){return this.p("content",o,p,s);}
contenteditable(o,p,s){return this.p("contenteditable",o,p,s);}
contextmenu(o,p,s){return this.p("contextmenu",o,p,s);}
controls(o,p,s){return this.p("controls",o,p,s);}
coords(o,p,s){return this.p("coords",o,p,s);}
crossorigin(o,p,s){return this.p("crossorigin",o,p,s);}
data(o,p,s){return this.p("data",o,p,s);}
datetime(o,p,s){return this.p("datetime",o,p,s);}
default(o,p,s){return this.p("default",o,p,s);}
defer(o,p,s){return this.p("defer",o,p,s);}
dir(o,p,s){return this.p("dir",o,p,s);}
dirname(o,p,s){return this.p("dirname",o,p,s);}
disabled(o,p,s){return this.p("disabled",o,p,s);}
download(o,p,s){return this.p("download",o,p,s);}
draggable(o,p,s){return this.p("draggable",o,p,s);}
dropzone(o,p,s){return this.p("dropzone",o,p,s);}
enctype(o,p,s){return this.p("enctype",o,p,s);}
for(o,p,s){return this.p("for",o,p,s);}
form(o,p,s){return this.p("form",o,p,s);}
formaction(o,p,s){return this.p("formaction",o,p,s);}
headers(o,p,s){return this.p("headers",o,p,s);}
height(o,p,s){return this.p("height",o,p,s);}
hidden(o,p,s){return this.p("hidden",o,p,s);}
high(o,p,s){return this.p("high",o,p,s);}
href(o,p,s){return this.p("href",o,p,s);}
hreflang(o,p,s){return this.p("hreflang",o,p,s);}
html(o,p,s){return this.p("innerHTML",o,p,s);}
httpEquiv(o,p,s){return this.p("http-equiv",o,p,s);}
icon(o,p,s){return this.p("icon",o,p,s);}
id(o,p,s){return this.p("id",o,p,s);}
integrity(o,p,s){return this.p("integrity",o,p,s);}
ismap(o,p,s){return this.p("ismap",o,p,s);}
itemprop(o,p,s){return this.p("itemprop",o,p,s);}
keytype(o,p,s){return this.p("keytype",o,p,s);}
kind(o,p,s){return this.p("kind",o,p,s);}
label(o,p,s){return this.p("label",o,p,s);}
lang(o,p,s){return this.p("lang",o,p,s);}
language(o,p,s){return this.p("language",o,p,s);}
list(o,p,s){return this.p("list",o,p,s);}
loop(o,p,s){return this.p("loop",o,p,s);}
low(o,p,s){return this.p("low",o,p,s);}
manifest(o,p,s){return this.p("manifest",o,p,s);}
max(o,p,s){return this.p("max",o,p,s);}
maxlength(o,p,s){return this.p("maxlength",o,p,s);}
minlength(o,p,s){return this.p("minlength",o,p,s);}
media(o,p,s){return this.p("media",o,p,s);}
method(o,p,s){return this.p("method",o,p,s);}
min(o,p,s){return this.p("min",o,p,s);}
multiple(o,p,s){return this.p("multiple",o,p,s);}
muted(o,p,s){return this.p("muted",o,p,s);}
name(o,p,s){return this.p("name",o,p,s);}
novalidate(o,p,s){return this.p("novalidate",o,p,s);}
open(o,p,s){return this.p("open",o,p,s);}
optimum(o,p,s){return this.p("optimum",o,p,s);}
pattern(o,p,s){return this.p("pattern",o,p,s);}
ping(o,p,s){return this.p("ping",o,p,s);}
placeholder(o,p,s){return this.p("placeholder",o,p,s);}
poster(o,p,s){return this.p("poster",o,p,s);}
preload(o,p,s){return this.p("preload",o,p,s);}
radiogroup(o,p,s){return this.p("radiogroup",o,p,s);}
readonly(o,p,s){return this.p("readonly",o,p,s);}
rel(o,p,s){return this.p("rel",o,p,s);}
required(o,p,s){return this.p("required",o,p,s);}
reversed(o,p,s){return this.p("reversed",o,p,s);}
rows(o,p,s){return this.p("rows",o,p,s);}
rowspan(o,p,s){return this.p("rowspan",o,p,s);}
sandbox(o,p,s){return this.p("sandbox",o,p,s);}
scope(o,p,s){return this.p("scope",o,p,s);}
scoped(o,p,s){return this.p("scoped",o,p,s);}
seamless(o,p,s){return this.p("seamless",o,p,s);}
selected(o,p,s){return this.p("selected",o,p,s);}
shape(o,p,s){return this.p("shape",o,p,s);}
size(o,p,s){return this.p("size",o,p,s);}
sizes(o,p,s){return this.p("sizes",o,p,s);}
slot(o,p,s){return this.p("slot",o,p,s);}
span(o,p,s){return this.p("span",o,p,s);}
spellcheck(o,p,s){return this.p("spellcheck",o,p,s);}
src(o,p,s){return this.p("src",o,p,s);}
srcdoc(o,p,s){return this.p("srcdoc",o,p,s);}
srclang(o,p,s){return this.p("srclang",o,p,s);}
srcset(o,p,s){return this.p("srcset",o,p,s);}
start(o,p,s){return this.p("start",o,p,s);}
step(o,p,s){return this.p("step",o,p,s);}
summary(o,p,s){return this.p("summary",o,p,s);}
tabindex(o,p,s){return this.p("tabindex",o,p,s);}
target(o,p,s){return this.p("target",o,p,s);}
text(o,p,s){return this.p("textContent",o,p,s);}
t(o,p,s){return this.p("textContent",o,p,s);}
title(o,p,s){return this.p("title",o,p,s);}
type(o,p,s){return this.p("type",o,p,s);}
usemap(o,p,s){return this.p("usemap",o,p,s);}
value(o,p,s){return this.p("value",o,p,s);}
width(o,p,s){return this.p("width",o,p,s);}
wrap(o,p,s){return this.p("wrap",o,p,s);}
class(...classNames) {
if (classNames[0] === undefined)
return this.DOM.className;
else if (classNames[0] === "")
this.DOM.className = "";
else
for (let i = 0; i < classNames.length; i++) {
const item = classNames[i];
if (Array.isArray(item)) {
const type = typeof item[0];
if (type === "object")
U.bind (item[0], item[1]) (this, "switchClass");
else if (type === "string")
this.class (item); }
else {
const className = item.split(" ")
for (let j = 0; j < className.length; j++) {
if (className[j][0] === "-")
this.DOM.classList.remove(className[j].slice(1));
else if (className[j][0] === "~")
this.DOM.classList.toggle(className[j].slice(1));
else
this.DOM.classList.add(className[j]); }
}
}
return this;
}
c(...classNames) { return this.class(...classNames); }
switchClass (new_class, old_class) {
if (old_class !== undefined)
this.DOM.classList.remove (old_class);
this.DOM.classList.add (new_class); }
style (styles) {
if (typeof styles === "string")
return this.DOM.style[styles];
for (const key in styles) {
let prop = styles[key];
if (! Array.isArray (prop))
this.DOM.style[key] = prop;
else if (! Array.isArray (prop[0]) && typeof prop[0] === "object")
U.bind (prop[0], prop[1]) (this.DOM.style, key, prop[2]); }
return this; }
s (s) { return this.style (s); }
/// ---------- ///
/// EVENTS ///
watch (event, prevent = false) {
return (target, handler) => this._watchOn (target, handler, event, prevent); }
_watchOn (target, handler, event, prevent) {
let action;
if (handler === undefined) {
handler = target;
target = this; }
if (typeof handler == "function") {
action = (e) => {
handler.call (target, this, e);
if (prevent) e.preventDefault (); } }
else if (typeof target[handler] == "function")
action = (e) => {
target[handler] (this, e);
if (prevent) e.preventDefault (); }
else
action = (e) => {
target[handler] = this;
if (prevent) e.preventDefault (); }
this.DOM.addEventListener (event, action);
return this; }
event (events) {
for (const key in events) {
this.watch (key) (events[key]); }
return this; }
click (f) { return this.event({click:f}); }
focus () { this.DOM.focus(); return this; }
/*** BOOTSTRAP ADDON ***/
responsify( tag, col, offset, next ) {
if( col === 0 ) {
this.class( "d-" + tag + "none");
if( next && offset === undefined )
this.class( "d-" + next + "block"); }
else
this.class( "col-" + tag + col);
if( col && offset !== undefined )
this.class( "offset-" + tag + offset );
return this; }
xs(s, o) { return this.responsify( "", s, o, "sm-" );}
sm(s, o) { return this.responsify( "sm-", s, o, "md-" );}
md(s, o) { return this.responsify( "md-", s, o, "lg-" );}
lg(s, o) { return this.responsify( "lg-", s, o, "xl-" );}
xl(s, o) { return this.responsify( "xl-", s, o );}
}
})();
const OIf = (function () {
return class If {
constructor (source, ...items) {
this.view = [];
this.cond = [];
for( let i = 0; i < items.length; i++) {
const item = items[i];
if( Array.isArray( item ) ) {
this.view.push( item[1] instanceof O_Core ? item[1] : new O_Core( "span", item[1] ) );
this.cond.push( typeof item[0] === "function" ? item[0] : (v) => v == item[0] ); }
else {
this.view.push( item instanceof O_Core ? item : new O_Core( "span", item ) );
if( i !== items.length - 1 || i == 0 )
this.cond.push( (v) => v ); } }
console.log(this)
U.bind (source[0], source[1]) (this, "switch"); }
switch (v) {
let showElse = true;
for( let i = 0; i < this.view.length; i++) {
const cond = this.cond[i];
if( (cond && cond(v)) || (!cond && showElse) ) {
showElse = false;
this.view[i].c ("-d-none"); }
else
this.view[i].c ("d-none");
}
}
}
})();
const OMap = (function () {
return class OMap extends O_Core {
constructor (tag = "div", ...args) {
super (tag, ...args);
this.items = [];
this.last;
if (tag === "span")
this.style({
display:"inline-flex",
flexDirection: "row" });
else
this.style({
display:"flex",
flexDirection: "column" });
const config = {
target: [this, "items"],
setter : (v,i,d) => {
const o = this.f (v, i, d, this)
.style({order: [v,"index"]})
.appendTo (this);
if (i === d.length - 1)
this.last = o;
return o;
},
remover: (o,i) => {
o.close();
if (i > this.items.length-1)
this.last = this.items[this.items.length-1];
},
index : (o,i) => {
o.index = i;
if (i === this.items.length - 1)
this.last = o;
},
};
if (this.s[0][this.s[1]] instanceof U.BindableArray)
this.s[0][this.s[1]] .bind(config);
else
U.bindableArray(this.s) .bind(config); }
source (s) {
this.s = s;
return this; }
setter (f) {
this.f = f;
return this; }
direction (d) {
this.style ({flexDirection: d});
return this; } }
})();
const Input = (function () {
return class Input extends O_Core {
constructor( type = "text", value ) {
type !== "textarea" ?
super( 'input' , { prop : { type : type } } )
: super( 'textarea' );
if( type === "radio" || type === "checkbox" ) {
this.inputProp = "checked";
this.eventType = "change"; }
else {
this.inputProp = "value";
this.eventType = "input"; }
if( value )
this[ this.inputProp ]( value );
}
combo( target, prop, setter ) {
this.source( target, prop );
this.target( target, prop, setter );
return this; }
source( source, prop ) {
return this[ this.inputProp ]( source, prop ); }
target( target, prop, setter ) {
return this.watch( this.eventType )( ( o, e ) =>
target[ prop ] = setter ?
setter( e.target[ this.inputProp ], o, e )
: e.target[ this.inputProp ] ); }
}
})();
const O = (function () {
const O = O_Core;
return {
O : O,
OMap : OMap,
Input : Input,
OIf : OIf,
html : (...args) => new O ('html' , ...args),
head : (...args) => new O ('head' , ...args),
body : (...args) => new O ('body' , ...args),
link : (...args) => new O ('link' , ...args),
meta : (...args) => new O ('meta' , ...args),
script: (...args) => new O ('script' , ...args),
title: (...args) => new O ('title' , ...args),
style: (content, scoped = false) => new O ('style', { prop: { scoped: scoped, innerHTML: content } }),
header : (...args) => new O ('header' , ...args),
nav : (...args) => new O ('nav' , ...args),
footer : (...args) => new O ('footer' , ...args),
section: (...args) => new O ('section' , ...args),
article: (...args) => new O ('article' , ...args),
aside : (...args) => new O ('aside' , ...args),
div : (...args) => new O ('div' , ...args),
d : (...args) => new O ('div' , ...args),
span : (...args) => new O ('span', ...args),
s : (...args) => new O ('span', ...args),
svg : (...args) => new O ('svg'),
table: (...args) => new O ('table' , ...args),
thead: (...args) => new O ('thead' , ...args),
tbody: (...args) => new O ('tbody' , ...args),
tfoot: (...args) => new O ('tfoot' , ...args),
tr : (...args) => new O ('tr' , ...args),
th : (...args) => new O ('th' , ...args),
td : (...args) => new O ('td' , ...args),
li : (...args) => new O ('li', ...args),
ul : (...args) => new O ('ul', ...args),
ol : (...args) => new O ('ol', ...args),
dl : (...args) => new O ('dl', ...args),
dt : (...args) => new O ('dt', ...args),
dd : (...args) => new O ('dd', ...args),
$map : (tag, ...args) => new OMap (tag,...args),
$div : (...args) => new OMap ('div', ...args),
$span: (...args) => new OMap ('span', ...args),
$ul : (...args) => new OMap ('ul' , ...args),
$if : (...args) => new OIf (...args).view,
////////////////// INLINE //////////////////
text : (t,v,s) => new O('span') .html (s?[t,v,s]:v?[t,v]:t),
t : (t,v,s) => new O('span') .html (s?[t,v,s]:v?[t,v]:t),
abbr : (...args) => new O ('abbr', ...args),
blockquote:function (...args){return new O ('blockquote' , ...args); },
cite : (...args) => new O ('cite' , ...args),
q : (...args) => new O ('q' , ...args),
sup : (...args) => new O ('sup' , ...args),
sub : (...args) => new O ('sub' , ...args),
strong: (...args) => new O ('strong' , ...args),
b : (...args) => new O ('b' , ...args),
i : (...args) => new O ('i' , ...args),
em : (...args) => new O ('em' , ...args),
mark : (...args) => new O ('mark' , ...args),
h1 : (...args) => new O ('h1' , ...args),
h2 : (...args) => new O ('h2' , ...args),
h3 : (...args) => new O ('h3' , ...args),
h4 : (...args) => new O ('h4' , ...args),
h5 : (...args) => new O ('h5' , ...args),
h6 : (...args) => new O ('h6' , ...args),
img : (...args) => new O ('img' , ...args),
figure: (...args) => new O ('figure' , ...args),
figcaption : function (...args){return new O ('figcaption' , ...args); },
audio : (...args) => new O ('audio' , ...args),
video : (...args) => new O ('video' , ...args),
source: (...args) => new O ('source' , ...args),
audio : (...args) => new O ('audio' , ...args),
video : (...args) => new O ('video' , ...args),
a : (...args) => new O ('a' , ...args),
br : (...args) => new O ('br' , ...args),
p : (...args) => new O ('p' , ...args),
hr : (...args) => new O ('hr' , ...args),
address: (...args) => new O ('address' , ...args),
del : (...args) => new O ('del' , ...args),
ins : (...args) => new O ('ins' , ...args),
dfn : (...args) => new O ('dfn' , ...args),
kbd : (...args) => new O ('kbd' , ...args),
pre : (...args) => new O ('pre' , ...args),
progress:function (...args) { return new O ('progress' , ...args); },
time : (...args) => new O ('time' , ...args),
////////////////// FROM //////////////////
form : (...args) => new O ('form' , ...args),
button : (...args) => new O ('button', ...args),
fieldset : (...args) => new O ('fieldset' , ...args),
field : (...legend) => (...args) => new O ('fieldset' , new O ("legend", ...legend), ...args),
legend : (...args) => new O ('legend' , ...args),
label : (...args) => new O ('label' , ...args),
select : (...args) => new O ('select' , ...args),
option : (...args) => new O ('option' , ...args),
optgroup : (...args) => new O ('optgroup' , ...args),
input : {
button : (...args) => new Input ('button', ...args),
checkbox: (...args) => new Input ('checkbox', ...args),
color : (...args) => new Input ('color' , ...args),
date : (...args) => new Input ('date' , ...args),
datetime: (...args) => new Input ('datetime-local', ...args),
email : (...args) => new Input ('email' , ...args),
file : (...args) => new Input ('file' , ...args),
hidden : (...args) => new Input ('hidden' , ...args),
image : (...args) => new Input ('image' , ...args),
month : (...args) => new Input ('month' , ...args),
number : (...args) => new Input ('number' , ...args),
password: (...args) => new Input ('password', ...args),
radio : (...args) => new Input ('radio' , ...args),
range : (...args) => new Input ('range' , ...args),
reset : (...args) => new Input ('reset' , ...args),
search : (...args) => new Input ('search', ...args),
submit : (...args) => new Input ('submit', ...args),
tel : (...args) => new Input ('tel' , ...args),
text : (...args) => new Input ('text' , ...args),
textarea: (...args) => new Input ('textarea', ...args),
time : (...args) => new Input ('time' , ...args),
url : (...args) => new Input ('url' , ...args),
week : (...args) => new Input ('week' , ...args)
}
};
})();
const F = (function () {
document.head.appendChild(
O.style(`
.flex { display: flex;}
.flex-r { flex-direction: row;}
.flex-c { flex-direction: column;}
.flex-r-r { flex-direction: row-reverse;}
.flex-c-r { flex-direction: column-reverse;}
.flex-w { flex-wrap: wrap;}
.flex-w-r { flex-wrap: wrap-reverse;}
.flex-ai-s { align-items: flex-start;}
.flex-ai-e { align-items: flex-end;}
.flex-ai-c { align-items: center;}
.flex-ai-b { align-items: baseline;}
.flex-ai-st{ align-items: stretch;}
.flex-jc-s { justify-content: flex-start;}
.flex-jc-e { justify-content: flex-end;}
.flex-jc-c { justify-content: center;}
.flex-jc-sb{ justify-content: space-between;}
.flex-jc-sa{ justify-content: space-around;}
.flex-ac-s { align-content: flex-start;}
.flex-ac-e { align-content: flex-end;}
.flex-ac-c { align-content: center;}
.flex-ac-sb{ align-content: space-between;}
.flex-ac-sa{ align-content: space-around;}
.flex-ac-st{ align-content: stretch;}
`).DOM )
const AUTO = -0.1,
START = -0.2,
END = -0.3,
CENTER = -0.4,
BASELINE = -0.5,
STRETCH = -0.6,
ALIGN_SELF = ["", "auto", "flex-start", "flex-end", "center", "baseline", "stretch"];
//F.f(item, [0, 1, 100], "auto")
function f (item, flex, alignSelf) {
const style = {};
let flexStyle = "";
if( !flex & !alignSelf)
flexStyle = 1;
else if (Array.isArray(flex)) {
flexStyle += flex[0];
if (flex[1])
flexStyle += " " + flex[1];
if (flex[2])
flexStyle += " " + flex[2] + flex[3] ? flex[3] : "%";
if (flex[3])
flexStyle += flex[3];
else
flexStyle += "%";}
else
flexStyle = flex;
style.flex = flexStyle
if (alignSelf)
style.alignSelf = alignSelf;
item.style(style);
return item; }
class Flex extends O.O {
constructor( ...args ) {
super ("div", ...args) .c ("flex"); }
flex( ...classNames ) {
if( classNames[0] === undefined ) {
return this.DOM.className; }
while( Array.isArray(classNames[0] ) ) {
classNames = classNames[0]; }
if( classNames[0] === "" )
this.DOM.className = "";
else
for( let i = 0; i < classNames.length; i++ ) {
if( classNames[i] ) {
const className = classNames[i].split(" ")
for( let j = 0; j < className.length; j++ ) {
if( className[j][0] === "-" )
this.DOM.classList.remove( "flex-" + className[j].slice(1) );
else if( className[j][0] === "~" )
this.DOM.classList.toggle( "flex-" + className[j].slice(1) );
else
this.DOM.classList.add( "flex-" + className[j] ); } } }
return this; }
f( ...args ) { return this.flex( args ); }}
const
r = (...args) => new Flex( ...args ) .f("r"),
c = (...args) => new Flex( ...args ) .f("c"),
rr = (...args) => new Flex( ...args ) .f("r-r"),
cr = (...args) => new Flex( ...args ) .f("c-r");
return {
f: f,
row: r,
col: c,
r: (...args) => r(...args) .f("ai-st"),
c: (...args) => c(...args) .f("ai-st"),
rw: (...args) => r(...args) .f("ai-st w"),
cw: (...args) => c(...args) .f("ai-st w")
};})();
const B = (function() {
const I = O.input;
class Modal extends O.O {
constructor( ...v ) {
super();
this.c( "modal" );
this.content = O.div(...v) .c("modal-content modal-dialog");
this.click( (a,b) => { if(a.DOM == b.target) this.hide() } );
this.set( this.content );
}
show() { this.DOM.style.display = "block"; }
hide() { this.DOM.style.display = "none" ; }
toggle(){this.DOM.style.display == "block" ? this.hide() : this.show(); } }
const modal = {
modal : (...v) => new Modal(),
header : (...v) => O.div( ...v ) .c( "modal-header" ),
title : (...v) => O.h6(...v) .class("modal-title"),
close : ( modal ) => O.span() .html("×") .c("close") .click( () => modal.hide() ),
body : (...v) => O.div( ...v ) .c( "modal-body" ),
footer : (...v) => O.div( ...v ) .c( "modal-footer" ) };
const card = {
card : (...v) => O.div( v ) .c( "card" ),
header : (...v) => O.div( v ) .c( "card-header"),
title : (...v) => O.h4 ( v ) .c( "card-title" ),
subtitle:(...v) => O.div( v ) .c( "card-subtitle" ),
text : (...v) => O.div( v ) .c( "card-text" ),
link : (...v) => O.div( v ) .c( "card-link" ),
block : (...v) => O.div( v ) .c( "card-block" ),
body : (...v) => O.div( v ) .c( "card-block" ),
footer : (...v) => O.div( v ) .c( "card-footer") };
return {
modal : modal,
card : card,
container: ( ...v ) => O.div(...v) .c("container"),
row : ( ...v ) => O.div(...v) .c("row"),
r : ( ...v ) => O.div(...v) .c("row"),
dl : ( ...v ) => O.dl( ...v ) .c("row"),
dt : ( ...v ) => O.div( ...v ),
dd : ( ...v ) => O.div( ...v ),
button :( ...v ) => O.button( ...v ) .c("btn" ),
btn :( ...v ) => O.button( ...v ) .c("btn" ),
textarea :( t, v ) => O.textarea( t, v ) .c("form-control" ),
input: {
button :( ...v ) => I.button( ...v ) .c("form-control" ),
checkbox:( ...v ) => I.checkbox( ...v ) .c("form-control" ),
color :( ...v ) => I.color( ...v ) .c("form-control" ),
date :( ...v ) => I.date( ...v ) .c("form-control" ),
datetime:( ...v ) => I.datetime( ...v ) .c("form-control" ),
email :( ...v ) => I.email( ...v ) .c("form-control" ),
file :( ...v ) => I.file( ...v ) .c("form-control" ),
hidden :( ...v ) => I.hidden( ...v ) .c("form-control" ),
image :( ...v ) => I.image( ...v ) .c("form-control" ),
month :( ...v ) => I.month( ...v ) .c("form-control" ),
number :( ...v ) => I.number( ...v ) .c("form-control" ),
password:( ...v ) => I.password( ...v ) .c("form-control" ),
radio :( ...v ) => I.radio( ...v ) .c("form-control" ),
range :( ...v ) => I.range( ...v ) .c("form-control" ),
reset :( ...v ) => I.reset( ...v ) .c("form-control" ),
search :( ...v ) => I.search( ...v ) .c("form-control" ),
submit :( ...v ) => I.submit( ...v ) .c("form-control" ),
tel :( ...v ) => I.tel( ...v ) .c("form-control" ),
text :( ...v ) => I.text( ...v ) .c("form-control" ),
time :( ...v ) => I.time( ...v ) .c("form-control" ),
url :( ...v ) => I.url( ...v ) .c("form-control" ),
week :( ...v ) => I.week( ...v ) .c("form-control" ),
group:( ...v ) => O.div(...v) .c("row") .c("input-group" ) .style({margin: "0px" , padding: "0px" }),
addon:( ...v ) => O.div(...v ) .c( "input-group-addon" )
}
};
})();
!
