stopable interval for animations

cube3power · Dec 21, 2015 · 1606d87 · 1606d87
1 parent 1e027c0
commit 1606d87
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 69 deletions.
diff --git a/src/app/pages/charts/chartJs/chartJsWaveCtrl.js b/src/app/pages/charts/chartJs/chartJsWaveCtrl.js
@@ -9,13 +9,13 @@
     .controller('chartJsWaveCtrl', chartJsWaveCtrl);
 
   /** @ngInject */
-  function chartJsWaveCtrl($scope, $interval) {
+  function chartJsWaveCtrl($scope, $interval, stopableInterval) {
     $scope.labels =["April", "May", "June", "Jule", "August", "September", "October", "November", "December"];
     $scope.data = [[1, 9, 3, 4, 5, 6, 7, 8, 2].map(function(e){
       return Math.sin(e) * 25 +25;
     })];
 
-    $interval(function(){
+    stopableInterval.start($interval, function(){
       $scope.data[0].unshift($scope.data[0].pop());
     }, 300)
   }

diff --git a/src/app/pages/charts/morris/morris.html b/src/app/pages/charts/morris/morris.html
@@ -1,80 +1,50 @@
 <section ng-controller="morrisCtrl">
   <div class="row">
-    <div class="col-md-6 ">
+      <div class="col-md-6">
+        <blur-panel title="Line Charts" class-container="with-scroll">
+          <h5>Simple Line Chart</h5>
+          <div
+              line-chart
+              line-data='lineData'
+              line-xkey='y'
+              line-ykeys='["a", "b"]'
+              line-labels='["Serie A", "Serie B"]'
+              line-colors='colors'>
+          </div>
+          <h5 class="area-morris-header">Area Chart</h5>
+          <div
+            area-chart
+            area-data='areaData'
+            area-xkey='y'
+            area-ykeys='["a", "b"]'%
+            area-labels='["Serie A", "Serie B"]'
+            line-colors='colors'>
+        </div>
+      </blur-panel>
+    </div>
+    <div class="col-md-6 col-sm-12">
       <blur-panel title="Bar Chart" class-container="with-scroll ">
         <div
             bar-chart
-            bar-data='[
-    { y: "2006", a: 100, b: 90 },
-    { y: "2007", a: 75,  b: 65 },
-    { y: "2008", a: 50,  b: 40 },
-    { y: "2009", a: 75,  b: 65 },
-    { y: "2010", a: 50,  b: 40 },
-    { y: "2011", a: 75,  b: 65 },
-    { y: "2012", a: 100, b: 90 }
-]'
+            bar-data='barData'
             bar-x='y'
             bar-y='["a", "b"]'
             bar-labels='["Series A", "Series B"]'
             bar-colors='colors'>
         </div>
       </blur-panel>
     </div>
-    <div class="col-md-6 ">
-      <blur-panel title="Donut" class-container="with-scroll ">
+  </div>
+  <div class="row morris-up">
+    <div class="col-md-6 col-md-offset-6 col-sd-offset-0 col-sm-12">
+      <blur-panel title="Donut Chart" class-container="with-scroll ">
         <div
             donut-chart
-            donut-data='[
-    {label: "Download Sales", value: 12},
-    {label: "In-Store Sales",value: 30},
-    {label: "Mail-Order Sales", value: 20}
-]'
+            donut-data='donutData'
             donut-colors='colors'
             donut-formatter='"currency"'>
         </div>
       </blur-panel>
     </div>
   </div>
-  <div class="row">
-    <div class="col-md-6 ">
-      <blur-panel title="Line Chart" class-container="with-scroll ">
-        <div
-            line-chart
-            line-data='[
-    { y: "2006", a: 100, b: 90 },
-    { y: "2007", a: 75,  b: 65 },
-    { y: "2008", a: 50,  b: 40 },
-    { y: "2009", a: 75,  b: 65 },
-    { y: "2010", a: 50,  b: 40 },
-    { y: "2011", a: 75,  b: 65 },
-    { y: "2012", a: 100, b: 90 }
-]'
-            line-xkey='y'
-            line-ykeys='["a", "b"]'
-            line-labels='["Serie A", "Serie B"]'
-            line-colors='colors'>
-        </div>
-      </blur-panel>
-    </div>
-    <div class="col-md-6 ">
-      <blur-panel title="Area Chart" class-container="with-scroll ">
-        <div
-            area-chart
-            area-data='[
-    { y: "2006", a: 100, b: 90 },
-    { y: "2007", a: 75,  b: 65 },
-    { y: "2008", a: 50,  b: 40 },
-    { y: "2009", a: 75,  b: 65 },
-    { y: "2010", a: 50,  b: 40 },
-    { y: "2011", a: 75,  b: 65 },
-    { y: "2012", a: 100, b: 90 }
-  ]'
-            area-xkey='y'
-            area-ykeys='["a", "b"]'
-            area-labels='["Serie A", "Serie B"]'
-            line-colors='colors'>
-        </div>
-      </blur-panel>
-    </div>
-  </div>
 </section>
diff --git a/src/app/pages/charts/morris/morrisCtrl.js b/src/app/pages/charts/morris/morrisCtrl.js
@@ -9,8 +9,44 @@
     .controller('morrisCtrl', morrisCtrl);
 
   /** @ngInject */
-  function morrisCtrl($scope,layoutColors) {
-    $scope.colors = [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.default, layoutColors.primaryDark];
+  function morrisCtrl($scope, $window, layoutColors) {
+    $scope.colors = [layoutColors.primary, layoutColors.danger, layoutColors.success, layoutColors.warning, layoutColors.default, layoutColors.primaryDark];
+    $scope.lineData = [
+      {y: "2006", a: 100, b: 90},
+      {y: "2007", a: 75, b: 65},
+      {y: "2008", a: 50, b: 40},
+      {y: "2009", a: 75, b: 65},
+      {y: "2010", a: 50, b: 40},
+      {y: "2011", a: 75, b: 65},
+      {y: "2012", a: 100, b: 90}
+    ];
+    $scope.areaData = [
+      {y: "2006", a: 100, b: 90},
+      {y: "2007", a: 75, b: 65},
+      {y: "2008", a: 50, b: 40},
+      {y: "2009", a: 75, b: 65},
+      {y: "2010", a: 50, b: 40},
+      {y: "2011", a: 75, b: 65},
+      {y: "2012", a: 100, b: 90}
+    ];
+    $scope.barData = [
+      {y: "2006", a: 100, b: 90},
+      {y: "2007", a: 75, b: 65},
+      {y: "2008", a: 50, b: 40},
+      {y: "2009", a: 75, b: 65},
+      {y: "2010", a: 50, b: 40},
+      {y: "2011", a: 75, b: 65},
+      {y: "2012", a: 100, b: 90}
+    ];
+    $scope.donutData = [
+      {label: "Download Sales", value: 12},
+      {label: "In-Store Sales", value: 30},
+      {label: "Mail-Order Sales", value: 20}
+    ];
+
+    angular.element($window).bind('resize', function () {
+      //$window.Morris.Grid.prototype.redraw();
+    });
   }
 
 })();
diff --git a/src/app/pages/tree/tree.html b/src/app/pages/tree/tree.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/src/app/pages/tree/tree.module.js b/src/app/pages/tree/tree.module.js
@@ -0,0 +1,3 @@
+/**
+ * Created by alex on 12/21/15.
+ */
diff --git a/src/app/theme/services/stopableInterval.js b/src/app/theme/services/stopableInterval.js
@@ -5,12 +5,29 @@
 (function () {
   'use strict';
 
-  angular.module('theme')
+  angular.module('BlurAdmin.theme')
     .service('stopableInterval', stopableInterval);
 
   /** @ngInject */
-  function stopableInterval() {
+  function stopableInterval($window) {
+    return {
+      start: function (interval, calback, time) {
+        function startInterval() {
+          return interval(calback, time);
+        }
 
+        var i = startInterval();
+
+        angular.element($window).bind('focus', function () {
+          if (i) interval.cancel(i);
+          i = startInterval();
+        });
+
+        angular.element($window).bind('blur', function () {
+          if (i) interval.cancel(i);
+        });
+      }
+    }
   }
 
 })();
diff --git a/src/sass/app/_chartsPage.scss b/src/sass/app/_chartsPage.scss
@@ -73,19 +73,19 @@
 
 .ct-series-c {
   .ct-bar,  .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
-    stroke: $warning;
+    stroke: $danger;
   }
   .ct-slice-pie, .ct-area{
-    fill: $warning;
+    fill: $danger;
   }
 }
 
 .ct-series-d {
   .ct-bar,  .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
-    stroke: $danger;
+    stroke: $warning;
   }
   .ct-slice-pie, .ct-area{
-    fill: $danger;
+    fill: $warning;
   }
 
 }
@@ -98,6 +98,17 @@
     fill: $info;
   }
 }
+@media screen and (min-width: 992px) {
+  .row.morris-up {
+    > div {
+      margin-top: -434px;
+    }
+  }
+}
+
+.area-morris-header{
+  margin-top: 20px;
+}
 
 .stacked-bar .ct-bar{
   stroke-width: 30px;