add Button.page.js

src/contexts/cli/version.go

@@ -7,5 +7,5 @@ var version = struct {
 	self int
 }{
 	[]string{"2017-11-01 01:02:03", "2019-07-13 18:02:21"},
-	`2019-10-05 14:55:37`, `mac`, 639,
+	`2019-10-08 12:46:50`, `centos`, 623,
 }

usr/librarys/chat.js

@@ -1,4 +1,4 @@
-var page = Page({check: true,
+var page = Page({
     conf: {refresh: 1000, border: 4, first: "工作", mobile: "工作", layout: {header:30, footer:30, river:100, storm:100, action:180, source:45}},
     onlayout: function(event, sizes) {
         var page = this
@@ -23,64 +23,62 @@ var page = Page({check: true,
         sizes.action == undefined && (sizes.action = page.action.offsetHeight-page.conf.border)
         sizes.source == undefined && (sizes.source = page.source.clientHeight)
         sizes.target == undefined && (sizes.target = page.target.clientHeight)
-		sizes.source == 0 && sizes.target == 0 && !kit.device.isMobile && (sizes.action = height)
+        sizes.source == 0 && sizes.target == 0 && !kit.device.isMobile && (sizes.action = height)
         page.action.Pane.Size(width, sizes.action)
         page.source.Pane.Size(width, sizes.source)
         height -= sizes.target==0? height: page.source.offsetHeight+page.action.offsetHeight
 
         page.target.Pane.Size(width, height)
     },
-    oncontrol: function(event, target, action) {
+    oncontrol: function(event) {
         var page = this
-        switch (action) {
+        if (event.ctrlKey) {
-            case "control":
+            switch (event.key) {
-                if (event.ctrlKey) {
+                case "0":
-                    switch (event.key) {
+                    page.source.Pane.Select()
-                        case "0":
-                            page.source.Pane.Select()
-                            break
-                        case "1":
-                        case "2":
-                        case "3":
-                        case "4":
-                        case "5":
-                        case "6":
-                        case "7":
-                        case "8":
-                        case "9":
-                            page.action.Pane.Select(parseInt(event.key))
-                            break
-                        case "n":
-                            page.ocean.Pane.Show()
-                            break
-                        case "m":
-                            page.steam.Pane.Show()
-                            break
-                        case "i":
-                            page.storm.Pane.Next()
-                            break
-                        case "o":
-                            page.storm.Pane.Prev()
-                            break
-                        case "b":
-                            page.action.Action["最大"](event)
-
-                    }
                     break
-                } else {
+                case "1":
-                    switch (event.key) {
+                case "2":
-                        case " ":
+                case "3":
-                            page.footer.Pane.Select()
+                case "4":
-                            break
+                case "5":
-                        case "Escape":
+                case "6":
-                            page.dialog && page.dialog.Pane.Show()
+                case "7":
-                            break
+                case "8":
-                    }
+                case "9":
-                }
+                    page.action.Pane.Select(parseInt(event.key))
-                break
+                    break
+                case "n":
+                    page.ocean.Pane.Show()
+                    break
+                case "m":
+                    page.steam.Pane.Show()
+                    break
+                case "i":
+                    page.storm.Pane.Next()
+                    break
+                case "o":
+                    page.storm.Pane.Prev()
+                    break
+                case "b":
+                    page.action.Action["最大"](event)
+
+            }
+            break
+        } else {
+            switch (event.key) {
+                case " ":
+                    page.footer.Pane.Select()
+                    break
+                case "Escape":
+                    page.dialog && page.dialog.Pane.Show()
+                    break
+            }
         }
+        break
     },
-    onaction: {
+
+    Action: {
         title: function(event, item, value, page) {
             ctx.Search({"river": page.river.Pane.which.get(), "storm": page.storm.Pane.which.get(), "layout": page.action.Pane.Layout()})
         },
@@ -99,9 +97,7 @@ var page = Page({check: true,
                 meta[value](event)
             }))
         },
-    },
 
-    Action: {
         "聊天": function(event, value) {
             page.which.set(value)
             page.onlayout(event, page.conf.layout)
@@ -129,6 +125,12 @@ var page = Page({check: true,
             page.onlayout(event, {header:0, footer:0, river:0, storm:0, action: -1})
         },
     },
+    Button: shy({"user": "", "title": ""}, ["user"], function(key, value) {var meta = arguments.callee.meta
+        return kit.isNone(key)? meta: kit.isNone(value)? meta[key]: (meta[key] = value, page.header.Pane.Show())
+    }),
+    Status: shy({"ncmd": "0", "ntxt": "0"}, ["ncmd", "ntxt"], function(key, value) {var meta = arguments.callee.meta
+        return kit.isNone(key)? meta: kit.isNone(value)? meta[key]: (meta[key] = value, page.footer.Pane.Show())
+    }),
 
     initOcean: function(page, field, option, output) {
         var table = kit.AppendChild(output, "table")
@@ -250,10 +252,8 @@ var page = Page({check: true,
 
                 var foot = page.footer.Pane, cmds = [river, "brow", i||which[river]||0]
                 cmds[2] || (output.innerHTML = ""), pane.Tickers(page.conf.refresh, cmds, function(line, index, msg) {
-                    pane.Append("", line, ["text"], "index", function(line, index, event, args, cbs) {
+                    pane.Append("", line, ["text"], "index")
-                        page.action.Pane.Core(event, line, args, cbs)
+                    page.Status("ntxt", which[river] = cmds[2] = parseInt(line.index)+1)
-                    })
-                    foot.State("ntxt", which[river] = cmds[2] = parseInt(line.index)+1)
                 })
             },
             Listen: {
@@ -427,9 +427,7 @@ var page = Page({check: true,
                 if (data) {return pane.which.set(data.which)}
 
                 pane.Event(event, {}, {name: pane.Zone("show", river)})
-                output.innerHTML = "", pane.Appends([river], "text", ["key", "count"], "key", which||ctx.Search("storm")||true, null, function(msg) {
+                output.innerHTML = "", pane.Appends([river], "text", ["key", "count"], "key", which||ctx.Search("storm")||true, null)
-                    pane.which.get() == "" && pane.Select(0, msg.key[0])
-                })
             },
             Listen: {
                 river: function(value, old) {var pane = field.Pane
@@ -456,9 +454,12 @@ var page = Page({check: true,
                         }})
                     })
                 },
+                "刷新": function(event) {
+                },
             },
             Button: ["创建", "共享"],
             Choice: ["创建", "共享"],
+            Detail: ["刷新"],
         }
     },
     initSteam: function(page, field, option, output) {
@@ -581,12 +582,11 @@ var page = Page({check: true,
         }
     },
     init: function(page) {
-		page.action.Pane.Layout(ctx.Search("layout")? ctx.Search("layout"): kit.device.isMobile? page.conf.first: page.conf.mobile)
+        page.Button("user", page.who.get())
-        page.footer.Pane.Order({"ncmd": "0", "ntxt": "0"}, ["ncmd", "ntxt"], function(event, item, value) {})
+        page.Button("title", "github.com/shylinux/context")
-        page.header.Pane.Order({"user": page.who.get(), "title": "github.com/shylinux/context"}, ["user"], function(event, item, value) {
+        page.Status("title", '<a href="mailto:shylinux@163.com">shylinux@163.com</a>')
-            page.onaction[item] && page.onaction[item](event, item, value, page)
-        })
         page.river.Pane.Show()
+		page.Action[ctx.Search("layout") || (kit.device.isMobile? page.conf.first: page.conf.mobile)]()
         page.WSS()
     },
 })

usr/librarys/example.css

@@ -70,7 +70,7 @@ fieldset>div.action div.space {
 fieldset>div.output {
     clear:both;
     /* max-height:800px; */
-    padding:6px;
+    padding:5px;
 }
 fieldset>div.output div.item {
     padding:2px;

usr/librarys/example.js

@@ -102,7 +102,7 @@ function Meta(zone, target, obj) {
                     break
             }
 
-            var ui = kit.AppendChild(output, item? list: [{view: ["item"], data: {draggable: true}, list:list}])
+            var ui = kit.AppendChild(output, item? list: [{view: ["item"], data: {id: "item"+meta.ID(), draggable: true}, list:list}])
             return ui.item.Meta = text, ui
         }),
         Include: shy("加载脚本", function(src, cb) {src = kit.List(src)
@@ -128,7 +128,7 @@ function Meta(zone, target, obj) {
 }
 function Page(page) {
     var script = {}, record = ""
-    page = Meta([document.title], document.body, page, {
+    page = Meta([document.title], document.body, page, {check: true,
         onload: function(event) {
             // Event入口 0
             page.Event(event, {})
@@ -168,11 +168,9 @@ function Page(page) {
 
             // 事件回调
             window.onresize = function(event) {
-                page.onlayout && page.onlayout(event)
+                page.onlayout(event)
             }, document.body.onkeydown = function(event) {
-                if (page.localMap && page.localMap(event)) {return}
+                page.oncontrol(event) || page.onscroll(event)
-                page.oncontrol && page.oncontrol(event, document.body, "control")
-
             }, document.body.onkeyup = function(event) {
             }, document.body.oncontextmenu = function(event) {
             }, document.body.onmousewheel = function(event) {
@@ -258,6 +256,8 @@ function Page(page) {
             event.preventDefault()
             return true
         },
+        onlayout: function() {},
+        oncontrol: function() {},
         onscroll: function(event, target, action) {
             switch (event.key) {
                 case " ":
@@ -537,33 +537,26 @@ function Page(page) {
             }
         },
         initHeader: function(page, field, option, output) {
-            var state = {title: "github.com/shylinux/context"}, list = [], cb = function(event, item, value) {}
+            var cb = function(event, item, value) {
+                kit._call(page.Action[item], [event, item, value, page])
+            }
             field.onclick = function(event) {page.pane && page.pane.scrollTo(0, 0)}
-            page.who.change(function(value, old) {field.Pane.State("user", value)})
+            page.who.change(function(value, old) {page.Button("user", value)})
 
             return {
-                Order: function(value, order, cbs) {
+                Show: function() {var meta = page.Button.meta, list = page.Button.list
-                    state = value, list = order, cb = cbs || cb, field.Pane.Show()
-                },
-                State: function(name, value) {
-                    kit.notNone(value) && (state[name] = value, field.Pane.Show())
-                    return kit.isNone(name)? state: state[name]
-                },
-                Show: function() {
                     kit.AppendChilds(output, [
-                        {"view": ["title", "div", state.title], click: function(event) {
+                        {"view": ["title", "div", meta.title], click: cb},
-                            cb(event, "title", state.title)
+                        {"view": ["state"], list: list.map(function(item) {return {text: [meta[item], "div", "item"], click: cb}})},
-                        }},
-                        {"view": ["state"], list: list.map(function(item) {return {text: [state[item], "div", "item"], click: function(event) {
-                            cb(event, item, state[item])
-                        }}})},
                     ])
                 },
 				Help: function() {return []},
             }
         },
         initFooter: function(page, field, option, output) {
-            var state = {title: "<a href='mailto:shylinux@163.com'>shylinux@163.com</>"}, list = [], cb = function(event, item, value) {}
+            var state = {title: "<a href='mailto:shylinux@163.com'>shylinux@163.com</>"}, list = [], cb = function(event, item, value) {
+                kit._call(page.Action[item], [event, item, value, page])
+            }
             var ui = kit.AppendChilds(output, [
                 {"view": ["title", "div", state.title]},
                 {"view": ["state"]},
@@ -598,21 +591,15 @@ function Page(page) {
 
             return {
                 Select: function() {ui.magics.focus()},
-                Order: function(value, order, cbs) {
-                    state = value, list = order, cb = cbs || cb, field.Pane.Show()
-                },
-                State: function(name, value) {
-                    value != undefined && (state[name] = value, field.Pane.Show())
-                    return name == undefined? state: state[name]
-                },
                 Size: function(width, height) {
                     kit.size(field, width, height)
                     ui && kit.size(ui.magics, (width - ui.count.offsetWidth - ui.first.offsetWidth - ui.state.offsetWidth - 40), height-6)
                 },
-                Show: function() {
+                Show: function() {var meta = page.Status.meta, list = page.Status.list
-                    kit.AppendChilds(ui.state, list.map(function(item) {return {text: [item+":"+state[item], "div"], click: function(item) {
+                    kit.AppendChilds(output, [
-                        cb(event, item, state[item])
+                        {"view": ["title", "div", meta.title], click: cb},
-                    }}}))
+                        {"view": ["state"], list: list.map(function(item) {return {text: [item+":"+meta[item], "div", "item"], click: cb}})},
+                    ])
                     field.Pane.Size(field.clientWidth, field.clientHeight)
                 },
                 Help: function() {return []},
@@ -635,8 +622,10 @@ function Pane(page, field) {
 
     var pane = Meta(page.Zone(name), field, (page[field.dataset.init] || function() {})(page, field, option, output) || {}, {
         Appends: shy("添加列表", function(cmds, type, key, which, first, cb, cbs) {
+            var list = []
             pane.Runs(event, cmds, function(line, index, msg) {
                 var ui = pane.Append(type, line, key, which, cb)
+                list.push(ui)
                 if (typeof first == "string") {
                     (line.key == first || line.name == first || line[which] == first || line[key[0]] == first) && ui.item.click()
                 } else {
@@ -644,52 +633,56 @@ function Pane(page, field) {
                 }
                 if (index == msg[msg.append[0]].length-1) {
                     kit.Selector(output, itemkeys).length == 0 && pane.Select(0)
-                    kit._call(cbs, [msg])
+                    kit._call(cbs, [msg, list])
                 }
             })
         }),
         Append: shy("添加列表", function(type, line, key, which, cb) {type = type || line.type
-            var index = kit.Selector(output, itemkey).length
             var ui = pane.View(output, type, line, key)
 
             ui.item.onclick = function(event) { if (pane.which.get() == line[which]) {return}
-                page.script("record", [name, line[key[0]]])
                 pane.Event(event, {}, {name: pane.Zone("select", line[key[0]])})
-                kit.Selector(output, itemkeys, function(item) {kit.classList.del(item, "select")})
+                page.script("record", [name, line[key[0]]])
-                kit.Selector(output, itemkey, function(item, i) {i == index && kit.classList.add(item, "select")})
+                pane.Select(ui.item)
 
                 pane.which.set(line[which])
-                kit._call(cb, [line, index, event])
+                kit._call(cb, [event, line])
+            }
+            ui.item.ondragstart = function(event) {if (event.target != ui.item) {return}
+                event.dataTransfer.setData("item", event.target.id)
+                event.stopPropagation()
+            }
+            ui.item.ondragover = function(event) {if (event.target != ui.item) {return}
+                event.stopPropagation()
+                event.preventDefault()
+                pane.Select(ui.item)
+            }
+            ui.item.ondrop = function(event) {if (event.target != ui.item) {return}
+                var item = pane[event.dataTransfer.getData("item")]
+                output.insertBefore(item, event.target)
+                event.stopPropagation()
+            }
+            ui.item.oncontextmenu = function(event) {
+                pane.Detail && page.carte.Pane.Show(event, shy({}, pane.Detail, function(value, meta, event) {
+                    pane.Check(event, value)
+                }))
             }
 
             if (type == "plugin" && line.name || type == "field") {
-                ui.item.ondragstart = function(event) {
-                    event.stopPropagation()
-                    event.dataTransfer.setData("item", event.target.id)
-                }
-                ui.item.ondragover = function(event) {
-                    ui.item.Plugin && ui.item.Plugin.Select()
-                }
-                ui.item.ondrop = function(event) {
-                    event.stopPropagation()
-                    var item = pane[event.dataTransfer.getData("item")]
-                    output.insertBefore(item, event.target)
-                }
-
                 page.Require(line.init? line.group+"/"+line.init: "", function(init) {
                     page.Require(line.view? line.group+"/"+line.view: "", function(view) {
                         pane.Plugin(page, pane, ui.item, init, function(event, cmds, cbs) {
-                            cb? kit._call(cb, [line, index, event, cmds, cbs]):
+                            kit._call(cb||pane.Core, [event, line, cmds, cbs])
-                                kit._call(pane.Core, [event, line, cmds, cbs])
                         })
                     })
                 })
             }
-            return ui
+            return pane[ui.item.id] = ui.item, ui
         }),
         Select: shy("选择列表", function(index) {
-            kit.Selector(output, itemkey, function(item, i) {
+            kit.Selector(output, itemkey, function(item, i) {if (item != index && i != index) {return}
-                i == index && item.Select()
+                kit.Selector(output, itemkeys, function(item) {kit.classList.del(item, "select")})
+                kit.classList.add(item, "select")
             })
         }),
 
@@ -973,7 +966,7 @@ function Pane(page, field) {
             var Meta = plugin && plugin.target && plugin.target.Meta || {}
             kit.Log(["cmd"].concat(kit.List([Meta.river, Meta.storm, Meta.action])).concat(args[0] == "_cmd"? args[1]: args))
 
-            page.footer.Pane.State("ncmd", kit.History("cmd", -1, {args: args, meta: Meta}))
+            page.Status("ncmd", kit.History("cmd", -1, {args: args, meta: Meta}))
             return args.length > 0 && meta[args[0]]? kit._call(cbs, [msg.Echo(meta[args[0]](args))]):
                     args.length > 0 && engine[args[0]]? kit._call(cbs, [msg.Echo(engine[args[0]](args))]):
                         event.shiftKey? engine._msg(msg): engine._run(msg)
@@ -989,13 +982,6 @@ function Pane(page, field) {
         }),
 
         onaction: shy("事件列表", {
-            ondragover: function(event) {
-                event.preventDefault()
-            },
-            ondrop: function(event) {
-                event.preventDefault()
-                console.log(event.dataTransfer.getData("index"), "drop")
-            },
             oncontextmenu: function(event) {
                 pane.Choice && page.carte.Pane.Show(event, shy({}, pane.Choice, function(value, meta, event) {
                     pane.Check(event, value)
@@ -1078,6 +1064,9 @@ function Plugin(page, pane, field, inits, runs) {
             }).item.Plugin.Select()
         }),
 
+        Move: function() {
+            return field.nextSibling || field.parentNode.firstChild
+        },
         Next: function() {
             return field.nextSibling || field.parentNode.firstChild
         },