/*!
|
* Ladda
|
* http://lab.hakim.se/ladda
|
* MIT licensed
|
*
|
* Copyright (C) 2014 Hakim El Hattab, http://hakim.se
|
*/
|
/* jshint node:true, browser:true */
|
(function( root, factory ) {
|
|
// CommonJS
|
if( typeof exports === 'object' ) {
|
module.exports = factory(require('spin.js'));
|
}
|
// AMD module
|
else if( typeof define === 'function' && define.amd ) {
|
define( [ 'spin' ], factory );
|
}
|
// Browser global
|
else {
|
root.Ladda = factory( root.Spinner );
|
}
|
|
}
|
(this, function( Spinner ) {
|
'use strict';
|
|
// All currently instantiated instances of Ladda
|
var ALL_INSTANCES = [];
|
|
/**
|
* Creates a new instance of Ladda which wraps the
|
* target button element.
|
*
|
* @return An API object that can be used to control
|
* the loading animation state.
|
*/
|
function create( button ) {
|
|
if( typeof button === 'undefined' ) {
|
console.warn( "Ladda button target must be defined." );
|
return;
|
}
|
|
// The text contents must be wrapped in a ladda-label
|
// element, create one if it doesn't already exist
|
if( !button.querySelector( '.ladda-label' ) ) {
|
button.innerHTML = '<span class="ladda-label">'+ button.innerHTML +'</span>';
|
}
|
|
// The spinner component
|
var spinner;
|
|
// Wrapper element for the spinner
|
var spinnerWrapper = document.createElement( 'span' );
|
spinnerWrapper.className = 'ladda-spinner';
|
button.appendChild( spinnerWrapper );
|
|
// Timer used to delay starting/stopping
|
var timer;
|
|
var instance = {
|
|
/**
|
* Enter the loading state.
|
*/
|
start: function() {
|
|
// Create the spinner if it doesn't already exist
|
if( !spinner ) spinner = createSpinner( button );
|
|
button.setAttribute( 'disabled', '' );
|
button.setAttribute( 'data-loading', '' );
|
|
clearTimeout( timer );
|
spinner.spin( spinnerWrapper );
|
|
this.setProgress( 0 );
|
|
return this; // chain
|
|
},
|
|
/**
|
* Enter the loading state, after a delay.
|
*/
|
startAfter: function( delay ) {
|
|
clearTimeout( timer );
|
timer = setTimeout( function() { instance.start(); }, delay );
|
|
return this; // chain
|
|
},
|
|
/**
|
* Exit the loading state.
|
*/
|
stop: function() {
|
|
button.removeAttribute( 'disabled' );
|
button.removeAttribute( 'data-loading' );
|
|
// Kill the animation after a delay to make sure it
|
// runs for the duration of the button transition
|
clearTimeout( timer );
|
|
if( spinner ) {
|
timer = setTimeout( function() { spinner.stop(); }, 1000 );
|
}
|
|
return this; // chain
|
|
},
|
|
/**
|
* Toggle the loading state on/off.
|
*/
|
toggle: function() {
|
|
if( this.isLoading() ) {
|
this.stop();
|
}
|
else {
|
this.start();
|
}
|
|
return this; // chain
|
|
},
|
|
/**
|
* Sets the width of the visual progress bar inside of
|
* this Ladda button
|
*
|
* @param {Number} progress in the range of 0-1
|
*/
|
setProgress: function( progress ) {
|
|
// Cap it
|
progress = Math.max( Math.min( progress, 1 ), 0 );
|
|
var progressElement = button.querySelector( '.ladda-progress' );
|
|
// Remove the progress bar if we're at 0 progress
|
if( progress === 0 && progressElement && progressElement.parentNode ) {
|
progressElement.parentNode.removeChild( progressElement );
|
}
|
else {
|
if( !progressElement ) {
|
progressElement = document.createElement( 'div' );
|
progressElement.className = 'ladda-progress';
|
button.appendChild( progressElement );
|
}
|
|
progressElement.style.width = ( ( progress || 0 ) * button.offsetWidth ) + 'px';
|
}
|
|
},
|
|
enable: function() {
|
|
this.stop();
|
|
return this; // chain
|
|
},
|
|
disable: function () {
|
|
this.stop();
|
button.setAttribute( 'disabled', '' );
|
|
return this; // chain
|
|
},
|
|
isLoading: function() {
|
|
return button.hasAttribute( 'data-loading' );
|
|
},
|
|
remove: function() {
|
|
clearTimeout( timer );
|
|
button.removeAttribute( 'disabled', '' );
|
button.removeAttribute( 'data-loading', '' );
|
|
if( spinner ) {
|
spinner.stop();
|
spinner = null;
|
}
|
|
for( var i = 0, len = ALL_INSTANCES.length; i < len; i++ ) {
|
if( instance === ALL_INSTANCES[i] ) {
|
ALL_INSTANCES.splice( i, 1 );
|
break;
|
}
|
}
|
|
}
|
|
};
|
|
ALL_INSTANCES.push( instance );
|
|
return instance;
|
|
}
|
|
/**
|
* Get the first ancestor node from an element, having a
|
* certain type.
|
*
|
* @param elem An HTML element
|
* @param type an HTML tag type (uppercased)
|
*
|
* @return An HTML element
|
*/
|
function getAncestorOfTagType( elem, type ) {
|
|
while ( elem.parentNode && elem.tagName !== type ) {
|
elem = elem.parentNode;
|
}
|
|
return ( type === elem.tagName ) ? elem : undefined;
|
|
}
|
|
/**
|
* Returns a list of all inputs in the given form that
|
* have their `required` attribute set.
|
*
|
* @param form The from HTML element to look in
|
*
|
* @return A list of elements
|
*/
|
function getRequiredFields( form ) {
|
|
var requirables = [ 'input', 'textarea' ];
|
var inputs = [];
|
|
for( var i = 0; i < requirables.length; i++ ) {
|
var candidates = form.getElementsByTagName( requirables[i] );
|
for( var j = 0; j < candidates.length; j++ ) {
|
if ( candidates[j].hasAttribute( 'required' ) ) {
|
inputs.push( candidates[j] );
|
}
|
}
|
}
|
|
return inputs;
|
|
}
|
|
|
/**
|
* Binds the target buttons to automatically enter the
|
* loading state when clicked.
|
*
|
* @param target Either an HTML element or a CSS selector.
|
* @param options
|
* - timeout Number of milliseconds to wait before
|
* automatically cancelling the animation.
|
*/
|
function bind( target, options ) {
|
|
options = options || {};
|
|
var targets = [];
|
|
if( typeof target === 'string' ) {
|
targets = toArray( document.querySelectorAll( target ) );
|
}
|
else if( typeof target === 'object' && typeof target.nodeName === 'string' ) {
|
targets = [ target ];
|
}
|
|
for( var i = 0, len = targets.length; i < len; i++ ) {
|
|
(function() {
|
var element = targets[i];
|
|
// Make sure we're working with a DOM element
|
if( typeof element.addEventListener === 'function' ) {
|
var instance = create( element );
|
var timeout = -1;
|
|
element.addEventListener( 'click', function( event ) {
|
|
// If the button belongs to a form, make sure all the
|
// fields in that form are filled out
|
var valid = true;
|
var form = getAncestorOfTagType( element, 'FORM' );
|
|
if( typeof form !== 'undefined' ) {
|
var requireds = getRequiredFields( form );
|
for( var i = 0; i < requireds.length; i++ ) {
|
// Alternatively to this trim() check,
|
// we could have use .checkValidity() or .validity.valid
|
if( requireds[i].value.replace( /^\s+|\s+$/g, '' ) === '' ) {
|
valid = false;
|
}
|
}
|
}
|
|
if( valid ) {
|
// This is asynchronous to avoid an issue where setting
|
// the disabled attribute on the button prevents forms
|
// from submitting
|
instance.startAfter( 1 );
|
|
// Set a loading timeout if one is specified
|
if( typeof options.timeout === 'number' ) {
|
clearTimeout( timeout );
|
timeout = setTimeout( instance.stop, options.timeout );
|
}
|
|
// Invoke callbacks
|
if( typeof options.callback === 'function' ) {
|
options.callback.apply( null, [ instance ] );
|
}
|
}
|
|
}, false );
|
}
|
})();
|
|
}
|
|
}
|
|
/**
|
* Stops ALL current loading animations.
|
*/
|
function stopAll() {
|
|
for( var i = 0, len = ALL_INSTANCES.length; i < len; i++ ) {
|
ALL_INSTANCES[i].stop();
|
}
|
|
}
|
|
function createSpinner( button ) {
|
|
var height = button.offsetHeight,
|
spinnerColor;
|
|
if( height === 0 ) {
|
// We may have an element that is not visible so
|
// we attempt to get the height in a different way
|
height = parseFloat( window.getComputedStyle( button ).height );
|
}
|
|
// If the button is tall we can afford some padding
|
if( height > 32 ) {
|
height *= 0.8;
|
}
|
|
// Prefer an explicit height if one is defined
|
if( button.hasAttribute( 'data-spinner-size' ) ) {
|
height = parseInt( button.getAttribute( 'data-spinner-size' ), 10 );
|
}
|
|
// Allow buttons to specify the color of the spinner element
|
if( button.hasAttribute( 'data-spinner-color' ) ) {
|
spinnerColor = button.getAttribute( 'data-spinner-color' );
|
}
|
|
var lines = 12,
|
radius = height * 0.2,
|
length = radius * 0.6,
|
width = radius < 7 ? 2 : 3;
|
|
return new Spinner( {
|
color: spinnerColor || '#fff',
|
lines: lines,
|
radius: radius,
|
length: length,
|
width: width,
|
zIndex: 'auto',
|
top: 'auto',
|
left: 'auto',
|
className: ''
|
} );
|
|
}
|
|
function toArray( nodes ) {
|
|
var a = [];
|
|
for ( var i = 0; i < nodes.length; i++ ) {
|
a.push( nodes[ i ] );
|
}
|
|
return a;
|
|
}
|
|
// Public API
|
return {
|
|
bind: bind,
|
create: create,
|
stopAll: stopAll
|
|
};
|
|
}));
|
