1 files changed, 102 insertions, 0 deletions
diff --git a/tree/public/assets/js/lib/nav/DesktopNav.js b/tree/public/assets/js/lib/nav/DesktopNav.js
new file mode 100644
index 0000000..6c4a140
--- /dev/null
+++ b/tree/public/assets/js/lib/nav/DesktopNav.js
@@ -0,0 +1,102 @@
+var NavView = View.extend({
+
+  el: "#nav",
+
+  events: {
+    "click .logo": "home",
+    "click li": "go",
+    "click #corner": "corner",
+    "mouseenter ul": "show_menu",
+    "mouseleave ul": "hide_menu",
+  },
+
+	initialize: function(){
+	  this.$categories = this.$("ul")
+	  this.$headings = this.$categories.find("li:first-child")
+	  this.$experiments_nav = $("#experiments_nav")
+	  "breakout clock dendrite draw fireworks harp hypercube life rain sequencer snow starfield trails waves webcam".split(" ").forEach(function(name){
+	    var $tag = $("<li>").attr("href", "/experiments/" + name)
+	    $tag.html("<span>" + name + "</span>")
+	    this.$experiments_nav.append($tag)
+	  }.bind(this))
+	  this.$categories.each(function(){
+	    $(this).data("width", $(this).width())
+	  })
+	},
+
+  home: function(){
+    app.router.go("/")
+    this.$headings.find(".active").removeClass("active")
+    if (app.mobile_nav && app.mobile_nav.state.open) {
+      app.mobile_nav.hamburger()
+    }
+  },
+
+  resetWidths: function(){
+	  this.$categories.each(function(){
+	    $(this).width( $(this).data("width") )
+	  })
+  },
+  
+  go: function(e){
+    e.preventDefault()
+
+    this.resetWidths()
+
+    var $t = $(e.currentTarget)
+    var $parent = $t.parent()
+    var $parentHeading = $parent.find(":first-child")
+    this.$("li").removeClass("active")
+    this.$headings.addClass("active")
+    $parentHeading.removeClass("active")
+    $t.addClass("active")
+    
+    var hover_width = $t.find("span").width() 
+    $parent.data( "hover-width", hover_width )
+    $parent.width( hover_width )
+    this.$(".hover").removeClass("hover")
+    var href = $t.attr("href")
+    app.router.go(href)
+    if (is_mobile) {
+      app.mobile_nav.hamburger()
+    }
+    this.after_go()
+  },
+  
+  after_go: function(){
+    
+  },
+  
+  setActive: function(id){
+    var href = '/' + id
+    var $el = $('[href="' + href + '"]')
+    this.$('.active').removeClass('active')
+    if ($el.length) {
+      $el.addClass('active')
+    }
+  },
+  
+  show_menu: function(e){
+    var $el = $(e.currentTarget)
+    $el.addClass("hover")
+
+    // var $parent = $el.parent()
+    var width = $el.data( "width" )
+    $el.width(width)
+    console.log(width)
+  },
+
+  hide_menu: function(e){
+    var $el = $(e.currentTarget)
+    $el.removeClass("hover")
+    
+    // var $parent = $el.parent()
+    var hover_width = $el.data( "hover-width" )
+    $el.width(hover_width)
+  },
+  
+  corner: function(){
+    app.view && app.view.corner()
+  },
+
+});