Skip to content

Commit 157afe9

Browse files
pborissowpborissow
committed
Initial commit of the Effects demo
1 parent 176555a commit 157afe9

File tree

1 file changed

+343
-0
lines changed

1 file changed

+343
-0
lines changed

‎demos/effects/Effects.html‎

Lines changed: 343 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,343 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Effects 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+
15+
<script src="../../src/utils/Utils.js"></script>
16+
<script src="../../src/utils/Effects.js"></script>
17+
<script src="../../themes/default.js"></script>
18+
19+
20+
<style>
21+
22+
.demo {
23+
display:flex;
24+
flex-wrap:nowrap;
25+
}
26+
27+
28+
.menu {
29+
border: 1px solid #dcdcdc;
30+
width: 145px;
31+
padding: 5px;
32+
}
33+
34+
.menu:focus{
35+
outline:0;
36+
}
37+
38+
.menu ul {
39+
margin: 5px 0 0 0;
40+
padding: 0 0 0 0;
41+
list-style-type: none;
42+
}
43+
44+
.menu li {
45+
margin: 0 0 0 0;
46+
padding: 0 12px 2px 0;
47+
white-space: nowrap;
48+
color: #777;
49+
cursor: pointer;
50+
}
51+
52+
.menu li:hover {
53+
background-color: aliceblue;
54+
}
55+
56+
.menu li.active {
57+
background-color: #c8e5ff;
58+
}
59+
60+
61+
62+
.preview {
63+
width:100%;
64+
border: 1px solid #dcdcdc;
65+
padding: 5px;
66+
position: relative;
67+
}
68+
69+
.preview .circle{
70+
width: 20px;
71+
height: 20px;
72+
border-radius: 50%;
73+
background-color: #ff8f8f;
74+
}
75+
76+
.middle {
77+
position: relative;
78+
top: 50%;
79+
-webkit-transform: translateY(-50%);
80+
-ms-transform: translateY(-50%);
81+
transform: translateY(-50%);
82+
}
83+
84+
.center {
85+
margin: 0 auto;
86+
}
87+
88+
89+
</style>
90+
91+
</head>
92+
<body>
93+
<div class="demo-container">
94+
95+
96+
<h1>Effects Demo</h1>
97+
<p>A sampling of various JavaXT effects found in the javaxt.dhtml.Effects class.
98+
Transitions effects are defined for individual elements using the setTransition()
99+
method.
100+
</p>
101+
102+
<div class="demo">
103+
<div class="menu">
104+
Demo
105+
<ul>
106+
<li>Slide In</li>
107+
<li>Fade In</li>
108+
<li>Drop</li>
109+
<li>Grow</li>
110+
<li>Expand</li>
111+
<li>Expand Left</li>
112+
<li>Expand Right</li>
113+
</ul>
114+
</div>
115+
<div class="menu">
116+
Effect
117+
<ul></ul>
118+
</div>
119+
<div class="preview">
120+
Demo
121+
</div>
122+
</div>
123+
</div>
124+
125+
126+
127+
<script>
128+
window.onload = function(){
129+
var createElement = javaxt.dhtml.utils.createElement;
130+
131+
132+
//Instantiate the Effects class
133+
var fx = new javaxt.dhtml.Effects();
134+
var demo, effect, preview;
135+
136+
137+
//Get menus
138+
var demoMenu, effectMenu;
139+
var menus = document.getElementsByClassName("menu");
140+
for (var i=0; i<menus.length; i++){
141+
142+
var ul = menus[i].getElementsByTagName("ul")[0];
143+
if (i==0) demoMenu = ul;
144+
else effectMenu = ul;
145+
146+
menus[i].tabIndex = -1; //allows the div to have focus
147+
menus[i].addEventListener("keyup", function(e){
148+
149+
if (e.keyCode===38 || e.keyCode===40){
150+
151+
152+
var rows = [];
153+
var lastSelectedRow = -1;
154+
var ul = this.getElementsByTagName("ul")[0];
155+
for (var i=0; i<ul.childNodes.length; i++){
156+
var li = ul.childNodes[i];
157+
if (li.nodeType==1){
158+
rows.push(li);
159+
if (li.classList.has("active")){
160+
lastSelectedRow = rows.length-1;
161+
}
162+
}
163+
}
164+
165+
if (lastSelectedRow>-1){
166+
var row;
167+
if (e.keyCode===40){ //down arrow
168+
row = rows[lastSelectedRow+1];
169+
}
170+
else{ //up arrow
171+
row = rows[lastSelectedRow-1];
172+
}
173+
if (row) row.click();
174+
}
175+
}
176+
});
177+
178+
179+
}
180+
181+
182+
//Add event listeners to the "Demo" menu
183+
for (var i=0; i<demoMenu.childNodes.length; i++){
184+
var li = demoMenu.childNodes[i];
185+
if (li.nodeType!=1) continue;
186+
187+
188+
li.classList.has = function(className){
189+
for (var i=0; i<this.length; i++){
190+
if (this[i]===className) return true;
191+
}
192+
return false;
193+
};
194+
195+
196+
li.onclick = function(){
197+
if (this.classList.has("active")) return;
198+
199+
for (var i=0; i<demoMenu.childNodes.length; i++){
200+
if (demoMenu.childNodes[i].nodeType!=1) continue;
201+
demoMenu.childNodes[i].classList.remove("active");
202+
}
203+
204+
this.classList.add("active");
205+
demo = this.innerText;
206+
runDemo();
207+
};
208+
}
209+
210+
211+
//Populate the "Effects" menu and add event listeners
212+
Object.keys(javaxt.dhtml.Transitions).forEach((key)=>{
213+
var li = createElement("li", effectMenu, "a");
214+
li.innerText = key;
215+
li.classList.has = function(className){
216+
for (var i=0; i<this.length; i++){
217+
if (this[i]===className) return true;
218+
}
219+
return false;
220+
};
221+
222+
li.onclick = function(){
223+
if (!demo || this.classList.has("active")) return;
224+
225+
for (var i=0; i<effectMenu.childNodes.length; i++){
226+
if (effectMenu.childNodes[i].nodeType!=1) continue;
227+
effectMenu.childNodes[i].classList.remove("active");
228+
}
229+
230+
this.classList.add("active");
231+
effect = this.innerText;
232+
runDemo();
233+
};
234+
});
235+
236+
237+
238+
239+
240+
//Create function to run the demos
241+
var runDemo = function(){
242+
if (!demo || !effect) return;
243+
if (!preview) preview = document.getElementsByClassName("preview")[0];
244+
preview.innerHTML = "";
245+
246+
var div = createElement("div", preview, "circle middle center");
247+
div.style.opacity = 0;
248+
249+
250+
if (demo==="Slide In"){
251+
div.style.position = "absolute";
252+
div.className = "circle middle";
253+
div.style.width = "40px";
254+
div.style.height = "40px";
255+
div.style.left = "90%";
256+
div.style.opacity = 1;
257+
setTransition(div, ()=>{
258+
div.style.transitionProperty = "left";
259+
div.style.left = "20px";
260+
});
261+
}
262+
else if (demo==="Fade In"){
263+
div.style.width = "200px";
264+
div.style.height = "200px";
265+
setTransition(div, ()=>{
266+
div.style.transitionProperty = "opacity";
267+
div.style.opacity = 1;
268+
});
269+
}
270+
else if (demo==="Drop"){
271+
div.style.position = "absolute";
272+
div.className = "circle";
273+
div.style.top = 0;
274+
div.style.left = "50%";
275+
div.style.width = "40px";
276+
div.style.height = "40px";
277+
div.style.opacity = 1;
278+
setTransition(div, ()=>{
279+
div.style.transitionProperty = "top";
280+
div.style.top = "90%";
281+
});
282+
}
283+
else if (demo==="Grow"){
284+
div.style.borderRadius = "50%";
285+
div.style.opacity = 1;
286+
setTransition(div, ()=>{
287+
div.style.transitionProperty = "width, height";
288+
div.style.width = "100px";
289+
div.style.height = "100px";
290+
});
291+
}
292+
else if (demo==="Expand"){
293+
div.style.width = "80px";
294+
div.style.height = "40px";
295+
div.style.borderRadius = "20px";
296+
div.style.opacity = 1;
297+
setTransition(div, ()=>{
298+
div.style.transitionProperty = "width";
299+
div.style.width = "200px";
300+
});
301+
}
302+
else if (demo==="Expand Left"){
303+
div.style.height = "40px";
304+
div.style.borderRadius = "20px";
305+
div.style.position = "absolute";
306+
div.style.right = "50%";
307+
div.style.opacity = 1;
308+
setTransition(div, ()=>{
309+
div.style.transitionProperty = "padding";
310+
div.style.paddingLeft = "400px";
311+
});
312+
}
313+
else if (demo==="Expand Right"){
314+
div.style.height = "40px";
315+
div.style.borderRadius = "20px";
316+
div.style.position = "absolute";
317+
div.style.left = "50%";
318+
div.style.opacity = 1;
319+
setTransition(div, ()=>{
320+
div.style.transitionProperty = "padding";
321+
div.style.paddingRight = "400px";
322+
});
323+
}
324+
};
325+
326+
327+
var timer;
328+
var duration = 1000;
329+
var setTransition = function(div, callback){
330+
if (timer) clearTimeout(timer);
331+
timer = setTimeout(()=>{
332+
fx.setTransition(div, effect, duration);
333+
callback();
334+
}, 200);
335+
};
336+
337+
338+
};
339+
</script>
340+
341+
342+
</body>
343+
</html>

0 commit comments

Comments
 (0)