@litejs/ui 26.2.0 → 26.3.0

package/el/{Slider.ui → slider.ui}

@@ -47,7 +47,7 @@
 	:focus > * > .Slider-knob {
 		box-shadow: 0 0 0 8px rgb(0, 0, 0, .2), 0 1px 4px rgba(0, 0, 0, .3);
 	}
-	.Slider-knob.is-active {
+	.is-active > .Slider-knob {
 		box-shadow: 0 0 0 12px rgb(0, 0, 0, .2), 0 1px 5px 5px rgba(0, 0, 0, .3);
 	}
 	/* value bubble */
@@ -68,13 +68,14 @@
 	}
 	.Slider-knob:after {
 		content: attr(data-val);
+		text-align: center;
 		left: 10px;
 		padding: 0 4px;
 		transform: translate(-50%, 0);
 	}
 	:focus > * > .Slider-knob:before,
 	:hover > * > .Slider-knob:before,
-	.Slider-knob.is-active:before {
+	.is-active > .Slider-knob:before {
 		border-radius: 50% 50% 0 50%;
 		box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, .3);
 		opacity: 1;
@@ -82,7 +83,7 @@
 	}
 	:focus > * > .Slider-knob:after,
 	:hover > * > .Slider-knob:after,
-	.Slider-knob.is-active:after {
+	.is-active > .Slider-knob:after {
 		box-shadow: -4px -3px 3px -2px rgba(0, 0, 0, .15), 4px -3px 3px -2px rgba(0, 0, 0, .15);
 		opacity: 1;
 		top: -43px;
@@ -109,113 +110,124 @@
 	, elOff = El.off
 	, elCls = El.cls
 	, elGet = El.get
-	El.$b.SliderInit = function(el, range) {
+	, sliderTypes = {
+		time: ["0:1440:60", function(s) {
+			s = s.split(":")
+			return s[0] * 60 + +s[1]
+		}, function(m) {
+			return (m / 60 | 0) + ":" + ("0" + m % 60).slice(-2)
+		}]
+	}
+	El.$b.sliderInit = function(el, range) {
 		range = (range || elGet(el, "range") || "").split(/[^+\-\d.]/) // min:max:step:margin
-		var knobLen, offset, px, drag, min, max, minPx, maxPx, value
-		//, vert = El.hasClass(el, "is-vertical")
-		, vert = false
-		, attr = vert ? "offsetHeight" : "offsetWidth"
-		, fill = el.firstChild
-		, knob = fill.lastChild
+		var knobLen, offset, px, drag, min, max, minPx, maxPx
+		, step = +(range[2] || 1)
+		, margin = +(range[3] || 0)
+		, fmt = elGet(el, "format")
+		, idx
+		, fill
+		, values = []
+		, inputs = $$("input", el)
+		, type = sliderTypes[elGet(el, "type")]
+		, parse = type ? type[1] : Number
+		, format = type ? type[2] : String
+		, fills = []
 		, emit = El.rate(El.emit.bind(el, el, "change"), 500)
+		if (type && !range[1]) range = type[0].split(/[^+\-\d.]/)
+		for (idx = 0; idx < inputs.length; ) {
+			fills[idx] = El("Slider-fill")
+			values[idx] = parse(inputs[idx].value)
+			idx++
+		}
+		if (fills.length) {
+			El.append(el, fills.slice(0).reverse())
+			load()
+			for (idx = 0; idx < fills.length; idx++) setVal(idx, values[idx])
+			idx = 0
+			fill = fills[0]
+		} else {
+			fill = el.firstChild
+		}
 		elOn(window, "blur", stop)
-		setTimeout(el.val = set, 10, value||0)
 		function load() {
 			min = +(range[0] || 0)
 			max = +(range[1] || 100)
-			knobLen = knob[attr]>>1
+			knobLen = (fills[0] || fill).firstChild.offsetWidth>>1
 			minPx = 0
-			maxPx = el[attr] - knobLen - knobLen
+			maxPx = el.offsetWidth - knobLen - knobLen
 			px = maxPx / (max - min)
 		}
 		elOn(el, "pointerdown", function(e) {
 			drag = true
 			load()
 			var tmp = el.getBoundingClientRect()
-			offset = (vert ? tmp.top + maxPx + El.scrollTop() + knobLen : tmp.left + El.scrollLeft()) + knobLen
-			tmp = offset - e.clientX + (value-min||0)*px
-			if (tmp < knobLen && tmp > -knobLen) offset -= tmp
-			if (el.childNodes.length > 1) {
-				var next
-				, x = maxPx
-				, diff = vert ? offset - e.pageY : e.pageX - offset
-				for (tmp = fill = el.firstChild; tmp; tmp = tmp.nextSibling) {
-					next = diff - tmp[attr] + knobLen
-					if (next < 0 ? -next <= x : next < x) {
-						fill = tmp
-						knob = tmp.firstChild
-						x = next < 0 ? -next : next
-					}
-				}
-				if (fill.previousSibling) {
-					maxPx = fill.previousSibling[attr] - knobLen
-					if (range[3]) maxPx -= px * range[3]
-				}
-				if (fill.nextSibling) {
-					minPx = fill.nextSibling[attr] - knobLen
-					if (range[3]) minPx += px * range[3]
+			offset = tmp.left + El.scrollLeft() + knobLen
+			var next, i
+			, x = maxPx
+			, diff = e.pageX - offset
+			for (i = 0; i < fills.length; i++) {
+				next = diff - fills[i].offsetWidth + knobLen
+				if (next < 0 ? -next <= x : next < x) {
+					idx = i
+					fill = fills[i]
+					x = next < 0 ? -next : next
 				}
 			}
-			move(e)
+			tmp = offset - e.pageX + (values[idx]-min||0)*px
+			if (tmp < knobLen && tmp > -knobLen) offset -= tmp
 			listen(elOn)
+			move(e)
 		})
 		function move(e) {
-			var diff = vert ? offset - e.pageY : e.pageX - offset
+			var diff = e.pageX - offset
 			diff = (diff > maxPx ? maxPx : (diff < minPx ? minPx : diff))
-			set((diff / px) + min, e, diff)
+			setVal(idx, (diff / px) + min, diff)
+			emit(e)
 			return El.stop(e)
 		}
 		function stop(e) {
 			if (drag) {
 				drag = false
 				listen(elOff)
-				set(value)
+				setVal(idx, values[idx])
 			}
 		}
 		function listen(onOff) {
 			elCls(el, "anim", !drag)
-			elCls(knob, "is-active", drag)
+			elCls(fill, "is-active", drag)
 			onOff(document, "pointerup", stop)
 			onOff(document, "pointermove", move)
 		}
-		function set(val, e, pos) {
-			load()
-			val = El.step(val < min ? min : val > max ? max : val || 0, +(range[2] || 1))
-			if (value !== void 0 && (!drag || pos !== void 0)) {
-				El.css(fill, vert ? "height" : "width", ((pos || (val-min)*px)+knobLen) + "px", 0)
+		function setVal(i, val, pos) {
+			val = El.step(val < min ? min : val > max ? max : val || 0, step)
+			if (values[i] !== void 0 && (!drag || pos !== void 0 || i !== idx)) {
+				El.css(fills[i], "width", ((pos || (val-min)*px)+knobLen) + "px", 0)
 			}
-			if (value !== val) {
-				el.value = value = val
-				if (drag && e) emit(e)
-				var format = elGet(el, "format")
-				El.set(knob, "data-val", format ? $d._(format, {val:val}) : val)
+			if (values[i] !== val) {
+				values[i] = val
+				inputs[i].value = format(val)
+				El.set(fills[i].firstChild, "data-val", fmt ? $d._(fmt, {val:val}) : format(val))
+				if (drag && margin) {
+					if (i > 0 && val - values[i - 1] < margin) setVal(i - 1, +val - margin)
+					if (i < fills.length - 1 && values[i + 1] - val < margin) setVal(i + 1, +val + margin)
+				}
 			}
 		}
 	}
+	El.$b.sliderInit.types = sliderTypes
 
-%el Slider
-button.Slider.anim.reset ;SliderInit!
-	.Slider-fill
-		.Slider-knob[tabindex=0]
+%el Knob
+input[type=hidden]
 
-%el Slider2
-button.Slider.anim.reset ;SliderInit!
-	.Slider-fill
-		.Slider-knob[tabindex=0]
-	.Slider-fill
-		.Slider-knob[tabindex=0]
+%el Slider-fill
+.Slider-fill
+	.Slider-knob[tabindex=0]
 
-%el Slider3
-button.Slider.reset ;SliderInit!
-	.Slider-fill
-		.Slider-knob[tabindex=0]
-	.Slider-fill
-		.Slider-knob[tabindex=0]
-	.Slider-fill
-		.Slider-knob[tabindex=0]
+%el Slider
+.Slider.hand.anim[data-out="sliderInit!"]
 
 %el Toggle
-button.Toggle.reset ;SliderInit! "0:1"
+button.Toggle.reset ;sliderInit! "0:1"
 	;css: "width","36px"
 	.Slider-fill.anim
 		.Slider-knob.anim[tabindex=0]

package/load.js

@@ -63,10 +63,10 @@
 		if (lastError !== (lastError =
 			[ file
 			, line
-			, col || (window.event || unsentLog).errorCharacter || "?"
+			, col || (window.event || unsentLog).errorCharacter || ""
 			, message
 			].join(":")
-		)) log("e", lastError, [error && (error.stack || error.stacktrace) || "-", "" + location])
+		)) log("e", lastError, [error && (error.stack || error.stacktrace) || "", "" + location])
 	}
 	, log = xhr.log = function(type, msg, extra) {
 		if (unsentLog.push([new Date() - initTime, type].concat(msg, extra || [])) < 2) sendLog()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/ui",
-  "version": "26.2.0",
+  "version": "26.3.0",
   "description": "UI engine for LiteJS full-stack framework",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -27,6 +27,6 @@
     "test": "lj t test/index.js"
   },
   "devDependencies": {
-    "@litejs/cli": "26.2.1"
+    "@litejs/cli": "26.2.3"
   }
 }

package/ui.js

@@ -1,14 +1,14 @@
 
 /* litejs.com/MIT-LICENSE.txt */
 
-/* global escape, navigator, xhr */
+/* global escape, getComputedStyle, navigator, pageXOffset, pageYOffset, scrollTo, xhr */
 
 // Conditional compilation via toggle comments (processed by build tool):
 //   /*** name ***/  code   /**/              - `code` active in source; build can strip it
 //   /*** name ***/  code1  /*/  code2  /**/  - `code1` active in source, `code2` commented out; build can swap
 
 /*** debug ***/
-console.log("LiteJS is in debug mode, but it's fine for production")
+console.log("LiteJS is in debug mode and that's fine for production")
 /**/
 
 !function(window, document, history, localStorage, location, navigator, Function, Object) {
@@ -318,10 +318,11 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		var fn2 = fixFn[ev] && fixFn[ev](el, fn, ev) || fn
 		, ev2 = fixEv[ev] || ev
 
-		if (ev2 !== "" && "on" + ev2 in el) {
+		if (ev2 !== "") {
 			// polyfilled addEventListener returns patched function
 			// useCapture defaults to false
 			// Chrome56 touchstart/move sets {passive:true} by default; use {passive:false} to enable preventDefault()
+			// FF/Chrome el.onfocusin property is not supported, only addEventListener("focusin", fn)
 			fn2 = html.addEventListener.call(el, ev2, fn2, opts) || fn2
 		}
 
@@ -336,7 +337,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			if (fn !== evs[id + 1] && evs[id + 1]._rm) {
 				evs[id + 1]._rm()
 			}
-			if (ev2 !== "" && "on" + ev2 in el) {
+			if (ev2 !== "") {
 				html.removeEventListener.call(el, ev2, evs[id + 1], opts)
 			}
 			evs.splice(id - 1, 3)
@@ -507,6 +508,8 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 					viewEmit(view, "pong", params, View)
 				}
 				viewEmit(lastView, "show", params)
+				close = history.state || 0
+				scrollTo(close.x|0, close.y|0)
 				blur()
 			}
 			function viewClose(view, open) {
@@ -681,9 +684,10 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			return child
 		}
 
-		addPlugin("start", {
+		addPlugin("ui", {
 			d: Function("p", "p.u.i=1")
 		})
+		plugins.start = plugins.ui
 		addPlugin("slot", {
 			d: function(plugin) {
 				var slotName = plugin.n || ++elSeq
@@ -708,6 +712,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		addPlugin("el", {
 			d: function(plugin, el) {
 				el = usePluginContent(plugin)
+				/*** debug ***/
+				if (elCache[plugin.n]) console.error("El '%s' exist! Loading .ui file twice will execute %js also twice", plugin.n)
+				/**/
 				elCache[plugin.n] = el
 			}
 		}, 1)
@@ -734,7 +741,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			// document.documentElement.clientWidth is 0 in IE5
 			bindingsIs(html, (width = html.offsetWidth), breakpoints, "")
 			bindingsIs(html, +(width > html.offsetHeight), "port,1=land", "")
-			emit(View, "resize")
+			emit(LiteJS, "resize")
 		}, 99)
 
 		if (breakpoints) {
@@ -1005,7 +1012,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	function setUrl(url, rep) {
 		/*** pushState ***/
 		if (pushBase) {
-			history[rep ? "replaceState" : "pushState"](NUL, NUL, pushBase + url)
+			history[rep ? "replaceState" : (history.replaceState({x: pageXOffset, y: pageYOffset}, NUL, location.href), "pushState")](NUL, NUL, pushBase + url)
 		} else
 		/**/
 			location[rep ? "replace" : "assign"]("#" + url)
@@ -1119,36 +1126,29 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	assign(El, {
 		$b: assign(bindings, {
 			each: function(el, name, list) {
-				/*** debug ***/
-				if (el._li) throw "Binding each must be type of once: each!" + name
-				/**/
-
-				var comm = Comm("each " + name, up)
+				var comm = el._c || (el._c = Comm("each " + name, up))
 				, pos = 0
 				, nodes = []
-
 				comm.$s = this
 				elReplace(el, comm)
-				each(list, add)
-				return { a: add, u: up }
-
-				function add(item) {
-					var clone = nodes[pos] = el.cloneNode(true)
-					, subScope = elScope(clone, comm)
-					append(comm.parentNode, clone, (pos ? nodes[pos - 1] : comm).nextSibling)
-					subScope.$i = pos++
-					subScope.$len = list.length
-					subScope[name] = item
-					clone._b = el._b
-					/*** debug ***/
-					clone._li = up
-					/**/
-					render(clone)
-				}
+				up()
+				return { u: up }
+
 				function up() {
-					for (var i = list.length; pos > i; ) elKill(nodes[--pos])
-					for (nodes.length = i; pos < i; ) add(list[pos])
-					for (; i--; ) nodes[i].$s[name] = list[i]
+					if (!list) return
+					for (var sub, keys = Object.keys(list), i = keys.length; pos > i; ) elKill(nodes[--pos])
+					for (nodes.length = i; pos < i; ) {
+						sub = nodes[pos] = el.cloneNode(true)
+						sub._b = el._b
+						append(comm.parentNode, sub, (pos++ ? nodes[pos - 2] : comm).nextSibling)
+						elScope(sub, comm)
+					}
+					for (; i--; ) {
+						sub = nodes[i].$s
+						sub[name] = list[sub.$k = keys[sub.$i = i]]
+						sub.$len = pos
+						render(nodes[i])
+					}
 				}
 			},
 			el: function(el, tag, fallback) {
@@ -1175,7 +1175,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			},
 			is: bindingsIs,
 			name: function(el, name) {
-				setAttr(el, "name", expand(name, 1))
+				if (name) setAttr(el, "name", expand(name, 1))
 			},
 			ref: function(el, name) {
 				this[name] = el
@@ -1342,7 +1342,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))
+				if ("on" + tr in el) return addEvent(el, tr, bind(elKill, el, el, el = UNDEF))
 			}
 			if (el._e) {
 				emit(el, "kill")
@@ -1361,9 +1361,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			}
 		}
 	}
-	function elScope(el, parent) {
+	function elScope(el, parent, opts) {
 		return el.$s || (
-			parent ? ((parent = elScope(parent)), el.$s = assign(create(parent), { $up: parent })) :
+			parent ? (el.$s = assign(create(parent = elScope(parent)), opts, { $up: parent })) :
 			closestScope(el)
 		)
 	}
@@ -1432,7 +1432,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	/*** kb ***/
 	var kbMaps = []
 	, kbMod = LiteJS.kbMod = /\bMac|\biP/.test(navigator.userAgent) ? "metaKey" : "ctrlKey"
-	, kbCodes = LiteJS.kbCodes = ",,,,,,,,backspace,tab,,,,enter,,,shift,ctrl,alt,pause,caps,,,,,,,esc,,,,,,pgup,pgdown,end,home,left,up,right,down,,,,,ins,del,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,cmd,,,,,,,,,,,,,,,,,,,,,f1,f2,f3,f4,f5,f6,f7,f8,f9,f10,f11,f12".split(splitRe)
+	, kbCodes = LiteJS.kbCodes = ",,,,,,,,backspace,tab,,,,enter,,,shift,ctrl,alt,pause,caps,,,,,,,esc,,,,,,pgup,pgdown,end,home,left,up,right,down,,,,,ins,del,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,cmd,,,,,,,,,,,,,,,,,,,,,f1,f2,f3,f4,f5,f6,f7,f8,f9,f10,f11,f12".split(",")
 
 	El.addKb = addKb
 	El.rmKb = rmKb
@@ -1482,22 +1482,23 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 					fn = !input || map.input ? map[code] || map[chr] || map.num && code > 47 && code < 58 && (chr|=0, map.num) || map.all : fn
 				) && map.bubble; );
 			if (isStr(fn)) setUrl(fn)
-			if (isFn(fn)) fn(e, chr, el)
+			else if (isFn(fn)) fn(e, chr, el)
 		}
 	})
 	/**/
 
 	/*** touch ***/
-	var touchEl, touchDist, touchAngle, touchMode, touchTick
+	var e0, touchDist, touchAngle, touchMode, touchTick
 	, START = "start"
 	, END = "end"
 	, touches = []
-	, touchEv = {}
+	, tapCount = 0
+	, tapTime = 0
 
 	// swipe + left/right/up/down
-	each("hold pan pinch rotate tap", function(name) {
+	each("hold pan pinch rotate tap tap2", function(name) {
 		fixEv[name] = fixEv[name + START] = fixEv[name + END] = ""
-		fixFn[name] = touchInit
+		fixFn[name] = fixFn[name + START] = fixFn[name + END] = touchInit
 	})
 	function touchInit(el) {
 		if (!el._ti) {
@@ -1511,21 +1512,21 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			clearTimeout(touchTick)
 			var len = e ? touches.push(e) : touches.length
 			, MOVE = "pointermove"
-			if (touchMode || len < 1) {
-				emit(touchEl, touchMode ? touchMode + END : "tap", e2, touchEv, touchEl)
+			if (touchMode) {
+				emit(el, touchMode + END, e2, el)
 				touchMode = UNDEF
-			}
-			if (len < 1) {
-				touchEl = UNDEF
+			} else if (len < 1) {
+				var now = Date.now()
+				tapCount = e2.count = now - tapTime < (LiteJS.tapDelay || 400) ? tapCount + 1 : 1
+				tapTime = now
+				if (!emit(el, "tap" + tapCount, e2, el)) emit(el, "tap", e2, el)
 			}
 			if (len === 1) {
 				if (e) {
-					touchEl = e.currentTarget || e.target
-					touchEv.X = e.clientX
-					touchEv.Y = e.clientY
+					e0 = e
 					touchPos("left", "offsetWidth")
 					touchPos("top", "offsetHeight")
-					if (e.button === 2 || matches(touchEl, "INPUT,TEXTAREA,SELECT,.no-drag")) return
+					if (e.button === 2 || matches(el, "INPUT,TEXTAREA,SELECT,.no-drag")) return
 					touchTick = setTimeout(moveOne, LiteJS.holdDelay || 800, e, 1)
 				}
 				moveOne(e || touches[0])
@@ -1537,15 +1538,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			;(len === 1 ? addEvent : rmEvent)(document, MOVE, moveOne)
 			;(len === 2 ? addEvent : rmEvent)(document, MOVE, moveTwo)
 			function touchPos(name, offset) {
-				var val = (
-					touchEl.getBBox ?
-					touchEl.getAttributeNS(NUL, name == "top" ? "y":"x") :
-					touchEl.style[name]
-				)
-				touchEv[name] = parseInt(val, 10) || 0
-				if (val && val.indexOf("%") > -1) {
-					touchEv[name] *= touchEl.parentNode[offset] / 100
-				}
+				var val = getAttr(el, name == "top" ? "y" : "x") || getComputedStyle(el)[name]
+				, num = parseInt(val, 10) || 0
+				e0[name] = val && val.indexOf("%") > -1 ? num * el.parentNode[offset] / 100 : num
 			}
 		}
 		function touchUp(e) {
@@ -1563,7 +1558,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			// alt+wheel may be OS level zoom, use shiftKey as alternative
 			if (!touches[0]) {
 				var ev = e.ctrlKey ? "pinch" : e.altKey || e.shiftKey ? "rotate" : UNDEF
-				if (ev && emit(e.currentTarget || e.target, ev, e, e.deltaY/20, 0)) {
+				if (ev && (e.diff = e.deltaY / 20, e.angle = 0, emit(el, ev, e, el))) {
 					return eventStop(e)
 				}
 			}
@@ -1573,21 +1568,23 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			if (touches[0].buttons && touches[0].buttons !== (e.buttons || [0, 1, 4, 2][e.which || 0])) {
 				return touchUp(e)
 			}
-			touchEv.x = e.clientX - touchEv.X
-			touchEv.y = e.clientY - touchEv.Y
-			touchEv.leftPos = touchEv.x + touchEv.left
-			touchEv.topPos  = touchEv.y + touchEv.top
+			e.x0 = e0.clientX
+			e.y0 = e0.clientY
+			e.dx = e.clientX - e.x0
+			e.dy = e.clientY - e.y0
+			e.ex = e.dx + e0.left
+			e.ey = e.dy + e0.top
 			if (!touchMode) {
-				var evs = touchEl._e
+				var evs = el._e
 				touchMode = (
-					haveEv("pan", touchEv.x > 10 || touchEv.x < -10 || touchEv.y > 10 || touchEv.y < -10) ||
+					haveEv("pan", e.dx > 10 || e.dx < -10 || e.dy > 10 || e.dy < -10) ||
 					haveEv("hold", fromTimer)
 				)
 				if (!touchMode) return
 				clearTimeout(touchTick)
-				emit(touchEl, touchMode + START, e, touchEv, touchEl)
+				emit(el, touchMode + START, e, el)
 			}
-			emit(touchEl, touchMode, e, touchEv, touchEl)
+			emit(el, touchMode, e, el)
 			function haveEv(name, set) {
 				return set && (evs[name] || evs[name + START] || evs[name + END]) && name
 			}
@@ -1595,19 +1592,26 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		function moveTwo(e) {
 			touches[ touches[0].pointerId == e.pointerId ? 0 : 1] = e
 			var diff
-			, x = touchEv.X - touches[1].clientX
-			, y = touchEv.Y - touches[1].clientY
+			, x = e0.clientX - touches[1].clientX
+			, y = e0.clientY - touches[1].clientY
 			, dist = Math.sqrt(x*x + y*y) | 0
 			, angle = Math.atan2(y, x)
 
 			if (touchDist !== UNDEF) {
 				diff = dist - touchDist
-				if (diff) emit(touchEl, "pinch", e, diff, angle)
+				if (diff) {
+					e.diff = diff
+					e.angle = angle
+					emit(el, "pinch", e, el)
+				}
 				// GestureEvent onGestureChange: function(e) {
 				//	e.target.style.transform =
 				//		'scale(' + e.scale  + startScale  + ') rotate(' + e.rotation + startRotation + 'deg)'
 				diff = angle - touchAngle
-				if (diff) emit(touchEl, "rotate", e, diff * (180/Math.PI))
+				if (diff) {
+					e.diff = diff * (180/Math.PI)
+					emit(el, "rotate", e, el)
+				}
 			}
 			touchDist = dist
 			touchAngle = angle
@@ -1667,28 +1671,27 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 					}
 					return
 				}
-				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 result, arr = ("" + name).split(splitRe), i = 0, len = arr.length; i < len; i++) {
-						if (arr[i]) {
-							result = fn(el, arr[i], isArr(val) ? val[i] : val, data)
-							if (!prepareVal && data > 0) f(el, name, result, "", data)
+				var result, node
+				, arr = ("" + name).split(splitRe)
+				, i = 0, len = arr.length
+				, value = prepareVal && (selector || isStr(val)) ? function(e, mem, target) {
+					target = selector ? closest(e.target, selector) : el
+					if (target) {
+						if (isStr(val)) emit.apply(NUL, [elScope(target).$ui, val, e, target].concat(data))
+						else if (isFn(val)) val.apply(target, [e, target].concat(data))
+					}
+				} : val
+				, els = !prepareVal && selector ? findAll(el, selector) : isArr(el) ? el : [ el ]
+				for (; (node = els[i++]); ) {
+					for (delay = 0; delay < len; delay++) {
+						if (arr[delay]) {
+							result = fn(node, arr[delay], isArr(value) ? value[delay] : value, data)
+							if (!prepareVal && data > 0) f(node, 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)) {
@@ -1784,7 +1787,10 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		}), function(res) {
 			res = res.concat(sources, next && next.src && next.innerHTML)
 			if (res[sources.length = 0]) {
-				if (!parser) LiteJS.ui = LiteJS()
+				if (!parser) {
+					var m = res.join("\n").match(/\n%ui\s+(\{[\s\S]*)/)
+					LiteJS.ui = LiteJS(m && Function("return " + m[1])())
+				}
 				each(res, parser)
 			}
 			if (isFn(next)) next()