Team:Evry/main-img.js

From 2012.igem.org

Revision as of 23:29, 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(/GoldenBricksxxxxxxxx|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 = .5* $(window).width()
       // canvas.height = .5* $(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=='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.oval(pt.x-w/2, pt.y-w/2, w, w, {fill:node.data.color, alpha:0})
         }

         else 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", weight:"bold", size:12})      
         }

         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, ['The French Froggies Project!','Xenopus as a chassis','Hormonal Communicati','Modelingxxxxxxxxxxxx','GoldenBricksxxxxxxxx', 'Human Practicexxxxxx', 'The Teamxxxxxxxxxxxx']) >=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 = "The French Froggies Project!"
         break
         
       }
       
     }
   }
   return that
 }
 
 $(document).ready(function(){
   var CLR = {
     branch:"#b2b19d",
     level3benchwork:"#FFBF3E",
     level3model:"#4B86C7"
   }

/*Thibault BEGIN*/

   var theUI = {

      // ['The French Froggies Project!','Xenopus as a chassis','Hormonal Communicati','Modelingxxxxxxxxxxxx','GoldenBricksxxxxxxxx', 'Human Practicexxxxxx', 'The Teamxxxxxxxxxxxx']

     nodes:{"The French Froggies Project!":{color:"#51C215", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/Project', url:'https://static.igem.org/mediawiki/2012/c/cf/French.png'}, //Attribut url pour l'image ajouté /*Thibault*/

            "Xenopus as a chassis":{color:"#63a358", shape:"img", alpha:1, link:'FrenchFrog', url:'https://static.igem.org/mediawiki/2012/b/bd/Xenope.png'},  //Attribut url pour l'image ajouté /*Thibault*/
                "Creation of new Xenopus plasmids":{color:"#63a358", alpha:0, link:'FrenchFrog#plasmid'},
                "How to micro inject in Xenopus eggs":{color:"#63a358", alpha:0, link:'InjectionTuto'},
                "Development stages":{color:"#63a358", alpha:0, link:'Stages'},
                "Characterization of plasmids and reporters":{color:"#63a358", alpha:0, link:'Tadpole_injection1'},

            "Hormonal Communicati":{color:"#852c2b", shape:"img", alpha:1, link:'AIDSystem', url:'https://static.igem.org/mediawiki/2012/e/e2/Hormone.png'},  //Attribut url pour l'image ajouté /*Thibault*/
                "The auxin emitter":{color:"#852c2b", alpha:0, link:'AIDSystem#auxin'},
                "The auxin receiver":{color:"#852c2b", alpha:0, link:'AIDSystem#AID'},
                "Auxin toxicity":{color:"#852c2b", alpha:0, link:'AuxinTOX'},
                "Auxin Uptake":{color:"#852c2b", alpha:0, link:'auxin_uptake'},

            "Modelingxxxxxxxxxxxx":{color:"#1A5291", shape:"img", alpha:1, link:'Modeling', url:'https://static.igem.org/mediawiki/2012/5/5b/ModelingDHIUHEIUHD.png'},  //Attribut url pour l'image ajouté /*Thibault*/
                "General Model":{color:CLR.level3model, alpha:0, link:'ODE_model'},
                "Rigorous derivations of ODEs":{color:CLR.level3model, alpha:0, link:'auxin_pde'},
                "Diffusion in a realistic geometry":{color:CLR.level3model, alpha:0, link:'Auxin_diffusion'},
                "Auxin production":{color:CLR.level3model, alpha:0, link:'auxin_production'},
                "Auxin reception":{color:CLR.level3model, alpha:0, link:'auxin_detection'},
                "Plasmid diffusion":{color:CLR.level3model, alpha:0, link:'plasmid_splitting'},
                "Model integration":{color:CLR.level3model, alpha:0, link:'model_integration'},

            "GoldenBricksxxxxxxxx":{color:"#1A5291", shape:"img", alpha:1, link:'GB', url:'https://static.igem.org/mediawiki/2012/a/a4/GoldeN.png'},  //Attribut url pour l'image ajouté /*Thibault*/

            "Human Practicexxxxxx":{color:"#a6953f", shape:"img", alpha:1, link:'https://2012.igem.org/Team:Evry/HumanPractice/HumanPractice', url:'https://static.igem.org/mediawiki/2012/b/ba/HumanPractice.png'},  //Attribut url pour l'image ajouté /*Thibault*/
                "Hi Xenope!":{color:"#a6953f", alpha:0, link:'Team:Evry/HumanPractice/Introduction'},
                "Would you be my chassis?":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/HumanPractice/modelorganism'},
                "Feed the frogs!":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/freedthefrogs'},
                "I'm a chassis, really?":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/HumanPractice/chassis'},
                "Should we work with Xenopus again?":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/HumanPractice/future'},
                "What the laws says...":{color:"#a6953f", alpha:0, link:'https://2012.igem.org/Team:Evry/HumanPractice/HumanPractice/others'},

            "The Teamxxxxxxxxxxxx":{color:"#632e8c", shape:"img", alpha:1, link:'Team', url:'https://static.igem.org/mediawiki/2012/9/93/TeamEVRY.png'},  //Attribut url pour l'image ajouté /*Thibault*/
                "Our Team":{color:"#632e8c", alpha:0, link:'Team'},
                "Our Sponsors":{color:"#632e8c", alpha:0, link:'Sponsors'},
                "Attributions":{color:"#632e8c", alpha:0, link:'Attributions'},
                "Official profile":{color:"#632e8c", alpha:0, link:'https://igem.org/Team.cgi?year=2012'},
                "Collaborations":{color:"#632e8c", alpha:0, link:'Collaboration'}
           },

     edges:{

       "The French Froggies Project!":{
           "Xenopus as a chassis":{"length":0.4,"weight":2},
           "Hormonal Communicati":{"length":0.6,"weight":2},
           "Modelingxxxxxxxxxxxx":{"length":0.4,"weight":2},
           "GoldenBricksxxxxxxxx":{"length":1.5,"weight":2},
           "Human Practicexxxxxx":{"length":0.75,"weight":2},
           "The Teamxxxxxxxxxxxx":{"length":0.5,"weight":2}
       },

       "Xenopus as a chassis":{
           "Creation of new Xenopus plasmids":{"length":0.75,"weight":1},
           "How to micro inject in Xenopus eggs":{"length":0.75,"weight":2},
           "Development stages":{"length":0.75,"weight":2},
           "Characterization of plasmids and reporters":{"length":0.75,"weight":2}
       },
       "Hormonal Communicati":{
           "The auxin emitter":{"length":1,"weight":2},
           "The auxin receiver":{"length":1,"weight":2},
           "Auxin toxicity":{"length":1,"weight":2},
           "Auxin Uptake":{"length":1,"weight":2}
           
       },

       "Modelingxxxxxxxxxxxx":{
           "General Model":{"length":0.5,"weight":2},
           "Rigorous derivations of ODEs":{"length":0.5,"weight":2},
           "Diffusion in a realistic geometry":{"length":0.75,"weight":2},
           "Auxin production":{"length":0.5,"weight":2},
           "Auxin reception":{"length":0.5,"weight":2},
           "Plasmid diffusion":{"length":0.5,"weight":2},
           "Model integration":{"length":0.5,"weight":2}
           
       },

       "GoldenBricksxxxxxxxx":{},

       "Human Practicexxxxxx":{
           "Hi Xenope!":{"length":0.5,"weight":2},
           "Would you be my chassis?":{"length":0.5,"weight":2},
           "Feed the frogs!":{"length":0.5,"weight":2},
           "I'm a chassis, really?":{"length":0.5,"weight":2},
           "Should we work with Xenopus again?":{"length":0.5,"weight":2},
           "What the laws says...":{"length":0.5,"weight":2}
       },

       "The Teamxxxxxxxxxxxx":{
           "Our Team":{"length":0.5,"weight":2},
           "Our Sponsors":{"length":0.5,"weight":2},
           "Attributions":{"length":0.5,"weight":2},
           "Official profile":{"length":0.5,"weight":2},
           "Collaborations":{"length":0.5,"weight":2}
       }
     }
   }

/*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)