Adds javascript and styles to show WordPress alerts

The javascript class is a more portable version of what we're using within the parent theme.

The styles are a copy-paste of the style rules from the parent theme, with a small number of adapter styles in a separate section that should handle the local customization for this markup scheme.

libguides/custom-head.html

@@ -8,6 +8,125 @@
 <!--meta tag to scale mobile device display-->
 <meta name="viewport" content="width=device-width, maximum-scale=1">
 
+<script type="text/javascript">
+class AlertsLoader {
+
+  alerts_container = '';
+
+  alerts_endpoint = '';
+
+  constructor(container, endpoint) {
+    this.alerts_container = container;
+    this.alerts_endpoint = endpoint;
+    this.loadAlerts();
+  }
+
+  filterAlerts = function(posts) {
+    // This processes an array of posts for valid, confirmed, alerts
+    var filtered = [],
+      post,
+      post_meta,
+      i;
+
+    // For each post...
+    for (i = 0; i < posts.length; i++) {
+      post = posts[i];
+
+      // If the post has no meta fields, skip it.
+      if ( ! $(post.meta).length ) {
+        continue;
+      }
+
+      // If post is not flagged, and confirmed, as an alert, skip it.
+      if ( ! ($(post.meta.alert).length && true === post.meta.alert && true === post.meta.confirm_alert ) ) {
+        continue;
+      }
+
+      // If user has already dismissed this alert, skip it.
+      if ( 'true' === localStorage.getItem('alert_closed-' + post.id) ) {
+        continue;
+      }
+
+      // Still here? Add post to list for processing.
+      filtered.push(post);
+
+    };
+
+    return filtered;
+  }
+
+  loadAlerts = function() {
+    jQuery.getJSON( this.alerts_endpoint )
+      .done(this.showAlerts.bind(this));
+  }
+
+  renderAlert = function(markup, id) {
+    // Append the template
+    $(markup).prependTo(this.alerts_container);
+    // Remove the necessary transition class with a timeout, so that the animation shows.
+    setTimeout(function() {
+      $('.posts--preview--alerts').removeClass('transition-vertical--hide');
+    }, 300);
+  }
+
+  setClosable = function(alert_ID) {
+    // Add a Close icon/svg/button
+    $('.posts--preview--alerts .post').append('<a href="#0" id="close" class="action-close"><span class="sr">Dismiss</span><i class="icon-remove-sign" aria-hidden="true"></i></a>');
+    // On click
+    $('#close').click(function(){
+      // Add the necessary transition hide class
+      $(this).closest('.posts--preview--alerts').addClass('transition-vertical--hide');
+      // Set the localStorage item, using the post ID
+      localStorage.setItem('alert_closed-' + alert_ID, 'true');
+    });
+  }
+
+  showAlerts = function(json) {
+    var alert_posts_arr = [],
+      alert_ID,
+      alert_title,
+      alert_template;
+
+    alert_posts_arr = this.filterAlerts(json);
+
+    // If there is an alert post
+    if ( ! alert_posts_arr.length) {
+      return
+    }
+
+    for (var i = 0; i < alert_posts_arr.length; i++) {
+      // Alert post ID
+      alert_ID = alert_posts_arr[i].id;
+
+      // Check for empty title
+      alert_title = ('' === alert_posts_arr[i].title.rendered) ? 'Alert!' : alert_posts_arr[i].title.rendered;
+
+      // Alert HTML template
+      alert_template = '<div class="posts--preview--alerts transition-vertical transition-vertical--hide">' +
+        '<div class="post alert--critical flex-container">' +
+          '<i class="fa fa-info-circle fa-lg icon-exclamation-sign" aria-hidden="true"></i>' +
+          '<div class="content-post alertText">' +
+            '<h3>' + alert_title + '</h3> ' + alert_posts_arr[i].content.rendered +
+          '</div>' +
+        '</div>' +
+      '</div>';
+
+      this.renderAlert(alert_template,alert_ID);
+
+      // If this is a closable alert
+      if (true === alert_posts_arr[i].meta.closable) {
+        this.setClosable(alert_ID);
+      }
+    }
+  }
+}
+(function($){
+  var container = '#alert-container';
+  var endpoint = 'https://libraries.mit.edu/wp-json/wp/v2/posts';
+  const al = new AlertsLoader(container, endpoint);
+})(jQuery);
+</script>
+
 <script type="text/javascript">
 jQuery(document).ready(function($) {
   jQuery("img[alt='null'], img[alt='Null'], img[alt='NULL']").attr("alt", "");
@@ -1460,21 +1579,139 @@
   padding: 1em;
 }
 
-/* Styling for COVID-19 info banner */
-.alert-banner {
-  display: block;
-  margin: 1rem auto;
-  border-radius: 2px;
-  padding: 1.6rem 2rem;
+/* Adapter styles that extend the WordPress alert styles */
+#alert-container {
+  background: #000;
+  max-width: 1170px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+#alert-container .posts--preview--alerts {
+  background: #000;
+  border-bottom: 0;
+  padding: 1.25em;
+}
+
+#alert-container .posts--preview--alerts:before {
+  box-shadow: none;
+}
+
+[class*=posts--preview] .post,
+[class*=posts--preview] .post--full-bleed {
+  background:#fff;
+  color:#000;
+  overflow:hidden;
+  padding:.8125em
+}
+
+/* Copy-paste styles from parent WordPress theme for alerts */
+.libraryAlert {
   border: 1px solid #000;
   border-top: 5px solid #000;
-  color: #000;
+  padding: 15px 10px 10px;
+  margin-top: 15px;
+}
+
+.alertText h3 {
+  font-size: 18px;
+  padding-bottom: 5px !important;
   font-weight: 600;
 }
-.alert-banner .fa {
-  display: inline-block;
-  margin-right: 0.5em;
+
+.alertText a {
+  color: #000;
+  text-decoration: underline;
+}
+.alertText a:hover {
+  color: #0000FF;
+  text-decoration: none;
+}
+
+.home .wrap-page .posts--preview--alerts {
+  background: #000;
+  border-bottom: 0;
+}
+
+.home .wrap-page .posts--preview--alerts:before,
+.home .posts--preview--alerts.inactive:before,
+.home .post.alert--critical {
+  box-shadow: none;
+}
+
+.posts--preview--alerts:before {
+  background: #ed0e0e;
+  box-shadow: 0 3px 3px #ccc;
+  color: #fff;
+  content: "";
+  display: block;
+  height: 5px;
+  opacity: 1;
+  transition: box-shadow 0.3s 0.3s ease, max-height 0.3s ease, opacity 0.3s ease;
+  width: 100%;
+}
+
+.posts--preview--alerts.inactive:before {
+  box-shadow: 0 0 0 #ccc;
+  max-height: 0px;
+  opacity: 0;
+}
+
+.posts--preview--alerts .icon-exclamation-sign,
+.location--alerts .icon-exclamation-sign {
+  color: #000;
+  font-size: 3.5em;
+  margin: 0 0.5em 0 0.25em;
+  position: relative;
+}
+@media only screen and (max-width: 568px) {
+  .posts--preview--alerts .icon-exclamation-sign,
+.location--alerts .icon-exclamation-sign {
+    font-size: 2.5em;
+  }
+}
+
+.post.alert--critical {
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  position: relative;
+}
+@media only screen and (max-width: 568px) {
+  .post.alert--critical {
+    font-size: 0.75em;
+  }
+}
+
+.action-close {
+  position: absolute;
+  right: 0.5em;
+  top: 0.5em;
+}
+.action-close .icon-remove-sign {
+  color: #333;
+  font-size: 1.5em;
+  text-decoration: none;
+}
+
+.location--alerts.flex-container {
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+
+@media screen and (max-width: 820px) {
+  .location--alerts .alertText,
+.post.alert--critical .alertText {
+    width: 80%;
+  }
+}
+@media screen and (max-width: 720px) {
+  .libraryAlertTop {
+    padding: 1% 5%;
+  }
 }
+/* End styling for system alerts */
 </style>
 <style>
 /*styling for a-z databases */