JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
#test.container
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" )
}
};
})();
Also see: Tab Triggers