Widget:RaphaelTest
<style media="screen"> body {
background: #333; color: #fff;
}
- holder {
height: 425px; width: 100%; background-color: #444;
}
- holder svg {
border-radius: 8px; }
</style> <script src="w/skins/Booty/base/js/raphael-min.js"></script> <script> RLQ.push(function () {
var container = "holder";
$( window ).load(function () {
jQuery.ajax({ url: "/timeline_json.php", dataType: 'json', cache: true, success: function(jsondata) { var h = $("#"+container).height(); var w = $("#"+container).width(); Raphael(container, w, h).render(jsondata,w,h); } , error: function(xhr, status, thrownError) { alert(status); }
});
Raphael.fn.render = function (jsondata,w,h) { var movables = []; var paper = this; var leftyear = 1500; var rightyear = 2000; var leftmax = -30000; var rightmax = 2000; var maxwidth = rightyear - leftyear; var blurb_zap = []; var selected_point = null; var circ_rad = 15;
var smooth_update = function(x) {
this.obj.animate({"transform" : "T" + Math.round(x).toString() + ",0"},300,"ease-out");
};
var fast_update = function(x) { this.obj.transform("T" + Math.round(x).toString() + ",0"); };
function xSet(m) {
var sf = w / ( rightyear - leftyear ); var newpos = ( m.year_float - leftyear ) * sf; m.update(newpos);
}
function zap_all() {
var zap_length = blurb_zap.length; for (var i = 0; i < zap_length; i++) { blurb_zap[i].remove(); } var sp = selected_point; if (sp !== null) { selected_point = null; myp = sp.data('myset')[0]; myp.stop() myp.animate({"fill" : "#fff", r : circ_rad/3, opacity : 1.0}, 150, "drop"); }
} $("#"+container).click(function(e) {
if (e.target.nodeName == "svg") { // only if background clicked -- remove all info boxen zap_all(); }
});
var ypos = 20; var categories = [
"Chemical", "Civil", "Electrical", "Energy", "Materials", "Mechanical",
"Mining" ]; for ( var i = 0; i < categories.length + 1; i++ ) {
var bgr = paper.rect(0, (i * 45), w, 44).attr({"fill" : "#3" + ( 4 + i ).toString(16) + "f", "stroke-width": 0}).click(function(e) { zap_all(); });
if (i < categories.length)
var tx = paper.text(10, ypos + ( i * 45 ) , categories[i]).attr({'text-anchor' : 'start', "fill" : "#fff", "font-size" : "14", "font-family" : "Open Sans, Tahoma, Helvetica, sans-serif", "font-weight" : "bold" });
} var bgr = paper.rect(0, categories.length * 45, w, h - categories.length * 45).attr({"fill" : "#148", "stroke-width": 0}).click(function(e) { zap_all(); }); $.each(jsondata, function(ix, arr) { arr.year_float = parseInt(arr["year"]) + parseInt(arr["month"])/12; arr.ypos = arr.priority * 45; var o = paper.set();
o.push(paper.circle(0,arr.ypos,circ_rad/3).attr({"fill": "#fff", "opacity" : 1.0, "text-anchor" : "start", "stroke-width" : 0})); // set stroke-opacity to 0.5 or 1.0 to see the area recognized for clicking/touch (which is 3x the radius of the actual dot: //o.push(paper.circle(0,arr.ypos,circ_rad).attr({"fill": "#fff", "fill-opacity" : 0.0, "text-anchor" : "start", "stroke-width" : 1.0, "stroke-opacity" : 0.0, "stroke" : "#fff"})); o.data("myset",o); arr.obj = o;
o[0].mouseover(function(e) { this.data('myset')[0].animate({"fill" : "#f60"}); summary.attr('text', arr["title"]); }); o[0].mouseout(function(e) { this.data('myset')[0].animate({"fill" : "#fff"}); summary.attr('text',); }); //o[1].mouseover(function() { o[0].click(function() { if (selected_point === this) {
// duplicate event, caused by animation return; } zap_all(); selected_point = this; this.toFront(); this.data('myset')[0].animate({"fill" : "#fff", r : "25", 'stroke-opacity' : 0, opacity: 0.9}, 500, "bounce");
var obj = this;
var bb = this.getBBox(); var rx = bb.x + (bb.width/2.0); var ry = bb.y - 50; if (ry < 0) ry = 0; if (ry + 150 > h) ry = h - 150; //obj.blurb = paper.rect(this.matrix.x(this.attr("x"),this.attr("y")),this.matrix.y(this.attr("x"),this.attr("y")),100,100).attr({fill: "red" }); var ix; var iy; var iw = 300; // define initial x, y -- change it if we are too close to the right side. if (bb.x + iw > $("#"+container).width()) { ix = rx-iw; iy = ry; } else { ix = rx; iy = ry; } //obj.blurb = paper.rect(ix,iy,iw,150,5).attr({fill: "white", "stroke-width" : 0 }); obj.blurb = paper.rect(ix,iy,1,1,5).attr({fill: "white", "stroke-width" : 0, 'opacity' : 0 });
// blurb_zap is array of text rectangles and associated objects that have already been created -- and that we need to clean up before creating a new one. var st = paper.set(); st.push(obj.blurb);
obj.closecirc = paper.circle(ix + iw - 7.5, iy + 7.5, 5).attr({fill: "#888", "stroke-width" : 0 }).click(function(e) {
// close box in window
zap_all();
});
st.push(obj.closecirc);
var tx = paper.text(ix+8, iy+14).attr({'text-anchor' : 'start', "fill" : "#44f", "font-size" : "11", "font-family" : "Tahoma, Helvetica, sans-serif", "font-weight" : "bold", "opacity" : 0 }); st.push(tx); var words = arr["title"].replace(/(\r\n|\n|\r|_)/gm,"").split(" "); var tempText = ""; var max_width = iw - 64; for (var i=0; i<words.length; i++) { if (words[i].length == 0) continue; tx.attr("text", tempText + " " + words[i]); if (tx.getBBox().width > max_width) { tempText += "\n" + words[i]; tx.attr({"y": tx.attr("y") + 7}); } else { tempText += " " + words[i]; } } tx.click(function() { // When we get a click on the title text, go to the page: //window.location.replace(arr.link); window.location = arr.link; }); var tx_desc = paper.text(ix+8,iy+38).attr({'text-anchor': 'start', 'font-size' : 11, 'font-family' : "Open Sans", 'opacity' : 0}); st.push(tx_desc); var words = arr.description.replace(/(\r\n|\n|\r)/gm,"").split(" "); var tempText = ""; var max_width = iw - 16; for (var i=0; i<words.length; i++) { if (words[i].length == 0) continue; tx_desc.attr("text", tempText + " " + words[i]); if (tx_desc.getBBox().width > max_width) { tempText += "\n" + words[i]; tx_desc.attr({"y": tx_desc.attr("y") + 7}); // , 'text' : tempText.substring(1)}); // it's possible we've already overflowed the max_width by a slight amount -- // so register a new maximum, so we don't continually hit the max_width test // and only print one word per line. //max_width = tx_desc.getBBox().width; } else { tempText += " " + words[i]; //tx_desc.attr("text", tempText.substring(1)); } } obj.blurb.animate({'width' : iw, 'height' : 175, 'opacity' : 1}, 200, 'elastic'); //st.push(obj.blurb.glow({"color" : "#fb0", "width" : 20})); tx.animate({'opacity': 1.0}, 100, "ease-in"); tx_desc.attr('text', tempText.substring(1)); tx_desc.animate({'opacity': 1.0}, 200, "ease-in"); //tx_desc.attr("text", tempText.substring(1)); st.attr({ cursor: 'pointer' }); // ensure text is not selected window.getSelection().removeAllRanges(); /*st.mouseout(function() { zap_all(); });*/ blurb_zap[blurb_zap.length] = st;
}); arr.update = smooth_update; xSet(arr); movables.push(arr); }); /* text labels */ var yearcount=leftmax; var big = true; var summary = paper.text(w/2,h-65,"").attr({'fill' : "#ff0", 'font-size' : 14, 'font-family' : "Open Sans, Tahoma", "font-weight" : "bold" }); while (yearcount <= rightmax) { if (big) { var o = paper.text(0, h-90, yearcount.toString()).attr({'fill' : "#fff", 'font-size' : 14, 'font-family' : "Open Sans, Tahoma", "font-weight" : "bold" }),
big = false; } else { if ( w < 350 ) { yearcount = yearcount + 25; continue; } var o = paper.text(0, h-90, yearcount.toString()).attr({'fill' : "#fff", 'font-size' : 10, 'font-family' : "Open Sans, Tahoma" }); big = true;
} var myobj = { year_float: yearcount, ypos : h - 100,
obj: o,
}; myobj.update = fast_update; xSet(myobj); movables.push(myobj); yearcount = yearcount + 25; } var button_light = function() { var enabled = "#fff";
var disabled = "#48f"; if (rightyear - leftyear < 100) { zi_set.attr({"fill" : disabled}); zi_set.animateme = false; } else { zi_set.attr({"fill" : enabled}); zi_set.animateme = true; }
if (rightyear - leftyear >= maxwidth) {
zo_set.attr({"fill" : disabled}); zo_set.animateme = false; } else { zo_set.attr({"fill" : enabled}); zo_set.animateme = true; }
var delta = (rightyear - leftyear) * 0.15; if ((rightyear + delta) > rightmax) {
fwd_set.attr({"fill" : disabled}); fwd_set.animateme = false; } else { fwd_set.attr({"fill" : enabled}); fwd_set.animateme = true; }
if ((leftyear - delta) < leftmax) {
back_set.attr({"fill" : disabled}); back_set.animateme = false; } else { back_set.attr({"fill" : enabled}); back_set.animateme = true; }
} var attach_events = function(p) { p.mouseover(function() {
p.stop().animate({transform : "t" + p.xpos.toString() + "," + p.ypos.toString() + "s1.3"}, 150, "elastic");
}); p.mouseout(function() {
p.stop().animate({transform : "t" + p.xpos.toString() + "," + p.ypos.toString() + "s1.0"}, 250, "ease-out");
}); }; var zi_set = this.set(); zi_set.xpos = w/2 - 90; zi_set.ypos = h-40; zi_set.push(this.circle(16,16,20).attr({"fill" : "#fff", "opacity" : 0})); zi_set.push(this.path("M22.646,19.307c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127l3.535-3.537L22.646,19.307zM13.688,20.369c-3.582-0.008-6.478-2.904-6.484-6.484c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486C20.165,17.465,17.267,20.361,13.688,20.369zM15.687,9.051h-4v2.833H8.854v4.001h2.833v2.833h4v-2.834h2.832v-3.999h-2.833V9.051z").attr({"fill":"fff","stroke" : "none" }).translate(-16,-16)); zi_set.click(function() { zap_all(); if (rightyear - leftyear < 100) return; var newdelta = (rightyear - leftyear) * 0.25; leftyear = leftyear + newdelta; rightyear = rightyear - newdelta; $.each(movables,function(ix,m) { xSet(m); });
button_light();
}); zi_set.transform("t"+zi_set.xpos.toString()+","+zi_set.ypos.toString()); attach_events(zi_set);
var zo_set = this.set(); zo_set.xpos = w/2 - 30; zo_set.ypos = h-40; zo_set.push(this.circle(16,16,20).attr({"fill" : "#fff", "opacity" : 0})); zo_set.push(this.path("M22.646,19.307c0.96-1.583,1.523-3.435,1.524-5.421C24.169,8.093,19.478,3.401,13.688,3.399C7.897,3.401,3.204,8.093,3.204,13.885c0,5.789,4.693,10.481,10.484,10.481c1.987,0,3.839-0.563,5.422-1.523l7.128,7.127l3.535-3.537L22.646,19.307zM13.688,20.369c-3.582-0.008-6.478-2.904-6.484-6.484c0.006-3.582,2.903-6.478,6.484-6.486c3.579,0.008,6.478,2.904,6.484,6.486C20.165,17.465,17.267,20.361,13.688,20.369zM8.854,11.884v4.001l9.665-0.001v-3.999L8.854,11.884z").attr({"fill":"fff","stroke" : "none" }).translate(-16,-16)); zo_set.click(function() { zap_all();
if (rightyear - leftyear >= maxwidth)
return; var newdelta = (rightyear - leftyear) * 0.25; leftyear = leftyear - newdelta; rightyear = rightyear + newdelta; $.each(movables,function(ix,m) { xSet(m);
}); button_light();
}); zo_set.transform("t"+zo_set.xpos.toString()+","+zo_set.ypos.toString()); attach_events(zo_set);
var back_set = this.set(); back_set.xpos = w/2 + 30; back_set.ypos = h-40; back_set.push(this.circle(16,16,20).attr({"fill" : "#00f", "opacity" : 0})); back_set.push(this.path("M16,30.534c8.027,0,14.534-6.507,14.534-14.534c0-8.027-6.507-14.534-14.534-14.534C7.973,1.466,1.466,7.973,1.466,16C1.466,24.027,7.973,30.534,16,30.534zM18.335,6.276l3.536,3.538l-6.187,6.187l6.187,6.187l-3.536,3.537l-9.723-9.724L18.335,6.276z").attr({"fill":"fff","stroke" : "none" }).translate(-16,-16)); back_set.click(function() { zap_all(); var delta = (rightyear - leftyear) * 0.15; if ((leftyear - delta) < leftmax) return; leftyear -= delta; rightyear -=delta; $.each(movables,function(ix,m) { xSet(m); });
button_light();
}); back_set.transform("t"+back_set.xpos.toString()+","+back_set.ypos.toString()); attach_events(back_set);
var fwd_set = this.set(); fwd_set.xpos = w/2 + 90; fwd_set.ypos = h-40; fwd_set.push(this.circle(16,16,20).attr({"fill" : "#00f", "opacity" : 0})); fwd_set.push(this.path("M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466zM13.665,25.725l-3.536-3.539l6.187-6.187l-6.187-6.187l3.536-3.536l9.724,9.723L13.665,25.725z").attr({"fill":"fff","stroke" : "none" }).translate(-16,-16)); fwd_set.click(function() { zap_all(); var delta = (rightyear - leftyear) * 0.15; if ((rightyear + delta) > rightmax) return; leftyear += delta; rightyear +=delta; $.each(movables,function(ix,m) { xSet(m); });
button_light();
}); fwd_set.transform("t"+fwd_set.xpos.toString()+","+fwd_set.ypos.toString()); attach_events(fwd_set); // initial button enable/disable button_light();
}; }); }); </script>