@litejs/ui 25.10.0 → 26.2.0

package/README.md

@@ -13,18 +13,30 @@ used on heavy-traffic websites since 2006.
 
  - Dependency-free, weighs around 25kB (+8kB polyfills for old browsers).
  - Written in ES5, compatible with all browsers (including IE5.5).
- - No transpiling/compiling/bundling headache, just write a working code.
+   Works seamlessly in ESM projects too.
+ - No transpiling/compiling/bundling headache, just write working code.
+
+Includes templates, view routing, data binding, i18n, keyboard shortcuts, and touch gestures.
 
 For usage instructions, see [Quick-Start](https://github.com/litejs/litejs/wiki/Quick-Start) guide
 and [wiki](https://github.com/litejs/ui/wiki).
 
+## Examples
+
+ - [Simplest example](https://litejs.github.io/ui/simplest.html) —
+   [source](/litejs/ui/blob/main/test/html/simplest.html)
+ - [Built-in routing](https://litejs.github.io/ui/routed.html) —
+   [source](/litejs/ui/blob/main/test/html/routed.html)
+ - [Full SVG SPA](https://litejs.github.io/ui/svg-spa.html) —
+   [source](/litejs/ui/blob/main/test/html/svg-spa.html)
+
 
 ## Contributing
 
 Follow [Coding Style Guide](https://github.com/litejs/litejs/wiki/Style-Guide),
 run tests `npm install; npm test`.
 
-> Copyright (c) 2006-2024 Lauri Rooden <lauri@rooden.ee>  
+> Copyright (c) 2006-2026 Lauri Rooden <lauri@rooden.ee>  
 [MIT License](https://litejs.com/MIT-LICENSE.txt) |
 [GitHub repo](https://github.com/litejs/ui) |
 [npm package](https://npmjs.org/package/@litejs/ui) |

package/load.js

@@ -56,6 +56,7 @@
 	/*** log ***/
 	, unsentLog = xhr._l = []
 	, lastError
+	// load.js is expected to be the first script to run and no prior window.onerror exists.
 	, onerror = window.onerror = function(message, file, line, col, error) {
 		// Do not send multiple copies of the same error.
 		// file = document.currentScript.src || import.meta.url
@@ -77,12 +78,14 @@
 
 
 	/*** theme ***/
+	, savedTheme
 	, ALT_THEME = "dark"
-	, matchMedia = window.matchMedia
-	, localStorage = window.localStorage
+	try {
+		savedTheme = window.localStorage.theme
+	} catch(e){}
 	if (ALT_THEME == (
-		localStorage && localStorage.theme ||
-		matchMedia && matchMedia("(prefers-color-scheme:dark)").matches && ALT_THEME
+		savedTheme ||
+		(savedTheme = window.matchMedia) && savedTheme("(prefers-color-scheme:dark)").matches && ALT_THEME
 	)) {
 		document.documentElement.className = "is-" + ALT_THEME
 	}
@@ -212,10 +215,7 @@
 						var execResult = (xhr[files[pos].replace(/[^?]+\.|\?.*/g, "")] || execScript)(res[pos], files[pos])
 						if (execResult && execResult.then) {
 							res[pos] = 0
-							return execResult.then(function() {
-								res[pos] = ""
-								exec()
-							})
+							return execResult.then(advanceExec, advanceExec)
 						}
 					} catch(e) {
 						/*** log ***/
@@ -239,6 +239,11 @@
 				}
 			}
 		}
+		function advanceExec(err) {
+			if (err) onerror(err, files[pos])
+			res[pos] = ""
+			exec()
+		}
 	}
 
 	load([
@@ -247,4 +252,3 @@
 	/**/
 
 }(this) // jshint ignore:line
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/ui",
-  "version": "25.10.0",
+  "version": "26.2.0",
   "description": "UI engine for LiteJS full-stack framework",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -24,9 +24,9 @@
     "lj-extract-lang": "./bin/extract-lang.js"
   },
   "scripts": {
-    "test": "lj t"
+    "test": "lj t test/index.js"
   },
   "devDependencies": {
-    "@litejs/cli": "25.5.0"
+    "@litejs/cli": "26.2.1"
   }
 }

package/shim.js

@@ -14,7 +14,6 @@
 
 
 /* global El, xhr, escape */
-/* c8 ignore start */
 !function(window, Date, Function, Infinity, P) {
 
 	// Array#flat()         - Chrome69, Firefox62, Safari12
@@ -26,6 +25,7 @@
 
 	var UNDEF, canCapture, isArray, oKeys
 	, O = window
+	, NULL = null
 	, patched = (window.xhr || window)._p = []
 	, jsonRe = /[\x00-\x1f\x22\x5c]/g
 	, JSONmap = {"\b":"\\b","\f":"\\f","\n":"\\n","\r":"\\r","\t":"\\t","\"":"\\\"","\\":"\\\\"}
@@ -49,6 +49,7 @@
 	, b = "setInterval"
 	, setInterval = (window[b] = window[b])
 	, c
+	/* node:coverage ignore next 19 */
 	, ie678 = !+"\v1" && a < 9 // jshint ignore:line
 	, ie6789 = ie678 || a == 9
 	, ie67 = ie678 && a < 8
@@ -71,6 +72,7 @@
 		wheel: wheelEv
 	}
 	, fixFn = Event.fixFn = {
+		/* node:coverage ignore next 17 */
 		wheel: wheelEv !== "wheel" && function(el, fn) {
 			// DOMMouseScroll Firefox 1 MouseScrollEvent.detail - number of lines to scroll (-32768/+32768 = page up/down)
 			return function(e) {
@@ -119,8 +121,9 @@
 	patch("cancel" + a, "clearTimeout(a)")
 
 
+	/* node:coverage ignore next 8 */
 	if (!IS_NODE && !(onhashchange in window) || ie67) {
-		patch(onhashchange, null)
+		patch(onhashchange, NULL)
 		setInterval(function() {
 			if (lastHash !== (lastHash = location.href.split("#")[1]) && isFn(window[onhashchange])) {
 				window[onhashchange]()
@@ -131,6 +134,7 @@
 	// Missing PointerEvents with Scribble enable on Safari 14
 	// https://mikepk.com/2020/10/iOS-safari-scribble-bug/
 	// https://bugs.webkit.org/show_bug.cgi?id=217430
+	/* node:coverage ignore next 50 */
 	if (!window.PointerEvent) {
 		// IE10
 		if (window[MS + EV]) {
@@ -176,6 +180,7 @@
 					}
 					_fn.call(el, e)
 				}
+				/* node:coverage ignore next 19 */
 				function touchToPointer(e) {
 					var touch
 					, touches = e.changedTouches
@@ -234,7 +239,7 @@
 				return (data[id] = "" + val)
 			},
 			getItem: function(id) {
-				return data[id]
+				return data[id] || NULL
 			},
 			removeItem: function(id) {
 				delete data[id]
@@ -270,7 +275,7 @@
 			// IE 8 serializes `undefined` as `"undefined"`
 			return (
 				isStr(o) ? "\"" + o.replace(jsonRe, jsonFn) + "\"" :
-				o !== o || o == null || o === Infinity || o === -Infinity ? "null" :
+				o !== o || o == NULL || o === Infinity || o === -Infinity ? "null" :
 				typeof o == "object" ? (
 					isFn(o.toJSON) ? stringify(o.toJSON()) :
 					isArray(o) ? "[" + o.map(stringify) + "]" :
@@ -290,11 +295,14 @@
 	// Since Chrome23/Firefox21 parseInt parses leading-zero strings as decimal, not octal
 	b = patch("g:parseInt", "return X(a,(b>>>0)||(Y.test(''+a)?16:10))", _parseInt("08") !== 8, _parseInt, /^\s*[-+]?0[xX]/)
 
+	O = Math
+	patch("log10", "return X(a)/Y", 0, O.log, O.LN10)
+
+	a = O.pow
 	O = Number
 	patch("parseInt", b)
 	patch("parseFloat", parseFloat)
 	patch("isNaN", "return a!==a")
-	a = Math.pow
 	c = "_SAFE_INTEGER"
 	patch("EPSILON", a(2, -52))
 	patch(
@@ -310,6 +318,7 @@
 	O = O[P]
 	// IE8 toJSON does not return milliseconds
 	// FF37 returns invalid extended ISO-8601, `29349-01-26T00:00:00.000Z` instead of `+029349-01-26T00:00:00.000Z`
+	/* node:coverage ignore next */
 	b = O[a = "toISOString"] && new Date(8e14)[a]().length < 27 || ie678
 	patch(a, patch("toJSON", [
 		"a=t.getUTCFullYear();if(a!==a)throw RangeError('Invalid time');return(b=a<0?'-':a>9999?'+':'')+X(a<0?-a:a,'-',b?6:4", "Month()+1,'-'", "Date(),'T'",
@@ -352,7 +361,7 @@
 
 	// TODO:2021-02-25:lauri:Accept iterable objects
 	//patch("from", "a=S.call(a);return b?a.map(b,c):a")
-	patch("from", "a=X(a)?a.split(''):b?a:S.call(a);return b?a.map(b,c):a", 0, isStr)
+	patch("from", "a=X(a)?a.split(''):S.call(a);return b?a.map(b,c):a", 0, isStr)
 	patch("of", "return S.call(A)")
 
 	O = O[P]
@@ -406,9 +415,13 @@
 	patch("sendBeacon", function(url, data) {
 		// The synchronous XMLHttpRequest blocks the process of unloading the document,
 		// which in turn causes the next navigation appear to be slower.
-		url = xhr("POST", url, xhr.unload)
-		url.setRequestHeader("Content-Type", "text/plain;charset=UTF-8")
-		url.send(data)
+		try {
+			url = xhr("POST", url, xhr.unload)
+			url.setRequestHeader("Content-Type", "text/plain;charset=UTF-8")
+			url.send(data)
+			return true
+		} catch(e){}
+		return false
 	})
 
 	// The HTML5 document.head DOM tree accessor
@@ -441,8 +454,9 @@
 	, closest = patch("closest", walk.bind(window, "parentNode", 1))
 	, matches = patch("matches", "return!!X(a)(t)", 0, selectorFn)
 
+	/* node:coverage ignore next 13 */
 	try {
-		O[a = "addEventListener"]("t", null, Object.defineProperties({}, {
+		O[a = "addEventListener"]("t", NULL, Object.defineProperties({}, {
 			capture: { get: function() { canCapture = 1 } }
 		}))
 		b = "removeEventListener"
@@ -456,6 +470,7 @@
 	// https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel
 	// - IE8 always prevents the default of the mousewheel event.
 	patch(a, "return(t.attachEvent('on'+a,b=X(t,a,b)),b)", 0, function(el, ev, fn) {
+		/* node:coverage ignore next 8 */
 		return function() {
 			var e = new Event(ev)
 			if (e.clientX !== UNDEF) {
@@ -474,8 +489,8 @@
 
 
 	function selectorFn(str) {
-		if (str != null && !isStr(str)) throw Error("Invalid selector")
-		return selectorCache[str || ""] ||
+		if (!str || !isStr(str)) throw Error("Invalid selector")
+		return selectorCache[str] ||
 		(selectorCache[str] = Function("m,c", "return function(_,v,a,b){return " +
 			str.split(selectorSplitRe).map(function(sel) {
 				var relation, from
@@ -510,7 +525,7 @@
 			if (first) return el
 			out.push(el)
 		}
-		return first ? null : out
+		return first ? NULL : out
 	}
 
 	function find(node, sel, first) {
@@ -523,6 +538,7 @@
 
 	// ie6789
 	// The documentMode is an IE only property, supported from IE8.
+	/* node:coverage ignore next 8 */
 	if (ie678) {
 		try {
 			// Remove background image flickers on hover in IE6
@@ -535,12 +551,13 @@
 	function isFn(value) {
 		return typeof value === "function"
 	}
-	function isStr(value) {
-		return typeof value === "string"
-	}
+	/* node:coverage ignore next 3 */
 	function isObj(obj) {
 		return !!obj && obj.constructor === Object
 	}
+	function isStr(value) {
+		return typeof value === "string"
+	}
 	function nop() {}
 
 	function patch(key_, src, force, arg1, arg2) {
@@ -552,7 +569,3 @@
 		))
 	}
 }(this, Date, Function, Infinity, "prototype") // jshint ignore:line
-/* c8 ignore stop */
-
-
-

package/ui.js

@@ -3,6 +3,10 @@
 
 /* global escape, navigator, 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")
 /**/
@@ -13,7 +17,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 
 	var UNDEF, parser, pushBase, styleNode
 	, NUL = null
-	// THIS will be undefined in strict mode and window in sloppy mode
+	// THIS will be `undefined` in strict mode and `window` in sloppy mode
 	, THIS = this
 	, html = document.documentElement
 	, body = document.body
@@ -22,11 +26,13 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	, plugins = {}
 	, sources = []
 	, assign = Object.assign
+	// bind(fn, ctx, ...args)() calls fn.call(ctx, ...args); closureless partial application
 	, bind = El.bind.bind(El.call)
 	, create = Object.create
 	, hasOwn = bind(plugins.hasOwnProperty)
 	, isArr = Array.isArray
 	, slice = emptyArr.slice
+	// Closureless utilities via Function() to avoid capturing outer scope
 	, 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)")
@@ -39,7 +45,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	, 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"
+	, txtAttr = El.T = "textContent" in html ? "textContent" : "innerText"
 	, elTxt = function(el, txt) {
 		if (el[txtAttr] !== txt) el[txtAttr] = txt
 	}
@@ -51,9 +57,12 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 
 	, elSeq = 0
 	, elCache = {}
+	// Parses ";name! args" binding expressions from _b attribute
 	, renderRe = /[;\s]*([-.\w$]+)(?:(!?)[ :]*((?:(["'\/])(?:\\.|[^\\])*?\4|[^;])*))?/g
+	// Parses CSS selectors: .class #id [attr=val] :pseudo
 	, selectorRe = /([.#:[])([-\w]+)(?:([~^$*|]?)=(("|')(?:\\.|[^\\])*?\5|[-\w]+))?]?/g
 	, fnCache = {}
+	// Matches tokens to exclude from scope variable extraction: strings, keywords, member access, labels
 	, 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
 	, bindingsCss = acceptMany(function(el, key, val, current) {
@@ -75,11 +84,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		set: acceptMany(setAttr),
 		txt: elTxt,
 		/*** form ***/
-		val: function elVal(el, val, input) {
-			try {
-				if (!el || !input && document.activeElement === el) return
-			} catch (e) {}
-			var step, key, value
+		val: function elVal(el, val, ignoreFocus) {
+			if (!el) return
+			var input, step, key, value
 			, i = 0
 			, type = el.type
 			, opts = el.options
@@ -95,7 +102,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				// 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)
+					value = elVal(input, val != UNDEF ? val[key] : UNDEF, ignoreFocus)
 					if (value !== UNDEF) {
 						step = opts
 						replace(/\[(.*?)\]/g, replacer, key)
@@ -106,6 +113,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			}
 
 			if (val !== UNDEF) {
+				try {
+					if (!ignoreFocus && document.activeElement === el) return
+				} catch (e) {}
 				if (opts) {
 					for (value = (isArr(val) ? val : [ val ]).map(String); (input = opts[i++]); ) {
 						input.selected = value.indexOf(input.value) > -1
@@ -146,11 +156,13 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		}
 		/**/
 	}
+	// Stores "!" once-bindings; index used in compiled fn to strip from _b after first run
 	, bindOnce = []
 	, globalScope = {
 		El: El,
 		$b: bindings
 	}
+	// Array-like wrapper methods for multi-element collections (mixed into arrays by ElWrap)
 	, elArr = {
 		append: function(el) {
 			var elWrap = this
@@ -168,6 +180,8 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		}
 	}
 
+	// fixEv: maps custom event names to native (e.g., touch→"" for non-DOM events)
+	// fixFn: transforms event handlers for browser compat (e.g., touch→pointer init)
 	, Event = window.Event || window
 	, fixEv = Event.fixEv || (Event.fixEv = {})
 	, fixFn = Event.fixFn || (Event.fixFn = {})
@@ -260,6 +274,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		}
 	}
 
+	// Events stored as triplets [scope, _origin, fn] in emitter._e[type]
+	// _origin tracks the unwrapped fn before fixFn (for rmEvent lookup)
+	// emptyArr substitutes window as emitter (can't safely add _e property to window)
 	function on(emitter, type, fn, scope, _origin) {
 		if (emitter && type && fn) {
 			if (emitter === window) emitter = emptyArr
@@ -343,6 +360,10 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			root: body
 		}, opts)
 
+		// View properties:
+		//   .r  route pattern    .e  template element    .p  parent view
+		//   .c  active child     .o  rendered clone      .f  file dependencies (csv)
+		//   .s  route sequence#  .kb keyboard shortcuts
 		function View(route, el, parent) {
 			var view = views[route]
 			if (view) {
@@ -423,6 +444,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			}
 		})
 
+		// params._p pending async count; ._v current view in traversal; ._c view to close; ._t navigation timestamp
 		function bubbleUp(params) {
 			var parent
 			, view = lastView
@@ -614,6 +636,11 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			}
 		}
 
+		// Plugin properties:
+		//   .n  name           .x  parent view name  .u  parent DOM element
+		//   .e  container el   .d  done callback     .c  saved elCache (for %el/%view)
+		// When proto is a function, plugin accumulates raw text:
+		//   .r  raw handler    .t  accumulated text   .o  original op+text  .s  separator
 		function addPlugin(name, proto, expectContent) {
 			plugins[name] = Plugin
 			function Plugin(parent, op, sep) {
@@ -1179,8 +1206,8 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		rate: rate,
 		replace: elReplace,
 		scope: elScope,
-		scrollLeft: scrollLeft,
-		scrollTop: scrollTop,
+		scrollLeft: bind(scrollPos, NUL, "pageXOffset", "scrollLeft"),
+		scrollTop: bind(scrollPos, NUL, "pageYOffset", "scrollTop"),
 		step: step,
 		stop: eventStop
 	})
@@ -1242,7 +1269,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 					el = before.parentNode
 				}
 				el.insertBefore(child, (
-					isNum(before) ? el.childNodes[before < 0 ? el.childNodes.length - before - 2 : before] :
+					isNum(before) ? el.childNodes[before < 0 ? el.childNodes.length + before : before] :
 					isArr(before) ? before[0] :
 					before
 				) || NUL)
@@ -1371,6 +1398,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 		hydrate(node, "data-out", scope)
 	}
 
+	// Reads binding expression from DOM attr (_b or data-out), compiles via makeFn, executes.
+	// Caches expr on node[attr] to avoid re-reading DOM; true = no bindings (already processed).
+	// Returns truthy if binding replaced the element (if/each), so render() skips children.
 	function hydrate(node, attr, scope) {
 		var fn
 		, expr = node[attr] || (node[attr] = setAttr(node, attr, "") || true)
@@ -1381,6 +1411,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			throw e + "\n" + attr + ": " + expr
 		}
 	}
+	// Compiles binding expression string (e.g. ";txt foo;cls 'active',bar") into a Function.
+	// Extracts free variable names and aliases them from scope ($s.varName).
+	// raw parameter bypasses the $s guard wrapper (used by i18n getExt).
 	function makeFn(fn, raw, i) {
 		fn = raw || "$s&&(" + replace(renderRe, function(match, name, op, args) {
 			return (
@@ -1398,7 +1431,7 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 
 	/*** kb ***/
 	var kbMaps = []
-	, kbMod = LiteJS.kbMod = /^(Mac|iP)/.test(navigator.platform) ? "metaKey" : "ctrlKey"
+	, 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)
 
 	El.addKb = addKb
@@ -1610,6 +1643,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 	function nearest(el, sel) {
 		return el ? find(el, sel) || nearest(el.parentNode, sel) : NUL
 	}
+	// Wraps fn to accept: space-separated names, object maps {name:val}, CSS selectors, delays.
+	// prepareVal=1: wraps val as event delegate (string val→emit on view, fn+selector→delegation)
+	// After arg normalization, selector is reused as element array, delay as loop counter.
 	function acceptMany(fn, prepareVal) {
 		return function f(el, name, val, selector, delay, data) {
 			if (el && name) {
@@ -1634,9 +1670,9 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 				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; ) {
+					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 - 1] : val, data)
+							result = fn(el, arr[i], isArr(val) ? val[i] : val, data)
 							if (!prepareVal && data > 0) f(el, name, result, "", data)
 						}
 					}
@@ -1729,11 +1765,8 @@ console.log("LiteJS is in debug mode, but it's fine for production")
 			}
 		}
 	}
-	function scrollLeft() {
-		return window.pageXOffset || html.scrollLeft || body.scrollLeft || 0
-	}
-	function scrollTop() {
-		return window.pageYOffset || html.scrollTop || body.scrollTop || 0
+	function scrollPos(page, key) {
+		return window[page] || html[key] || body[key] || 0
 	}
 	function step(num, factor, mid) {
 		var x = ("" + factor).split(".")