Documentation

# STC Main Script file (/js/stc-scripts.js)

# Overview

stc-scripts.js is inserted on all pages of the site, Luminate Online and AEM. This code does the following:

  • Enables main menu collapse and interaction on mobile screens.
  • Enables secondary menu collapse and interaction on mobile screens.
  • URL rewriting of PageBuilder pages to make them work properly with Vue.js.
  • Rewriting of SVGs and from image tags and replacing them with <svg> tags.
  • Browser detection and JS fixes for inconsistencies.
  • Adds HTML around radio & checkbox inputs for a more elegant display.
  • Enables Masonry plugin on a set of grid boards.
  • Enables Fancybox plugin on links that need to open in a pop-up overlay.
  • Enables dynamic resizing of iframes on page resizing.
  • Adds API URL parameters to all iframes & Fancybox links that link to YouTube videos.
  • Enables tab functionality on the AEM homepage.
  • Enables page alert interactions.
  • Enables addThis feature.
  • Handles gentle scroll to an anchor in the page.
  • Enables social share analytics.
  • Handles registration through the footer sign up form.
  • Updates the items in the basket count based on a cookie.
  • Detects login state based on a cookie.
  • Logs users in and checks for analytics on a survey thank you pages & Teamraiser pages.
  • Deletes login cookies when a user signs out.

# Globals

# Global libraries and dependencies

The stc-scripts.js relies on the following Javascript libraries, which are loaded in /js/stc-vendor.js or /js/stc-aem-vendor.js file. Additional libraries may be loaded in /js/stc-vendor.js, however, this specific script does not rely on those libraries. For the full list and differences see files /vendor-list.json & /vendor-list-aem.json in this repository.

# Global Variables

The file creates the following global variables which can be and are accessed from other scripts.

  • $menuBasketItem - A jQuery object where the current count of items in the cart is displayed.
  • cookieDomain - The domain for which all cookies should be set.
  • fancyboxSettings - Default settings for the Fancybox overlay
  • tealFancyboxSettings - Settings for the teal Fancybox, which also include default settings.
  • plumFancyboxSettings - Settings for the plum Fancybox, which also include default settings.

# Global Classes

The file creates the following global classes which are accessed from other scripts.

  • Country /src/js/lib/general/country.js A wrapper class for detecting US, Canada or other countries.

# Global Functions

The file creates the following global functions which are accessed from other scripts.

  • disableFormAbandonmentAnalytics() /src/lib/form-analytics/disable-form-abandonment-analytics.js Disables form abandonment analytics call.
  • formAbandonmentAnalytics() /src/lib/form-analytics/form-abandonment-analytics.js Enables form abandonment analtyics watch on a form.
  • getMarketingSourceCode() /src/lib/form-analytics/form-abandonment-analytics.js Reads a marketing source and subsource code from a cookie.
  • setAnalyticsError() /src/lib/form-analytics/set-analytics-error.js Triggers an error in analytics.
  • setAnalyticsForm() /src/lib/form-analytics/set-analytics-form.js Sets up all form properties in the analytics JSON object.
  • setDonationAnalytics() /src/lib/form-analytics/set-donation-analytics.js Sets up all donation properties in the analytics JSON object.
  • setTransactionAnalytics() /src/lib/form-analytics/set-transaction-analytics.js Sets up all transaction properties in the analytics JSON object.
  • submissionSuccessAnalytics /src/lib/form-analytics/submission-success-analytics.js Triggers an analytics event on successful form submission, where appropriate.
  • validationErrorAnalytics() /src/lib/form-analytics/validation-error-analytics.js Sets up the details of the error into the analtyics JSON object and triggers an analytics error event.
  • creditCardMasking() /src/lib/form-masking/credit-card-masking.js Enables field masking on credit card fields.
  • zipPhoneMasking() /src/lib/form-masking/zip-phone-masking.js Enables zip and phone number masking based on the country field selected.
  • disableFormValidation() /src/lib/form-validation/disable-form-validation.js Disables input validation on form inputs.
  • enableFormValidation() /src/lib/form-validation/disable-form-validation.js Enables input validation on form inputs.
  • buttonProcessing() /src/lib/general/button-processing.js Replaces a submit button with inactive button with text Processing upon form submission.
  • ensureArray() /src/lib/general/ensure-array.js Makes an argument an array if it's not, to facilitate uniform input.
  • groupStatesByCountry() /src/lib/general/group-states-by-country.js Updates state drop down by grouping states by country.
  • submitFormOnEnter() /src/lib/general/submit-form-on-enter.js Triggers a form submission when a user hits Enter key.
  • scrollTo() /src/lib/page-navigation/scroll-to.js Gently scrolls the user to the target.
  • pageviewAnalytics() /src/lib/pageview-analytics/pageview-analytics.js Triggers a virtual page view call in analytics.
  • videoAnalytics() /src/lib/pageview-analytics/video-analytics.js Triggers a video track call in analytics.
  • getUserInfoSetAnalytics() /src/lib/user-analytics/get-user-info-set-analytics.js Retrieves user's information from the API, sets login type and location and triggers an analytics call that user has logged in.
  • setSocialMediaLoginInfo() /src/lib/user-analytics/set-social-media-login-info.js Sets a cookie with information as to which social media channel a user has used to log in.
  • setUserAnalytics() /src/lib/user-analytics/get-user-info-set-analytics.js Triggers an analytics call that user has logged in.
  • disableButtonOnSubmit() /src/main/library/disable-button-on-submit.js Disables a button once the form is submitted.
  • getUrlVar() && getUrlVars() /src/main/library/get-url-vars.js Extract parameters from a URL string.
  • isBrowser() /src/main/library/is-browser.js Detects the type of browser is used to view the page.
  • replaceCheckRadio() /src/main/library/replace-check-radio.js Wraps checkboxes and radio inputs with <span> elements to allow for a rich styling of those inputs.
  • smartEvent() /src/main/library/smart-event.js A debounced event function, used to ensure that on events like resized the callback is called only once.

# Key Functionality

# Code execution tree

  • When the document is ready, execute the following function calls.
    • mainMenu() - Enable mobile menu interactions on the main menu.
    • secondaryMenu() - Enable mobile menu interactions on the secondary menu, if one exists.
    • rewriteBase() - Update the <base> tag in PageBuilder, to allow for router Vue.js app to work as expected.
    • logOut() - Handle logout functionality.
    • detectLoginState() - Set body classes based on set cookies for a logged in state. This is a stop-gap solution for the lack of SSO, so we can detect user's logged in state in AEM.
    • detectRegisteredState() - Set body classes based on set cookies for registration/sign up. This is not to show the sign up form to users twice.
    • signUp() - Handle sign up forms submission.
    • maintainSession() - Send a heartbeat to Luminate API to extend user's session.
    • updateBasket() - Update basket count from a cookie.
    • fixBrowserQuirks() - Fix browser inconsistencies with JS.
    • replaceCheckRadio() - Replace all radio and checkbox inputs with HTML, add in on change handlers.
    • imagesToSvg() - Convert svg images into embedded <svg /> tags for ease of overriding styles with CSS. Do the same for <hr /> as they can be colored.
    • enableFancybox() - Enable fancybox/lightbox overlay on elements that have set classes.
    • resizeIframes() - Enable iframe resizing on page load
    • addIdsToYouTubeVideos() - Adds dynamic ids to the YouTube videos for analytics.
    • enableMasonryBoard() - Enables a grid of rectangles on pages that have them.
    • tab() - Handle tab interactions, appears on the hompepage.
    • alert() - Handle alert interactions, if alerts exist.
    • handleScrollLink() - enables smooth js-based scrolling on links.
    • enableAddThis() - Enables addThis to the pages.
    • socialShareAnalytics() & socialFollowAnalytics() - Enables social share/follow analytics on all pages.
    • getUserInfoSetAnalytics() - Trigger user analytics on survey thank you pages.
    • teamraiserLoginAnalytics() - Handle user login analytics on Teamraiser pages.
    • videoAnalytics() - Enable video analytics on AEM pages, so the embedded videos are tracked.

# Code structure

  • /main/stc-scripts.js - Initializes JavaScript execution on document ready.
  • /main/components/*.js - A list of functions that are called directly in /main/stc-scripts.js.
  • /main/library/*/js - A list of helper functions that are used by functions in /main/components/*.js.
  • /lib/page-navigation/*.js - Loads functions for in page gentle scroll.
  • /lib/form-validation/*.js - Form validation functions.
  • /lib/general/**/*.js' - Miscelaneous form utility functions.
  • /lib/form-masking/*.js - Form masking functions.
  • /lib/form-analytics/*.js' - Form validation and submission analytics.
  • /lib/user-analytics/*.js' - User details analytics.
  • /lib/pageview-analytics/*.js - Virtual pageview analytics functions.

# Old browser notice

The main scripts build in the notice for old browsers. To allow for A/B testing the flag has been defined to easily turn on and off the notice. The flag is set in reus_content_catalog PageBuilder page in the variable showBrowserUpdate.

← Braintree integration →