"use strict";

/**
 * Show loading progress in button
 * Usage : <button class="btn-progress">Async call</button>
 * Note : $parent controller must define a $loading variable to apply effect
 */
angular.module('btnProgress', [])

    .directive('btnProgress', function () {
        return {
            restrict: 'C',
            scope: false,

            template: function (element) {
                return element[0].innerText + ' <i class="fa fa-circle-o-notch fa-spin" ng-if="$loading"></i>';
            },

            link: function (scope, element) {

                scope.$watch('$loading', function (isLoading) {
                    if (angular.isDefined(isLoading))
                        toggleDisabled();
                });

                function toggleDisabled() {
                    element[0].disabled = !element[0].disabled;
                }
            }
        }
    });