angular-ladda.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. /**!
  2. * AngularJS Ladda directive
  3. * @author Chungsub Kim <subicura@subicura.com>
  4. */
  5. /* global Ladda */
  6. /* exported Ladda */
  7. (function (root, factory)
  8. {
  9. 'use strict';
  10. var Ladda;
  11. if (typeof exports === 'object') {
  12. // CommonJS module
  13. // Load ladda
  14. try { Ladda = require('ladda'); } catch (e) {}
  15. module.exports = factory(Ladda);
  16. } else if (typeof define === 'function' && define.amd) {
  17. // AMD. Register as an anonymous module.
  18. define(function (req)
  19. {
  20. // Load ladda as an optional dependency
  21. var id = 'ladda';
  22. try { Ladda = req(id); } catch (e) {}
  23. return factory(Ladda);
  24. });
  25. } else {
  26. root.Ladda = factory(root.Ladda);
  27. }
  28. }(this, function (Ladda){
  29. 'use strict';
  30. angular.module('angular-ladda', [])
  31. .provider('ladda', function () {
  32. var opts = {
  33. 'style': 'zoom-in'
  34. };
  35. return {
  36. setOption: function (newOpts) {
  37. angular.extend(opts, newOpts);
  38. },
  39. $get: function () {
  40. return opts;
  41. }
  42. };
  43. })
  44. .directive('ladda', ['ladda', function (laddaOption) {
  45. return {
  46. restrict: 'A',
  47. priority: -1,
  48. link: function (scope, element, attrs) {
  49. element.addClass('ladda-button');
  50. if(angular.isUndefined(element.attr('data-style'))) {
  51. element.attr('data-style', laddaOption.style || 'zoom-in');
  52. }
  53. // ladda breaks childNode's event property.
  54. // because ladda use innerHTML instead of append node
  55. if(!element[0].querySelector('.ladda-label')) {
  56. var labelWrapper = document.createElement('span');
  57. labelWrapper.className = 'ladda-label';
  58. angular.element(labelWrapper).append(element.contents());
  59. element.append(labelWrapper);
  60. }
  61. // create ladda button
  62. var ladda = Ladda.create( element[0] );
  63. // add watch!
  64. scope.$watch(attrs.ladda, function(loading) {
  65. if(loading || angular.isNumber(loading)) {
  66. if(!ladda.isLoading()) {
  67. ladda.start();
  68. }
  69. if(angular.isNumber(loading)) {
  70. ladda.setProgress(loading);
  71. }
  72. } else {
  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. }
  80. });
  81. }
  82. };
  83. }]);
  84. }));