https://us-rse.org/assets/js/app.js

1/* ==========================================================================
2   jQuery plugin settings and other scripts
3   ========================================================================== */
4
5$(document).ready(function() {
6
7  // Follow menu drop down
8  $(".author__urls-wrapper button").on("click", function() {
9    $(".author__urls").toggleClass("is--visible");
10    $(".author__urls-wrapper button").toggleClass("open");
11  });
12
13  // Close search screen with Esc key
14  $(document).keyup(function(e) {
15    if (e.keyCode === 27) {
16      if ($(".initial-content").hasClass("is--hidden")) {
17        $(".search-content").toggleClass("is--visible");
18        $(".initial-content").toggleClass("is--hidden");
19      }
20    }
21  });
22
23  // Search toggle
24  $(".search__toggle").on("click", function() {
25    $(".search-content").toggleClass("is--visible");
26    $(".initial-content").toggleClass("is--hidden");
27    // set focus on input
28    setTimeout(function() {
29      $(".search-content input").focus();
30    }, 400);
31  });
32
33  // Smooth scrolling
34  var scroll = new SmoothScroll('a[href*="#"]', {
35    offset: 20,
36    speed: 400,
37    speedAsDuration: true,
38    durationMax: 500
39  });
40
41  // Gumshoe scroll spy init
42  if($("nav.toc").length > 0) {
43    var spy = new Gumshoe("nav.toc a", {
44      // Active classes
45      navClass: "active", // applied to the nav list item
46      contentClass: "active", // applied to the content
47
48      // Nested navigation
49      nested: false, // if true, add classes to parents of active link
50      nestedClass: "active", // applied to the parent items
51
52      // Offset & reflow
53      offset: 20, // how far from the top of the page to activate a content area
54      reflow: true, // if true, listen for reflows
55
56      // Event support
57      events: true // if true, emit custom events
58    });
59  }
60
61  // add lightbox class to all image links
62  $(
63    "a[href$='.jpg'],a[href$='.jpeg'],a[href$='.JPG'],a[href$='.png'],a[href$='.gif'],a[href$='.webp']"
64  ).addClass("image-popup");
65
66  // Magnific-Popup options
67  $(".image-popup").magnificPopup({
68    // disableOn: function() {
69    //   if( $(window).width() < 500 ) {
70    //     return false;
71    //   }
72    //   return true;
73    // },
74    type: "image",
75    tLoading: "Loading image #%curr%...",
76    gallery: {
77      enabled: true,
78      navigateByImgClick: true,
79      preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
80    },
81    image: {
82      tError: '<a href="%url%">Image #%curr%</a> could not be loaded.'
83    },
84    removalDelay: 500, // Delay in milliseconds before popup is removed
85    // Class that is added to body when popup is open.
86    // make it unique to apply your CSS animations just to this exact popup
87    mainClass: "mfp-zoom-in",
88    callbacks: {
89      beforeOpen: function() {
90        // just a hack that adds mfp-anim class to markup
91        this.st.image.markup = this.st.image.markup.replace(
92          "mfp-figure",
93          "mfp-figure mfp-with-anim"
94        );
95      }
96    },
97    closeOnContentClick: true,
98    midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
99  });
100
101  // Make sure that anchors have headings
102  $('.page__content').find('h1, h2, h3, h4, h5, h6').each(function() {
103    var id = $(this).attr('id');
104    if (id) {
105      var anchor = document.createElement("a");
106      anchor.className = 'header-link';
107      anchor.href = '#' + id;
108      anchor.innerHTML = '<span class=\"sr-only\">Permalink</span><i class=\"fas fa-link\"></i>';
109      anchor.title = "Permalink";
110      $(this).append(anchor);
111    }
112  });
113});