Blvd Framework JS Library

The JS library provided by Blvd provides some core JS and jS modules out of the box for themes to use and extend. The setup makes assumptions about themes and how they are loaded and how they load their Javascript as outlined below.

Javascript Assumptions

1. Themes will load assets/js/scripts.js during development and assets/js/scripts.min.js during production.
2. Themes will load all required UI JS for HJI plugins. Most UI JS that would normally be included by HJI plugins is "dequeued" so that the theme/framework can package the JS in a more efficient manner.
3. Blvd Framework themes will load boulevard.core.js.
4. Blvd Framework JS will be loaded through RequireJS.

Javascript Organization / Paths

Blvd Framework javascript can be broken into 2 categories; Core JS and Module JS. Core JS includes anything that is needed on the majority of pages while module JS is for things that are only needed on specific pages or completely optional. Both Core JS and Module JS are registered with RequireJS through Membership and loaded asynchronously by a theme, plugin or page builder.

Loading Blvd Core JS in Your Theme

Themes have their own javascript file that will be automatically enqueued through standard WP script enqueueing by Blvd. The filename of the loaded script is  scripts.js for development and scripts.min.js for production. It's within this file that you will load the Blvd JS framework through RequireJS. Below is an example of how the framework JS is loaded and initialized in Central Blvd.

hji.require(['blvd/core'], function() {
    // tooltips (bootstrap)
    $("[data-toggle=tooltip]").tooltip();

    // popovers (bootstrap)
    $("[data-toggle=popover]").popover();

    // intialize the boulevard javascript framework
    $(document).boulevard();
});

Notice that the  require function is namespaced and should be called as hji.require in order to load properly.

Core JS from Blvd includes the following JS modules from Bootstrap 3...

• affix
• button
• collapse
• dropdown
• modal
• popover
• tooltip
• transition

In addition to the bootstrap modules, Core JS also includes the following Javascript...

• boulevard.js - Core plugin loader and setup
• boulevard.agentRoster.js - Code for agent roster functionality
• boulevard.moduleLoader.js - Async module loader / initializer
• boulevard.panel.js - Tab / Mobile Accordion module
• boulevard.selectize.js - Initializes selectize for theme usage (not for polygon search fields - that JS comes from rIDX)
• boulevard.util.mediaQuery.js - media query helper
• boulevard.util.trigger.js - events

Much of the core Blvd JS library has been "borrowed" from Foundation by Zurb and Twitter Bootstrap v3. Many thanks to the efforts of all of the contributors to those libraries.

JS Modules

Javascript modules are registered with RequireJS and are ready for use by themes and/or plugins. There are 2 ways to load a JS module on a specific page or pages across your project. You can load most modules with data attributes on an HTML element within your markup or with a RequireJS call within your theme's javascript.

Loading / Initializing Modules

The easiest way to load a module is by using data attributes on an HTML element. The initialization data attribute will match the name of the plugin. For example, to load the Blvd Header module you will add  data-header to the header element of your theme.

<div data-header id="site-header" class="navbar navbar-default" itemscope itemtype="http://schema.org/WPHeader">...</div>

You can also use vanilla JS to load and initialize a plugin...

hji.require(['blvd/header'], function() {
    let header = new Boulevard.Header($('#site-header'));
});

Configuring Modules

Many of the Blvd JS modules can have different settings. You can customize the settings in HTML attributes, within the Javascript of an individual module or even for all default instances of a module.

Customizing Module Defaults

When customizing the defaults of a module you'll need to ensure you run the default setting code on a callback to the plugin registered event. This is because we're loading and registering the modules as Boulevard plugins asynchronously and need to wait for the registration event to occur.

// turns off headroom option
$(document).on('register.blvd.Header', function() {
    Boulevard.Header.defaults.headroom = false;
});

This code will ensure that anytime a Header module is loaded without its own custom settings, it will load with the custom default settings we specify. In the above example, we turn off the headroom part of the header module.

JS Module List