Skip to content

Commit 4dec49f

Browse files
pborissowpborissow
committed
Tweaked the themes demo
1 parent 885e02f commit 4dec49f

File tree

2 files changed

+181
-183
lines changed

2 files changed

+181
-183
lines changed

‎demos/themes/Themes.html‎

Lines changed: 119 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,120 @@
1-
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Themes Demo</title>
5-
6-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
8-
<meta name="apple-mobile-web-app-capable" content="yes" />
9-
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
10-
11-
<link href="../style.css" rel="stylesheet" type="text/css" />
12-
13-
14-
<script src="../../src/tabpanel/TabPanel.js"></script>
15-
<script src="../../src/window/Window.js"></script>
16-
<script src="../../src/utils/Utils.js"></script>
17-
18-
<script src="../../themes/default.js"></script>
19-
20-
<script src="demo.js"></script>
21-
22-
</head>
23-
<body>
24-
<div class="demo-container">
25-
26-
27-
28-
<h1>Themes Demo</h1>
29-
<p>A sampling of various JavaXT components in different styles/themes.</p>
30-
31-
<h2>No Theme</h2>
32-
<p>
33-
All JavaXT components have embedded style rules so you can use them out of-the-box.
34-
In other words, you don't need to define any classes or style rules or include
35-
any CSS file in order to render the components. This is what the components
36-
look like with no styling.
37-
</p>
38-
<div id="demo1"></div>
39-
40-
41-
<h2>Default Theme</h2>
42-
<p>
43-
You can customize the look and feel of any component by providing your own
44-
style rules when you instantiate the JavaXT components via the "style" config.
45-
In the themes folder, there is a CSS file called "default.css". This is
46-
what the components look like with the "default.css" theme.
47-
</p>
48-
<div id="demo2"></div>
49-
50-
51-
<h2>Dark Theme</h2>
52-
<p>
53-
And of course, we have a dark mode! In the themes folder, there is a CSS file
54-
called "dark.css". This is what the components look like with the "dark.css" theme.
55-
</p>
56-
<div id="demo3"></div>
57-
58-
59-
60-
61-
<script>
62-
window.onload = function(){
63-
64-
var html = document.getElementsByTagName("html")[0].cloneNode(true);
65-
html.getElementsByTagName("body")[0].innerHTML = "";
66-
67-
68-
for (var i=0; i<3; i++){
69-
var div = document.getElementById("demo"+(i+1));
70-
div.style.height = "400px";
71-
72-
73-
//Define a theme
74-
var theme = "";
75-
if (i===1){
76-
theme = "../../themes/default.css";
77-
}
78-
else if (i===2){
79-
theme = "../../themes/dark.css";
80-
}
81-
82-
83-
//Create iFrame
84-
var iframe = document.createElement("iframe");
85-
iframe.style.width = "100%";
86-
iframe.style.height = "100%";
87-
iframe.theme = theme;
88-
div.appendChild(iframe);
89-
90-
91-
//Update iFrame and render components
92-
iframe.onload = function() {
93-
if (this.theme){
94-
var h = this.contentWindow.document.getElementsByTagName("head")[0];
95-
var l = h.getElementsByTagName("link")[0];
96-
l.href = this.theme;
97-
}
98-
var b = this.contentWindow.document.getElementsByTagName("body")[0];
99-
b.style.padding = 0; //override demos/style.css
100-
renderComponents(b, this.theme ? javaxt.dhtml.style.default : false);
101-
};
102-
iframe.contentWindow.document.open();
103-
iframe.contentWindow.document.write(html.innerHTML);
104-
iframe.contentWindow.document.close();
105-
106-
}
107-
};
108-
</script>
109-
110-
</div>
111-
</body>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Themes Demo</title>
5+
6+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
8+
<meta name="apple-mobile-web-app-capable" content="yes" />
9+
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
10+
11+
<link href="../style.css" rel="stylesheet" type="text/css" />
12+
13+
14+
<script src="../../src/tabpanel/TabPanel.js"></script>
15+
<script src="../../src/window/Window.js"></script>
16+
<script src="../../src/utils/Utils.js"></script>
17+
18+
<script src="../../themes/default.js"></script>
19+
20+
<script src="demo.js"></script>
21+
22+
</head>
23+
<body>
24+
<div class="demo-container">
25+
26+
27+
28+
<h1>Themes Demo</h1>
29+
<p>A sampling of various JavaXT components in different styles/themes.</p>
30+
31+
<h2>No Theme</h2>
32+
<p>
33+
All JavaXT components have embedded style rules so you can use them out of-the-box.
34+
In other words, you don't need to define any classes or style rules or include
35+
any CSS file in order to render the components. This is what the components
36+
look like with no styling.
37+
</p>
38+
<div id="demo1"></div>
39+
40+
41+
<h2>Default Theme</h2>
42+
<p>
43+
You can customize the look and feel of any component by providing your own
44+
style rules when you instantiate the JavaXT components via the "style" config.
45+
In the themes folder, there is a CSS file called "default.css". This is
46+
what the components look like with the "default.css" theme.
47+
</p>
48+
<div id="demo2"></div>
49+
50+
51+
<h2>Dark Theme</h2>
52+
<p>
53+
And of course, we have a dark mode! In the themes folder, there is a CSS file
54+
called "dark.css". This is what the components look like with the "dark.css" theme.
55+
</p>
56+
<div id="demo3"></div>
57+
58+
59+
60+
61+
<script>
62+
window.onload = function(){
63+
64+
var html = document.getElementsByTagName("html")[0].cloneNode(true);
65+
html.getElementsByTagName("body")[0].innerHTML = "";
66+
67+
68+
for (var i=0; i<3; i++){
69+
var div = document.getElementById("demo"+(i+1));
70+
div.style.height = "400px";
71+
72+
73+
//Define a theme
74+
var theme = "";
75+
if (i===1){
76+
theme = "../../themes/default.css";
77+
}
78+
else if (i===2){
79+
theme = "../../themes/dark.css";
80+
}
81+
82+
83+
//Create iFrame
84+
var iframe = document.createElement("iframe");
85+
iframe.style.width = "100%";
86+
iframe.style.height = "100%";
87+
iframe.theme = theme;
88+
div.appendChild(iframe);
89+
90+
91+
//Update iFrame and render components
92+
iframe.onload = function() {
93+
if (this.theme){
94+
var h = this.contentWindow.document.getElementsByTagName("head")[0];
95+
var l = h.getElementsByTagName("link")[0];
96+
l.href = this.theme;
97+
}
98+
99+
var body = this.contentWindow.document.getElementsByTagName("body")[0];
100+
body.style.padding = 0; //override demos/style.css
101+
102+
var div = document.createElement("div");
103+
div.style.width = "100%";
104+
div.style.height = "100%";
105+
div.style.position = "relative";
106+
body.appendChild(div);
107+
108+
renderComponents(div, this.theme ? javaxt.dhtml.style.default : false);
109+
};
110+
iframe.contentWindow.document.open();
111+
iframe.contentWindow.document.write(html.innerHTML);
112+
iframe.contentWindow.document.close();
113+
114+
}
115+
};
116+
</script>
117+
118+
</div>
119+
</body>
112120
</html>

‎demos/themes/demo.js‎

Lines changed: 62 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,63 @@
1-
var renderComponents = function(parent, style){
2-
3-
//Create main div (can't use parent directly if iframe)
4-
var div = document.createElement("div");
5-
div.style.width = "100%";
6-
div.style.height = "100%";
7-
div.style.position = "relative";
8-
parent.appendChild(div);
9-
10-
11-
javaxt.dhtml.utils.updateDOM();
12-
var createElement = javaxt.dhtml.utils.createElement;
13-
var createTable = javaxt.dhtml.utils.createTable;
14-
15-
16-
var createTile = function(){
17-
return javaxt.dhtml.utils.createElement("div", div, {
18-
position: "relative",
19-
width: "600px",
20-
height: "400px",
21-
float: "left"
22-
});
23-
};
24-
25-
26-
//Create window
27-
var window = new javaxt.dhtml.Window(createTile(), {
28-
title: "Window",
29-
width: 400,
30-
height: 200,
31-
style: style ? style.window : {},
32-
movable: false,
33-
resizable: false
34-
});
35-
window.show();
36-
37-
38-
39-
//Create tab panel
40-
var tabContainer = javaxt.dhtml.utils.createElement("div", createTile(), {
41-
width: "300px",
42-
height: "300px"
43-
});
44-
tabContainer.className = "middle center";
45-
var tabs = new javaxt.dhtml.TabPanel(tabContainer, {
46-
style: style ? style.tabPanel : {}
47-
});
48-
tabs.addTab("Selected", "");
49-
tabs.addTab("Search", "");
50-
tabs.raiseTab(0);
51-
52-
53-
54-
55-
//Create window with tabs
56-
var window = new javaxt.dhtml.Window(createTile(), {
57-
title: "Tab Window",
58-
width: 400,
59-
height: 200,
60-
style: style ? style.window : {},
61-
movable: false,
62-
resizable: false
63-
});
64-
window.getBody().style.padding = 0;
65-
66-
var tabs = new javaxt.dhtml.TabPanel(window.getBody(), {
67-
style: style ? style.tabPanel : {}
68-
});
69-
tabs.addTab("Selected", "");
70-
tabs.addTab("Search", "");
71-
tabs.raiseTab(0);
72-
window.show();
1+
var renderComponents = function(parent, style){
2+
3+
4+
javaxt.dhtml.utils.updateDOM();
5+
var createElement = javaxt.dhtml.utils.createElement;
6+
var createTile = function(){
7+
return createElement("div", parent, {
8+
position: "relative",
9+
width: "600px",
10+
height: "400px",
11+
float: "left"
12+
});
13+
};
14+
15+
16+
//Create window
17+
var window = new javaxt.dhtml.Window(createTile(), {
18+
title: "Window",
19+
width: 400,
20+
height: 200,
21+
style: style ? style.window : {},
22+
movable: false,
23+
resizable: false
24+
});
25+
window.show();
26+
27+
28+
29+
//Create tab panel
30+
var tabContainer = createElement("div", createTile(), {
31+
width: "300px",
32+
height: "300px"
33+
});
34+
tabContainer.className = "middle center";
35+
var tabs = new javaxt.dhtml.TabPanel(tabContainer, {
36+
style: style ? style.tabPanel : {}
37+
});
38+
tabs.addTab("Selected", "");
39+
tabs.addTab("Search", "");
40+
tabs.raiseTab(0);
41+
42+
43+
44+
45+
//Create window with tabs
46+
var window = new javaxt.dhtml.Window(createTile(), {
47+
title: "Tab Window",
48+
width: 400,
49+
height: 200,
50+
style: style ? style.window : {},
51+
movable: false,
52+
resizable: false
53+
});
54+
window.getBody().style.padding = 0;
55+
56+
var tabs = new javaxt.dhtml.TabPanel(window.getBody(), {
57+
style: style ? style.tabPanel : {}
58+
});
59+
tabs.addTab("Selected", "");
60+
tabs.addTab("Search", "");
61+
tabs.raiseTab(0);
62+
window.show();
7363
};

0 commit comments

Comments
 (0)