@litejs/ui 24.5.0 → 24.11.0

package/README.md

@@ -1,26 +1,30 @@
 
-[3]: https://badgen.net/packagephobia/install/@litejs/ui
+[3]: https://packagephobia.now.sh/badge?p=@litejs/ui
 [4]: https://packagephobia.now.sh/result?p=@litejs/ui
 [5]: https://badgen.net/badge/icon/Buy%20Me%20A%20Tea/orange?icon=kofi&label
 [6]: https://www.buymeacoffee.com/lauriro
-[wiki]: https://github.com/litejs/ui/wiki
 
 
 LiteJS UI – [![Size][3]][4] [![Buy Me A Tea][5]][6]
 =========
 
-LiteJS UI is an old-school framework for making high-quality web UIs.
+LiteJS UI is an old-school framework for high-quality web UIs,
+used on heavy-traffic websites since 2006.
 
- - Dependency-free, weighs around 20KB (+8KB polyfills if needed).
+ - 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, simply write a working code.
+ - No transpiling/compiling/bundling headache, just write a working code.
 
-See [wiki][] for more information.
+For usage instructions, see [Quick-Start](https://github.com/litejs/litejs/wiki/Quick-Start) guide
+and [wiki](https://github.com/litejs/ui/wiki).
 
 
-## Licence
+## Contributing
 
-Copyright (c) 2006-2024 Lauri Rooden <lauri@rooden.ee>  
+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>  
 [MIT License](https://litejs.com/MIT-LICENSE.txt) |
 [GitHub repo](https://github.com/litejs/ui) |
 [npm package](https://npmjs.org/package/@litejs/ui) |

package/css/base.css

@@ -17,7 +17,6 @@
 
 *, *:before, *:after {
 	color: inherit;
-	text-decoration: inherit;
 	-webkit-box-sizing: inherit;          /* 3 */
 	   -moz-box-sizing: inherit;
 	        box-sizing: inherit;

package/css/grid.css

@@ -54,6 +54,19 @@ Expects box-sizing: border-box;
 .h1 , .md .md-h1 , .lg .md-h1 , .lg .lg-h1  { height: 8.3333%; }
 
 
+.l12, .md .md-l12, .lg .md-l12, .lg .lg-l12 { left: 100%; }
+.l11, .md .md-l11, .lg .md-l11, .lg .lg-l11 { left: 91.6667%; }
+.l10, .md .md-l10, .lg .md-l10, .lg .lg-l10 { left: 83.3333%; }
+.l9,  .md .md-l9,  .lg .md-l9,  .lg .lg-l9  { left: 75%; }
+.l8,  .md .md-l8,  .lg .md-l8,  .lg .lg-l8  { left: 66.6667%; }
+.l7,  .md .md-l7,  .lg .md-l7,  .lg .lg-l7  { left: 58.3333%; }
+.l6,  .md .md-l6,  .lg .md-l6,  .lg .lg-l6  { left: 50%; }
+.l5,  .md .md-l5,  .lg .md-l5,  .lg .lg-l5  { left: 41.6667%; }
+.l4,  .md .md-l4,  .lg .md-l4,  .lg .lg-l4  { left: 33.3333%; }
+.l3,  .md .md-l3,  .lg .md-l3,  .lg .lg-l3  { left: 25%; }
+.l2,  .md .md-l2,  .lg .md-l2,  .lg .lg-l2  { left: 16.6667%; }
+.l1,  .md .md-l1,  .lg .md-l1,  .lg .lg-l1  { left: 8.3333%; }
+
 /*
 .col:first-child:nth-last-child(2), .col:first-child:nth-last-child(2) ~ .col {
 	width: 50%;

package/css/spacing-4.css

@@ -1,37 +1,37 @@
 
-.p0, .p00, .p01, .p02, .p03, .p04 { padding-top:    0; padding-bottom:    0; }
-.p1, .p10, .p11, .p12, .p13, .p14 { padding-top:  4px; padding-bottom:  4px; }
-.p2, .p20, .p21, .p22, .p23, .p24 { padding-top:  8px; padding-bottom:  8px; }
-.p3, .p30, .p31, .p32, .p33, .p34 { padding-top: 12px; padding-bottom: 12px; }
-.p4, .p40, .p41, .p42, .p43, .p44 { padding-top: 16px; padding-bottom: 16px; }
+.p0,  .p01, .p02, .p03, .p04 { padding-top:    0; padding-bottom:    0; }
+.p10, .p1,  .p12, .p13, .p14 { padding-top:  4px; padding-bottom:  4px; }
+.p20, .p21, .p2,  .p23, .p24 { padding-top:  8px; padding-bottom:  8px; }
+.p30, .p31, .p32, .p3,  .p34 { padding-top: 12px; padding-bottom: 12px; }
+.p40, .p41, .p42, .p43, .p4  { padding-top: 16px; padding-bottom: 16px; }
 
-.p0, .p00, .p10, .p20, .p30, .p40 { padding-left:    0; padding-right:    0; }
-.p1, .p01, .p11, .p21, .p31, .p41 { padding-left:  4px; padding-right:  4px; }
-.p2, .p02, .p12, .p22, .p32, .p42 { padding-left:  8px; padding-right:  8px; }
-.p3, .p03, .p13, .p23, .p33, .p43 { padding-left: 12px; padding-right: 12px; }
-.p4, .p04, .p14, .p24, .p34, .p44 { padding-left: 16px; padding-right: 16px; }
+.p0,  .p10, .p20, .p30, .p40 { padding-left:    0; padding-right:    0; }
+.p01, .p1,  .p21, .p31, .p41 { padding-left:  4px; padding-right:  4px; }
+.p02, .p12, .p2,  .p32, .p42 { padding-left:  8px; padding-right:  8px; }
+.p03, .p13, .p23, .p3,  .p43 { padding-left: 12px; padding-right: 12px; }
+.p04, .p14, .p24, .p34, .p4  { padding-left: 16px; padding-right: 16px; }
 
-.m0, .m00, .m01, .m02, .m03, .m04 { margin-top:    0; margin-bottom:    0; }
-.m1, .m10, .m11, .m12, .m13, .m14 { margin-top:  4px; margin-bottom:  4px; }
-.m2, .m20, .m21, .m22, .m23, .m24 { margin-top:  8px; margin-bottom:  8px; }
-.m3, .m30, .m31, .m32, .m33, .m34 { margin-top: 12px; margin-bottom: 12px; }
-.m4, .m40, .m41, .m42, .m43, .m44 { margin-top: 16px; margin-bottom: 16px; }
+.m0,  .m01, .m02, .m03, .m04 { margin-top:    0; margin-bottom:    0; }
+.m10, .m1,  .m12, .m13, .m14 { margin-top:  4px; margin-bottom:  4px; }
+.m20, .m21, .m2,  .m23, .m24 { margin-top:  8px; margin-bottom:  8px; }
+.m30, .m31, .m32, .m3,  .m34 { margin-top: 12px; margin-bottom: 12px; }
+.m40, .m41, .m42, .m43, .m4  { margin-top: 16px; margin-bottom: 16px; }
 
-.m0, .m00, .m10, .m20, .m30, .m40 { margin-left:    0; margin-right:    0; }
-.m1, .m01, .m11, .m21, .m31, .m41 { margin-left:  4px; margin-right:  4px; }
-.m2, .m02, .m12, .m22, .m32, .m42 { margin-left:  8px; margin-right:  8px; }
-.m3, .m03, .m13, .m23, .m33, .m43 { margin-left: 12px; margin-right: 12px; }
-.m4, .m04, .m14, .m24, .m34, .m44 { margin-left: 16px; margin-right: 16px; }
+.m0,  .m10, .m20, .m30, .m40 { margin-left:    0; margin-right:    0; }
+.m01, .m1,  .m21, .m31, .m41 { margin-left:  4px; margin-right:  4px; }
+.m02, .m12, .m2,  .m32, .m42 { margin-left:  8px; margin-right:  8px; }
+.m03, .m13, .m23, .m3,  .m43 { margin-left: 12px; margin-right: 12px; }
+.m04, .m14, .m24, .m34, .m4  { margin-left: 16px; margin-right: 16px; }
 
 .grid.p1, .grid.p1 > .row > .col, .grid.p1 > .col { padding: 2px; }
 .grid.p2, .grid.p2 > .row > .col, .grid.p2 > .col { padding: 4px; }
 .grid.p3, .grid.p3 > .row > .col, .grid.p3 > .col { padding: 6px; }
 .grid.p4, .grid.p4 > .row > .col, .grid.p4 > .col { padding: 8px; }
-.grid.p1 > .grid, .grid.p2 > .grid, .grid.p3 > .grid, .grid.p4 > .grid { padding: 0; }
+.grid > .grid { padding: 0; }
 
 .grid.b1, .grid.b1 > .row > .col, .grid.b1 > .col { border: 2px solid transparent; }
 .grid.b2, .grid.b2 > .row > .col, .grid.b2 > .col { border: 4px solid transparent; }
 .grid.b3, .grid.b3 > .row > .col, .grid.b3 > .col { border: 6px solid transparent; }
 .grid.b4, .grid.b4 > .row > .col, .grid.b4 > .col { border: 8px solid transparent; }
-.grid.b1 > .grid, .grid.b2 > .grid, .grid.b3 > .grid, .grid.b4 > .grid { border: none; }
+.grid > .grid { border: none; }
 

package/el/Pie.tpl

@@ -70,7 +70,7 @@
 %svg Chart-line
 	g.Chart-line
 		;svgToLast
-		path ;svgLine: points, {radius: radius}
+		path ;svgLine points, {radius: radius}
 
 %svg Chart-axes
 	g.labels.x-labels

package/el/Slider.tpl

@@ -206,7 +206,7 @@
 			var diff = vert ? offset - e.pageY : e.pageX - offset
 			diff = (diff > maxPx ? maxPx : (diff < minPx ? minPx : diff))
 			set((diff / px) + min, e, diff)
-			return Event.stop(e)
+			return El.stop(e)
 		}
 		function stop(e) {
 			if (drag) {

package/el/crop.ui

@@ -26,14 +26,15 @@
 
 %el Crop
 	.Crop
-		@pan function(e){}
+		@pan function(e, touchEv, touchEl) {
+			El.css(touchEl, "top,left", [touchEv.topPos + "px", touchEv.leftPos + "px"],"img")
+			return El.stop(e)
+		}
 		@pinch function(zoom){
 			var imgWidth = $el.offsetWidth
 			scale(0,0)
-			El.on($el, "wheel", scale)
 			return scale
 			function scale(e, delta) {
-				console.log("pinch", arguments)
 				zoom += delta / 5
 				if (zoom < .5) zoom = .5
 				else if (zoom > 50) zoom = 50

package/el/dialog.ui

@@ -67,7 +67,7 @@
 		}
 		var sound, vibrate
 		, code = ""
-		, el = El("Modal")
+		, el = El("Dialog")
 		, scope = Object.assign(El.scope(el, el), opts)
 		, kbMap = {}
 		, body = document.body
@@ -81,9 +81,10 @@
 			if (a.key) kbMap[a.key] = resolve.bind(el, el, a.action)
 		}
 		El.cls(blurEl, "Modal--blur")
-		El.cls(el.lastChild, "Modal--blur", false, 1)
-		El.append(body, el)
-		El.render(el, scope)
+		var mm = El("Modal")
+		El.append(mm, el)
+		El.append(body, mm)
+		El.render(mm)
 		if (scope.code) {
 			$$(".js-numpad", el).on("click", numpad)
 			kbMap.backspace = kbMap.del = kbMap.num = numpad
@@ -92,8 +93,8 @@
 		$$(".js-btn", el).on("click", resolve)
 		$ui.one("show", resolve)
 		if (scope.bgClose) El.on(el, "click", resolve)
-		El.on(el, "wheel", Event.stop)
-		El.on(el.lastChild, "click", Event.stop)
+		El.on(el, "wheel", El.stop)
+		El.on(el.lastChild, "click", El.stop)
 		if (scope.vibrate && navigator.vibrate) {
 			vibrate = navigator.vibrate(scope.vibrate)
 		}
@@ -119,7 +120,7 @@
 					inputMd: El.val($(".js-inputMd", el)),
 					select: El.val($(".js-select", el))
 				}
-				El.kill(el, "transparent")
+				El.kill(mm, "transparent")
 				El.cls(blurEl, "Modal--blur", el = false)
 				if (action && next) {
 					if (typeof next === "function") next(action, result)
@@ -147,7 +148,7 @@
 	})
 
 %el Dialog
-.Dialog.grid.p2.anim Dialog
+.Dialog.grid.p2.anim
 	.col.ts3 ;txt!_(title, map)
 	.col.js-body ;md!_(body, map)
 	.col
@@ -160,27 +161,9 @@
 				;class!"is-" + action.action, action.action
 
 %el Modal
-	.Modal.max.fix.anim
-		.Modal-bg.max.abs
-		.Modal-content.Modal--blur.grid.p2.anim
-			.row
-				;if: input
-				.col>input.field.js-input
-			.row
-				;if: $d.inputMd!=null
-				.col
-					textarea.field.js-inputMd
-						@keyup [this.parentNode.nextSibling.nextSibling], "renderMd"
-						;val: inputMd
-				.col.ts3 Preview
-				.p4
-					;md: inputMd
-			.row
-				;if: select
-				.col
-					select.field.js-select
-						;list: select, [""]
-						option
-							;val:: item.id
-							;txt:: _(item.name)
+.Modal.max.fix.anim
+	.Modal-bg.max.abs
+	.Modal-content.Modal--blur.grid.p2.anim
+		;cls!"Modal--blur",!1,1
+		%slot
 

package/el/material.tpl

@@ -197,6 +197,7 @@
 	!function($ui) {
 		var menuTarget, menuEl, tipTarget, tipEl, tick, wait
 		, ripple = El(".waves-ripple")
+		, html = document.documentElement
 		El.near = near
 		function near(source, target, x, y, margin) {
 			var rect = target.getBoundingClientRect()
@@ -242,7 +243,7 @@
 				left: (left < 0 ? 0 : left) + "px"
 			})
 		}
-		El.on(document.body, "mouseover", onOver)
+		El.on(html, "mouseover", onOver)
 		El.on(window, "focusin", onOver)
 		$ui.on("show", closeTooltip)
 		function onOver(e) {
@@ -301,7 +302,7 @@
 		$ui.on("ping", closeMenu)
 		$ui.on("closeMenu", closeMenu)
 		$ui.on("showMenu", function(e, target, menu, x, y, margin) {
-			Event.stop(e)
+			El.stop(e)
 			var close = menuEl && menuTarget == target
 			closeMenu()
 			if (close) return
@@ -322,8 +323,8 @@
 				})
 			}
 		})
-		El.on(document.body, "click", closeMenu)
-		El.on(document.body, "pointerdown", pointerdown)
+		El.on(html, "click", closeMenu)
+		El.on(html, "pointerdown", pointerdown)
 		function pointerdown(e) {
 			var target = e.target
 			if (!El.hasClass(target, "waves") || target.disabled) return
@@ -346,7 +347,7 @@
 			end()
 			wait = 1
 			tick = setTimeout(end, 800)
-			El.one(document.body, "pointerup", end)
+			El.one(html, "pointerup", end)
 			ripple.offsetTop // force repaint
 			El.cls(ripple, "waves-ripple--play")
 		}

package/load.js

@@ -19,13 +19,14 @@
 
 
 !function(window, Function) {
-	xhr._s = new Date()
-	var rewrite = {
+	var initTime = xhr._t = +new Date()
+	, rewrite = {
 		//!{loadRewrite}
 	}
 	// Move setTimeout from window.prototype to window object for future patching in IE9.
-	// Fallback to global.setTimeout and expose xhr._c for tests.
-	, setTimeout_ = (window.setTimeout = window.setTimeout) /*** debug ***/ || setTimeout
+	, setTimeout_ = window.setTimeout = setTimeout
+	/*** debug ***/
+	// Expose xhr._c for testing.
 	, loaded = xhr._c = {}
 	/*/
 	, loaded = {}
@@ -48,44 +49,40 @@
 	/*/
 		eval
 	/**/
+	, nop = Function()
 
 	/*** reuse ***/
 	// XHR memory leak mitigation
 	, xhrs = []
 	/**/
 
+	, unsentLog = xhr._l = []
 	/*** onerror ***/
 	, lastError
-	, unsentErrors = xhr._e = []
 	, 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
 		if (lastError !== (lastError =
 			[ file
 			, line
-			, col || (window.event || unsentErrors).errorCharacter || "?"
+			, col || (window.event || unsentLog).errorCharacter || "?"
 			, message
 			].join(":")
-		) && 2 > unsentErrors.push(
-			[ +new Date()
-			, lastError
-			, error && (error.stack || error.stacktrace) || "-"
-			, "" + location
-			]
-		)) setTimeout_(sendErrors, 307)
-	}
-
-	function sendErrors() {
-		if (xhr.err) {
-			xhr.err(unsentErrors)
-		} else {
-			setTimeout_(sendErrors, 1307)
-		}
+		)) log("e", lastError, (error && (error.stack || error.stacktrace) || "-") + "\n" + location)
 	}
 	/*/
 	, onerror = nop
 	/**/
 
+	xhr.log = log
+	function log(type, msg, extra) {
+		if (unsentLog.push([ new Date() - initTime, type, msg, extra ]) < 2) sendLog()
+	}
+
+	function sendLog() {
+		setTimeout_(xhr.sendLog || sendLog, 1307)
+	}
+
 	// next === true is for sync call
 
 	window.xhr = xhr
@@ -205,7 +202,7 @@
 					files[pos] = 0
 				} else {
 					try {
-						var execResult = (xhr[files[pos].replace(/[^?]+\.|\?.*/g, "")] || execScript)(res[pos])
+						var execResult = (xhr[files[pos].replace(/[^?]+\.|\?.*/g, "")] || execScript)(res[pos], files[pos])
 						if (execResult && execResult.then) {
 							res[pos] = 0
 							return execResult.then(function() {
@@ -240,6 +237,5 @@
 	])
 	/**/
 
-	function nop() {}
 }(this, Function) // jshint ignore:line
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litejs/ui",
-  "version": "24.5.0",
+  "version": "24.11.0",
   "description": "UI engine for LiteJS full-stack framework",
   "license": "MIT",
   "author": "Lauri Rooden <lauri@rooden.ee>",
@@ -13,7 +13,7 @@
   "homepage": "https://litejs.com",
   "repository": "github:litejs/ui",
   "bugs": "https://github.com/litejs/dev/issues",
-  "main": "index.js",
+  "main": "ui.js",
   "files": [
     "*.js",
     "binding",
@@ -26,7 +26,7 @@
     "test": "lj test test/index.js --tz='Europe/Tallinn' --brief --sources=load.js,require.js,index.js"
   },
   "devDependencies": {
-    "@litejs/cli": "24.0.0-rc.3",
-    "@litejs/dom": "23.12.1"
+    "@litejs/cli": "24.10.0",
+    "@litejs/dom": "24.8.0"
   }
 }

package/{shim/index.js → shim.js}

@@ -38,8 +38,6 @@
 	, navigator = patch("navigator")
 	/*/
 	, document = window.document
-	, location = window.location
-	, navigator = window.navigator
 	, IS_NODE = false
 	/**/
 	, html = document.documentElement
@@ -68,6 +66,7 @@
 		"DOMMouseScroll"                            // older Firefox
 	)
 	, fixEv = Event.fixEv = {
+		pagehide: "onpagehide" in window ? UNDEF : "beforeunload",
 		wheel: wheelEv
 	}
 	, fixFn = Event.fixFn = {
@@ -121,8 +120,7 @@
 	if (!IS_NODE && !(onhashchange in window) || ie67) {
 		patch(onhashchange, null)
 		setInterval(function() {
-			var cur = location.href.split("#")[1]
-			if (lastHash !== cur && isFn(window[onhashchange])) {
+			if (lastHash !== (lastHash = location.href.split("#")[1]) && isFn(window[onhashchange])) {
 				window[onhashchange]()
 			}
 		}, 60)
@@ -202,33 +200,33 @@
 		try {
 			// FF4-beta with dom.storage.enabled=false throws for accessing windows.localStorage
 			// iOS5 private browsing throws for localStorage.setItem()
-			return window[name += "Storage"].setItem(name, name)
+			window[name += "Storage"].setItem(name, name)
+			return window[name].removeItem(name)
 		} catch(e){}
-		/***
-		} else if (el.addBehavior) {
-			// The saveHistory behavior persists only for the current session.
-			// The saveHistory behavior uses one UserData store for the entire document.
-			// Thus, if two elements write the same attribute, the first is overwritten by the second.
-			// The UserData store is saved in an in-memory stream and is not saved to disk.
-			// Therefore, it is not available after the user closes Windows Internet Explorer.
-			//
-			// The userData behavior persists data across sessions, using one UserData store for each object.
-			// The UserData store is persisted in the cache using the save and load methods.
-			// Once the UserData store has been saved, it can be reloaded even if the document has been closed and reopened.
-			//
-			// An ID is required for the userData and saveSnapshot behaviors,
-			// and is recommended for the saveHistory and saveFavorite behaviors.
-			//
-			// https://msdn.microsoft.com/en-us/library/ms531348(v=vs.85).aspx
-			// el.style.behavior = surviveReboot ? "url('#default#userData')" : "url('#default#saveHistory')"
-			el.addBehavior("#default#" + (surviveReboot ? "userData" : "saveHistory"))
-			if (surviveReboot) el.load("persist")
-			value = el.getAttribute(key)
-			save = function() {
-				el.setAttribute(key, El.val(el))
-				if (surviveReboot) el.save("persist")
-			}
-		/**/
+
+		// # IE5 128KB per document
+		//
+		// The `saveHistory` behavior persists data only for the current session,
+		// using one in-memory UserData store for the entire document.
+		// If two elements write the same attribute, the first is overwritten.
+		//
+		// The `userData` behavior persists data across sessions,
+		// using one UserData store for each object, saved in the cache.
+		// Saved UserData can be reloaded even if the document has been closed and reopened.
+		//
+		// An ID is required for userData and saveSnapshot behaviors
+		// and recommended for saveHistory and saveFavorite behaviors.
+		//
+		// https://msdn.microsoft.com/en-us/library/ms531348(v=vs.85).aspx
+		// if (el.addBehavior) {
+		// el.style.behavior = surviveReboot ? "url('#default#userData')" : "url('#default#saveHistory')"
+		// el.addBehavior("#default#" + (surviveReboot ? "userData" : "saveHistory"))
+		// if (surviveReboot) el.load("persist")
+		// value = el.getAttribute(key)
+		// save = function() {
+		// 	el.setAttribute(key, El.val(el))
+		// 	if (surviveReboot) el.save("persist")
+		// }
 		var data = {
 			setItem: function(id, val) {
 				return (data[id] = "" + val)
@@ -252,6 +250,8 @@
 	// IE8 has console, however, the console object does not exist if the console is not opened.
 	patch("console", {log: nop, error: nop})
 
+	patch("getComputedStyle", "return a.currentStyle")
+
 	/*** ie9 ***/
 	patch("matchMedia", "b=a||'all';return{media:b,matches:X?X.matchMedium(b):!1,addListener:Y}", 0, window.styleMedia || window.media, nop)
 	/**/
@@ -377,6 +377,7 @@
 
 	b += "if(a.call(b,t[i],i,t))"
 	patch("filter",      b + "o.push(t[i])" + c)
+	patch("find",        b + "return t[i]")
 	patch("some",        b + "return!0;return!1")
 
 	patch("flat",        "return a<1?S.call(t):(b=t.concat.apply([],t))&&a>1&&b.some(X)?b.flat(a-1):b", 0, isArray)