opt chrome

frame.js

@@ -589,11 +589,11 @@ Volcanos("onmotion", {help: "动态特效", list: [], _init: function(can, targe
         }}])
     },
 
-    move: function(can, target, layout) { var begin
+    move: function(can, target, layout, cb) { var begin
         target.onmousedown = function(event) {
             layout.height = target.offsetHeight, layout.width = target.offsetWidth
             layout.left = target.offsetLeft, layout.top = target.offsetTop
-            begin = can.base.Copy({}, layout)
+            begin = can.base.Copy({x: event.x, y: event.y}, layout)
         }, target.onmouseup = function(event) { begin = null }
 
         target.onmousemove = function(event) { if (!begin || !event.ctrlKey) { return }
@@ -606,8 +606,10 @@ Volcanos("onmotion", {help: "动态特效", list: [], _init: function(can, targe
                 layout.left = begin.left + event.x - begin.x 
                 can.page.Modify(can, target, {style: {left: layout.left, top: layout.top}})
             }
+            can.base.isFunc(cb) && cb(target)
             event.stopPropagation(), event.preventDefault()
         }
+        can.base.isFunc(cb) && cb(target)
     },
     show: function(can, time, cb, target) { target = target||can._target
         time = can.base.isObject(time)? time: {value: 10, length: time||20}

page/index.css

@@ -54,6 +54,10 @@ select {
 option {
     font-family:monospace;
 }
+textarea {
+    width:400px; height:60px;
+    background-color:cyan;
+}
 
 input[type=button] {
     background-color:black; color:cyan;
@@ -102,10 +106,6 @@ input[name=cmd] {
 input[name=cmd]:hover {
     background-color:white; color:black;
 }
-textarea {
-    width:400px; height:60px;
-    background-color:cyan;
-}
 
 table.layout {
     margin:0; border:0; padding:0;

proto.js

@@ -98,11 +98,11 @@ var wiki = {
     FIELD: "field", SHELL: "shell", LOCAL: "local", PARSE: "parse",
 }
 var chat = {
-    LIB: "lib", PAGE: "page", PANEL: "panel", PLUGIN: "plugin", STORY: "story",
+    LIB: "lib", PAGE: "page", PANEL: "panel", PLUGIN: "plugin", STORY: "story", FLOAT: "float", CONTEXTS: "contexts",
-    CARTE: "carte", INPUT: "input", FLOAT: "float", OUTPUT: "output",
+    CARTE: "carte", INPUT: "input", OUTPUT: "output",
     HEAD: "head", LEFT: "left", MAIN: "main", AUTO: "auto", FOOT: "foot",
     LAYOUT: "layout", PROJECT: "project", CONTENT: "content", DISPLAY: "display", PROFILE: "profile",
-    SCROLL: "scroll", HEIGHT: "height", WIDTH: "width", LEFT: "left", TOP: "top",
+    SCROLL: "scroll", HEIGHT: "height", WIDTH: "width", LEFT: "left", TOP: "top", RIGHT: "right", BOTTOM: "bottom",
 
     HEADER: "header", FOOTER: "footer",
     ONMAIN: "onmain", ONSIZE: "onsize", ONLOGIN: "onlogin", ONSEARCH: "onsearch",

publish/chrome/contexts.css

@@ -16,33 +16,6 @@ fieldset.contexts form.option div.item {
     float:left; margin-right:3px;
     min-height:25px; vertical-align:middle;
 }
-fieldset.contexts input[type=button] {
-    background-color:#FF9900; color:white;
-    border-radius:10px 10px 10px 10px;
-    border:2px solid #FF9900;
-}
-fieldset.contexts input[type=button]:hover {
-    background-color:#FFCC33;
-    border:2px solid #FFCC33;
-}
-fieldset.contexts input[type=text] {
-    background-color:white; color:black;
-    border-radius:6px 6px 6px 6px;
-    border:2px solid #14a58e;
-}
-fieldset.contexts input[type=text]:hover {
-    background-color:cyan;
-}
-fieldset.contexts div.input textarea {
-    border-radius:6px;
-    border:2px solid #14a58e;
-}
-fieldset.contexts select {
-    background-color:#99CC66; color:white;
-    border-radius:10px 10px 10px 10px;
-    border:2px solid #99CC66;
-}
-
 fieldset.contexts div.output {
     clear:both;
     overflow:auto;
@@ -56,23 +29,38 @@ fieldset.contexts div.status div.item>label {
     /* color:#504242e0; */
 }
 
-fieldset.contexts table {
+fieldset.contexts select {
-    color:white;
+    height:25px; font-size:14px;
-    border:0; white-space:pre;
+    box-shadow: 4px 4px 10px 1px #626bd0;
+    background-color:black; color:cyan;
+    padding:0 10px;
+    cursor:pointer;
 }
-fieldset.contexts table tr {
+fieldset.contexts option {
-    background-color:#e1f1ff1f;
+    font-family:monospace;
 }
-fieldset.contexts table th {
+fieldset.contexts textarea {
-    background-color:#99CCFF;
+    width:400px; height:60px;
+    background-color:cyan;
+}
+fieldset.contexts input[type=button] {
+    background-color:black; color:cyan;
+    letter-spacing:4px;
+    padding-left:10px;
+    cursor:pointer;
+    font-family:monospace;
+}
+fieldset.contexts input[type=button]:hover {
+    background-color:gray; color:cyan;
+}
+fieldset.contexts input[type=text] {
+    width:82px; height:21px; font-size:16px;
+    box-shadow:4px 4px 10px 1px #626bd0;
+    background-color:cyan; color:black;
     padding:0 4px;
 }
-fieldset.contexts table td {
+fieldset.contexts input[type=text]:hover {
-    text-align:left;
+    background-color:white;
-    padding:0 4px;
-}
-fieldset.contexts table.content tr:hover {
-    background-color:green;
 }
 fieldset.contexts div.code {
     background-color:#343a3445; color:white;
@@ -84,10 +72,49 @@ fieldset.contexts div.code {
     clear:both;
 }
 
+
+table.content {
+    border:0; white-space:pre;
+    font-size:14px; font-family:monospace;
+    text-align:left;
+    overflow: auto;
+}
+table.content tr {
+    background-color:#04272f45;
+}
+table.content tr.select {
+    background-color:green;
+}
+table.content tr:hover {
+    background-color:green;
+}
+table.content th {
+    background-color:#0fbd45;
+    padding:2px 6px;
+    cursor:pointer;
+}
+table.content th:hover {
+    background-color:red;
+}
+table.content td {
+    padding:2px 6px;
+    overflow:auto;
+}
+table.content td.done {
+    background-color:green;
+}
+table.content td.select {
+    background-color:red;
+}
+table.content td:hover {
+    background-color:red;
+}
+
 body>div.toast {
     background:#0e3369b3; color:yellow;
     position:fixed;
     padding:5px; overflow:auto;
+    z-index:10;
 }
 body>div.toast a {
     color:yellow;
@@ -125,6 +152,7 @@ body>div.carte {
     color:white;
     padding:4px;
     min-width:80px;
+    z-index:10;
 }
 body>div.carte div.item {
     padding:3px 12px;
@@ -132,19 +160,44 @@ body>div.carte div.item {
 body>div.carte div.item:hover {
     background:red;
 }
-
 body>div.input {
     position:fixed;
     background-color:#0d4142a6;
+    z-index:10;
+}
+body>div.input input[type=text] {
+    width:171px;
+}
+body>div.input input[name=username] {
+    width:171px;
+}
+body>div.input input[name=password] {
+    width:171px;
 }
 body>div.input textarea {
     box-shadow: 4px 4px 10px 1px #626bd0;
     border:2px inset #14a58e;
-    width:165px; height:60px;
+    width:171px; height:60px;
     background-color: cyan;
     padding:4px;
-
 }
 body>div.input div.item {
     float:left;
 }
+body>div.input.login {
+    padding:10px;
+}
+body>div.input.login input {
+    font-size:18px;
+}
+
+div.input input[type=button] {
+    background-color:black; color:cyan;
+    letter-spacing:4px;
+    padding-left:10px;
+    cursor:pointer;
+    font-family:monospace;
+}
+div.input input[type=button]:hover {
+    background-color:gray; color:cyan;
+}

publish/chrome/contexts.js

@@ -4,15 +4,26 @@ setTimeout(function() { Volcanos({
         msg.Echo("hello")
     },
     style: function(can, msg, arg) {
-        can.page.Select(can, document.body, arg[0], function(target) {
+        can.core.List(arg[0].split(ice.FS), function(item) {
+            can.page.Select(can, document.body, item, function(target) {
                 can.page.Modify(can, target, can.base.Obj(arg[1]))
             })
+        })
     },
     field: function(can, msg, arg) {
-        can.onappend.plugin(can, {type: "contexts", index: arg[0], args: can.base.Obj(arg[1])}, function(sub, meta) {
+        can.onmotion.float.auto(can, document.body)
-            can.page.Modify(can, sub._target, {style: {left: msg.Option("left"), top: msg.Option("top"), right: msg.Option("right"), bottom: msg.Option("bottom")}})
+        document.body.ondblclick = function(event) {
-            can.page.Modify(can, sub._output, {style: {"max-height": window.innerHeight, "max-width": window.innerWidth}})
+            can.onengine.signal(can, "onselection")
-            can.onmotion.move(can, sub._target, {})
+        }
+        can.onappend.plugin(can, {type: chat.CONTEXTS, index: arg[0], args: can.base.Obj(arg[1])}, function(sub, meta) {
+            var pos = {left: msg.Option(chat.LEFT), top: msg.Option(chat.TOP), right: msg.Option(chat.RIGHT), bottom: msg.Option(chat.BOTTOM)}
+            can.page.Modify(can, sub._target, {style: pos})
+            can.onmotion.move(can, sub._target, pos, function(target) {
+                can.page.Modify(can, sub._output, {style: {
+                    "max-height": window.innerHeight-target.offsetTop-80,
+                    "max-width": window.innerWidth-target.offsetLeft-20,
+                }})
+            })
 
             sub._legend.onclick = function(event) {
                 can.onmotion.toggle(can, sub._option)
@@ -26,25 +37,26 @@ setTimeout(function() { Volcanos({
                 can.run(event, can.misc.Concat([ctx.ACTION, cli.RUN, meta.index], cmds), cb)
             }
 
-            msg.Option("selection") && (document.body.ondblclick = function(event) {
+            msg.Option("selection") && (can.onengine.listen(can, "onselection", function() {
                 sub.Option(msg.Option("selection"), window.getSelection()), sub.Update()
-            })
+            }))
 
             sub.onaction["保存参数"] = function(event) {
                 can.request(event, {zone: location.host, id: msg.Option(kit.MDB_ID)})
-                can.run(event, [chat.FIELD, mdb.MODIFY, "top", sub._target.offsetTop])
+                can.run(event, [chat.FIELD, mdb.MODIFY, chat.TOP, sub._target.offsetTop])
-                can.run(event, [chat.FIELD, mdb.MODIFY, "left", sub._target.offsetLeft])
+                can.run(event, [chat.FIELD, mdb.MODIFY, chat.LEFT, sub._target.offsetLeft])
                 can.run(event, [chat.FIELD, mdb.MODIFY, "args", JSON.stringify(sub.Input([], true))])
                 can.user.toast(can, "保存成功")
             }
         }, document.body)
     },
     order: function(can, msg, arg) {
-        var ui = can.user.input(event, can, ["index", "args", "selection"], function(event, button, data, list, args) {
+        var ui = can.user.input(event, can, ["index", "args", "selection", "left", "top"], function(event, button, data, list, args) {
             can.run(event, [chat.FIELD, mdb.INSERT, kit.MDB_ZONE, location.host].concat(args), function(res) {
                 can.user.toast(can, "添加成功")
             })
         }); can.page.Modify(can, ui._target, {style: {left: 200, top: 200}})
+        can.page.ClassList.add(can, ui._target, chat.CONTEXTS)
     },
 
     spide: function(can, msg, arg) { var has = {}
@@ -52,10 +64,11 @@ setTimeout(function() { Volcanos({
             if (!item.src || has[item.src]) { return } has[item.src] = true
             var p = can.page.Select(can, document.body, "p.title")[0]
             var ls = item.src.split("?")
-            var ls = ls[0].split(".")
+            var ls = ls[0].split(ice.PT)
+
             msg.Push(kit.MDB_TIME, can.base.Time())
             msg.Push(kit.MDB_TYPE, html.VIDEO)
-            msg.Push(kit.MDB_NAME, (p && p.innerText || html.VIDEO)+"."+ls[ls.length-1])
+            msg.Push(kit.MDB_NAME, (p && p.innerText || html.VIDEO)+ice.PT+ls[ls.length-1])
             msg.Push(kit.MDB_TEXT, item.src)
             msg.Push(kit.MDB_LINK, item.src)
         })
@@ -63,17 +76,15 @@ setTimeout(function() { Volcanos({
         can.page.Select(can, document.body, html.IMG, function(item) {
             if (!item.src || has[item.src]) { return } has[item.src] = true
             var ls = item.src.split("?")
-            var ls = ls[0].split("/")
+            var ls = ls[0].split(ice.PS)
 
             msg.Push(kit.MDB_TIME, can.base.Time())
             msg.Push(kit.MDB_TYPE, html.IMG)
-
             if (item.src.indexOf("data:image") == 0) {
                 msg.Push(kit.MDB_NAME, item.src.slice(item.src.length-20))
             } else {
                 msg.Push(kit.MDB_NAME, ls[ls.length-1]||"image.jpg")
             }
-
             msg.Push(kit.MDB_TEXT, item.src)
             msg.Push(kit.MDB_LINK, item.src)
         })
@@ -93,4 +104,4 @@ setTimeout(function() { Volcanos({
     can.run({}, [ctx.ACTION, ctx.COMMAND], function(msg) {
         msg.result && msg.result[0] && can.field(can, msg, msg.result)
     })
-}) }, 100)
+}) }, 1)