JavaScript

Lone Wolf UI Kit

Important: Bootstrap Plugins

Remember that we use Bootstrap as the base! Extend the functionality of your projects using the plugins that come with Bootstrap, as well as some additional plugins we've decided to feature on our platform products. Make sure you review Bootstrap's JavaScript section that covers all the plugins that come with the framework. We will not be covering the plugins that come with Bootstrap, please refer to their documentation to learn how to use ScrollSpy, Collapse, Affix and more!

Bootstrap Plugins (Open in new tab)

Non-Bootstrap Plugins

The remaining items that appear on this page use either fucntioanlity we have baked into our primary JS file; or they use a third party plugin. Items that require JS dependencies are indicated. See the Required JavaScript section for more information.

Selectize.js

Selectize.js transforms a plain select into an Combo Box (text input + select dropdown + auto-suggest)—just place a .selectize class on the select!

View Accessibility Notes

PLUGIN SCRIPTS REQUIRED. At this itme, both the CSS and the JS need to be called in the head of your document. 

<!-- selectize.bootstrap3.css -->
<link rel="stylesheet" href="UNIVERSAL URL PENDING SORRY/selectize.bootstrap3.css"/>
<!-- selectize.js -->
<script type="text/javascript" src="UNIVERSAL URL PENDING SORRY/selectize.js"></script>

ComboBox

<!-- ComboBox Select -->
<div class="form-group">
	<label for="REPLACE ME" class="control-label">Select a Beast:</label>
	<select id="REPLACE ME" class="form-control selectize">
		<option value="coyote">Coyote</option>
		<option value="uni">Unicorn</option>
		...
	</select>
</div>

<!-- ComboBox Select Using Option Groups -->
<div class="form-group">
	<label for="REPLACE ME" class="control-label">Using Option Groups:</label>
	<select id="REPLACE ME" class="form-control selectize" placeholder="Select gear...">
		<option value="">Select gear...</option>
		<optgroup label="Climbing">
			<option value="pitons">Pitons</option>
			<option value="cams">Cams</option>
			...
		</optgroup>
		<optgroup label="Skiing">
			<option value="skis">Skis</option>
			<option value="skins">Skins</option>
			...
		</optgroup>
	</select>
</div>

Multi-Select (Tag) Input

Create dynamic tags inside a text input by initializing customized Selectize.js API on it. This requires custom options be defined. There are a few examples of this below, however please see Selectize Website and Selectize Documentation for more in-depth information.

If you require your input to contain multiple tags and expand a bit to accommodate that, use the .form-group-expandable class on the containing .form-group. If you need the .form-group to expand (almost) indefinitely, use .form-group-expand-fully instead. Try out the expanding inputs below to see how this affects elements lower on the page.

IMPORTANT! Because the multis require customization, do not use the .selectize on any of these inputs. They require a unique ID to call the script with. 

<!-- Create Tags, With Limit -->
<div class="form-group">
	<label for="REPLACE ME" class="control-label">Type Max Three Tags:</label>
	<input type="text" id="REPLACE ME" class="form-control" value="one, two">
</div>
<!-- Create Tags, With Limit Script -->
<script>
	Selectize.define('accessibility', function(options){
	    var self = this;
	    self.setup = (function(){
	        var original = self.setup;
	        return function(){
	            original.apply(self, arguments);
	            self.$wrapper.attr({'role': 'application'});
	            self.$dropdown.attr({'id': 'REPLACE ME', 'role': 'listbox'});
	            self.$control_input.attr({
	                'aria-owns'        : 'REPLACE ME',
	                'aria-haspopup'    : 'true',
	                'role'             : 'combobox',
	                'aria-autocomplete': 'list',
	                'id' : 'REPLACE ME'
	            });
	        };
	    })();
	});
	$('#select-three').selectize({
	    maxItems: 3,
	    delimiter: ',',
	    persist: false,
	    create: function(input) {
	        return {
	            value: input,
	            text: input
	        }
	    },
		plugins: {"accessibility": {}},
	});
</script>

<!-- Select Multi Tags, Expandable -->
<div class="form-group form-group-expandable">
	<label for="REPLACE ME" class="control-label">Multi With Expanding Form Group:</label>
	<input type="text" id="REPLACE ME" class="form-control" value="">
</div>
<!-- Select Multi Tags, Expandable Script -->
<script>
	Selectize.define('accessibility', function(options){
	    var self = this;
	    self.setup = (function(){
	        var original = self.setup;
	        return function(){
	            original.apply(self, arguments);
	            self.$wrapper.attr({'role': 'application'});
	            self.$dropdown.attr({'id': 'REPLACE ME', 'role': 'listbox'});
	            self.$control_input.attr({
	                'aria-owns'        : 'REPLACE ME',
	                'aria-haspopup'    : 'true',
	                'role'             : 'combobox',
	                'aria-autocomplete': 'list',
	                'id' : 'REPLACE ME'
	            });
	        };
	    })();
	});
	$('#input-tags').selectize({
	    delimiter: ',',
	    persist: false,
	    maxItems: null,
	    valueField: 'project',
	    labelField: 'name',
	    searchField: ['project', 'name'],
	    options: [
	        {project: '123 Condos', name: 'The Helix Group'},
	        {project: '1 Young Street', name: 'Tesla Designs'},
	        {project: 'B Street Condos'},
	       	...
		],
	    render: {
	        item: function(item, escape) {
	            return '<div>' +
	                (item.project ? '<span class="project">' + escape(item.project) + '</span>' : '') +
	            '</div>';
	    },
	    option: function(item, escape) {
	            return '<div role="option" aria-label="' + escape(item.project) + '">' +
	                (item.project ? '<span class="project">' + escape(item.project) + '</span>' : '') +
	                (item.name ? '<span class="name">&nbsp;by&nbsp;' + escape(item.name) + '</span>' : '') +
	            '</div>';
	    },
	  },
	  plugins: {"accessibility": {}}
	});
</script>

<!-- Select Multi Tags, Fully Expandable -->
<div class="form-group form-group-expand-fully">
	<label for="REPLACE ME" class="control-label">Multi With Fully Expanding Form-Group:</label>
	<input type="text" id="REPLACE ME" class="form-control" value="">
</div>
<!-- Select Multi Tags, Fully Expandable Script -->
<script>
	Selectize.define('accessibility', function(options){
	    var self = this;
	    self.setup = (function(){
	        var original = self.setup;
	        return function(){
	            original.apply(self, arguments);
	            self.$wrapper.attr({'role': 'application'});
	            self.$dropdown.attr({'id': 'REPLACE ME', 'role': 'listbox'});
	            self.$control_input.attr({
	                'aria-owns'        : 'REPLACE ME',
	                'aria-haspopup'    : 'true',
	                'role'             : 'combobox',
	                'aria-autocomplete': 'list',
	                id: 'REPLACE ME'
	            });
	        };
	    })();
	});
	$('#input-tags2').selectize({
		delimiter: ',',
		persist: false,
		maxItems: null,
	    valueField: 'project',
	    labelField: 'name',
	    searchField: ['project', 'name'],
	    options: [
	        {project: '123 Condos', name: 'The Helix Group'},
	        {project: '1 Young Street', name: 'Tesla Designs'},
	        {project: 'B Street Condos'},
	        ...
	    ],
	    render: {
	        item: function(item, escape) {
	            return '<div>' +
	                (item.project ? '<span class="project">' + escape(item.project) + '</span>' : '') +
	            '</div>';
	        },
	        option: function(item, escape) {
	            return '<div role="option" aria-label="' + escape(item.project) + '">' +
	                (item.project ? '<span class="project">' + escape(item.project) + '</span>' : '') +
	                (item.name ? '<span class="name">&nbsp;by&nbsp;' + escape(item.name) + '</span>' : '') +
	            '</div>';
	        },
	    },
	    plugins: {"accessibility": {}},
	});
</script>

Selectize With Active/Floating Label

<!-- Combo Box Using Option Groups -->
<div class="form-group">
	<select id="REPLACE ME" class="form-control selectize">
		<option value=""></option>
		<optgroup label="Downtown">
			<option value="a">The Annex</option>
			<option value="c-p">College Park</option>
			...
		</optgroup>
		<optgroup label="West End">
			<option value="h-p">High Park</option>
			<option value="b-w-v">Bloor West Village</option>
		</optgroup>
		<optgroup label="East End">
			<option value="v-p">Victoria Park</option>
			<option value="t-b">The Beaches</option>
			...
		</optgroup>
	</select>
	<label for="REPLACE ME">Select An Area</label>
</div>

<!-- Create Tags, With Limit -->
<div class="form-group">
	<input type="text" id="REPLACE ME" class="form-control" value="uno, dos">
	<label for="REPLACE ME">Type Up To Six Tags</label>
</div>
<!-- Create Tags, With Limit Script -->
<script>
	Selectize.define('accessibility', function(options){
	    var self = this;
	    self.setup = (function(){
	        var original = self.setup;
	        return function(){
	            original.apply(self, arguments);
	            self.$wrapper.attr({'role': 'application'});
	            self.$dropdown.attr({'id': 'REPLACE ME', 'role': 'listbox'});
	            self.$control_input.attr({
	                'aria-owns'        : 'REPLACE ME',
	                'aria-haspopup'    : 'true',
	                'role'             : 'combobox',
	                'aria-autocomplete': 'list',
	                'id' : 'REPLACE ME'
	            });
	        };
	    })();
	});
	$('#select-six').selectize({
	    maxItems: 6,
	    delimiter: ',',
	    persist: false,
	    create: function(input) {
	        return {
	            value: input,
	            text: input
	        }
	    },
		plugins: {"accessibility": {}},
	});
</script>

<!-- Select Multi Tags, Expandable -->
<div class="form-group form-group-expandable">
	<input type="text" id="REPLACE ME" class="form-control" value="">
	<label for="REPLACE ME">Multi With Expanding Form-Group</label>
</div>
<!-- Select Multi Tags, Expandable Script -->
<script>
	Selectize.define('accessibility', function(options){
	    var self = this;
	    self.setup = (function(){
	        var original = self.setup;
	        return function(){
	            original.apply(self, arguments);
	            self.$wrapper.attr({'role': 'application'});
	            self.$dropdown.attr({'id': 'REPLACE ME', 'role': 'listbox'});
	            self.$control_input.attr({
	                'aria-owns'        : 'REPLACE ME',
	                'aria-haspopup'    : 'true',
	                'role'             : 'combobox',
	                'aria-autocomplete': 'list',
	                'id' : 'REPLACE ME'
	            });
	        };
	    })();
	});
	$('#input-tags3').selectize({
		delimiter: ',',
		persist: false,
		maxItems: null,
	    valueField: 'project',
	    labelField: 'name',
	    searchField: ['project', 'name'],
	    options: [
	        {project: '123 Condos', name: 'The Helix Group'},
	        {project: '1 Young Street', name: 'Tesla Designs'},
	        {project: 'B Street Condos'},
	        ...
	    ],
	    render: {
	        item: function(item, escape) {
	            return '<div>' +
	                (item.project ? '<span class="project">' + escape(item.project) + '</span>' : '') +
	            '</div>';
	        },
	        option: function(item, escape) {
	            return '<div role="option" aria-label="' + escape(item.project) + '">' +
	                (item.project ? '<span class="project">' + escape(item.project) + '</span>' : '') +
	                (item.name ? '<span class="name">&nbsp;by&nbsp;' + escape(item.name) + '</span>' : '') +
	            '</div>';
	        },
	     },
	    plugins: {"accessibility": {}},
	});
</script>

Datepicker.js

We are using this plug-in: Bootstrap Datepicker.
There are several variations on the datepicker for Bootstrap Datepicker, check their Sandbox Developer Tool to configure the Datepicker how ever you require. (Ie: open on month or year, weekends disabled, format, date ranges etc. ) It will generate the proper variables for you automatically.

View Accessibility Notes

PLUGIN SCRIPTS REQUIRED. You will need to call bootstrap-datepicker.js in the head fo yoru document. 

<!-- https://github.com/eternicode/bootstrap-datepicker -->
<script type="text/javascript" src="UNIVERSAL URL PENDING SORRY/bootstrap-datepicker.js"></script>

Default Input With Datepicker

Note: Input groups with Icon Add-on do not need a label, use ARIA-LABEL instead.

<fieldset class="form-group">
	<label for="REPLACE ME" class="control-label">Select a Date:</label>
	<input id="REPLACE ME" class="datepicker form-control" type="text" value="03/12/2016" aria-expanded="false" aria-haspop="true"/>
</fieldset>

Active/Floating Label Input With Datepicker

<form class="form-active-labels">
	<div class="form-group">
		<input id="REPLACE ME" class="datepicker form-control" type="text" value="03/12/2016" aria-expanded="false" aria-haspop="true"/>
		<label for="REPLACE ME">With Floating Label</label>
	</div>
</form>

Smooth Scroll

Instantly add a smooth scroll to anchor tags on any page using the .smooth-scroll class.

The Smooth Scroll requires LW-universal.js. If you are starting a project from scratch, you can find the file here.

View Accessibility Notes

Oh, Scroll Me 

 <a href="#alert" class="btn btn-primary btn-raised smooth-scroll" data-focus="alert" role="button">Oh, Scroll Me</a>

Nice Scrollbars

Containers with overflow:scroll should use the .scrollable class to replace default browsers scrollbars. This evokes the SlimScroll.js plug-in.

Place the .scrollable class on a plain container div with no other classes. The container div MUST have a px or % height specified to work properly.

The Nice Scrollbars required files are jquery.slimscroll.min.js and LW-universal.js. If you are starting a project from scratch, you can find the files here and here.

View Accessibility Notes

SlimScroll.js in action!

width - Width in pixels of the visible scroll area. Stretch-to-parent if not set. Default: none

height - Height in pixels of the visible scroll area. Also supports auto to set the height to same as parent container. Default: 250px

size - Width in pixels of the scrollbar. Default: 7px

position - left or right. Sets the position of the scrollbar. Default: right

alwaysVisible - Disables scrollbar hide. Default: false

distance - Distance in pixels from the edge of the parent element where scrollbar should appear. It is used together with position property. Default:1px

start - top or bottom or $(selector) - defines initial position of the scrollbar. When set to bottom it automatically scrolls to the bottom of the scrollable container. When HTML element is passed, slimScroll defaults to offsetTop of this element. Default: top.

wheelStep - Integer value for mouse wheel delta. Default: 20

railVisible - Enables scrollbar rail. Default: false

railColor - Sets scrollbar rail color, Default: #333333

railOpacity - Sets scrollbar rail opacity. Default: 0.2

allowPageScroll - Checks if mouse wheel should scroll page when bar reaches top or bottom of the container. When set to true is scrolls the page.Default: false

scrollTo - Jumps to the specified scroll value. Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({ scrollTo: '50px' });

scrollBy - Increases/decreases current scroll value by specified amount (positive or negative). Can be called on any element with slimScroll already enabled. Example: $(element).slimScroll({ scrollBy: '60px' });

disableFadeOut - Disables scrollbar auto fade. When set to true scrollbar doesn't disappear after some time when mouse is over the slimscroll div.Default: false

touchScrollStep - Allows to set different sensitivity for touch scroll events. Negative number inverts scroll direction.Default: 200

 <div style="height: 250px;">
	<div class="scrollable" tabindex="0" role="region" arial-label="REPLACE ME">
		...
	</div>
 </div>

Required JavaScript

For projects that are starting from scratch, please see which JS files to include.

The following should appear in head:

  • jquery.min.js (link to file hosted on globalwolf.com)
  • bootstrap.min.js (link to file hosted on globalwolf.com)
  • bootstrap-datepicker.js (universal link URL pending, sorry)
  • jquery.slimscroll.min.js (universal link URL pending, sorry)
  • standalone/selectize.js (universal link URL pending, sorry)
<!--
****************************************
Universal JS Part I
****************************************
-->
<script type="text/javascript" src="https://www.globalwolf.com/static/vendor/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="https://www.globalwolf.com/static/vendor/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- https://github.com/eternicode/bootstrap-datepicker -->
<script type="text/javascript" src="UNIVERSAL URL PENDING SORRY/bootstrap-datepicker.js"></script>
<!-- Selectize.js -->
<script type="text/javascript" src="UNIVERSAL URL PENDING SORRY/selectize.js"></script>
<!-- For nice scrollbars, call SlimScroll.js -->
<script type="text/javascript" src="UNIVERSAL URL PENDING SORRY/jquery.slimscroll.min.js"></script>

The following should appear after /body:

  • material.min.js (universal link URL pending, sorry)
  • material-kit.js (universal link URL pending, sorry)
  • LW-universal.js (IMPORTANT call this script AFTER the others listed above.)
<!--
****************************************
Universal JS Part II
****************************************
-->
<!-- Google Material Design assets -->
<script type="text/javascript" src="UNIVERSAL URL PENDING SORRY/material.min.js"></script>
<script type="text/javascript" src="UNIVERSAL URL PENDING SORRY/material-kit.js"></script>
<!-- Product scripts -->
<script type="text/javascript" src="UNIVERSAL URL PENDING SORRY/LW-universal.js"></script>