kcc-gem-theme 1.67.69 → 1.70.71

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c56929492a3b3237fe42b04acb02a49af4668dacba7e67de920a7896b7d9003
-  data.tar.gz: 326764b32e97866689f82569ba90c343b128d2a0f5dc1c747f26c7d51f8b7a27
+  metadata.gz: 24f4acacd0f4a33d8a95da3480fb67c4f958544775c0f5e8194df7c8724b287c
+  data.tar.gz: cee877dfe62050535469131681e592d870b1a7f596f6a56f620655bc29e42ef0
 SHA512:
-  metadata.gz: e994fa89f53c47df06e33e2707c42703777cd57af0c7137d774a7dfd29edcb2afad0530ce7b76a010b2f072d856ce04d67256bac56a18a3dfb7999d2bcf4b2e6
-  data.tar.gz: 4eaabeee123627fbdfa541c465b9769ac9ae2e0ce66f7c43a40db57c92472440b31a0d09d141132430f09fdaa13997f2c1b40d807420849f064d0f2235a4e43a
+  metadata.gz: 68475fcde0d91e47be7e4d2dd60a58e9edf9d34aa12eed453b5f53cea6b78f1882bc41a2b5a0700f92af41bcc297198186a5a92cbdf11a655f4bc0e6ff9098b2
+  data.tar.gz: 867cd775d7a83fd93636d5cb63f983c03fcdce208140c17cd58c3534ea36cdf2c31fa7f52a835ba3312b51f58d1f1e07f9c71aaa0d5e1454b7b25981ac22170c

data/_data/theme_hash.yml

@@ -1 +1 @@
-680d788e5a9ab08cc7f2
+37746a1db9406814aa58

data/_includes/contacts-tan.html

@@ -1,8 +1,8 @@
-{% assign sorted_contacts = site.contacts | sort: "display_order" %}
+{%- assign sorted_contacts = site.contacts | sort: "display_order" -%}
 <section>
   <div class="container">
     <div class="row">
-      <div class="col margins__col--top home__col--heading-underline-tan">
+      <div class="col mt-1 home__col--heading-underline home__col--heading-underline-tan">
         <h3 id="contact" class="typography__section--heading margins__heading--btm links__offset">Contacts</h3>
       </div>
     </div>
@@ -14,15 +14,15 @@
       </div>
     </div>
     <div class="row">
-      {% for contact in sorted_contacts %}
-      {% assign contact_name = contact.name | split: " " %}
-      {% assign first = contact_name[0] %}
-      {% assign last = contact_name[1] %}
-      {% if contact.portrait != 'For departments with no contact photos, do not change this field.' and contact.portrait != 'none' %}
+      {%- for contact in sorted_contacts -%}
+      {%- assign contact_name = contact.name | split: " " -%}
+      {%- assign first = contact_name[0] -%}
+      {%- assign last = contact_name[1] -%}
+      {% if contact.portrait_image != "For departments with no contact photos, do not change this field." %}
       <div class="col-md-6 contacts__col-bottom-margin">
         <div class="row">
           <div class="col-4 contacts__col--img">
-            <img src="assets/img/blank-contact.svg" data-src="{{ page.baseurl }}{{ contact.portrait }}" alt="{{ contact.name }}" class="img-fluid contacts__portrait" />
+            {% if contact.portrait_image != 'none' %}<img src="{{ page.baseurl }}assets/img/placeholder_square.jpg" data-src="{{ page.baseurl }}{{ contact.portrait_image }}" alt="Photo of {{ contact.name }}" class="img-fluid contacts__portrait" />{% endif %}
           </div>
           <div class="col-8 float-right">
             <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
@@ -30,24 +30,8 @@
             <p class="notranslate">
               {% if contact.phone %}<a href="tel:1{{ contact.phone | remove: '-' }}" class="links__darker-link">{{ contact.phone }}</a><br>{% endif %}
               {% if contact.email %}<a class="links__darker-link" target="_blank" href="https://secure.jotform.com/90435102482954?to[first]={{ first }}&amp;to[last]={{ last }}&amp;submitEmail={{ contact.email | remove: '@kcc.edu' }}%40kcc.edu">Email</a><br>{% endif %}
-              {% if contact.fax %}Fax: {{ contact.fax }}{% endif %}
-            </p>
-          </div>
-        </div>
-      </div>
-      {% elsif contact.portrait == 'none' %}
-      <div class="col-md-6 contacts__col-bottom-margin">
-        <div class="row">
-          <div class="col-4 contacts__col--img">
-            <!-- Contact has no portrait -->
-          </div>
-          <div class="col-8 float-right">
-            <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
-            {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %}
-            <p class="notranslate">
-              {% if contact.phone %}<a href="tel:1{{ contact.phone | remove: '-' }}" class="links__darker-link">{{ contact.phone }}</a><br>{% endif %}
-              {% if contact.email %}<a class="links__darker-link" target="_blank" href="https://secure.jotform.com/90435102482954?to[first]={{ first }}&amp;to[last]={{ last }}&amp;submitEmail={{ contact.email | remove: '@kcc.edu' }}%40kcc.edu">Email</a><br>{% endif %}
-              {% if contact.fax %}Fax: {{ contact.fax }}{% endif %}
+              {%- if contact.fax -%}Fax: {{ contact.fax }}{% endif %}
+              {%- if contact.bio == true -%}<button type="button" class="btn btn-primary mt-2" data-toggle="modal" data-target="#{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}">View Bio</button>{% endif %}
             </p>
           </div>
         </div>
@@ -60,10 +44,37 @@
           {% if contact.phone %}<a href="tel:1{{ contact.phone | remove: '-' }}" class="links__darker-link">{{ contact.phone }}</a><br>{% endif %}
           {% if contact.email %}<a class="links__darker-link" target="_blank" href="https://secure.jotform.com/90435102482954?to[first]={{ first }}&amp;to[last]={{ last }}&amp;submitEmail={{ contact.email | remove: '@kcc.edu' }}%40kcc.edu">Email</a><br>{% endif %}
           {% if contact.fax %}Fax: {{ contact.fax }}{% endif %}
+          {% if contact.bio == true %}<button type="button" class="btn btn-primary mt-2" data-toggle="modal" data-target="#{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}">View Bio</button>{% endif %}
         </p>
       </div>
-      {% endif %}
-      {% endfor %}
+      {%- endif -%}
+      {%- endfor -%}
     </div>
   </div>
 </section>
+{% for contact in sorted_contacts %}
+{%- if contact.bio == true -%}
+<!-- Modal -->
+<div class="modal fade" id="{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}" tabindex="-1" aria-labelledby="{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}-label" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="typography__h6" id="{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}-label">{{ contact.name }} Bio</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        {% if contact.portrait_image != 'For departments with no contact photos, do not change this field.' and contact.portrait_image != 'none' %}<img src="{{ page.baseurl }}assets/img/placeholder_square.jpg" data-src="{{ page.baseurl }}{{ contact.portrait_image }}" class="img-fluid float-left mr-2 mb-2" alt="Photo of {{ contact.name }} KCC's {{ contact.contacts_title }}">{% endif %}
+        <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
+        {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %}
+        {{ contact.content }}
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+{%- endif -%}
+{% endfor %}

data/_includes/contacts.html

@@ -2,10 +2,12 @@
       <section>
         <div class="container">
           <div class="row">
-            <div class="col mt-1 home__col--heading-underline">
+            <div class="col mt-1 home__col--heading-underline{% if page.contacts_background_tan == true %} home__col--heading-underline-tan{% endif %}">
               <h3 id="contact" class="typography__section--heading margins__heading--btm links__offset">Contacts</h3>
             </div>
           </div>
+        {% if page.contacts_background_tan == true %}</div>
+      <div class="container contacts__padding-top background__color--tan">{% endif %}
           <div class="row editor-link">
             <div class="col editor-link mb-3">
               <a href="cloudcannon:collections/_contacts/" class="btn btn-success editor-button">Edit Contacts</a>
@@ -16,29 +18,11 @@
             {%- assign contact_name = contact.name | split: " " -%}
             {%- assign first = contact_name[0] -%}
             {%- assign last = contact_name[1] -%}
-            {% if contact.portrait != "For departments with no contact photos, do not change this field." and contact.portrait != 'none' %}
+            {% if contact.portrait_image != "For departments with no contact photos, do not change this field." %}
             <div class="col-md-6 contacts__col-bottom-margin">
               <div class="row">
                 <div class="col-4 contacts__col--img">
-                  <img src="{{ page.baseurl }}assets/img/blank-contact.svg" data-src="{{ page.baseurl }}{{ contact.portrait }}" alt="Photo of {{ contact.name }}" class="img-fluid contacts__portrait" />
-                </div>
-                <div class="col-8 float-right">
-                  <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
-                  {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %}
-                  <p class="notranslate">
-                    {% if contact.phone %}<a href="tel:1{{ contact.phone | remove: '-' }}" class="links__darker-link">{{ contact.phone }}</a><br>{% endif %}
-                    {% if contact.email %}<a class="links__darker-link" target="_blank" href="https://secure.jotform.com/90435102482954?to[first]={{ first }}&amp;to[last]={{ last }}&amp;submitEmail={{ contact.email | remove: '@kcc.edu' }}%40kcc.edu">Email</a><br>{% endif %}
-                    {%- if contact.fax -%}Fax: {{ contact.fax }}{% endif %}
-                    {%- if contact.bio == true -%}<button type="button" class="btn btn-primary mt-2" data-toggle="modal" data-target="#{{ contact.name | downcase | replace: ' ', '-' | remove: '.' | remove: '/' | remove: "'" | remove: '’' }}">View Bio</button>{% endif %}
-                  </p>
-                </div>
-              </div>
-            </div>
-            {% elsif contact.portrait == 'none' %}
-            <div class="col-md-6 contacts__col-bottom-margin">
-              <div class="row">
-                <div class="col-4 contacts__col--img">
-                  <!-- No contact portrait -->
+                {% if contact.portrait_image != 'none' %}<img src="{{ page.baseurl }}assets/img/placeholder_square.jpg" data-src="{{ page.baseurl }}{{ contact.portrait_image }}" width="150px" height="150px" alt="Photo of {{ contact.name }}" class="img-fluid contacts__portrait" />{% endif %}
                 </div>
                 <div class="col-8 float-right">
                   <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
@@ -81,7 +65,7 @@
               </button>
             </div>
             <div class="modal-body">
-              {% if contact.portrait %}<img src="{{ page.baseurl }}assets/img/blank-contact.svg" data-src="{{ page.baseurl }}{{ contact.portrait }}" class="img-fluid float-left mr-2 mb-2" alt="Photo of {{ contact.name }} KCC's {{ contact.contacts_title }}">{% endif %}
+              {% if contact.portrait_image != 'For departments with no contact photos, do not change this field.' and contact.portrait_image != 'none' %}<img src="{{ page.baseurl }}assets/img/placeholder_square.jpg" data-src="{{ page.baseurl }}{{ contact.portrait_image }}" class="img-fluid float-left mr-2 mb-2" width="150px" height="150px" alt="Photo of {{ contact.name }} KCC's {{ contact.contacts_title }}">{% endif %}
               <h5 class="typography__contacts--name notranslate">{{ contact.name }}</h5>
               {% if contact.contacts_title %}<h6 class="typography__contacts--title">{{ contact.contacts_title }}</h6>{% endif %}
               {{ contact.content }}

data/_includes/hero-slider.html

@@ -12,7 +12,7 @@
     </div>
     {% else %}
     <div>
-      <a {% if slide.url contains "https://" or slide.url contains "http://" %}href="{{ slide.url }}"{% elsif url_first_char == "." or url_first_char == "/" %}href="{{ slide.url }}"{% else %}href="{{ page.baseurl }}{{ slide.url }}{% endif %}"{% if slide.new_tab == true %} target="_blank" rel="noopener noreferrer"{% endif %}><img src="{{ page.baseurl }}assets/img/kcc-placeholder.png" data-src="{{page.baseurl}}{{slide.image}}" class="img-fluid hero-slider__slider--slide-img {% if slide.white_background %} hero-slider__slide-img--border{% endif %}" alt="{{slide.alt-text}}" /></a>
+      <a {% if slide.url contains "https://" or slide.url contains "http://" %}href="{{ slide.url }}"{% elsif url_first_char == "." or url_first_char == "/" %}href="{{ slide.url }}"{% else %}href="{{ page.baseurl }}{{ slide.url }}{% endif %}"{% if slide.new_tab == true %} target="_blank" rel="noopener noreferrer"{% endif %}><img src="{{ page.baseurl }}assets/img/placeholder_16to9.jpg" data-src="{{page.baseurl}}{{slide.image}}" class="img-fluid hero-slider__slider--slide-img {% if slide.white_background %} hero-slider__slide-img--border{% endif %}" alt="{{slide.alt-text}}" /></a>
       {% if slide.text and slide.text != "" %}<div class="hero-slider__slider--heading-container text-center">
         <h3 class="hero-slider__slider--slide-heading">{{slide.text}}</h3>
       </div>{% endif %}

data/_layouts/default-core.html

@@ -14,7 +14,7 @@
 {% include scripts/google-noscript.html %}
 {% if site.translate == true %}{% include translate.html %}{% endif %}
 {% include header-global.html %}
-{% if site.core_root != true %}{% include emergency-alerts.html %}{% endif %}
+{% if site.core_root != true and page.no_alert != true %}{% include emergency-alerts.html %}{% endif %}
 {{ content }}
 {% include footer.html %}
 {% include scripts/vendor-cdn.html %}

data/_layouts/default.html

@@ -15,7 +15,7 @@
   {% if site.translate == true %}{% include translate.html %}{% endif %}
   {% include nav-global.html %}
   {% if page.no_local_nav != true %}{% include nav-local.html %}{% endif %}
-  {% include emergency-alerts.html %}
+  {% if page.no_alert != true %}{% include emergency-alerts.html %}{% endif %}
   {{ content }}
   {% include footer.html %}
   {% include scripts/vendor-cdn.html %}

data/_layouts/sub-nav-core.html

@@ -0,0 +1,6 @@
+---
+layout: default-core
+---
+
+{% include nav-sub.html %}
+{{ content }}

data/assets/js/theme/alerts/alerts.js

@@ -1,5 +1,12 @@
+/*
+// Custom JS | written by https://github.com/wdzajicek
+// © 2020 Kankakee Community College
+// =================================================== */
 import start from './campusAlertsSheetsAPI.js';
+import getCachedResponse from './getCachedResponse.js';
 
-document.addEventListener('DOMContentLoaded', function() {
-  gapi.load('client', start);
+document.addEventListener('DOMContentLoaded', () => {
+  ! window.sessionStorage.getItem('Alert-Content') ? // Checks if our cached alert is already in sessionStorage
+    gapi.load('client', start) // If not, build the alert from a new Google API response
+  : getCachedResponse(); // Otherwise, build the alert from our cached response
 });

data/assets/js/theme/alerts/cacheResponse.js

@@ -0,0 +1,23 @@
+/*
+// Custom JS | written by https://github.com/wdzajicek
+// © 2020 Kankakee Community College
+// =================================================== */
+// Modules' default function stores our Google Sheet response in sessionStorage to be retrieved later
+// Each key gets set to a column in our data
+// Each key's value gets set to the corresponding cell in the row below
+// ====================================================================
+function cacheResponse(response) { // response from Google API's spreadsheet.values.get() method
+  const VALUES = response.result.values; // This is where the table's data is in a Sheets response in Sheets API V4
+  const TABLE_HEADER_ROW = VALUES[1]; // 2nd row in the sheet (first row is instructions to the user)
+  const TABLE_BODY_ROW = VALUES[2]; // The only row of data in our table
+  
+  for (let i = 0, len = TABLE_BODY_ROW.length; i < len; i++ ) {
+    const cell = TABLE_BODY_ROW[i];
+    const column = TABLE_HEADER_ROW[i];
+
+    window.sessionStorage.setItem(column.replace(' ', '-'), cell);
+  }
+  //window.sessionStorage.clear();
+}
+
+export default cacheResponse;

data/assets/js/theme/alerts/campusAlertsSheetsAPI.js

@@ -1,40 +1,52 @@
+/*
+// Custom JS | written by https://github.com/wdzajicek
+// © 2020 Kankakee Community College
+// =================================================== */
+//  1. Execute Google API call to grab Google Sheet data from:
+//     https://docs.google.com/spreadsheets/d/1plXBiZY5pVbhNT-mszxEuqCl4zy8wMnz9gXXbbT_yLs/edit#gid=0
+//  2. Build & inject the alert message into the page
+//  3. Run the `tabLink.js` module after alert has painted into DOM (and altered documents hight)
+//  4. Cache the API response in sessionStorage
+// =================================================== //
 import setSheetParameters from './simpleSetSheetParameters.js';
 import createAlertsHtml from './createAlertsHtml.js';
+import makeTabsLinkable from './tabLink.js';
+import cacheResponse from './cacheResponse.js';
 
 const SHEET_KEY = '1plXBiZY5pVbhNT-mszxEuqCl4zy8wMnz9gXXbbT_yLs';
 const SHEET_TAB_NAME = 'Alerts';
 const EMERGENCY_ALERT_DIV_ID = 'emergencyAlerts'
+const SHEET_PARAMS = setSheetParameters(SHEET_KEY, SHEET_TAB_NAME);
+const PARAMS = { // This is configuration for API call with spreadsheets that are setup as readonly
+  'apiKey': 'AIzaSyCEBsbXfFcdbkASlg-PodD1rT_Fe3Nw62A',
+  'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/sheets/v4/rest']
+};
+
+function init() {
+  gapi.client.init(PARAMS).then(function() { // Executes an API request, and returns a Promise.
+    return gapi.client.sheets.spreadsheets.values.get(SHEET_PARAMS)
+      .then((response) => {
+        createAlertsHtml(response); // Build the html & inject it into the DOM
+        return response;
+      }).then((response) => {
+        makeTabsLinkable();  // Handle hash & query URI's to target accordion and tabbed-nav content
+        cacheResponse(response); // Cache the Google API response for subsequent page loads in the site
+      },
+      function(err) {
+        console.error("Execute error", err);
+        makeTabsLinkable();
+      });
+  });
+}
 
 function start() {
   if ( ! document.getElementById(EMERGENCY_ALERT_DIV_ID) )
-    return;
+    return makeTabsLinkable();
 
-  //var t0 = performance.now();
   init();
   //var t1 = performance.now();
   //console.info("Call to 'init' took " + (t1 - t0) + " milliseconds.");
 }
-
-function init() {
-  const params = {
-    'apiKey': 'AIzaSyCEBsbXfFcdbkASlg-PodD1rT_Fe3Nw62A',
-    'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/sheets/v4/rest']
-  };
-  const sheetParams = setSheetParameters(SHEET_KEY, SHEET_TAB_NAME);
-
-  gapi.client.init(params).then(function() { // Executes an API request, and returns a Promise.
-    function execute() {
-      return gapi.client.sheets.spreadsheets.values.get(sheetParams)
-        .then(function(response) {
-          createAlertsHtml(response);
-        },
-        function(err) {
-          console.error("Execute error", err);
-        });
-    }
-    execute();
-  });
-}
 // Loads the JavaScript client library and invokes `start` afterwards.
 //    Usage:
 //  gapi.load('client', start);

data/assets/js/theme/alerts/createAlertsHtml.js

@@ -1,9 +1,13 @@
-// Custom JS to build an alert message using data coming from a Google Sheets (Using the Sheets API v4)
-// ==================================================================================
-// This exported module requires you pass the function the `response` object from the API call,
-// and `resolve()` from the Promise that the function call is wrapped in (see './campusAlertsSheetsAPI.js')
+/*
+// Custom JS | written by https://github.com/wdzajicek
+// © 2020 Kankakee Community College
+// =================================================== */
+// JS module to build alert message using data from Google Sheets API v4
+//
+// This exported module requires you pass it's default-function the `response` object from the API call, as the only argument
+import makeTabsLinkable from './tabLink.js';
 import parseMarkdownToHTML from './parseMarkdownToHTML.js';
-
+//
 const CAMPUS_ALERTS_DIV_ID_STRING = 'emergencyAlerts';  // ID of the div to house campus alerts - already built into the page.
 const BOOTSTRAP_CONTAINER_CLASS = 'container';  // Class used in Bootstrap 4
 const BOOTSTRAP_ROW_CLASS = 'row';  // Class used in Bootstrap 4
@@ -12,7 +16,6 @@ const BOOTSTRAP_CLOSE_CLASS = 'close';  // Class used in Bootstrap 4
 const TRUE_FROM_SHEETS = 'TRUE';  // Because Google Sheets does 'TRUE' & 'FALSE' in all caps, unlike JavaScript
 const FALSE_FROM_SHEETS = 'FALSE';  // Because Google Sheets does 'TRUE' & 'FALSE' in all caps, unlike JavaScript
 const BOOTSTRAP_ALERT_CLASS_ARRAY = ['alert', 'alert-warning']; // BS4 classes for alerts
-const PARAGRAPH_CLASS_ARRAY = ['typography__alert', 'mb-0']; // KCC Gem Theme & Bootstrap 4 class strings in an array
 const ALERTS_VISIBLE_CLASS = 'position__offset-alert--visible';
 
 function addClassesToEl(el, classArr) {
@@ -67,7 +70,7 @@ function init(SHEET_DATA) {
 }
 
 function checkAlertPages(SHEET_DATA) {
-  const DISPLAY_ALERT_ON_ALL_PAGES = SHEET_DATA[1] === TRUE_FROM_SHEETS; // Second cell toggles if it displayes on just homepages or all pages of the sites
+  const DISPLAY_ALERT_ON_ALL_PAGES = SHEET_DATA[1] === TRUE_FROM_SHEETS; // Second cell toggles if it displays on just homepages or all pages of the sites
   const pathname = window.location.pathname;
   const locationIsHomepage = pathname === '/';
 
@@ -79,11 +82,13 @@ function checkAlertPages(SHEET_DATA) {
 }
 
 function createAlertsHtml(response) {  // Incoming response from our Google Sheet via the Sheets API
+  if ( ! document.getElementById(CAMPUS_ALERTS_DIV_ID_STRING) )
+    return makeTabsLinkable();
+
   // This is where the cell values hide in the response object from the Google API.
   const SHEET_CELL_VALUES_ARRAY = response.result.values; // `values` is an array consisting of an array for each row (i.e an array of arrays)
   const SHEET_DATA = SHEET_CELL_VALUES_ARRAY[2]; // Selecting the third row of the values array. This is where all the important options/data are in the Google Sheet
   const ALERT_VISIBILITY_IS_FALSE = SHEET_DATA[0] === FALSE_FROM_SHEETS; // First cell(SHEET_DATA[0]) is to toggle the alert's visibility.
-
   if ( ALERT_VISIBILITY_IS_FALSE )
     return;
 

data/assets/js/theme/alerts/getCachedResponse.js

@@ -0,0 +1,41 @@
+/*
+// Custom JS | written by https://github.com/wdzajicek
+// © 2020 Kankakee Community College
+// =================================================== */
+// Module to retrieve our cached Google Sheet response from sessionStorage
+// 1. Create an object that replicates an API response where `response.result.values`
+//    is an array containing an array representing each row in the sheet.
+// 2. Then we pass our mock-sheet response object to the `createAlertsHtml` module to
+//    build and inject the alert into the DOM.
+import createAlertsHtml from './createAlertsHtml.js';
+import makeTabsLinkable from './tabLink.js';
+const cache = window.sessionStorage;
+
+function processCachedResponse(response, callback) {
+  createAlertsHtml(response);
+  return callback();
+}
+
+function createCachedResponseObject() {
+  let cachedResponse = {  // Reconstructing our own Google Sheet-like response from the sessionStorage items
+    result: {
+      values: [
+        0, // First two rows aren't used by the `createAlertsHtml()` function
+        0,
+        [ cache.Visible, cache.getItem('All-Pages'), cache.getItem('Alert-Content'), cache.getItem('Alert-Expiration'), cache.Start, cache.End ]
+      ]
+    }
+  }
+  processCachedResponse(cachedResponse, makeTabsLinkable);
+}
+
+function getCachedResponse() {
+  try {
+    createCachedResponseObject();
+  } catch (error) {
+    makeTabsLinkable();
+    console.error(`Error retrieving cached response in sessionStorage:\nName: ${error.name}\nMessage: ${error.message}\n${error}`);
+  }
+}
+
+export default getCachedResponse;

data/assets/js/theme/alerts/tabLink.js

@@ -0,0 +1,81 @@
+// Custom JS to do cool stuff with BS accordions and tabs by manipulating URL hashes and query's
+// EXAMPLE:
+//  https://<ORIGIN>/?id=course-withdrawals#tuition-payment-and-deadlines
+//    The above URL will:
+//      1. Open the #tuition-payment-and-deadlines accordion if it exists
+//      2. The ?id=course-withdrawals query will:
+//         - look inside the opened accordion for an element with the id 'course-withdrawals', and
+//         - scroll that matching element into the user's viewport (in this case it's a heading within that accordion card)
+//
+//  This JS will allow us to link to a specific area of content in a page where a traditional hash link wouldn't work
+//  In this case hash links won't work because the element with he matching ID is "stuck" in a closed accordion or tab.
+//
+const idRegex = /^id=/g; // Lets just cache these reused regex's here
+const queryStartRegex = /^\?/g;
+const endingSlashRegex = /\/$/g;
+
+function processIdQuery(query, hash) {
+  let id = query.replace(idRegex, '');
+  const parentEl = document.querySelector(hash);
+  const heading = parentEl.querySelector(`#${id}`);
+
+  heading.scrollIntoView()
+  heading.focus();
+}
+
+function checkForQuery(query, hash) {
+  query.search(idRegex) !== -1 ?
+    processIdQuery(query, hash)
+  : null;
+}
+
+function checkForMatchingTabOrAccordion(hash) {
+  if ( document.querySelector(`.nav-tabs a[href="${hash}"]`) ) {  // Looks for a matching BS4 tab element
+    let tab = $(`.nav-tabs a[href="${hash}"]`);  // **SIGH**, BS4 requires JQuery
+
+    tab
+      .on('shown.bs.tab', () => {  // Bootstrap 4 method for tab events // Must be defined before the tab is activated
+        window.location.search ?
+          checkForQuery(window.location.search.replace(queryStartRegex, ''), hash)
+          : null; })
+      .tab('show');  // Bootstrap 4 Tab method
+  } else if ( document.querySelector(`${hash}.collapse`) ) {  // Looks for a matching BS4 collapse element
+    let card = $(hash);  // **SIGH**, BS4 requires JQuery
+
+    card
+      .on('shown.bs.collapse', () => {  // Bootstrap 4 Collapse method // Must be defined before the collapse is activated
+        window.location.search ?
+          checkForQuery(window.location.search.replace(queryStartRegex, ''), hash)
+        : null; })
+      .collapse('show'); // Bootstrap 4 Collapse method
+      const target = document.querySelector(hash);
+      
+      target.scrollIntoView();
+      target.focus(); // For screen readers
+  }
+}
+
+function checkForHash(e) {
+  // Select the node that will be observed for mutations
+
+  if (window.location.hash) {
+    let hash = window.location.hash.replace(endingSlashRegex, '');
+
+    checkForMatchingTabOrAccordion(hash);
+  }
+  return;
+}
+
+function initTabs() {
+  checkForHash();
+  window.addEventListener('hashchange', checkForHash, false);
+}
+
+function makeTabsLinkable() {
+  if (!document.querySelector('#accordion') && !document.querySelector('.nav.nav-tabs'))
+    return;
+    
+  initTabs();
+}
+
+export default makeTabsLinkable;