From 13e5917d0efbb77548ab558953f3bd5d5ef6263d Mon Sep 17 00:00:00 2001
From: vrinceanuv <vrinceanu.valentin@gmail.com>
Date: Fri, 21 Oct 2016 10:28:32 +0300
Subject: [PATCH 1/5] Features: - Added a separate template for the slider -
 Possibility of having your own template by passing the template path as a
 attribute

---
 examples/index.html  |  2 +-
 examples/slider.html | 13 +++++++++++++
 src/js/slider.js     | 16 +++-------------
 3 files changed, 17 insertions(+), 14 deletions(-)
 create mode 100644 examples/slider.html
diff --git a/examples/index.html b/examples/index.html
index 30e4f84..3a5cafe 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -16,7 +16,7 @@
 <body>
     <div ng-app="ch.examples.slider">
         <h1>Slider test</h1>
-        <slider ng-init="sliderValue = 125" model="sliderValue" step="{{ sliderStep }}" min="{{ sliderMin }}" max="{{ sliderMax }}">
+        <slider ng-init="sliderValue = 125" model="sliderValue" step="{{ sliderStep }}" min="{{ sliderMin }}" max="{{ sliderMax }}" template-url="slider.html">
         </slider>
         <br>
         <label>Value
diff --git a/examples/slider.html b/examples/slider.html
new file mode 100644
index 0000000..fe30063
--- /dev/null
+++ b/examples/slider.html
@@ -0,0 +1,13 @@
+<div class="ch-slider" tabindex="0">
+    <div class="ch-slider-bar">
+        <span class="ch-slider-fill"></span>
+        <span class="ch-slider-line"></span>
+        <span class="ch-slider-handle"
+              role="slider"
+              aria-valuemin="{{ min }}"
+              aria-valuemax="{{ max }}"
+              aria-valuenow="{{ model }}"
+              aria-orientation="horizontal"
+        ></span>
+    </div>
+</div>
diff --git a/src/js/slider.js b/src/js/slider.js
index 481cdc1..d761a73 100644
--- a/src/js/slider.js
+++ b/src/js/slider.js
@@ -16,19 +16,9 @@
                 snapToInitRange: '@'
             },
             link: linkFunction,
-            template: '<div class="ch-slider" tabindex="0">' +
-                '<div class="ch-slider-bar">' +
-                '<span class="ch-slider-fill"></span>' +
-                '<span class="ch-slider-line"></span>' +
-                '<span class="ch-slider-handle" ' +
-                'role="slider" ' +
-                'aria-valuemin="{{ min }}" ' +
-                'aria-valuemax="{{ max }}" ' +
-                'aria-valuenow="{{ model }}" ' +
-                'aria-orientation="horizontal" ' +
-                '></span>' +
-                '</div>' +
-                '</div>'
+            templateUrl: function(elem,attrs) {
+                return attrs.templateUrl || 'slider.html'
+            }
         };
         return directive;
 

From c01bffe770af934f7ed0669d5c32e26a793ad68b Mon Sep 17 00:00:00 2001
From: vrinceanuv <vrinceanu.valentin@gmail.com>
Date: Fri, 21 Oct 2016 10:52:49 +0300
Subject: [PATCH 2/5] Added grunt copy to copy the slider template to dist
 folder

---
 Gruntfile.js | 15 ++++++++++++++-
 package.json |  1 +
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/Gruntfile.js b/Gruntfile.js
index 5cab293..a25c588 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -47,6 +47,18 @@ module.exports = function(grunt) {
 				}
 			}
 		},
+        copy: {
+          main: {
+            files: [
+              {
+                  expand: false,
+                  src: 'src/views/slider.html',
+                  dest: 'distribute/slider.html',
+                  filter: 'isFile'
+              },
+            ],
+          },
+        },
 
         clean: ['distribute']
 
@@ -57,7 +69,8 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-cssmin');
     grunt.loadNpmTasks('grunt-contrib-clean');
+    grunt.loadNpmTasks('grunt-contrib-copy');
 
-    grunt.registerTask('default', ['clean', 'sass', 'cssmin', 'concat', 'uglify']);
+    grunt.registerTask('default', ['clean', 'sass', 'cssmin', 'concat', 'uglify', 'copy']);
 
 };
diff --git a/package.json b/package.json
index 85ebf85..b12ebf2 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "grunt-contrib-concat": "^0.5.1",
     "grunt-contrib-cssmin": "^0.14.0",
     "grunt-contrib-uglify": "^0.11.0",
+    "grunt-contrib-copy": "^1.0.0",
     "grunt-sass": "^1.1.0"
   }
 }

From 08148b696727f21653e34d0123000f55e6605c70 Mon Sep 17 00:00:00 2001
From: vrinceanuv <vrinceanu.valentin@gmail.com>
Date: Fri, 21 Oct 2016 10:53:45 +0300
Subject: [PATCH 3/5] Added slider.html to the views folder

---
 src/js/slider.js                    | 2 +-
 {examples => src/views}/slider.html | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename {examples => src/views}/slider.html (100%)

diff --git a/src/js/slider.js b/src/js/slider.js
index d761a73..5bb861d 100644
--- a/src/js/slider.js
+++ b/src/js/slider.js
@@ -17,7 +17,7 @@
             },
             link: linkFunction,
             templateUrl: function(elem,attrs) {
-                return attrs.templateUrl || 'slider.html'
+                return attrs.templateUrl
             }
         };
         return directive;
diff --git a/examples/slider.html b/src/views/slider.html
similarity index 100%
rename from examples/slider.html
rename to src/views/slider.html

From 78ef8c6058631e7b89e4244307531853cce2101c Mon Sep 17 00:00:00 2001
From: vrinceanuv <vrinceanu.valentin@gmail.com>
Date: Fri, 21 Oct 2016 10:58:49 +0300
Subject: [PATCH 4/5] Updated template path

---
 examples/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/index.html b/examples/index.html
index 3a5cafe..92b25cc 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -16,7 +16,7 @@
 <body>
     <div ng-app="ch.examples.slider">
         <h1>Slider test</h1>
-        <slider ng-init="sliderValue = 125" model="sliderValue" step="{{ sliderStep }}" min="{{ sliderMin }}" max="{{ sliderMax }}" template-url="slider.html">
+        <slider ng-init="sliderValue = 125" model="sliderValue" step="{{ sliderStep }}" min="{{ sliderMin }}" max="{{ sliderMax }}" template-url="../distribute/slider.html">
         </slider>
         <br>
         <label>Value
@@ -37,7 +37,7 @@ <h1>Slider test</h1>
 
         <hr />
         <h2>Disabled slider</h2>
-        <slider ng-init="sliderValue = 125" model="sliderValue" step="{{ sliderStep }}" min="{{ sliderMin }}" max="{{ sliderMax }}" disabled>
+        <slider ng-init="sliderValue = 125" model="sliderValue" step="{{ sliderStep }}" min="{{ sliderMin }}" max="{{ sliderMax }}" disabled  template-url="../distribute/slider.html">
         </slider>
     </div>
     <script>

From d191f2d4055e1d18464929e3e7aa39d350e6c720 Mon Sep 17 00:00:00 2001
From: vrinceanuv <vrinceanu.valentin@gmail.com>
Date: Wed, 26 Oct 2016 14:52:37 +0300
Subject: [PATCH 5/5] Features: - Added a separate template for the slider -
 Possibility of having your own template by passing the template path as a
 attribute - Fallback to default template if template-url attribute not
 specified

---
 Gruntfile.js          | 15 +-----------
 examples/index.html   |  4 ++--
 package.json          |  1 -
 src/js/slider.js      | 54 ++++++++++++++++++++++++++++++++-----------
 src/views/slider.html | 13 -----------
 5 files changed, 44 insertions(+), 43 deletions(-)
 delete mode 100644 src/views/slider.html

diff --git a/Gruntfile.js b/Gruntfile.js
index a25c588..5cab293 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -47,18 +47,6 @@ module.exports = function(grunt) {
 				}
 			}
 		},
-        copy: {
-          main: {
-            files: [
-              {
-                  expand: false,
-                  src: 'src/views/slider.html',
-                  dest: 'distribute/slider.html',
-                  filter: 'isFile'
-              },
-            ],
-          },
-        },
 
         clean: ['distribute']
 
@@ -69,8 +57,7 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-contrib-concat');
     grunt.loadNpmTasks('grunt-contrib-cssmin');
     grunt.loadNpmTasks('grunt-contrib-clean');
-    grunt.loadNpmTasks('grunt-contrib-copy');
 
-    grunt.registerTask('default', ['clean', 'sass', 'cssmin', 'concat', 'uglify', 'copy']);
+    grunt.registerTask('default', ['clean', 'sass', 'cssmin', 'concat', 'uglify']);
 
 };
diff --git a/examples/index.html b/examples/index.html
index 92b25cc..30e4f84 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -16,7 +16,7 @@
 <body>
     <div ng-app="ch.examples.slider">
         <h1>Slider test</h1>
-        <slider ng-init="sliderValue = 125" model="sliderValue" step="{{ sliderStep }}" min="{{ sliderMin }}" max="{{ sliderMax }}" template-url="../distribute/slider.html">
+        <slider ng-init="sliderValue = 125" model="sliderValue" step="{{ sliderStep }}" min="{{ sliderMin }}" max="{{ sliderMax }}">
         </slider>
         <br>
         <label>Value
@@ -37,7 +37,7 @@ <h1>Slider test</h1>
 
         <hr />
         <h2>Disabled slider</h2>
-        <slider ng-init="sliderValue = 125" model="sliderValue" step="{{ sliderStep }}" min="{{ sliderMin }}" max="{{ sliderMax }}" disabled  template-url="../distribute/slider.html">
+        <slider ng-init="sliderValue = 125" model="sliderValue" step="{{ sliderStep }}" min="{{ sliderMin }}" max="{{ sliderMax }}" disabled>
         </slider>
     </div>
     <script>
diff --git a/package.json b/package.json
index b12ebf2..85ebf85 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,6 @@
     "grunt-contrib-concat": "^0.5.1",
     "grunt-contrib-cssmin": "^0.14.0",
     "grunt-contrib-uglify": "^0.11.0",
-    "grunt-contrib-copy": "^1.0.0",
     "grunt-sass": "^1.1.0"
   }
 }
diff --git a/src/js/slider.js b/src/js/slider.js
index 5bb861d..434f8a2 100644
--- a/src/js/slider.js
+++ b/src/js/slider.js
@@ -4,7 +4,22 @@
     angular.module('chasselberg.slider', [])
         .directive('slider', SliderDirective);
 
-    function SliderDirective() {
+    function SliderDirective($compile, $templateRequest) {
+
+        var defaultTemplate = '<div class="ch-slider" tabindex="0">' +
+                    '<div class="ch-slider-bar">' +
+                    '<span class="ch-slider-fill"></span>' +
+                    '<span class="ch-slider-line"></span>' +
+                    '<span class="ch-slider-handle" ' +
+                    'role="slider" ' +
+                    'aria-valuemin="{{ min }} XXX" ' +
+                    'aria-valuemax="{{ max }}" ' +
+                    'aria-valuenow="{{ model }}" ' +
+                    'aria-orientation="horizontal" ' +
+                    '></span>' +
+                    '</div>' +
+                    '</div>';
+
         var directive = {
             restrict: 'EA',
             scope: {
@@ -15,24 +30,37 @@
                 shouldSnapToInit: '@',
                 snapToInitRange: '@'
             },
-            link: linkFunction,
-            templateUrl: function(elem,attrs) {
-                return attrs.templateUrl
-            }
+            link: linkFunction
         };
+
         return directive;
 
         function linkFunction($scope, $element, attributes) {
-            var $slider = angular.element($element[0].querySelector('.ch-slider'));
-            var $bar = angular.element($element[0].querySelector('.ch-slider-bar'));
-            var $handle = angular.element($element[0].querySelector('.ch-slider-handle'));
-            var $fill = angular.element($element[0].querySelector('.ch-slider-fill'));
-            var $line = angular.element($element[0].querySelector('.ch-slider-line'));
-            var initValue = 0;
-
-            init();
+            var $slider, $bar, $handle, $fill, $line, initValue;
+
+            if(typeof attributes.templateUrl !== 'undefined') {
+                var templatePath = attributes.templateUrl;
+                $templateRequest(templatePath).then(function(html) {
+                    var template = angular.element(html);
+                    $element.append(template);
+                    $compile(template.contents())($scope);
+                    init();
+                });
+            } else {
+                var template = angular.element(defaultTemplate);
+                $element.append(template);
+                $compile(template)($scope);
+                init();
+            }
 
             function init() {
+                $slider = angular.element($element[0].querySelector('.ch-slider'));
+                $bar = angular.element($element[0].querySelector('.ch-slider-bar'));
+                $handle = angular.element($element[0].querySelector('.ch-slider-handle'));
+                $fill = angular.element($element[0].querySelector('.ch-slider-fill'));
+                $line = angular.element($element[0].querySelector('.ch-slider-line'));
+                initValue = 0;
+
                 $scope.min = ($scope.min === undefined) ? 0 : parseFloat($scope.min);
                 $scope.max = ($scope.max === undefined) ? 100 : parseFloat($scope.max);
                 $scope.step = ($scope.step === undefined) ? 1 : parseFloat($scope.step);
diff --git a/src/views/slider.html b/src/views/slider.html
deleted file mode 100644
index fe30063..0000000
--- a/src/views/slider.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div class="ch-slider" tabindex="0">
-    <div class="ch-slider-bar">
-        <span class="ch-slider-fill"></span>
-        <span class="ch-slider-line"></span>
-        <span class="ch-slider-handle"
-              role="slider"
-              aria-valuemin="{{ min }}"
-              aria-valuemax="{{ max }}"
-              aria-valuenow="{{ model }}"
-              aria-orientation="horizontal"
-        ></span>
-    </div>
-</div>
