Our-project
From 2012.igem.org
(Created page with "{{:Team:Evry/template_v2}} <html> <canvas id="sitemap" width="800" height="400"></canvas> <script src="https://2012.igem.org/common/jquery-latest.min.js"></script> <script src="...") |
|||
Line 1: | Line 1: | ||
- | + | ||
- | + | ||
<canvas id="sitemap" width="800" height="400"></canvas> | <canvas id="sitemap" width="800" height="400"></canvas> | ||
<script src="https://2012.igem.org/common/jquery-latest.min.js"></script> | <script src="https://2012.igem.org/common/jquery-latest.min.js"></script> | ||
- | <script src=" | + | <script src="js/lib/arbor.js"></script> |
<script src="http://arborjs.org/js/lib/arbor-tween.js"></script> | <script src="http://arborjs.org/js/lib/arbor-tween.js"></script> | ||
<script src="http://arborjs.org/js/lib/arbor-graphics.js"></script> | <script src="http://arborjs.org/js/lib/arbor-graphics.js"></script> | ||
- | <script | + | <script type="text/javascript"> |
+ | |||
+ | // | ||
+ | // site.js | ||
+ | // | ||
+ | // the arbor.js website | ||
+ | // | ||
+ | (function($){ | ||
+ | // var trace = function(msg){ | ||
+ | // if (typeof(window)=='undefined' || !window.console) return | ||
+ | // var len = arguments.length, args = []; | ||
+ | // for (var i=0; i<len; i++) args.push("arguments["+i+"]") | ||
+ | // eval("console.log("+args.join(",")+")") | ||
+ | // } | ||
+ | |||
+ | 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:2, 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}) | ||
+ | gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", 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 = {top:top, 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 | ||
+ | |||
+ | 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','Model','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 | ||
+ | |||
+ | // case 'introduction': | ||
+ | // case 'French Froggies': | ||
+ | // case 'Goldenbrick': | ||
+ | // $(that).trigger({type:'mode', mode:'hidden', dt:dt}) | ||
+ | // dom.find('> p').text(_path) | ||
+ | // dom.find('> a').addClass('active').attr('href','#') | ||
+ | // $('#Model').stop(true).css({opacity:0}).show().delay(333).fadeTo('fast',1) | ||
+ | // | ||
+ | // $('#Model').find(">div").hide() | ||
+ | // $('#Model').find('#'+_path).show() | ||
+ | // document.title = "French Froggies » " + _path | ||
+ | // break | ||
+ | } | ||
+ | |||
+ | } | ||
+ | } | ||
+ | return that | ||
+ | } | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | var CLR = { | ||
+ | branch:"#b2b19d", | ||
+ | level1:"#009A3A", | ||
+ | level2:"#009966", | ||
+ | level3:"#C7D1A5" | ||
+ | } | ||
+ | |||
+ | var theUI = { | ||
+ | nodes:{"French Froggies":{color:CLR.level1, shape:"dot", alpha:1, link:'Project'}, | ||
+ | |||
+ | Benchwork:{color:CLR.level2, shape:"dot", alpha:1}, | ||
+ | "Synthetic hormone":{color:CLR.level3, alpha:0, link:'AIDSystem'}, | ||
+ | "Goldenbrick":{color:CLR.level3, alpha:0, link:'GB'}, | ||
+ | "Xenopus : A multicellular chassis":{color:CLR.level3, alpha:0, link:'FrenchFroggies'}, | ||
+ | |||
+ | Model:{color:CLR.level2, shape:"dot", alpha:1, link:'Modeling'}, | ||
+ | "Auxin transport and diffusion":{color:CLR.level3, alpha:0, link:'auxin_pde'}, | ||
+ | "Experimental protocol":{color:CLR.level3, alpha:0, link:'plasmid_splitting'}, | ||
+ | "Cellular model : auxin production":{color:CLR.level3, alpha:0, link:'Auxin_production'}, | ||
+ | "Cellular model : auxin detection":{color:CLR.level3, alpha:0, link:'Auxin_detection'}, | ||
+ | |||
+ | "Human Pratice":{color:CLR.level2, shape:"dot", alpha:1, link:'HumanPractice'} | ||
+ | }, | ||
+ | edges:{ | ||
+ | |||
+ | |||
+ | "French Froggies":{ | ||
+ | Benchwork:{"length":0.5,"weight":1}, | ||
+ | Model:{"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} | ||
+ | }, | ||
+ | Model:{ | ||
+ | "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":{} | ||
+ | } | ||
+ | } | ||
+ | |||
- | </ | + | 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) | ||
+ | </script> |
Revision as of 23:40, 23 September 2012
<canvas id="sitemap" width="800" height="400"></canvas>
<script src="https://2012.igem.org/common/jquery-latest.min.js"></script> <script src="js/lib/arbor.js"></script> <script src="http://arborjs.org/js/lib/arbor-tween.js"></script> <script src="http://arborjs.org/js/lib/arbor-graphics.js"></script>
<script type="text/javascript">
//
// site.js // // the arbor.js website // (function($){
// var trace = function(msg){ // if (typeof(window)=='undefined' || !window.console) return // var len = arguments.length, args = []; // for (var i=0; i<len; i++) args.push("arguments["+i+"]") // eval("console.log("+args.join(",")+")") // } 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:2, 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}) gfx.text(node.name, pt.x, pt.y+7, {color:"white", align:"center", font:"Arial", 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 = {top:top, 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
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','Model','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
// case 'introduction': // case 'French Froggies': // case 'Goldenbrick': // $(that).trigger({type:'mode', mode:'hidden', dt:dt}) // dom.find('> p').text(_path) // dom.find('> a').addClass('active').attr('href','#') // $('#Model').stop(true).css({opacity:0}).show().delay(333).fadeTo('fast',1) // // $('#Model').find(">div").hide() // $('#Model').find('#'+_path).show() // document.title = "French Froggies » " + _path // break
} } } return that } $(document).ready(function(){ var CLR = { branch:"#b2b19d", level1:"#009A3A", level2:"#009966", level3:"#C7D1A5" }
var theUI = { nodes:{"French Froggies":{color:CLR.level1, shape:"dot", alpha:1, link:'Project'}, Benchwork:{color:CLR.level2, shape:"dot", alpha:1}, "Synthetic hormone":{color:CLR.level3, alpha:0, link:'AIDSystem'}, "Goldenbrick":{color:CLR.level3, alpha:0, link:'GB'}, "Xenopus : A multicellular chassis":{color:CLR.level3, alpha:0, link:'FrenchFroggies'},
Model:{color:CLR.level2, shape:"dot", alpha:1, link:'Modeling'}, "Auxin transport and diffusion":{color:CLR.level3, alpha:0, link:'auxin_pde'}, "Experimental protocol":{color:CLR.level3, alpha:0, link:'plasmid_splitting'}, "Cellular model : auxin production":{color:CLR.level3, alpha:0, link:'Auxin_production'}, "Cellular model : auxin detection":{color:CLR.level3, alpha:0, link:'Auxin_detection'},
"Human Pratice":{color:CLR.level2, shape:"dot", alpha:1, link:'HumanPractice'} }, edges:{
"French Froggies":{ Benchwork:{"length":0.5,"weight":1}, Model:{"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} }, Model:{ "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":{} } }
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) </script>