Merge pull request #3590 from sul-dlss/jsbundling

Bundle javascript with Jsbundling

.gitignore

@@ -32,3 +32,8 @@ config/environments/*.local.yml
 /.ruby-version
 /.byebug_history
 /spec/examples.txt
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
+/node_modules

Gemfile

@@ -108,3 +108,5 @@ gem 'global_alerts'
 gem 'view_component', '< 2.75'
 
 gem "parslet", "~> 2.0"
+
+gem "jsbundling-rails", "~> 1.2"

Gemfile.lock

@@ -322,6 +322,8 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    jsbundling-rails (1.2.1)
+      railties (>= 6.0.0)
     json (2.7.1)
     jwt (2.7.1)
     kaminari (1.2.2)
@@ -692,6 +694,7 @@ DEPENDENCIES
   global_alerts
   honeybadger
   jbuilder (~> 2.7)
+  jsbundling-rails (~> 1.2)
   launchy
   leaflet-rails
   letter_opener

Procfile.dev

@@ -0,0 +1,2 @@
+web: env RUBY_DEBUG_OPEN=true bin/rails server
+js: yarn build --watch

README.md

@@ -29,17 +29,17 @@ To start Solr, you can use the `solr_wrapper` command. However, if starting from
 
 Start the rails app
 
-    $ rails s
+    $ bin/dev
 
 ## Getting data in development
 
 For fixture data, you can run `solr_wrapper` locally as above, and populate sample data using `rake searchworks:fixtures`
 
 ## "Logging in" as a User in development
 
-Given that this app is using shibboleth + devise for login, it can be tricky to get a user context set.  The user itself can be set by starting rails with a `REMOTE_USER` env var set (e.g. `REMOTE_USER=jstanford rails s`).
+Given that this app is using shibboleth + devise for login, it can be tricky to get a user context set.  The user itself can be set by starting rails with a `REMOTE_USER` env var set (e.g. `REMOTE_USER=jstanford bin/dev`).
 
-If you need to set your affiliation attribute (e.g. `stanford:staff`) for things like testing article search, you can start rails with a `suAffiliation` env var set (e.g. `REMOTE_USER=jstanford suAffiliation=stanford:staff rails s`).
+If you need to set your affiliation attribute (e.g. `stanford:staff`) for things like testing article search, you can start rails with a `suAffiliation` env var set (e.g. `REMOTE_USER=jstanford suAffiliation=stanford:staff bin/dev`).
 
 One caveat to this is that you may still need to go through the login path `/sso/login` in order to ensure proper session setup (e.g. eds guest flag set).
 

app/assets/config/manifest.js

@@ -3,3 +3,4 @@
 //= link application.js
 //= link application.css
 //= link print.css
+//= link_tree ../builds

app/assets/javascripts/alternate_catalog.js → app/javascript/alternate_catalog.js

@@ -1,5 +1,5 @@
-(function (global) {
-  var AlternateCatalog = {
+const AlternateCatalog = (function (global) {
+  return {
     container: null,
     titleElement: null,
 
@@ -120,7 +120,6 @@
     return facetLinks
   }
 
-  global.AlternateCatalog = AlternateCatalog;
 }(this));
 
 Blacklight.onLoad(function () {

app/javascript/application.js

@@ -0,0 +1,61 @@
+// Entry point for the build script in your packageon
+
+import "rails-ujs";
+import "turbolinks";
+import "./vendor/responsiveTruncator";
+import "./vendor/trunk8";
+import "./vendor/jquery-scrollspy";
+import "leaflet";
+// import "popper.js";
+// import "bootstrap";
+import "blacklight-frontend/app/assets/javascripts/blacklight/blacklight";
+import "blacklight-range-limit";
+import "blacklight-range-limit/vendor/assets/javascripts/bootstrap-slider"
+
+import "./alternate_catalog";
+import "./analytics";
+import "./article";
+import "./async_collection_members";
+import "./backend_lookup";
+import "./blacklight_hierarchy";
+import "./bootstrap-modal-addon";
+import "./course_reserves";
+import "./eds_range_limit";
+import "./embedded-call-number-browse";
+import "./exhibitPanel";
+import "./facet-options-checkboxes";
+import "./feedback_form";
+import "./home_page_facet_collapse";
+import "./jquery.accordion-section";
+import "./jquery.clear-input-text";
+import "./jquery.libraryh3lp";
+import "./jquery.live-lookup";
+import "./jquery.long-lists";
+import "./jquery.managed-purl";
+import "./jquery.plug-google-content";
+import "./jquery.preview-brief";
+import "./jquery.preview-embed-browse";
+import "./jquery.preview-filmstrip";
+import "./jquery.preview-gallery";
+import "./jquery.purl-embed";
+import "./jquery.side-nav-minimap";
+import "./jquery.stackmap";
+import "./jquery.turbolinks-cursor";
+import "./location-hours";
+import "./preview-content";
+import "./recent-selections";
+import "./search-context";
+import "./select-all";
+import "./sfx-panel";
+import "./skip-to-nav";
+import "./tooltip";
+import "./truncate";
+import "./update-hidden-inputs-by-checkbox";
+
+// Prevent the back-button from trying to add a second instance of recaptcha
+// See https://github.com/ambethia/recaptcha/issues/217#issuecomment-615221808
+document.addEventListener("turbolinks:before-cache", function () {
+  // On the articles page there is a feedback and a connection form.
+  // Both have a recaptcha that needs clearing.
+  document.querySelectorAll(".g-recaptcha").forEach((elem) => elem.innerHTML = "");
+});

app/javascript/eds_range_limit.js

@@ -0,0 +1,67 @@
+const EdsRangeLimit = {
+  init: function(el) {
+    var $el = $(el);
+    var data = $el.data();
+    var $begin = $el.find('input.range_begin');
+    var $end = $el.find('input.range_end');
+    var min = data.edsDateMin;
+    var max = data.edsDateMax;
+    var begin = data.edsDateBegin; 
+    var end = data.edsDateEnd;
+    var $target = $($el.find('.eds-slider')[0]);
+
+    // Much of this is a copy from BlacklightRangeLimit so that the experience
+    // stays consistant
+    var placeholder_input = $('<input type="text" data-slider-placeholder="true" style="width:100%;">').appendTo($target);
+
+    if (placeholder_input.slider !== undefined) {
+      placeholder_input.slider({
+        min: data.edsDateMin,
+        max: data.edsDateMax,
+        value: [begin, end],
+        tooltip: 'hide'
+      });
+    }
+
+    // Update css to 100%
+    $target.find('.slider').css('width', '100%');
+
+    $begin.val(begin);
+    $end.val(end);
+
+    // Handle slider changes
+    placeholder_input.slider().on('slide', function(e) {
+      $begin.val(e.value[0])
+      $end.val(e.value[1])
+    });
+
+    // Handle when form updates
+    $begin.change(function() {
+      var val = BlacklightRangeLimit.parseNum($(this).val());
+      if ( isNaN(val)  || val < min) {
+        //for weird data, set slider at min           
+        val = min;
+      }
+      var values = placeholder_input.data('slider').getValue();
+      values[0] = val;
+      placeholder_input.slider('setValue', values);
+    });
+
+    $end.change(function() {
+      var val = BlacklightRangeLimit.parseNum($(this).val());
+      if ( isNaN(val)  || val > max) {
+        //for weird data, set slider at max           
+        val = max;
+      }
+      var values = placeholder_input.data('slider').getValue();
+      values[1] = val;
+      placeholder_input.slider('setValue', values);
+    });
+  }
+}
+
+Blacklight.onLoad(function() {
+  $('.eds_range_slider').each(function(i, element) {
+    EdsRangeLimit.init(element);
+  })
+});

app/assets/javascripts/embedded-call-number-browse.js → app/javascript/embedded-call-number-browse.js

@@ -1,3 +1,5 @@
+import PreviewContent from './preview-content'
+
 (function($) {
 
   /*

app/assets/javascripts/exhibitPanel.js → app/javascript/exhibitPanel.js

@@ -1,8 +1,4 @@
-(function( global) {
-  'use strict';
-  var ExhibitsPanel;
-
-  ExhibitsPanel = {
+const ExhibitsPanel = {
     panel: null,
     druid: null,
     exhibitsHost: null,
@@ -138,10 +134,7 @@
 
       return wrapper;
     }
-  }
-
-  global.ExhibitsPanel = ExhibitsPanel;
-})(this);
+}
 
 Blacklight.onLoad(function() {
   $('[data-behavior="exhibits-panel"]').each(function(i, element) {

app/assets/javascripts/jquery.preview-brief.js → app/javascript/jquery.preview-brief.js

@@ -1,3 +1,5 @@
+import PreviewContent from './preview-content'
+
 (function($) {
 
   /*

app/assets/javascripts/jquery.preview-embed-browse.js → app/javascript/jquery.preview-embed-browse.js

@@ -1,3 +1,5 @@
+import PreviewContent from './preview-content'
+
 (function($) {
 
   /*

app/assets/javascripts/jquery.preview-filmstrip.js → app/javascript/jquery.preview-filmstrip.js

@@ -1,3 +1,5 @@
+import PreviewContent from './preview-content'
+
 (function($) {
 
   /*

app/assets/javascripts/jquery.preview-gallery.js → app/javascript/jquery.preview-gallery.js

@@ -1,3 +1,5 @@
+import PreviewContent from './preview-content'
+
 (function($) {
 
   /*

app/assets/javascripts/preview-content.js → app/javascript/preview-content.js

@@ -3,7 +3,7 @@
   caching of fetched preview content in browser
  */
 
-var PreviewContent = (function() {
+const PreviewContent = (function() {
 
   var useCache = true,
     insertType;
@@ -95,3 +95,5 @@ var PreviewContent = (function() {
   };
 
 }());
+
+export default PreviewContent;