| 41 |
lars |
1 |
dojo.require("dijit.dijit");
|
|
|
2 |
dojo.require("dojo.fx");
|
|
|
3 |
|
|
|
4 |
|
|
|
5 |
var animationMethod = "combine"; // chain || combine
|
|
|
6 |
var _showing = false;
|
|
|
7 |
var animG, offsetW, offsetH = null;
|
|
|
8 |
var lieferbox = null;
|
|
|
9 |
var _loaded = false;
|
|
|
10 |
|
|
|
11 |
var boxMixin = {
|
|
|
12 |
startWidth: 0,
|
|
|
13 |
startHeight: 0,
|
|
|
14 |
endWidth: 518,
|
|
|
15 |
endHeight: 299,
|
|
|
16 |
duration: 650
|
|
|
17 |
};
|
|
|
18 |
|
|
|
19 |
/* DoJoX part
|
|
|
20 |
dojo.addOnLoad(function() {
|
|
|
21 |
lieferbox = dojo.byId('lieferbox');
|
|
|
22 |
centerNode(lieferbox);
|
|
|
23 |
dojo.connect(lieferbox,"onmouseover",null,"show");
|
|
|
24 |
dojo.connect(lieferbox,"onmouseout",null,"hideCheck");
|
|
|
25 |
//dojo.connect(lieferbox,"onmouseout",null,"hideCheck");
|
|
|
26 |
//dojo.connect(but1,"onclick",null,"show");
|
|
|
27 |
_loaded = true;
|
|
|
28 |
});
|
|
|
29 |
*/
|
|
|
30 |
function hideCheck(node) {
|
|
|
31 |
if (_showing) {
|
|
|
32 |
setTimeout("hide('lieferbox')",250);
|
|
|
33 |
}
|
|
|
34 |
}
|
|
|
35 |
|
|
|
36 |
function centerNode(node) {
|
|
|
37 |
var viewport = dijit.getViewport();
|
|
|
38 |
var mb = dojo.marginBox(node);
|
|
|
39 |
var style = node.style;
|
|
|
40 |
offsetW = mb.w - style.width;
|
|
|
41 |
offsetH = mb.h - style.height;
|
|
|
42 |
style.left = (viewport.l + (viewport.w - mb.w)/2) + "px";
|
|
|
43 |
style.top = (viewport.t + (viewport.h - mb.h)/2) + "px";
|
|
|
44 |
}
|
|
|
45 |
|
|
|
46 |
function doUnderlay() {
|
|
|
47 |
console.debug('make underlay');
|
|
|
48 |
|
|
|
49 |
}
|
|
|
50 |
|
|
|
51 |
function hide() {
|
|
|
52 |
return false;
|
|
|
53 |
}
|
|
|
54 |
function show() {
|
|
|
55 |
return false;
|
|
|
56 |
}
|
|
|
57 |
|
|
|
58 |
function show1() {
|
|
|
59 |
if(!_loaded) { return ; }
|
|
|
60 |
if (_showing) { return; }
|
|
|
61 |
|
|
|
62 |
if (animG && animG.status == "playing") { animG.stop(); }
|
|
|
63 |
_showing = true;
|
|
|
64 |
var viewport = dijit.getViewport();
|
|
|
65 |
|
|
|
66 |
var newLeft = (viewport.l + (viewport.w - boxMixin.endWidth)/2);
|
|
|
67 |
var newTop = (viewport.t + (viewport.h - boxMixin.endHeight)/2);
|
|
|
68 |
|
|
|
69 |
var style = lieferbox.style;
|
|
|
70 |
var anim1 = dojo.animateProperty({
|
|
|
71 |
node: lieferbox,
|
|
|
72 |
duration: boxMixin.duration/2,
|
|
|
73 |
properties: {
|
|
|
74 |
width: { /* start: boxMixin.startWidth, */ end: boxMixin.endWidth, unit:"px" },
|
|
|
75 |
left: { end: newLeft, unit:"px" }
|
|
|
76 |
},
|
|
|
77 |
beforeBegin: doUnderlay()
|
|
|
78 |
});
|
|
|
79 |
var anim2 = dojo.animateProperty({
|
|
|
80 |
node: lieferbox,
|
|
|
81 |
duration: boxMixin.duration/2,
|
|
|
82 |
properties: {
|
|
|
83 |
height: { /*start: boxMixin.startHeight, */ end: boxMixin.endHeight, unit:"px" },
|
|
|
84 |
top: { end: newTop, unit: "px" }
|
|
|
85 |
},
|
|
|
86 |
onEnd: function() {
|
|
|
87 |
_showing = true;
|
|
|
88 |
dojo.byId('lieferbox').style.overflow = 'visible';
|
|
|
89 |
}
|
|
|
90 |
|
|
|
91 |
});
|
|
|
92 |
|
|
|
93 |
animG = dojo.fx[animationMethod]([anim1,anim2]).play();
|
|
|
94 |
|
|
|
95 |
// chain:
|
|
|
96 |
|
|
|
97 |
// animate width / left position
|
|
|
98 |
// animate height / top position
|
|
|
99 |
// onend: fadeIn content?
|
|
|
100 |
}
|
|
|
101 |
|
|
|
102 |
function hide1(node) {
|
|
|
103 |
if (!_showing) return;
|
|
|
104 |
if (animG && animG.status() == "playing") { animG.stop(); }
|
|
|
105 |
|
|
|
106 |
var viewport = dijit.getViewport();
|
|
|
107 |
var newLeft = (viewport.l + (viewport.w - boxMixin.startWidth)/2);
|
|
|
108 |
var newTop = (viewport.t + (viewport.h - boxMixin.startHeight)/2);
|
|
|
109 |
|
|
|
110 |
var style = node.style;
|
|
|
111 |
var anim1 = dojo.animateProperty({
|
|
|
112 |
node: lieferbox,
|
|
|
113 |
duration: boxMixin.duration/2,
|
|
|
114 |
properties: {
|
|
|
115 |
width: { end: boxMixin.startWidth, unit:"px" },
|
|
|
116 |
left: { end: newLeft, unit:"px" }
|
|
|
117 |
}
|
|
|
118 |
});
|
|
|
119 |
var anim2 = dojo.animateProperty({
|
|
|
120 |
node: lieferbox,
|
|
|
121 |
duration: boxMixin.duration/2,
|
|
|
122 |
properties: {
|
|
|
123 |
height: { end: boxMixin.startHeight, unit:"px" },
|
|
|
124 |
top: { end: newTop, unit: "px" }
|
|
|
125 |
},
|
|
|
126 |
onBegin: function() {
|
|
|
127 |
_showing = true;
|
|
|
128 |
dojo.byId('lieferbox').style.overflow = 'hidden';
|
|
|
129 |
},
|
|
|
130 |
onEnd: function() {
|
|
|
131 |
_showing = false;
|
|
|
132 |
//dojo.byId('lieferbox').style.overflow = 'hidden';
|
|
|
133 |
}
|
|
|
134 |
});
|
|
|
135 |
// if we chain, do anim2 first [because height/top is how anim2 in show() ends]
|
|
|
136 |
animG = dojo.fx[animationMethod]([anim2,anim1]).play();
|
|
|
137 |
|
|
|
138 |
}
|
|
|
139 |
|
|
|
140 |
|
|
|
141 |
/* end dojox */
|