Example of Glade Source Code

glade-concept.js

// Glade object stores useful properties and functions for workarounds

const Glade = {
  currentPage: window.location.pathname,
}


// Identify when the page has changed using the custom event grove-navigate

setInterval(function () {
  const currentPage = window.location.pathname
  const previousPage = Glade.currentPage

  // dispatch Grove Navigate Event
  if (currentPage !== previousPage) {
    const navigateEvent = new CustomEvent('grove-navigate', { detail: {
      page: currentPage,
      previousPage: previousPage,
    }})

    window.dispatchEvent(navigateEvent)
    Glade.currentPage = currentPage
  }
}, 100)



// Wrapper function to tie into the grove-navigate Event

Glade.onNavigate = function (callback, properties = undefined) {
  setTimeout(() => {
    window.addEventListener('grove-navigate', callback, properties)
  }, 100)
}



// insertCSS (markup [, shouldPersist])
// inserts a style tag with raw CSS

Glade.insertCSS = function (markup, shouldPersist = false) {
  // Create the styles and append them
  const styles = document.createElement('style')
  styles.textContent = markup

  document.head.insertAdjacentElement('beforeend', styles)

  // Remove styles unless set to persist
  if (!shouldPersist) {
    Glade.onNavigate(() => styles.remove(), { once: true })
  }

  // Pass an HTML Reference to the loaded CSS
  return styles
}

The Glade library has run on St. Louis Public Radio's Grove build since 2020.

It is a collection of properties, functions, and plugins that I use when constructing workarounds for our site. It solves problems such as loading custom scripts and styles into our CMS based on certain conditions and provides functionality to preserve or destroy these customizations as the user navigates across the page.

While a mostly complete project exists in the ricealexander/glade repository, this gist is intended to be a quick example of what is going on under the hood. This example ignores the plugin system (to separate site-specific functinoality from core features).

A single interval checks to see whether the URL has changed (it uses window.location.pathname to ignore hashes and query strings) and dispatches the custom "grove-navigation" event.

Grove functions then hook into the "onNavigation" wrapper function in order to trigger code that runs once the user has navigated away.

Examples of the custom stylesheets and css loading functions can be seen on my Person Page on STLPR.