wrangle between surf and browse context

app.rb

@@ -376,7 +376,7 @@ get '/tags/autocomplete/:name.json' do |name|
   Tag.autocomplete(name).collect {|t| t[:name]}.to_json
 end
 
-get '/browse/?' do
+def browse_sites_dataset
   @current_page = params[:current_page]
   @current_page = @current_page.to_i
   @current_page = 1 if @current_page == 0
@@ -397,13 +397,13 @@ get '/browse/?' do
 
   case params[:sort_by]
     when 'hits'
-      site_dataset.order!(:hits.desc)
+      site_dataset.order!(:hits.desc, :updated_at.desc)
     when 'views'
-      site_dataset.order!(:views.desc)
+      site_dataset.order!(:views.desc, :updated_at.desc)
     when 'newest'
-      site_dataset.order!(:created_at.desc)
+      site_dataset.order!(:created_at.desc, :views.desc)
     when 'oldest'
-      site_dataset.order!(:created_at)
+      site_dataset.order!(:created_at, :views.desc)
     when 'random'
       site_dataset.where! 'random() < 0.01'
     when 'last_updated'
@@ -412,7 +412,7 @@ get '/browse/?' do
     else
       if params[:tag]
         params[:sort_by] = 'views'
-        site_dataset.order!(:views.desc)
+        site_dataset.order!(:views.desc, :updated_at.desc)
       else
         params[:sort_by] = 'last_updated'
         site_dataset.order!(:updated_at.desc, :views.desc)
@@ -427,12 +427,26 @@ get '/browse/?' do
     site_dataset.where! ['tags.is_nsfw = ?', (params[:is_nsfw] == 'true' ? true : false)]
   end
 
+  site_dataset
+end
+
+get '/browse/?' do
+  site_dataset = browse_sites_dataset
   site_dataset = site_dataset.paginate @current_page, 300
   @page_count = site_dataset.page_count || 1
   @sites = site_dataset.all
   erb :browse
 end
 
+get '/surf/?' do
+  site_dataset = browse_sites_dataset
+  site_dataset = site_dataset.paginate @current_page, 1
+  @page_count = site_dataset.page_count || 1
+  @site = site_dataset.first
+  redirect "/browse?#{Rack::Utils.build_query params}" if @site.nil?
+  erb :'surf', layout: false
+end
+
 get '/surf/:username' do |username|
   @site = Site.select(:id, :username, :title, :domain, :views).where(username: username).first
   @title = @site.title

views/browse.erb

@@ -2,6 +2,10 @@
   function getPage(currentPage) {
     document.location.href = '/browse?current_page='+currentPage+'&'+$('#search_criteria').serialize();
   }
+
+  function surf(currentPage) {
+    document.location.href = '/surf?current_page='+currentPage+'&'+$('#search_criteria').serialize();
+  }
 </script>
 
 <div class="header-Outro with-columns browse-page">
@@ -14,12 +18,9 @@
       <% end %>
     </div>
   
-    <div class="col col-50 filter">
-      <form id="search_criteria" action="/browse" method="GET">
+    <form id="search_criteria" action="/browse" method="GET">
+      <div class="col col-50 filter">
         <fieldset class="grouping">
-          <% if params[:tag] %>
-            <input name="tag" type="hidden" value="<%= params[:tag] %>">
-          <% end %>
           <label class="text-Label" for="sort_by">Sort By:</label>
           <div class="select-Container">
             <select name="sort_by" id="sort_by" class="input-Select">
@@ -38,19 +39,17 @@
         -->
             <input class="btn-Action" type="submit" value="Update">
         </fieldset>
-      </form>
-    </div>
-    <div class="col col-50 filter">
-      <form method="GET" action="browse">
+      </div>
+      <div class="col col-50 filter">
+        <form method="GET" action="browse">
         <fieldset class="grouping">
         <label class="text-Label" for="tag">Search by tag:</label>
-        <input class="input-Area typeahead" name="tag" type="text" placeholder="pokemon" value="" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" dir="auto">
+        <input class="input-Area typeahead" name="tag" type="text" placeholder="pokemon" value="<%= params[:tag] %>" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" dir="auto">
         <input style="vertical-align: -4px;margin-left: 4px;" type="submit" class="btn-Action" value="Search">
         </fieldset>
-      </form>
+      </div>
     </div>
-
-  </div>
+    </form>
 </div>
 
 <div class="browse-page">
@@ -62,9 +61,9 @@
   </div>
 <% else %>
   <ul class="row website-Gallery content int-Gall">
-    <% @sites.each do |site| %>
+    <% @sites.each_with_index do |site,i| %>
       <li>
-        <a href="/surf/<%= site.username %>" class="neo-Screen-Shot" target="_blank" title="<%= site.title %>">
+        <a href="" class="neo-Screen-Shot" target="_blank" title="<%= site.title %>" onclick="surf(<%= i+1 %>); return false">  
           <span class="img-Holder" style="background:url(<%= site.screenshot_url('index.html', '540x405') %>) no-repeat;">
             <img src="/img/placeholder.png" alt="<%= site.title %>" />
           </span>

views/layout.erb

@@ -60,8 +60,6 @@
         name: 'tags',
         source: function(query, callback) {
           $.get('/tags/autocomplete/'+query+'.json', function(data) {
-            console.log(data)
-
             var suggestions = JSON.parse(data)
             var suggestionObjects = []
             for(var i=0; i<suggestions.length; i++)

views/surf.erb

@@ -89,13 +89,41 @@
     </style>
   </head>
   <body>
+  <script type="text/javascript">
+    function getPage(currentPage) {
+      document.location.href = '/surf?current_page='+currentPage+'&'+$('#search_criteria').serialize()
+    }
+
+    function backToBrowse() {
+      document.location.href = '/browse?'+$('#search_criteria').serialize()
+    }
+  </script>
   <a href="/" id="logo"></a>
   <div id="top-bar">
     <ul class="browse-actions">
-      <li><a href="/">Neocities</a></li>
-      <li><input type="text" placeholder="Browse by tag..." /></li>
-      <li><a href=""><i class="fa fa-caret-left"></i> Prev</a></li>
-      <li><a href="">Next <i class="fa fa-caret-right"></i></a></li>
+      <li>
+        <a href="/browse" onclick="backToBrowse(<%= @current_page %>); return false">Neocities</a>
+      </li>
+      <% if @current_page %>
+        <li>
+          <form id="search_criteria" onsubmit="getPage(1); return false">
+            <input type="hidden" name="sort_by" value="<%= params[:sort_by] %>">
+            <input class="typeahead" name="tag" type="text" placeholder="Browse by tag..." value="<%= params[:tag] %>" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" dir="auto" />
+          </form>
+        </li>
+        <li>
+          <% if @current_page > 1 %>
+            <a href="" onclick="getPage(<%= @current_page - 1 %>); return false">
+              <i class="fa fa-caret-left"></i> Prev
+            </a>
+          <% end %>
+        </li>
+        <li>
+          <% if @current_page != @page_count %>
+            <a href="" onclick="getPage(<%= @current_page + 1 %>); return false">Next <i class="fa fa-caret-right"></i></a>
+          <% end %>
+        </li>
+      <% end %>
     </ul>
     <ul class="site-actions">
       <li><a href="/site/<%= @site.username %>"><i class="fa fa-user"></i> <strong><%= @site.username %></strong></a></li>
@@ -113,10 +141,28 @@
 
   <script src="/js/jquery-1.11.0.min.js"></script>
   <script src="/js/bootstrap.min.js"></script>
+  <script src="/js/typeahead.bundle.js"></script>
   <script>
     $(function() {
       $('#shareButton').popover({html: true})
     })
+
+    $('.typeahead').typeahead({
+      minLength: 2,
+      highlight: true
+    }, {
+      name: 'tags',
+      source: function(query, callback) {
+        $.get('/tags/autocomplete/'+query+'.json', function(data) {
+          var suggestions = JSON.parse(data)
+          var suggestionObjects = []
+          for(var i=0; i<suggestions.length; i++)
+            suggestionObjects.push({value: suggestions[i]})
+
+          callback(suggestionObjects)
+        })
+      }
+    })
   </script>
   </body>
 </html>