@litejs/ui 26.2.0 → 26.3.0

package/css/base.css

@@ -91,4 +91,8 @@ button,
 	user-select: none;
 }
 
+.no-scroll {
+	overflow: hidden;
+}
+
 

package/el/dialog.ui

@@ -1,15 +1,15 @@
 
 %css
 	.Modal {
+		overflow: auto;
+		overscroll-behavior: contain;
 		z-index: 9;
 	}
 	.Modal-bg {
-		position: absolute;
-		position: static;
 		background-color: rgba(0, 0, 0, .6);
+		pointer-events: none;
 	}
 	.Modal-content {
-		position: absolute;
 		left: 0;
 		right: 0;
 		margin: 0 auto;
@@ -59,111 +59,100 @@
 //     { "action": "no", "title": "No", "icon": "images/no.png" }
 //   ]
 %js
-	$ui.on("modal", function(title, opts, next) {
-		El.blur()
-		if (!next && typeof opts === "function") {
-			next = opts
-			opts = null
+	$ui.on("modal", function(title, opts) {
+		var oldFocus = document.activeElement
+		, modal = El("Modal")
+		, el = El("Dialog.Modal-content.Modal--blur.abs")
+		, scope = El.scope(el, el, typeof opts === "string" ? { body: opts } : opts)
+		, kbMap = {
+			bubble: 1, input: 1,
+			tab: function(e) {
+				var items = $$("a[href],:is(button,input,select,textarea):not(:disabled),[tabindex]:not([tabindex='-1'])", modal)
+				, last = items.length - 1
+				if (document.activeElement === items[e.shiftKey ? 0 : last]) {
+					items[e.shiftKey ? last : 0].focus()
+					El.stop(e)
+				}
+			}
 		}
-		var sound, vibrate
-		, code = ""
-		, el = El("Dialog")
-		, scope = Object.assign(El.scope(el, el), opts)
-		, kbMap = {}
 		, body = document.body
-		, blurEl = $(scope.blur) || $ui.root.lastChild
-		scope.title = title || "Confirm?"
+		, scrollEl = document.scrollingElement || document.documentElement
+		, vibrate = scope.vibrate && navigator.vibrate
+		, sound = scope.sound && window.Audio && new Audio(scope.sound)
+		scope.title = title
 		if (!scope.actions) scope.actions = [
-			{ action: "close", title: "Close", key: "esc" }
+			{ title: "Close", key: "esc" }
 		]
-		for (var a, i = 0; a = scope.actions[i++]; ) {
-			if (typeof a == "string") a = scope.actions[i-1] = {title:a,action:a}
-			if (a.key) kbMap[a.key] = resolve.bind(el, el, a.action)
-		}
-		El.cls(blurEl, "Modal--blur")
-		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
-		}
-		El.addKb(kbMap, el)
-		$$(".js-btn", el).on("click", resolve)
-		$ui.one("show", resolve)
-		if (scope.bgClose) El.on(el, "click", resolve)
-		El.on(el, "wheel", El.stop)
-		El.on(el.lastChild, "click", El.stop)
-		if (scope.vibrate && navigator.vibrate) {
-			vibrate = navigator.vibrate(scope.vibrate)
+		for (var a, i = 0; (a = scope.actions[i++]); ) {
+			if (typeof a === "string") a = scope.actions[i - 1] = { title: a, action: a }
+			if (a.key) kbMap[a.key] = resolve.bind(el, a.action)
 		}
-		if (scope.sound && window.Audio) {
-			sound = new Audio(scope.sound)
-			sound.play()
+		El.append(modal, el)
+		if (scope.el) El.append(el, El(scope.el))
+		El.append(body, modal)
+		El.render(modal)
+		El.addKb(kbMap, modal)
+		if (El.closest(document.activeElement, 'form') !== el) {
+			el.focus()
 		}
-		function numpad(e, _num) {
-			// Enter pressed on focused element
-			if (_num == void 0 && e.clientX == 0) return
-			var num = _num == void 0 ? e.target[El.T] : _num
-			code += num
-			if (num == "CLEAR" || num == "del" || num == "backspace") code = ""
-			El.md($(".js-body", el), code.replace(/./g, "•") || opts.body)
-			if (typeof scope.code == "number" && code.length == scope.code && id && !sent) next(sent = code, id, resolve, reject)
-		}
-		function resolve(e, key) {
-			if (el) {
-				var action = key || El.get(this, "data-action")
-				, result = {
-					code: code,
-					input: El.val($(".js-input", el)),
-					inputMd: El.val($(".js-inputMd", el)),
-					select: El.val($(".js-select", el))
-				}
-				El.kill(mm, "transparent")
-				El.cls(blurEl, "Modal--blur", el = false)
-				if (action && next) {
-					if (typeof next === "function") next(action, result)
-					else if (typeof next[action] === "function") next[action](result)
-					else if (next[action]) $ui.emit(next[action], result)
-				}
-				if (vibrate) navigator.vibrate(0)
+		El.on(el, "click", function(e) {
+			console.log("click1 resolve")
+			resolve(El.get(e.target, "data-action"), e)
+		}, "[data-action]")
+		El.cls(el, "Modal--blur",!1,1)
+		$ui.emit("modalOpen", scope)
+		$ui.one("show", function() { resolve() })
+		El.on(modal.firstChild, "click", function() {
+			console.log("click resolve")
+			resolve()
+		})
+		if (vibrate) vibrate(scope.vibrate)
+		if (sound) sound.play()
+		El.cls(scrollEl, "no-scroll")
+		function resolve(action, e) {
+			if (modal) {
+				El.stop(e)
+				El.cls(scrollEl, "no-scroll", 0)
+				El.kill(modal, "transparent", 1)
+				if (vibrate) vibrate(0)
 				if (sound) sound.pause()
+				modal = null
+				if (action) {
+					$ui.emit(scope.event || "modal:" + action, El.val(el), scope)
+				}
+				$ui.emit("modalClose", scope)
+				if (oldFocus) oldFocus.focus()
 			}
 		}
-		scope.resolve = resolve
-		$ui.emit("modal:open", scope)
 	})
 
-%el Dialog-numpad
-.row.js-numpad
-	@click ".btn", function(){}
-	;each! "num",[1,2,3,4,5,6,7,8,9,"CLEAR",0]
-	.col.w4>.btn {num}
-
-%js
-	$ui.on("showDialog", function(e, el, dialog) {
-		console.log("showDialog", El.scope(el), arguments)
-		El.kill(dialog)
-	})
+%el Modal
+.Modal.fix.max.anim>.Modal-bg.abs.max
 
 %el Dialog
-.Dialog.grid.p2.anim
-	.col.ts3 ;txt! _(title, map)
-	.col.js-body ;md! _(body, map)
-	.col
-		.group ;each! action in actions
-			.btn.js-btn
-				;txt! _(action.title)
-				;class! "w" + (12/actions.length)
-				;nop! this.focus()
-				;set! "data-action", action.action
-				;class! "is-" + action.action, action.action
+form.Dialog.grid.p2.anim[action="javascript:"][method=POST][tabindex='-1']
+	.col>h1 ;txt title
+	.col ;if body; d body
+	%slot
+	.col.group
+			button.btn.js-action
+				;each! 'action',actions
+				;set! "data-action", action.action||"-"
+				;txt _(action.title)
+				;cls! "w" + (12/actions.length)
+				;cls! action.action && "is-" + action.action, action.action
 
-%el Modal
-.Modal.max.fix.anim
-	.Modal-bg.max.abs
-	.Modal-content.Modal--blur.grid.p2.anim
-		;cls! "Modal--blur",!1,1
-		%slot
+%el Dialog-input
+.col
+	input.field[name=value][type=text][placeholder="Enter value"] ;focus
+
+%el Dialog-numpad
+.grid.p1.js-numpad
+	@click function(e,b,n,v){$s.in.value=(v=$s.in.value,n=b[El.T])>-1?v+n:n=='DEL'?v.slice(0,-1):'',$s.in.focus()},'.btn'
+	;kb!{num:function(e,b,n){$s.in.value=(n)>-1?$s.in.value+n:''},del:function(e,b,n){$s.in.value=$s.in.value.slice(-1)}}
+	.col>input[name=code] ;ref!'in';focus
+	.col.w4
+		;each! "num",[1,2,3,4,5,6,7,8,9,"CLEAR",0,"DEL"]
+		button.btn.w12[type=button]
+			;txt!num
 

package/el/material.ui

@@ -0,0 +1,154 @@
+
+%css
+	.shadow-1 {
+		box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+	}
+	/**
+	 *  1. Fix Webkit border-radius cropping for children.
+	 */
+	.Button,
+	.Checkbox,
+	.Fab,
+	.material {
+		font-size: 14px;
+		font-weight: 500;
+		position: relative;
+		text-transform: uppercase;
+		transition: all .2s cubic-bezier(.4,0,.2,1);
+		perspective: 1px;                                         /* 1 */
+	}
+	.Button:focus,
+	.Fab:focus {
+		outline: none;
+	}
+	.Button,
+	.Button:disabled:hover {
+		background: transparent;
+		border: none;
+		min-width: 64px;
+		height: 36px;
+		line-height: 36px;
+		border-radius: 2px;
+		padding: 0 16px;
+		letter-spacing: 0;
+		text-align: center;
+	}
+	.Button.raised,
+	.Button:hover {
+		background-color: rgba(158,158,158, 0.20);
+	}
+	.Button:focus {
+		background-color: #ddd;
+	}
+	.raised:focus:not(:active) {
+		box-shadow: 0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36);
+	}
+	.Button:disabled {
+		color: #aaa;
+		background: transparent;
+	}
+	.Fab {
+		border: none;
+		border-radius: 50%;
+		font-size: 24px;
+		height: 56px;
+		line-height: 56px;
+		width: 56px;
+		padding: 0;
+		background: rgba(158,158,158,.2);
+	}
+	.Button.is-warning,
+	.Fab--red {
+		color: #fff;
+		background-color: #f40;
+	}
+	.Button.is-warning>.waves-ripple,
+	.Fab--red>.waves-ripple {
+		background-color: #fff;
+	}
+	.Fab--red>.waves-ripple--play {
+		opacity: .6;
+	}
+	.raised {
+		box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);
+	}
+	.Checkbox {
+		display: block;
+		height: 56px;
+		line-height: 56px;
+		width: 56px;
+	}
+	.Checkbox-icon {
+		overflow: visible;
+		display: block;
+		height: 50%;
+		width: 50%;
+		top: 25%;
+		left: 25%;
+	}
+
+%el Checkbox
+	label.Checkbox
+		input[type=checkbox].hide
+		i.Checkbox-icon.waves
+
+%el Button
+	button[type=button].Button.waves Button
+
+%el Fab
+	button[type=button].Fab.waves.raised
+
+%el Radio
+	button[type=button].Radio.waves
+
+%css
+	.MenuBtn {
+		position: relative;
+		width: 30px;
+		height: 30px;
+		background: transparent;
+		color: #fff;
+	}
+	.MenuBtn-x,
+	.MenuBtn-x:before,
+	.MenuBtn-x:after {
+		display: block;
+		content: "";
+		background-color: currentColor;
+		position: absolute;
+		width: 100%;
+		height: .3em;
+		border-radius: .3em;
+		pointer-events: none;
+		transition-property: transform;
+	}
+	.MenuBtn-x:before {
+		transform: translate(0, -.6em);
+	}
+	.MenuBtn-x:after {
+		transform: translate(0, .6em);
+	}
+	.MenuBtn--back > .MenuBtn-x,
+	.MenuBtn--close > .MenuBtn-x {
+		color: #666;
+		transform: rotateZ(-180deg);
+	}
+	.MenuBtn--back > .MenuBtn-x:before {
+		transform: rotateZ(45deg) scaleX(.75) translate(0, -230%);
+	}
+	.MenuBtn--back > .MenuBtn-x:after {
+		transform: rotateZ(-45deg) scaleX(.75) translate(0, 230%)
+	}
+	.MenuBtn--close > .MenuBtn-x {
+		background-color: transparent;
+	}
+	.MenuBtn--close > .MenuBtn-x:before {
+		transform: rotateZ(45deg) translate(0, 0);
+	}
+	.MenuBtn--close > .MenuBtn-x:after {
+		transform: rotateZ(-45deg) translate(0, 0);
+	}
+
+%el MenuBtn
+	button[type=button].MenuBtn.reset.noselect
+		.MenuBtn-x.anim

package/el/menu.ui

@@ -0,0 +1,213 @@
+
+%css
+	.Menu,
+	.Tooltip {
+		border-radius: 2px;
+		position: absolute;
+		margin: 0;
+		opacity: 0;
+		transform: scale(0);
+		transition: opacity .4s cubic-bezier(0, 0, .2, 1) 0s, transform .2s cubic-bezier(0, 0, .2, 1) 0s;
+	}
+	.Tooltip {
+		padding: 8px;
+		color: #fff;
+		background: #666;
+		font-weight: 500;
+		max-width: 90%;
+		text-align: center;
+		z-index: 8;
+	}
+	.Tooltip[data-pos]:before {
+		content: "";
+		position: absolute;
+		display: block;
+		width: .4em;
+		height: .4em;
+		border: .4em solid transparent;
+		border-left-color: #666;
+		border-top-color: #666;
+	}
+	.Tooltip[data-pos=top]:before {
+		bottom: -.3em;
+		left: -.3em;
+		margin-left: 50%;
+		transform: rotate(225deg);
+	}
+	.Tooltip[data-pos=bottom]:before {
+		top: -.3em;
+		left: -.3em;
+		margin-left: 50%;
+		transform: rotate(45deg);
+	}
+	.Tooltip[data-pos=right]:before {
+		top: 50%;
+		left: -.3em;
+		margin-top: -.4em;
+		transform: rotate(315deg);
+	}
+	.Tooltip[data-pos=left]:before {
+		top: -.3em;
+		right: -.3em;
+		margin-top: 50%;
+		transform: rotate(135deg);
+	}
+	.Menu {
+		padding: 8px 0;
+		color: #000;
+		background: #fff;
+		min-width: 124px;
+		max-width: 100%;
+		z-index: 7;
+	}
+	.Menu-item {
+		display: block;
+		padding: 12px 16px;
+		text-decoration: none;
+		line-height: 24px;
+		cursor: pointer;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.Menu-item:hover {
+		background-color: #eee;
+	}
+	.Menu-item[disabled] {
+		color: #bdbdbd;
+		background-color: transparent;
+		cursor: auto;
+	}
+	.Menu-item.is-divider {
+		border-bottom: 1px solid #ddd;
+	}
+	.Menu.is-visible,
+	.Tooltip.is-visible {
+		transform: scale(1);
+		opacity: 1;
+	}
+
+%js
+	!function($ui) {
+		var menuTarget, menuEl, tipTarget, tipEl
+		, html = document.documentElement
+		El.near = near
+		function near(source, target, x, y, margin) {
+			var rect = target.getBoundingClientRect()
+			, top  = rect.top + El.scrollTop()
+			, left = rect.left + El.scrollLeft()
+			// svg elements dont have offsetWidth, IE8 does not have rect.width
+			, width = rect.width || target.offsetWidth || 0
+			, height = rect.height || target.offsetHeight || 0
+			if (x == "left") {
+				left -= source.offsetWidth + margin
+				x = "150%"
+			} else if (x == "left-start") {
+				left -= margin
+				x = "0%"
+			} else if (x == "right") {
+				left += width + margin
+				x = "-50%"
+			} else if (x == "right-end") {
+				left += width + margin - source.offsetWidth
+				x = "100%"
+			} else {
+				left += (width / 2) - (source.offsetWidth/2)
+				x = "50%"
+			}
+			if (y == "top") {
+				top -= margin + source.offsetHeight
+				y = " 150%"
+			} else if (y == "bottom") {
+				top += height + margin
+				y = " -50%"
+				setTimeout(function() {
+					var overflow = top + source.offsetHeight - El.scrollTop() - html.offsetHeight
+					if (overflow > 0) scrollBy({ top: overflow, left: 0, behavior: "smooth" })
+				}, 400)
+			} else {
+				top += (height / 2) - (source.offsetHeight/2)
+				y = " 50%"
+			}
+			El.css(source, {
+				"transform-origin": x + y,
+				top: (top < 0 ? 0 : top) + "px",
+				left: (left < 0 ? 0 : left) + "px"
+			})
+		}
+		El.on(html, "mouseover focusin", function(e) {
+			var x, y, pos
+			, target = e.target
+			, text = El.get(target, "data-tooltip")
+			if (!e.relatedTarget && e.type !== "focusin" || target === tipTarget) return
+			if (!text && tipTarget) {
+				if (tipEl && tipEl.contains(target)) return
+				for (; target = target.parentNode; ) {
+					if (target === tipTarget) return
+				}
+			}
+			closeTooltip()
+			if (!text) return
+			tipEl = openVisible("pre.Tooltip", tipTarget = target)
+			pos = El.get(target, "data-tooltip-pos") || "top"
+			El.txt(tipEl, text)
+			if (pos === "left" || pos === "right") {
+				x = pos
+			} else {
+				y = pos
+			}
+			El.set(tipEl, "data-pos", pos)
+			near(tipEl, target, x, y, 6)
+		})
+		$ui.on("show", closeTooltip)
+		function openVisible(tag, target) {
+			var el = typeof tag == "string" ? El(tag) : tag
+			, scope = El.scope(el, target)
+			scope.openTarget = target
+			El.render(el)
+			El.append(document.body, el)
+			El.cls(el, "is-visible", 1, 5)
+			return el
+		}
+		function closeVisible(el, delay) {
+			if (el) {
+				El.kill(el, null, 999)
+				El.cls(el, "is-visible", 0, delay)
+			}
+		}
+		function closeTooltip() {
+			if (tipEl) {
+				closeVisible(tipEl)
+				tipTarget = tipEl = null
+			}
+		}
+		function menuClose(e) {
+			if (e && e.target == menuTarget) return
+			if (menuEl) {
+				closeVisible(menuEl, 200)
+				El.cls(menuTarget, "is-active", menuEl = menuTarget = null)
+			}
+		}
+		$ui.on("ping,menuClose", menuClose)
+		$ui.on("menu", function(e, target, menu, x, y, margin) {
+			El.stop(e)
+			var close = menuEl && menuTarget == target
+			menuClose()
+			if (close) return
+			menuEl = openVisible(menu, target)
+			if (x == "mouse") {
+				El.css(menuEl, {
+					top: e.pageY + "px",
+					left: e.pageX + "px"
+				})
+			} else {
+				El.cls(menuTarget = target, "is-active")
+				near(menuEl, target, x, y, margin)
+			}
+			El.cls(menuEl, "no-events")
+			El.on(menuEl, "transitionend", function(e) {
+				if (e.propertyName === "transform") El.cls(menuEl, "no-events", 0)
+			})
+		})
+		El.on(html, "click", menuClose)
+	}($ui)

package/el/ripple.ui

@@ -0,0 +1,56 @@
+
+%css
+	.waves {
+		position: relative;
+		overflow: hidden;
+	}
+	.waves-ripple {
+		position: absolute;
+		border-radius: 50%;
+		background-color: #000;
+		opacity: 0;
+		transform: scale(0);
+		transition: opacity .6s cubic-bezier(0, 0, .2, 1) 0s, transform 0s cubic-bezier(0, 0, .2, 1) .6s;
+		pointer-events: none;
+	}
+	.waves-ripple--play {
+		opacity: .4;
+		transform: scale(1);
+		transition: opacity 1s cubic-bezier(0, 0, .2, 1) 0ms, transform .4s cubic-bezier(0, 0, .2, 1) 0ms;
+	}
+
+%js
+	!function() {
+		var tick, wait
+		, ripple = El(".waves-ripple")
+		, html = document.documentElement
+		El.on(html, "pointerdown", function(e) {
+			var target = e.target
+			if (!El.hasClass(target, "waves") || target.disabled) return
+			var rect = target.getBoundingClientRect()
+			, top = e.clientY - rect.top
+			, left = e.clientX - rect.left
+			, maxH = Math.max(top, target.offsetHeight - top)
+			, maxW = Math.max(left, target.offsetWidth - left)
+			, max = 2 * Math.sqrt(maxH * maxH + maxW * maxW)
+			El.css(ripple, {
+				top: (top - max / 2) + "px",
+				left: (left - max / 2) + "px",
+				width: max + "px",
+				height: max + "px"
+			})
+			El.append(target, ripple)
+			clearTimeout(tick)
+			end()
+			wait = 1
+			tick = setTimeout(end, 600)
+			El.one(html, "pointerup", end)
+			ripple.offsetTop // force repaint
+			El.cls(ripple, "waves-ripple--play")
+		})
+		function end() {
+			if (!(wait--)) {
+				El.cls(ripple, "waves-ripple--play", 0)
+			}
+		}
+	}()