Namespace and camelCase some JS functions

Author: fbacall

app/assets/javascripts/application.js

@@ -41,45 +41,41 @@
 //= require ol
 //= require ol-geocoder
 
-function redirect_to_sort_url(){
-    url = new URL(window.location.href);
-    url.searchParams.set(
-        "sort",
-        $("#sort").find(":selected").val()
-    );
-    window.location.replace(url.toString());
-}
-
-function apply_per_page(){
-    url = new URL(window.location.href);
-    url.searchParams.set(
-        "per_page",
-        $("#per_page").val()
-    );
-    window.location.replace(url.toString());
-}
-
-function redirect_with_updated_search(param, paramVal) {
-    url = new URL(window.location.href);
-    // special case for empty range types
-    if (param == 'start' && paramVal == '/') {
-        url.searchParams.delete(param);
-    } else {
-        url.searchParams.set(param, paramVal);
-    }
-    window.location.replace(url.toString());
-}
-
-function reposition_tiles(container, tileClass){
-    var $container = $("." + container);
-
-    $container.imagesLoaded(function () {
-        $container.masonry({
-            // options...
-            itemSelector: "." + tileClass,
-            columnWidth: 20
+const Index = {
+    applySorting: function () {
+        Index.setParam("sort", $("#sort").val());
+    },
+
+    applyPerPage: function () {
+        Index.setParam("per_page", $("#per_page").val());
+    },
+
+    applyDateParam: function (param, value) {
+        const url = new URL(window.location.href);
+        if (param === 'start' && value === '/') {
+            url.searchParams.delete(param);
+        } else {
+            url.searchParams.set(param, value);
+        }
+        window.location.replace(url.toString());
+    },
+
+    setParam: function (param, value) {
+        const url = new URL(window.location.href);
+        url.searchParams.set(param, value);
+        window.location.replace(url.toString());
+    },
+
+    repositionTiles(containerSelector, itemSelector) {
+        const container = $(containerSelector);
+        container.imagesLoaded(function () {
+            container.masonry({
+                // options...
+                itemSelector: itemSelector,
+                columnWidth: 20
+            });
         });
-    });
+    }
 }
 
 // Perform an ajax request to load the calendar and replace the contents
@@ -161,7 +157,7 @@ document.addEventListener("turbolinks:load", function(e) {
     $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
         addTabToFilters(e.target.href.split('#').pop());
         // and reposition masonry tiles
-        reposition_tiles('masonry', 'masonry-brick');
+        Index.repositionTiles('.masonry', '.masonry-brick');
     });
 
     // Manually trigger bootstrap tab history (we should probably remove the dependency and reimplement in a turbolink-compatible way)
@@ -177,12 +173,14 @@ document.addEventListener("turbolinks:load", function(e) {
 
     // Masonry
     $(".nav-tabs a").on("shown.bs.tab", function(e) {
-        reposition_tiles('masonry', 'masonry-brick');
+        Index.repositionTiles('.masonry', '.masonry-brick');
     });
+
     $(window).on("orientationchange", function() {
-        reposition_tiles("masonry", "masonry-brick");
+        Index.repositionTiles('.masonry', '.masonry-brick');
     });
-    reposition_tiles("masonry", "masonry-brick");
+
+    Index.repositionTiles('.masonry', '.masonry-brick');
 
     new Clipboard(".clipboard-btn");
 

app/views/search/common/_facet_sidebar_date_filter.html.erb

@@ -10,9 +10,9 @@
     </li>
 
     <li class="nav-item active" style="display: none; font-size: 15px; text-align: center;">
-      <input type="date" name="<%= facet_field %>_lb" value="<%= lb %>" style="width: 47%;" onchange="redirect_with_updated_search('<%= facet_field %>', this.value + '/' + '<%= ub %>');">
+      <input type="date" name="<%= facet_field %>_lb" value="<%= lb %>" style="width: 47%;" onchange="Index.applyDate('<%= facet_field %>', this.value + '/' + '<%= ub %>');">
        - 
-      <input type="date" name="<%= facet_field %>_ub" value="<%= ub %>" style="width: 47%;" onchange="redirect_with_updated_search('<%= facet_field %>', '<%= lb %>' + '/' + this.value);">
+      <input type="date" name="<%= facet_field %>_ub" value="<%= ub %>" style="width: 47%;" onchange="Index.applyDate('<%= facet_field %>', '<%= lb %>' + '/' + this.value);">
     </li>
   </ul>
 </li>

app/views/search/common/_search_panel.html.erb

@@ -29,7 +29,7 @@
         </div>
         <div class="search-results-per-page form-inline pull-right">
             <label for="per_page"><%= t('sidebar.per_page') %></label>
-            <%= select_tag('per_page', per_page_options_for_select, onchange: 'apply_per_page()', class: 'font-size-sm') %>
+            <%= select_tag('per_page', per_page_options_for_select, onchange: 'Index.applyPerPage()', class: 'font-size-sm') %>
         </div>
       <% end %>
     </div>

app/views/search/common/_sort_by.html.erb

@@ -29,7 +29,7 @@ e.g.
       <li class="facet-sort-group">
         <span class="icon icon-lg sort-icon facet-sort-icon"></span>
         <%= select_tag(:sort, options_for_select(options, @sort_by),
-                       onchange: 'redirect_to_sort_url()', class: 'form-control facet-select font-size-sm facet-sort')
+                       onchange: 'Index.applySorting()', class: 'form-control facet-select font-size-sm facet-sort')
         %>
       </li>
     </ul>