lexgui 0.6.5 → 0.6.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/codeeditor.js +27 -11
- package/build/components/docmaker.js +425 -0
- package/build/lexgui-docs.css +354 -0
- package/build/lexgui.css +11 -0
- package/build/lexgui.js +88 -22
- package/build/lexgui.min.css +1 -1
- package/build/lexgui.min.js +1 -1
- package/build/lexgui.module.js +88 -22
- package/build/lexgui.module.min.js +1 -1
- package/changelog.md +25 -1
- package/examples/index.html +50 -23
- package/examples/node_graph.html +7 -7
- package/package.json +1 -1
package/changelog.md
CHANGED
|
@@ -2,7 +2,31 @@
|
|
|
2
2
|
|
|
3
3
|
## dev
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Widgets:
|
|
6
|
+
- Button Widget now allows `options.fileInput` to request a file on click.
|
|
7
|
+
- Custom Widgets now allow getter and setter options to process non-native types.
|
|
8
|
+
|
|
9
|
+
CodeEditor:
|
|
10
|
+
- Add `CodeEditor.closeTab` and `CodeEditor.getSelectedTabName`.
|
|
11
|
+
- Fixed bug using `CodeEditor._tabStorage`.
|
|
12
|
+
- Fixed initial tab language override.
|
|
13
|
+
|
|
14
|
+
Fixed html viewport scale issues.
|
|
15
|
+
Fixed Sheet zIndex.
|
|
16
|
+
Fix Sidebar Header/Footer arrows icon: Only added if click listener exists.
|
|
17
|
+
Added `MAKE_NUMBERED_LIST` to docmaker.js component.
|
|
18
|
+
Clean docmaker css.
|
|
19
|
+
Docs updated.
|
|
20
|
+
|
|
21
|
+
## 0.6.6 (master)
|
|
22
|
+
|
|
23
|
+
Fixed horizontal scroll in Table Widget.
|
|
24
|
+
Fixed checkbox in Dropdown item.
|
|
25
|
+
Callbacks in collapsable sidebar entries are now executed.
|
|
26
|
+
Add `docmaker.js` script (Documentation maker) as new LX component.
|
|
27
|
+
Added `hover:scale` CSS selectors.
|
|
28
|
+
|
|
29
|
+
## 0.6.5
|
|
6
30
|
|
|
7
31
|
Timeline:
|
|
8
32
|
- Refactored undo-redo.
|
package/examples/index.html
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
|
5
|
+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
5
6
|
<title>Examples - LexGUI.js </title>
|
|
6
7
|
<link rel="stylesheet" href="../build/lexgui.css">
|
|
7
8
|
<link rel="icon" href="../images/icon.png">
|
|
@@ -24,18 +25,9 @@
|
|
|
24
25
|
|
|
25
26
|
// Init library and get main area
|
|
26
27
|
let area = await LX.init();
|
|
28
|
+
let iFrameArea = null;
|
|
27
29
|
|
|
28
|
-
|
|
29
|
-
let [leftArea, rightArea] = area.split({ sizes: ["20%","80%"], resize: false });
|
|
30
|
-
|
|
31
|
-
leftArea.root.style.borderRight = "2px solid gray";
|
|
32
|
-
|
|
33
|
-
const menubar = leftArea.addMenubar( [
|
|
34
|
-
{ name: "Docs v" + LX.version, callback: (v, name) => { location.href = "../docs/"; } }
|
|
35
|
-
] );
|
|
36
|
-
|
|
37
|
-
menubar.setButtonIcon("Github", "Github", () => {window.open("https://github.com/jxarco/lexgui.js/")}, { float: "left" });
|
|
38
|
-
|
|
30
|
+
const mobile = navigator && /Android|iPhone/i.test( navigator.userAgent );
|
|
39
31
|
const examples = [
|
|
40
32
|
'All Widgets',
|
|
41
33
|
'Area Tabs',
|
|
@@ -49,17 +41,9 @@
|
|
|
49
41
|
"Timeline"
|
|
50
42
|
];
|
|
51
43
|
|
|
52
|
-
let panel =
|
|
53
|
-
fillExamples( panel );
|
|
54
|
-
|
|
55
|
-
let iframe = document.createElement('iframe');
|
|
56
|
-
iframe.id = iframe.name = 'viewer';
|
|
57
|
-
iframe.src = examples[0].replace(" ", "_").toLowerCase() + ".html";
|
|
58
|
-
iframe.style.width = "100%";
|
|
59
|
-
iframe.style.height = "100%";
|
|
60
|
-
rightArea.root.appendChild(iframe);
|
|
44
|
+
let panel = null;
|
|
61
45
|
|
|
62
|
-
|
|
46
|
+
const overlayButtons = [
|
|
63
47
|
{
|
|
64
48
|
name: "View Source Code",
|
|
65
49
|
icon: "Code",
|
|
@@ -68,7 +52,46 @@
|
|
|
68
52
|
window.open("https://github.com/jxarco/lexgui.js/blob/master/examples/" + tokens[tokens.length - 1], '_blank')
|
|
69
53
|
}
|
|
70
54
|
}
|
|
71
|
-
]
|
|
55
|
+
];
|
|
56
|
+
|
|
57
|
+
if( mobile )
|
|
58
|
+
{
|
|
59
|
+
const sheetArea = new LX.Area({ skipAppend: true });
|
|
60
|
+
panel = sheetArea.addPanel();
|
|
61
|
+
iFrameArea = area;
|
|
62
|
+
|
|
63
|
+
overlayButtons.splice( 0, 0, {
|
|
64
|
+
name: "Examples Menu",
|
|
65
|
+
icon: "PanelLeft",
|
|
66
|
+
callback: (value, event) => {
|
|
67
|
+
window.__currentSheet = new LX.Sheet("256px", [ sheetArea ] );
|
|
68
|
+
}
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
else
|
|
72
|
+
{
|
|
73
|
+
let [ leftArea, rightArea ] = area.split({ sizes: ["20%","80%"], resize: false });
|
|
74
|
+
leftArea.root.style.borderRight = "2px solid gray";
|
|
75
|
+
|
|
76
|
+
const menubar = leftArea.addMenubar( [
|
|
77
|
+
{ name: "Docs v" + LX.version, callback: (v, name) => { location.href = "../docs/"; } }
|
|
78
|
+
] );
|
|
79
|
+
menubar.setButtonIcon("Github", "Github", () => {window.open("https://github.com/jxarco/lexgui.js/")}, { float: "left" });
|
|
80
|
+
|
|
81
|
+
panel = leftArea.addPanel();
|
|
82
|
+
iFrameArea = rightArea;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
fillExamples( panel );
|
|
86
|
+
|
|
87
|
+
let iframe = document.createElement('iframe');
|
|
88
|
+
iframe.id = iframe.name = 'viewer';
|
|
89
|
+
iframe.src = examples[0].replace(" ", "_").toLowerCase() + ".html";
|
|
90
|
+
iframe.style.width = "100%";
|
|
91
|
+
iframe.style.height = "100%";
|
|
92
|
+
iFrameArea.root.appendChild(iframe);
|
|
93
|
+
|
|
94
|
+
iFrameArea.addOverlayButtons( overlayButtons, { float: "hbc" } );
|
|
72
95
|
|
|
73
96
|
// **** **** **** **** **** **** **** **** **** **** **** ****
|
|
74
97
|
|
|
@@ -83,9 +106,13 @@
|
|
|
83
106
|
img: "previews/" + id + ".png",
|
|
84
107
|
callback: function() {
|
|
85
108
|
iframe.src = id + ".html";
|
|
109
|
+
if( window.__currentSheet )
|
|
110
|
+
{
|
|
111
|
+
window.__currentSheet.destroy();
|
|
112
|
+
}
|
|
86
113
|
}
|
|
87
114
|
};
|
|
88
|
-
panel.addCard(ex, options);
|
|
115
|
+
panel.addCard( ex, options );
|
|
89
116
|
}
|
|
90
117
|
}
|
|
91
118
|
</script>
|
package/examples/node_graph.html
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
let area = await LX.init();
|
|
27
27
|
|
|
28
28
|
// split main area
|
|
29
|
-
var [topArea, bottomArea] = area.split({ type: 'vertical', sizes: ["25%", "75%"] });
|
|
29
|
+
var [ topArea, bottomArea ] = area.split({ type: 'vertical', sizes: ["25%", "75%"] });
|
|
30
30
|
|
|
31
31
|
// add canvas to topArea
|
|
32
32
|
var canvas = document.createElement('canvas');
|
|
@@ -43,13 +43,13 @@
|
|
|
43
43
|
canvas.height = bounding.height;
|
|
44
44
|
};
|
|
45
45
|
|
|
46
|
-
let
|
|
46
|
+
let graphEditor = new LX.GraphEditor( bottomArea, {
|
|
47
|
+
sidebar: false,
|
|
48
|
+
} );
|
|
47
49
|
|
|
48
|
-
|
|
50
|
+
graphEditor.loadGraph("../data/graph_sample.json");
|
|
49
51
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
function loop(dt) {
|
|
52
|
+
function loop( dt ) {
|
|
53
53
|
|
|
54
54
|
var ctx = canvas.getContext("2d");
|
|
55
55
|
|
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
ctx.fillStyle = "#ff1999";
|
|
61
61
|
|
|
62
62
|
const text = "Lexgui.js @jxarco";
|
|
63
|
-
ctx.fillText(text, 100, 125);
|
|
63
|
+
ctx.fillText( text, 100, 125 );
|
|
64
64
|
|
|
65
65
|
requestAnimationFrame(loop);
|
|
66
66
|
}
|