@litejs/ui 25.5.0 → 25.10.0

package/ui.js

@@ -1,7 +1,7 @@
 
 /* litejs.com/MIT-LICENSE.txt */
 
-/* global escape, navigator, xhr, addEventListener */
+/* global escape, navigator, xhr */
 
 /*** debug ***/
 console.log("LiteJS is in debug mode, but it's fine for production")
@@ -11,7 +11,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	window.El = El
 	asEmitter(window.LiteJS = LiteJS)
 
-	var UNDEF, parser, pushBase, styleNode, canCapture
+	var UNDEF, parser, pushBase, styleNode
 	, NUL = null
 	// THIS will be undefined in strict mode and window in sloppy mode
 	, THIS = this
@@ -30,43 +30,121 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	, elReplace = Function("a,b,c", "a&&b&&(c=a.parentNode)&&c.replaceChild(b,a)")
 	, elRm = Function("a,b", "a&&(b=a.parentNode)&&b.removeChild(a)")
 	, getAttr = Function("a,b", "return a&&a.getAttribute&&a.getAttribute(b)")
-	, replace = Function("a,b,c", "return a.replace(b,c)")
+	, replace = Function("a,b,c", "return c.replace(a,b)")
+	, toCamel = replace.bind(NUL, /\-([a-z])/g, Function("a,b", "return b.toUpperCase()"))
 
+	/*** ie9 ***/
 	// JScript engine in IE8 and below does not recognize vertical tabulation character `\v`.
 	// http://webreflection.blogspot.com/2009/01/32-bytes-to-know-if-your-browser-is-ie.html
 	, ie678 = !+"\v1" // jshint ignore:line
+	// innerText is implemented in IE4, textContent in IE9, Node.text in Opera 9-10
+	// Safari 2.x innerText results an empty string when style.display=="none" or Node is not in DOM
+	, txtAttr = "textContent" in html ? "textContent" : "innerText"
+	, elTxt = function(el, txt) {
+		if (el[txtAttr] !== txt) el[txtAttr] = txt
+	}
+	/*/
+	, elTxt = function(el, txt) {
+		if (el.textContent !== txt) el.textContent = txt
+	}
+	/**/
 
 	, elSeq = 0
 	, elCache = {}
 	, renderRe = /[;\s]*([-.\w$]+)(?:(!?)[ :]*((?:(["'\/])(?:\\.|[^\\])*?\4|[^;])*))?/g
 	, selectorRe = /([.#:[])([-\w]+)(?:([~^$*|]?)=(("|')(?:\\.|[^\\])*?\5|[-\w]+))?]?/g
 	, fnCache = {}
-	, fnRe = /('|")(?:\\.|[^\\])*?\1|\/(?:\\.|[^\\])+?\/[gim]*|\$el\b|\$[aos]\b|\b(?:false|in|if|new|null|this|true|typeof|void|function|var|else|return)\b|\.\w+|\w+:/g
+	, fnRe = /('|")(?:\\.|[^\\])*?\1|\/(?:\\.|[^\\])+?\/[gim]*|\$el\b|\$[aorsS]\b|\b(?:false|in|if|new|null|this|true|typeof|void|function|var|else|return)\b|\.\w+|\w+:/g
 	, wordRe = /[a-z_$][\w$]*/ig
-	, camelRe = /\-([a-z])/g
-	// innerText is implemented in IE4, textContent in IE9, Node.text in Opera 9-10
-	// Safari 2.x innerText results an empty string when style.display=="none" or Node is not in DOM
-	, txtAttr = "textContent" in html ? "textContent" /* c8 ignore next */ : "innerText"
-	, bindingsCss = acceptMany(function(el, key, val) {
-		el.style[replace(key, camelRe, camelFn)] = val
-	})
-	, bindingsOn = acceptMany(addEvent, function(el, val, selector, data) {
-		return isStr(val) ? function(e) {
-			var target = selector ? closest(e.target, selector) : el
-			if (target) emit.apply(target, [elScope(el).$ui, val, e, target].concat(data))
-		} :
-		selector ? function(e, touchEv, touchEl) {
-			if (matches(touchEl = e.target, selector)) val(e, touchEv, touchEl, data)
-		} :
-		val
+	, bindingsCss = acceptMany(function(el, key, val, current) {
+		current = el.style[key = toCamel(key)]
+		el.style[key] = val
+		return current
 	})
+	, bindingsOn = acceptMany(addEvent, 1)
 	, bindings = {
 		cls: acceptMany(cls),
 		css: bindingsCss,
 		on: bindingsOn,
+		one: acceptMany(function(el, ev, fn) {
+			addEvent(el, ev, function remove() {
+				rmEvent(el, ev, remove)
+				fn.apply(el, arguments)
+			})
+		}, 1),
 		set: acceptMany(setAttr),
 		txt: elTxt,
-		val: elVal,
+		/*** form ***/
+		val: function elVal(el, val, input) {
+			try {
+				if (!el || !input && document.activeElement === el) return
+			} catch (e) {}
+			var step, key, value
+			, i = 0
+			, type = el.type
+			, opts = el.options
+			, checkbox = type === "checkbox" || type === "radio"
+
+			if (el.tagName === "FORM") {
+				// Disabled controls do not receive focus,
+				// are skipped in tabbing navigation, cannot be successfully posted.
+				//
+				// Read-only elements receive focus but cannot be modified by the user,
+				// are included in tabbing navigation, are successfully posted.
+				//
+				// Read-only checkboxes can be changed by the user
+
+				for (opts = {}; (input = el.elements[i++]); ) if (!input.disabled && (key = input.name || input.id)) {
+					value = elVal(input, val != UNDEF ? val[key] : UNDEF)
+					if (value !== UNDEF) {
+						step = opts
+						replace(/\[(.*?)\]/g, replacer, key)
+						step[key || step.length] = value
+					}
+				}
+				return opts
+			}
+
+			if (val !== UNDEF) {
+				if (opts) {
+					for (value = (isArr(val) ? val : [ val ]).map(String); (input = opts[i++]); ) {
+						input.selected = value.indexOf(input.value) > -1
+					}
+				} else if (el.val) {
+					el.val(val)
+				} else if (checkbox) {
+					el.checked = !!val
+				} else {
+					el.value = val
+				}
+				return
+			}
+
+			if (opts) {
+				if (type === "select-multiple") {
+					for (val = []; (input = opts[i++]); ) {
+						if (input.selected && !input.disabled) {
+							val.push(input.valObject || input.value)
+						}
+					}
+					return val
+				}
+				// IE8 throws error when accessing to options[-1]
+				value = el.selectedIndex
+				el = value > -1 && opts[value] || el
+			}
+
+			return checkbox && !el.checked ?
+			(type === "radio" ? UNDEF : NUL) :
+			el.valObject !== UNDEF ? el.valObject : el.value
+
+			function replacer(_, _key, offset) {
+				if (step == opts) key = key.slice(0, offset)
+				step = step[key] || (step[key] = step[key] === NUL || _key && +_key != _key ? {} : [])
+				key = _key
+			}
+		}
+		/**/
 	}
 	, bindOnce = []
 	, globalScope = {
@@ -119,27 +197,27 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			(tag == "a" ? " href=\"" + (link || text) + "\"" : op == "@" ? " datetime=\"" + name + "\"" : "") +
 			(attr ? " class=\"" + attr.slice(1) + "\">" : ">") +
 			(
-				op === ">" ? doc(replace(text, /^> ?/gm, "")) :
+				op === ">" ? doc(replace(/^> ?/gm, "", text)) :
 				tag == "ul" ? "<li>" + text.split(/\n - (?=\S)/).map(inline).join("</li>\n<li>") + "</li>" :
-				inline(tag == "a" ? replace(name, /^\w+:\/{0,2}/, "") : text)
+				inline(tag == "a" ? replace(/^\w+:\/{0,2}/, "", name) : text)
 			) +
 			"</" + tag + ">" :
-		replace(tag, /\[([-!*+,/:;@^_`~])((.+?)(?: (\S+?))?)\1(\.[.\w]+)?]/g, inline)
+		replace(/\[([-!*+,/:;@^_`~])((.+?)(?: (\S+?))?)\1(\.[.\w]+)?]/g, inline, tag)
 	}
 	function block(tag, op, text, media, alt) {
 		return op && !isArr(text) ? inline(tag, op, text) :
 		media ? "<img src=\"" + media + "\" alt=\"" + alt + "\">" :
-		blockRe.test(tag) ? replace(tag, blockRe, block) :
+		blockRe.test(tag) ? replace(blockRe, block, tag) :
 		tag === "---" ? "<hr>" : "<p>" + inline(tag) + "</p>"
 	}
 	function doc(txt) {
-		return replace(txt.trim(), /^ \b/gm, "<br>").split(/\n\n+/).map(block).join("\n")
+		return replace(/^ \b/gm, "<br>", txt.trim()).split(/\n\n+/).map(block).join("\n")
 	}
 	bindings.t = function(el, text) {
-		el.innerHTML = inline(replace(text, /</g, "&lt;"))
+		el.innerHTML = inline(replace(/</g, "&lt;", text))
 	}
 	bindings.d = function(el, text) {
-		el.innerHTML = doc(replace(text, /</g, "&lt;"))
+		el.innerHTML = doc(replace(/</g, "&lt;", text))
 	}
 	/**/
 
@@ -172,12 +250,19 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				return fn(this, a, b, c, d, e)
 			}
 		}
+		function one(type, fn, scope) {
+			var emitter = this
+			on(emitter, type, function remove() {
+				off.call(emitter, type, remove, scope)
+				fn.apply(scope, arguments)
+			}, scope)
+			return emitter
+		}
 	}
 
 	function on(emitter, type, fn, scope, _origin) {
 		if (emitter && type && fn) {
 			if (emitter === window) emitter = emptyArr
-			emit(emitter, "newListener", type, fn, scope, _origin)
 			var events = emitter._e || (emitter._e = create(NUL))
 			;(events[type] || (events[type] = [])).unshift(scope, _origin, fn)
 		}
@@ -185,14 +270,13 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	}
 
 	function off(type, fn, scope) {
-		var i, args
+		var i
 		, emitter = this === window ? emptyArr : this
 		, events = emitter._e && emitter._e[type]
 		if (events) {
 			for (i = events.length - 2; i > 0; i -= 3) {
 				if ((events[i + 1] === fn || events[i] === fn) && events[i - 1] == scope) {
-					args = events.splice(i - 1, 3)
-					emit(emitter, "removeListener", type, args[2], args[0], args[1])
+					events.splice(i - 1, 3)
 					if (fn) break
 				}
 			}
@@ -200,18 +284,6 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		return this
 	}
 
-	function one(type, fn, scope) {
-		var emitter = this === window ? emptyArr : this
-
-		function remove() {
-			off.call(emitter, type, fn, scope)
-			off.call(emitter, type, remove, scope)
-		}
-		on(emitter, type, remove, scope)
-		on(emitter, type, fn, scope)
-		return this
-	}
-
 	function emit(emitter, type) {
 		if (emitter === window) emitter = emptyArr
 		var args, i
@@ -225,10 +297,6 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		return _e / 3
 	}
 
-	try {
-		addEventListener("t", NUL, { get capture() { canCapture = 1 }})
-	} catch(e){}
-
 	function addEvent(el, ev, fn, opts) {
 		var fn2 = fixFn[ev] && fixFn[ev](el, fn, ev) || fn
 		, ev2 = fixEv[ev] || ev
@@ -237,15 +305,13 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			// polyfilled addEventListener returns patched function
 			// useCapture defaults to false
 			// Chrome56 touchstart/move sets {passive:true} by default; use {passive:false} to enable preventDefault()
-			fn2 = html.addEventListener.call(
-				el, ev2, fn2, !canCapture && isObj(opts) ? !!opts.capture : opts || false
-			) || fn2
+			fn2 = html.addEventListener.call(el, ev2, fn2, opts) || fn2
 		}
 
 		on(el, ev, fn2, el, fn)
 	}
 
-	function rmEvent(el, ev, fn) {
+	function rmEvent(el, ev, fn, opts) {
 		var evs = el._e && el._e[ev]
 		, id = evs && evs.indexOf(fn)
 		, ev2 = fixEv[ev] || ev
@@ -254,7 +320,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				evs[id + 1]._rm()
 			}
 			if (ev2 !== "" && "on" + ev2 in el) {
-				html.removeEventListener.call(el, ev2, evs[id + 1])
+				html.removeEventListener.call(el, ev2, evs[id + 1], opts)
 			}
 			evs.splice(id - 1, 3)
 		}
@@ -271,11 +337,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	function LiteJS(opts) {
 		opts = assign({
 			/*** breakpoints ***/
-			breakpoints: {
-				sm: 0,
-				md: 601,
-				lg: 1025
-			},
+			breakpoints: "sm,601=md,1025=lg",
 			/**/
 			home: "home",
 			root: body
@@ -298,11 +360,11 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 
 			if (route.charAt(0) !== "#") {
 				fnStr += "m[" + (view.s = routeSeq++) + "]?("
-				reStr += "|(" + replace(route, routeRe, function(_, expr) {
+				reStr += "|(" + replace(routeRe, function(_, expr) {
 					return expr ?
 						(fnStr += "p['" + expr + "']=m[" + (routeSeq++) + "],") && "([^/]+?)" :
-						replace(_, reEsc, "\\$&")
-				}) + ")"
+						replace(reEsc, "\\$&", _)
+				}, route) + ")"
 				fnStr += "'" + route + "'):"
 				viewFn = 0
 			}
@@ -315,11 +377,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				params._p = 1 + (params._p | 0) // pending
 				return function() {
 					if (--params._p || lastParams !== params || syncResume) return
-					if (params._d) {
-						bubbleDown(params)
-					} else if (params._v) {
-						viewPing(lastView, params)
-					}
+					bubbleUp(params)
 				}
 			}
 		})
@@ -365,6 +423,42 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			}
 		})
 
+		function bubbleUp(params) {
+			var parent
+			, view = lastView
+			, tmp = params._v || view // Continue bubbleUp from _v
+			params._c = view.o ? view : params._c
+			for (View.route = view.r; tmp; tmp = parent) {
+				viewEmit(syncResume = params._v = tmp, "ping", params, View)
+				syncResume = UNDEF
+				if (lastParams !== params) return
+				if ((parent = tmp.p)) {
+					if (parent.c && parent.c !== tmp) {
+						params._c = parent.c
+					}
+					parent.c = tmp
+				}
+				if (tmp.f) {
+					return xhr.load(
+						replace(/^|,/g, "$&" + (View.path || ""), tmp.f).split(","),
+						bind(readTemplates, view, view.wait(tmp.f = ""))
+					)
+				} else if (!tmp.e) {
+					if (tmp.r === "404") {
+						viewParse("%view 404 #\nh2 Not found")
+					}
+					return viewShow("404")
+				}
+			}
+
+			for (tmp in params) {
+				if (tmp.charAt(0) !== "_" && (syncResume = hasOwn(paramCb, tmp) && paramCb[tmp] || paramCb["*"])) {
+					syncResume(params[tmp], tmp, view, params)
+					syncResume = UNDEF
+				}
+			}
+			bubbleDown(params)
+		}
 		function bubbleDown(params) {
 			var view = params._v
 			, close = params._c
@@ -383,27 +477,30 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				/**/
 				params._c = UNDEF
 			}
-			if ((params._d = params._v = view.c)) {
+			if ((params._v = view.c)) {
 				bubbleDown(params)
 			}
 			if ((lastView === view)) {
-				viewEmit(view, "show", params)
+				for (; view; view = view.p) {
+					viewEmit(view, "pong", params, View)
+				}
+				viewEmit(lastView, "show", params)
 				blur()
 			}
-		}
-
-		function viewClose(view, open) {
-			if (view && view.o) {
-				viewEmit(view.p, "closeChild", view, open)
-				viewClose(view.c)
-				elKill(view.o)
-				view.o = UNDEF
-				/*** kb ***/
-				rmKb(view.kb)
-				/**/
-				viewEmit(view, "close")
+			function viewClose(view, open) {
+				if (view && view.o) {
+					viewEmit(view.p, "closeChild", view, open)
+					viewClose(view.c)
+					elKill(view.o)
+					view.o = UNDEF
+					/*** kb ***/
+					rmKb(view.kb)
+					/**/
+					viewEmit(view, "close")
+				}
 			}
 		}
+
 		function viewDef(str) {
 			for (var match, re = /(\S+) (\S+)/g; (match = re.exec(str)); ) {
 				each(match[1], def)
@@ -437,24 +534,37 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			return View(url ? viewFn(url, params || {}, "404") : View.home)
 		}
 		function viewParse(str) {
+			if (!str) return
 			var parent = El("div")
 			, stack = [-1]
 			, parentStack = []
-			, templateRe = /([ \t]*)(%?)((?:("|')(?:\\.|[^\\])*?\4|[-\w:.#[\]~^$*|]=?)*) ?([\/>=@^;]|)(([\])}]?).*?([[({]?))(?=\x1f|$)/gm
+			, templateRe = /([ \t]*)(%?)((?:("|')(?:\\.|[^\\])*?\4|[-#:.\w[\]](?:[~^$*|]?=)?)*) ?([\/>=@^;]|)(([\])}]?).*?([[({]?))(?=\x1f|$)/gm
+			replace(templateRe, work, str)
+			work("", "")
+			if (parent.childNodes[0]) {
+				append(root, parent.childNodes)
+				render(root)
+				/*** debug ***/
+				console.log("Outside view defined elements are rendered immediately into UI")
+				/**/
+			}
+			if (parent.i) {
+				histStart(viewShow)
+			}
 
 			function work(all, indent, plugin, sel, q, op, text, mapEnd, mapStart, offset) {
 				if (offset && all === indent) return
 
 				for (q = indent.length; q <= stack[0]; ) {
-					if (parent.p) {
-						if (parent.p.c && !parent.p.e.childNodes[0]) break
-						parent.p.d(parent.p)
+					if ((offset = parent.p)) {
+						if (offset.c && !offset.e.childNodes[0]) break
+						offset.d(offset)
 					}
 					parent = parentStack.pop()
 					stack.shift()
 				}
 				if (op === "@") {
-					text = replace(text, /([\w,.]+):?/, "on!'$1',")
+					text = replace(/([\w,.]+)[!:]?/, /^\w+!/.test(text) ? "one!'$1'," : "on!'$1',", text)
 				}
 				if (parent.r) {
 					parent.t += "\n" + all
@@ -476,7 +586,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 					}
 					if (text && op != "/") {
 						if (op === ">") {
-							replace(indent + " " + text, templateRe, work)
+							replace(templateRe, work, indent + " " + text)
 						} else if (op === "=") {
 							append(parent, text) // + "\n")
 						} else {
@@ -488,56 +598,6 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 					}
 				}
 			}
-			replace(str, templateRe, work)
-			work("", "")
-			if (parent.childNodes[0]) {
-				append(root, parent.childNodes)
-				render(root)
-				/*** debug ***/
-				console.log("Outside view defined elements are rendered immediately into UI")
-				/**/
-			}
-			if (parent.i) {
-				histStart(viewShow)
-			}
-		}
-		function viewPing(view, params) {
-			var parent
-			, tmp = params._v || view // Continue bubbleUp from _v
-			lastParams = params
-			lastView = view
-			params._c = view.o ? view : params._c
-			for (View.route = view.r; tmp; tmp = parent) {
-				viewEmit(syncResume = params._v = tmp, "ping", params, View)
-				syncResume = UNDEF
-				if (lastParams !== params) return
-				if ((parent = tmp.p)) {
-					if (parent.c && parent.c !== tmp) {
-						params._c = parent.c
-					}
-					parent.c = tmp
-				}
-				if (tmp.f) {
-					return xhr.load(
-						replace(tmp.f, /^|,/g, "$&" + (View.path || "")).split(","),
-						bind(readTemplates, view, view.wait(tmp.f = ""))
-					)
-				} else if (!tmp.e) {
-					if (tmp.r === "404") {
-						viewParse("%view 404 #\nh2 Not found")
-					}
-					return viewShow("404")
-				}
-			}
-
-			for (tmp in params) {
-				if (tmp.charAt(0) !== "_" && (syncResume = hasOwn(paramCb, tmp) && paramCb[tmp] || paramCb["*"])) {
-					syncResume(params[tmp], tmp, view, params)
-					syncResume = UNDEF
-				}
-			}
-			viewEmit(view, "nav")
-			bubbleDown(params)
 		}
 		function viewShow(url) {
 			if (url === true) {
@@ -549,11 +609,12 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			, view = viewGet(url, params)
 			if (!view.o || lastUrl !== url) {
 				$d.url = lastUrl = expand(url)
-				viewPing(view, params)
+				viewEmit(lastView = view, "nav", lastParams = params)
+				bubbleUp(params)
 			}
 		}
 
-		function addPlugin(name, proto) {
+		function addPlugin(name, proto, expectContent) {
 			plugins[name] = Plugin
 			function Plugin(parent, op, sep) {
 				var plugin = this
@@ -567,15 +628,14 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 					plugin.o = op
 					plugin.s = sep
 				} else {
-					if (plugin.c) {
+					if (expectContent) {
 						elCache = create(plugin.c = elCache)
 					}
 					plugin.e = El(name === "svg" ? name : "div")
 					plugin.e.p = plugin
 				}
 			}
-			if (proto.r) proto.d = Function("p", "p.r(p.o+p.t)")
-			assign(Plugin.prototype, proto)
+			assign(Plugin.prototype, isFn(proto) ? { d: Function("p", "p.r(p.o+p.t)"), r: proto } : proto)
 		}
 		function usePluginContent(plugin) {
 			var el = plugin.e
@@ -609,69 +669,44 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				parent._cp = parent.childNodes.length - 1
 			}
 		})
-		addPlugin("css",  { r: injectCss })
-		addPlugin("def",  { r: viewDef })
-		addPlugin("js",   { r: viewEval })
-		addPlugin("each", {
-			r: function() {
-				var txt = this.t
-				each(this.o, function(param) {
-					viewParse(replace(txt, /{key}/g, param))
-				})
-			}
+		addPlugin("css", injectCss)
+		addPlugin("def", viewDef)
+		addPlugin("js", viewEval)
+		addPlugin("each", function() {
+			var txt = this.t
+			each(this.o, function(param) {
+				viewParse(replace(/{key}/g, param, txt))
+			})
 		})
 		addPlugin("el", {
-			c: 1,
 			d: function(plugin, el) {
 				el = usePluginContent(plugin)
 				elCache[plugin.n] = el
 			}
-		})
+		}, 1)
 		plugins.svg = plugins.el
-		addPlugin("map", {
-			r: function(txt) {
-				var plugin = this
-				appendBind(plugin.u, plugin.s ? txt.slice(1) : txt, plugin.s)
-			}
+		addPlugin("map", function(txt) {
+			var plugin = this
+			appendBind(plugin.u, plugin.s ? txt.slice(1) : txt, plugin.s)
 		})
 		addPlugin("view", {
-			c: 1,
 			d: function(plugin) {
 				var expr = getAttr(plugin.e, "_b")
 				, view = View(plugin.n, usePluginContent(plugin), plugin.x)
 				if (expr) {
-					viewEval(replace(expr, renderRe, function(_, name, op, args) {
+					viewEval(replace(renderRe, function(_, name, op, args) {
 						return "($s." + name + (isFn(view[name]) ? "(" + (args || "") + ")" : "=" + args) + "),"
-					}) + "1", view)
+					}, expr) + "1", view)
 				}
 			}
-		})
+		}, 1)
 
 		/*** breakpoints ***/
-		var lastSize, lastOrient
-		, breakpoints = opts.breakpoints
-		, setBreakpointsRated = rate(function() {
+		var breakpoints = opts.breakpoints
+		, setBreakpointsRated = rate(function(width) {
 			// document.documentElement.clientWidth is 0 in IE5
-			var point, next
-			, width = html.offsetWidth
-
-			for (point in breakpoints) {
-				if (breakpoints[point] > width) break
-				next = point
-			}
-
-			if (next != lastSize) {
-				cls(html, lastSize, 0)
-				cls(html, lastSize = next)
-			}
-
-			next = width > html.offsetHeight ? "land" : "port"
-
-			if (next != lastOrient) {
-				cls(html, lastOrient, 0)
-				cls(html, lastOrient = next)
-			}
-
+			bindingsIs(html, (width = html.offsetWidth), breakpoints, "")
+			bindingsIs(html, +(width > html.offsetHeight), "port,1=land", "")
 			emit(View, "resize")
 		}, 99)
 
@@ -744,18 +779,15 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				pattern: function(str, re) {
 					var values = []
 					, t = translations["~"] || {}
-					, key = replace(str, RegExp(re || t[""] || "[\\d.]+", "g"), function(a) {
+					, key = replace(RegExp(re || t[""] || "[\\d.]+", "g"), function(a) {
 						values.push(a)
 						return "#"
-					})
-					return str != key ? replace(iGet(t, key, str), /#/g, bind(values.shift, values)) : str
+					}, str)
+					return str != key ? replace(/#/g, bind(values.shift, values), iGet(t, key, str)) : str
 				},
 				pick: function(val, word) {
-					for (var t = translations["?"] || {}, arr = replace((t[word] || word), /([^;=,]+?)\?/g, "$1=$1;").split(/[;=,]/), i = 1|arr.length; i > 0; ) {
-						if ((i-=2) < 0 || arr[i] && (arr[i] == "" + val || +arr[i] <= val)) {
-							return arr[i + 1] ? replace(arr[i + 1], "#", val) : ""
-						}
-					}
+					var t = translations["?"] || {}
+					return pick(val, t[word] || word)
 				},
 				plural: function(n, word, expr) {
 					var t = translations["*"] || {}
@@ -781,10 +813,10 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 					S: "Milliseconds()"
 				}
 				, setA = "a.setTime(+d+((4-(" + get + dateMap.d + "))*864e5))"
-				return replace((utc ? mask.slice(4) : mask), dateRe, function(match, MD, single, pad, text, esc) {
+				return replace(dateRe, function(match, MD, single, pad, text, esc) {
 					mask = (
-						esc            ? replace(replace(escape(esc), /%u/g, "\\u"), /%/g, "\\x") :
-						text !== UNDEF ? replace(text, /''/g, "'") :
+						esc            ? replace(/%/g, "\\x", replace(/%u/g, "\\u", escape(esc))) :
+						text !== UNDEF ? replace(/''/g, "'", text) :
 						MD || match == "dd" ? "l[''][" + get + (MD == "M" ? "Month()+" + (match == "MMM" ? 14 : 26) : "Day()" + (pad ? (pad = "") : "+7")) + "]" :
 						match == "u"   ? "(d/1000)>>>0" :
 						match == "U"   ? "+d" :
@@ -801,7 +833,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 						pad ? "(t=" + mask + ")>9?t:'0'+t" :
 						mask
 					) + ")+\""
-				})
+				}, (utc ? mask.slice(4) : mask))
 			}
 
 			function numStr(format, t) {
@@ -820,7 +852,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				, m3 = /([.,\/])(\d*)$/.exec(m2[2])
 				, decimals = m3 && m3[2].length || 0
 				, full = m3 ? m2[2].slice(0, m3.index) : m2[2]
-				, num = replace(full, /\D+/g, "")
+				, num = replace(/\D+/g, "", full)
 				, sLen = num.length
 				, step = decimals ? +(m3[1] === "/" ? 1 / m3[2] : num + "." + m3[2]) : num
 				, decSep = m3 && m3[1]
@@ -864,7 +896,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				fn += (
 					(m2[4] ? ",r=" + (post[m2[4]] || "r+o") : "") +
 					// negative format
-					",N&&n>0?" + replace(quote(conf[2] || "-#"), "#", "'+r+'") + ":" +
+					",N&&n>0?" + replace("#", "'+r+'", quote(conf[2] || "-#")) + ":" +
 					(conf[3] ? "n===0?" + quote(conf[3]) + ":" : "") +
 					(m2[1] ? quote(m2[1]) + "+r" : "r") +
 					(m2[6] ? "+" + quote(m2[6]) : "")
@@ -889,11 +921,11 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				return format(iGet(translations, str, str || ""), data, getExt)
 			}
 			function getExt(obj, str) {
-				var fn = cache[str] || (cache[str] = (replace(replace(str, /;\s*([#*?@~])(.*)/, function(_, op, arg) {
-					return ";" + iAlias[op] + " " + quote(arg)
-				}), renderRe, function(_, name, op, args) {
+				var fn = cache[str] || (cache[str] = (replace(renderRe, function(_, name, op, args) {
 					fn = (_ === name) ? name : "$el." + name + "(" + fn + (args ? "," + args : "") + ")"
-				}), fn === str ? str : makeFn(fn, fn)))
+				}, replace(/;\s*([#*?@~])(.*)/, function(_, op, arg) {
+					return ";" + iAlias[op] + " " + quote(arg)
+				}, str)), fn === str ? str : makeFn(fn, fn)))
 				return str == "$" ? obj : isStr(fn) ? iGet(obj, str, "") : isFn(fn) ? fn(iExt, obj, translations) : ""
 			}
 		})
@@ -924,7 +956,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		}
 		function iGet(obj, path, fallback, tmp) {
 			return isStr(path) ? (
-				isStr(obj[path]) ? obj[path] :
+				NUL != obj[path] ? obj[path] :
 				isStr(obj[tmp = path.toLowerCase()]) ? (
 					path.slice(1) === tmp.slice(1) ? obj[tmp].charAt(0).toUpperCase() + obj[tmp].slice(1) :
 					path === tmp.toUpperCase() ? obj[tmp].toUpperCase() :
@@ -943,17 +975,13 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		return View
 	}
 
-	function setUrl(url, rep, checkUrl) {
+	function setUrl(url, rep) {
 		/*** pushState ***/
 		if (pushBase) {
 			history[rep ? "replaceState" : "pushState"](NUL, NUL, pushBase + url)
-		} else {
+		} else
 		/**/
 			location[rep ? "replace" : "assign"]("#" + url)
-		/*** pushState ***/
-		}
-		/**/
-		if (checkUrl) checkUrl()
 	}
 
 	LiteJS.go = setUrl
@@ -965,7 +993,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		, baseEl = find(html, "base")
 		, url = getUrl()
 		if (baseEl && history.pushState) {
-			pushBase = replace(baseEl.href, /.*:\/\/[^/]*|[^\/]*$/g, "")
+			pushBase = replace(/.*:\/\/[^/]*|[^\/]*$/g, "", baseEl.href)
 
 			if (url && !getUrl()) {
 				setUrl(url, 1)
@@ -987,12 +1015,12 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			if (cb && histLast != (histLast = getUrl())) cb(histLast)
 		}
 		function getUrl() {
-			return replace(
+			return replace(/^[#\/\!]+|[\s\/]+$/g, "",
 				/*** pushState ***/
 				pushBase ? location.pathname.slice(pushBase.length) :
 				/**/
 				// NOTE: in Firefox location.hash is decoded; in Safari location.pathname is decoded
-				location.href.split("#")[1] || "", /^[#\/\!]+|[\s\/]+$/g, "")
+				location.href.split("#")[1] || "")
 		}
 	}
 
@@ -1004,7 +1032,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	function El(name) {
 		var attr
 		, attrs = {}
-		, el = replace(name, selectorRe, function(_, op, key, fn, val, quotation) {
+		, el = replace(selectorRe, function(_, op, key, fn, val, quotation) {
 			attr = 1
 			val = quotation ? val.slice(1, -1) : val || key
 			attrs[op =
@@ -1018,7 +1046,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				attrs[op] + (fn === "~" ? " " : "") + val :
 				val
 			return ""
-		}) || "div"
+		}, name) || "div"
 
 		// NOTE: IE-s cloneNode consolidates the two text nodes together as one
 		// http://brooknovak.wordpress.com/2009/08/23/ies-clonenode-doesnt-actually-clone/
@@ -1042,14 +1070,6 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		empty: elEmpty,
 		kill: elKill,
 		off: acceptMany(rmEvent),
-		one: acceptMany(function(el, ev, fn) {
-			function remove() {
-				rmEvent(el, ev, fn)
-				rmEvent(el, ev, remove)
-			}
-			addEvent(el, ev, fn)
-			addEvent(el, ev, remove)
-		}),
 		render: render,
 		rm: elRm
 	})
@@ -1126,12 +1146,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 					return true
 				}
 			},
-			is: function(el, val, opts, prefix) {
-				if (!isStr(prefix)) prefix = "is-"
-				var match = elScope(el)._.ext.pick(val, opts)
-				cls(el, el[prefix + opts], 0)
-				cls(el, el[prefix + opts] = match && prefix + match)
-			},
+			is: bindingsIs,
 			name: function(el, name) {
 				setAttr(el, "name", expand(name, 1))
 			},
@@ -1173,12 +1188,12 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	function setAttr(el, key, val) {
 		var current = getAttr(el, key)
 
-		/*** ie8 ***/
 		// NOTE: IE5-7 doesn't set styles and removes events when you try to set them.
 		// IE6 label with a for attribute will re-select the first option of SELECT list instead of just giving focus.
 		// http://webbugtrack.blogspot.com/2007/09/bug-116-for-attribute-woes-in-ie6.html
 		// IE8 and below have a bug where changed 'name' not accepted on form submit
-		/* c8 ignore next 3 */
+		/* c8 ignore next 4 */
+		/*** ie9 ***/
 		if (ie678 && (key === "id" || key === "name" || key === "checked" || key === "style")) {
 			el.mergeAttributes(document.createElement("<INPUT " + key + "='" + val + "'>"), false)
 		} else
@@ -1276,7 +1291,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				name = current.split(SP).indexOf(name) > -1 ? current : current + SP + name
 			}
 		} else {
-			name = current ? replace(SP + current + SP, SP + name + SP, SP).trim() : current
+			name = current ? replace(SP + name + SP, SP, SP + current + SP).trim() : current
 		}
 
 		if (current != name) {
@@ -1286,6 +1301,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				el.className = name
 			}
 		}
+		return current
 	}
 
 	function elEmpty(el) {
@@ -1299,7 +1315,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				if (isObj(tr)) bindingsCss(el, tr)
 				tr = "transitionend"
 				// transitionend fires for each property transitioned
-				if ("on" + tr in el) return addEvent(el, tr, bind(elKill, el, el, el = UNDEF))
+				if ("on" + tr in el) return addEvent(el, tr, bind(elKill, el, el))
 			}
 			if (el._e) {
 				emit(el, "kill")
@@ -1324,76 +1340,6 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			closestScope(el)
 		)
 	}
-	function elTxt(el, txt) {
-		if (el[txtAttr] !== txt) el[txtAttr] = txt
-	}
-	function elVal(el, val) {
-		if (!el) return ""
-		var input, step, key, value
-		, i = 0
-		, type = el.type
-		, opts = el.options
-		, checkbox = type === "checkbox" || type === "radio"
-
-		if (el.tagName === "FORM") {
-			// Disabled controls do not receive focus,
-			// are skipped in tabbing navigation, cannot be successfully posted.
-			//
-			// Read-only elements receive focus but cannot be modified by the user,
-			// are included in tabbing navigation, are successfully posted.
-			//
-			// Read-only checkboxes can be changed by the user
-
-			for (opts = {}; (input = el.elements[i++]); ) if (!input.disabled && (key = input.name || input.id)) {
-				value = elVal(input, val != UNDEF ? val[key] : UNDEF)
-				if (value !== UNDEF) {
-					step = opts
-					replace(key, /\[(.*?)\]/g, replacer)
-					step[key || step.length] = value
-				}
-			}
-			return opts
-		}
-
-		if (val !== UNDEF) {
-			if (opts) {
-				for (value = (isArr(val) ? val : [ val ]).map(String); (input = opts[i++]); ) {
-					input.selected = value.indexOf(input.value) > -1
-				}
-			} else if (el.val) {
-				el.val(val)
-			} else if (checkbox) {
-				el.checked = !!val
-			} else {
-				el.value = val
-			}
-			return
-		}
-
-		if (opts) {
-			if (type === "select-multiple") {
-				for (val = []; (input = opts[i++]); ) {
-					if (input.selected && !input.disabled) {
-						val.push(input.valObject || input.value)
-					}
-				}
-				return val
-			}
-			// IE8 throws error when accessing to options[-1]
-			value = el.selectedIndex
-			el = value > -1 && opts[value] || el
-		}
-
-		return checkbox && !el.checked ?
-		(type === "radio" ? UNDEF : NUL) :
-		el.valObject !== UNDEF ? el.valObject : el.value
-
-		function replacer(_, _key, offset) {
-			if (step == opts) key = key.slice(0, offset)
-			step = step[key] || (step[key] = step[key] === NUL || _key && +_key != _key ? {} : [])
-			key = _key
-		}
-	}
 
 	function closestScope(node) {
 		for (; (node = node.parentNode); ) {
@@ -1411,7 +1357,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		var el, next
 		, scope = node.$s || $s || closestScope(node)
 
-		/*** ie8 ***/
+		/*** ie9 ***/
 		if (ie678 && node.tagName === "SELECT") {
 			node.parentNode.insertBefore(node, node)
 		}
@@ -1430,23 +1376,23 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		, expr = node[attr] || (node[attr] = setAttr(node, attr, "") || true)
 		if (expr !== true) try {
 			fn = fnCache[expr] || (fnCache[expr] = makeFn(expr))
-			return fn(node, scope, attr, bindOnce)
+			return fn(node, scope, attr, bindOnce, elScope)
 		} catch (e) {
 			throw e + "\n" + attr + ": " + expr
 		}
 	}
 	function makeFn(fn, raw, i) {
-		fn = raw || "$s&&(" + replace(fn, renderRe, function(match, name, op, args) {
+		fn = raw || "$s&&(" + replace(renderRe, function(match, name, op, args) {
 			return (
 				op ? "($el[$a]=$el[$a].replace($o[" + (i = bindOnce.indexOf(match), i < 0 ? bindOnce.push(match) - 1 : i)+ "],''),0)||" : ""
-			) + "$b['" + (bindings[name] ? name + "'].call($s" + (name == "$s" ? "=El.scope($el,$el)": "") + ",$el" : "set']($el,'" + name + "'") + (args ? "," + args : "") + ")||"
-		}) + "$r)"
-		var vars = replace(fn, fnRe, "").match(wordRe) || []
+			) + "$b['" + (bindings[name] ? name + "'].call($s" + (name == "$s" ? "=$S($el,$el)": "") + ",$el" : "set']($el,'" + name + "'") + (args ? "," + args : "") + ")||"
+		}, fn) + "$r)"
+		var vars = replace(fnRe, "", fn).match(wordRe) || []
 		for (i = vars.length; i--; ) {
-			if (vars.indexOf(vars[i]) !== i) vars.splice(i, 1)
+			if (window[vars[i]] || vars.indexOf(vars[i]) !== i) vars.splice(i, 1)
 			else vars[i] += "=$s." + vars[i]
 		}
-		fn = Function("$el,$s,$a,$o,$r", (vars[0] ? "var " + vars : "") + ";return " + fn)
+		fn = Function("$el,$s,$a,$o,$S,$r", (vars[0] ? "var " + vars : "") + ";return " + fn)
 		return fn
 	}
 
@@ -1636,6 +1582,19 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	}
 	/**/
 
+	function bindingsIs(el, val, opts, prefix) {
+		if (!isStr(prefix)) prefix = "is-"
+		var match = pick(val, opts)
+		cls(el, el[prefix + opts], 0)
+		cls(el, el[prefix + opts] = match && prefix + match)
+	}
+	function pick(val, word) {
+		for (var arr = replace(/([^;=,]+?)\?/g, "$1=$1;", word).split(/[;=,]/), i = 1|arr.length; i > 0; ) {
+			if ((i-=2) < 0 || arr[i] && (arr[i] == "" + val || +arr[i] <= val)) {
+				return arr[i + 1] ? replace("#", val, arr[i + 1]) : ""
+			}
+		}
+	}
 	function closest(el, sel) {
 		return el && html.closest.call(el.nodeType < 2 ? el : el.parentNode, sel)
 	}
@@ -1672,15 +1631,28 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 					}
 					return
 				}
-				if (prepareVal) val = prepareVal(el, val, selector, data)
+				if (prepareVal) val = delegate(el, val, selector, data)
 				selector = !prepareVal && selector ? findAll(el, selector) : isArr(el) ? el : [ el ]
 				for (delay = 0; (el = selector[delay++]); ) {
-					for (var arr = ("" + name).split(splitRe), i = 0, len = arr.length; i < len; ) {
-						if (arr[i]) fn(el, arr[i++], isArr(val) ? val[i - 1] : val, data)
+					for (var result, arr = ("" + name).split(splitRe), i = 0, len = arr.length; i < len; ) {
+						if (arr[i]) {
+							result = fn(el, arr[i++], isArr(val) ? val[i - 1] : val, data)
+							if (!prepareVal && data > 0) f(el, name, result, "", data)
+						}
 					}
 				}
 			}
 		}
+		function delegate(el, val, selector, data) {
+			return isStr(val) ? function(e) {
+				var target = selector ? closest(e.target, selector) : el
+				if (target) emit.apply(target, [elScope(el).$ui, val, e, target].concat(data))
+			} :
+			selector ? function(e, touchEv, touchEl) {
+				if (matches(touchEl = e.target, selector)) val(e, touchEv, touchEl, data)
+			} :
+			val
+		}
 	}
 	function assignDeep(target, map) {
 		if (map) for (var k in map) if (hasOwn(map, k)) {
@@ -1695,9 +1667,6 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			document.activeElement.blur()
 		} catch(e) {}
 	}
-	function camelFn(_, a) {
-		return a.toUpperCase()
-	}
 	function each(arr, fn, scope, key) {
 		if (arr) {
 			if (isStr(arr)) arr = arr.split(splitRe)
@@ -1738,7 +1707,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		return typeof str === "string"
 	}
 	function quote(str) {
-		return "'" + replace(replace(str || "", /'/g, "\\'"), /\n/g, "\\n") + "'"
+		return "'" + replace(/\n/g, "\\n", replace(/'/g, "\\'", str || "")) + "'"
 	}
 	// Maximum call rate for Function with optional leading edge and trailing edge
 	function rate(fn, ms, onStart, onEnd) {
@@ -1780,7 +1749,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			elKill(el)
 			return el.src
 		}), function(res) {
-			res = res.concat(sources, next && next.src && next.innerHTML).filter(Boolean)
+			res = res.concat(sources, next && next.src && next.innerHTML)
 			if (res[sources.length = 0]) {
 				if (!parser) LiteJS.ui = LiteJS()
 				each(res, parser)