nav state, pjax nav state, refactor and cleanup

Gemfile

@@ -12,11 +12,11 @@ gem 'cancan', '~> 1.6.7'
 gem 'squeel', '~> 0.9.3'
 gem 'sentient_user', '~> 0.3.2'
 gem 'userstamp_basic', '~> 0.1.0'
-gem 'active_scaffold', :git => 'https://github.com/activescaffold/active_scaffold.git'
+gem 'active_scaffold', git: 'https://github.com/activescaffold/active_scaffold.git'
 # :path => '/home/clyfe/dev/active_scaffold'
 # '~> 3.2.0'
-gem 'pjax_rails', '~> 0.1.10'
+gem 'pjax_rails', '~> 0.1.7', git: 'https://github.com/rails/pjax_rails.git'
-gem 'validates_hostname', '~> 1.0.0', :git => 'https://github.com/KimNorgaard/validates_hostname.git'
+gem 'validates_hostname', '~> 1.0.0', git: 'https://github.com/KimNorgaard/validates_hostname.git'
 gem 'nilify_blanks', '~> 1.0.0'
 gem 'rails_config', '~> 0.2.4'
 # gem 'rails-settings-cached', :require => 'rails-settings'
@@ -25,6 +25,8 @@ gem 'mail_form', '~> 1.3.0'
 gem 'switch_user', '~> 0.6.0'
 gem 'simple_form', '~> 2.0.0'
 gem 'concerned_with', '~> 0.1.0'
+gem 'navigasmic', '~> 0.5.6', git: 'https://github.com/jejacks0n/navigasmic.git'
+gem 'rails-backbone', '~> 0.7.0'
 
 # Gems used only for assets and not required
 # in production environments by default.

Gemfile.lock

@@ -11,6 +11,19 @@ GIT
     active_scaffold (3.2.0)
       rails (>= 3.1.3)
 
+GIT
+  remote: https://github.com/jejacks0n/navigasmic.git
+  revision: 6108afe7930fd4b3282cbe8942240bf4f70e2f74
+  specs:
+    navigasmic (0.5.6)
+
+GIT
+  remote: https://github.com/rails/pjax_rails.git
+  revision: e79a1cf58a8935eb132f4910f300cf86d081ae6d
+  specs:
+    pjax_rails (0.1.7)
+      jquery-rails
+
 GEM
   remote: http://rubygems.org/
   specs:
@@ -92,6 +105,7 @@ GEM
       railties (~> 3.1)
       warden (~> 1.1.1)
     diff-lcs (1.1.3)
+    ejs (1.0.0)
     erubis (2.7.0)
     execjs (1.3.0)
       multi_json (~> 1.0)
@@ -146,8 +160,6 @@ GEM
       activesupport (>= 3.0.0)
     nokogiri (1.5.0)
     orm_adapter (0.0.6)
-    pjax_rails (0.1.10)
-      jquery-rails
     polyamorous (0.5.0)
       activerecord (~> 3.0)
     polyglot (0.3.3)
@@ -166,6 +178,10 @@ GEM
       activesupport (= 3.2.0)
       bundler (~> 1.0)
       railties (= 3.2.0)
+    rails-backbone (0.7.0)
+      coffee-script (~> 2.2.0)
+      ejs (~> 1.0.0)
+      railties (>= 3.1.0)
     rails_config (0.2.5)
       activesupport (>= 3.0)
     railties (3.2.0)
@@ -266,9 +282,11 @@ DEPENDENCIES
   mail_form (~> 1.3.0)
   mongrel (>= 1.2.0.pre2)
   mysql2
+  navigasmic (~> 0.5.6)!
   nilify_blanks (~> 1.0.0)
-  pjax_rails (~> 0.1.10)
+  pjax_rails (~> 0.1.7)!
   rails (= 3.2.0)
+  rails-backbone (~> 0.7.0)
   rails_config (~> 0.2.4)
   rb-inotify (~> 0.8.8)
   rspec-rails (~> 2.8.1)

app/assets/javascripts/application.js.coffee

@@ -7,7 +7,8 @@
 #= require jquery
 #= require jquery-ui
 #= require jquery_ujs
-#= require pjax
+#= require jquery.pjax
+#= require pjax/page_triggers
 #= require active_scaffold
 #= require slides
 #= require twitter/bootstrap
@@ -16,3 +17,9 @@
 $ ->
   $('[rel=popover]').popover()
   $('[rel=tooltip]').tooltip()
+  
+  $('.pjax-nav a:not([data-remote]):not([data-behavior]):not([data-skip-pjax])').pjax('[data-pjax-container]')
+
+  $(document).on 'pjax:success', (event, data, status, xhr, options) ->
+    $('ul.pjax-nav').find('li.active').removeClass 'active'
+    $("ul.pjax-nav a[href=\"#{window.location.pathname}\"]").parents('li').addClass 'active'

app/views/devise/shared/_links.erb

@@ -1,8 +1,8 @@
-<ul class="nav nav-pills">
+<% semantic_navigation :devise_nav, html: { class: 'nav nav-pills pjax-nav' } do |n| %>
-  <li><%= link_to "Sign in", new_session_path(resource_name) %></li>
+  <%= n.item "Sign in", link: new_session_path(resource_name) %>
-  <li><%= link_to "Sign up", new_registration_path(resource_name) %><br /></li>
+  <%= n.item "Sign up", link: new_registration_path(resource_name) %>
-  <li><%= link_to "Forgot your password?", new_password_path(resource_name) %></li>
+  <%= n.item "Forgot your password?", link: new_password_path(resource_name) %>
-  <li><%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name) %></li>
+  <%= n.item "Didn't receive confirmation instructions?", link: new_confirmation_path(resource_name) %>
-  <li><%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name) %></li>
+  <%= n.item "Didn't receive unlock instructions?", link: new_unlock_path(resource_name) %>
-</ul>
+<% end %>
 

app/views/fragments/_navigation.html.erb

@@ -8,7 +8,7 @@
         <span class="icon-bar"></span>
       </a>
       
-      <%= link_to('EntryDNS', root_path, class: 'brand', data: {pjax: '#main'}) %>
+      <%= link_to('EntryDNS', root_path, class: 'brand') %>
 
       <div class="nav-collapse">
         <% if user_signed_in? %>

app/views/fragments/navigation/_application.html.erb

@@ -1,51 +1,34 @@
-<ul class="nav">
+<% semantic_navigation :application_nav, html: { class: 'nav pjax-nav' } do |n| %>
-  <li><%#= link_to('Dashboard', dashboard_path, :data => {:pjax => '#main'}) %></li>
+  <%#= link_to('Dashboard', dashboard_path, :data => {:pjax => '#main'}) %>
-  <li>
+  <%= n.item '', link: domains_path do %>
-    <%= link_to domains_path, data: {pjax: '#main'} do %>
     <i class="icon-white icon-th-list"></i> My Domains
   <% end %>
-  </li>
+  <%= n.item '', link: hosts_path do %>
-  <li>
-    <%= link_to hosts_path, data: {pjax: '#main'} do %>
     <i class="icon-white icon-th"></i> Dynamic Hosts
   <% end %>
-  </li>
+  <%= n.item '', link: page_path('help') do %>
-  <li>
-    <%= link_to(page_path('help'), data: {pjax: '#main'}) do %>
     <i class="icon-white icon-question-sign"></i> Help & Support
   <% end %>
-  </li>
+<% end %>
-</ul>
 
-<ul class="nav pull-right">
+<% semantic_navigation :user_nav, html: { class: 'nav pull-right pjax-nav' } do |n| %>
-  <li>
+  <%= n.item '', link: Settings.news_link, html: { rel: 'tooltip', title: Settings.news_link } do %>
-    <%= link_to(Settings.news_link, rel: 'tooltip', title: Settings.news_link) do %>
     <i class="icon-white icon-share-alt"></i> News
   <% end %>
-  </li>
+  <%= n.item '', link: page_path('donate'), html: { rel: 'tooltip', title: 'PayPal', class: 'highlight' } do %>
-  <li>
-    <%= link_to(page_path('donate'), rel: 'tooltip', title: 'PayPal', 
-      class: 'highlight', data: {pjax: '#main'}) do %>
     <i class="icon-white icon-heart"></i> Donate
   <% end %>
-    </li>
-
     <li class="dropdown">
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">
         <i class="icon-white icon-user"></i> <%= current_user.email %> <b class="caret"></b>
       </a>
-      
+      <%= n.group do %>
-      <ul class="dropdown-menu">
+        <%= n.item '', link: edit_user_registration_path, html: { rel: 'tooltip', title: "IP: #{client_remote_ip}" } do %>
-        <li>
-          <%= link_to(edit_user_registration_path, rel: 'tooltip', 
-            :title => "IP: #{client_remote_ip}", data: {pjax: '#main'}) do %>
           <i class="icon-cog"></i> Settings
         <% end %>
-        </li>
+        <%= n.item '', link: destroy_user_session_path, link_html: { data: { :'skip-pjax' => true } } do %>
-        <li>
-          <%= link_to(destroy_user_session_path, method: :delete) do %>
           <i class="icon-off"></i> Sign out
         <% end %>
+      <% end %>
     </li>
-      </ul>
+<% end %>
-  </ul>

app/views/fragments/navigation/_public.html.erb

@@ -1,32 +1,21 @@
-<ul class="nav">
+<% semantic_navigation :public_nav, html: { class: 'nav pjax-nav' } do |n| %>
-  <li><%= link_to('About', page_path('about'), data: {pjax: '#main'}) %></li>
+  <%= n.item 'About', link: page_path('about') %>
-  <li><%= link_to('Team', page_path('team'), data: {pjax: '#main'}) %></li>
+  <%= n.item 'Team', link: page_path('team') %>
-  <li><%= link_to('Contact', page_path('contact'), data: {pjax: '#main'}) %></li>
+  <%= n.item 'Contact', link: page_path('contact') %>
-  <li><%= link_to('Help & Support', page_path('help'), data: {pjax: '#main'}) %></li>
+  <%= n.item 'Help & Support', link: page_path('help') %>
-</ul>
+<% end %>
 
-<ul class="nav pull-right">
+<% semantic_navigation :session_nav, html: { class: 'nav pull-right pjax-nav' } do |n| %>
-  <li>
+  <%= n.item '', link: Settings.news_link, html: { rel: 'tooltip', title: Settings.news_link } do %>
-    <%= link_to(Settings.news_link, rel: 'tooltip', title: Settings.news_link) do %>
     <i class="icon-white icon-share-alt"></i> News
   <% end %>
-  </li>
+  <%= n.item '', link: page_path('donate'), html: { rel: 'tooltip', title: 'PayPal', class: 'highlight' } do %>
-  <li>
-    <%= link_to(page_path('donate'), rel: 'tooltip', title: 'PayPal', 
-      class: 'highlight', data: {pjax: '#main'}) do %>
     <i class="icon-white icon-heart"></i> Donate
   <% end %>
-  </li>
+  <%= n.item '', link: new_user_registration_path do %>
-
-  <li>
-    <%= link_to(new_user_registration_path, data: {pjax: '#main'}) do %>
     <i class="icon-white icon-arrow-up"></i> Sign up
   <% end %>
-  </li>
+  <%= n.item '', link: new_user_session_path do %>
-  <li>
-    <%= link_to(new_user_session_path, data: {pjax: '#main'}) do %>
     <i class="icon-white icon-arrow-right"></i> Sign in
   <% end %>
-  </li>
+<% end %>
-
-</ul>

config/initializers/navigasmic.rb

@@ -0,0 +1,42 @@
+Navigasmic.setup do |config|
+  config.highlighted_class = 'active'
+  config.with_group_class = 'dropdown-menu'
+end
+
+module Navigasmic
+  # lazy monkey patch, makes it work with twitter bootstrap
+  class HtmlNavigationBuilder
+    
+    def item(label = '', options = {}, &proc)
+      buffer = block_given? ? template.capture(self, &proc) : ''
+      label = (label + buffer).html_safe
+
+      item = NavigationItem.new(label, options, template)
+
+      options[:html] ||= {}
+      options[:html][:class] = template.add_html_class(options[:html][:class], Navigasmic.disabled_class) if item.disabled?
+      options[:html][:class] = template.add_html_class(options[:html][:class], Navigasmic.highlighted_class) if item.highlighted?(template.request.path, template.params, template)
+
+      label = label_for_item(label)
+      link = item.link.is_a?(Proc) ? template.instance_eval(&item.link) : item.link
+
+      label = template.link_to(label, link, options.delete(:link_html)) unless !item.link? || item.disabled?
+
+      item.hidden? ? '' : template.content_tag(Navigasmic.item_tag, label, options.delete(:html))
+    end
+    
+    def group(options = {}, &proc)
+      raise ArgumentError, "Missing block" unless block_given?
+
+      options[:html] ||= {}
+      options[:html][:class] = template.add_html_class(options[:html][:class], Navigasmic.with_group_class)
+
+      buffer = template.capture(self, &proc)
+      group = template.content_tag(Navigasmic.group_tag, buffer, options.delete(:html))
+
+      visible = options[:hidden_unless].nil? ? true : options[:hidden_unless].is_a?(Proc) ? template.instance_eval(&options[:hidden_unless]) : options[:hidden_unless]
+      visible ? group.html_safe : ''
+    end
+    
+  end
+end