├── .gitignore ├── test ├── app │ ├── commonjs │ │ ├── webpack.config.js │ │ ├── entry.js │ │ └── app.js │ ├── amd │ │ ├── bootstrap.js │ │ ├── app.js │ │ └── main.js │ ├── dialog.html │ ├── commonjs.html │ ├── amd.html │ └── index.html └── e2e │ ├── app │ ├── commonjs │ │ ├── webpack.config.js │ │ ├── entry.js │ │ └── app.js │ ├── amd │ │ ├── bootstrap.js │ │ ├── app.js │ │ └── main.js │ ├── commonjs.html │ ├── amd.html │ ├── test.html │ ├── data.html │ ├── ngif.html │ ├── config.html │ ├── disabled.html │ ├── binding.html │ └── form.html │ └── spec │ ├── data.js │ ├── form.js │ ├── binding.js │ ├── config.js │ ├── disabled.js │ ├── ngif.js │ ├── test.js │ ├── amd.js │ └── commonjs.js ├── .jshintrc ├── .travis.yml ├── bower.json ├── LICENSE ├── dist ├── angular-ladda.min.js └── angular-ladda.js ├── package.json ├── CHANGELOG.md ├── protractor.conf.js ├── gulpfile.js ├── src └── angular-ladda.js └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | .tmp/ 3 | node_modules/ 4 | test.sh -------------------------------------------------------------------------------- /test/app/commonjs/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | } 5 | -------------------------------------------------------------------------------- /test/e2e/app/commonjs/webpack.config.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = { 4 | } 5 | -------------------------------------------------------------------------------- /test/app/commonjs/entry.js: -------------------------------------------------------------------------------- 1 | var angular = require('angular'); 2 | require('./app'); 3 | 4 | angular.bootstrap(document, ['testApp']); -------------------------------------------------------------------------------- /test/e2e/app/commonjs/entry.js: -------------------------------------------------------------------------------- 1 | var angular = require('angular'); 2 | require('./app'); 3 | 4 | angular.bootstrap(document, ['testApp']); -------------------------------------------------------------------------------- /test/app/amd/bootstrap.js: -------------------------------------------------------------------------------- 1 | /** 2 | * bootstraps angular onto the window.document node 3 | */ 4 | define([ 5 | 'require', 6 | 'angular', 7 | 'app' 8 | ], function (require, ng) { 9 | 'use strict'; 10 | ng.bootstrap(document, ['testApp']); 11 | }); 12 | -------------------------------------------------------------------------------- /test/e2e/app/amd/bootstrap.js: -------------------------------------------------------------------------------- 1 | /** 2 | * bootstraps angular onto the window.document node 3 | */ 4 | define([ 5 | 'require', 6 | 'angular', 7 | 'app' 8 | ], function (require, ng) { 9 | 'use strict'; 10 | ng.bootstrap(document, ['testApp']); 11 | }); 12 | -------------------------------------------------------------------------------- /test/e2e/spec/data.js: -------------------------------------------------------------------------------- 1 | describe('data-ladda case test', function() { 2 | beforeEach(function () { 3 | browser.get('/data.html'); 4 | }); 5 | 6 | it('should compile inner text', function() { 7 | expect(element(by.id('btn')).getText()).toEqual('ladda button'); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /test/e2e/spec/form.js: -------------------------------------------------------------------------------- 1 | describe('duplicate compile test', function() { 2 | beforeEach(function () { 3 | browser.get('/form.html'); 4 | }); 5 | 6 | it('should msg element is only one', function() { 7 | expect(element.all(by.className('help-block')).count()).toEqual(1); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /test/e2e/spec/binding.js: -------------------------------------------------------------------------------- 1 | describe('Double curly binding test', function() { 2 | beforeEach(function () { 3 | browser.get('/binding.html'); 4 | }); 5 | 6 | it('should compile binding', function() { 7 | expect(element(by.css('#loader1 .ladda-spinner div')).isPresent()).toBe(true); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /test/e2e/spec/config.js: -------------------------------------------------------------------------------- 1 | describe('config test', function() { 2 | beforeEach(function () { 3 | browser.get('/config.html'); 4 | }); 5 | 6 | it('change default style to expand-left', function() { 7 | expect(element(by.id('btn')).getAttribute('data-style')).toEqual('expand-left'); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /test/e2e/spec/disabled.js: -------------------------------------------------------------------------------- 1 | describe('ng-disabled test', function() { 2 | beforeEach(function () { 3 | browser.get('/disabled.html'); 4 | }); 5 | 6 | it('should compile ng-disabled attribute', function() { 7 | expect(element(by.id('btn')).getAttribute('disabled')).not.toBe(null); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /test/app/commonjs/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var angular = require('angular'); 4 | 5 | angular.module('testApp', [require('../../../src/angular-ladda.js')]) 6 | .config(function (laddaProvider) { 7 | 8 | }) 9 | .controller('TestController', ['$scope', function($scope) { 10 | $scope.buttonText = "ladda button"; 11 | }]); 12 | -------------------------------------------------------------------------------- /test/e2e/app/commonjs/app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var angular = require('angular'); 4 | 5 | angular.module('testApp', [require('../../../src/angular-ladda.js')]) 6 | .config(function (laddaProvider) { 7 | 8 | }) 9 | .controller('TestController', ['$scope', function($scope) { 10 | $scope.buttonText = "ladda button"; 11 | }]); 12 | -------------------------------------------------------------------------------- /test/app/amd/app.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'angular', 3 | '/src/angular-ladda.js' 4 | ], function (ng) { 5 | 'use strict'; 6 | 7 | return ng.module('testApp', ['angular-ladda']) 8 | .config(function (laddaProvider) { 9 | 10 | }) 11 | .controller('TestController', ['$scope', function($scope) { 12 | $scope.buttonText = "ladda button"; 13 | }]); 14 | }); 15 | -------------------------------------------------------------------------------- /test/e2e/app/amd/app.js: -------------------------------------------------------------------------------- 1 | define([ 2 | 'angular', 3 | '/dist/angular-ladda.min.js' 4 | ], function (ng) { 5 | 'use strict'; 6 | 7 | return ng.module('testApp', ['angular-ladda']) 8 | .config(function (laddaProvider) { 9 | 10 | }) 11 | .controller('TestController', ['$scope', function($scope) { 12 | $scope.buttonText = "ladda button"; 13 | }]); 14 | }); 15 | -------------------------------------------------------------------------------- /test/app/dialog.html: -------------------------------------------------------------------------------- 1 |
2 |

I'm a modal!

3 |
4 |
5 | 6 |
7 |
8 | 9 | 10 |
11 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "node": true, 3 | "browser": true, 4 | "esnext": true, 5 | "bitwise": true, 6 | "camelcase": true, 7 | "curly": true, 8 | "eqeqeq": true, 9 | "immed": true, 10 | "indent": 2, 11 | "latedef": true, 12 | "newcap": true, 13 | "noarg": true, 14 | "quotmark": "single", 15 | "regexp": true, 16 | "undef": true, 17 | "unused": true, 18 | "strict": true, 19 | "trailing": true, 20 | "smarttabs": true, 21 | "globals": { 22 | "angular": false, 23 | "define": false 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /test/app/commonjs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Webpack(CommonJS) Test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/e2e/app/commonjs.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Webpack(CommonJS) Test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/app/amd.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | RequireJS(AMD) Test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/e2e/app/amd.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | RequireJS(AMD) Test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /test/app/amd/main.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | // alias libraries paths 3 | paths: { 4 | 'spin': '/bower_components/ladda/dist/spin.min', 5 | 'ladda': '/bower_components/ladda/js/ladda', 6 | 'angular': '/bower_components/angular/angular' 7 | }, 8 | 9 | // angular does not support AMD out of the box, put it in a shim 10 | shim: { 11 | 'angular': { 12 | exports: 'angular' 13 | }, 14 | 'spin': { 15 | exports: 'spin' 16 | }, 17 | 'ladda': { 18 | exports: 'ladda' 19 | } 20 | }, 21 | 22 | // kick start application 23 | deps: ['./bootstrap'] 24 | }); 25 | -------------------------------------------------------------------------------- /test/e2e/app/amd/main.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | // alias libraries paths 3 | paths: { 4 | 'spin': '/bower_components/ladda/dist/spin.min', 5 | 'ladda': '/bower_components/ladda/js/ladda', 6 | 'angular': '/bower_components/angular/angular' 7 | }, 8 | 9 | // angular does not support AMD out of the box, put it in a shim 10 | shim: { 11 | 'angular': { 12 | exports: 'angular' 13 | }, 14 | 'spin': { 15 | exports: 'spin' 16 | }, 17 | 'ladda': { 18 | exports: 'ladda' 19 | } 20 | }, 21 | 22 | // kick start application 23 | deps: ['./bootstrap'] 24 | }); 25 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - '0.10' 4 | before_script: 5 | - npm install -g bower 6 | - bower install 7 | - node_modules/protractor/bin/webdriver-manager update 8 | script: 9 | - gulp test 10 | addons: 11 | sauce_connect: true 12 | env: 13 | global: 14 | - secure: ja0MoPzIyYXeo5Iqbqyax2hyrnaZLUJi7CQW39+VgbfrisRsITeDRqQG6t2JIJTS8U5CdZWApmnWej5tE5Ec8WUNHYwet67eyROd2BT0fHAyuAP54kZKsmK0wOqSJxOzkz38NHHesY0nSl1dSa4EBrKdi2478C6d/VhhWyRgvcE= 15 | - secure: CW/yGsr9rQKmlRC2pBxEJfk3eR5iIB75RHnR/h+wSvcEBj5UAYQcj25r6QpDYjqlKjD1P+cwAHwXQ80ULzNmExvJsi9HSPpTZn9SUlxFdR6i2LH7kop5w7uVwIRtWXQt/DfGgBTgA43zzpZtHvNOzDoVjkhtoeoB1E+L+008nBA= 16 | -------------------------------------------------------------------------------- /test/e2e/spec/ngif.js: -------------------------------------------------------------------------------- 1 | describe('ngIf test', function() { 2 | beforeEach(function () { 3 | browser.get('/ngif.html'); 4 | }); 5 | 6 | it('should compile inner text', function() { 7 | expect(element(by.id('btn')).getText()).toEqual('ladda button'); 8 | }); 9 | 10 | it('should exist ladda-label span tag', function() { 11 | expect(element(by.css('#btn .ladda-label')).isPresent()).toBe(true); 12 | }); 13 | 14 | it('should exist ladda-spinner span tag', function() { 15 | expect(element(by.css('#btn .ladda-spinner')).isPresent()).toBe(true); 16 | }); 17 | 18 | it('should exist spinner when ladda is true', function() { 19 | element(by.id('btn')).click(); 20 | browser.sleep(500); 21 | expect(element(by.css('#btn .ladda-spinner div')).isPresent()).toBe(true); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /test/e2e/spec/test.js: -------------------------------------------------------------------------------- 1 | describe('default test', function() { 2 | beforeEach(function () { 3 | browser.get('/test.html'); 4 | }); 5 | 6 | it('should compile inner text', function() { 7 | expect(element(by.id('btn')).getText()).toEqual('ladda button'); 8 | }); 9 | 10 | it('should exist ladda-label span tag', function() { 11 | expect(element(by.css('#btn .ladda-label')).isPresent()).toBe(true); 12 | }); 13 | 14 | it('should exist ladda-spinner span tag', function() { 15 | expect(element(by.css('#btn .ladda-spinner')).isPresent()).toBe(true); 16 | }); 17 | 18 | it('should exist spinner when ladda is true', function() { 19 | element(by.id('btn')).click(); 20 | browser.sleep(500); 21 | expect(element(by.css('#btn .ladda-spinner div')).isPresent()).toBe(true); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /test/e2e/spec/amd.js: -------------------------------------------------------------------------------- 1 | describe('amd(requirejs) test', function() { 2 | beforeEach(function () { 3 | browser.get('/amd.html'); 4 | }); 5 | 6 | it('should compile inner text', function() { 7 | expect(element(by.id('btn')).getText()).toEqual('ladda button'); 8 | }); 9 | 10 | it('should exist ladda-label span tag', function() { 11 | expect(element(by.css('#btn .ladda-label')).isPresent()).toBe(true); 12 | }); 13 | 14 | it('should exist ladda-spinner span tag', function() { 15 | expect(element(by.css('#btn .ladda-spinner')).isPresent()).toBe(true); 16 | }); 17 | 18 | it('should exist spinner when ladda is true', function() { 19 | element(by.id('btn')).click(); 20 | browser.sleep(500); 21 | expect(element(by.css('#btn .ladda-spinner div')).isPresent()).toBe(true); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /test/e2e/spec/commonjs.js: -------------------------------------------------------------------------------- 1 | describe('commonjs(webpack) test', function() { 2 | beforeEach(function () { 3 | browser.get('/commonjs.html'); 4 | }); 5 | 6 | it('should compile inner text', function() { 7 | expect(element(by.id('btn')).getText()).toEqual('ladda button'); 8 | }); 9 | 10 | it('should exist ladda-label span tag', function() { 11 | expect(element(by.css('#btn .ladda-label')).isPresent()).toBe(true); 12 | }); 13 | 14 | it('should exist ladda-spinner span tag', function() { 15 | expect(element(by.css('#btn .ladda-spinner')).isPresent()).toBe(true); 16 | }); 17 | 18 | it('should exist spinner when ladda is true', function() { 19 | element(by.id('btn')).click(); 20 | browser.sleep(500); 21 | expect(element(by.css('#btn .ladda-spinner div')).isPresent()).toBe(true); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ladda", 3 | "version": "0.4.3", 4 | "homepage": "https://github.com/remotty/angular-ladda", 5 | "authors": [ 6 | "Chungsub Kim " 7 | ], 8 | "description": "An angular directive wrapper for Ladda.", 9 | "main": "dist/angular-ladda.min.js", 10 | "keywords": [ 11 | "ladda", 12 | "loading", 13 | "button", 14 | "angular", 15 | "angularjs", 16 | "directive" 17 | ], 18 | "license": "MIT", 19 | "ignore": [ 20 | "**/.*", 21 | "protractor.conf.js", 22 | "gulpfile.js", 23 | "bower_components", 24 | "node_modules", 25 | "test" 26 | ], 27 | "dependencies": { 28 | "angular": ">=1.2.0 <2.0", 29 | "ladda": ">=0.9.8" 30 | }, 31 | "devDependencies": { 32 | "bootstrap": "^3.3.1", 33 | "angular-bootstrap": ">=0.12.0", 34 | "requirejs": "^2.1.18" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /test/e2e/app/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test/e2e/app/data.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test/e2e/app/ngif.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test/e2e/app/config.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /test/e2e/app/disabled.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test/e2e/app/binding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 21 | 22 | 23 |
24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Chungsub Kim 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /dist/angular-ladda.min.js: -------------------------------------------------------------------------------- 1 | /*! angular-ladda 0.4.3 */ 2 | !function(e,n){"use strict";if("function"==typeof define&&define.amd)define(["angular","ladda"],n);else{if("undefined"==typeof module||"object"!=typeof module.exports)return n(e.angular,e.Ladda);module.exports=n(window.angular||require("angular"),require("ladda"))}}(this,function(e,n){"use strict";var t="angular-ladda";return e.module(t,[]).provider("ladda",function(){var n={style:"zoom-in"};return{setOption:function(t){e.extend(n,t)},$get:function(){return n}}}).directive("ladda",["ladda","$timeout",function(t,a){return{restrict:"A",priority:-1,link:function(r,i,d){a(function(){if(i.addClass("ladda-button"),e.isUndefined(i.attr("data-style"))&&i.attr("data-style",t.style||"zoom-in"),e.isUndefined(i.attr("data-spinner-size"))&&t.spinnerSize&&i.attr("data-spinner-size",t.spinnerSize),e.isUndefined(i.attr("data-spinner-color"))&&t.spinnerColor&&i.attr("data-spinner-color",t.spinnerColor),!i[0].querySelector(".ladda-label")){var a=document.createElement("span");a.className="ladda-label",e.element(a).append(i.contents()),i.append(a)}var o=n.create(i[0]);r.$watch(d.ladda,function(n){return n||e.isNumber(n)?(o.isLoading()||o.start(),void(e.isNumber(n)&&o.setProgress(n))):(o.stop(),void(d.ngDisabled&&i.attr("disabled",r.$eval(d.ngDisabled))))}),r.$on("$destroy",function(){o&&o.remove()})})}}}]),t}); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ladda", 3 | "version": "0.4.3", 4 | "main": "dist/angular-ladda.js", 5 | "files": [ 6 | "dist", 7 | "src", 8 | "README.md", 9 | "CHANGELOG.md", 10 | "LICENSE" 11 | ], 12 | "dependencies": { 13 | "ladda": ">=0.9.8" 14 | }, 15 | "peerDependencies": { 16 | "angular": ">=1.2.0 <2.0" 17 | }, 18 | "devDependencies": { 19 | "del": "^0.1.0", 20 | "gulp": "^3.6.0", 21 | "gulp-load-plugins": "^0.7.1", 22 | "gulp-protractor": "^0.0.12", 23 | "gulp-rename": "^1.2.0", 24 | "gulp-jshint": "^1.5.3", 25 | "gulp-uglify": "^1.0.1", 26 | "gulp-header": "^1.2.2", 27 | "gulp-size": "^1.1.0", 28 | "connect": "^3.0.1", 29 | "jshint-stylish": "^1.0.0", 30 | "serve-index": "^1.1.4", 31 | "serve-static": "^1.4.0", 32 | "protractor": "^1.5.0" 33 | }, 34 | "description": "An angular directive wrapper for Ladda.", 35 | "repository": { 36 | "type": "git", 37 | "url": "https://github.com/remotty/angular-ladda.git" 38 | }, 39 | "keywords": [ 40 | "angular", 41 | "ladda", 42 | "angular-ladda", 43 | "ng-ladda" 44 | ], 45 | "author": "Chungsub Kim (http://subicura.com/)", 46 | "license": "MIT", 47 | "bugs": { 48 | "url": "https://github.com/remotty/angular-ladda/issues" 49 | }, 50 | "homepage": "https://github.com/remotty/angular-ladda" 51 | } 52 | -------------------------------------------------------------------------------- /test/e2e/app/form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Test 5 | 6 | 7 | 8 | 9 | 10 | 11 | 20 | 21 | 22 |
23 |
24 | Create new account 25 |
26 | 27 | 28 |

You need to fill your email address.

29 |
30 |
31 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # angular-ladda 2 | 3 | ## 0.4.3 4 | * prevent ladda null reference 5 | 6 | ## 0.4.2 7 | * fix size caculate error 8 | 9 | ## 0.4.1 10 | * fix npm package dependency setting 11 | 12 | ## 0.4 13 | * update bower & npm config file 14 | * update ladda version 1.0 & angular version 15 | 16 | ## 0.3.4 17 | * change bower dependency version 18 | 19 | ## 0.3.3 20 | * support global spinner-size, spinner-color config 21 | 22 | ## 0.3.2 23 | * use window.angular in CommonJS (@radotzki) 24 | * fix memory leak (@mihaipanait) 25 | 26 | ## 0.3.1 27 | * remove requirejs from bower.json 28 | 29 | ## 0.3.0 30 | * upgrade ladda latest version (0.9.8) 31 | * AMD(requirejs) / CommonJS(webpack) support 32 | * support npm 33 | 34 | ## 0.2.2 35 | * Requirejs / AMD support 36 | 37 | ## 0.2.1 38 | * add "main" field to package.json 39 | 40 | ## 0.2.0 41 | * change compile logic 42 | * fix double curly binding broken issue (#12) 43 | * source refactoring 44 | 45 | ## 0.1.15 46 | * fix ngIf issue (fix #14) 47 | 48 | ## 0.1.14 49 | * rollback 0.1.13 (#15) 50 | 51 | ## 0.1.13 52 | * fix double curly binding broken issue (#12) 53 | 54 | ## 0.1.12 55 | * fix data-ladda attribute style (#13) 56 | * add test case 57 | 58 | ## 0.1.11 59 | * add laddaProvider for default option (#11) 60 | 61 | ## 0.1.10 62 | * fix duplicate compile issue (#8) 63 | * fix ie11 "Invalid argument" issue (#9) 64 | 65 | ## 0.1.9 66 | * fix recompiling issue 67 | 68 | ## 0.1.8 69 | * fix ng-disabled not working issue 70 | 71 | ## 0.1.7 72 | 73 | * fix calculating object size timing issue (http://stackoverflow.com/questions/24127502/ladda-ui-is-not-working-in-bootstrap-modal) 74 | * change angularjs dependency version (>= 1.2.0) -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // An example configuration file. 2 | // https://raw.github.com/angular/protractor/master/example/conf.js 3 | exports.config = { 4 | sauceUser: process.env.SAUCE_USERNAME, 5 | sauceKey: process.env.SAUCE_ACCESS_KEY, 6 | multiCapabilities: [{ 7 | 'browserName': 'chrome', 8 | 'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER, 9 | 'build': process.env.TRAVIS_BUILD_NUMBER, 10 | 'name': 'chrome' 11 | }, { 12 | 'browserName': 'safari', 13 | 'version': '9', 14 | 'platform': 'OS X 10.11', 15 | 'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER, 16 | 'build': process.env.TRAVIS_BUILD_NUMBER, 17 | 'name': 'safari-9' 18 | }, { 19 | 'browserName': 'internet explorer', 20 | 'version': '11', 21 | 'platform': 'Windows 8.1', 22 | 'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER, 23 | 'build': process.env.TRAVIS_BUILD_NUMBER, 24 | 'name': 'ie-11' 25 | }, { 26 | 'browserName': 'iPhone', 27 | 'version': '9.1', 28 | 'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER, 29 | 'build': process.env.TRAVIS_BUILD_NUMBER, 30 | 'name': 'iphone-9.1' 31 | }/*, { 32 | 'browserName': 'internet explorer', 33 | 'version': '9', 34 | 'platform': 'Windows 7', 35 | 'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER, 36 | 'build': process.env.TRAVIS_BUILD_NUMBER, 37 | 'name': 'ie-9' 38 | }, { 39 | 'browserName': 'android', 40 | 'version': '4.4', 41 | 'platform': 'Linux', 42 | 'deviceName': 'Samsung Galaxy S3 Emulator', 43 | 'tunnel-identifier': process.env.TRAVIS_JOB_NUMBER, 44 | 'build': process.env.TRAVIS_BUILD_NUMBER, 45 | 'name': 'android-4.4' 46 | }*/], 47 | 48 | specs: [ 49 | './test/e2e/spec/**/*.js' 50 | ], 51 | 52 | // Options to be passed to Jasmine-node. 53 | framework: 'jasmine', 54 | jasmineNodeOpts: { 55 | showColors: true, 56 | defaultTimeoutInterval: 90000 57 | } 58 | }; 59 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /* jshint node:true */ 2 | 3 | var pkg = require('./package.json'); 4 | var gulp = require('gulp'); 5 | var $ = require('gulp-load-plugins')(); 6 | 7 | gulp.task('jshint', function () { 8 | return gulp.src('src/**/*.js') 9 | .pipe($.jshint()) 10 | .pipe($.jshint.reporter('jshint-stylish')) 11 | .pipe($.jshint.reporter('fail')); 12 | }); 13 | 14 | gulp.task('javascript', function() { 15 | gulp.src('src/*.js') 16 | .pipe($.uglify()) 17 | .pipe($.header("/*! <%= name %> <%= version %> */\n", { name: pkg.name, version: pkg.version } )) 18 | .pipe($.rename({ suffix:'.min' })) 19 | .pipe(gulp.dest('dist')); 20 | }); 21 | 22 | gulp.task('serve', function() { 23 | var serveStatic = require('serve-static'); 24 | var serveIndex = require('serve-index'); 25 | var app = require('connect')() 26 | .use(serveStatic('./test/app')) 27 | // paths to bower_components should be relative to the current file 28 | // e.g. in app/index.html you should use ../bower_components 29 | .use('/bower_components', serveStatic('bower_components')) 30 | .use('/src', serveStatic('src')) 31 | .use(serveIndex('app')); 32 | 33 | require('http').createServer(app) 34 | .listen(9000) 35 | .on('listening', function () { 36 | console.log('Started connect web server on http://localhost:9000'); 37 | }); 38 | }); 39 | 40 | gulp.task('protractor', function() { 41 | var httpPort = 9001; 42 | var serveStatic = require('serve-static'); 43 | var serveIndex = require('serve-index'); 44 | var app = require('connect')() 45 | .use(serveStatic('./test/e2e/app')) 46 | // paths to bower_components should be relative to the current file 47 | // e.g. in app/index.html you should use ../bower_components 48 | .use('/bower_components', serveStatic('bower_components')) 49 | .use('/dist', serveStatic('dist')) 50 | .use(serveIndex('app')); 51 | 52 | var server = require('http').createServer(app) 53 | .listen(httpPort) 54 | .on('listening', function () { 55 | console.log('Started connect web server on http://localhost:' + httpPort); 56 | }); 57 | 58 | gulp.src(['./test/e2e/*.js']) 59 | .pipe($.protractor.protractor({ 60 | configFile: './protractor.conf.js', 61 | args: ['--baseUrl', 'http://127.0.0.1:' + httpPort] 62 | })) 63 | .on('error', function(e) { throw e }) 64 | .on('end', function() { 65 | server.close(); 66 | }); 67 | }); 68 | 69 | gulp.task('clean', require('del').bind(null, ['.tmp', 'dist'])); 70 | 71 | gulp.task('build', ['javascript'], function () { 72 | return gulp.src('dist/**/*').pipe($.size({title: 'build', gzip: true})); 73 | }); 74 | 75 | gulp.task('test', ['build'], function () { 76 | gulp.start('protractor'); 77 | }); 78 | 79 | gulp.task('copysrc', function () { 80 | gulp.src('src/*.js') 81 | .pipe($.header("/*! <%= name %> <%= version %> */\n", { name: pkg.name, version: pkg.version } )) 82 | .pipe(gulp.dest('dist')); 83 | }); 84 | 85 | gulp.task('default', ['clean', 'jshint'], function () { 86 | gulp.start('build', 'copysrc'); 87 | }); 88 | -------------------------------------------------------------------------------- /test/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Default Title 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 42 | 43 | 44 |
45 | 46 |
47 |
48 | test 49 |
50 | test 51 | test 52 | test 53 |
54 |
55 | Create new account 56 |
57 | 58 | 59 |

You need to fill your email address.

60 |

Given email address is invalid.

61 |
62 |
63 | 66 |
67 | ng-if true 68 | 69 | 70 | open modal 71 | 72 | 73 | -------------------------------------------------------------------------------- /src/angular-ladda.js: -------------------------------------------------------------------------------- 1 | /**! 2 | * AngularJS Ladda directive 3 | * @author Chungsub Kim 4 | */ 5 | 6 | /* global Ladda */ 7 | /* exported Ladda */ 8 | (function (root, factory) 9 | { 10 | 'use strict'; 11 | if (typeof define === 'function' && define.amd) { 12 | // AMD. Register as an anonymous module. 13 | define(['angular', 'ladda'], factory); 14 | } else if (typeof module !== 'undefined' && typeof module.exports === 'object') { 15 | // CommonJS support (for us webpack/browserify/ComponentJS folks) 16 | module.exports = factory(window.angular || require('angular'), require('ladda')); 17 | } else { 18 | // in the case of no module loading system 19 | return factory(root.angular, root.Ladda); 20 | } 21 | }(this, function (angular, Ladda){ 22 | 'use strict'; 23 | 24 | var moduleName = 'angular-ladda'; 25 | 26 | angular.module(moduleName, []) 27 | .provider('ladda', function () { 28 | var opts = { 29 | 'style': 'zoom-in' 30 | }; 31 | return { 32 | setOption: function (newOpts) { 33 | angular.extend(opts, newOpts); 34 | }, 35 | $get: function () { 36 | return opts; 37 | } 38 | }; 39 | }) 40 | .directive('ladda', ['ladda', '$timeout', function (laddaOption, $timeout) { 41 | return { 42 | restrict: 'A', 43 | priority: -1, 44 | link: function (scope, element, attrs) { 45 | $timeout(function() { 46 | element.addClass('ladda-button'); 47 | if(angular.isUndefined(element.attr('data-style'))) { 48 | element.attr('data-style', laddaOption.style || 'zoom-in'); 49 | } 50 | if(angular.isUndefined(element.attr('data-spinner-size')) && laddaOption.spinnerSize) { 51 | element.attr('data-spinner-size', laddaOption.spinnerSize); 52 | } 53 | if(angular.isUndefined(element.attr('data-spinner-color')) && laddaOption.spinnerColor) { 54 | element.attr('data-spinner-color', laddaOption.spinnerColor); 55 | } 56 | 57 | // ladda breaks childNode's event property. 58 | // because ladda use innerHTML instead of append node 59 | if(!element[0].querySelector('.ladda-label')) { 60 | var labelWrapper = document.createElement('span'); 61 | labelWrapper.className = 'ladda-label'; 62 | angular.element(labelWrapper).append(element.contents()); 63 | element.append(labelWrapper); 64 | } 65 | 66 | // create ladda button 67 | var ladda = Ladda.create( element[0] ); 68 | 69 | // add watch! 70 | scope.$watch(attrs.ladda, function(loading) { 71 | if(!loading && !angular.isNumber(loading)) { 72 | ladda.stop(); 73 | // When the button also have the ng-disabled directive it needs to be 74 | // re-evaluated since the disabled attribute is removed by the 'stop' method. 75 | if (attrs.ngDisabled) { 76 | element.attr('disabled', scope.$eval(attrs.ngDisabled)); 77 | } 78 | return; 79 | } 80 | if(!ladda.isLoading()) { 81 | ladda.start(); 82 | } 83 | if(angular.isNumber(loading)) { 84 | ladda.setProgress(loading); 85 | } 86 | }); 87 | 88 | // use remove on scope destroy to stop memory leaks 89 | scope.$on('$destroy', function () { 90 | if (ladda) { // prevent null reference 91 | ladda.remove(); 92 | } 93 | }); 94 | }); 95 | } 96 | }; 97 | }]); 98 | 99 | return moduleName; 100 | })); 101 | -------------------------------------------------------------------------------- /dist/angular-ladda.js: -------------------------------------------------------------------------------- 1 | /*! angular-ladda 0.4.3 */ 2 | /**! 3 | * AngularJS Ladda directive 4 | * @author Chungsub Kim 5 | */ 6 | 7 | /* global Ladda */ 8 | /* exported Ladda */ 9 | (function (root, factory) 10 | { 11 | 'use strict'; 12 | if (typeof define === 'function' && define.amd) { 13 | // AMD. Register as an anonymous module. 14 | define(['angular', 'ladda'], factory); 15 | } else if (typeof module !== 'undefined' && typeof module.exports === 'object') { 16 | // CommonJS support (for us webpack/browserify/ComponentJS folks) 17 | module.exports = factory(window.angular || require('angular'), require('ladda')); 18 | } else { 19 | // in the case of no module loading system 20 | return factory(root.angular, root.Ladda); 21 | } 22 | }(this, function (angular, Ladda){ 23 | 'use strict'; 24 | 25 | var moduleName = 'angular-ladda'; 26 | 27 | angular.module(moduleName, []) 28 | .provider('ladda', function () { 29 | var opts = { 30 | 'style': 'zoom-in' 31 | }; 32 | return { 33 | setOption: function (newOpts) { 34 | angular.extend(opts, newOpts); 35 | }, 36 | $get: function () { 37 | return opts; 38 | } 39 | }; 40 | }) 41 | .directive('ladda', ['ladda', '$timeout', function (laddaOption, $timeout) { 42 | return { 43 | restrict: 'A', 44 | priority: -1, 45 | link: function (scope, element, attrs) { 46 | $timeout(function() { 47 | element.addClass('ladda-button'); 48 | if(angular.isUndefined(element.attr('data-style'))) { 49 | element.attr('data-style', laddaOption.style || 'zoom-in'); 50 | } 51 | if(angular.isUndefined(element.attr('data-spinner-size')) && laddaOption.spinnerSize) { 52 | element.attr('data-spinner-size', laddaOption.spinnerSize); 53 | } 54 | if(angular.isUndefined(element.attr('data-spinner-color')) && laddaOption.spinnerColor) { 55 | element.attr('data-spinner-color', laddaOption.spinnerColor); 56 | } 57 | 58 | // ladda breaks childNode's event property. 59 | // because ladda use innerHTML instead of append node 60 | if(!element[0].querySelector('.ladda-label')) { 61 | var labelWrapper = document.createElement('span'); 62 | labelWrapper.className = 'ladda-label'; 63 | angular.element(labelWrapper).append(element.contents()); 64 | element.append(labelWrapper); 65 | } 66 | 67 | // create ladda button 68 | var ladda = Ladda.create( element[0] ); 69 | 70 | // add watch! 71 | scope.$watch(attrs.ladda, function(loading) { 72 | if(!loading && !angular.isNumber(loading)) { 73 | ladda.stop(); 74 | // When the button also have the ng-disabled directive it needs to be 75 | // re-evaluated since the disabled attribute is removed by the 'stop' method. 76 | if (attrs.ngDisabled) { 77 | element.attr('disabled', scope.$eval(attrs.ngDisabled)); 78 | } 79 | return; 80 | } 81 | if(!ladda.isLoading()) { 82 | ladda.start(); 83 | } 84 | if(angular.isNumber(loading)) { 85 | ladda.setProgress(loading); 86 | } 87 | }); 88 | 89 | // use remove on scope destroy to stop memory leaks 90 | scope.$on('$destroy', function () { 91 | if (ladda) { // prevent null reference 92 | ladda.remove(); 93 | } 94 | }); 95 | }); 96 | } 97 | }; 98 | }]); 99 | 100 | return moduleName; 101 | })); 102 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # angular-ladda 2 | ![License](https://img.shields.io/npm/l/angular-ladda.svg) 3 | ![Bower](https://img.shields.io/bower/v/angular-ladda.svg) [![NPM](https://img.shields.io/npm/v/angular-ladda.svg)](https://www.npmjs.com/package/angular-ladda) 4 | [![Build Status](https://travis-ci.org/remotty/angular-ladda.svg?branch=master)](https://travis-ci.org/remotty/angular-ladda) 5 | 6 | An angular directive wrapper for Ladda. 7 | 8 | [Check out the demo page.](http://remotty.github.io/angular-ladda) 9 | 10 | 11 | ## Getting started 12 | 13 | (1) Get angular-ladda via [Bower](http://bower.io/) 14 | 15 | ```sh 16 | $ bower install angular-ladda 17 | ``` 18 | or add bower.json 19 | ```sh 20 | $ bower install angular-ladda --save 21 | ``` 22 | 23 | (2) add css & javascript link to html 24 | 25 | ```html 26 | ... 27 | 28 | ... 29 | 30 | 31 | 32 | ... 33 | ``` 34 | 35 | **!!!Order of *.js includes is very important!!!** 36 | 37 | 38 | (3) add `'angular-ladda'` to your main module's list of dependencies 39 | 40 | ```javascript 41 | var myApp = angular.module('myApp', ['angular-ladda']); 42 | ``` 43 | 44 | (4) enjoy! 45 | 46 | ## Quick example 47 | 48 | ### options 49 | 50 | use `laddaProvider` 51 | 52 | - style 53 | - expand-left 54 | - expand-right 55 | - expand-up 56 | - expand-down 57 | - zoom-in 58 | - zoom-out 59 | - slide-left 60 | - slide-right 61 | - slide-up 62 | - slide-down 63 | - contract 64 | 65 | ```js 66 | angular.module(xxxx) 67 | .config(function (laddaProvider) { 68 | laddaProvider.setOption({ /* optional */ 69 | style: 'expand-left', 70 | spinnerSize: 35, 71 | spinnerColor: '#ffffff' 72 | }); 73 | }) 74 | ``` 75 | 76 | ### controller 77 | 78 | ```javascript 79 | $scope.login = function() { 80 | // start loading 81 | $scope.loginLoading = true; 82 | loginService.login(function() { 83 | // stop loading 84 | $scope.loginLoading = false; 85 | }); 86 | } 87 | ``` 88 | 89 | ### view 90 | 91 | basic 92 | 93 | ```html 94 | 97 | ``` 98 | 99 | change style of effect 100 | 101 | ```html 102 | 105 | ``` 106 | 107 | change size of spinner 108 | 109 | ```html 110 | 113 | ``` 114 | 115 | change color of spinner 116 | 117 | ```html 118 | 121 | ``` 122 | 123 | ## Browserify support 124 | 125 | angular-ladda doesn't work properly with browserify, since it references the Spinner and Ladda libraries, which are not proper AMD modules (and are also not always used as such in angular-ladda's code). 126 | In order to make it works with browserify you will need to use browserify-shim. 127 | 128 | ```sh 129 | $ npm install --save browserify-shim 130 | ``` 131 | 132 | in your package.json, add the following object: 133 | 134 | ```js 135 | "dependencies": { 136 | ... 137 | }, 138 | "browserify-shim": { 139 | "ladda": "global:Ladda", 140 | "spin.js": "global:Spinner" 141 | } 142 | ``` 143 | 144 | require Spinner, Ladda and angular-ladda wherever you usually require external modules (the ordering here is important): 145 | 146 | ```javascript 147 | window.Spinner = require('/components/ladda/js/spin'); 148 | window.Ladda = require('/components/ladda/js/ladda'); 149 | require('/components/angular-ladda/dist/angular-ladda'); 150 | ``` 151 | 152 | ## Using ladda-themeless.min.css 153 | 154 | overrides in your `bower.json` (Thanks @benjamincharity) 155 | 156 | ``` 157 | { 158 | "name": "client", 159 | "version": "0.0.0", 160 | "dependencies": { 161 | "ladda": "~0.9.8" 162 | }, 163 | "overrides": { 164 | "ladda": { 165 | "main": [ 166 | "dist/ladda-themeless.min.css" 167 | ] 168 | } 169 | } 170 | } 171 | ``` 172 | 173 | ## Links 174 | 175 | * [Ladda](http://lab.hakim.se/ladda/) 176 | 177 | ## Contributing 178 | 179 | 1. Fork it ( https://github.com/remotty/angular-ladda/fork ) 180 | 2. Create your feature branch (`git checkout -b my-new-feature`) 181 | 3. Commit your changes (`git commit -am 'Add some feature'`) 182 | 4. Push to the branch (`git push origin my-new-feature`) 183 | 5. Create a new Pull Request 184 | 185 | ### setup 186 | 187 | ``` 188 | $ bower install 189 | $ npm install 190 | $ node_modules/protractor/bin/webdriver-manager update 191 | ``` 192 | 193 | ### test 194 | 195 | ``` 196 | $ gulp test 197 | ``` 198 | 199 | ### build 200 | 201 | ``` 202 | $ gulp 203 | ``` 204 | --------------------------------------------------------------------------------