1. /**
    2. * uiProgressButton.js v1.0.0
    3. * http://www.codrops.com
    4. *
    5. * Licensed under the MIT license.
    6. * http://www.opensource.org/licenses/mit-license.php
    7. *
    8. * Copyright 2014, Codrops
    9. * http://www.codrops.com
    10. */
    11. ;( function( window ) {
    13.        'use strict';
    15.        var transEndEventNames = {
    16.                        'WebkitTransition': 'webkitTransitionEnd',
    17.                        'MozTransition': 'transitionend',
    18.                        'OTransition': 'oTransitionEnd',
    19.                        'msTransition': 'MSTransitionEnd',
    20.                        'transition': 'transitionend'
    21.                },
    22.                transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    23.                support = { transitions : Modernizr.csstransitions };
    25.        function extend( a, b ) {
    26.                for( var key in b ) {
    27.                        if( b.hasOwnProperty( key ) ) {
    28.                                a[key] = b[key];
    29.                        }
    30.                }
    31.                return a;
    32.        }
    34.        function SVGEl( el ) {
    35.                this.el = el;
    36.                // the path elements
    37.                this.paths = [].slice.call( this.el.querySelectorAll( 'path' ) );
    38.                // we will save both paths and its lengths in arrays
    39.                this.pathsArr = new Array();
    40.                this.lengthsArr = new Array();
    41.                this._init();
    42.        }
    44.        SVGEl.prototype._init = function() {
    45.                var self = this;
    46.                this.paths.forEach( function( path, i ) {
    47.                        self.pathsArr[i] = path;
    48.                        path.style.strokeDasharray = self.lengthsArr[i] = path.getTotalLength();
    49.                } );
    50.                // undraw stroke
    51.                this.draw(0);
    52.        }
    54.        // val in [0,1] : 0 - no stroke is visible, 1 - stroke is visible
    55.        SVGEl.prototype.draw = function( val ) {
    56.                for( var i = 0, len = this.pathsArr.length; i < len; ++i ){
    57.                        this.pathsArr[ i ].style.strokeDashoffset = this.lengthsArr[ i ] * ( 1 - val );
    58.                }
    59.        }
    61.        function UIProgressButton( el, options ) {
    62.                this.el = el;
    63.                this.options = extend( {}, this.options );
    64.                extend( this.options, options );
    65.                this._init();
    66.        }
    68.        UIProgressButton.prototype.options = {
    69.                // time in ms that the status (success or error will be displayed) - should be at least higher than the transition-duration value defined for the stroke-dashoffset transition of both checkmark and cross strokes
    70.                statusTime : 1500
    71.        }
    73.        UIProgressButton.prototype._init = function() {
    74.                // the button
    75.                this.button = this.el.querySelector( 'button' );
    76.                // progress el
    77.                this.progressEl = new SVGEl( this.el.querySelector( 'svg.progress-circle' ) );
    78.                // the success/error elems
    79.                this.successEl = new SVGEl( this.el.querySelector( 'svg.checkmark' ) );
    80.                this.errorEl = new SVGEl( this.el.querySelector( 'svg.cross' ) );
    81.                // init events
    82.                this._initEvents();
    83.                // enable button
    84.                this._enable();
    85.        }
    87.        UIProgressButton.prototype._initEvents = function() {
    88.                var self = this;
    89.                this.button.addEventListener( 'click', function() { self._submit(); } );
    90.        }
    92.        UIProgressButton.prototype._submit = function() {
    93.                // by adding the loading class the button will transition to a "circle"
    94.                classie.addClass( this.el, 'loading' );
    96.                var self = this,
    97.                        onEndBtnTransitionFn = function( ev ) {
    98.                                if( support.transitions ) {
    99.                                        if( ev.propertyName !== 'width' ) return false;
    100.                                        this.removeEventListener( transEndEventName, onEndBtnTransitionFn );
    101.                                }
    103.                                // disable the button - this should have been the first thing to do when clicking the button.
    104.                                // however if we do so Firefox does not seem to fire the transitionend event.
    105.                                this.setAttribute( 'disabled', '' );
    107.                                if( typeof self.options.callback === 'function' ) {
    108.                                        self.options.callback( self );
    109.                                }
    110.                                else {
    111.                                        // fill it (time will be the one defined in the CSS transition-duration property)
    112.                                        self.setProgress(1);
    113.                                        self.stop();
    114.                                }
    115.                        };
    117.                if( support.transitions ) {
    118.                        this.button.addEventListener( transEndEventName, onEndBtnTransitionFn );
    119.                }
    120.                else {
    121.                        onEndBtnTransitionFn();
    122.                }
    123.        }
    125.        // runs after the progress reaches 100%
    126.        UIProgressButton.prototype.stop = function( status ) {
    127.                var self = this,
    128.                        endLoading = function() {
    129.                                // first undraw progress stroke.
    130.                                self.progressEl.draw(0);
    132.                                if( typeof status === 'number' ) {
    133.                                        var statusClass = status >= 0 ? 'success' : 'error',
    134.                                                statusEl = status >=0 ? self.successEl : self.errorEl;
    136.                                        // draw stroke of success (checkmark) or error (cross).
    137.                                        statusEl.draw( 1 );
    138.                                        // add respective class to the element
    139.                                        classie.addClass( self.el, statusClass );
    140.                                        // after options.statusTime remove status and undraw the respective stroke. Also enable the button.
    141.                                        setTimeout( function() {
    142.                                                classie.remove( self.el, statusClass );
    143.                                                statusEl.draw(0);
    144.                                                self._enable();
    145.                                        }, self.options.statusTime );
    146.                                }
    147.                                else {
    148.                                        self._enable();
    149.                                }
    150.                                // finally remove class loading.
    151.                                classie.removeClass( self.el, 'loading' );
    152.                        };
    154.                // give it a time (ideally the same like the transition time) so that the last progress increment animation is still visible.
    155.                setTimeout( endLoading, 300 );
    156.        }
    158.        UIProgressButton.prototype.setProgress = function( val ) {
    159.                this.progressEl.draw( val );
    160.        }
    162.        // enable button
    163.        UIProgressButton.prototype._enable = function() {
    164.                this.button.removeAttribute( 'disabled' );
    165.        }
    167.        // add to global namespace
    168.        window.UIProgressButton = UIProgressButton;
    170. })( window );