Widget:RaphaelTest: Difference between revisions
No edit summary |
No edit summary |
||
| Line 5: | Line 5: | ||
} | } | ||
#holder { | #holder { | ||
height: | height: 335px; | ||
width: 100%; | width: 100%; | ||
background-color: #444; | background-color: #444; | ||
| Line 85: | Line 85: | ||
"Materials", | "Materials", | ||
"Mechanical" | "Mechanical" | ||
]; | ]; | ||
for ( var i = 0; i < categories.length + 1; i++ ) { | for ( var i = 0; i < categories.length + 1; i++ ) { | ||
Revision as of 16:48, 19 October 2016
<style media="screen"> body {
background: #333; color: #fff;
}
- holder {
height: 335px; width: 100%; background-color: #444;
}
- holder svg {
border-radius: 8px; }
</style> <script src="/skins/Booty/base/js/raphael-min.js"></script> <script>
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"
];
for ( var i = 0; i < categories.length + 1; i++ ) {
var bgr = paper.rect(0, (i * 37), w, 36).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 * 37 ) , 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 * 37, w, h - categories.length * 37).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 * 37;
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>
