diff --git a/frame.js b/frame.js index 459bf0bd..0b47989b 100644 --- a/frame.js +++ b/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} diff --git a/page/index.css b/page/index.css index fdeb5170..0c45e177 100644 --- a/page/index.css +++ b/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; diff --git a/proto.js b/proto.js index c2107814..eefcc49f 100644 --- a/proto.js +++ b/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", - CARTE: "carte", INPUT: "input", FLOAT: "float", OUTPUT: "output", + LIB: "lib", PAGE: "page", PANEL: "panel", PLUGIN: "plugin", STORY: "story", FLOAT: "float", CONTEXTS: "contexts", + 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", diff --git a/publish/chrome/contexts.css b/publish/chrome/contexts.css index aad39ba6..dc8498d2 100644 --- a/publish/chrome/contexts.css +++ b/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 { - color:white; - border:0; white-space:pre; +fieldset.contexts select { + height:25px; font-size:14px; + box-shadow: 4px 4px 10px 1px #626bd0; + background-color:black; color:cyan; + padding:0 10px; + cursor:pointer; } -fieldset.contexts table tr { - background-color:#e1f1ff1f; +fieldset.contexts option { + font-family:monospace; } -fieldset.contexts table th { - background-color:#99CCFF; +fieldset.contexts textarea { + 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 { - text-align:left; - padding:0 4px; -} -fieldset.contexts table.content tr:hover { - background-color:green; +fieldset.contexts input[type=text]:hover { + background-color:white; } 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; +} diff --git a/publish/chrome/contexts.js b/publish/chrome/contexts.js index 004ad505..3511749e 100644 --- a/publish/chrome/contexts.js +++ b/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.page.Modify(can, target, can.base.Obj(arg[1])) + 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.page.Modify(can, sub._target, {style: {left: msg.Option("left"), top: msg.Option("top"), right: msg.Option("right"), bottom: msg.Option("bottom")}}) - can.page.Modify(can, sub._output, {style: {"max-height": window.innerHeight, "max-width": window.innerWidth}}) - can.onmotion.move(can, sub._target, {}) + can.onmotion.float.auto(can, document.body) + document.body.ondblclick = function(event) { + can.onengine.signal(can, "onselection") + } + 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, "left", sub._target.offsetLeft]) + can.run(event, [chat.FIELD, mdb.MODIFY, chat.TOP, sub._target.offsetTop]) + 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)