Django4.2

app/components/sidebar-component.html

@@ -1,4 +1,4 @@
 <aside class="col-sm-4 sidebar">
   <h2>Share your story</h2>
-  <p>Has Calisphere helped you advance your research, complete a project, or find something meaningful? We'd love to hear about it. Stories like yours help us obtain additional funding so we can continue to grow and improve the site.</p><p>Please <a href="/contact/" data-pjax="js-pageContent">send us a message</a>.</p>
+  <p>Has Calisphere helped you advance your research, complete a project, or find something meaningful? We'd love to hear about it. Stories like yours help us obtain additional funding so we can continue to grow and improve the site.</p><p>Please <a href="/contact/">send us a message</a>.</p>
 </aside>

app/components/static-about-component.html

@@ -7,31 +7,31 @@
 
 		<p>Welcome to Calisphere: your gateway to California’s remarkable digital collections. Calisphere provides free access to unique and historically important artifacts for research, teaching, and curious exploration. Discover over one million photographs, documents, letters, artwork, diaries, oral histories, films, advertisements, musical recordings, and more.</p>
 
-    <p>The collections on Calisphere have been digitized and contributed by <a href="/institutions/" data-pjax="js-pageContent">all ten campuses of the University of California</a> and other important <a href="/institutions/statewide-partners/" data-pjax="js-pageContent">libraries, archives, and museums throughout the state</a>.</p>
+    <p>The collections on Calisphere have been digitized and contributed by <a href="/institutions/">all ten campuses of the University of California</a> and other important <a href="/institutions/statewide-partners/">libraries, archives, and museums throughout the state</a>.</p>
 
     <h2>Using Calisphere</h2>
-    <p>For more information about how to use Calisphere and the materials you find here, please consult the <a href="/help/" data-pjax="js-pageContent">help page</a> and <a href="/terms/" data-pjax="js-pageContent">terms of use</a>. Special information about using Calisphere in the classroom can be found on our <a href="/for-educators" data-pjax="js-pageContent">For Educators page</a>.</p>
+    <p>For more information about how to use Calisphere and the materials you find here, please consult the <a href="/help/">help page</a> and <a href="/terms/">terms of use</a>. Special information about using Calisphere in the classroom can be found on our <a href="/for-educators">For Educators page</a>.</p>
 
     <h2>Add your collections</h2>
 
-    <p>Calisphere aggregates digital collections from libraries, archives, museums, historical societies, and other cultural heritage organizations in California. If you represent such an organization and are interested in contributing digital content to Calisphere, <a href="/contribute/" data-pjax="js-pageContent">click here to learn more</a>.</p>
+    <p>Calisphere aggregates digital collections from libraries, archives, museums, historical societies, and other cultural heritage organizations in California. If you represent such an organization and are interested in contributing digital content to Calisphere, <a href="/contribute/">click here to learn more</a>.</p>
 
     <h2>Subscribe to our newsletter</h2>
 
     <p>Be the first to hear about new collections and exhibitions, posters, and online research tips and resources! <a href="http://eepurl.com/cTM_Cb">Subscribe</a> if you'd like the latest news from Calisphere delivered right to your inbox.</p> 
 
     <h2>Free posters!</h2>
 
-    <p>We offer free posters for students, teachers, and librarians. Visit the <a href="/posters/" data-pjax="js-pageContent">poster order page</a> for more details.</p>
+    <p>We offer free posters for students, teachers, and librarians. Visit the <a href="/posters/">poster order page</a> for more details.</p>
 
     <h2>Spread the word</h2>
 
-    <p>Love Calisphere? Help us spread the word! Check out our <a href="/outreach/" data-pjax="js-pageContent">outreach tips and tools</a> for sharing Calisphere with others.</p>
+    <p>Love Calisphere? Help us spread the word! Check out our <a href="/outreach/">outreach tips and tools</a> for sharing Calisphere with others.</p>
 
     <h2>Our organization</h2>
 
     <p>Calisphere is a project of the <a href="http://libraries.universityofcalifornia.edu">University of California Libraries</a>, developed and maintained by the <a href="http://www.cdlib.org">California Digital Library</a>.</p>
-    <p>Information about Calisphere's technical framework can be found on our <a href="/help/#11" data-pjax="js-pageContent">help page</a>.</p>
+    <p>Information about Calisphere's technical framework can be found on our <a href="/help/#11">help page</a>.</p>
 
   </div>
 

app/components/static-outreach-component.html

@@ -64,7 +64,7 @@ <h3>Small banner</h3>
 	<div class="col-sm-4 static__sidebar">
 
   	<h2 class="static__sidebar-heading">Let’s work together</h2>
-    <p>We welcome opportunities to introduce Calisphere to diverse audiences. We are happy to supply language for articles and blog posts, and can be available for virtual and in-person presentations (subject to travel and staff resource considerations). Please <a href="/contact/" data-pjax=js-pageContent>contact us</a> with your outreach ideas.</p>
+    <p>We welcome opportunities to introduce Calisphere to diverse audiences. We are happy to supply language for articles and blog posts, and can be available for virtual and in-person presentations (subject to travel and staff resource considerations). Please <a href="/contact/">contact us</a> with your outreach ideas.</p>
 
   </div>
 

app/library-footer.html

@@ -21,7 +21,6 @@
   <script src="../node_modules/bootstrap-sass/assets/javascripts/bootstrap/modal.js"></script>
   <script src="../node_modules/bootstrap-sass/assets/javascripts/bootstrap/tooltip.js"></script>
   <script src="../node_modules/underscore/underscore.js"></script>
-  <script src="../node_modules/jquery-pjax/jquery.pjax.js"></script>
   <script src="../node_modules/slick-carousel/slick/slick.js"></script>
   <script src="../node_modules/picturefill/dist/picturefill.js"></script>
   <script src="../node_modules/mediaelement/build/mediaelement-and-player.js"></script>

app/scripts/ComplexCarouselView.js

@@ -35,17 +35,12 @@ var ComplexCarouselView = Backbone.View.extend({
     if ( e.which > 1 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) { return; }
 
     e.preventDefault();
-    $.pjax({
-      type: 'GET',
-      url: $(e.currentTarget).attr('href'),
-      container: '#js-itemContainer',
-      traditional: true,
-      scrollTo: 440
-    });
+    // pjax replacement - previously did a scrollTo 440px after this
+    document.location = $(e.currentTarget).attr('href')
   },
 
   // `click` triggered on `.js-component-link`    
-  // retrieve a particular component by adding order parameter to pjax call
+  // retrieve a particular component by adding order parameter
   getComponent: function(e) {
     // Middle click, cmd click, and ctrl click should open
     // links in a new tab as normal.
@@ -54,14 +49,9 @@ var ComplexCarouselView = Backbone.View.extend({
     var data_params = {order: $(e.currentTarget).data('item_id')};
 
     e.preventDefault();
-    $.pjax({
-      type: 'GET',
-      url: $(e.currentTarget).attr('href').split('?')[0],
-      container: '#js-itemContainer',
-      data: data_params,
-      traditional: true,
-      scrollTo: 440
-    });
+    // pjax replacement - previously did a scrollTo 440px after this
+    document.location = $(e.currentTarget).attr('href').split('?')[0] + 
+      '?' + $.param(data_params, true);
   },
 
   // `afterChange` triggered on `.carousel-complex__item-container`
@@ -137,19 +127,7 @@ var ComplexCarouselView = Backbone.View.extend({
     }
   },
 
-  // PJAX Event Handlers
-  // ----------------------
-
-  // on `pjax:end`, initialize the carousel if it hasn't already been initialized
-  pjax_end: function(that) {
-    return function() {
-      if ($('.carousel-complex').is(':hidden')) {
-        that.initialize();
-      }
-    };
-  },
-
-  // called by `setupComponents()` on `$(document).ready()` and `pjax:end`
+  // called by `setupComponents()` on `$(document).ready()`
   initialize: function() {
     this.initCarousel();
     // once the images have loaded, change slidesToShow and slidesToScroll to 
@@ -159,15 +137,9 @@ var ComplexCarouselView = Backbone.View.extend({
         that.changeWidth();
       };
     }(this)));
-
-    // bind pjax event handlers and save as this.bound_pjax_end so as to remove
-    // later with `destroy()`
-    this.bound_pjax_end = this.pjax_end(this);
-    $(document).on('pjax:end', '#js-pageContent', this.bound_pjax_end);
   },
 
   destroy: function() {
-    $(document).off('pjax:end', '#js-pageContent', this.bound_pjax_end);
     this.undelegateEvents();
   }
 });

app/scripts/Controller.js

@@ -8,8 +8,7 @@
 
 // `setupComponents()` acts as a controller to create/destroy JS components 
 // based on which selectors are available/no longer available in the DOM.
-// `setupComponents()` is called on `$(document).ready()` and also on `pjax:end`.
-// https://github.com/defunkt/jquery-pjax#events
+// `setupComponents()` is called on `$(document).ready()`
 
 var setupComponents = function(globalSearchForm, qm) {
   // **CALISPHERE COMPONENTS**
@@ -21,8 +20,7 @@ var setupComponents = function(globalSearchForm, qm) {
 
   // Calisphere components all have constructors (called using the new 
   // keyword here) as well as a `destroy` function. Additionally, each has 
-  // pjax event handlers (bound in that component's initializer, and unbound 
-  // in `destroy`), as well as various user-action handlers - click, submit, etc. 
+  // various user-action handlers - click, submit, etc. 
 
   if ($('#js-facet').length) {
     globalSearchForm.facetForm = globalSearchForm.facetForm || new FacetFormView({model: qm, popstate: globalSearchForm.popstate});

app/scripts/ExhibitPageView.js

@@ -26,22 +26,14 @@ var ExhibitPageView = Backbone.View.extend({
     // links in a new tab as normal.
     if ( e.which > 1 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) { return; }
     e.preventDefault();
-    $.pjax({
-      push: true,
-      scrollTo: false,
-      url: $(e.currentTarget).attr('href'),
-      container: '#js-exhibit-item__container'
-    });
+    // pjax replacement
+    document.location = $(e.currentTarget).attr('href');
   },
   // events: {'hidden.bs.modal #js-exhibit-item': 'exhibitView'}
   exhibitView: function() {
     if ($('#js-exhibit-item__container').children().length > 0) {
-      $.pjax({
-        push: true,
-        scrollTo: false,
-        url: $('#js-exhibit-item .close').data('url'),
-        container: '#js-exhibit-item__container'
-      });
+      // pjax replacement
+      document.location = $('#js-exhibit-item .close').data('url')
     }
   },
   // events: {'click .js-blockquote': 'showExhibitOverview'}
@@ -107,59 +99,11 @@ var ExhibitPageView = Backbone.View.extend({
     });
   },
 
-  // if an exhibit item is displayed *and* the event target /isn't/ the item container
-  // we're leaving the exhibit space and need to remove the modal backdrop before we go
-  // ('go to item page', 'contributing institution' and 'collection' links)
-  pjax_beforeReplace: function(e) {
-    if (e.target !== $('#js-exhibit-item__container')[0] && $('#js-exhibit-item').is(':visible')) {
-      $('.modal-backdrop').remove();
-      $('body').removeClass('modal-open');
-    }
-  },
-
-  // this specifies to use the pjax-exhibit-item.html template in the response
-  pjax_beforeSend: function(e, xhr) {
-    xhr.setRequestHeader('X-Exhibit-Item', 'true');
-  },
-
-  // this pjax_end_pageContent is called when the event is triggered for div#js-pageContent
-  // so this includes theme pages, lesson plans, exhibit pages, etc. not just item display
-  pjax_end: function(that) {
-    return function(xhr) {
-      // if the part getting replaced is js-exhibit-item__container, do modal stuff
-      if (xhr.target.id === 'js-exhibit-item__container') {
-        if ($('#js-exhibit-item__container').children().length && !$('#js-exhibit-item').is(':visible')) {
-          $('#js-exhibit-item').modal();
-        } else if (!$('#js-exhibit-item__container').children().length) {
-          $('#js-exhibit-item').modal('hide');
-        }
-      }
-
-      // if the part getting replaced is the page content (theme pages, lesson plans, exhibit pages, etc.)
-      // init carousels and truncate exhibit overview
-      if (xhr.target.id === 'js-pageContent') {
-        that.initCarousel();
-        $('.js-exhibit__overview').dotdotdot({callback: function(isTruncated) {
-          if (isTruncated) {
-            $('#js-exhibit__overview').text('Read full exhibition overview');
-          } else {
-            $('.js-exhibit__overview').css('height', 'auto');
-          }
-        }});
-      }
-    };
-  },
-
   initialize: function() {
     if ($('#js-exhibit-item__container').children().length) {
       $('#js-exhibit-item').modal();
     }
 
-    this.bound_pjax_end = this.pjax_end(this);
-    $(document).on('pjax:beforeSend', '#js-exhibit-item__container', this.pjax_beforeSend);
-    $(document).on('pjax:beforeReplace', '#js-pageContent', this.pjax_beforeReplace);
-    $(document).on('pjax:end', '#js-pageContent', this.bound_pjax_end);
-
     this.initCarousel();
     $('.js-exhibit__overview').dotdotdot({callback: function(isTruncated) {
       if (isTruncated) {
@@ -171,9 +115,6 @@ var ExhibitPageView = Backbone.View.extend({
   },
 
   destroy: function() {
-    $(document).off('pjax:beforeSend', '#js-exhibit-item__container', this.pjax_beforeSend);
-    $(document).off('pjax:beforeReplace', '#js-pageContent', this.pjax_beforeReplace);
-    $(document).off('pjax:end', '#js-pageContent', this.bound_pjax_end);
     this.undelegateEvents();
   }
 });

app/scripts/FacetFormView.js

@@ -149,10 +149,10 @@ var FacetFormView = Backbone.View.extend({
       }
 
       e.preventDefault();
-      $.pjax({
-        url: $(e.currentTarget).attr('href'),
-        container: '#js-pageContent'
-      });
+      // TODO: w/ pjax replacement, persist query manager state
+      // add this.model.toJSON() to local storage? 
+      // add this.model.toJSON() to the url w/ $.param(this.model.toJSON(), true);?
+      document.location = $(e.currentTarget).attr('href')
     }
   },
 
@@ -253,12 +253,9 @@ var FacetFormView = Backbone.View.extend({
 
   // **PJAX CALL TO PERFORM THE SEARCH** 
   facetSearch: function() {
-    $.pjax({
-      url: $('#js-facet').attr('action'),
-      container: '#js-pageContent',
-      data: this.model.toJSON(),
-      traditional: true
-    });
+    // pjax replacement
+    document.location = $('#js-facet').attr('action') + '?' + 
+      $.param(this.model.toJSON(), true);
   },
 
   // **RELATED COLLECTIONS**
@@ -357,51 +354,7 @@ var FacetFormView = Backbone.View.extend({
     }
   },
 
-  // PJAX EVENT HANDLERS
-  // -----------------------
-
-  // called on `pjax:end`, only when a `FacetFormView` already exists
-  // so the user has already visited a search results page
-  pjax_end: function(that) {
-    return function() {
-      // since this is still called on pjax:end when navigating away from 
-      // the facet form to something else, we need to check for our
-      // `#js-facet` selector
-      if ($('#js-facet').length) {
-        if (that.popstate === 'back' || that.popstate === 'forward') {
-          // when a user navigates 'back' to a form, the form is still set
-          // in the state the user left the form in, which doesn't reflect
-          // the results shown in search results, so we reset the form
-          // to reflect the state the DOM left the form in, last we got a 
-          // roundtrip from the server. 
-          _.each($('form'), function(form) {
-            form.reset();
-          });
-
-          // get the query from the DOM, and silently set the model so as 
-          // to avoid calling `render` - (no need to redraw the page; the 
-          // page has already been drawn)
-          var queryObj;
-          queryObj = that.model.getQueryFromDOM('js-facet');
-          that.model.set(queryObj, {silent: true});
-          that.popstate = null;
-        }
-
-        // we do need to redraw the tooltips and the select/deselect all 
-        // buttons to reflect the current query state, though
-        that.toggleSelectDeselectAll();
-        that.toggleTooltips();
-      }
-    };
-  },
-
-  pjax_popstate: function(that) {
-    return function(e) {
-      that.popstate = e.direction;
-    };
-  },
-
-  // called via `setupComponents()` on `document.ready()` and `pjax:end`
+  // called via `setupComponents()` on `document.ready()`
   initialize: function(opts) {
     // sets `this.render` to listen to whenever `this.model` (qm) fires a `change` event
     this.listenTo(this.model, 'change', this.render);
@@ -411,22 +364,9 @@ var FacetFormView = Backbone.View.extend({
     // retrieve query from DOM,
     // toggle tooltips and select/deselect all links
     this.popstate = opts.popstate ? opts.popstate : null;
-    this.pjax_end(this)();
-
-    // bind pjax handlers to `this`   
-    // we need to save the bound handler to `this.bound_pjax_end` so we can 
-    // later remove these handlers by the same name in `destroy`
-    this.bound_pjax_end = this.pjax_end(this);
-    this.bound_pjax_popstate = this.pjax_popstate(this);
-    $(document).on('pjax:end', '#js-pageContent', this.bound_pjax_end);
-    $(document).on('pjax:popstate', '#js-pageContent', this.bound_pjax_popstate);
   },
 
   destroy: function() {
-    // remove bound pjax event handlers
-    $(document).off('pjax:end', '#js-pageContent', this.bound_pjax_end);
-    $(document).off('pjax:popstate', '#js-pageContent', this.bound_pjax_popstate);
-
     // stop calling `this.render` whenever `this.model` (qm) fires a `change` event
     this.stopListening();
     // undelegate all user event handlers specified in `this.events`