Merge d9d4cf6 into 2656a0f

app/assets/javascripts/application.js

@@ -22,18 +22,31 @@
 //= require jquery-ui/widgets/autocomplete
 //= require autocomplete-rails
 
+// to store clicked link
+var clickedLink;
+
 $(function() {
   // add a hash to the URL when the user clicks on a tab
   $('a[data-toggle="tab"]').on('click', function(e) {
     history.pushState(null, null, $(this).attr('href'));
   });
-  // navigate to a tab when the history changes
+
+  // when history changes
   window.addEventListener("popstate", function(e) {
-    var activeTab = $('a[href="' + location.hash + '"]');
-    if (activeTab.length) {
-      activeTab.tab('show');
-    } else {
-      $('.nav-tabs a').first().tab('show');
+    // when history changes and poped state is a state that come from ajax so reload the whole page
+    if (e.state != null){
+      if(e.state.hasOwnProperty('isAjax')){
+        location.reload();
+      }
+    }
+    // navigate to a tab when the history changes
+    else{
+      var activeTab = $('a[href="' + location.hash + '"]');
+      if (activeTab.length) {
+        activeTab.tab('show');
+      } else {
+        $('.nav-tabs a').first().tab('show');
+      }
     }
   });
 });
@@ -62,6 +75,24 @@ $(function() {
   );
 });
 
+// to add loader and opacity when ajax is start
+$( document ).ajaxStart(function() {
+  $("#content").css('opacity', '0.4');
+  $( "#loader" ).show();
+
+});
+
+// to stop loader and remove opacity when ajax is stop
+$( document ).ajaxStop(function() {
+  $("#content").css('opacity', '');
+  $( "#loader" ).hide();
+});
+
+// to get the link which will be used in ajax case for pushState
+$(document).on("click", "a", function(){
+  clickedLink = this.href;
+})
+
 $(function(){
   var emojis = [
     "smile", "iphone", "girl", "smiley", "heart", "kiss", "copyright", "coffee",
@@ -104,3 +135,4 @@ function textcover(txtarea, newtxt) {
         $(txtarea).val().substring(txtarea.selectionEnd)
    );  
 }
+

app/assets/stylesheets/hackweek.scss

@@ -174,6 +174,32 @@ textarea.form-control {
   }
 }
 
+#loader {
+  border: 7px solid #f3f3f3;
+  border-radius: 50%;
+  border-top: 7px solid #3498db;
+  width: 80px;
+  height: 80px;
+  -webkit-animation: spin 1.5s linear infinite; /* Safari */
+  animation: spin 1.5s linear infinite;
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  z-index: 999;
+  display: none;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 #search-suggestion-container {
     display: block;
 } 

app/controllers/projects_controller.rb

@@ -20,6 +20,7 @@ def index
     respond_to do |format|
       format.html { render }
       format.rss { render :layout => false }
+      format.js
     end
   end
 

app/views/layouts/application.html.haml

@@ -19,6 +19,7 @@
   %body
     = render :partial => "layouts/header"
     .container
+      %div#loader
       #content
         - if flash
           = render partial: "layouts/alert", flash: flash

app/views/projects/_index.html.haml

@@ -0,0 +1,57 @@
+- content_for :title do
+  = action_name.humanize unless action_name === "index"
+  Projects
+  = "(#{@projects.length})"
+
+.row
+  .col-sm-12
+    = render :partial => "projects/tabs"
+    .tab-content{style: 'padding-top: 10px;'}
+      - if @projects.length > 0
+        .tab-pane.active
+          .row.project-list-pills{style: 'padding-bottom: 10px;'}
+            .col-sm-6
+              %ul.nav.nav-pills
+                %li{role: 'presentation'}
+                  = link_to 'Per Page:', '#', style: 'pointer-events: none; cursor: default;', class: 'text-muted'
+                %li{role: 'presentation', class: active_page_size(10, params[:page_size])}
+                  = link_to '10', :page_size => '10', :episode => params[:episode], :remote => true
+                %li{role: 'presentation', class: active_page_size(50, params[:page_size])}
+                  = link_to '50', :page_size => '50', :episode => params[:episode], :remote => true
+                %li{role: 'presentation', class: active_page_size(100, params[:page_size])}
+                  = link_to '100', :page_size => '100', :episode => params[:episode], :remote => true
+                %li{role: 'presentation', class: active_page_size(@projects.total_count, params[:page_size])}
+                  = link_to 'All', :page_size => @projects.total_count, :episode => params[:episode], :remote => true
+            .col-sm-6
+              %ul.nav.nav-pills.pull-right
+                %li{role: "presentation"}
+                  = link_to 'Type:', '#', style: 'pointer-events: none; cursor: default;', class: 'text-muted'
+                %li.active#all-pill
+                  %a{:href =>'#', :id=>'all', :title=> 'Show everything'}
+                    All
+                %li#ideas-pill
+                  %a{:href =>'#', :id=>'ideas', :title => 'Show only ideas nobody is working on'}
+                    %i.fa.fa-lightbulb-o
+                    Ideas
+                %li#projects-pill
+                  %a{:href =>'#', :id=>'projects', :title => 'Show only projects people are working on'}
+                    %i.fa.fa-puzzle-piece
+                    Projects
+          .row
+            .col-sm-12
+              %table.table.project-style#project_table
+                %thead
+                - @projects.each_with_index do |project, index|
+                  %tr
+                    %td{:class => "#{project.aasm_state}"}
+                      = render :partial => "projects/list_item", :locals => {:project => project, :index => index }
+          .row
+            .col-md-12
+              .text-center
+                = paginate @projects, :remote => true
+      - else
+        %h3
+          No projects.
+          - unless action_name == :finished or :archived
+            How about you
+            = link_to "add one!", new_project_path

app/views/projects/_tabs.html.haml

@@ -1,30 +1,30 @@
 %ul.nav.nav-tabs
   - all_state = "active" if action_name == "index"
   %li{:class => all_state}
-    =link_to projects_path(@episode), :title => "All projects" do
+    =link_to projects_path(@episode), :title => "All projects", :remote => true do
       %span
         All
   - popular_state = "active" if action_name == "popular"
   %li{:class => popular_state}
-    =link_to popular_projects_path(@episode), :title => "Projects with many likes" do
+    =link_to popular_projects_path(@episode), :title => "Projects with many likes", :remote => true do
       %span.hidden-xs
         Popular
       %i.fa.fa-star.visible-xs
   - biggest_state = "active" if action_name == "biggest"
   %li{:class => biggest_state}
-    =link_to biggest_projects_path(@episode), :title => "Projects with many users" do
+    =link_to biggest_projects_path(@episode), :title => "Projects with many users", :remote => true do
       %span.hidden-xs
         Populous
       %i.fa.fa-user.visible-xs
   - finished_state = "active" if action_name == "finished"
   %li{:class => finished_state}
-    =link_to finished_projects_path(@episode), :title => "Projects that are done" do
+    =link_to finished_projects_path(@episode), :title => "Projects that are done", :remote => true do
       %span.hidden-xs
         Finished
       %i.fa.fa-check.visible-xs
   - archived_state = "active" if action_name == "archived"
   %li{:class => archived_state}
-    =link_to archived_projects_path(@episode), :title => "Projects that are dismissed" do
+    =link_to archived_projects_path(@episode), :title => "Projects that are dismissed", :remote => true do
       %span.hidden-xs
         Archived
       %i.fa.fa-archive.visible-xs

app/views/projects/index.html.haml

@@ -1,122 +1,68 @@
-- content_for :title do
-  = action_name.humanize unless action_name === "index"
-  Projects
-  = "(#{@projects.length})"
-
-.row
-  .col-sm-12
-    = render :partial => "projects/tabs"
-    .tab-content{style: 'padding-top: 10px;'}
-      - if @projects.length > 0
-        .tab-pane.active
-          .row.project-list-pills{style: 'padding-bottom: 10px;'}
-            .col-sm-6
-              %ul.nav.nav-pills
-                %li{role: 'presentation'}
-                  = link_to 'Per Page:', '#', style: 'pointer-events: none; cursor: default;', class: 'text-muted'
-                %li{role: 'presentation', class: active_page_size(10, params[:page_size])}
-                  = link_to '10', :page_size => '10', :episode => params[:episode]
-                %li{role: 'presentation', class: active_page_size(50, params[:page_size])}
-                  = link_to '50', :page_size => '50', :episode => params[:episode]
-                %li{role: 'presentation', class: active_page_size(100, params[:page_size])}
-                  = link_to '100', :page_size => '100', :episode => params[:episode]
-                %li{role: 'presentation', class: active_page_size(@projects.total_count, params[:page_size])}
-                  = link_to 'All', :page_size => @projects.total_count, :episode => params[:episode]
-            .col-sm-6
-              %ul.nav.nav-pills.pull-right
-                %li{role: "presentation"}
-                  = link_to 'Type:', '#', style: 'pointer-events: none; cursor: default;', class: 'text-muted'
-                %li.active#all-pill
-                  %a{:href =>'#', :id=>'all', :title=> 'Show everything'}
-                    All
-                %li#ideas-pill
-                  %a{:href =>'#', :id=>'ideas', :title => 'Show only ideas nobody is working on'}
-                    %i.fa.fa-lightbulb-o
-                    Ideas
-                %li#projects-pill
-                  %a{:href =>'#', :id=>'projects', :title => 'Show only projects people are working on'}
-                    %i.fa.fa-puzzle-piece
-                    Projects
-          .row
-            .col-sm-12
-              %table.table.project-style#project_table
-                %thead
-                - @projects.each_with_index do |project, index|
-                  %tr
-                    %td{:class => "#{project.aasm_state}"}
-                      = render :partial => "projects/list_item", :locals => {:project => project, :index => index }
-          .row
-            .col-md-12
-              .text-center
-                = paginate @projects
-      - else
-        %h3
-          No projects.
-          - unless action_name == :finished or :archived
-            How about you
-            = link_to "add one!", new_project_path
-
+= render :partial => "projects/index"
 - content_for :script do
   :javascript
-    $( "#ideas" ).click(function() {
-      console.log ("show only ideas");
-      $( ".invention" ).hide();
-      $( ".record" ).hide();
-      $( ".project" ).hide();
-      $( ".idea" ).show();
-      $( "#ideas-pill").addClass( "active" );
-      $( "#all-pill, #projects-pill").removeClass( "active" );
-    });
-    $( "#projects" ).click(function() {
-      console.log ("show only projects");
-      $( ".invention" ).hide();
-      $( ".record" ).hide();
-      $( ".idea" ).hide();
-      $( ".project" ).show();
-      $( "#projects-pill").addClass( "active" );
-      $( "#all-pill, #ideas-pill").removeClass( "active" );
-    });
-    $( "#all" ).click(function() {
-      console.log ("show everything");
-      $( ".invention" ).show();
-      $( ".record" ).show();
-      $( ".idea" ).show();
-      $( ".project" ).show();
-      $( "#all-pill").addClass( "active" );
-      $( "#projects-pill, #ideas-pill").removeClass( "active" );
-    });
-    $("table").addTableFilter({
-    });
+    function projectPageCall(){
+      $( "#ideas" ).click(function() {
+        console.log ("show only ideas");
+        $( ".invention" ).hide();
+        $( ".record" ).hide();
+        $( ".project" ).hide();
+        $( ".idea" ).show();
+        $( "#ideas-pill").addClass( "active" );
+        $( "#all-pill, #projects-pill").removeClass( "active" );
+      });
+      $( "#projects" ).click(function() {
+        console.log ("show only projects");
+        $( ".invention" ).hide();
+        $( ".record" ).hide();
+        $( ".idea" ).hide();
+        $( ".project" ).show();
+        $( "#projects-pill").addClass( "active" );
+        $( "#all-pill, #ideas-pill").removeClass( "active" );
+      });
+      $( "#all" ).click(function() {
+        console.log ("show everything");
+        $( ".invention" ).show();
+        $( ".record" ).show();
+        $( ".idea" ).show();
+        $( ".project" ).show();
+        $( "#all-pill").addClass( "active" );
+        $( "#projects-pill, #ideas-pill").removeClass( "active" );
+      });
+      $("table").addTableFilter({
+      });
 
-    Mousetrap.bind('j', function() { ProjectNext(); });
-    Mousetrap.bind('k', function() { ProjectPrevious(); });
+      Mousetrap.bind('j', function() { ProjectNext(); });
+      Mousetrap.bind('k', function() { ProjectPrevious(); });
 
-    function ProjectPrevious() {  
+      function ProjectPrevious() {  
+          hash = window.location.hash
+          all = $("h4[id^='project-']").length
+          if (hash == "")
+            window.location.hash = "#project-0";
+          else
+            var blah = hash.split('-')
+          next = parseInt(blah[1])
+          if(next > 0)
+            next--
+          else
+            next = all - 1
+          window.location.hash = "#project-" + next;
+        }
+
+      function ProjectNext() {  
         hash = window.location.hash
         all = $("h4[id^='project-']").length
         if (hash == "")
           window.location.hash = "#project-0";
         else
           var blah = hash.split('-')
         next = parseInt(blah[1])
-        if(next > 0)
-          next--
+        if(next == (all - 1))
+          next = 0
         else
-          next = all - 1
+          next++
         window.location.hash = "#project-" + next;
       }
-
-    function ProjectNext() {  
-      hash = window.location.hash
-      all = $("h4[id^='project-']").length
-      if (hash == "")
-        window.location.hash = "#project-0";
-      else
-        var blah = hash.split('-')
-      next = parseInt(blah[1])
-      if(next == (all - 1))
-        next = 0
-      else
-        next++
-      window.location.hash = "#project-" + next;
     }
+    projectPageCall();

app/views/projects/index.js.erb

@@ -0,0 +1,4 @@
+$("#content").html($("<%= escape_javascript(render 'index') %>"))
+projectPageCall();
+history.pushState({isAjax: true}, null, clickedLink);
+$('meta[name="csrf-token"]').attr('content','<%= form_authenticity_token %>');