1
0
forked from x/volcanos

add layout

This commit is contained in:
shylinux 2021-01-10 00:27:43 +08:00
parent 1039c3be65
commit 22afd972d2
13 changed files with 168 additions and 68 deletions

View File

@ -1,3 +1,4 @@
var _can_name = "/frame.js"
Volcanos("onengine", {help: "解析引擎", list: [], _init: function(can, meta, list, cb, target) { Volcanos("onengine", {help: "解析引擎", list: [], _init: function(can, meta, list, cb, target) {
can.core.Next(list, function(item, next) { item.type = "pane" can.core.Next(list, function(item, next) { item.type = "pane"
can.onappend._init(can, item, item.list, function(pane) { can.onappend._init(can, item, item.list, function(pane) {
@ -9,13 +10,11 @@ Volcanos("onengine", {help: "解析引擎", list: [], _init: function(can, meta,
}, can[item.name] = pane, next() }, can[item.name] = pane, next()
}, target) }, target)
}, function() { }, function() {
can.require(meta.main.list, function(can) {
var pane = can[meta.main.name], msg = can.request({}) var pane = can[meta.main.name], msg = can.request({})
pane.onkeypop._init(pane, target), pane.onmotion._init(pane) pane.onkeypop._init(pane, target), pane.onmotion._init(pane)
pane.onaction._init(pane, msg, [], cb, pane._target) pane.onaction._init(pane, msg, [], cb, pane._target)
pane.onengine._daemon(pane, pane.user.title()) pane.onengine._daemon(pane, pane.user.title())
}) })
})
}, },
_daemon: function(can, name, cb) { _daemon: function(can, name, cb) {
can.misc.WSS(can, {type: "chrome", name: name}, cb||function(event, msg, cmd, arg) { can.misc.WSS(can, {type: "chrome", name: name}, cb||function(event, msg, cmd, arg) {
@ -679,8 +678,7 @@ Volcanos("onmotion", {help: "动态交互", list: [], _init: function(can) {
begin = {x: event.x, y: event.y, left: layout.left, top: layout.top, width: layout.width, height: layout.height} begin = {x: event.x, y: event.y, left: layout.left, top: layout.top, width: layout.width, height: layout.height}
}, target.onmouseup = function(event) { begin = null } }, target.onmouseup = function(event) { begin = null }
target.onmousemove = function(event) { target.onmousemove = function(event) { if (!begin || !event.ctrlKey) { return }
if (!begin || !event.ctrlKey) { return }
if (event.shiftKey) { if (event.shiftKey) {
layout.width = layout.width + event.x - begin.x layout.width = layout.width + event.x - begin.x
layout.height = layout.height + event.y - begin.y layout.height = layout.height + event.y - begin.y
@ -692,5 +690,14 @@ Volcanos("onmotion", {help: "动态交互", list: [], _init: function(can) {
} }
} }
}, },
select: function(can, target, name, which) {
can.page.Select(can, target, name, function(item, index) {
if (item == which || which == index) {
can.page.ClassList.add(can, item, "select")
} else {
can.page.ClassList.del(can, item, "select")
}
})
},
}) })

View File

@ -11,6 +11,7 @@
</head> </head>
<body> <body>
<script src="/proto.js"></script> <script src="/proto.js"></script>
<script src="/frame.js"></script>
<script src="/page/cache.js"></script> <script src="/page/cache.js"></script>
<script src="/page/index.js"></script> <script src="/page/index.js"></script>
</body> </body>

View File

@ -1,7 +1,7 @@
Volcanos({name: "chat", iceberg: "/chat/", volcano: "/frame.js", Volcanos({name: "chat", iceberg: "/chat/", volcano: "/frame.js",
libs: ["/lib/base.js", "/lib/core.js", "/lib/misc.js", "/lib/page.js", "/lib/user.js"], panes: [ libs: ["/lib/base.js", "/lib/core.js", "/lib/misc.js", "/lib/page.js", "/lib/user.js"], panes: [
{name: "Header", help: "标题栏", pos: "head", state: ["time", "username"]}, {name: "Header", help: "标题栏", pos: "head", state: ["time", "username"]},
{name: "Search", help: "搜索框", pos: "float"}, {name: "Search", help: "搜索框", pos: "auto"},
{name: "River", help: "群聊组", pos: "left", action: ["创建", "刷新"]}, {name: "River", help: "群聊组", pos: "left", action: ["创建", "刷新"]},
{name: "Action", help: "工作台", pos: "main"}, {name: "Action", help: "工作台", pos: "main"},
{name: "Footer", help: "状态条", pos: "foot", state: ["ncmd", "keys"]}, {name: "Footer", help: "状态条", pos: "foot", state: ["ncmd", "keys"]},
@ -11,12 +11,12 @@ Volcanos({name: "chat", iceberg: "/chat/", volcano: "/frame.js",
"/plugin/table.js", "/plugin/table.js",
"/plugin/input/key.js", "/plugin/input/key.js",
"/plugin/input/date.js", "/plugin/input/date.js",
"/plugin/story/trend.js",
"/plugin/story/spide.js",
"/plugin/local/team/plan.js", "/plugin/local/team/plan.js",
"/plugin/local/wiki/draw.js", "/plugin/local/wiki/draw.js",
"/plugin/local/wiki/word.js", "/plugin/local/wiki/word.js",
"/plugin/local/code/vimer.js", "/plugin/local/code/vimer.js",
"/plugin/local/code/inner.js", "/plugin/local/code/inner.js",
"/plugin/story/trend.js",
"/plugin/story/spide.js",
], ],
}) })

View File

@ -11,6 +11,7 @@
</head> </head>
<body> <body>
<script src="/proto.js"></script> <script src="/proto.js"></script>
<script src="/frame.js"></script>
<script src="/page/share.js"></script> <script src="/page/share.js"></script>
</body> </body>

View File

@ -1,21 +1,71 @@
fieldset.Action { fieldset.Action {
background-color:#051625; color:white;
min-width:160px; min-width:160px;
background-color:#051625;
color:white;
} }
fieldset.Action fieldset.plugin { fieldset.Action div.action {
display:none;
}
fieldset.Action div.action.tabs {
width:-webkit-fill-available;
background-color:#159cc7b0;
display:block; height:28px;
padding:0; margin:0;
position:absolute;
z-index:10;
}
fieldset.Action div.action div.item {
padding:4px; margin:0;
}
fieldset.Action div.action div.item:hover {
border-bottom:solid 2px red;
background-color:#2e515f;
cursor:pointer;
}
fieldset.Action div.action div.item.select {
border-bottom:solid 2px red;
background-color:#2e515f;
}
fieldset.Action div.output.tabs {
margin:28px 10px;
padding-bottom:28px;
}
fieldset.Action div.output.flow fieldset.plugin {
float:left;
}
fieldset.Action div.output.grid fieldset.plugin {
width:240px; height:240px; overflow:auto;
float:left;
}
fieldset.Action div.output.grid fieldset.plugin>div.output {
width:240px; height:240px; overflow:auto;
}
fieldset.Action div.output.tabs fieldset.plugin {
display:none; position:absolute;
}
fieldset.Action div.output.tabs fieldset.plugin.select {
display:block;
}
fieldset.Action div.output.free fieldset.plugin {
position:absolute;
}
fieldset.Action div.output.free fieldset.plugin.select {
display:block;
}
fieldset.Action div.output fieldset.plugin {
box-shadow:2px 2px 10px 4px #626bd0; box-shadow:2px 2px 10px 4px #626bd0;
background-color:#113c4a9e; background-color:#113c4a9e;
margin:10px; padding:10px; margin:10px; padding:10px;
} }
fieldset.Action fieldset.plugin:hover { fieldset.Action div.output fieldset.plugin:hover {
box-shadow:4px 4px 12px 6px #626bd0; box-shadow:4px 4px 12px 6px #626bd0;
} }
fieldset.Action fieldset.plugin legend { fieldset.Action div.output fieldset.plugin legend {
background-color:#477182; color:white; background-color:#477182; color:white;
font-size:16px; font-family:monospace; font-size:16px; font-family:monospace;
margin-top:4px 5px; padding:2px 20px; margin-top:4px 5px; padding:2px 20px;
} }
fieldset.Action fieldset.plugin legend:hover { fieldset.Action div.output fieldset.plugin legend:hover {
background:red; background:red;
} }

View File

@ -12,27 +12,32 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
can.onimport._plugin(can, target, river, storm, value), next() can.onimport._plugin(can, target, river, storm, value), next()
}): (can.onimport._plugin(can, target, river, storm, value), next()) }): (can.onimport._plugin(can, target, river, storm, value), next())
}) })
typeof cb == "function" && cb(msg)
}, },
_plugin: function(can, target, river, storm, value) { value.name = value.name.split(" ")[0] _plugin: function(can, target, river, storm, value) { value.name = value.name.split(" ")[0]
value.width = parseInt(can.Conf("width")), value.height = parseInt(can.Conf("height"))
value.action = value.id || value.index || value.key+"."+value.name value.action = value.id || value.index || value.key+"."+value.name
value.type = "plugin" value.type = "plugin"
// 添加插件 // 添加插件
value.width = parseInt(can.Conf("width")), value.height = parseInt(can.Conf("height"))
can.onappend._init(can, value, ["/plugin/state.js"], function(plugin) { can.onappend._init(can, value, ["/plugin/state.js"], function(plugin) {
plugin._option.dataset.id = value.id plugin._option.dataset.id = value.action, value.target = plugin._target
can._plugins = (can._plugins||[]).concat([plugin])
plugin.run = function(event, cmds, cb, silent) { var msg = plugin.request(event); cmds = cmds || [] plugin.run = function(event, cmds, cb, silent) { var msg = plugin.request(event); cmds = cmds || []
can.run(event, can.onengine[cmds[0]]? cmds: [river, storm, value.action].concat(cmds), function(msg) { can.run(event, can.onengine[cmds[0]]? cmds: [river, storm, value.action].concat(cmds), function(msg) {
typeof cb == "function" && cb(msg) typeof cb == "function" && cb(msg)
}, silent) }, silent)
} }
can._plugins = (can._plugins||[]).concat([plugin])
can.onmotion.move(can, plugin._target, {width: plugin.Conf("width"), height: plugin.Conf("height")})
can.page.Append(can, can._action, [{view: ["item", "div", value.name], onclick: function(event) {
can.onmotion.select(can, can._output, "fieldset.plugin", value.target)
can.onmotion.select(can, can._action, "div.item", event.target)
}}])
}, target) }, target)
}, },
_share: function(can, msg, share, cb) { _share: function(can, msg, share, cb) {
can.user.title(msg.Option("title")) can.user.title(msg.Option("title"))
can.user.topic(can, can.user.Search(can, "topic")||msg.Option("topic")||"white print") can.user.topic(can, can.user.Search(can, "topic")||msg.Option("topic")||"white")
can.Conf(RIVER, "_share"), can.Conf(STORM, share) can.Conf(RIVER, "_share"), can.Conf(STORM, share)
can.onimport._init(can, msg, [], cb, can._output) can.onimport._init(can, msg, [], cb, can._output)
}, },
@ -60,34 +65,18 @@ Volcanos("onengine", {help: "解析引擎", list: [],
}) })
Volcanos("onaction", {help: "交互操作", list: [], _init: function(can, msg, list, cb, target) { Volcanos("onaction", {help: "交互操作", list: [], _init: function(can, msg, list, cb, target) {
var share = can.user.Search(can, "share"); if (share) { var share = can.user.Search(can, "share"); if (share) {
can.run({}, ["_share", share], function(msg) { can.run({}, ["_share", share], function(msg) { msg.append && msg[msg.append[0]]? can.onimport._share(can, msg, share, cb):
if (msg.append && msg[msg.append[0]]) {
can.onimport._share(can, msg, share, cb)
return
}
can.onengine.engine({}, can, msg, can, [msg.Option("sess.river"), msg.Option("sess.storm")], function(msg) { can.onengine.engine({}, can, msg, can, [msg.Option("sess.river"), msg.Option("sess.storm")], function(msg) {
can.onimport._share(can, msg, share, cb) can.onimport._share(can, msg, share, cb)
}) })
}) })
} }
can.Conf({width: can._output.offsetWidth-32, height: window.innerHeight})
can.onengine.listen(can, "resize", function(width, height) {
can.Conf({width: width, height: height})
})
can._target.ontouchstart = function(event) {
can.run({}, ["search", "River.onmotion.hidden"])
can.page.Select(can, document.body, "div.carte", function(item) {
can.page.Remove(can, item)
})
}
can.onengine.listen(can, "storm.select", function(msg, river, storm) { can.onengine.listen(can, "storm.select", function(msg, river, storm) {
can.page.Cache(can.Conf(RIVER)+"."+can.Conf(STORM), can._action, can._output.scrollTop+1)
can.page.Cache(can.Conf(RIVER)+"."+can.Conf(STORM), can._output, can._output.scrollTop+1) can.page.Cache(can.Conf(RIVER)+"."+can.Conf(STORM), can._output, can._output.scrollTop+1)
can.Conf(RIVER, river), can.Conf(STORM, storm) can.Conf(RIVER, river), can.Conf(STORM, storm) // 转场
var position = can.page.Cache(river+"."+storm, can._action)
var position = can.page.Cache(river+"."+storm, can._output) var position = can.page.Cache(river+"."+storm, can._output)
if (position) { can._output.scrollTo(0, position-1); return } if (position) { can._output.scrollTo(0, position-1); return }
@ -101,6 +90,18 @@ Volcanos("onaction", {help: "交互操作", list: [], _init: function(can, msg,
}) })
}) })
can.run({}, ["search", "Header.onimport.menu", "action",
["布局", "默认布局", "流动布局", "网格布局", "标签布局", "自由布局"],
], function(event, key) {
can.core.CallFunc(can.onaction[key], {event: event, can: can, key: key})
})
can._target.ontouchstart = function(event) { can.onengine.trigger(can, {}, "action.touch") }
can.Conf({width: can._output.offsetWidth-34, height: window.innerHeight})
can.onengine.listen(can, "resize", function(width, height) {
can.Conf({width: width-6, height: height})
})
can.onengine.listen(can, "search", function(msg, word) { can.onengine.listen(can, "search", function(msg, word) {
if (word[0] != "*" && word[0] != "plugin") { return } if (word[0] != "*" && word[0] != "plugin") { return }
@ -118,22 +119,43 @@ Volcanos("onaction", {help: "交互操作", list: [], _init: function(can, msg,
msg.Push(key, shy("跳转", function() { msg.Push(key, shy("跳转", function() {
var input = can.page.Select(can, item.parentNode, "input.args")[0] var input = can.page.Select(can, item.parentNode, "input.args")[0]
input && input.focus() input && input.focus()
})) })); break
break default: msg.Push(key, "")
default:
msg.Push(key, "")
} }
}) })
}) })
}) })
}, },
"默认布局": function(event, can) {
can.page.Modify(can, can._action, {className: "action auto"})
can.page.Modify(can, can._output, {className: "output auto"})
},
"流动布局": function(event, can) {
can.page.Modify(can, can._action, {className: "action flow"})
can.page.Modify(can, can._output, {className: "output flow"})
},
"网格布局": function(event, can) {
can.page.Modify(can, can._action, {className: "action grid"})
can.page.Modify(can, can._output, {className: "output grid"})
},
"标签布局": function(event, can) {
can.page.Modify(can, can._action, {className: "action tabs"})
can.page.Modify(can, can._output, {className: "output tabs"})
can.onmotion.select(can, can._output, "fieldset.plugin", 0)
can.onmotion.select(can, can._action, "div.item", 0)
},
"自由布局": function(event, can) {
can.page.Modify(can, can._action, {className: "action free"})
can.page.Modify(can, can._output, {className: "output free"})
},
}) })
Volcanos("onexport", {help: "导出数据", list: [], Volcanos("onexport", {help: "导出数据", list: [],
args: function(can, msg, list, cb, target) { args: function(can, msg, list, cb, target) {
can.core.Next(can.page.Select(can, target, "fieldset.plugin>form.option"), function(item, next) { can.page.Select(can, target, "fieldset.plugin>form.option"), function(item, next) {
var list = can.page.Select(can, item, '.args', function(item) { return item.value||"" }) var list = can.page.Select(can, item, '.args', function(item) { return item.value||"" })
item.dataset.args = JSON.stringify(list), cb(item, next) item.dataset.args = JSON.stringify(list), cb(item, next)
}) }
}, },
}) })
})() })()

View File

@ -98,7 +98,6 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
var cb = can.onaction[item]; typeof cb == "function" && cb(event, can, item) var cb = can.onaction[item]; typeof cb == "function" && cb(event, can, item)
}} }}
})) }))
can.menu = can.page.Append(can, target, [{view: ["menu", "some"], style: {float: "left"}}]).first
}, },
time: function(can, target) { time: function(can, target) {
@ -106,24 +105,23 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
can.onlayout.topic(can) can.onlayout.topic(can)
}, },
menu: function(can, cmds, cb) { menu: function(can, cmds, cb) { // type item...
can.onmotion.clear(can, can.menu) can.page.Append(can, can._output, [{type: cmds[0], list: can.core.List(cmds.slice(1), function(item) {
can.core.List(cmds, function(item) {
if (typeof item == "string") { if (typeof item == "string") {
can.page.Append(can, can.menu, [{view: ["menu", "div", item], onclick: function(event) { return {view: ["menu", "div", item], onclick: function(event) {
typeof cb == "function" && cb(event, item) typeof cb == "function" && cb(event, item)
}}]) }}
} else if (item.length > 0) { } else if (item.length > 0) {
can.page.Append(can, can.menu, [{view: ["menu", "div", item[0]], onclick: function(event) { return {view: ["menu", "div", item[0]], onclick: function(event) {
var ui = can.user.carte(event, can, can.onaction, item.slice(1), cb) var ui = can.user.carte(event, can, can.onaction, item.slice(1), cb)
can.page.Modify(can, ui.first, {style: {top: can._target.offsetHeight}}) can.page.Modify(can, ui.first, {style: {top: can._target.offsetHeight}})
}}]) }}
} else if (typeof item == "object") { } else if (typeof item == "object") {
can.page.Append(can, can.menu, [item]) return item
} }
}) }) }])
}, },
}) })
Volcanos("onaction", {help: "交互数据", list: [], _init: function(can, msg, list, cb, target) { Volcanos("onaction", {help: "交互数据", list: [], _init: function(can, msg, list, cb, target) {

View File

@ -3,10 +3,10 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
can._main_river = can.user.Search(can, RIVER) || (can.user.isMobile||can.user.isExtension? "product": "project") can._main_river = can.user.Search(can, RIVER) || (can.user.isMobile||can.user.isExtension? "product": "project")
can._main_storm = can.user.Search(can, STORM) || (can.user.isMobile? "office": can.user.isExtension? "chrome": "studio") can._main_storm = can.user.Search(can, STORM) || (can.user.isMobile? "office": can.user.isExtension? "chrome": "studio")
can.run({}, ["search", "Header.onimport.menu", can.run({}, ["search", "Header.onimport.menu", "river",
["添加", "创建群组", "添加用户", "添加应用", "添加工具", "添加设备"], ["添加", "创建群组", "添加应用", "添加工具", "添加用户", "添加设备"],
["访问", "访问用户", "访问应用", "访问工具", "访问设备", "访问研发"], ["访问", "访问研发", "访问应用", "访问工具", "访问用户", "访问设备"],
["共享", "共享群组", "共享应用", "共享工具"], ["共享", "共享群组", "共享应用", "共享工具", "共享用户", "共享设备"],
], function(event, item) { ], function(event, item) {
var cb = can.ondetail[item]; typeof cb == "function" && cb(event, can, item, can.Conf(RIVER), can.Conf(STORM)) var cb = can.ondetail[item]; typeof cb == "function" && cb(event, can, item, can.Conf(RIVER), can.Conf(STORM))
}) })
@ -44,6 +44,14 @@ Volcanos("onaction", {help: "控件交互", list: [], _init: function(can, msg,
can.run({}, [], function(msg) { can.run({}, [], function(msg) {
can.onimport._init(can, msg, list, cb, can._output) can.onimport._init(can, msg, list, cb, can._output)
}) })
can.onengine.listen(can, "action.touch", function() {
can.page.Select(can, document.body, "div.carte", function(item) {
can.page.Remove(can, item)
})
})
can.onengine.listen(can, "search", function(msg, word) { can.onengine.listen(can, "search", function(msg, word) {
if (word[0] != "*" && word[0] != "storm") { return } if (word[0] != "*" && word[0] != "storm") { return }

View File

@ -1,9 +1,7 @@
fieldset.Search { fieldset.Search {
position:fixed; top:32px; left:160px; background:#041a258a; padding:10px;
background:#041a258a; position:fixed; z-index:20;
padding:10px;
display:none; display:none;
z-index:10;
} }
fieldset.Search input.word { fieldset.Search input.word {
width:-webkit-fill-available; width:-webkit-fill-available;

View File

@ -56,6 +56,13 @@ Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg,
can.onimport._word(can, msg, cmds, fields) can.onimport._word(can, msg, cmds, fields)
} }
can.page.Select(can, document.body, "fieldset.pane.Header", function(item) {
can.page.Modify(can, can._target, {style: {top: item.offsetHeight}})
})
can.page.Select(can, document.body, "fieldset.pane.River", function(item) {
can.page.Modify(can, can._target, {style: {left: item.offsetWidth}})
})
can.onmotion.show(can), can.ui.input.focus() can.onmotion.show(can), can.ui.input.focus()
can.onimport._word(can, msg, cmds, fields) can.onimport._word(can, msg, cmds, fields)
}, },

View File

@ -4,6 +4,7 @@ Volcanos("onimport", {help: "导入数据", _init: function(can, msg, list, cb,
can.onimport._init(can, msg, list, cb, target) can.onimport._init(can, msg, list, cb, target)
}) })
}) })
can.page.Modify(can, can._target, {style: {"max-width": can.Conf("width")}})
var width = can.Conf("width"), height = can.Conf("height") var width = can.Conf("width"), height = can.Conf("height")
can.ui = can.page.Appends(can, target, [ can.ui = can.page.Appends(can, target, [

View File

@ -1,4 +1,11 @@
Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb, target) { target.innerHTML = "" Volcanos("onimport", {help: "导入数据", list: [], _init: function(can, msg, list, cb, target) { target.innerHTML = ""
var list = []; can.onengine.listen(can, "resize", function(width, height) {
can.Conf({width: width, height: height}), can.core.Delay(list, 100, function() {
can.onimport._init(can, msg, list, cb, target)
})
})
can.page.Modify(can, can._target, {style: {"max-width": can.Conf("width")}})
if (msg.Option("_display") == "table") { if (msg.Option("_display") == "table") {
return can.onappend.table(can, msg, target, "table", function(value, key) { return can.onappend.table(can, msg, target, "table", function(value, key) {
return {text: [value, "td"], onclick: function(event) { return {text: [value, "td"], onclick: function(event) {

View File

@ -17,13 +17,13 @@ var Volcanos = shy("火山架", {libs: [], cache: {}}, [], function(name, can, l
meta.volcano = Config.volcano, meta.libs = Config.libs meta.volcano = Config.volcano, meta.libs = Config.libs
// 预加载 // 预加载
var Preload = Config.libs; Config.panes.forEach(function(pane) { var Preload = []; Config.panes.forEach(function(pane) {
Preload = Preload.concat(pane.list = pane.list || ["/pane/"+pane.name+".css", "/pane/"+pane.name+".js"]) Preload = Preload.concat(pane.list = pane.list || ["/pane/"+pane.name+".css", "/pane/"+pane.name+".js"])
}); Preload = Preload.concat(Config.plugin) }); Preload = Preload.concat(Config.plugin)
// 根模块 // 根模块
name = Config.name, can = {_follow: Config.name, _target: document.body} name = Config.name, can = {_follow: Config.name, _target: document.body}
libs = Preload.concat(Config.volcano), cb = function(can) { libs = Preload.concat(Config.main.list, Config.libs), cb = function(can) {
can.onengine._init(can, can.Conf(Config), Config.panes, function(msg) { can.onengine._init(can, can.Conf(Config), Config.panes, function(msg) {
can.base.Log(name, "run", window.can = can) can.base.Log(name, "run", window.can = can)
var list = []; document.body.onresize = function() { can.core.Delay(list, 100, function() { var list = []; document.body.onresize = function() { can.core.Delay(list, 100, function() {