Updates to Rekapi 0.15.10 and makes logic and name changes to be

consistent with toCSS's switch from "granularity" to "FPS." Squashed commit of the following: commit 39937f2bbe0ac5a02b762c6201b29ff2d636970c Author: Jeremy Kahn <[email protected]> Date: Tue Jul 30 20:34:04 2013 -0700 Updates version 0.1.8. commit 0100b36b804d0e58e867b76aa6647a61e04bc63d Author: Jeremy Kahn <[email protected]> Date: Tue Jul 30 20:32:45 2013 -0700 Variable renames to be consistent with granularity/FPS switch. commit b3d4e7d8d121bc7ce709ab1a76ee872270cb2947 Author: Jeremy Kahn <[email protected]> Date: Tue Jul 30 20:10:24 2013 -0700 Updates Rekapi to 0.15.10 and updates logic to work with FPS instead of granularity.
jeremyckahn · Jul 31, 2013 · 4b645f5 · 4b645f5
1 parent 9d3bbd9
commit 4b645f5
Show file tree

Hide file tree

Showing 11 changed files with 53 additions and 58 deletions.
diff --git a/bin/app.js b/bin/app.js
diff --git a/bin/libs.js b/bin/libs.js
diff --git a/bower.json b/bower.json
@@ -1,10 +1,10 @@
 {
   "name": "Stylie",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "./index.html",
   "dependencies": {
     "shifty": "0.8.6",
-    "rekapi": "0.15.4",
+    "rekapi": "0.15.10",
     "rekapi-controls": "~0.3.10",
     "backbone": "~1.0.0",
     "underscore": "~1.4.4",

diff --git a/dev.html b/dev.html
@@ -123,7 +123,7 @@ <h3>
               <h3>Generated CSS:</h3>
               <textarea></textarea>
             </li>
-            <li class="quality-slider granularity">
+            <li class="quality-slider fps">
               <label>Smaller output</label>
               <label>Higher quality</label>
               <div class="slider"></div>

diff --git a/index.html b/index.html
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "Stylie",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "homepage": "https://github.com/jeremyckahn/stylie",
   "author": "Jeremy Kahn <[email protected]>",
   "description": "A CSS3 keyframe generator",

diff --git a/src/constants.js b/src/constants.js
@@ -16,8 +16,8 @@ define(function () {
     ,'ALERT_TIMEOUT': 6000
     ,'NEW_KEYFRAME_X_OFFSET': 200
     ,'NEW_KEYFRAME_MILLISECOND_OFFSET': 1000
-    ,'DEFAULT_CSS_OUTPUT_GRANULARITY': 100
-    ,'MAXIMUM_CSS_OUTPUT_GRANULARITY': 200
-    ,'MINIMUM_CSS_OUTPUT_GRANULARITY': 5
+    ,'DEFAULT_CSS_OUTPUT_FPS': 30
+    ,'MAXIMUM_CSS_OUTPUT_FPS': 60
+    ,'MINIMUM_CSS_OUTPUT_FPS': 1
   };
 });
diff --git a/src/init.js b/src/init.js
@@ -9,7 +9,7 @@ require([
     ,'src/ui/auto-update-textfield', 'src/ui/canvas', 'src/ui/pane'
     ,'src/ui/tabs', 'src/ui/css-output', 'src/ui/html-input'
     ,'src/ui/incrementer-field', 'src/ui/modal', 'src/ui/hotkey-handler'
-    ,'src/ui/rekapi-controls', 'src/ui/alert', 'src/ui/granularity-slider'
+    ,'src/ui/rekapi-controls', 'src/ui/alert', 'src/ui/fps-slider'
 
     // Collections
     ,'src/collection/actors'
@@ -23,7 +23,7 @@ require([
       ,AutoUpdateTextFieldView, CanvasView, PaneView
       ,TabsView, CSSOutputView, HTMLInputView
       ,IncrementerFieldView, ModalView, HotkeyHandlerView
-      ,RekapiControlsView, AlertView, GranularitySliderView
+      ,RekapiControlsView, AlertView, FPSSliderView
 
       ,ActorCollection
 
@@ -130,8 +130,8 @@ require([
         .find('[data-target="css-output"]')
   });
 
-  app.view.granularitySlider = new GranularitySliderView({
-    '$el': $('.quality-slider.granularity .slider')
+  app.view.fpsSlider = new FPSSliderView({
+    '$el': $('.quality-slider.fps .slider')
   });
 
   subscribe(constant.UPDATE_CSS_OUTPUT, function () {

diff --git a/src/ui/css-output.js b/src/ui/css-output.js
@@ -41,7 +41,7 @@ define(['src/app'], function (app) {
         ,'name': cssClassName
         ,'iterations': app.$el.animationIteration.val()
         ,'isCentered': app.config.isCenteredToPath
-        ,'granularity': app.view.granularitySlider.getGranularity()
+        ,'fps': app.view.fpsSlider.getFPS()
       });
 
       this.$el.val(cssOutput);

diff --git a/src/ui/fps-slider.js b/src/ui/fps-slider.js
@@ -0,0 +1,33 @@
+define(['src/app', 'src/constants'], function (app, constant) {
+
+  return Backbone.View.extend({
+
+    'FPS_RANGE':
+        constant.MAXIMUM_CSS_OUTPUT_FPS - constant.MINIMUM_CSS_OUTPUT_FPS
+
+    ,'initialize': function (opts) {
+      _.extend(this, opts);
+
+      this.$el.dragonSlider({
+        'drag': _.bind(this.onSliderDrag, this)
+      });
+
+      var val =
+          (constant.DEFAULT_CSS_OUTPUT_FPS - constant.MINIMUM_CSS_OUTPUT_FPS)
+              / (this.FPS_RANGE - 1);
+
+      this.$el.dragonSliderSet(val, false);
+    }
+
+    ,'onSliderDrag': function (val) {
+      app.view.cssOutput.renderCSS();
+    }
+
+    ,'getFPS': function () {
+      var sliderVal = this.$el.dragonSliderGet();
+      return constant.MINIMUM_CSS_OUTPUT_FPS
+             + (sliderVal * this.FPS_RANGE);
+    }
+  });
+
+});
diff --git a/src/ui/granularity-slider.js b/src/ui/granularity-slider.js