Team:Evry/main-img.js

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
(function($){
(function($){
 +
var Renderer = function(elt){
 +
  var dom = $(elt)
 +
  var canvas = dom.get(0)
 +
  var ctx = canvas.getContext("2d");
 +
  var gfx = arbor.Graphics(canvas)
 +
  var sys = null
 +
  var _vignette = null
 +
  var selected = null,
 +
      nearest = null,
 +
      _mouseP = null;
-
  var Renderer = function(elt){
+
  var that = {
-
    var dom = $(elt)
+
    init:function(pSystem){
-
    var canvas = dom.get(0)
+
      sys = pSystem
-
    var ctx = canvas.getContext("2d");
+
      sys.screen({size:{width:dom.width(), height:dom.height()},
-
    var gfx = arbor.Graphics(canvas)
+
                  padding:[36,60,36,60]})
-
    var sys = null
+
      $(window).resize(that.resize)
-
 
+
      that.resize()
-
    var _vignette = null
+
      that._initMouseHandling()
-
    var selected = null,
+
      if (document.referrer.match(/Goldenbricks|Plasmids|AIDSystem/)){
-
        nearest = null,
+
        // if we got here by hitting the back button in one of the Benchwork,  
-
        _mouseP = null;
+
        // start with the Benchwork section pre-selected
-
 
+
        that.switchSection('Benchwork')
-
   
+
      }
-
    var that = {
+
    },
-
      init:function(pSystem){
+
    resize:function(){
-
        sys = pSystem
+
      //canvas.width = $(window).width()
-
        sys.screen({size:{width:dom.width(), height:dom.height()},
+
      //canvas.height = .75* $(window).height()
-
                    padding:[36,60,36,60]})
+
      sys.screen({size:{width:canvas.width, height:canvas.height}})
-
 
+
      _vignette = null
-
        $(window).resize(that.resize)
+
      that.redraw()
-
        that.resize()
+
    },
-
        that._initMouseHandling()
+
    redraw:function(){
-
 
+
      gfx.clear()
-
        if (document.referrer.match(/Goldenbricks|Plasmids|AIDSystem/)){
+
      sys.eachEdge(function(edge, p1, p2){
-
          // if we got here by hitting the back button in one of the Benchwork,  
+
        if (edge.source.data.alpha * edge.target.data.alpha == 0) return
-
          // start with the Benchwork section pre-selected
+
        gfx.line(p1, p2, {stroke:"#b2b19d", width:3, alpha:edge.target.data.alpha})
-
          that.switchSection('Benchwork')
+
      })
-
        }
+
      sys.eachNode(function(node, pt){
-
      },
+
        var w = Math.max(20, 20+gfx.textWidth(node.name) )
-
      resize:function(){
+
        if (node.data.alpha===0) return
-
        //canvas.width = $(window).width()
+
        if (node.data.shape=='dot'){
-
        //canvas.height = .75* $(window).height()
+
          gfx.oval(pt.x-w/2, pt.y-w/2, w, w, {fill:node.data.color, alpha:node.data.alpha})
-
        sys.screen({size:{width:canvas.width, height:canvas.height}})
+
          gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
-
        _vignette = null
+
        }
-
        that.redraw()
+
-
      },
+
-
      redraw:function(){
+
-
        gfx.clear()
+
-
        sys.eachEdge(function(edge, p1, p2){
+
-
          if (edge.source.data.alpha * edge.target.data.alpha == 0) return
+
-
          gfx.line(p1, p2, {stroke:"#b2b19d", width:3, alpha:edge.target.data.alpha})
+
-
        })
+
-
        sys.eachNode(function(node, pt){
+
-
          var w = Math.max(20, 20+gfx.textWidth(node.name) )
+
-
          if (node.data.alpha===0) return
+
-
          if (node.data.shape=='dot'){
+
-
            gfx.oval(pt.x-w/2, pt.y-w/2, w, w, {fill:node.data.color, alpha:0})
+
-
            gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
+
-
            gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
+
-
          }
+
-
 
+
/* Begin */
/* Begin */
-
          else if (node.data.shape=='img'){
+
        else if (node.data.shape=='img'){
-
var img_elem = new Image();
+
var img_elem = new Image(); img_elem.src = node.data.url; ctx.drawImage(img_elem, pt.x-w/2, pt.y-w/2, w, w); // Redimensionnement de l'image prévue comme tu le souhaitais !
-
img_elem.src = node.data.url;
+
              gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
-
ctx.drawImage(img_elem, pt.x-w/2, pt.y-w/2, w, w); // Redimensionnement de l'image
+
              gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
-
                gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
+
        }
-
                gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
+
-
          }
+
-
 
+
/*Thibault END*/
/*Thibault END*/
 +
        else{
 +
          gfx.rect(pt.x-w/2, pt.y-8, w, 20, 4, {fill:node.data.color, alpha:node.data.alpha})
 +
          gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
 +
          gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
 +
        }
 +
      })
 +
      that._drawVignette()
 +
    },
 +
   
 +
    _drawVignette:function(){
 +
      var w = canvas.width
 +
      var h = canvas.height
 +
      var r = 20
 +
      if (!_vignette){
 +
        var top = ctx.createLinearGradient(0,0,0,r)
 +
        top.addColorStop(0, "#e0e0e0")
 +
        top.addColorStop(.7, "rgba(255,255,255,0)")
 +
        var bot = ctx.createLinearGradient(0,h-r,0,h)
 +
        bot.addColorStop(0, "rgba(255,255,255,0)")
 +
        bot.addColorStop(1, "white")
 +
        _vignette = {bot:bot}
 +
      }
 +
     
 +
      // top
 +
      ctx.fillStyle = _vignette.top
 +
      ctx.fillRect(0,0, w,r)
 +
      // bot
 +
      ctx.fillStyle = _vignette.bot
 +
      ctx.fillRect(0,h-r, w,r)
 +
    },
 +
    switchMode:function(e){
 +
      if (e.mode=='hidden'){
 +
        dom.stop(true).fadeTo(e.dt,0, function(){
 +
          if (sys) sys.stop()
 +
          $(this).hide()
 +
        })
 +
      }else if (e.mode=='visible'){
 +
        dom.stop(true).css('opacity',0).show().fadeTo(e.dt,1,function(){
 +
          that.resize()
 +
        })
 +
        if (sys) sys.start()
 +
      }
 +
    },
 +
   
 +
    switchSection:function(newSection){
 +
      var parent = sys.getEdgesFrom(newSection)[0].source
 +
      var children = $.map(sys.getEdgesFrom(newSection), function(edge){
 +
        return edge.target
 +
      })
 +
     
 +
      sys.eachNode(function(node){
 +
        if (node.data.shape=='dot') return // skip all but leafnodes
 +
        if (node.data.shape=='img') return // skip all but leafnodes
 +
        var nowVisible = ($.inArray(node, children)>=0)
 +
        var newAlpha = (nowVisible) ? 1 : 0
 +
        var dt = (nowVisible) ? .5 : .5
 +
        sys.tweenNode(node, dt, {alpha:newAlpha})
 +
        if (newAlpha==1){
 +
          node.p.x = parent.p.x + .05*Math.random() - .025
 +
          node.p.y = parent.p.y + .05*Math.random() - .025
 +
          node.tempMass = .001
 +
        }
 +
      })
 +
    },
 +
   
 +
   
 +
    _initMouseHandling:function(){
 +
      // no-nonsense drag and drop (thanks springy.js)
 +
      selected = null;
 +
      nearest = null;
 +
      var dragged = null;
 +
      var oldmass = 1
 +
      var _section = null
 +
      var handler = {
 +
        moved:function(e){
 +
          var pos = $(canvas).offset();
 +
          _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
 +
          nearest = sys.nearest(_mouseP);
 +
          if (!nearest.node) return false
 +
// if (nearest.node.data.shape!='dot'){
 +
            selected = (nearest.distance < 50) ? nearest : null
 +
            if (selected){
 +
                dom.addClass('linkable')
 +
                window.status = selected.node.data.link//.replace(/^\//,"http://"+window.location.host+"/")//.replace(/^#/,)
 +
            }
 +
            else{
 +
                dom.removeClass('linkable')
 +
                window.status =
 +
            }
 +
// }else
 +
          if ($.inArray(nearest.node.name, ['French Froggies','Human Practice','Modeling','Benchwork']) >=0 ){
 +
            if (nearest.node.name!=_section){
 +
              _section = nearest.node.name
 +
              that.switchSection(_section)
 +
            }
 +
            dom.removeClass('linkable')
 +
            window.status =
 +
          }
 +
         
 +
          return false
 +
        },
 +
        clicked:function(e){
 +
          var pos = $(canvas).offset();
 +
          _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
 +
          nearest = dragged = sys.nearest(_mouseP);
 +
         
 +
          if (nearest && selected && nearest.node===selected.node){
 +
            var link = selected.node.data.link
 +
            if (link.match(/^#/)){
 +
                $(that).trigger({type:"navigate", path:link.substr(1)})
 +
            }else{
 +
                window.location = link
 +
            }
 +
            return false
 +
          }
 +
         
 +
         
 +
          if (dragged && dragged.node !== null) dragged.node.fixed = true
 +
          $(canvas).unbind('mousemove', handler.moved);
 +
          $(canvas).bind('mousemove', handler.dragged)
 +
          $(window).bind('mouseup', handler.dropped)
 +
          return false
 +
        },
 +
        dragged:function(e){
 +
          var old_nearest = nearest && nearest.node._id
 +
          var pos = $(canvas).offset();
 +
          var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
 +
          if (!nearest) return
 +
          if (dragged !== null && dragged.node !== null){
 +
            var p = sys.fromScreen(s)
 +
            dragged.node.p = p
 +
          }
 +
          return false
 +
        },
 +
        dropped:function(e){
 +
          if (dragged===null || dragged.node===undefined) return
 +
          if (dragged.node !== null) dragged.node.fixed = false
 +
          dragged.node.tempMass = 1000
 +
          dragged = null;
 +
          // selected = null
 +
          $(canvas).unbind('mousemove', handler.dragged)
 +
          $(window).unbind('mouseup', handler.dropped)
 +
          $(canvas).bind('mousemove', handler.moved);
 +
          _mouseP = null
 +
          return false
 +
        }
-
          else{
+
      }
-
            gfx.rect(pt.x-w/2, pt.y-8, w, 20, 4, {fill:node.data.color, alpha:node.data.alpha})
+
      $(canvas).mousedown(handler.clicked);
-
            gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
+
      $(canvas).mousemove(handler.moved);
-
            gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
+
    }
-
          }
+
  }
-
        })
+
 
-
        that._drawVignette()
+
  return that
-
      },
+
}
-
     
+
-
      _drawVignette:function(){
+
-
        var w = canvas.width
+
var Nav = function(elt){
-
        var h = canvas.height
+
  var dom = $(elt)
-
        var r = 20
+
  var _path = null
-
 
+
 
-
        if (!_vignette){
+
  var that = {
-
          var top = ctx.createLinearGradient(0,0,0,r)
+
    init:function(){
-
          top.addColorStop(0, "#e0e0e0")
+
      $(window).bind('popstate',that.navigate)
-
          top.addColorStop(.7, "rgba(255,255,255,0)")
+
      dom.find('> a').click(that.back)
-
 
+
      $('.more').one('click',that.more)
-
          var bot = ctx.createLinearGradient(0,h-r,0,h)
+
-
          bot.addColorStop(0, "rgba(255,255,255,0)")
+
-
          bot.addColorStop(1, "white")
+
-
 
+
-
          _vignette = {bot:bot}
+
-
        }
+
-
       
+
-
        // top
+
-
        ctx.fillStyle = _vignette.top
+
-
        ctx.fillRect(0,0, w,r)
+
-
 
+
-
        // bot
+
-
        ctx.fillStyle = _vignette.bot
+
-
        ctx.fillRect(0,h-r, w,r)
+
-
      },
+
-
 
+
-
      switchMode:function(e){
+
-
        if (e.mode=='hidden'){
+
-
          dom.stop(true).fadeTo(e.dt,0, function(){
+
-
            if (sys) sys.stop()
+
-
            $(this).hide()
+
-
          })
+
-
        }else if (e.mode=='visible'){
+
-
          dom.stop(true).css('opacity',0).show().fadeTo(e.dt,1,function(){
+
-
            that.resize()
+
-
          })
+
-
          if (sys) sys.start()
+
-
        }
+
-
      },
+
-
     
+
-
      switchSection:function(newSection){
+
-
        var parent = sys.getEdgesFrom(newSection)[0].source
+
-
        var children = $.map(sys.getEdgesFrom(newSection), function(edge){
+
-
          return edge.target
+
-
        })
+
-
       
+
-
        sys.eachNode(function(node){
+
-
          if (node.data.shape=='dot') return // skip all but leafnodes
+
-
          if (node.data.shape=='img') return // skip all but leafnodes
+
-
          var nowVisible = ($.inArray(node, children)>=0)
+
-
          var newAlpha = (nowVisible) ? 1 : 0
+
-
          var dt = (nowVisible) ? .5 : .5
+
-
          sys.tweenNode(node, dt, {alpha:newAlpha})
+
-
 
+
-
          if (newAlpha==1){
+
-
            node.p.x = parent.p.x + .05*Math.random() - .025
+
-
            node.p.y = parent.p.y + .05*Math.random() - .025
+
-
            node.tempMass = .001
+
-
          }
+
-
        })
+
-
      },
+
-
     
+
-
     
+
-
      _initMouseHandling:function(){
+
-
        // no-nonsense drag and drop (thanks springy.js)
+
-
        selected = null;
+
-
        nearest = null;
+
-
        var dragged = null;
+
-
        var oldmass = 1
+
-
 
+
-
        var _section = null
+
-
 
+
-
        var handler = {
+
-
          moved:function(e){
+
-
            var pos = $(canvas).offset();
+
-
            _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
+
-
            nearest = sys.nearest(_mouseP);
+
-
 
+
-
            if (!nearest.node) return false
+
-
 
+
-
//            if (nearest.node.data.shape!='dot'){
+
-
              selected = (nearest.distance < 50) ? nearest : null
+
-
              if (selected){
+
-
                dom.addClass('linkable')
+
-
                window.status = selected.node.data.link//.replace(/^\//,"http://"+window.location.host+"/")//.replace(/^#/,'')
+
-
              }
+
-
              else{
+
-
                dom.removeClass('linkable')
+
-
                window.status = ''
+
-
              }
+
-
//            }else
+
-
            if ($.inArray(nearest.node.name, ['The French Froggies!','Xenopus chassis', 'Hormonal communication', 'Modeling', 'GoldenBricks', 'Human Practice', 'The Team']) >=0 ){
+
-
              if (nearest.node.name!=_section){
+
-
                _section = nearest.node.name
+
-
                that.switchSection(_section)
+
-
              }
+
-
              dom.removeClass('linkable')
+
-
              window.status = ''
+
-
            }
+
-
           
+
-
            return false
+
-
          },
+
-
          clicked:function(e){
+
-
            var pos = $(canvas).offset();
+
-
            _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
+
-
            nearest = dragged = sys.nearest(_mouseP);
+
-
           
+
-
            if (nearest && selected && nearest.node===selected.node){
+
-
              var link = selected.node.data.link
+
-
              if (link.match(/^#/)){
+
-
                $(that).trigger({type:"navigate", path:link.substr(1)})
+
-
              }else{
+
-
                window.location = link
+
-
              }
+
-
              return false
+
-
            }
+
-
           
+
-
           
+
-
            if (dragged && dragged.node !== null) dragged.node.fixed = true
+
-
 
+
-
            $(canvas).unbind('mousemove', handler.moved);
+
-
            $(canvas).bind('mousemove', handler.dragged)
+
-
            $(window).bind('mouseup', handler.dropped)
+
-
 
+
-
            return false
+
-
          },
+
-
          dragged:function(e){
+
-
            var old_nearest = nearest && nearest.node._id
+
-
            var pos = $(canvas).offset();
+
-
            var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
+
-
 
+
-
            if (!nearest) return
+
-
            if (dragged !== null && dragged.node !== null){
+
-
              var p = sys.fromScreen(s)
+
-
              dragged.node.p = p
+
-
            }
+
-
 
+
-
            return false
+
-
          },
+
-
 
+
-
          dropped:function(e){
+
-
            if (dragged===null || dragged.node===undefined) return
+
-
            if (dragged.node !== null) dragged.node.fixed = false
+
-
            dragged.node.tempMass = 1000
+
-
            dragged = null;
+
-
            // selected = null
+
-
            $(canvas).unbind('mousemove', handler.dragged)
+
-
            $(window).unbind('mouseup', handler.dropped)
+
-
            $(canvas).bind('mousemove', handler.moved);
+
-
            _mouseP = null
+
-
            return false
+
-
          }
+
-
 
+
-
 
+
-
        }
+
-
 
+
-
        $(canvas).mousedown(handler.clicked);
+
-
        $(canvas).mousemove(handler.moved);
+
-
 
+
-
      }
+
-
    }
+
-
   
+
-
    return that
+
-
  }
+
-
 
+
-
 
+
-
  var Nav = function(elt){
+
-
    var dom = $(elt)
+
-
 
+
-
    var _path = null
+
-
   
+
-
    var that = {
+
-
      init:function(){
+
-
        $(window).bind('popstate',that.navigate)
+
-
        dom.find('> a').click(that.back)
+
-
        $('.more').one('click',that.more)
+
-
       
+
-
        $('#Model dl:not(.datastructure) dt').click(that.reveal)
+
-
        that.update()
+
-
        return that
+
-
      },
+
-
      more:function(e){
+
-
        $(this).removeAttr('href').addClass('less').html('&nbsp;').siblings().fadeIn()
+
-
        $(this).next('h2').find('a').one('click', that.less)
+
-
       
+
-
        return false
+
-
      },
+
-
      less:function(e){
+
-
        var more = $(this).closest('h2').prev('a')
+
-
        $(this).closest('h2').prev('a')
+
-
        .nextAll().fadeOut(function(){
+
-
          $(more).text('creation & use').removeClass('less').attr('href','#')
+
-
        })
+
-
        $(this).closest('h2').prev('a').one('click',that.more)
+
-
       
+
-
        return false
+
-
      },
+
-
      reveal:function(e){
+
-
        $(this).next('dd').fadeToggle('fast')
+
-
        return false
+
-
      },
+
-
      back:function(){
+
-
        _path = "/"
+
-
        if (window.history && window.history.pushState){
+
-
          window.history.pushState({path:_path}, "", _path);
+
-
        }
+
-
        that.update()
+
-
        return false
+
-
      },
+
-
      navigate:function(e){
+
-
        var oldpath = _path
+
-
        if (e.type=='navigate'){
+
-
          _path = e.path
+
-
          if (window.history && window.history.pushState){
+
-
            window.history.pushState({path:_path}, "", _path);
+
-
          }else{
+
-
            that.update()
+
-
          }
+
-
        }else if (e.type=='popstate'){
+
-
          var state = e.originalEvent.state || {}
+
-
          _path = state.path || window.location.pathname.replace(/^\//,'')
+
-
        }
+
-
        if (_path != oldpath) that.update()
+
-
      },
+
-
      update:function(){
+
-
        var dt = 'slow'
+
-
        if (_path===null){
+
-
          // this is the original page load. don't animate anything just jump
+
-
          // to the proper state
+
-
          _path = window.location.pathname.replace(/^\//,'')
+
-
          dt = 0
+
-
          dom.find('p').css('opacity',0).show().fadeTo('slow',1)
+
-
        }
+
-
 
+
-
        switch (_path){
+
-
          case '':
+
-
          case '/':
+
-
//          dom.find('p').text('a graph visualization library using web workers and jQuery')
+
-
          dom.find('> a').removeClass('active').attr('href','#')
+
-
 
+
-
          $('#Model').fadeTo('fast',0, function(){
+
-
            $(this).hide()
+
-
            $(that).trigger({type:'mode', mode:'visible', dt:dt})
+
-
          })
+
-
          document.title = "The French Froggies Project!"
+
-
          break
+
-
         
+
-
        }
+
-
       
+
-
      }
+
-
    }
+
-
    return that
+
-
  }
+
-
 
+
-
  $(document).ready(function(){
+
-
    var CLR = {
+
-
      branch:"#b2b19d",
+
-
      level3benchwork:"#FFBF3E",
+
-
      level3model:"#4B86C7"
+
-
    }
+
-
/*Menu BEGIN*/
+
-
    var theUI = {
+
-
 
+
-
      nodes:{"The French Froggies!":{color:"#51C215", shape:"img", alpha:1, link:'Project', url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
+
-
 
+
-
            "Xenopus chassis":{color:"#FF963E", shape:"img", alpha:1, url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'},  //Attribut url pour l'image ajouté /*Thibault*/
+
-
                "A":{color:CLR.level3benchwork, alpha:0, link:''},
+
-
                "B":{color:CLR.level3benchwork, alpha:0, link:''},
+
-
                "C":{color:CLR.level3benchwork, alpha:0, link:''},
+
-
 
+
-
            "Hormonal communication":{color:"#1A5291", shape:"img", alpha:1, link:'', url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'},  //Attribut url pour l'image ajouté /*Thibault*/
+
-
                "D":{color:CLR.level3model, alpha:0, link:''},
+
-
                "E":{color:CLR.level3model, alpha:0, link:''},
+
-
                "F":{color:CLR.level3model, alpha:0, link:''},
+
-
                "G":{color:CLR.level3model, alpha:0, link:''},
+
-
 
+
-
            "Modeling":{color:"#1A5291", shape:"img", alpha:1, link:'Modeling', url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'},  //Attribut url pour l'image ajouté /*Thibault*/
+
-
                "H":{color:CLR.level3model, alpha:0, link:''},
+
-
                "I":{color:CLR.level3model, alpha:0, link:''},
+
-
                "J":{color:CLR.level3model, alpha:0, link:''},
+
-
                "K":{color:CLR.level3model, alpha:0, link:''},
+
-
 
+
-
            "GoldenBricks":{color:"#1A5291", shape:"img", alpha:1, link:'GB', url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'},  //Attribut url pour l'image ajouté /*Thibault*/
+
-
 
+
-
            "Human Practice":{color:"#1A5291", shape:"img", alpha:1, link:'HumanPractice', url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'},  //Attribut url pour l'image ajouté /*Thibault*/
+
-
                "L":{color:CLR.level3model, alpha:0, link:''},
+
-
                "M":{color:CLR.level3model, alpha:0, link:''},
+
-
                "N":{color:CLR.level3model, alpha:0, link:''},
+
-
                "O":{color:CLR.level3model, alpha:0, link:''},
+
-
 
+
-
            "The Team":{color:"#1A5291", shape:"img", alpha:1, link:'Team', url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'},  //Attribut url pour l'image ajouté /*Thibault*/
+
-
                "P":{color:CLR.level3model, alpha:0, link:''},
+
-
                "Q":{color:CLR.level3model, alpha:0, link:''},
+
-
                "R":{color:CLR.level3model, alpha:0, link:''},
+
-
                "S":{color:CLR.level3model, alpha:0, link:''},
+
-
 
+
-
            },
+
-
      edges:{
+
-
 
+
        
        
-
        "The French Froggies!":{
+
      $('#Model dl:not(.datastructure) dt').click(that.reveal)
-
            "Xenopus chassis":{"length":0.5,"weight":1},
+
      that.update()
-
            "Hormonal communication":{"length":0.5,"weight":2},
+
      return that
-
             "Modeling":{"length":0.5,"weight":3}
+
    },
-
            "GoldenBricks":{"length":0.5,"weight":4}
+
    more:function(e){
-
            "Human Practice":{"length":0.5,"weight":5}
+
      $(this).removeAttr('href').addClass('less').html(' ').siblings().fadeIn()
-
             "The Team":{"length":0.5,"weight":6}
+
      $(this).next('h2').find('a').one('click', that.less)
-
 
+
     
-
      },
+
      return false
-
        "Xenopus chassis":{
+
    },
-
             "A":{"length":0.5,"weight":2},
+
    less:function(e){
-
             "B":{"length":0.5,"weight":2},
+
      var more = $(this).closest('h2').prev('a')
-
             "C":{"length":0.5,"weight":2}
+
      $(this).closest('h2').prev('a')
-
          },
+
      .nextAll().fadeOut(function(){
-
        "Hormonal communication":{
+
        $(more).text('creation & use').removeClass('less').attr('href','#')
-
             "D":{"length":0.5,"weight":2},
+
      })
-
             "E":{"length":0.5,"weight":2},
+
      $(this).closest('h2').prev('a').one('click',that.more)
-
             "F":{"length":0.5,"weight":2},
+
     
-
             "G":{"length":0.5,"weight":2}
+
      return false
 +
    },
 +
    reveal:function(e){
 +
      $(this).next('dd').fadeToggle('fast')
 +
      return false
 +
    },
 +
    back:function(){
 +
      _path = "/"
 +
      if (window.history && window.history.pushState){
 +
        window.history.pushState({path:_path}, "", _path);
 +
      }
 +
      that.update()
 +
      return false
 +
    },
 +
    navigate:function(e){
 +
      var oldpath = _path
 +
      if (e.type=='navigate'){
 +
        _path = e.path
 +
        if (window.history && window.history.pushState){
 +
             window.history.pushState({path:_path}, "", _path);
 +
        }else{
 +
          that.update()
 +
        }
 +
      }else if (e.type=='popstate'){
 +
        var state = e.originalEvent.state || {}
 +
        _path = state.path || window.location.pathname.replace(/^\//,)
 +
      }
 +
      if (_path != oldpath) that.update()
 +
    },
 +
    update:function(){
 +
      var dt = 'slow'
 +
      if (_path===null){
 +
        // this is the original page load. don't animate anything just jump
 +
        // to the proper state
 +
        _path = window.location.pathname.replace(/^\//,)
 +
        dt = 0
 +
        dom.find('p').css('opacity',0).show().fadeTo('slow',1)
 +
      }
 +
      switch (_path){
 +
        case :
 +
        case '/':
 +
// dom.find('p').text('a graph visualization library using web workers and jQuery')
 +
        dom.find('> a').removeClass('active').attr('href','#')
 +
        $('#Model').fadeTo('fast',0, function(){
 +
          $(this).hide()
 +
          $(that).trigger({type:'mode', mode:'visible', dt:dt})
 +
        })
 +
        document.title = "FRENCH FROGGIES"
 +
        break
 +
       
 +
      }
 +
     
 +
    }
 +
  }
 +
  return that
 +
}
 +
 +
$(document).ready(function(){
 +
  var CLR = {
 +
    branch:"#b2b19d",
 +
    level3benchwork:"#FFBF3E",
 +
    level3model:"#4B86C7"
 +
  }
 +
/*Thibault BEGIN*/
 +
  var theUI = {
 +
   
 +
    nodes:{"FRENCH FROGGIES":{color:"#51C215", shape:"img", alpha:1, link:'Project', url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
 +
             "Benchwork":{color:"#FF963E", shape:"img", alpha:1, url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
 +
            "Synthetic hormone":{color:CLR.level3benchwork, alpha:0, link:'AIDSystem'},
 +
             "Goldenbrick":{color:CLR.level3benchwork, alpha:0, link:'GB'},
 +
             "Xenopus : A multicellular chassis":{color:CLR.level3benchwork, alpha:0, link:'FrenchFrog'},
 +
             "Modeling":{color:"#1A5291", shape:"img", alpha:1, link:'Modeling', url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
 +
            "Auxin transport and diffusion":{color:CLR.level3model, alpha:0, link:'auxin_pde'},
 +
             "Experimental protocol":{color:CLR.level3model, alpha:0, link:'plasmid_splitting'},
 +
             "Cellular model : auxin production":{color:CLR.level3model, alpha:0, link:'Auxin_production'},
 +
             "Cellular model : auxin detection":{color:CLR.level3model, alpha:0, link:'Auxin_detection'},
 +
             "Human Pratice":{color:"#A94AC7", shape:"dot", alpha:1, link:'HumanPractice'}
           },
           },
 +
    edges:{
-
        "Modeling":{
+
      "FRENCH FROGGIES":{
-
            "H":{"length":0.5,"weight":2},
+
          Benchwork:{"length":0.5,"weight":1},
-
            "I":{"length":0.5,"weight":2},
+
          Modeling:{"length":0.5,"weight":2},
-
            "J":{"length":0.5,"weight":2},
+
          "Human Pratice":{"length":0.5,"weight":3}
-
            "K":{"length":0.5,"weight":2}
+
      },
-
          },
+
      Benchwork:{
-
 
+
          "Synthetic hormone":{"length":0.5,"weight":1},
-
        "GoldenBricks":{}
+
          "Goldenbrick":{"length":0.5,"weight":2},
-
 
+
          "Xenopus : A multicellular chassis":{"length":0.5,"weight":3}
-
        "Human Practice":{
+
      },
-
            "L":{"length":0.5,"weight":2},
+
      Modeling:{
-
            "M":{"length":0.5,"weight":2},
+
          "Auxin transport and diffusion":{"length":0.5,"weight":2},
-
            "N":{"length":0.5,"weight":2},
+
          "Experimental protocol":{"length":0.5,"weight":2},
-
            "O":{"length":0.5,"weight":2}
+
          "Cellular model : auxin production":{"length":0.5,"weight":2},
-
          },
+
          "Cellular model : auxin detection":{"length":0.5,"weight":2}
-
 
+
      },
-
        "The Team":{
+
      "Human Pratice":{}
-
            "P":{"length":0.5,"weight":2},
+
    }
-
            "Q":{"length":0.5,"weight":2},
+
  }
-
            "R":{"length":0.5,"weight":2},
+
/*Thibault END*/
-
            "S":{"length":0.5,"weight":2}
+
  var sys = arbor.ParticleSystem()
-
          },
+
  sys.parameters({stiffness:900, repulsion:50, gravity:true, dt:0.015})
-
 
+
  sys.renderer = Renderer("#sitemap")
-
 
+
  sys.graft(theUI)
-
      }
+
 
-
    }
+
  var nav = Nav("#nav")
-
/*Menu END*/
+
  $(sys.renderer).bind('navigate', nav.navigate)
-
 
+
  $(nav).bind('mode', sys.renderer.switchMode)
-
    var sys = arbor.ParticleSystem()
+
  nav.init()
-
    sys.parameters({stiffness:900, repulsion:50, gravity:true, dt:0.015})
+
})
-
    sys.renderer = Renderer("#sitemap")
+
})(this.jQuery)
-
    sys.graft(theUI)
+
-
   
+
-
    var nav = Nav("#nav")
+
-
    $(sys.renderer).bind('navigate', nav.navigate)
+
-
    $(nav).bind('mode', sys.renderer.switchMode)
+
-
    nav.init()
+
-
  })
+
-
})
+

Revision as of 13:09, 26 September 2012

(function($){

var Renderer = function(elt){
  var dom = $(elt)
  var canvas = dom.get(0)
  var ctx = canvas.getContext("2d");
  var gfx = arbor.Graphics(canvas)
  var sys = null
  var _vignette = null
  var selected = null,
      nearest = null,
      _mouseP = null;
  var that = {
    init:function(pSystem){
      sys = pSystem
      sys.screen({size:{width:dom.width(), height:dom.height()},
                  padding:[36,60,36,60]})
      $(window).resize(that.resize)
      that.resize()
      that._initMouseHandling()
      if (document.referrer.match(/Goldenbricks|Plasmids|AIDSystem/)){
        // if we got here by hitting the back button in one of the Benchwork, 
        // start with the Benchwork section pre-selected
        that.switchSection('Benchwork')
      }
    },
    resize:function(){
      //canvas.width = $(window).width()
      //canvas.height = .75* $(window).height()
      sys.screen({size:{width:canvas.width, height:canvas.height}})
      _vignette = null
      that.redraw()
    },
    redraw:function(){
      gfx.clear()
      sys.eachEdge(function(edge, p1, p2){
        if (edge.source.data.alpha * edge.target.data.alpha == 0) return
        gfx.line(p1, p2, {stroke:"#b2b19d", width:3, alpha:edge.target.data.alpha})
      })
      sys.eachNode(function(node, pt){
        var w = Math.max(20, 20+gfx.textWidth(node.name) )
        if (node.data.alpha===0) return
        if (node.data.shape=='dot'){
          gfx.oval(pt.x-w/2, pt.y-w/2, w, w, {fill:node.data.color, alpha:node.data.alpha})
          gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
        }

/* Begin */

        else if (node.data.shape=='img'){

var img_elem = new Image(); img_elem.src = node.data.url; ctx.drawImage(img_elem, pt.x-w/2, pt.y-w/2, w, w); // Redimensionnement de l'image prévue comme tu le souhaitais !

              gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
              gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", size:12})
        }

/*Thibault END*/

        else{
          gfx.rect(pt.x-w/2, pt.y-8, w, 20, 4, {fill:node.data.color, alpha:node.data.alpha})
          gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
          gfx.text(node.name, pt.x, pt.y+9, {color:"white", align:"center", font:"Arial", size:12})
        }
      })
      that._drawVignette()
    },
    
    _drawVignette:function(){
      var w = canvas.width
      var h = canvas.height
      var r = 20
      if (!_vignette){
        var top = ctx.createLinearGradient(0,0,0,r)
        top.addColorStop(0, "#e0e0e0")
        top.addColorStop(.7, "rgba(255,255,255,0)")
        var bot = ctx.createLinearGradient(0,h-r,0,h)
        bot.addColorStop(0, "rgba(255,255,255,0)")
        bot.addColorStop(1, "white")
        _vignette = {bot:bot}
      }
      
      // top
      ctx.fillStyle = _vignette.top
      ctx.fillRect(0,0, w,r)
      // bot
      ctx.fillStyle = _vignette.bot
      ctx.fillRect(0,h-r, w,r)
    },
    switchMode:function(e){
      if (e.mode=='hidden'){
        dom.stop(true).fadeTo(e.dt,0, function(){
          if (sys) sys.stop()
          $(this).hide()
        })
      }else if (e.mode=='visible'){
        dom.stop(true).css('opacity',0).show().fadeTo(e.dt,1,function(){
          that.resize()
        })
        if (sys) sys.start()
      }
    },
    
    switchSection:function(newSection){
      var parent = sys.getEdgesFrom(newSection)[0].source
      var children = $.map(sys.getEdgesFrom(newSection), function(edge){
        return edge.target
      })
      
      sys.eachNode(function(node){
        if (node.data.shape=='dot') return // skip all but leafnodes
        if (node.data.shape=='img') return // skip all but leafnodes
        var nowVisible = ($.inArray(node, children)>=0)
        var newAlpha = (nowVisible) ? 1 : 0
        var dt = (nowVisible) ? .5 : .5
        sys.tweenNode(node, dt, {alpha:newAlpha})
        if (newAlpha==1){
          node.p.x = parent.p.x + .05*Math.random() - .025
          node.p.y = parent.p.y + .05*Math.random() - .025
          node.tempMass = .001
        }
      })
    },
    
    
    _initMouseHandling:function(){
      // no-nonsense drag and drop (thanks springy.js)
      selected = null;
      nearest = null;
      var dragged = null;
      var oldmass = 1
      var _section = null
      var handler = {
        moved:function(e){
          var pos = $(canvas).offset();
          _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
          nearest = sys.nearest(_mouseP);
          if (!nearest.node) return false

// if (nearest.node.data.shape!='dot'){

            selected = (nearest.distance < 50) ? nearest : null
            if (selected){
               dom.addClass('linkable')
               window.status = selected.node.data.link//.replace(/^\//,"http://"+window.location.host+"/")//.replace(/^#/,)
            }
            else{
               dom.removeClass('linkable')
               window.status = 
            }

// }else

          if ($.inArray(nearest.node.name, ['French Froggies','Human Practice','Modeling','Benchwork']) >=0 ){
            if (nearest.node.name!=_section){
              _section = nearest.node.name
              that.switchSection(_section)
            }
            dom.removeClass('linkable')
            window.status = 
          }
          
          return false
        },
        clicked:function(e){
          var pos = $(canvas).offset();
          _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
          nearest = dragged = sys.nearest(_mouseP);
          
          if (nearest && selected && nearest.node===selected.node){
            var link = selected.node.data.link
            if (link.match(/^#/)){
               $(that).trigger({type:"navigate", path:link.substr(1)})
            }else{
               window.location = link
            }
            return false
          }
          
          
          if (dragged && dragged.node !== null) dragged.node.fixed = true
          $(canvas).unbind('mousemove', handler.moved);
          $(canvas).bind('mousemove', handler.dragged)
          $(window).bind('mouseup', handler.dropped)
          return false
        },
        dragged:function(e){
          var old_nearest = nearest && nearest.node._id
          var pos = $(canvas).offset();
          var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
          if (!nearest) return
          if (dragged !== null && dragged.node !== null){
            var p = sys.fromScreen(s)
            dragged.node.p = p
          }
          return false
        },
        dropped:function(e){
          if (dragged===null || dragged.node===undefined) return
          if (dragged.node !== null) dragged.node.fixed = false
          dragged.node.tempMass = 1000
          dragged = null;
          // selected = null
          $(canvas).unbind('mousemove', handler.dragged)
          $(window).unbind('mouseup', handler.dropped)
          $(canvas).bind('mousemove', handler.moved);
          _mouseP = null
          return false
        }
      }
      $(canvas).mousedown(handler.clicked);
      $(canvas).mousemove(handler.moved);
    }
  }
  
  return that
}


var Nav = function(elt){
  var dom = $(elt)
  var _path = null
  
  var that = {
    init:function(){
      $(window).bind('popstate',that.navigate)
      dom.find('> a').click(that.back)
      $('.more').one('click',that.more)
      
      $('#Model dl:not(.datastructure) dt').click(that.reveal)
      that.update()
      return that
    },
    more:function(e){
      $(this).removeAttr('href').addClass('less').html(' ').siblings().fadeIn()
      $(this).next('h2').find('a').one('click', that.less)
      
      return false
    },
    less:function(e){
      var more = $(this).closest('h2').prev('a')
      $(this).closest('h2').prev('a')
      .nextAll().fadeOut(function(){
        $(more).text('creation & use').removeClass('less').attr('href','#')
      })
      $(this).closest('h2').prev('a').one('click',that.more)
      
      return false
    },
    reveal:function(e){
      $(this).next('dd').fadeToggle('fast')
      return false
    },
    back:function(){
      _path = "/"
      if (window.history && window.history.pushState){
        window.history.pushState({path:_path}, "", _path);
      }
      that.update()
      return false
    },
    navigate:function(e){
      var oldpath = _path
      if (e.type=='navigate'){
        _path = e.path
        if (window.history && window.history.pushState){
           window.history.pushState({path:_path}, "", _path);
        }else{
          that.update()
        }
      }else if (e.type=='popstate'){
        var state = e.originalEvent.state || {}
        _path = state.path || window.location.pathname.replace(/^\//,)
      }
      if (_path != oldpath) that.update()
    },
    update:function(){
      var dt = 'slow'
      if (_path===null){
        // this is the original page load. don't animate anything just jump
        // to the proper state
        _path = window.location.pathname.replace(/^\//,)
        dt = 0
        dom.find('p').css('opacity',0).show().fadeTo('slow',1)
      }
      switch (_path){
        case :
        case '/':

// dom.find('p').text('a graph visualization library using web workers and jQuery')

        dom.find('> a').removeClass('active').attr('href','#')
        $('#Model').fadeTo('fast',0, function(){
          $(this).hide()
          $(that).trigger({type:'mode', mode:'visible', dt:dt})
        })
        document.title = "FRENCH FROGGIES"
        break
        
      }
      
    }
  }
  return that
}

$(document).ready(function(){
  var CLR = {
    branch:"#b2b19d",
    level3benchwork:"#FFBF3E",
    level3model:"#4B86C7"
  }

/*Thibault BEGIN*/

  var theUI = {
    
    nodes:{"FRENCH FROGGIES":{color:"#51C215", shape:"img", alpha:1, link:'Project', url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'}, //Attribut url pour l'image ajouté /*Thibault*/
           "Benchwork":{color:"#FF963E", shape:"img", alpha:1, url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'},  //Attribut url pour l'image ajouté /*Thibault*/
           "Synthetic hormone":{color:CLR.level3benchwork, alpha:0, link:'AIDSystem'},
           "Goldenbrick":{color:CLR.level3benchwork, alpha:0, link:'GB'},
           "Xenopus : A multicellular chassis":{color:CLR.level3benchwork, alpha:0, link:'FrenchFrog'},
           "Modeling":{color:"#1A5291", shape:"img", alpha:1, link:'Modeling', url:'https://static.igem.org/mediawiki/2012/a/a1/ResultsbuttonLowRes.png'},  //Attribut url pour l'image ajouté /*Thibault*/
           "Auxin transport and diffusion":{color:CLR.level3model, alpha:0, link:'auxin_pde'},
           "Experimental protocol":{color:CLR.level3model, alpha:0, link:'plasmid_splitting'},
           "Cellular model : auxin production":{color:CLR.level3model, alpha:0, link:'Auxin_production'},
           "Cellular model : auxin detection":{color:CLR.level3model, alpha:0, link:'Auxin_detection'},
           "Human Pratice":{color:"#A94AC7", shape:"dot", alpha:1, link:'HumanPractice'}
          },
    edges:{
      "FRENCH FROGGIES":{
          Benchwork:{"length":0.5,"weight":1},
          Modeling:{"length":0.5,"weight":2},
          "Human Pratice":{"length":0.5,"weight":3}
      },
      Benchwork:{
          "Synthetic hormone":{"length":0.5,"weight":1},
          "Goldenbrick":{"length":0.5,"weight":2},
          "Xenopus : A multicellular chassis":{"length":0.5,"weight":3}
      },
      Modeling:{
          "Auxin transport and diffusion":{"length":0.5,"weight":2},
          "Experimental protocol":{"length":0.5,"weight":2},
          "Cellular model : auxin production":{"length":0.5,"weight":2},
          "Cellular model : auxin detection":{"length":0.5,"weight":2}
      },
      "Human Pratice":{}
    }
  }

/*Thibault END*/

  var sys = arbor.ParticleSystem()
  sys.parameters({stiffness:900, repulsion:50, gravity:true, dt:0.015})
  sys.renderer = Renderer("#sitemap")
  sys.graft(theUI)
  
  var nav = Nav("#nav")
  $(sys.renderer).bind('navigate', nav.navigate)
  $(nav).bind('mode', sys.renderer.switchMode)
  nav.init()
})

})(this.jQuery)