cacert-testmgr/external/ZendFramework-1.9.5/externals/dojo/demos/skew/src.js
Markus Warg 8398c9048d initially import ZendFramework-1.9.5 into repository
code was modified slightly, so the code differs from the original downloadable 1.9.5 version
2010-03-31 10:12:32 +02:00

287 lines
8.2 KiB
JavaScript

dojo.provide("demos.skew.src");
dojo.require("demos.skew.src.Image");
dojo.require("dojo.NodeList-fx");
dojo.require("dojo.fx.easing");
dojo.require("dojox.widget.Dialog");
dojo.require("dojox.layout.RadioGroup");
dojo.require("dojox.analytics.Urchin");
(function($){
var _stuffMoving = false,
_started = false,
_stalltime = 650, // ms
_doneAnim = null,
_needed = null,
_loaded = [],
_connects = [],
profileWidget = null,
stack = null,
timer = null,
_profiletimer = null
;
var _doneAnim = function(){
$.fadeOut({
// fade out the overlay
node: "overlay",
duration: 300,
onEnd: function(){
// then make our image surface 240px, and fade it in
$.animateProperty({
node:"imageContainer",
properties: {
height: 240,
opacity:1
},
// with teh sexy
easing: $.fx.easing.backOut,
duration:420,
// wait for the fadeout above to finish
delay:600,
onEnd: function(){
// hide the actual overlay so you can click underneath it
$.style("overlay","display","none");
_started = true;
// take all the elements with "startsHidden" class, and
// set them up, fade them in, and remove hidden class
$.query(".startsHidden")
.style("opacity", "0")
.removeClass("startsHidden")
.fadeIn().play(500);
}
}).play();
}
}).play();
};
// onShow result, it no timer was running (see later)
var updateProfile = function(datawidget){
//if(!_started){ return; }
_stuffMoving = true;
// conveniently, later, we stored a reference to our avatar (RadioGroupSlide child)
// in the Image widget.
stack.selectChild(datawidget._avatar);
profileWidget.setData(datawidget._userInfo);
}
var _oneBroke = function(n,e){
_gotOne(n,e);
}
// the handler for our image onloader.
// FIXME: if we get a 404, we'll never finish ...
var _gotOne = function(n,e){
_loaded.push(n);
if(_loaded.length >= $._neededImages){
$.forEach(_connects, $.disconnect);
_doneAnim();
}
}
// the onLoad function
var init = function(){
// tracking demo:
var u = new dojox.analytics.Urchin({
acct: "UA-3572741-1",
GAonLoad: function(){
this.trackPageView("/demos/skew");
}
});
$.style("whoNode","opacity", 0);
// see, the page "degrades" ;) . This contributor listing page is only a link to
// http://dojo.jot.com/ContrbutorListing
$.query("a[href^=http://dojo.jot]").forEach(function(n){
n.parentNode.innerHTML = n.innerHTML;
});
// create a "help" dialog out of the node in the page.
var dialog = new dojox.widget.Dialog({
dimensions:[640,420]
},"dialog");
dialog.startup();
// setup a way to show it
$.connect($.byId("helper"), "onclick", dialog, "show");
// set it all off: grab some data from a remote file, and create
// the interface
$.xhrGet({
url:"../resources/users.json",
handleAs:"json",
load:function(data){
var labelNode = $.byId("whoNode");
var _lastNode = null;
profileWidget = new profile.Data({},"profileData");
// create the region where the avatars will live.
stack = new dojox.layout.RadioGroupSlide({
style:"width:180px; height:200px",
// FIXME: when did StackContainer start setting relative explicitly?
_setupChild: function(/*Widget*/ page){
$.style(page.domNode,{
display:"none",
position:"absolute",
overflow:"hidden"
})
return page; // dijit._Widget
}
},"stack");
// iterate over each of the returned committers, setting up the canvas
$.forEach(data.committers,function(user, i){
// create an Image in the container, and store the user profile data
// in it's instance.
var im = new image.Skewed({
// use a default square.png if no imgUrl found.
imgUrl: user.imgUrl || "images/square.png",
value: user.name
});
$.mixin(im,{ _userInfo: user });
// create a reflection-less scale thumbnail (color) in a div
var node = $.doc.createElement('div');
stack.containerNode.appendChild(node);
node.innerHTML = "<img src='imageReflect.php?spread=0.01&thumbsize=165&src=" + im.imgUrl + "' />";
// and make it a child of our RadioGroupSlide
var avatar = new dijit.layout.ContentPane({
id: im.id + "avatar",
slideFrom:"top"
}, node);
// mix a reference to the child of the stackContianer in the image widget
$.mixin(im, { _avatar: avatar });
// store a ref to our "center" image
if(i === 0){ _lastNode = im; }
// either add this image to the beginning or append to the end. alternate.
if(i % 2 == 0){
$.byId("imageContainer").appendChild(im.domNode);
}else{
$.place(im.domNode, "imageContainer", "first");
}
});
// this will setup all the children we _just_ added
stack.startup();
// turn the container holding all the image widgets into the interface
var ic = new image.Container({
// for performance (it's a big list/lot of images)
offOpacity:1,
onShow: function(widget){
// onShow fires _every_ time an image is "centered" visually (no skew)
// so for UX, we'll defer the "updateProfile()" call until some delay,
if(timer){ clearTimeout(timer); }
timer = setTimeout($.partial(updateProfile, widget), _stalltime);
// but still update one label from our widget data
labelNode.innerHTML = widget.value + "";
$.anim("profileArea",{ opacity:0 }, 175);
},
// should be lower, but i want to stage opacity on the edges rather
// than display:none, so for now this looks better.
visibleItems: 42,
// tweak as needed
spacing:25,
angle:10
},"imageContainer");
// find every image in this container, and connect an onload connect to it
// when each image fires it's onload, the _gotOne function above is alerted
var _needed = $.query("img", "imageContainer");
$._neededImages = Number(_needed.length);
_needed.forEach(function(n,i){
_connects.push($.connect(n, "onload", $.partial(_gotOne, n)));
_connects.push($.connect(n, "onerror", $.partial(_oneBroke, n)));
// if you don't touch the .src attribute _after_ connecting to onload, it
// won't fire in weird conditions.
if($.isIE){ n.src = n.src; }
});
ic.startup();
_lastNode.center(); // center the first node (from above creating image widgets)
// resize the image container when the window does, it's fluid
$.connect(window, "onresize", ic, "resize");
// make it small, so we can wipe it in
$.style("imageContainer",{ height:"1px", opacity:0 });
}
})
};
$.declare("profile.Stalker", dijit._Widget, {
});
$.declare("profile.Data", dijit._Widget, {
// summary: A simple widget we probably don't even need.
constructor: function(){
var $$ = $.byId;
this.nodeReferences = {
"location" : $$("proLocation"),
"website" : $$("proWebsite"),
"employer" : $$("proEmployer"),
"title" : $$("proRole")
}
},
setData: function(data){
var node = this.nodeReferences;
for(var i in node){
if(i in data){
$.style(node[i],"display","");
var txt = (
i == "website" ?
"<a href='" + data[i] + "'>" + data[i] + "</a><br>" :
data[i]
);
node[i].innerHTML = txt;
}else{
$.style(node[i],"display","none");
}
}
// this is really a list of potential aliases, so start clean:
var nick = "";
if("handle" in data){
// add the "handle" attribute
nick += '"' + data["handle"] + '"';
}
if("irc" in data && data["irc"] !== data["handle"]){
// add the "irc" attribute, if it is different from the "handle" attribute
nick += ' "' + data["irc"] + '"';
}
$.byId("proAliases").innerHTML = nick;
// fade and swipe in the content.
// FIXME: weirdness w/ IE7 and no respecting -42 marginLegf
$.anim("profileArea",{
opacity:{ start:0, end: 0.99 },
paddingLeft:{ start:72, end:0 }
}, 520, $.fx.easing.bounceOut);
}
});
var newp = function(){
// IE6 branch of this demo
window.location.href = "http://" + (confirm("Hi IE6 user! Is it 2008?") ? "webkit.org" : "mozilla.org") + "/";
}
// setup our branch launch: ;)
$.addOnLoad(($.isIE < 7 ? newp : init));
})(dojo);