Merge pull request hojberg#14 from EtienneLem/master

Keydown event

Author: hojberg

public/js/lib/views/arrow_configuration_view.js

@@ -51,16 +51,20 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
     **/
     _attachEvents: function () {
       var _updateModelProxy = $.proxy( this._updateModel, this),
+          _updateInputProxy = $.proxy( this._updateInput, this),
           container         = this.container,
-          selectors         = [ '.position',
-                                '.size',
-                                '.base_color',
-                                '.border_width',
-                                '.border_color'
+          selectors         = [ { classname: '.position',      keyboard_interactive: false },
+                                { classname: '.size',          keyboard_interactive: true },
+                                { classname: '.base_color',    keyboard_interactive: false },
+                                { classname: '.border_width',  keyboard_interactive: true },
+                                { classname: '.border_color',  keyboard_interactive: false }
                               ];
 
       $.each(selectors, function (i, selector) {
-        container.delegate(selector, 'change', _updateModelProxy);
+        container.delegate(selector.classname, 'change', _updateModelProxy);
+        if (selector.keyboard_interactive) {
+          container.delegate(selector.classname, 'keydown', _updateInputProxy);
+        }
       });
     },
 
@@ -85,6 +89,18 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
 
       if (attr === 'borderWidth' || attr === 'size') val = parseInt(val, 10);
       this.model.set(attr, val);
+    },
+
+    _updateInput: function (ev) {
+      if (ev.keyCode != 38 && ev.keyCode != 40) return;
+
+      var target    = $(ev.currentTarget),
+          val       = parseInt(target.val()),
+          increment = ev.keyCode == 38 ? 1 : -1,
+          multiply  = ev.shiftKey ? 10 : 1
+
+      target.val(val + increment * multiply);
+      this._updateModel(ev)
     }
 
   };

public/js/spec/views/arrow_configuration_view_spec.js

@@ -69,6 +69,34 @@ describe("CSSArrowPlease.ArrowConfigurationView", function () {
         expect( arrow.get('borderColor') ).toEqual('#f00');
       });
 
+      it('increases or decreases value accordingly when arrows are pressed', function() {
+        var objects = [
+              { selector: '.size', arrowAttr: 'size', defaultVal: 30 },
+              { selector: '.border_width', arrowAttr: 'borderWidth', defaultVal: 4 }
+            ],
+            keystrokes = [
+              { key: 38, increment: 1, shift: false },
+              { key: 38, increment: 10, shift: true },
+              { key: 40, increment: -1, shift: false },
+              { key: 40, increment: -10, shift: true }
+            ];
+
+        $.each(objects, function (i, object) {
+          var elem = $container.find(object.selector),
+              defaultVal = object.defaultVal,
+              arrowAttr = object.arrowAttr;
+
+          $.each(keystrokes, function (i, keystroke) {
+            var keydown = $.Event('keydown')
+            keydown.keyCode = keystroke.key;
+            keydown.shiftKey = keystroke.shift;
+
+            elem.val(defaultVal).trigger(keydown);
+            expect( arrow.get(arrowAttr) ).toEqual(defaultVal + keystroke.increment);
+          });
+        });
+      });
+
     });
   });