add parse

go.sum

@@ -17,6 +17,8 @@ shylinux.com/x/go-qrcode v0.0.1 h1:/eOGqMj1qtgs9Ymd12zTUa1gcJZs9S92kj2lb0QzKsE=
 shylinux.com/x/go-qrcode v0.0.1/go.mod h1:KAbtU+KwiiABMZ/CJ0zh9PI2AX82Uf9rRYcQ4ODm4po=
 shylinux.com/x/go-sql-mysql v0.0.1 h1:VX5SrwLBKzfkRouj39LgJ9reIXOWmMsScRpr+e0qdp0=
 shylinux.com/x/go-sql-mysql v0.0.1/go.mod h1:47OfAZK24HRJMy7dAu/jrksGCf9yzJaAUFwWYjhDFDA=
+shylinux.com/x/linux-story v0.3.8 h1:1oAFhhs8p7PRLmg1mrIb6y7xe6IK6E/DQXOjx7n+QrY=
+shylinux.com/x/linux-story v0.3.8/go.mod h1:W/QN4t6ZHVaFQ9djKIp824ZAAttZXNexzY7FwsYDU7Y=
 shylinux.com/x/websocket v0.0.1 h1:OBc21DxqsGlQ2+Pz76xqLyDNo1LV+PUUqfWi+1PZPDE=
 shylinux.com/x/websocket v0.0.1/go.mod h1:AaSpMToOxbMULKQytzczeHPuqb708vK1vrAzCxLo/XE=
 shylinux.com/x/webview v0.0.1 h1:84waIh8MnBFA2sCA9CqE2aTGBZz26pS7JlizgKi9IGU=

src/debug/go.sum

@@ -17,6 +17,8 @@ shylinux.com/x/go-qrcode v0.0.1 h1:/eOGqMj1qtgs9Ymd12zTUa1gcJZs9S92kj2lb0QzKsE=
 shylinux.com/x/go-qrcode v0.0.1/go.mod h1:KAbtU+KwiiABMZ/CJ0zh9PI2AX82Uf9rRYcQ4ODm4po=
 shylinux.com/x/go-sql-mysql v0.0.1 h1:VX5SrwLBKzfkRouj39LgJ9reIXOWmMsScRpr+e0qdp0=
 shylinux.com/x/go-sql-mysql v0.0.1/go.mod h1:47OfAZK24HRJMy7dAu/jrksGCf9yzJaAUFwWYjhDFDA=
+shylinux.com/x/linux-story v0.3.8 h1:1oAFhhs8p7PRLmg1mrIb6y7xe6IK6E/DQXOjx7n+QrY=
+shylinux.com/x/linux-story v0.3.8/go.mod h1:W/QN4t6ZHVaFQ9djKIp824ZAAttZXNexzY7FwsYDU7Y=
 shylinux.com/x/websocket v0.0.1 h1:OBc21DxqsGlQ2+Pz76xqLyDNo1LV+PUUqfWi+1PZPDE=
 shylinux.com/x/websocket v0.0.1/go.mod h1:AaSpMToOxbMULKQytzczeHPuqb708vK1vrAzCxLo/XE=
 shylinux.com/x/webview v0.0.1 h1:84waIh8MnBFA2sCA9CqE2aTGBZz26pS7JlizgKi9IGU=

src/hi/hi.css

@@ -0,0 +1,142 @@
+div.head {
+	background-color:#404040; padding:5px; height:42px; clear:both;
+}
+div.head div.menu {
+	color:white; cursor:pointer; padding:10px; float:left;
+}
+div.head div.menu:hover {
+	background-color:#323232;
+}
+div.left {
+	background-color:#323232; overflow:auto; float:left;
+}
+div.left:hover {
+	background-color:#323232;
+}
+div.left div.item {
+	background-color:#323232;
+}
+div.left div.item:hover {
+	background-color:#404040;
+}
+div.main {
+	background-color:#cccccc; height:180px; width:180px; overflow:auto; float:left;
+}
+div.main fieldset.plugin {
+	background-color:#f8f8f8; padding:10px; margin:10px;
+}
+div.main fieldset.plugin form.option div.item {
+ 	margin:10px;
+}
+div.main fieldset.plugin div.action div.item {
+ 	margin:10px;
+}
+div.main fieldset.plugin legend {
+	box-shadow:none;
+	background-color:#e4e4e4;
+	color:black;
+	display:block;
+	float:left;
+}
+div.main fieldset.plugin form.option {
+	display:block;
+	clear:both;
+}
+div.main fieldset.plugin select {
+	background-color:white; color:black;
+ 	border:solid 1px gray; outline:none;
+	box-shadow:none;
+}
+div.main fieldset.plugin input[type=text] {
+	background-color:white; color:black; padding:2px 10px;
+ 	border:solid 1px gray; outline:none;
+	border-radius:3px 3px;
+	box-shadow:none;
+}
+div.main fieldset.plugin input[type=button] {
+	background-color:blue; color:white; padding:4px 10px;
+	border:none; border-radius:3px 3px;
+}
+div.main fieldset.plugin table.content {
+ 	border-collapse:collapse;
+	display:block;
+}
+div.main fieldset.plugin table.content thead {
+	z-index:1;
+}
+div.main fieldset.plugin table.content tr {
+	border:solid 1px lightgray;
+}
+div.main fieldset.plugin table.content th {
+	background-color:#fbfbfb; color:rgba(0,0,0,.45); font-weight:100; padding:10px;
+}
+div.main fieldset.plugin table.content td {
+	background-color:white; color: #5c5c5c; padding:10px;
+}
+div.main fieldset.plugin div.status {
+	color:black;
+}
+div.foot {
+	background-color:#404040; height:32px; clear:both;
+}
+
+div.tabs:hover {
+	background-color:#272727;
+}
+div.tabs div.name {
+	height:46px; width:-webkit-fill-available;
+	position:sticky; top:5px;
+	z-index:1;
+}
+div.tabs div.name div.item {
+	color:gray; padding:10px; float:left;
+}
+div.tabs div.name div.item.select {
+	background-color:#404040; color:white;
+ 	border-bottom:solid red 2px;
+}
+div.tabs div.page {
+	overflow:auto; clear:both;
+}
+div.tabs div.page>div.input {
+	padding:5px; position:sticky; top:0px;
+}
+div.tabs div.page>div.input input {
+	background-color:#212121; color:white; border:0; outline:none; width:230px;
+}
+div.tabs div.page>div.item {
+	background-color:#404040; clear:both; display:none;
+}
+div.tabs div.page>div.list {
+	padding-left:20px; display:none; clear:both;
+}
+div.tabs div.page>div.list.select {
+	background-color:#323232; display:block;
+}
+div.tabs div.list {
+	padding-left:20px;
+}
+
+div.tabs.left div.name {
+	float:left;
+}
+div.tabs.left div.name div.item {
+	border-bottom:none; float:none;
+}
+div.tabs.left div.name div.item.select {
+	border-right:solid red 2px;
+}
+div.tabs.left div.page {
+	width:240px; clear:none; float:left;
+}
+div.tabs.left div.page>div.item {
+	display:block;
+}
+
+div.tabs.void div.name {
+	display:none;
+}
+div.tabs.void div.page>div.item {
+	display:block;
+}
+

src/hi/hi.js

@@ -1,48 +1,202 @@
 Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, cb, target) {
-	can.onappend.parse(can, [
+	can.onmotion.hidden(can, can._legend)
-		{type: "head", style: {height: 320}, list: [
+	can.onmotion.hidden(can, can._option)
-			{type: "head", list: ["基础配置", "高级配置", "导航配置"]},
+	can.onmotion.hidden(can, can._status)
-			{type: "left", list: [{type: "tabs", list: [
+
-				{name: "地址", list: [
+	can.onengine.listen(can, "menu", function(msg) { can.user.toast(can, msg.Option(html.ITEM)) })
-					{name: "山东省", list: ["邹城市", "济南市", "青岛市"]},
+	can.onengine.listen(can, "高级配置", function(msg) { can.user.toast(can, msg.Option(html.ITEM)) })
-					{name: "江苏省", list: [
+	can.onengine.listen(can, "h1", function(msg) { can.user.toast(can, "h1") })
-						{type: "plugin", name: "徐州市", index: "cli.runtime"},
+
-						{type: "plugin", name: "南京市", index: "cli.qrcode"},
+	can.onappend.parse(can, can.onappend._parse(can, `
-					]},
+head
-					{name: "北京市", list: ["海淀区", "朝阳区", "西城区", "东城区"]},
+	基础配置 type menu
-					{name: "广东省", list: [
+	高级配置 type menu
-						{name: "深圳市", list: ["宝安区", "南山区", "福田区", "龙华区"]}, "茂名市",
+		h1
-					]},
+		h2
-				]},		
+		h3
-				{name: "组件", list: ["2", "2", "3"]},		
+		h4
-				{name: "数据"},		
+	导航配置 type menu
-			]}]},
+left
-			{type: "main"},
+	tabs
-			"foot",
+		地址
-		]},
+			山东省
-		{type: "head", style: {height: 320}, list: [
+				邹城市
-			"head",
+				济南市
-			{type: "left", list: [{type: "tabs", style: "left", list: [
+				青岛市
-				{name: "布局", list: ["空中楼阁1", "空中楼阁2", "空中楼阁3", "空中楼阁4", "空中楼阁5"]},		
+			江苏省
-				{name: "列表", list: ["分页器1", "分页器2", "分页器3", "分页器4", "分页器"]},		
+				徐州市 index cli.runtime
-				{name: "表单"},		
+				南京市 index web.code.git.repos action auto
-				{name: "按钮"},		
+			北京市
-				{name: "输入"},		
+				海淀区
-			]}]},
+				朝阳区
-			{type: "main"},
+				西城区
-			"foot",
+				东城区
-		]},
+			广东省
-		{type: "head", style: {height: 200}, list: [
+				深圳市
-			"head",
+					宝安区
-			{type: "left", list: [{type: "tabs", style: "void", list: [
+					南山区
-				{name: "布局", list: ["空中楼阁1", "空中楼阁2", "空中楼阁3", "空中楼阁4"]},		
+					福田区
-				{name: "列表", list: ["分页器1", "分页器2", "分页器3"]},		
+					龙华区
-				{name: "表单"},		
+				茂名市
-				{name: "按钮"},		
+		组件
-				{name: "输入"},		
+			列表 index cli.runtime
-			]}]},
+			卡片 index cli.qrcode
-			{type: "main"},
+		数据
-			"foot",
+main
-		]}
+`), target)
-	], target)
+}}, [""])
-}})
+Volcanos("onappend", {help: "导入数据", list: [], 
+	_parse: function(can, text) { var stack = [{_deep: -1, list: []}]
+		can.core.List(can.core.Split(text, ice.NL, ice.NL, ice.NL), function(line) { if (line == "") { return }
+			var deep = 0; for (var i = 0; i < line.length; i++) { if (line[i] == ice.SP) { deep++ } else if (line[i] == ice.TB) { deep += 4 } else { break } }
+			for (var i = stack.length-1; i > 0; i--) { if (deep <= stack[i]._deep) { stack.pop() } }
+
+			var item = {_deep: deep, list: []}; var list = stack[stack.length-1]; list.list.push(item); if (deep > list._deep) { stack.push(item) }
+			var ls = can.core.Split(line); switch (ls[0]) {
+				case html.HEAD:
+				case html.LEFT:
+				case html.MAIN:
+				case html.FOOT:
+				case html.TABS:
+				case html.MENU: item.type = ls[0]; break
+				default: item.name = ls[0]; break
+			}
+			for (var i = 1; i < ls.length; i += 2) { item[ls[i]] = ls[i+1]
+				if (ls[i] == ctx.INDEX) { item.type = item.type||html.PLUGIN }
+			}
+		})
+		return {type: "demo", style: {height: window.innerHeight}, list: stack[0].list}
+	},
+	parse: function(can, list, target, keys, data, type) { target = target||can._output, data = data||{}
+		if (!list) { return } else if (can.base.isArray(list)) {
+			return can.core.List(list, function(meta, index) {
+				return can.onappend.parse(can, meta, target, keys, data, type)
+			})
+
+		} else if (can.base.isString(list)) {
+			var ls = can.core.Split(list, "", ":=@"); if (ls.length == 1) {
+				var meta = type? {type: type, name: ls[0]}: {type: ls[0]}
+			} else {
+				var meta = {name: ls[0]}; for (var i = 1; i < ls.length; i += 2) { switch (ls[i]) {
+					case ":": meta.type = ls[i+1]; break
+					case "=": meta.value = ls[i+1]; break
+					case "@": meta.action = ls[i+1]; break
+				} }
+			}
+
+		} else if (can.base.isObject(list)) { var meta = list }
+
+		keys = can.core.Keys(keys, meta.name||meta.type) 
+		var item = {view: meta.type}, init; switch (meta.type) {
+			case html.HEAD: data = {}
+				init = function(target) { data.head = target
+					can.page.ClassList.add(can, target, html.LAYOUT)
+				}
+				break
+			case html.LEFT:
+				init = function(target) {
+					can.page.ClassList.add(can, target, html.LAYOUT)
+					can.core.Timer(10, function() { var height = target.parentNode.offsetHeight
+						can.page.Select(can, target.parentNode, can.page.Keys(html.DIV_LAYOUT_HEAD, html.DIV_LAYOUT_FOOT), function(item) {
+							height -= item.offsetHeight
+						}), can.page.style(can, target, html.HEIGHT, height)
+					})
+				}
+				break
+			case html.MAIN:
+				init = function(target) { data.main = target
+					var width = target.parentNode.offsetWidth
+					can.page.Select(can, target.parentNode, html.DIV_LAYOUT_LEFT, function(item) {
+						width -= item.offsetWidth+1
+					}), can.page.style(can, target, html.WIDTH, width)
+
+					can.page.ClassList.add(can, target, html.LAYOUT)
+					can.core.Timer(10, function() { var height = target.parentNode.offsetHeight
+						can.page.Select(can, target.parentNode, can.page.Keys(html.DIV_LAYOUT_HEAD, html.DIV_LAYOUT_FOOT), function(item) {
+							height -= item.offsetHeight
+						}), can.page.style(can, target, html.HEIGHT, height)
+					})
+				}
+				break
+			case html.FOOT:
+				init = function(target) { data.foot = target
+					can.page.ClassList.add(can, target, html.LAYOUT)
+				}
+				break
+			case html.TABS:
+				item.list = [{view: "name"}, {view: html.PAGE}], item._init = function(_target, ui) {
+					can.page.Append(can, ui.page, [{view: html.INPUT, list: [{type: html.INPUT, onkeyup: function(event) {
+						can.page.Select(can, _target, [html.DIV_PAGE, html.DIV_ITEM], function(item) {
+							can.page.ClassList.set(can, item, html.HIDE, item.innerText.indexOf(event.target.value) == -1)
+						})
+					}}]}])
+					can.core.List(meta.list, function(item, index) {
+						can.page.Append(can, ui.name, [{view: [html.ITEM, html.DIV, item.name||item], onclick: function(event) {
+							can.onmotion.select(can, _target, [[html.DIV_PAGE, html.DIV_LIST]], index)
+							can.onmotion.select(can, ui.name, html.DIV_ITEM, index)
+							ui.page.scrollTo(0, 0)
+						}}])
+						can.page.Append(can, ui.page, [{view: [html.ITEM, html.DIV, item.name], onclick: function(event) {
+							can.page.ClassList.neg(can, event.target.nextSibling, html.SELECT)
+							can.onmotion.select(can, ui.name, html.DIV_ITEM, index)
+						}}, {view: [html.LIST], _init: function(target) {
+							can.onappend.parse(can, item.list, target, can.core.Keys(keys, item.name), data, html.ITEM)
+						}}])
+					})
+					can.core.Timer(100, function() { var height = target.offsetHeight
+						can.page.style(can, ui.page, html.HEIGHT, height-10-(meta.style? 0: ui.name.offsetHeight))
+						can.page.style(can, _target, html.HEIGHT, height-10)
+					}), can.page.Select(can, ui.name, html.DIV_ITEM)[0].click()
+				}
+				break
+		}
+
+		item._init = item._init||function(target) {
+			meta.list && can.onappend.parse(can, meta.list, target, keys, data, type)
+			can.base.isFunc(init) && init(target), can.base.isFunc(meta.init) && meta.init(target)
+		}
+		if (can.base.isString(meta.style)) { item.className = meta.style }
+		if (can.base.isObject(meta.style)) { item.style = meta.style }
+
+		if (meta.type == html.MENU) {
+			can.page.Append(can, target, [can.base.Copy({view: [html.MENU, html.DIV, meta.name||meta], onclick: function(event) {
+				if (meta.list && meta.list.length > 0) { return }
+				can.onengine.signal(can, meta.name) || can.onengine.signal(can, html.MENU, can.request(event, {item: meta.name}))
+			}, onmouseenter: function(event) {
+				meta.list && meta.list.length > 0 && can.user.carte(event, can, {}, meta.list, function(event, item) {
+					can.onengine.signal(can, item) || can.onengine.signal(can, meta.name, can.request(event, {item: item}))
+				})
+			}})]).first
+			return
+		}
+		if (type == html.ITEM) { item.view = html.LIST
+			if (meta.action == "auto") {
+				meta.init = meta.init||function(item) { item.click() }
+			}
+
+			var _item = can.page.Append(can, target, [can.base.Copy({view: [html.ITEM, html.DIV, meta.name||meta], onclick: function(event) {
+				switch (meta.type) {
+					case html.PLUGIN:
+						if (can.onmotion.cache(can, function() { return keys }, data.main)) { break }
+						can.onappend.plugin(can, {index: meta.index}, function(sub) {
+							sub.run = function(event, cmds, cb, silent) {
+								can.page.style(can, sub._output, html.MAX_WIDTH, sub.ConfWidth(data.main.offsetWidth-40))
+								can.run(event, can.misc.concat(can, [ctx.ACTION, ice.RUN, meta.index], cmds), function(msg) {
+									cb(msg), can.core.Timer(10, function() {
+										can.page.style(can, sub._table, html.MAX_HEIGHT, data.main.offsetHeight-150)
+									})
+								}, true)
+							}
+						}, data.main)
+					default:
+						meta.list && can.onmotion.toggle(can, event.target.nextSibling)
+				}
+			}})]).first; can.core.ItemCB(meta, function(key, cb) { _item[key] = can.base.isFunc(cb)? cb: function(event) {
+				can.onengine.signal(can, cb, can.request(event))
+			} })
+			can.core.Timer(10, function() { meta.init && meta.init(_item) })
+			if (!meta.list) { return }
+		}
+		return can.page.Append(can, target, [item]).first
+	},
+})

src/hi/hi.sh

@@ -1,4 +1,7 @@
 #! /bin/sh
+echo "*$#*"
+echo "*$@*"
+echo "*$**"
 
 date
 uptime

src/release/go.mod

@@ -6,6 +6,7 @@ require shylinux.com/x/ice v0.9.2
 
 require (
 	shylinux.com/x/golang-story v0.4.0
+	shylinux.com/x/icebergs v1.1.8
 	shylinux.com/x/linux-story v0.3.8
 	shylinux.com/x/mysql-story v0.4.1
 	shylinux.com/x/nginx-story v0.4.1