Merge pull request #124 from e-cloud/dev#118

Add umd support. Extract template in its own file.

.gitignore

 node_modules/
 .idea/
 bower_components/
+temp/
\ No newline at end of file

Gruntfile.js

@@ -15,7 +15,7 @@ module.exports = function (grunt)
       },
 
       slider: {
-        src: ['rzslider.less'],
+        src: ['src/rzslider.less'],
         dest: 'dist/rzslider.css'
       },
 
@@ -37,18 +37,79 @@ module.exports = function (grunt)
       rzslider: {
         files: {
           'dist/rzslider.min.js': [
-            'rzslider.js'
+            'dist/rzslider.js'
           ]
         }
       }
+    },
+
+    ngtemplates:  {
+      app:        {
+        src:      'src/**.html',
+        dest:     'temp/templates.js',
+        options:  {
+          htmlmin: {
+            collapseBooleanAttributes:      true,
+            collapseWhitespace:             true,
+            removeAttributeQuotes:          true,
+            removeComments:                 true, // Only if you don't use comment directives!
+            removeEmptyAttributes:          true,
+            removeRedundantAttributes:      true,
+            removeScriptTypeAttributes:     true,
+            removeStyleLinkTypeAttributes:  true
+          },
+          module: 'rzModule',
+          url: function(url) {
+	        return url.replace('src/', '');
+          },
+	      bootstrap: function (module, script) {
+		    return 'module.run(function($templateCache) {\n' + script + '\n});';
+	      }
+        }
+      }
+    },
+
+    replace: {
+      dist: {
+        options: {
+          patterns: [
+            {
+              match: /\/\*templateReplacement\*\//,
+              replacement: '<%= grunt.file.read("temp/templates.js") %>'
+            }
+          ]
+        },
+        files: [
+          {expand: true, flatten: true, src: ['src/rzslider.js'], dest: 'dist/'}
+        ]
+      }
+    },
+
+    ngAnnotate: {
+      options: {
+        singleQuotes: true,
+      },
+      rzslider: {
+        files: [{
+            'dist/rzslider.js': 'dist/rzslider.js'
+          }, {
+            expand: true,
+            src: ['dist/rzslider.js']
+          }
+        ]
+      }
     }
+
   });
 
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-recess');
+  grunt.loadNpmTasks('grunt-angular-templates');
+  grunt.loadNpmTasks('grunt-replace');
+  grunt.loadNpmTasks('grunt-ng-annotate');
 
   grunt.registerTask('default', ['css', 'js']);
 
   grunt.registerTask('css', ['recess']);
-  grunt.registerTask('js', ['uglify']);
+  grunt.registerTask('js', ['ngtemplates','replace', 'ngAnnotate', 'uglify']);
 };

demo/index.html

@@ -115,7 +115,7 @@
 </body>
 
 <script src="../bower_components/angular/angular.min.js"></script>
-<script src="../rzslider.js"></script>
+<script src="../dist/rzslider.js"></script>
 <script>
     var app = angular.module('plunker', ['rzModule']);
 

dist/rzslider.min.css

-/*! jusas-angularjs-slider - v0.1.29 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-09 */
+/*! jusas-angularjs-slider - v0.1.29 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-13 */
 rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:0;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:1;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}
\ No newline at end of file

package.json

@@ -13,9 +13,12 @@
   ],
   "devDependencies": {
     "grunt": "~0.4.2",
+    "grunt-angular-templates": "^0.5.7",
     "grunt-contrib-mincss": "~0.3.2",
     "grunt-contrib-uglify": "~0.2.2",
+    "grunt-ng-annotate": "^1.0.1",
     "grunt-recess": "~0.4.0",
+    "grunt-replace": "^0.11.0",
     "recess": "~1.1.9"
   },
   "author": "Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>",

src/rzSliderTpl.html

+<span class="rz-bar-wrapper"><span class="rz-bar"></span></span> <!-- // 0 The slider bar -->
+<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span> <!-- // 1 Highlight between two handles -->
+<span class="rz-pointer"></span> <!-- // 2 Left slider handle -->
+<span class="rz-pointer"></span> <!-- // 3 Right slider handle -->
+<span class="rz-bubble rz-limit"></span> <!-- // 4 Floor label -->
+<span class="rz-bubble rz-limit"></span> <!-- // 5 Ceiling label -->
+<span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->
+<span class="rz-bubble"></span> <!-- // 7 Label above right slider handle -->
+<span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
\ No newline at end of file

rzslider.js → src/rzslider.js

@@ -11,22 +11,25 @@
 
 /*jslint unparam: true */
 /*global angular: false, console: false */
-
-angular.module('rzModule', [])
-
-.run(['$templateCache', function($templateCache) {
-  'use strict';
-  var template = '<span class="rz-bar-wrapper"><span class="rz-bar"></span></span>' + // 0 The slider bar
-              '<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span>' + // 1 Highlight between two handles
-              '<span class="rz-pointer"></span>' + // 2 Left slider handle
-              '<span class="rz-pointer"></span>' + // 3 Right slider handle
-              '<span class="rz-bubble rz-limit"></span>' + // 4 Floor label
-              '<span class="rz-bubble rz-limit"></span>' + // 5 Ceiling label
-              '<span class="rz-bubble"></span>' + // 6 Label above left slider handle
-              '<span class="rz-bubble"></span>' + // 7 Label above right slider handle
-              '<span class="rz-bubble"></span>'; // 8 Range label when the slider handles are close ex. 15 - 17
-  $templateCache.put('rzSliderTpl.html', template);
-}])
+(function (root, factory) {
+
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['angular', 'underscore'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    // to support bundler like browserify
+    module.exports = factory(require('angular'));
+  } else {
+    // Browser globals (root is window)
+    factory(root.angular);
+  }
+
+}(this, function (angular) {
+
+var module = angular.module('rzModule', [])
 
 .value('throttle',
   /**
@@ -73,7 +76,7 @@ function throttle(func, wait, options) {
   };
 })
 
-.factory('RzSlider', ['$timeout', '$document', '$window', 'throttle', function($timeout, $document, $window, throttle)
+.factory('RzSlider', function($timeout, $document, $window, throttle)
 {
   'use strict';
 
@@ -1241,9 +1244,9 @@ function throttle(func, wait, options) {
   };
 
   return Slider;
-}])
+})
 
-.directive('rzslider', ['RzSlider', function(Slider)
+.directive('rzslider', function(RzSlider)
 {
   'use strict';
 
@@ -1280,10 +1283,10 @@ function throttle(func, wait, options) {
 
     link: function(scope, elem, attr)
     {
-      return new Slider(scope, elem, attr);
+      return new RzSlider(scope, elem, attr);
     }
   };
-}]);
+});
 
 // IDE assist
 
@@ -1317,3 +1320,8 @@ function throttle(func, wait, options) {
  * @property {bool} leading
  * @property {bool} trailing
  */
+
+  /*templateReplacement*/
+
+  return module
+}));