WIP refactor pagination and search controls as a toggle

Author: barmintor

app/assets/stylesheets/stylesheets/_base_layout.scss

@@ -267,13 +267,12 @@ a {
 		padding-bottom: 0;
 		margin-top: 0;
 		margin-bottom: 0;
-		background-color: $primary;
-		color:map-get($theme-text-colors, 'primary');
-		border-color: map-get($theme-border-colors, 'primary');
 		select {
-			background-color: inherit;
+			background-color: $primary;
+			color:map-get($theme-text-colors, 'primary');
+			border-color: map-get($theme-border-colors, 'primary');
 		}
-		.btn {
+		.btn-left {
 			border-top-left-radius:0.25rem;
 			border-bottom-left-radius:0.25rem;
 		}

app/assets/stylesheets/stylesheets/shared/shared.css

@@ -17,3 +17,10 @@ body.empty {
 #q-filter {
   display: none;
 }
+
+/** collapse UI heleprs */
+.btn[aria-expanded="true"] > .toggle-pressed { display: none }
+.btn[aria-expanded="true"] > .toggle-unpressed { display: inline-block;  }
+
+.btn[aria-expanded="false"] > .toggle-pressed { display: inline-block }
+.btn[aria-expanded="false"] > .toggle-unpressed { display: none;  }

app/components/dcv/response/collapsible_pagination_component.rb

@@ -2,9 +2,13 @@
 
 module Dcv::Response
   class CollapsiblePaginationComponent < Blacklight::Response::PaginationComponent
-    def render?
+    def will_render?(controller:, helpers:)
       return false unless controller.has_search_parameters?
       @response && helpers.show_pagination? and @response.total_pages > 1
     end
+
+    def render?
+      will_render?(controller: controller, helpers: helpers)
+    end
   end
 end

app/components/dcv/search_bar/catalog_component.html.erb

@@ -2,21 +2,22 @@
     <%= render_hash_as_hidden_fields(@params.except(:q, :search_field, :qt, :page, :utf8, :format)) %>
 
     <div class="input-group flex-sm-row flex-md-fill">
-      <%= render Dcv::Response::CollapsiblePaginationComponent.new(response: helpers.instance_variable_get(:@response), theme: 'dcv_collapsible', outer_window: 1, window: 1 ) %>
-      <%= render Dcv::SearchContext::CollapsiblePaginationComponent.new(search_context: helpers.instance_variable_get(:@search_context), search_session: helpers.instance_variable_get(:@search_session)) %>
+      <%= render pagination_component %>
+      <div class="input-group-prepend collapseSearch flex-fill<%= ' p-0 collapse' if pagination_component.render?%>" id="collapseQuery">
       <% unless search_fields.empty? %>
         <span class="input-group-append">
           <%= hidden_field_tag(:search_field, h(params[:search_field] || search_fields.first[1]), :title => t('blacklight.search.form.search_field.title')) %>
         </span>
       <% end %>
-      <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ?  t(:"dlc.search_placeholder.new.#{controller.controller_name}", default: :'dlc.search_placeholder.new.default').html_safe : t(:"dlc.search_placeholder.modified.#{controller.controller_name}", default: :'dlc.search_placeholder.modifed.default').html_safe), :class => "search_q q form-control", :id => "q", aria: { label: t('blacklight.search.form.search.label')} %>
+      <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ?  t(:"dlc.search_placeholder.new.#{controller.controller_name}", default: :'dlc.search_placeholder.new.default').html_safe : t(:"dlc.search_placeholder.modified.#{controller.controller_name}", default: :'dlc.search_placeholder.modifed.default').html_safe), :class => "search_q q flex-fill", :id => "q", aria: { label: t('blacklight.search.form.search.label')} %>
       <div class="input-group-append">
         <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-secondary reset-btn' if query_has_constraints? %>
         <button class="btn btn-primary search-btn" type="submit" aria-label="Submit">
           <span class="hidden-xs"><%= (current_page?(root_url)? t('blacklight.search.form.submit') : '') %></span>
           <span class="fa fa-search"></span>
         </button>
       </div>
+      </div>
     </div>
 
   <% end %>

app/components/dcv/search_bar/default_component.html.erb

@@ -2,32 +2,33 @@
     <%= render_hash_as_hidden_fields(@params.except(:q, :search_field, :qt, :page, :utf8, :format, :slug, :site_slug)) %>
     <%= render_hash_as_hidden_fields(search_action_params) %>
     <div class="input-group flex-sm-row flex-md-fill">
-      <%= render Dcv::Response::CollapsiblePaginationComponent.new(response: helpers.instance_variable_get(:@response), theme: 'dcv_collapsible', outer_window: 1, window: 1 ) %>
-      <%= render Dcv::SearchContext::CollapsiblePaginationComponent.new(search_context: helpers.instance_variable_get(:@search_context), search_session: helpers.instance_variable_get(:@search_session)) %>
+      <%= render pagination_component %>
+      <div class="input-group-prepend collapseSearch flex-fill<%= ' p-0 collapse' if pagination_component.render?%>" id="collapseQuery">
       <% unless search_fields.empty? %>
-        <span class="input-group-prepend p-0<%= ' hidden' if search_fields.length == 1 %>">
+        <span class="input-group-append p-0<%= ' hidden' if search_fields.length == 1 %>">
           <label for="search_field" class="sr-only"><%= t('blacklight.search.form.search_field.label') %></label>
           <%= select_tag(
               :search_field,
               options_for_select(
                 search_fields,
                 h(params[:search_field])
               ),
-              title: t('blacklight.search.form.search_field.title'), class: 'btn search-btn btn-primary'
+              title: t('blacklight.search.form.search_field.title'), class: 'btn search-btn btn-primary rounded-0'
             )
           %>
           <span class="sr-only"><%= t('blacklight.search.form.search_field.post_label') %></span>
         </span>
       <% end %>
       <label for="q" class="sr-only"><%= t('blacklight.search.form.q') %></label>
-      <%= text_field_tag :q, params[:q], :placeholder => search_placeholder_text, :class => "search_q q form-control", :id => "q" %>
+      <%= text_field_tag :q, params[:q], :placeholder => search_placeholder_text, :class => "search_q q flex-fill", :id => "q" %>
       <div class="input-group-append">
-    <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-outline-secondary reset-btn' if query_has_constraints? %>
+        <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-outline-secondary reset-btn' if query_has_constraints? %>
         <button class="btn btn-primary search-btn" type="submit" aria-label="Submit">
           <span class="hidden-xs"><%= (current_page?(root_url)? t('blacklight.search.form.submit') : '') %></span>
           <span class="fa fa-search"></span>
         </button>
       </div>
+      </div>
     </div>
 
   <% end %>

app/components/dcv/search_bar/default_component.rb

@@ -20,5 +20,22 @@ def start_over_path
       end
       URI::HTTP.build(path: path, query: query.join('&')).request_uri
     end
+
+    def pagination_component
+      return @pagination_component unless @pagination_component.nil?
+      @pagination_component = begin
+        _comp = Dcv::Response::CollapsiblePaginationComponent.new(
+          response: helpers.instance_variable_get(:@response), theme: 'dcv_collapsible',
+          outer_window: 1, window: 1
+        )
+        unless _comp.will_render?(controller: controller, helpers: helpers)
+          _comp = Dcv::SearchContext::CollapsiblePaginationComponent.new(
+            search_context: helpers.instance_variable_get(:@search_context),
+            search_session: helpers.instance_variable_get(:@search_session)
+          )
+        end
+        _comp
+      end
+    end
   end
 end

app/components/dcv/search_bar/durst_component.html.erb

@@ -5,9 +5,9 @@
     <%= render_hash_as_hidden_fields(params_for_new_search) %>
 
     <div class="input-group flex-sm-row flex-md-fill">
+      <%= render pagination_component %>
+      <div class="input-group-prepend collapseSearch flex-fill<%= ' p-0 collapse' if pagination_component.render?%>" id="collapseQuery">
       <input type="hidden" name="search_field" value="all_text_teim">
-      <div class="input-group-prepend">
-
         <button id="format_type_select" type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Formats
           <span class="caret"></span>
           <span class="sr-only">Toggle Dropdown</span>
@@ -20,7 +20,7 @@
             </ul>
       </div>
       <label for="q" class="sr-only"><%= t('blacklight.search.form.q') %></label>
-      <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ? 'Search Postcards, Maps, Photographs, Books, Etc&hellip;'.html_safe : 'Modify current search&hellip;'.html_safe), :class => "search_q q form-control", :id => "q", :tabindex => "1" %>
+      <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ? 'Search Postcards, Maps, Photographs, Books, Etc&hellip;'.html_safe : 'Modify current search&hellip;'.html_safe), :class => "search_q q flex-fill", :id => "q", :tabindex => "1" %>
       <div class="input-group-append">
         <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-secondary reset-btn' if query_has_constraints? %>
         <button class="btn btn-primary search-btn" type="submit">

app/components/dcv/search_bar/repositories_component.html.erb

@@ -2,8 +2,8 @@
   <%= render_hash_as_hidden_fields(@params.except(:q, :search_field, :repository_id, :qt, :page, :utf8, :format).tap { |p| p[:'f[content_availability][]'] = @content_availability if @content_availability }) %>
 
   <div class="input-group flex-fill">
-    <%= render Dcv::Response::CollapsiblePaginationComponent.new(response: helpers.instance_variable_get(:@response), theme: 'dcv_collapsible', outer_window: 1, window: 1 ) %>
-    <%= render Dcv::SearchContext::CollapsiblePaginationComponent.new(search_context: helpers.instance_variable_get(:@search_context), search_session: helpers.instance_variable_get(:@search_session)) %>
+    <%= render pagination_component %>
+    <div class="input-group-prepend collapseSearch flex-fill<%= ' p-0 collapse' if pagination_component.render?%>" id="collapseQuery">
     <% unless search_fields.empty? %>
     <span class="input-group-prepend hidden"> <%# to be removed. might need hidde %>
       <label for="search_field" class="sr-only"><%= t('blacklight.search.form.search_field.label') %></label>
@@ -12,13 +12,14 @@
     </span>
     <% end %>
     <label for="q" class="sr-only"><%= t('blacklight.search.form.q') %></label>
-    <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ?  t(:"dlc.search_placeholder.new.#{controller.controller_name}", default: :'dlc.search_placeholder.new.default').html_safe : t(:"dlc.search_placeholder.modified.#{controller.controller_name}", default: :'dlc.search_placeholder.modifed.default').html_safe), :class => "search_q q form-control", :id => "q" %>
+    <%= text_field_tag :q, params[:q], :placeholder => (!query_has_constraints? ?  t(:"dlc.search_placeholder.new.#{controller.controller_name}", default: :'dlc.search_placeholder.new.default').html_safe : t(:"dlc.search_placeholder.modified.#{controller.controller_name}", default: :'dlc.search_placeholder.modifed.default').html_safe), :class => "search_q q flex-fill", :id => "q" %>
     <div class="input-group-append">
   <%= link_to '<i class="fa fa-remove"></i>'.html_safe, start_over_path, :title => 'Start Over', :class => 'btn btn-secondary reset-btn' if query_has_constraints? %>
       <button class="btn btn-primary search-btn" type="submit" aria-label="Submit">
         <span class="fa fa-search"></span>
       </button>
     </div>
+    </div>
   </div>
 
 <% end %>

app/components/dcv/search_context/pagination_component.rb

@@ -2,5 +2,8 @@
 
 module Dcv::SearchContext
   class PaginationComponent < Blacklight::SearchContextComponent
+    def will_render?(**_args)
+      render?
+    end
   end
 end

app/controllers/application_controller.rb

@@ -98,4 +98,9 @@ def on_client_disconnect
   def on_page_not_found
     render(status: :not_found, plain: "Page Not Found")
   end
+
+  # this is overridden in controller that mixin Blacklight::Catalog
+  def has_search_parameters?
+    false
+  end
 end

app/views/kaminari/dcv_collapsible/_paginator.html.erb

@@ -15,9 +15,12 @@
    As of Kaminari 0.15, this paginator doesn't have access to the original collection/scope, so it can't render the page entries info directly.
 -%>
 <div class="input-group-prepend">
-  <button class="btn btn-info" type="button" data-toggle="collapse" data-target="#collapsePag" aria-expanded="true" aria-controls="collapsePag" aria-pressed="true"><i class="previous fa fa-exchange-alt" title="Navigate search results" data-toggle="tooltip" data-original-title="Navigate search results"></i></button>
+  <button class="btn btn-info btn-left" type="button" data-toggle="collapse" data-target=".collapseSearch" aria-expanded="false" aria-controls="collapseQuery" aria-pressed="false">
+    <i class="previous fa fa-exchange-alt toggle-unpressed" title="Navigate search results" data-toggle="tooltip" data-original-title="Navigate search results"></i>
+    <i class="previous fa fa-search toggle-pressed" title="Start a quick search" data-toggle="tooltip" data-original-title="Start a quick search"></i>
+  </button>
 </div>
-<div class="collapse show width input-group-prepend" id="collapsePag">
+<div class="collapse show width input-group-prepend collapseSearch p-0 flex-fill" id="collapsePag">
   <% if total_pages > 1 -%>
     <%# #render checks if total_pages > 1, so we can't put our fallback 
     in here .. -%>