8398c9048d
code was modified slightly, so the code differs from the original downloadable 1.9.5 version
151 lines
3.5 KiB
JavaScript
151 lines
3.5 KiB
JavaScript
dojo.provide("demos.mojo.src");
|
|
|
|
// our core requirements:
|
|
dojo.require("dojo.dnd.Moveable");
|
|
dojo.require("dojo.fx");
|
|
dojo.require("dojo.fx.easing");
|
|
dojo.require("dojox.widget.Roller");
|
|
|
|
// tracking:
|
|
dojo.require("dojox.analytics.Urchin");
|
|
|
|
// our custom code:
|
|
dojo.require("demos.mojo.src.drop"); // gravity code
|
|
dojo.require("demos.mojo.src.download"); // download link code
|
|
|
|
(function(){
|
|
|
|
var nodes, style = dojo.style;
|
|
|
|
dojo.addOnLoad(function(){
|
|
|
|
if(dojo.isIE){
|
|
dojo.byId("logoImg").src = "images/logo.gif";
|
|
}
|
|
nodes = dojo.query("#container > div");
|
|
// iterate over each div in the container
|
|
nodes.forEach(function(n){
|
|
// hide the node, first thing, and undo native-css hiding:
|
|
style(n, { opacity:0, visibility:"visible" });
|
|
|
|
// the drag handle will be the h1 element in this div
|
|
var handle = dojo.query("h1", n)[0];
|
|
new dojo.dnd.Moveable(n, { handle: handle });
|
|
|
|
// there is really only one image in here though:
|
|
dojo.query("img", n).forEach(function(img){
|
|
style(img,{
|
|
width:"1px", height:"1px",
|
|
top:"155px", left:"155px"
|
|
});
|
|
if(dojo.isIE){
|
|
// no png's for ie users
|
|
img.src = "images/shot3.gif";
|
|
}
|
|
});
|
|
});
|
|
|
|
// dojo.fx.combine takes an array of animations:
|
|
var _anims = [];
|
|
var _delay = 1200;
|
|
|
|
nodes.forEach(function(n){
|
|
// fade in the node, delayed 500ms
|
|
_anims.push(dojo.fadeIn({
|
|
duration:850,
|
|
node: n, delay: _delay + 1200,
|
|
properties: {
|
|
paddingTop: {
|
|
start:155, end:1, unit:"px"
|
|
},
|
|
fontSize:{
|
|
start:0.1, end:16, unit:"px"
|
|
}
|
|
}
|
|
}))
|
|
|
|
dojo.query("img", n).forEach(function(img){
|
|
_anims.push(dojo.animateProperty({
|
|
duration:450,
|
|
delay: _delay + 1000,
|
|
node: img,
|
|
properties: {
|
|
width: 310,
|
|
height: 310,
|
|
top: 0,
|
|
left: 0
|
|
}
|
|
}));
|
|
});
|
|
|
|
_delay += 1500; // step up the delay base just a smidge
|
|
|
|
});
|
|
|
|
// add the header-in-animation to our _anims array
|
|
_anims.push(dojo.animateProperty({
|
|
node: "header",
|
|
properties: {
|
|
top: 5,
|
|
left: 5
|
|
},
|
|
delay: _delay,
|
|
duration: 700
|
|
}));
|
|
|
|
_anims.push(dojo.fadeIn({
|
|
node:"downloadButton",
|
|
duration:400,
|
|
delay:2000,
|
|
beforeBegin: dojo.partial(style, "downloadButton", {
|
|
opacity:0, visibility:"visible"
|
|
})
|
|
}));
|
|
|
|
// combine them all, and play a s single animation (with a
|
|
// setTimeout to give the broswer a second to be sane again)
|
|
var anim = dojo.fx.combine(_anims);
|
|
|
|
var roller = new dojox.widget.RollerSlide({ delay:5000, autoStart:false },"whyList");
|
|
dojo.connect(anim,"onEnd", roller, "start");
|
|
|
|
setTimeout(dojo.hitch(anim,"play"), 15);
|
|
|
|
var _coords = null;
|
|
var _z = null;
|
|
|
|
dojo.subscribe("/dnd/move/start",function(e){
|
|
// when drag starts, save the coords of the node we're pulling
|
|
var n = e.node;
|
|
_coords = dojo.coords(n);
|
|
// and "bring to top"
|
|
// and make it partially opaque
|
|
_z = style(n, "zIndex");
|
|
style(n, { zIndex:888, opacity:0.65 });
|
|
});
|
|
|
|
dojo.subscribe("/dnd/move/stop", function(e){
|
|
// when it ends, reset z-index, opacity, and animate back to spot
|
|
style(e.node, "opacity", 1);
|
|
if(_coords){
|
|
dojo.fx.slideTo({
|
|
node: e.node, // drag node
|
|
top: _coords.t, // tmp top
|
|
left: _coords.l, // tmp left
|
|
easing: dojo.fx.easing.elasticOut,
|
|
duration:950 // ms
|
|
}).play(5); // small delay for performance?
|
|
style(e.node, "zIndex", _z);
|
|
}
|
|
});
|
|
|
|
new dojox.analytics.Urchin({
|
|
acct: "UA-3572741-1",
|
|
GAonLoad: function(){
|
|
this.trackPageView("/demos/mojo");
|
|
}
|
|
});
|
|
|
|
});
|
|
|
|
})();
|