@litejs/ui 25.1.0 → 25.10.0

package/bin/extract-lang.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+//-
+//-  Usage
+//-    lj-extract-lang [FILE..]
+//-
+//-  Options
+//-    --pretty, -p    Pretty print json output
+//-
+//-  Examples
+//-    lj-extract-translations translations.json
+//-
+
+var fs = require("fs")
+, path = require("path")
+, opts = require("@litejs/cli/opts.js").opts({
+	pretty: false,
+	version: false
+})
+, extractLang = require("../extract-lang.js").extractLang
+, package = require("../package.json")
+
+
+if (opts._unknown[0]) {
+	console.error("\nError: Unknown option: " + opts._unknown)
+	usage(true)
+	process.exit(1)
+} else if (opts._[0]) {
+	readJson(opts._[0])
+} else {
+	usage()
+}
+
+function usage(err) {
+	if (!err && opts.version) console.log("%s v%s", package.name, package.version)
+	var helpFile = module.filename
+	console.log(fs.readFileSync(helpFile, "utf8").match(/^\/\/-.*/gm).join("\n").replace(/^.../gm, ""))
+}
+
+function readJson(file) {
+	var lang
+	, all = require(path.resolve(file))
+	, i = 0
+	, locales = Object.keys(all.locales)
+
+	console.log("Extract translations: " + locales)
+
+	for (; lang = locales[i++]; ) {
+		writeJson(lang + ".json", extractLang(all, lang))
+	}
+}
+
+function writeJson(file, data) {
+	fs.writeFileSync(path.resolve(file), JSON.stringify(data, null, opts.pretty ? 2 : null) + "\n", "utf8")
+}
+
+

package/css/anim.css

@@ -1,20 +1,13 @@
 
-/**
- *  1. Trigger GPU acceleration.
- *     Remove first flicker on iphone.
- */
 
 .anim,
 .anim:after,
 .anim:before {
-	-webkit-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
-	   -moz-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
-	     -o-transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
-	        transition: all .2s cubic-bezier(0, 0, .2, 1) 0s;
+	transition: all .2s;
 
-	-webkit-transform: translate3d(0, 0, 0);     /* 1 */
-	        transform: translate3d(0, 0, 0);
-	-webkit-perspective: 1000;
-	        perspective: 1000;
+	/* Trigger GPU acceleration. Remove first flicker on iphone. */
+	transform: translate3d(0, 0, 0);
+
+	perspective: 1000;
 }
 

package/css/base.css

@@ -1,40 +1,21 @@
 
-/**
- *  1. Do not adjusts the text size automatically.
- *     IE Phone note - If the viewport is set using <meta> element,
- *     the value of the CSS text-size-adjust property is ignored.
- *     Webkit bug - If -webkit-text-size-adjust is explicitely set to none,
- *     Webkit-based desktop browsers, like Chrome or Safari,
- *     instead of ignoring the property, will prevent the user to zoom in or out the Web page.
- *     See Bug 56543, Bug 163359, and Bug 84186.
- *  2. IE for Windows Phone 8.1 supports "-webkit-text-size-adjust" as an alias for "-ms-text-size-adjust".
- *  3. Firefox<29, iOS<4, Android<4 need vendor prefixes.
- *  4. Disable double-tap gestures to remove 350 millisecond delay before single taps.
- *  5. Improve scroll performance by stop the paint on scroll.
- *     Fix position: fixed in most Android 2.2–2.3 browsers
- *     http://benfrain.com/easy-css-fix-fixed-positioning-android-2-2-2-3/
- */
+
 
 *, *:before, *:after {
 	color: inherit;
-	-webkit-box-sizing: inherit;          /* 3 */
-	   -moz-box-sizing: inherit;
-	        box-sizing: inherit;
-	-webkit-backface-visibility: inherit;
-	        backface-visibility: inherit;
+	box-sizing: inherit;
+	backface-visibility: inherit;
 }
 
 html {
-	-webkit-text-size-adjust: 100%;       /* 1 */
-	    -ms-text-size-adjust: 100%;       /* 2 */
-	-webkit-font-smoothing: antialiased;
-	-webkit-box-sizing: border-box;       /* 3 */
-	   -moz-box-sizing: border-box;
-	        box-sizing: border-box;
-	touch-action: manipulation;           /* 4 */
-	-webkit-backface-visibility: hidden;  /* 5 */
-	        backface-visibility: hidden;
-	text-rendering: optimizeLegibility;
+	/* 62.5% sets 1em = 10px (16px × 0.625) */
+	font-size: 62.5%;
+
+	/* Use IE4 superior box model */
+	box-sizing: border-box;
+
+	/* Improve scroll performance by stop the paint on scroll */
+	backface-visibility: hidden;
 }
 
 html,
@@ -64,16 +45,10 @@ label,
 	pointer-events: none;
 }
 
-button {
-	/* Fix extra padding issue in IE6/7 */
-	width: auto;
-	overflow: visible;
-}
-
 b,
 strong,
 th {
-	/* Firefox default {font-weight:bolder} does not render well with some fonts (Helvetica Neue on macs). */
+	/* Firefox's default 'bolder' looks bad with some fonts (Helvetica Neue on macs). */
 	font-weight: bold;
 }
 
@@ -89,142 +64,31 @@ video {
 	vertical-align: top;
 }
 
-/**
- *  1. tables still need cellspacing="0" in the markup
- *  2. Restores the normal text size
- *     @see http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/
- */
 
 table {
+	/* tables still need cellspacing="0" in the markup */
 	border-collapse: collapse;
-	border-spacing: 0;                  /* 1 */
+	border-spacing: 0;
 }
 
 code,
 kbd,
 pre,
 samp {
-	font-family: monospace, monospace;  /* 2 */
+	/* Fix monospace bug in browsers that may ignore first one */
+	font-family: monospace, monospace;
 	font-size: 1em;
 }
 
 textarea {
-	resize: vertical;
+	resize: both;
 }
 
 button,
-[draggable=true],
 .btn,
-.no-select {
-	-webkit-user-select: none;
-	 -khtml-user-select: none;
-	   -moz-user-select: none;
-	    -ms-user-select: none;
-	     -o-user-select: none;
-	        user-select: none;
-}
-
+.no-select,
 [draggable=true] {
-	-webkit-user-drag: element;
-	 -khtml-user-drag: element;
-	        user-drag: element;
-}
-
-
-/**
- * Global Classes
- * --------------
- */
-
-.max-height {
-	height: auto !important;
-	height: 100%;
-	min-height: 100%;
-}
-
-.sm .sm-hide,
-.md .md-hide,
-.lg .lg-hide,
-.hide-empty:empty,
-.hide {
-	display: none !important;
-	visibility: hidden;
-}
-.transparent {
-	opacity: 0 !important;
-	filter: alpha(opacity=0) !important;
-}
-.abs {
-	position: absolute;
-}
-.absr {
-	position: absolute;
-	top: 0px;
-	right: 0px;
-}
-.fix {
-	position: absolute;
-	position: fixed;
-}
-.rel {
-	position: relative;
-	height: 100%;
-}
-.max {
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100%;
-	overflow: hidden;
-}
-
-
-/* establishes a new block formatting context */
-.block {
-	overflow: hidden;
-}
-
-.btn,
-.no-wrap,
-.ellipsis {
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.sm .sm-left,
-.md .md-left,
-.lg .lg-left,
-.left {
-	float: left;
-}
-
-.sm .sm-right,
-.md .md-right,
-.lg .lg-right,
-.right {
-	float: right !important;
-}
-
-.sm .sm-t-left,
-.md .md-t-left,
-.lg .md-t-left,
-.lg .lg-t-left,
-.t-left {
-	text-align: left;
-}
-.sm .sm-t-center,
-.md .md-t-center,
-.lg .md-t-center,
-.lg .lg-t-center,
-.t-center {
-	text-align: center;
-}
-.sm .sm-t-right,
-.md .md-t-right,
-.lg .md-t-right,
-.lg .lg-t-right,
-.t-right {
-	text-align: right;
+	user-select: none;
 }
 
 

package/css/global.css

@@ -0,0 +1,99 @@
+
+
+/**
+ * Global Classes
+ * --------------
+ */
+
+.max-height {
+	height: auto !important;
+	height: 100%;
+	min-height: 100%;
+}
+
+.sm .sm-hide,
+.md .md-hide,
+.lg .lg-hide,
+.hide-empty:empty,
+.hide {
+	display: none !important;
+	visibility: hidden;
+}
+.transparent {
+	opacity: 0 !important;
+	filter: alpha(opacity=0) !important;
+}
+.abs {
+	position: absolute;
+}
+.absr {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+}
+.fix {
+	position: absolute;
+	position: fixed;
+}
+.rel {
+	position: relative;
+	height: 100%;
+}
+.max {
+	top: 0px;
+	left: 0px;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+
+/* establishes a new block formatting context */
+.block {
+	overflow: hidden;
+}
+
+.btn,
+.no-wrap,
+.ellipsis {
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.sm .sm-left,
+.md .md-left,
+.lg .lg-left,
+.left {
+	float: left;
+}
+
+.sm .sm-right,
+.md .md-right,
+.lg .lg-right,
+.right {
+	float: right !important;
+}
+
+.sm .sm-t-left,
+.md .md-t-left,
+.lg .md-t-left,
+.lg .lg-t-left,
+.t-left {
+	text-align: left;
+}
+.sm .sm-t-center,
+.md .md-t-center,
+.lg .md-t-center,
+.lg .lg-t-center,
+.t-center {
+	text-align: center;
+}
+.sm .sm-t-right,
+.md .md-t-right,
+.lg .md-t-right,
+.lg .lg-t-right,
+.t-right {
+	text-align: right;
+}
+
+

package/el/Slider.ui

@@ -0,0 +1,229 @@
+
+%css
+	.Slider,
+	.Toggle {
+		background: none;
+		height: 32px;
+		position: relative;
+		touch-action: none;
+		width: 200px;
+		color: #000;
+		font-size: 14px;
+		line-height: 32px;
+	}
+	.Slider-fill,
+	.Slider:before,
+	.Toggle:before {
+		background: rgba(0, 0, 0, .5);
+		border-radius: 2px;
+		height: 4px;
+		position: absolute;
+		top: 14px;
+		transition: inherit;
+	}
+	.Slider:before,
+	.Toggle:before {
+		background: #ccc;
+		content: "";
+		display: block;
+		width: 100%;
+	}
+	.Slider-knob,
+	.Toggle-knob {
+		border-radius: 50%;
+		box-shadow: 0 0 0 0 rgb(0, 0, 0, .2), 0 1px 4px rgba(0, 0, 0, .2);
+		height: 20px;
+		position: relative; /* for IE6 overflow:visible bug */
+		transition: inherit;
+		width: 20px;
+	}
+	.Slider-knob {
+		float: right;
+		margin: -8px -10px 0 0;
+		outline: none;
+		background: #f5f5f5;
+	}
+	:hover > * > .Slider-knob,
+	: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 {
+		box-shadow: 0 0 0 12px rgb(0, 0, 0, .2), 0 1px 5px 5px rgba(0, 0, 0, .3);
+	}
+	/* value bubble */
+	.Slider-knob:before,
+	.Slider-knob:after {
+		background: inherit;
+		border-radius: 16px;
+		content: "";
+		height: 32px;
+		left: -6px;
+		min-width: 32px;
+		opacity: 0;
+		pointer-events: none;
+		position: absolute;
+		top: 0px;
+		transform: rotate(45deg);
+		transition: inherit;
+	}
+	.Slider-knob:after {
+		content: attr(data-val);
+		left: 10px;
+		padding: 0 4px;
+		transform: translate(-50%, 0);
+	}
+	:focus > * > .Slider-knob:before,
+	:hover > * > .Slider-knob:before,
+	.Slider-knob.is-active:before {
+		border-radius: 50% 50% 0 50%;
+		box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, .3);
+		opacity: 1;
+		top: -43px;
+	}
+	:focus > * > .Slider-knob:after,
+	:hover > * > .Slider-knob:after,
+	.Slider-knob.is-active: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;
+	}
+	input:checked + .Toggle-knob {
+		background-color: #00a651;
+		left: 16px;
+	}
+	.Slider.color .Slider-fill {
+		background: red;
+	}
+	.Slider.color .Slider-fill+.Slider-fill {
+		background: green;
+	}
+	.Slider.color .Slider-fill+.Slider-fill+.Slider-fill {
+		background: blue;
+	}
+	.Slider.no-first > .Slider-fill:last-child {
+		background: #ccc;
+	}
+
+%js
+	var elOn = El.on
+	, elOff = El.off
+	, elCls = El.cls
+	, elGet = El.get
+	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
+		, emit = El.rate(El.emit.bind(el, el, "change"), 500)
+		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
+			minPx = 0
+			maxPx = el[attr] - 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]
+				}
+			}
+			move(e)
+			listen(elOn)
+		})
+		function move(e) {
+			var diff = vert ? offset - e.pageY : e.pageX - offset
+			diff = (diff > maxPx ? maxPx : (diff < minPx ? minPx : diff))
+			set((diff / px) + min, e, diff)
+			return El.stop(e)
+		}
+		function stop(e) {
+			if (drag) {
+				drag = false
+				listen(elOff)
+				set(value)
+			}
+		}
+		function listen(onOff) {
+			elCls(el, "anim", !drag)
+			elCls(knob, "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)
+			}
+			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)
+			}
+		}
+	}
+
+%el Slider
+button.Slider.anim.reset ;SliderInit!
+	.Slider-fill
+		.Slider-knob[tabindex=0]
+
+%el Slider2
+button.Slider.anim.reset ;SliderInit!
+	.Slider-fill
+		.Slider-knob[tabindex=0]
+	.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 Toggle
+button.Toggle.reset ;SliderInit! "0:1"
+	;css: "width","36px"
+	.Slider-fill.anim
+		.Slider-knob.anim[tabindex=0]
+
+%el Togglea
+label.Toggle.reset[tabindex=0]
+	input[type=checkbox].hide
+		;readonly! row && !row.write
+		;checked! model && (row && row.opts ? row.opts === model.get(row.path) : !!model.get(row.path))
+	.Toggle-knob.anim
+

package/extract-lang.js

@@ -0,0 +1,33 @@
+
+!function(exports) {
+	exports.extractLang = extractLang
+
+	function extractLang(translations, lang) {
+		var missing = []
+		, out = extract(translations, "")
+		if (missing[0]) {
+			console.error("WARNING! Missing '%s' translations: %s [%s]", lang, missing.length, missing+"")
+		}
+		return out
+
+		function extract(map, path) {
+			var key
+			, out = {}
+			, translations = map.translations
+			if (!translations) return map[lang]
+			for (key in translations) {
+				out[key] = extract(translations[key], path + key + ".")
+				if (
+					out[key] === key ||
+					out[key] === void 0 && missing.push(path + key) ||
+					isObject(out[key]) && Object.keys(out[key]).length < 1
+				) delete out[key]
+			}
+			return out
+		}
+		function isObject(obj) {
+			return obj && obj.constructor === Object
+		}
+	}
+}(this) // jshint ignore:line
+