From bffd3e7fa19b7cfa214be3350ded44becf91667e Mon Sep 17 00:00:00 2001
From: alex <demeshko.alexander.v@gmail.com>
Date: Tue, 22 Dec 2015 16:11:17 +0300
Subject: [PATCH] sliders page

---
 bower.json                                    |  3 +-
 src/app/pages/pages.module.js                 |  1 +
 src/app/pages/slider/slider.html              | 96 +++++++++++++++++++
 src/app/pages/slider/slider.module.js         | 20 ++++
 .../contentTop/contentTop.directive.js        |  1 +
 .../theme/components/sidebar/SidebarCtrl.js   |  4 +
 src/app/theme/directives/ionSlider.js         | 91 ++++++++++++++++++
 7 files changed, 215 insertions(+), 1 deletion(-)
 create mode 100644 src/app/pages/slider/slider.html
 create mode 100644 src/app/pages/slider/slider.module.js
 create mode 100644 src/app/theme/directives/ionSlider.js

diff --git a/bower.json b/bower.json
index 96772d2..763e54d 100644
--- a/bower.json
+++ b/bower.json
@@ -47,7 +47,8 @@
     "angular-chart.js": "~0.8.8",
     "angular-chartist.js": "~3.3.12",
     "angular-morris-chart": "~1.1.0",
-    "angular-ui-tree": "~2.12.0"
+    "angular-ui-tree": "~2.12.0",
+    "ionrangeslider": "~2.1.2"
   },
   "overrides": {
     "amcharts": {
diff --git a/src/app/pages/pages.module.js b/src/app/pages/pages.module.js
index a1b6142..27ea9ea 100644
--- a/src/app/pages/pages.module.js
+++ b/src/app/pages/pages.module.js
@@ -21,6 +21,7 @@
     'BlurAdmin.pages.notifications',
     'BlurAdmin.pages.profile',
     'BlurAdmin.pages.progressBars',
+    'BlurAdmin.pages.slider',
     'BlurAdmin.pages.tables',
     'BlurAdmin.pages.tree',
     'BlurAdmin.pages.typography'
diff --git a/src/app/pages/slider/slider.html b/src/app/pages/slider/slider.html
new file mode 100644
index 0000000..10fda91
--- /dev/null
+++ b/src/app/pages/slider/slider.html
@@ -0,0 +1,96 @@
+<div class="row">
+  <div class="col-md-12">
+    <blur-panel title="Ion Range Slider" class-container="with-scroll">
+      <div>
+        <h5>Basic</h5>
+        <ion-slider type="single"
+                    grid="false"
+                    min="0"
+                    max="100"
+                    from="45"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>With prefix</h5>
+        <ion-slider type="single"
+                    grid="true"
+                    min="100"
+                    max="1200"
+                    prefix="$"
+                    from="420"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>With postfix</h5>
+        <ion-slider type="single"
+                    grid="true"
+                    min="-90"
+                    max="90"
+                    postfix="°"
+                    from="36"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>Two way range</h5>
+        <ion-slider type="double"
+                    grid="true"
+                    min="100"
+                    max="1200"
+                    from="420"
+                    to="900"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>With Steps</h5>
+        <ion-slider type="single"
+                    grid="true"
+                    min="0"
+                    max="1000"
+                    from="300"
+                    step="50"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>Decorating numbers</h5>
+        <ion-slider type="single"
+                    grid="true"
+                    min="0"
+                    max="1000000"
+                    from="300000"
+                    step="1000"
+                    prettify-separator="."
+                    prettify="true"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>Using custom values array</h5>
+        <ion-slider type="single"
+                    grid="true"
+                    from="5"
+                    step="1000"
+                    values="['January', 'February', 'March',
+                            'April', 'May', 'June',
+                            'July', 'August', 'September',
+                            'October', 'November', 'December']"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>Disabled</h5>
+        <ion-slider type="single"
+                    grid="false"
+                    min="0"
+                    max="100"
+                    from="45"
+                    disable="true">
+        </ion-slider>
+      </div>
+    </blur-panel>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/slider/slider.module.js b/src/app/pages/slider/slider.module.js
new file mode 100644
index 0000000..d2366d7
--- /dev/null
+++ b/src/app/pages/slider/slider.module.js
@@ -0,0 +1,20 @@
+/**
+ * @author a.demeshko
+ * created on 12/22/15
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.slider', [])
+    .config(routeConfig);
+
+  /** @ngInject */
+  function routeConfig($stateProvider) {
+    $stateProvider
+      .state('slider', {
+        url: '/slider',
+        templateUrl: 'app/pages/slider/slider.html'
+      });
+  }
+
+})();
diff --git a/src/app/theme/components/contentTop/contentTop.directive.js b/src/app/theme/components/contentTop/contentTop.directive.js
index b49640e..18e345a 100644
--- a/src/app/theme/components/contentTop/contentTop.directive.js
+++ b/src/app/theme/components/contentTop/contentTop.directive.js
@@ -35,6 +35,7 @@
           '/profile': 'User Profile',
           '/tables': 'Tables',
           '/tree': 'Tree View',
+          '/slider': 'Sliders',
           '/typography': 'Typography',
           '/form-layouts': 'Form Layouts',
           '/form-inputs': 'Form Inputs',
diff --git a/src/app/theme/components/sidebar/SidebarCtrl.js b/src/app/theme/components/sidebar/SidebarCtrl.js
index eb3d14b..a03b01e 100644
--- a/src/app/theme/components/sidebar/SidebarCtrl.js
+++ b/src/app/theme/components/sidebar/SidebarCtrl.js
@@ -96,6 +96,10 @@
           {
             title: 'Tree View',
             root: '#/tree'
+          },
+          {
+            title: 'Sliders',
+            root: '#/slider'
           }
         ]
       },
diff --git a/src/app/theme/directives/ionSlider.js b/src/app/theme/directives/ionSlider.js
new file mode 100644
index 0000000..9d8be6b
--- /dev/null
+++ b/src/app/theme/directives/ionSlider.js
@@ -0,0 +1,91 @@
+/**
+ * @author a.demeshko
+ * created on 22.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme')
+    .directive('ionSlider', ionSlider);
+
+  /** @ngInject */
+  function ionSlider($timeout) {
+    return {
+      restrict: 'EA',
+      template: '<div></div>',
+      replace: true,
+      scope: {
+        min: '=',
+        max: '=',
+        type: '@',
+        prefix: '@',
+        maxPostfix: '@',
+        prettify: '=',
+        prettifySeparator: '@',
+        grid: '=',
+        gridMargin: '@',
+        postfix: '@',
+        step: '@',
+        hideMinMax: '@',
+        hideFromTo: '@',
+        from: '=',
+        to: '=',
+        disable: '=',
+        onChange: '=',
+        onFinish: '=',
+        values: '='
+      },
+      link: function ($scope, $element) {
+        (function init() {
+          $element.ionRangeSlider({
+            min: $scope.min,
+            max: $scope.max,
+            type: $scope.type,
+            prefix: $scope.prefix,
+            maxPostfix: $scope.maxPostfix,
+            prettify_enabled: $scope.prettify,
+            prettify_separator: $scope.prettifySeparator,
+            grid: $scope.grid,
+            gridMargin: $scope.gridMargin,
+            postfix: $scope.postfix,
+            step: $scope.step,
+            hideMinMax: $scope.hideMinMax,
+            hideFromTo: $scope.hideFromTo,
+            from: $scope.from,
+            to: $scope.to,
+            disable: $scope.disable,
+            onChange: $scope.onChange,
+            onFinish: $scope.onFinish,
+            values: $scope.values
+          });
+        })();
+        $scope.$watch('min', function (value) {
+          $timeout(function () {
+            $element.data("ionRangeSlider").update({min: value});
+          });
+        }, true);
+        $scope.$watch('max', function (value) {
+          $timeout(function () {
+            $element.data("ionRangeSlider").update({max: value});
+          });
+        });
+        $scope.$watch('from', function (value) {
+          $timeout(function () {
+            $element.data("ionRangeSlider").update({from: value});
+          });
+        });
+        $scope.$watch('to', function (value) {
+          $timeout(function () {
+            $element.data("ionRangeSlider").update({to: value});
+          });
+        });
+        $scope.$watch('disable', function (value) {
+          $timeout(function () {
+            $element.data("ionRangeSlider").update({disable: value});
+          });
+        });
+      }
+    };
+  }
+
+})();
\ No newline at end of file