JavaScript Helpers

STLPR Object

The STLPR Object is defined at https://www.stlpublicradio.org/external/scripts/grove-custom-script.js

It provides us with some handy helper-functions for common use-cases.

STLPR.currentPage()

**currentPage** returns the current page the user is on, pulled from window.location.pathname. The script that loads STLPR also files an event multiple times per second to check if the page has changed. If the page is different, it will set the data-page attribute on the body element to the current page.

This is a workaround to the Custom Head Elements bug because stylesheets can scope themselves to [data-page="pageName"].

Attribute Selectors Reference

[attribute] Selects all elements with the target attribute [attribute=value] Selects all elements with attribute exactly equal to value [attribute~=value] Selects all elements with attribute containing value [attribute*=value] Selects all elements with attribute containing value [attribute|=value] Selects all elements with attribute starting with value [attribute^=value] Selects all elements with attribute starting with value [attribute$=value] Selects all elements with attribute ending with value

STLPR.loadScript(source)

The **loadScript()** method accepts a URL for a script to load and loads that script if it hasn't already been called.

STLPR.loadStylesheet(stylesheet)

The **loadStylesheet()** method accepts a URL for a stylesheet to load and loads it if it hasn't already been called. This forms the basis of a work-around for the Custom Head Elements bug.

Example Usage:

<!-- HTML Embed at top of the page -->
<script>
STLPR.loadStylesheet('https://www.stlpublicradio.org/.../talk-toast-taste.css')
</script>

/* talk-toast-taste.css */
[data-page="/talk-toast-taste"] h1.ArticlePage-headline {
  font-family: Georgia;
}

In the above example, The HTML Embed loads a CSS file for the page. Because the STLPR object tracks changes to the current page, we can use the data-page attribute on the body element to make page-specific CSS

STLPR.addIsolatedEventListener(element, eventType, callback)

This is an abstraction of addEventListener which destroys the event if the page has changed. Because Grove is a Single Page Application, events may persist past navigation.

// Standard Event Listener
// if #action-button isn't destroyed upon navigation,
// this event will persist as users visit other pages on the site.

var button = document.querySelector('#action-button')

button.addEventListener('click', function() {
  console.log('button clicked!')
})

// Isolated Event Listener
// this event is guaranteed to be destroyed if user navigates to another page

var button = document.querySelector('#action-button')

STLPR.addIsolatedEventListener(button, 'click', function() {
  console.log('button clicked!')
})

STLPR.setIsolatedInterval(callback, milliseconds)

This is an abstraction of setInterval which destroys the interval if the page has changed. Because Grove is a Single Page Application, events may persist past navigation.

// Standard setInterval()
// this interval will persist as users navigate throughout the site

var header = document.querySelector('.Page-header-persistent-player')

setInterval(function() {
  header.style.backgroundColor = getRandomColor()
}, 1000)

// Isolated Interval
// this interval will only exist on the current page

var header = document.querySelector('.Page-header-persistent-player')

STLPR.setIsolatedInterval(function() {
  header.style.backgroundColor = getRandomColor()
}, 1000)

The interval can also be destroyed, just like setInterval

function changeHeaderColor () {
  var header = document.querySelector('.Page-header-persistent-player')
  header.style.backgroundColor = getRandomColor()
}

// destroy setInterval
var interval = setInterval(changeHeaderColor, 1000)
clearInterval(interval) // interval is cleared

// destroy setIsolatedInterval
var interval = STLPR.setIsolatedInterval(changeHeaderColor, 1000)
clearInterval(interval) // interval is cleared

ricealexander/helpers.md