mirror of
https://shylinux.com/x/ContextOS
synced 2025-04-25 16:58:06 +08:00
opt carte.js
This commit is contained in:
shaoying
parent
87dc8a097b
commit
c0a949ccd0
@ -7,5 +7,5 @@ var version = struct {
|
||||
self int
|
||||
}{
|
||||
[]string{"2017-11-01 01:02:03", "2019-07-13 18:02:21"},
|
||||
`2019-10-03 22:53:09`, `mac`, 637,
|
||||
`2019-10-05 11:17:52`, `mac`, 638,
|
||||
}
|
||||
|
||||
@ -3,6 +3,7 @@ package chat
|
||||
import (
|
||||
"contexts/ctx"
|
||||
"contexts/web"
|
||||
|
||||
"net/http"
|
||||
"toolkit"
|
||||
)
|
||||
@ -28,7 +29,7 @@ func check(m *ctx.Message, arg []string) ([]string, string, bool) {
|
||||
var Index = &ctx.Context{Name: "chat", Help: "会议中心",
|
||||
Caches: map[string]*ctx.Cache{},
|
||||
Configs: map[string]*ctx.Config{
|
||||
"login": &ctx.Config{Name: "login", Value: map[string]interface{}{"check": false, "local": true, "expire": "720h"}, Help: "默认组件"},
|
||||
"login": &ctx.Config{Name: "login", Value: map[string]interface{}{"check": false, "local": true, "expire": "720h"}, Help: "用户登录"},
|
||||
"componet": &ctx.Config{Name: "componet", Value: map[string]interface{}{
|
||||
"index": []interface{}{
|
||||
map[string]interface{}{"name": "head",
|
||||
@ -37,6 +38,12 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心",
|
||||
}}, "favicon": "favicon.ico", "styles": []interface{}{
|
||||
"example.css", "chat.css",
|
||||
}},
|
||||
map[string]interface{}{"name": "toast",
|
||||
"tmpl": "fieldset", "view": "Toast dialog", "init": "initToast",
|
||||
},
|
||||
map[string]interface{}{"name": "carte",
|
||||
"tmpl": "fieldset", "view": "Carte dialog", "init": "initCarte",
|
||||
},
|
||||
map[string]interface{}{"name": "login",
|
||||
"tmpl": "fieldset", "view": "Login dialog", "init": "initLogin",
|
||||
"ctx": "web.chat", "cmd": "login",
|
||||
@ -78,7 +85,7 @@ var Index = &ctx.Context{Name: "chat", Help: "会议中心",
|
||||
|
||||
map[string]interface{}{"name": "footer",
|
||||
"tmpl": "fieldset", "view": "Footer", "init": "initFooter",
|
||||
"title": "shycontext 地势坤，君子以厚德载物",
|
||||
"ctx": "web.chat", "cmd": "login",
|
||||
},
|
||||
map[string]interface{}{"name": "tail",
|
||||
"tmpl": "tail", "scripts": []interface{}{
|
||||
|
||||
@ -8,6 +8,12 @@ fieldset.Ocean div.create pre:hover {
|
||||
fieldset.River {
|
||||
float:left;
|
||||
}
|
||||
fieldset.River>div.output {
|
||||
padding:0;
|
||||
}
|
||||
fieldset.River>div.output>div.item {
|
||||
padding-left:6px;
|
||||
}
|
||||
fieldset.Target div.output div.item:hover {
|
||||
background-color:lightgreen;
|
||||
}
|
||||
@ -42,6 +48,12 @@ fieldset.Action div.output div.item:hover {
|
||||
fieldset.Storm {
|
||||
float:right;
|
||||
}
|
||||
fieldset.Storm>div.output {
|
||||
padding:0;
|
||||
}
|
||||
fieldset.Storm>div.output>div.item {
|
||||
padding-left:6px;
|
||||
}
|
||||
|
||||
fieldset.Steam table.device {
|
||||
padding:10px;
|
||||
|
||||
@ -444,7 +444,7 @@ var page = Page({check: true,
|
||||
Listen: {
|
||||
river: function(value, old) {river = value},
|
||||
storm: function(value, old) {
|
||||
field.Pane.Save(river+storm, output)
|
||||
field.Pane.Save(river+"."+storm, output)
|
||||
storm = value, field.Pane.Show()
|
||||
},
|
||||
source: function(value, old) {input = value},
|
||||
@ -545,8 +545,8 @@ var page = Page({check: true,
|
||||
"", "执行", "下载", "清空", "返回",
|
||||
],
|
||||
Choice: [
|
||||
["layout", "聊天", "办公", "工作"],
|
||||
"刷新", "清屏", "并行", "串行",
|
||||
"", "聊天", "办公", "工作",
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
@ -72,11 +72,17 @@ fieldset>div.output {
|
||||
/* max-height:800px; */
|
||||
padding:6px;
|
||||
}
|
||||
fieldset>div.output div.item {
|
||||
padding:2px;
|
||||
}
|
||||
fieldset>div.output div.item:hover {
|
||||
cursor:pointer;
|
||||
background-color:red;
|
||||
border:ridge 2px yellow;
|
||||
}
|
||||
fieldset>div.output div.item.select {
|
||||
background-color:red;
|
||||
border:ridge 2px yellow;
|
||||
}
|
||||
fieldset>div.output div.code {
|
||||
color:white;
|
||||
@ -129,41 +135,6 @@ fieldset>div.Help>div {
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
fieldset.carte {
|
||||
border:solid 2px red;
|
||||
background-color:#ffffff;
|
||||
position:absolute;
|
||||
display:none;
|
||||
z-index:200;
|
||||
}
|
||||
fieldset.carte>div.output>div.line {
|
||||
border:solid 1px gray;
|
||||
margin-top:8px;
|
||||
}
|
||||
fieldset.toast {
|
||||
border:solid 2px red;
|
||||
background-color:#ffffff;
|
||||
position:absolute;
|
||||
display:none;
|
||||
z-index:100;
|
||||
}
|
||||
fieldset.toast>div.output {
|
||||
padding:0 10px;
|
||||
}
|
||||
fieldset.toast>div.output>div.title {
|
||||
font-size:12px;
|
||||
}
|
||||
fieldset.toast>div.output>div.content {
|
||||
word-break:break-word;
|
||||
white-space:pre-wrap;
|
||||
text-align:center;
|
||||
margin:0px;
|
||||
padding:2px;
|
||||
font-size:16px;
|
||||
}
|
||||
fieldset.toast>div.output>div.tick {
|
||||
font-size:12px;
|
||||
}
|
||||
fieldset.dialog {
|
||||
background-color:lightgray;
|
||||
padding:10px;
|
||||
@ -191,6 +162,61 @@ fieldset.dialog>div.create table {
|
||||
min-width:240px;
|
||||
}
|
||||
|
||||
fieldset.dialog.Toast {
|
||||
border:solid 2px red;
|
||||
background-color:#ffffff;
|
||||
position:absolute;
|
||||
display:none;
|
||||
z-index:100;
|
||||
}
|
||||
fieldset.dialog.Toast>div.output {
|
||||
padding:0 10px;
|
||||
}
|
||||
fieldset.dialog.Toast>div.output>div.title {
|
||||
font-size:12px;
|
||||
}
|
||||
fieldset.dialog.Toast>div.output>div.content {
|
||||
word-break:break-word;
|
||||
white-space:pre-wrap;
|
||||
text-align:center;
|
||||
margin:0px;
|
||||
padding:2px;
|
||||
font-size:16px;
|
||||
}
|
||||
fieldset.dialog.Toast>div.output>div.tick {
|
||||
font-size:12px;
|
||||
}
|
||||
fieldset.dialog.Carte {
|
||||
padding:0;
|
||||
border:solid 2px red;
|
||||
background-color:greenyellow;
|
||||
position:absolute;
|
||||
display:none;
|
||||
z-index:200;
|
||||
}
|
||||
fieldset.dialog.Carte>div.action {
|
||||
padding:0;
|
||||
}
|
||||
fieldset.dialog.Carte>div.output {
|
||||
padding:0;
|
||||
}
|
||||
fieldset.dialog.Carte>div.output button {
|
||||
display:block;
|
||||
}
|
||||
fieldset.dialog.Carte>div.output select {
|
||||
display:block;
|
||||
}
|
||||
fieldset.dialog.Carte>div.output div.layout>div {
|
||||
float:left;
|
||||
}
|
||||
fieldset.dialog.Carte>div.output div.item {
|
||||
padding:0px 6px;
|
||||
}
|
||||
fieldset.dialog.Carte>div.output div.space {
|
||||
border:solid 1px gray;
|
||||
margin-top:8px;
|
||||
}
|
||||
|
||||
fieldset.Login {
|
||||
font-size:28px;
|
||||
z-index:20;
|
||||
@ -205,26 +231,38 @@ fieldset.Login>form.option button {
|
||||
}
|
||||
fieldset.Header {
|
||||
height:32px;
|
||||
clear:both;
|
||||
min-width:640px;
|
||||
clear:both;
|
||||
}
|
||||
fieldset.Header>div.output div.title {
|
||||
float:left;
|
||||
fieldset.Header>div.action {
|
||||
padding:0;
|
||||
}
|
||||
fieldset.Header>div.output>div.title {
|
||||
cursor:pointer;
|
||||
float:left;
|
||||
}
|
||||
fieldset.Header>div.output div.state {
|
||||
fieldset.Header>div.output>div.title:hover {
|
||||
background-color:red;
|
||||
}
|
||||
fieldset.Header>div.output>div.state {
|
||||
float:right;
|
||||
}
|
||||
fieldset.Header>div.output div.state div {
|
||||
fieldset.Header>div.output>div.state>div {
|
||||
cursor:pointer;
|
||||
margin-left:5px;
|
||||
float:right;
|
||||
cursor:pointer;
|
||||
}
|
||||
fieldset.Header>div.output>div.state>div:hover {
|
||||
background-color:red;
|
||||
}
|
||||
fieldset.Footer {
|
||||
clear:both;
|
||||
overflow:hidden;
|
||||
height:32px;
|
||||
}
|
||||
fieldset.Footer>div.action {
|
||||
padding:0;
|
||||
}
|
||||
fieldset.Footer>div.output div.title {
|
||||
float:left;
|
||||
}
|
||||
@ -246,9 +284,13 @@ fieldset.Footer>div.output div.state div {
|
||||
fieldset.item {
|
||||
float:left;
|
||||
}
|
||||
fieldset.item:hover {
|
||||
background-color:gold;
|
||||
border:ridge 2px red;
|
||||
}
|
||||
fieldset.item.select {
|
||||
background-color:gold;
|
||||
border:solid 2px red;
|
||||
border:ridge 2px red;
|
||||
}
|
||||
fieldset.item>div.output {
|
||||
overflow:auto;
|
||||
|
||||
@ -377,21 +377,6 @@ function Page(page) {
|
||||
})))
|
||||
},
|
||||
|
||||
initCarte: function(page, field, option, output) {
|
||||
field.onmouseleave = function(event) {field.Pane.Hide()}
|
||||
return {
|
||||
Show: function(event, cb) {if (!cb.list || cb.list.length == 0) {return}
|
||||
kit.AppendChilds(output, kit.List(cb.list, function(item) {
|
||||
return item === ""? {view: "space"}: {text: [item, "div", "item"], click: function(event) {
|
||||
kit._call(cb, [item, cb.meta, event]) && field.Pane.Hide()
|
||||
}}
|
||||
}))
|
||||
kit.ModifyView(field, {display: "block", left: event.x, top: event.y})
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
},
|
||||
}
|
||||
},
|
||||
initToast: function(page, field, option, output) {
|
||||
return {
|
||||
Dialog: function(width, height) {
|
||||
@ -435,6 +420,19 @@ function Page(page) {
|
||||
},
|
||||
}
|
||||
},
|
||||
initCarte: function(page, field, option, output) {
|
||||
field.onmouseleave = function(event) {field.Pane.Hide()}
|
||||
return {
|
||||
Show: function(event, cb) {if (!cb.list || cb.list.length == 0) {return}
|
||||
kit.AppendActions(output, cb.list, function(value, event) {
|
||||
kit._call(cb, [value, cb.meta, event]) && field.Pane.Hide()
|
||||
}, true)
|
||||
kit.ModifyView(field, {display: "block", left: event.x, top: event.y})
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
},
|
||||
}
|
||||
},
|
||||
initLogin: function(page, field, option, output) {
|
||||
var ui = kit.AppendChilds(option, [
|
||||
{label: "username"}, {input: ["username"]}, {type: "br"},
|
||||
@ -476,7 +474,7 @@ function Page(page) {
|
||||
{"view": ["title", "div", state.title], click: function(event) {
|
||||
cb(event, "title", state.title)
|
||||
}},
|
||||
{"view": ["state"], list: list.map(function(item) {return {text: [state[item], "div"], click: function(event) {
|
||||
{"view": ["state"], list: list.map(function(item) {return {text: [state[item], "div", "item"], click: function(event) {
|
||||
cb(event, item, state[item])
|
||||
}}})},
|
||||
])
|
||||
@ -704,10 +702,7 @@ function Pane(page, field) {
|
||||
page.script("record", [name, value])
|
||||
typeof pane.Action == "function"? pane.Action(value, event): pane.Action[value](event, value)
|
||||
}
|
||||
pane.Button && pane.Button.length > 0 && (kit.InsertChild(field, output, "div", pane.Button.map(function(value) {
|
||||
return typeof value == "object"? {className: value[0], select: [value.slice(1), call]}:
|
||||
value == ""? {view: ["space"]} :value == "br"? {type: "br"}: {button: [value, call]}
|
||||
})).className="action")
|
||||
kit.AppendAction(action, pane.Button, call)
|
||||
|
||||
kit.Item(pane.Listen, function(key, cb) {page.Sync(key).change(cb)})
|
||||
option.onsubmit = function(event) {event.preventDefault()};
|
||||
@ -744,35 +739,29 @@ function Plugin(page, pane, field, inits, runs) {
|
||||
}}]).last.focus()
|
||||
},
|
||||
Append: shy("添加控件", function(item, name, value) {
|
||||
var input = {type: "input", name: name || item.name || "input", data: item}
|
||||
var count = kit.Selector(option, ".args").length
|
||||
args && count < args.length && (value = value || args[count] || "")
|
||||
|
||||
var input = {plug: meta.name, type: "input", name: name || item.name || item.value || "input", data: item}
|
||||
switch (item.type) {
|
||||
case "button":
|
||||
input.name = name || item.name || item.value
|
||||
break
|
||||
case "upfile":
|
||||
item.type = "file"
|
||||
break
|
||||
case "upfile": item.type = "file"; break
|
||||
case "select":
|
||||
kit.classList.add(item, "args")
|
||||
input.type = "select", input.list = item.values.map(function(value) {
|
||||
return {type: "option", value: value, inner: value}
|
||||
})
|
||||
input.value = item.value || item.values[0]
|
||||
item.value = value || item.value || item.values[0]
|
||||
kit.classList.add(item, "args")
|
||||
break
|
||||
case "textarea":
|
||||
kit.classList.add(item, "args")
|
||||
input.type = "textarea", item.style = "height:100px;"+"width:"+(pane.target.clientWidth-30)+"px"
|
||||
// no break
|
||||
case "text":
|
||||
item.value = value || item.value || ""
|
||||
kit.classList.add(item, "args")
|
||||
item.autocomplete = "off"
|
||||
|
||||
var count = kit.Selector(option, ".args").length
|
||||
args && count < args.length && (item.value = value||args[count++]||item.value||"");
|
||||
break
|
||||
}
|
||||
item.plug = meta.name, item.name = input.name
|
||||
return Inputs(plugin, item, kit.AppendChild(option, [{view: [item.view||""], list: [{type: "label", inner: item.label||""}, input]}])[input.name]).target
|
||||
return Inputs(plugin, input, item, kit.AppendChild(option, [{view: [item.view||""], list: [{type: "label", inner: item.label||""}, input]}])[input.name]).target
|
||||
}),
|
||||
Remove: function() {
|
||||
var list = option.querySelectorAll("input.temp")
|
||||
@ -964,8 +953,8 @@ function Plugin(page, pane, field, inits, runs) {
|
||||
kit.Log("init", "plugin", name, plugin)
|
||||
return plugin
|
||||
}
|
||||
function Inputs(plugin, item, target) {
|
||||
var plug = item.plug, name = item.name, type = item.type
|
||||
function Inputs(plugin, meta, item, target) {
|
||||
var plug = meta.plug, name = meta.name, type = item.type
|
||||
var input = Meta(plug+"."+name, target, item, {
|
||||
onimport: shy("导入数据", {}, [item.imports], function() {
|
||||
kit.List(arguments.callee.list, function(imports) {
|
||||
@ -1073,7 +1062,7 @@ function Inputs(plugin, item, target) {
|
||||
input.onimport()
|
||||
target.value = plugin.onformat(item.init, item.value)
|
||||
plugin.Inputs[item.name] = target, target.Input = input
|
||||
!target.placeholder && item.name && (target.placeholder = item.name)
|
||||
type == "text" && !target.placeholder && item.name && (target.placeholder = item.name)
|
||||
!target.title && item.placeholder && (target.title = item.placeholder)
|
||||
kit.Log("init", "input", plug+"."+name, input)
|
||||
return input
|
||||
|
||||
@ -50,7 +50,7 @@ kit = toolkit = (function() {var kit = {__proto__: document,
|
||||
|
||||
// HTML节点操作
|
||||
classList: {
|
||||
add: function(obj, key) {var list = (obj.className||"").split(" ")
|
||||
add: function(obj, key) {var list = obj.className? obj.className.split(" "): []
|
||||
return obj.className = list.concat(kit.List(arguments, function(value, index) {
|
||||
return index > 0 && list.indexOf(value) == -1? value: undefined
|
||||
})).join(" ")
|
||||
@ -113,7 +113,7 @@ kit = toolkit = (function() {var kit = {__proto__: document,
|
||||
// 基本属性: name value title
|
||||
// 基本内容: inner innerHTML
|
||||
// 基本样式: style className
|
||||
// 基本事件: dataset click
|
||||
// 基本事件: click dataset
|
||||
//
|
||||
// 按键: button select
|
||||
// 输入: input password
|
||||
@ -127,7 +127,8 @@ kit = toolkit = (function() {var kit = {__proto__: document,
|
||||
|
||||
subs = subs || {}
|
||||
children.forEach(function(child, i) {if (kit.isNone(child)) {return}
|
||||
var type = child.type || "div", name = child.name, data = child.data || {}
|
||||
var type = child.type || "div", data = child.data || {}
|
||||
var name = child.name || data.name
|
||||
|
||||
kit.List([
|
||||
"name", "value", "title",
|
||||
@ -154,9 +155,10 @@ kit = toolkit = (function() {var kit = {__proto__: document,
|
||||
data.onchange = function(event) {
|
||||
kit._call(list[1], [event.target.value, event])
|
||||
}
|
||||
child.list = list[0].map(function(value) {
|
||||
child.list = list[0].slice(1).map(function(value) {
|
||||
return {type: "option", value: value, inner: value}
|
||||
})
|
||||
data.className = list[0][0] || ""
|
||||
|
||||
} else if (child.input) {var list = kit.List(child.input)
|
||||
type = "input", name = name || list[0]
|
||||
@ -241,7 +243,6 @@ kit = toolkit = (function() {var kit = {__proto__: document,
|
||||
}).join("")
|
||||
}
|
||||
|
||||
data.name = data.name || name || ""
|
||||
var node = kit.CreateNode(type, data)
|
||||
child.list && kit.AppendChild(node, child.list, subs)
|
||||
subs.first || (subs.first = node), subs.last = node
|
||||
@ -259,11 +260,25 @@ kit = toolkit = (function() {var kit = {__proto__: document,
|
||||
return parent.insertBefore(elm, position || parent.firstElementChild)
|
||||
},
|
||||
// HTML控件操作
|
||||
AppendAction: function(parent, list, cb) {
|
||||
AppendActions: function(parent, list, cb, diy) {
|
||||
parent.innerHTML = "", kit.AppendAction(parent, list, cb, diy)
|
||||
},
|
||||
AppendAction: function(parent, list, cb, diy) {
|
||||
if (diy) {
|
||||
return kit.AppendChild(parent, kit.List(list, function(item, index) {
|
||||
return item === ""? {view: ["space"]}:
|
||||
typeof item == "string"? {button: [item, cb]}:
|
||||
item.forEach? {select: [item, cb]}: item
|
||||
typeof item == "string"? {view: ["item", "div", item], click: function(event) {
|
||||
kit._call(cb, [item, event])
|
||||
}}: item.forEach? {view: item[0], list: kit.List(item.slice(1), function(value) {return {text: [value, "div", "item"], click: function(event) {
|
||||
kit._call(cb, [value, event])
|
||||
}}})}: item
|
||||
}))
|
||||
}
|
||||
return kit.AppendChild(parent, kit.List(list, function(item, index) {
|
||||
return item === ""? {view: ["space"]}:
|
||||
typeof item == "string"? {button: [item, function(event) {
|
||||
kit._call(cb, [item, event])
|
||||
}]}: item.forEach? {select: [item, cb]}: item
|
||||
}))
|
||||
},
|
||||
AppendTable: function(table, data, fields, cb, cbs) {if (!data || !fields) {return}
|
||||
|
||||
@ -5,31 +5,26 @@
|
||||
{{range $index, $meta := option . "metas"}}
|
||||
<meta name="{{index $meta "name"}}" content="{{index $meta "content"}}">
|
||||
{{end}}
|
||||
|
||||
<title>{{options . "title"}}</title>
|
||||
|
||||
<link rel="shortcut icon" type="image/ico" href="/static/librarys/{{options . "favicon"}}">
|
||||
{{range $index, $lib := option . "styles"}}
|
||||
<link rel="stylesheet" type="text/css" href="/static/librarys/{{$lib}}"></link>
|
||||
{{end}}
|
||||
</head>
|
||||
<body>
|
||||
<fieldset class="carte" data-init="initCarte"><legend></legend>
|
||||
<form class="option" data-names="carte"></form>
|
||||
<div class="output"></div>
|
||||
</fieldset>
|
||||
<fieldset class="toast" data-init="initToast"><legend></legend>
|
||||
<form class="option" data-names="toast"></form>
|
||||
<div class="output"></div>
|
||||
</fieldset>
|
||||
{{end}}
|
||||
|
||||
{{define "fieldset"}}
|
||||
<fieldset class="{{options . "view"}}" data-init="{{options . "init"}}">
|
||||
<form class="option" data-names="{{options . "name"}}" data-group="{{options . "group"}}">
|
||||
<input style="display:none"></input>
|
||||
</form>
|
||||
<div class="action"></div>
|
||||
<div class="output"></div>
|
||||
</fieldset>
|
||||
{{end}}
|
||||
|
||||
{{define "tail"}}
|
||||
{{range $index, $lib := option . "scripts"}}
|
||||
<script src="/static/librarys/{{$lib}}"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user