Widget:RaphaelTest

From ETHW

<style media="screen"> body {

   background: #333;
   color: #fff;

}

  1. holder {
   height: 425px;
   width: 100%;
   background-color: #444;

}

  1. 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>