bugfix
This commit is contained in:
yumoqing
parent
ca905937cf
commit
3a97400c94
@ -4,9 +4,12 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.19.0/css/xterm.css" />
|
||||||
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/xterm@4.19.0/lib/xterm.js"></script>
|
||||||
<script src="/3parties/recorder.wav.min.js"></script>
|
<script src="/3parties/recorder.wav.min.js"></script>
|
||||||
<script src="/bricks/bricks.js"></script>
|
<script src="/bricks/bricks.js"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -16,6 +16,7 @@ bricks.Layout = class extends bricks.JsWidget {
|
|||||||
var pos_w = this.children[index];
|
var pos_w = this.children[index];
|
||||||
this.dom_element.insertBefore(w.dom_element, pos_w.dom_element);
|
this.dom_element.insertBefore(w.dom_element, pos_w.dom_element);
|
||||||
this.children.insert(index+1, w);
|
this.children.insert(index+1, w);
|
||||||
|
w.dispatch('on_parent', this);
|
||||||
}
|
}
|
||||||
remove_widgets_at_begin(cnt){
|
remove_widgets_at_begin(cnt){
|
||||||
return this._remove_widgets(cnt, false);
|
return this._remove_widgets(cnt, false);
|
||||||
|
|||||||
@ -1,52 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"Accordion",
|
|
||||||
"options":{
|
|
||||||
"item_size":'28px',
|
|
||||||
"items":[
|
|
||||||
{
|
|
||||||
"name":"test1",
|
|
||||||
"icon":"/imgs/t.png",
|
|
||||||
"text":"accordion 1 test",
|
|
||||||
"content":{
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"text":"text content 1",
|
|
||||||
"i81n":true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name":"test2",
|
|
||||||
"icon":"/imgs/t.png",
|
|
||||||
"text":"accordion 2 test",
|
|
||||||
"content":{
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"text":"text content 2",
|
|
||||||
"i81n":true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
33
examples/accordion.ui
Normal file
33
examples/accordion.ui
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"Accordion",
|
||||||
|
"options":{
|
||||||
|
"item_size":'28px',
|
||||||
|
"items":[
|
||||||
|
{
|
||||||
|
"name":"test1",
|
||||||
|
"icon":"/imgs/t.png",
|
||||||
|
"text":"accordion 1 test",
|
||||||
|
"content":{
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"text":"text content 1",
|
||||||
|
"i81n":true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name":"test2",
|
||||||
|
"icon":"/imgs/t.png",
|
||||||
|
"text":"accordion 2 test",
|
||||||
|
"content":{
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"text":"text content 2",
|
||||||
|
"i81n":true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,28 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="http://kimird.com/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
/*
|
|
||||||
https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8
|
|
||||||
https://cbcnewshd-f.akamaihd.net/i/cbcnews_1@8981/index_2500_av-p.m3u8
|
|
||||||
*/
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"id":"audioplayer",
|
|
||||||
"widgettype":"AudioPlayer",
|
|
||||||
"options":{
|
|
||||||
"autoplay":true,
|
|
||||||
"url":"http://kimird.com/songs/sample-mp3-file.mp3"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
9
examples/audio.ui
Normal file
9
examples/audio.ui
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"id":"audioplayer",
|
||||||
|
"widgettype":"AudioPlayer",
|
||||||
|
"options":{
|
||||||
|
"autoplay":true,
|
||||||
|
"url":"http://kimird.com/songs/sample-mp3-file.mp3"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,57 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"HBox",
|
|
||||||
"options":{
|
|
||||||
"height":"auto",
|
|
||||||
"width":"100%"
|
|
||||||
},
|
|
||||||
"subwidgets":[
|
|
||||||
{
|
|
||||||
"widgettype":"Button",
|
|
||||||
"options":{
|
|
||||||
"name":"test",
|
|
||||||
"icon":"/bricks/imgs/submit.png",
|
|
||||||
"label":"test once",
|
|
||||||
"tooltip":"This is a joke too",
|
|
||||||
"nonepack":true,
|
|
||||||
"orientation":"horizontal"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Button",
|
|
||||||
"options":{
|
|
||||||
"name":"test",
|
|
||||||
"icon":"/bricks/imgs/reset.png",
|
|
||||||
"tooltip":"This is a joke",
|
|
||||||
"label":"test twice",
|
|
||||||
"nonepack":true,
|
|
||||||
"orientation":"horizontal"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"binds":[
|
|
||||||
{
|
|
||||||
"wid":"self",
|
|
||||||
"event":"click",
|
|
||||||
"actiontype":"script",
|
|
||||||
"script":"alert('HBox clicked');"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
40
examples/button.ui
Normal file
40
examples/button.ui
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"HBox",
|
||||||
|
"options":{
|
||||||
|
"height":"auto",
|
||||||
|
"width":"100%"
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"name":"test",
|
||||||
|
"icon":"/bricks/imgs/submit.png",
|
||||||
|
"label":"test once",
|
||||||
|
"tooltip":"This is a joke too",
|
||||||
|
"nonepack":true,
|
||||||
|
"orientation":"horizontal"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"name":"test",
|
||||||
|
"icon":"/bricks/imgs/reset.png",
|
||||||
|
"tooltip":"This is a joke",
|
||||||
|
"label":"test twice",
|
||||||
|
"nonepack":true,
|
||||||
|
"orientation":"horizontal"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"self",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"script",
|
||||||
|
"script":"alert('HBox clicked');"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"urlwidget",
|
|
||||||
"options":{
|
|
||||||
"url":"users.bcrud"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
7
examples/datagrid.ui
Normal file
7
examples/datagrid.ui
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"urlwidget",
|
||||||
|
"options":{
|
||||||
|
"url":"users.bcrud"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"urlwidget",
|
|
||||||
"options":{
|
|
||||||
"url":"iptvchannels.bcrud"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/marked.js"></script>
|
|
||||||
<script src="http://kimird.com/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"MarkdownViewer",
|
|
||||||
"options":{
|
|
||||||
"navigator":true,
|
|
||||||
"md_url":"../docs/index.md"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
8
examples/docs.ui
Normal file
8
examples/docs.ui
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"MarkdownViewer",
|
||||||
|
"options":{
|
||||||
|
"navigator":true,
|
||||||
|
"md_url":"../docs/index.md"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,24 +0,0 @@
|
|||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"urlwidget",
|
|
||||||
"options":{
|
|
||||||
"url":"editabletree.json"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
7
examples/editabletree.ui
Normal file
7
examples/editabletree.ui
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"urlwidget",
|
||||||
|
"options":{
|
||||||
|
"url":"editabletree.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,105 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"Tree",
|
|
||||||
"options":{
|
|
||||||
"idField":"id",
|
|
||||||
"textField":"text",
|
|
||||||
"data":[
|
|
||||||
{
|
|
||||||
"id":1,
|
|
||||||
"text":"node1",
|
|
||||||
"is_leaf":false,
|
|
||||||
"children":[
|
|
||||||
{
|
|
||||||
"id":11,
|
|
||||||
"text":"node11",
|
|
||||||
"is_leaf":false,
|
|
||||||
"children":[
|
|
||||||
{
|
|
||||||
"id":112,
|
|
||||||
"text":"node.12",
|
|
||||||
"is_leaf":false,
|
|
||||||
"children":[
|
|
||||||
{
|
|
||||||
"id":1112,
|
|
||||||
"text":"node1112",
|
|
||||||
"is_leaf":true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":1113,
|
|
||||||
"text":"node113",
|
|
||||||
"is_leaf":true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":113,
|
|
||||||
"text":"node113",
|
|
||||||
"is_leaf":true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":12,
|
|
||||||
"text":"node12",
|
|
||||||
"is_leaf":true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":13,
|
|
||||||
"text":"node13",
|
|
||||||
"is_leaf":true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":2,
|
|
||||||
"text":"node2",
|
|
||||||
"is_leaf":false,
|
|
||||||
"children":[
|
|
||||||
{
|
|
||||||
"id":21,
|
|
||||||
"text":"node21",
|
|
||||||
"is_leaf":true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":22,
|
|
||||||
"text":"node22",
|
|
||||||
"is_leaf":true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":23,
|
|
||||||
"text":"node23",
|
|
||||||
"is_leaf":true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":3,
|
|
||||||
"text":"node3",
|
|
||||||
"is_leaf":true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
var m = new Error({
|
|
||||||
"title":"TEst Message",
|
|
||||||
"message":"This is a test message",
|
|
||||||
"auto_open":true,
|
|
||||||
"timeout":30
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
83
examples/error.ui
Normal file
83
examples/error.ui
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"Tree",
|
||||||
|
"options":{
|
||||||
|
"idField":"id",
|
||||||
|
"textField":"text",
|
||||||
|
"data":[
|
||||||
|
{
|
||||||
|
"id":1,
|
||||||
|
"text":"node1",
|
||||||
|
"is_leaf":false,
|
||||||
|
"children":[
|
||||||
|
{
|
||||||
|
"id":11,
|
||||||
|
"text":"node11",
|
||||||
|
"is_leaf":false,
|
||||||
|
"children":[
|
||||||
|
{
|
||||||
|
"id":112,
|
||||||
|
"text":"node.12",
|
||||||
|
"is_leaf":false,
|
||||||
|
"children":[
|
||||||
|
{
|
||||||
|
"id":1112,
|
||||||
|
"text":"node1112",
|
||||||
|
"is_leaf":true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":1113,
|
||||||
|
"text":"node113",
|
||||||
|
"is_leaf":true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":113,
|
||||||
|
"text":"node113",
|
||||||
|
"is_leaf":true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":12,
|
||||||
|
"text":"node12",
|
||||||
|
"is_leaf":true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":13,
|
||||||
|
"text":"node13",
|
||||||
|
"is_leaf":true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":2,
|
||||||
|
"text":"node2",
|
||||||
|
"is_leaf":false,
|
||||||
|
"children":[
|
||||||
|
{
|
||||||
|
"id":21,
|
||||||
|
"text":"node21",
|
||||||
|
"is_leaf":true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":22,
|
||||||
|
"text":"node22",
|
||||||
|
"is_leaf":true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":23,
|
||||||
|
"text":"node23",
|
||||||
|
"is_leaf":true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":3,
|
||||||
|
"text":"node3",
|
||||||
|
"is_leaf":true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,64 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div>
|
|
||||||
<button onclick="f()">uoload</button>
|
|
||||||
</div>
|
|
||||||
<script src="../bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"VBox",
|
|
||||||
"options":{
|
|
||||||
},
|
|
||||||
"subwidgets":[
|
|
||||||
{
|
|
||||||
"id":"file1",
|
|
||||||
"widgettype":"UtFile",
|
|
||||||
"options":{
|
|
||||||
"name":"file1",
|
|
||||||
"label":"File 1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"text":"upload"
|
|
||||||
},
|
|
||||||
"binds":[
|
|
||||||
{
|
|
||||||
"wid":"self",
|
|
||||||
"event":"clcik",
|
|
||||||
"action":{
|
|
||||||
"rfname":"do_upload"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
var f = async function(){
|
|
||||||
console.log('it work');
|
|
||||||
var b = new Bricks();
|
|
||||||
var w = b.getWidgetById('file1', bricks_app.root);
|
|
||||||
var file = w.files[0];
|
|
||||||
var fd = new FormData();
|
|
||||||
fd.append('file1', file);
|
|
||||||
var resp = await jcall('http://192.168.1.10/examples/fileupload.dspy',{
|
|
||||||
method:'POST',
|
|
||||||
params:fd
|
|
||||||
})
|
|
||||||
console.log('resp=', resp);
|
|
||||||
}
|
|
||||||
rf = new RegisterFunction();
|
|
||||||
rf.register('do_upload', f);
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
32
examples/fileupload.ui
Normal file
32
examples/fileupload.ui
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"VBox",
|
||||||
|
"options":{
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"id":"file1",
|
||||||
|
"widgettype":"UtFile",
|
||||||
|
"options":{
|
||||||
|
"name":"file1",
|
||||||
|
"label":"File 1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"text":"upload"
|
||||||
|
},
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"self",
|
||||||
|
"event":"clcik",
|
||||||
|
"action":{
|
||||||
|
"rfname":"do_upload"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,4 +0,0 @@
|
|||||||
;
|
|
||||||
const app = BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
@ -1,167 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"VBox",
|
|
||||||
"options":{"height":"100%"},
|
|
||||||
"subwidgets":[
|
|
||||||
{
|
|
||||||
"widgettype":"HBox",
|
|
||||||
"options":{"height":"auto"},
|
|
||||||
"subwidgets":[
|
|
||||||
{
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"otext":"Please change Font size",
|
|
||||||
"i18n":true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Button",
|
|
||||||
"options":{
|
|
||||||
"label":"A",
|
|
||||||
"width":"auto",
|
|
||||||
"item_rate":1.4
|
|
||||||
},
|
|
||||||
"binds":[
|
|
||||||
{
|
|
||||||
"wid":"self",
|
|
||||||
"event":"click",
|
|
||||||
"actiontype":"script",
|
|
||||||
"target":"app",
|
|
||||||
"script":"bricks_app.textsize_bigger()"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Button",
|
|
||||||
"options":{
|
|
||||||
"label":"A",
|
|
||||||
"width":"auto",
|
|
||||||
"item_rate":0.8
|
|
||||||
},
|
|
||||||
"binds":[
|
|
||||||
{
|
|
||||||
"wid":"self",
|
|
||||||
"event":"click",
|
|
||||||
"actiontype":"script",
|
|
||||||
"target":"app",
|
|
||||||
"script":"bricks_app.textsize_smaller()"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Form",
|
|
||||||
"options":{
|
|
||||||
"submit_url":"/ttt/ttt.dspy",
|
|
||||||
"title":"Test hahah Form",
|
|
||||||
"description":"test input implemented",
|
|
||||||
"fields":[
|
|
||||||
{
|
|
||||||
"uitype":"email",
|
|
||||||
"name":"email",
|
|
||||||
"label":"Email",
|
|
||||||
'required':true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uitype":"tel",
|
|
||||||
"name":"tel",
|
|
||||||
"pattern":"{\d}3-{\d}4-{\d}4",
|
|
||||||
"label":"Tel",
|
|
||||||
'required':true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uitype":"file",
|
|
||||||
"name":"file",
|
|
||||||
"label":"File",
|
|
||||||
'required':true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uitype":"str",
|
|
||||||
"minlength":3,
|
|
||||||
"length":30,
|
|
||||||
"value":"tlegre",
|
|
||||||
"name":"name",
|
|
||||||
"label":"Name",
|
|
||||||
'required':true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uitype":"int",
|
|
||||||
"minlength":3,
|
|
||||||
"length":30,
|
|
||||||
"value":12432,
|
|
||||||
"name":"integer",
|
|
||||||
"label":"Integer",
|
|
||||||
'required':true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uitype":"float",
|
|
||||||
"dec_length":3,
|
|
||||||
"length":25,
|
|
||||||
"name":"float",
|
|
||||||
"label":"Float"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uitype":"date",
|
|
||||||
"name":"date",
|
|
||||||
"label":"Date",
|
|
||||||
'required':true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uitype":"password",
|
|
||||||
"minlength":3,
|
|
||||||
"length":30,
|
|
||||||
"name":"password",
|
|
||||||
"label":"Password",
|
|
||||||
'required':true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uitype":"checkbox",
|
|
||||||
"name":"checkbox",
|
|
||||||
"label":"CheckBox",
|
|
||||||
"value":2,
|
|
||||||
"dataurl":"test_code.json",
|
|
||||||
'required':true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uitype":"audio",
|
|
||||||
"name":"audio",
|
|
||||||
"label":"Audio",
|
|
||||||
'required':true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uitype":"code",
|
|
||||||
"name":"code",
|
|
||||||
"label":"Code",
|
|
||||||
"value":2,
|
|
||||||
"dataurl":"test_code.json",
|
|
||||||
'required':true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"uitype":"text",
|
|
||||||
"name":"text",
|
|
||||||
"value":"This is a test",
|
|
||||||
"label":"Text",
|
|
||||||
'required':true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
151
examples/form.ui
Normal file
151
examples/form.ui
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"VBox",
|
||||||
|
"options":{"height":"100%"},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"HBox",
|
||||||
|
"options":{"height":"auto"},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"otext":"Please change Font size",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"label":"A",
|
||||||
|
"width":"auto",
|
||||||
|
"item_rate":1.4
|
||||||
|
},
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"self",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"script",
|
||||||
|
"target":"app",
|
||||||
|
"script":"bricks_app.textsize_bigger()"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"label":"A",
|
||||||
|
"width":"auto",
|
||||||
|
"item_rate":0.8
|
||||||
|
},
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"self",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"script",
|
||||||
|
"target":"app",
|
||||||
|
"script":"bricks_app.textsize_smaller()"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Form",
|
||||||
|
"options":{
|
||||||
|
"submit_url":"/ttt/ttt.dspy",
|
||||||
|
"title":"Test hahah Form",
|
||||||
|
"description":"test input implemented",
|
||||||
|
"fields":[
|
||||||
|
{
|
||||||
|
"uitype":"email",
|
||||||
|
"name":"email",
|
||||||
|
"label":"Email",
|
||||||
|
'required':true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"uitype":"tel",
|
||||||
|
"name":"tel",
|
||||||
|
"pattern":"{\d}3-{\d}4-{\d}4",
|
||||||
|
"label":"Tel",
|
||||||
|
'required':true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"uitype":"file",
|
||||||
|
"name":"file",
|
||||||
|
"label":"File",
|
||||||
|
'required':true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"uitype":"str",
|
||||||
|
"minlength":3,
|
||||||
|
"length":30,
|
||||||
|
"value":"tlegre",
|
||||||
|
"name":"name",
|
||||||
|
"label":"Name",
|
||||||
|
'required':true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"uitype":"int",
|
||||||
|
"minlength":3,
|
||||||
|
"length":30,
|
||||||
|
"value":12432,
|
||||||
|
"name":"integer",
|
||||||
|
"label":"Integer",
|
||||||
|
'required':true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"uitype":"float",
|
||||||
|
"dec_length":3,
|
||||||
|
"length":25,
|
||||||
|
"name":"float",
|
||||||
|
"label":"Float"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"uitype":"date",
|
||||||
|
"name":"date",
|
||||||
|
"label":"Date",
|
||||||
|
'required':true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"uitype":"password",
|
||||||
|
"minlength":3,
|
||||||
|
"length":30,
|
||||||
|
"name":"password",
|
||||||
|
"label":"Password",
|
||||||
|
'required':true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"uitype":"checkbox",
|
||||||
|
"name":"checkbox",
|
||||||
|
"label":"CheckBox",
|
||||||
|
"value":2,
|
||||||
|
"dataurl":"test_code.json",
|
||||||
|
'required':true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"uitype":"audio",
|
||||||
|
"name":"audio",
|
||||||
|
"label":"Audio",
|
||||||
|
'required':true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"uitype":"code",
|
||||||
|
"name":"code",
|
||||||
|
"label":"Code",
|
||||||
|
"value":2,
|
||||||
|
"dataurl":"test_code.json",
|
||||||
|
'required':true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"uitype":"text",
|
||||||
|
"name":"text",
|
||||||
|
"value":"This is a test",
|
||||||
|
"label":"Text",
|
||||||
|
'required':true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,65 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="http://kimird.com/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"HBox",
|
|
||||||
"options":{
|
|
||||||
},
|
|
||||||
"subwidgets":[
|
|
||||||
{
|
|
||||||
"widgettype":"Title1",
|
|
||||||
"options":{
|
|
||||||
"text":"Pic Viewer",
|
|
||||||
"i18n":true
|
|
||||||
},
|
|
||||||
"binds":[
|
|
||||||
{
|
|
||||||
"wid":"self",
|
|
||||||
"target":"self",
|
|
||||||
"event":"click",
|
|
||||||
"actiontype":"script",
|
|
||||||
"script":"alert('hahahahahah');"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"urlwidget",
|
|
||||||
"options":{
|
|
||||||
"url":"/bricks/image.tmpl",
|
|
||||||
"i18n":true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"mymodal",
|
|
||||||
"widgettype":"Modal",
|
|
||||||
"options":{
|
|
||||||
"auto_close":true,
|
|
||||||
"auto_open":false,
|
|
||||||
"width":"700px",
|
|
||||||
"height":"400px",
|
|
||||||
"archor":"cl",
|
|
||||||
},
|
|
||||||
"subwidgets":[
|
|
||||||
{
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"text":"This is a test"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
50
examples/hbox.ui
Normal file
50
examples/hbox.ui
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"HBox",
|
||||||
|
"options":{
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"Title1",
|
||||||
|
"options":{
|
||||||
|
"text":"Pic Viewer",
|
||||||
|
"i18n":true
|
||||||
|
},
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"self",
|
||||||
|
"target":"self",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"script",
|
||||||
|
"script":"alert('hahahahahah');"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"urlwidget",
|
||||||
|
"options":{
|
||||||
|
"url":"/bricks/image.tmpl",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"mymodal",
|
||||||
|
"widgettype":"Modal",
|
||||||
|
"options":{
|
||||||
|
"auto_close":true,
|
||||||
|
"auto_open":false,
|
||||||
|
"width":"700px",
|
||||||
|
"height":"400px",
|
||||||
|
"archor":"cl",
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"text":"This is a test"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,8 +0,0 @@
|
|||||||
<script type="text/javascript" src="https://unpkg.com/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
|
|
||||||
<script
|
|
||||||
type="text/javascript"
|
|
||||||
src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js" ></script>
|
|
||||||
<script defer src="http://kimird.com/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="http://kimird.com/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="http://kimird.com/bricks/bricks.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"Image",
|
|
||||||
"options":{
|
|
||||||
"url":"https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg",
|
|
||||||
"height":"100%",
|
|
||||||
"width":"100%"
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
9
examples/image.ui
Normal file
9
examples/image.ui
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"Image",
|
||||||
|
"options":{
|
||||||
|
"url":"https://cdn.pixabay.com/photo/2018/04/26/16/31/marine-3352341_960_720.jpg",
|
||||||
|
"height":"100%",
|
||||||
|
"width":"100%"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,29 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="http://kimird.com/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
/*
|
|
||||||
https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8
|
|
||||||
https://cbcnewshd-f.akamaihd.net/i/cbcnews_1@8981/index_2500_av-p.m3u8
|
|
||||||
*/
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"id":"videoplayer",
|
|
||||||
"widgettype":"VideoPlayer",
|
|
||||||
"options":{
|
|
||||||
"autoplay":true,
|
|
||||||
"url":"https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8",
|
|
||||||
"type":"hls"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
10
examples/m3u8.ui
Normal file
10
examples/m3u8.ui
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"id":"videoplayer",
|
||||||
|
"widgettype":"VideoPlayer",
|
||||||
|
"options":{
|
||||||
|
"autoplay":true,
|
||||||
|
"url":"https://abc-iview-mediapackagestreams-2.akamaized.net/out/v1/6e1cc6d25ec0480ea099a5399d73bc4b/index.m3u8",
|
||||||
|
"type":"hls"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,38 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div>
|
|
||||||
<script src="/marked.min.js"></script>
|
|
||||||
<script src="http://kimird.com/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"VBox",
|
|
||||||
"options":{
|
|
||||||
},
|
|
||||||
"subwidgets":[
|
|
||||||
{
|
|
||||||
"widgettype":"Title1",
|
|
||||||
"options":{
|
|
||||||
"text":"Pic Viewer",
|
|
||||||
"i18n":true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"MarkdownViewer",
|
|
||||||
"options":{
|
|
||||||
"md_url":"test1.md"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
21
examples/markdown.ui
Normal file
21
examples/markdown.ui
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"VBox",
|
||||||
|
"options":{
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"Title1",
|
||||||
|
"options":{
|
||||||
|
"text":"Pic Viewer",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"MarkdownViewer",
|
||||||
|
"options":{
|
||||||
|
"md_url":"test1.md"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,107 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"Tree",
|
|
||||||
"options":{
|
|
||||||
"idField":"id",
|
|
||||||
"textField":"text",
|
|
||||||
"data":[
|
|
||||||
{
|
|
||||||
"id":1,
|
|
||||||
"text":"node1",
|
|
||||||
"is_leaf":false,
|
|
||||||
"children":[
|
|
||||||
{
|
|
||||||
"id":11,
|
|
||||||
"text":"node11",
|
|
||||||
"is_leaf":false,
|
|
||||||
"children":[
|
|
||||||
{
|
|
||||||
"id":112,
|
|
||||||
"text":"node.12",
|
|
||||||
"is_leaf":false,
|
|
||||||
"children":[
|
|
||||||
{
|
|
||||||
"id":1112,
|
|
||||||
"text":"node1112",
|
|
||||||
"is_leaf":true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":1113,
|
|
||||||
"text":"node113",
|
|
||||||
"is_leaf":true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":113,
|
|
||||||
"text":"node113",
|
|
||||||
"is_leaf":true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":12,
|
|
||||||
"text":"node12",
|
|
||||||
"is_leaf":true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":13,
|
|
||||||
"text":"node13",
|
|
||||||
"is_leaf":true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":2,
|
|
||||||
"text":"node2",
|
|
||||||
"is_leaf":false,
|
|
||||||
"children":[
|
|
||||||
{
|
|
||||||
"id":21,
|
|
||||||
"text":"node21",
|
|
||||||
"is_leaf":true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":22,
|
|
||||||
"text":"node22",
|
|
||||||
"is_leaf":true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":23,
|
|
||||||
"text":"node23",
|
|
||||||
"is_leaf":true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":3,
|
|
||||||
"text":"node3",
|
|
||||||
"is_leaf":true
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
var m = new Message({
|
|
||||||
"title":"TEst Message",
|
|
||||||
"message":"This is a test message",
|
|
||||||
"auto_open":true,
|
|
||||||
"timeout":3
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
83
examples/message.ui
Normal file
83
examples/message.ui
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"Tree",
|
||||||
|
"options":{
|
||||||
|
"idField":"id",
|
||||||
|
"textField":"text",
|
||||||
|
"data":[
|
||||||
|
{
|
||||||
|
"id":1,
|
||||||
|
"text":"node1",
|
||||||
|
"is_leaf":false,
|
||||||
|
"children":[
|
||||||
|
{
|
||||||
|
"id":11,
|
||||||
|
"text":"node11",
|
||||||
|
"is_leaf":false,
|
||||||
|
"children":[
|
||||||
|
{
|
||||||
|
"id":112,
|
||||||
|
"text":"node.12",
|
||||||
|
"is_leaf":false,
|
||||||
|
"children":[
|
||||||
|
{
|
||||||
|
"id":1112,
|
||||||
|
"text":"node1112",
|
||||||
|
"is_leaf":true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":1113,
|
||||||
|
"text":"node113",
|
||||||
|
"is_leaf":true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":113,
|
||||||
|
"text":"node113",
|
||||||
|
"is_leaf":true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":12,
|
||||||
|
"text":"node12",
|
||||||
|
"is_leaf":true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":13,
|
||||||
|
"text":"node13",
|
||||||
|
"is_leaf":true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":2,
|
||||||
|
"text":"node2",
|
||||||
|
"is_leaf":false,
|
||||||
|
"children":[
|
||||||
|
{
|
||||||
|
"id":21,
|
||||||
|
"text":"node21",
|
||||||
|
"is_leaf":true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":22,
|
||||||
|
"text":"node22",
|
||||||
|
"is_leaf":true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":23,
|
||||||
|
"text":"node23",
|
||||||
|
"is_leaf":true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":3,
|
||||||
|
"text":"node3",
|
||||||
|
"is_leaf":true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,24 +0,0 @@
|
|||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"urlwidget",
|
|
||||||
"options":{
|
|
||||||
"url":"miniform.json"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
7
examples/miniform.ui
Normal file
7
examples/miniform.ui
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"urlwidget",
|
||||||
|
"options":{
|
||||||
|
"url":"miniform.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"urlwidget",
|
|
||||||
"options":{
|
|
||||||
"url":"modal.json"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
7
examples/model.ui
Normal file
7
examples/model.ui
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"urlwidget",
|
||||||
|
"options":{
|
||||||
|
"url":"modal.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,26 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"id":"recorder",
|
|
||||||
"widgettype":"AudioRecorder",
|
|
||||||
"options":{
|
|
||||||
"height":"40px",
|
|
||||||
"start_icon":"/bricks/imgs/start_recording.png"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
console.log('here ..........');
|
|
||||||
app.run();
|
|
||||||
console.log('here 1..........');
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
17
examples/recorder.ui
Normal file
17
examples/recorder.ui
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"id":"recorder",
|
||||||
|
"widgettype":"AudioRecorder",
|
||||||
|
"options":{
|
||||||
|
"height":"40px",
|
||||||
|
"upload_url":"{{entire_url('stt.dspy')}}",
|
||||||
|
"start_icon":"/bricks/imgs/start_recording.png"
|
||||||
|
},
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"self",
|
||||||
|
"event":"uploaded",
|
||||||
|
"actiontype":"script",
|
||||||
|
"script":"alert('kwargs', kwargs, args)"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,24 +0,0 @@
|
|||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"urlwidget",
|
|
||||||
"options":{
|
|
||||||
"url":"scroll.json"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
7
examples/scroll.ui
Normal file
7
examples/scroll.ui
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"urlwidget",
|
||||||
|
"options":{
|
||||||
|
"url":"scroll.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,69 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
|
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="mynetwork"></div>
|
|
||||||
<script type="text/javascript">
|
|
||||||
// create an array with nodes
|
|
||||||
var nodes = new vis.DataSet([
|
|
||||||
{ id: 1, label: 'Node 1' },
|
|
||||||
{ id: 2, label: 'Node 2' },
|
|
||||||
{ id: 3, label: 'Node 3' }
|
|
||||||
]);
|
|
||||||
|
|
||||||
// create an array with edges
|
|
||||||
var edges = new vis.DataSet([
|
|
||||||
{ from: 1, to: 2 },
|
|
||||||
{ from: 2, to: 3 }
|
|
||||||
]);
|
|
||||||
|
|
||||||
var container = document.getElementById('mynetwork');
|
|
||||||
var data = {
|
|
||||||
nodes: nodes,
|
|
||||||
edges: edges
|
|
||||||
};
|
|
||||||
var options = {
|
|
||||||
interaction: {
|
|
||||||
navigationButtons: true,
|
|
||||||
keyboard: true,
|
|
||||||
hover: true,
|
|
||||||
multiselect: true,
|
|
||||||
hideEdgesOnDrag: false,
|
|
||||||
hideNodesOnDrag: false,
|
|
||||||
dragView: true,
|
|
||||||
zoomView: true
|
|
||||||
},
|
|
||||||
manipulation: {
|
|
||||||
enabled: true,
|
|
||||||
initiallyActive: true,
|
|
||||||
addNode: function(nodeData, callback) {
|
|
||||||
nodeData.id = (Math.random() * 1000000).toFixed(0);
|
|
||||||
nodeData.label = 'Node ' + nodeData.id;
|
|
||||||
nodes.add(nodeData);
|
|
||||||
callback(nodeData);
|
|
||||||
},
|
|
||||||
editNode: function(nodeData, callback) {
|
|
||||||
nodeData.label = 'Node ' + nodeData.id;
|
|
||||||
nodes.update(nodeData);
|
|
||||||
callback(nodeData);
|
|
||||||
},
|
|
||||||
deleteNode: function(nodeData, callback) {
|
|
||||||
nodes.remove(nodeData.id);
|
|
||||||
callback(nodeData);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
var network = new vis.Network(container, data, options);
|
|
||||||
|
|
||||||
network.on('oncontext', function(properties) {
|
|
||||||
var nodeId = properties.nodes[0];
|
|
||||||
var node = nodes.get(nodeId);
|
|
||||||
|
|
||||||
// display context menu
|
|
||||||
// ...
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,75 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"TabPanel",
|
|
||||||
"options":{
|
|
||||||
"tab_wide":"auto",
|
|
||||||
"height":"100%",
|
|
||||||
"tab_long":"70%",
|
|
||||||
"tab_pos":"top",
|
|
||||||
"items":[
|
|
||||||
{
|
|
||||||
"name":"c",
|
|
||||||
"label":"C",
|
|
||||||
"content":{
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"text":"This is a C language documents"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"icon":null
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name":"javascript",
|
|
||||||
"removable":true,
|
|
||||||
"label":"JavaScript",
|
|
||||||
"content":{
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"text":"This is JavaScript language documents"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"icon":null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name":"php",
|
|
||||||
"label":"PHP",
|
|
||||||
"content":{
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"text":"This is PHP language documents"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"icon":null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name":"python",
|
|
||||||
"label":"Python",
|
|
||||||
"content":{
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"text":"This is Python language documents"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"icon":null
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
58
examples/tab.ui
Normal file
58
examples/tab.ui
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"TabPanel",
|
||||||
|
"options":{
|
||||||
|
"tab_wide":"auto",
|
||||||
|
"height":"100%",
|
||||||
|
"tab_long":"70%",
|
||||||
|
"tab_pos":"top",
|
||||||
|
"items":[
|
||||||
|
{
|
||||||
|
"name":"c",
|
||||||
|
"label":"C",
|
||||||
|
"content":{
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"text":"This is a C language documents"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"icon":null
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name":"javascript",
|
||||||
|
"removable":true,
|
||||||
|
"label":"JavaScript",
|
||||||
|
"content":{
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"text":"This is JavaScript language documents"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"icon":null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name":"php",
|
||||||
|
"label":"PHP",
|
||||||
|
"content":{
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"text":"This is PHP language documents"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"icon":null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name":"python",
|
||||||
|
"label":"Python",
|
||||||
|
"content":{
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"text":"This is Python language documents"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"icon":null
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
7
examples/table.ui
Normal file
7
examples/table.ui
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"urlwidget",
|
||||||
|
"options":{
|
||||||
|
"url":"tables.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,25 +0,0 @@
|
|||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"urlwidget",
|
|
||||||
"options":{
|
|
||||||
"url":"tables.json"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@4.19.0/css/xterm.css" />
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/xterm@4.19.0/lib/xterm.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="terminal"></div>
|
|
||||||
<script>
|
|
||||||
var term = new Terminal();
|
|
||||||
term.open(document.getElementById('terminal'));
|
|
||||||
var ws = new WebSocket("ws://localhost/test/dev.xterm");
|
|
||||||
console.log('term=', term);
|
|
||||||
var curr_line = "";
|
|
||||||
var entries = [];
|
|
||||||
|
|
||||||
term.prompt = () => {
|
|
||||||
if (curr_line) {
|
|
||||||
let data = { method: "command", command: curr_line };
|
|
||||||
ws.send(JSON.stringify(data));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
term.prompt();
|
|
||||||
|
|
||||||
// Receive data from socket
|
|
||||||
ws.onmessage = msg => {
|
|
||||||
term.write(JSON.parse(msg.data).data);
|
|
||||||
};
|
|
||||||
|
|
||||||
term.onData(function(key) {
|
|
||||||
//Enter
|
|
||||||
let msg = {
|
|
||||||
data:{data:key},
|
|
||||||
type:1
|
|
||||||
}
|
|
||||||
ws.send(key);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,144 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<style>
|
|
||||||
.grid-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-cell,
|
|
||||||
.data-cell {
|
|
||||||
padding: 8px;
|
|
||||||
text-align: left;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 600px) {
|
|
||||||
.grid-container {
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div>Test Grid table </div>
|
|
||||||
<div id="grid-container">
|
|
||||||
</div>
|
|
||||||
<script>
|
|
||||||
class GridData {
|
|
||||||
constructor(data, container) {
|
|
||||||
this.data = data;
|
|
||||||
this.container = container;
|
|
||||||
this.columns = Object.keys(data[0]).length;
|
|
||||||
this.rows = data.length;
|
|
||||||
this.minColumnWidth = 100; // minimum column width in pixels
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
// Create a grid container element
|
|
||||||
const gridContainer = document.createElement('div');
|
|
||||||
gridContainer.classList.add('grid-container');
|
|
||||||
|
|
||||||
// Create the header cells
|
|
||||||
for (let i = 0; i < this.columns; i++) {
|
|
||||||
const headerCell = document.createElement('div');
|
|
||||||
headerCell.classList.add('header-cell');
|
|
||||||
headerCell.textContent = Object.keys(this.data[0])[i];
|
|
||||||
headerCell.setAttribute('data-col', i);
|
|
||||||
headerCell.style.gridArea = `1 / ${i + 1} / 2 / ${i + 2}`;
|
|
||||||
headerCell.addEventListener('mousedown', this.startResize.bind(this));
|
|
||||||
gridContainer.appendChild(headerCell);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create the data cells
|
|
||||||
for (let i = 0; i < this.rows; i++) {
|
|
||||||
for (let j = 0; j < this.columns; j++) {
|
|
||||||
const dataCell = document.createElement('div');
|
|
||||||
dataCell.classList.add('data-cell');
|
|
||||||
dataCell.setAttribute('data-col', j);
|
|
||||||
dataCell.textContent = Object.values(this.data[i])[j];
|
|
||||||
dataCell.style.gridArea = `${i + 2} / ${j + 1} / ${i + 3} / ${j + 2}`;
|
|
||||||
gridContainer.appendChild(dataCell);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add the grid container to the container element
|
|
||||||
this.container.appendChild(gridContainer);
|
|
||||||
}
|
|
||||||
|
|
||||||
startResize(e) {
|
|
||||||
this.resizing = true;
|
|
||||||
this.currentCol = e.target.getAttribute('data-col');
|
|
||||||
this.initialX = e.clientX;
|
|
||||||
this.currentWidth = parseInt(
|
|
||||||
document.defaultView.getComputedStyle(e.target).width,
|
|
||||||
10
|
|
||||||
);
|
|
||||||
document.documentElement.addEventListener('mousemove', this.resize.bind(this));
|
|
||||||
document.documentElement.addEventListener('mouseup', this.stopResize.bind(this));
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
resize(e) {
|
|
||||||
if (this.resizing) {
|
|
||||||
const deltaX = e.clientX - this.initialX;
|
|
||||||
const newWidth = this.currentWidth + deltaX;
|
|
||||||
if (newWidth > this.minColumnWidth) {
|
|
||||||
document
|
|
||||||
.querySelectorAll(`[data-col="${this.currentCol}"]`)
|
|
||||||
.forEach((cell) => (cell.style.width = `${newWidth}px`));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
resize(e) {
|
|
||||||
if (this.resizing) {
|
|
||||||
const deltaX = e.clientX - this.initialX;
|
|
||||||
const newWidth = this.currentWidth + deltaX;
|
|
||||||
if (newWidth > this.minColumnWidth) {
|
|
||||||
// Set the width of the current column
|
|
||||||
document
|
|
||||||
.querySelectorAll(`[data-col="${this.currentCol}"]`)
|
|
||||||
.forEach((cell) => (cell.style.width = `${newWidth}px`));
|
|
||||||
|
|
||||||
// Calculate the total width of all the columns
|
|
||||||
let totalWidth = 0;
|
|
||||||
document
|
|
||||||
.querySelectorAll('.header-cell')
|
|
||||||
.forEach((cell) => (totalWidth += parseInt(cell.style.width)));
|
|
||||||
|
|
||||||
// Calculate the width of each column based on the total width
|
|
||||||
const columnWidths = Array.from(
|
|
||||||
document.querySelectorAll('.header-cell')
|
|
||||||
).map((cell) => `minmax(${this.minColumnWidth}px, ${cell.style.width})`);
|
|
||||||
const gridTemplateColumns = columnWidths.join(' ');
|
|
||||||
|
|
||||||
// Set the grid-template-columns property on the grid container
|
|
||||||
document.querySelector('.grid-container').style.gridTemplateColumns =
|
|
||||||
gridTemplateColumns;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
stopResize(e) {
|
|
||||||
this.resizing = false;
|
|
||||||
document.documentElement.removeEventListener('mousemove', this.resize);
|
|
||||||
document.documentElement.removeEventListener('mouseup', this.stopResize);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = [
|
|
||||||
{ name: 'John', age: 25, city: 'New York' },
|
|
||||||
{ name: 'Mary', age: 30, city: 'London' },
|
|
||||||
{ name: 'Bob', age: 35, city: 'Paris' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const container = document.getElementById('grid-container');
|
|
||||||
|
|
||||||
const grid = new GridData(data, container);
|
|
||||||
grid.render();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"text":"This is a test"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
await fetch('http://localhost/
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link href="/bricks/css/bricks.css" rel="stylesheet" type="text/css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script type="text/javascript">
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"VBox",
|
|
||||||
"options":{
|
|
||||||
},
|
|
||||||
"subwidgets":[
|
|
||||||
{
|
|
||||||
"widgettype":"Title1",
|
|
||||||
"options":{
|
|
||||||
"text":"Pic Viewer",
|
|
||||||
"i18n":true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Title2",
|
|
||||||
"options":{
|
|
||||||
"text":"Pic Viewer",
|
|
||||||
"i18n":true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Title3",
|
|
||||||
"options":{
|
|
||||||
"text":"Pic Viewer",
|
|
||||||
"i18n":true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Title4",
|
|
||||||
"options":{
|
|
||||||
"text":"Pic Viewer",
|
|
||||||
"i18n":true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Title5",
|
|
||||||
"options":{
|
|
||||||
"text":"Pic Viewer",
|
|
||||||
"i18n":true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Title6",
|
|
||||||
"options":{
|
|
||||||
"text":"Pic Viewer",
|
|
||||||
"i18n":true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"text":"Pic Viewer",
|
|
||||||
"i18n":true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"HBox",
|
|
||||||
"options":{
|
|
||||||
},
|
|
||||||
"subwidgets":[
|
|
||||||
{
|
|
||||||
"widgettype":"Button",
|
|
||||||
"options":{
|
|
||||||
"label":"A",
|
|
||||||
"item_rate":1.4
|
|
||||||
},
|
|
||||||
"binds":[
|
|
||||||
{
|
|
||||||
"wid":"self",
|
|
||||||
"event":"click",
|
|
||||||
"actiontype":"script",
|
|
||||||
"target":"app",
|
|
||||||
"script":"bricks_app.textsize_bigger()"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"Button",
|
|
||||||
"options":{
|
|
||||||
"label":"A",
|
|
||||||
"item_rate":0.7,
|
|
||||||
"item_size":"20px"
|
|
||||||
},
|
|
||||||
"binds":[
|
|
||||||
{
|
|
||||||
"wid":"self",
|
|
||||||
"event":"click",
|
|
||||||
"actiontype":"script",
|
|
||||||
"target":"app",
|
|
||||||
"script":"bricks_app.textsize_smaller()"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="http://kimird.com/bricks/css/bricks.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="http://kimird.com/bricks/bricks.js"></script>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"Toolbar",
|
|
||||||
"options":{
|
|
||||||
"target":null,
|
|
||||||
"orientation":"horizontal",
|
|
||||||
"tool_margin":"15px",
|
|
||||||
"tools":[
|
|
||||||
{
|
|
||||||
"name":"c",
|
|
||||||
"Label":"C",
|
|
||||||
"icon":null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name":"javascript",
|
|
||||||
"Label":"JavaScript",
|
|
||||||
"icon":null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name":"php",
|
|
||||||
"Label":"PHP",
|
|
||||||
"icon":null
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name":"python",
|
|
||||||
"Label":"Python",
|
|
||||||
"icon":null
|
|
||||||
},
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
31
examples/toolbar.ui
Normal file
31
examples/toolbar.ui
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"Toolbar",
|
||||||
|
"options":{
|
||||||
|
"target":null,
|
||||||
|
"orientation":"horizontal",
|
||||||
|
"tool_margin":"15px",
|
||||||
|
"tools":[
|
||||||
|
{
|
||||||
|
"name":"c",
|
||||||
|
"Label":"C",
|
||||||
|
"icon":null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name":"javascript",
|
||||||
|
"Label":"JavaScript",
|
||||||
|
"icon":null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name":"php",
|
||||||
|
"Label":"PHP",
|
||||||
|
"icon":null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name":"python",
|
||||||
|
"Label":"Python",
|
||||||
|
"icon":null
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,24 +0,0 @@
|
|||||||
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<link rel="stylesheet" href="/bricks/css/bricks.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"urlwidget",
|
|
||||||
"options":{
|
|
||||||
"url":"tree.json"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
7
examples/tree.ui
Normal file
7
examples/tree.ui
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"urlwidget",
|
||||||
|
"options":{
|
||||||
|
"url":"tree.json"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,70 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
|
|
||||||
<script src="http://kimird.com/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"widgettype":"VBox",
|
|
||||||
"options":{
|
|
||||||
},
|
|
||||||
"subwidgets":[
|
|
||||||
{
|
|
||||||
"widgettype":"Title1",
|
|
||||||
"options":{
|
|
||||||
"text":"Pic Viewer",
|
|
||||||
"i18n":true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype":"urlwidget",
|
|
||||||
"options":{
|
|
||||||
"url":"/bricks/image.tmpl"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"id":"mymodal",
|
|
||||||
"widgettype":"Modal",
|
|
||||||
"options":{
|
|
||||||
"auto_close":true,
|
|
||||||
"auto_open":false,
|
|
||||||
"width":"700px",
|
|
||||||
"height":"400px",
|
|
||||||
"archor":"cl",
|
|
||||||
},
|
|
||||||
"subwidgets":[
|
|
||||||
{
|
|
||||||
"widgettype":"Text",
|
|
||||||
"options":{
|
|
||||||
"text":"This is a test"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
var o = {
|
|
||||||
'name':'john',
|
|
||||||
'age':12
|
|
||||||
}
|
|
||||||
console.log('fmtstr=', obj_fmtstr(o, 'name=${name} ${age:}'));
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
var btn = document.getElementById('btn')
|
|
||||||
btn.innerText = 'ShowModal';
|
|
||||||
var showModal = function(){
|
|
||||||
var m = document.getElementById('mymodal');
|
|
||||||
m.style.display = 'block';
|
|
||||||
console.log('clicked');
|
|
||||||
}
|
|
||||||
btn['HDHDHD'] = o;
|
|
||||||
console.log('btn new data=', btn['HDHDHD']);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
97
examples/vbox.ui
Normal file
97
examples/vbox.ui
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"VBox",
|
||||||
|
"options":{
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"Title1",
|
||||||
|
"options":{
|
||||||
|
"text":"Pic Viewer",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Title2",
|
||||||
|
"options":{
|
||||||
|
"text":"Pic Viewer",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Title3",
|
||||||
|
"options":{
|
||||||
|
"text":"Pic Viewer",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Title4",
|
||||||
|
"options":{
|
||||||
|
"text":"Pic Viewer",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Title5",
|
||||||
|
"options":{
|
||||||
|
"text":"Pic Viewer",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Title6",
|
||||||
|
"options":{
|
||||||
|
"text":"Pic Viewer",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"text":"Pic Viewer",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"HBox",
|
||||||
|
"options":{
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"label":"A",
|
||||||
|
"item_rate":1.4
|
||||||
|
},
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"self",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"script",
|
||||||
|
"target":"app",
|
||||||
|
"script":"bricks_app.textsize_bigger()"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"Button",
|
||||||
|
"options":{
|
||||||
|
"label":"A",
|
||||||
|
"item_rate":0.7,
|
||||||
|
"item_size":"20px"
|
||||||
|
},
|
||||||
|
"binds":[
|
||||||
|
{
|
||||||
|
"wid":"self",
|
||||||
|
"event":"click",
|
||||||
|
"actiontype":"script",
|
||||||
|
"target":"app",
|
||||||
|
"script":"bricks_app.textsize_smaller()"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
40
examples/vbox1.ui
Normal file
40
examples/vbox1.ui
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"widgettype":"VBox",
|
||||||
|
"options":{
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"Title1",
|
||||||
|
"options":{
|
||||||
|
"text":"Pic Viewer",
|
||||||
|
"i18n":true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype":"urlwidget",
|
||||||
|
"options":{
|
||||||
|
"url":"/bricks/image.tmpl"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id":"mymodal",
|
||||||
|
"widgettype":"Modal",
|
||||||
|
"options":{
|
||||||
|
"auto_close":true,
|
||||||
|
"auto_open":false,
|
||||||
|
"width":"700px",
|
||||||
|
"height":"400px",
|
||||||
|
"archor":"cl",
|
||||||
|
},
|
||||||
|
"subwidgets":[
|
||||||
|
{
|
||||||
|
"widgettype":"Text",
|
||||||
|
"options":{
|
||||||
|
"text":"This is a test"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,25 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<script src="/bricks/bricks.js"></script>
|
|
||||||
<script>
|
|
||||||
const opts =
|
|
||||||
{
|
|
||||||
"widget": {
|
|
||||||
"id":"videoplayer",
|
|
||||||
"widgettype":"VideoPlayer",
|
|
||||||
"options":{
|
|
||||||
"autoplay":true,
|
|
||||||
"url":"http://kimird.com/video/sample-mp4-file.mp4",
|
|
||||||
"type":"mp4"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
;
|
|
||||||
const app = new BricksApp(opts);
|
|
||||||
app.run();
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
10
examples/video.ui
Normal file
10
examples/video.ui
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
|
||||||
|
{
|
||||||
|
"id":"videoplayer",
|
||||||
|
"widgettype":"VideoPlayer",
|
||||||
|
"options":{
|
||||||
|
"autoplay":true,
|
||||||
|
"url":"http://kimird.com/video/sample-mp4-file.mp4",
|
||||||
|
"type":"mp4"
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user