refactoring and added support for moving the slider with arrow keys

Author: paoloboschini

public/js/libs/numberPicker.js

@@ -11,16 +11,17 @@ var numberPicker = (function() {
     var startReplace, endReplace;
 
     // Bind the numberPicker to change events
-    slider.bind('change', function(e) {
+    slider.change(function(e) {
       e.preventDefault();
 
-      editor.off('cursorActivity', onCursorActivity);
+      // editor.off('cursorActivity', onCursorActivity);
 
       var cur = editor.getCursor();
       var token = editor.getTokenAt(cur);
+      editor.setCursor({line: cur.line, ch: token.end});
 
       // when cursor is in front of a token, the token is then null,
-      // so replace token with tokenAhead which is at a ch+1
+      // replace token with tokenAhead which is at a ch+1
       var tokenAhead = editor.getTokenAt({line:cur.line, ch:cur.ch+1});
       token = token.type === null ? tokenAhead : token;
 
@@ -29,29 +30,20 @@ var numberPicker = (function() {
 
       // actual value, the original token value + offset
       var value = (tokenOriginalValue + offset) + '';
+      // console.log('tokenOriginalValue:', tokenOriginalValue);
+      editor.replaceRange(value, {line:cur.line, ch:startReplace}, {line:cur.line, ch:endReplace});
 
-      // console.log('value.length:', value.length);
-      // console.log('endReplace', (endReplace - startReplace));
-
-      if (value.length == (endReplace - startReplace)) {
-        editor.replaceRange(value, {line:cur.line, ch:startReplace}, {line:cur.line, ch:endReplace});
-      }
-      else if(value.length < (endReplace - startReplace)) {
-        // console.log('value.length < (endReplace - startReplace)');
-        editor.replaceRange(value, {line:cur.line, ch:startReplace}, {line:cur.line, ch:endReplace});
+      if(value.length < (endReplace - startReplace)) {
         endReplace--;
-      }
-      else if(value.length > (endReplace - startReplace)) {
-        // console.log('value.length > (endReplace - startReplace)');
-        editor.replaceRange(value, {line:cur.line, ch:startReplace}, {line:cur.line, ch:endReplace});
+      } else if(value.length > (endReplace - startReplace)) {
         endReplace++;
       }
     });
 
     editor.setOption('onKeyEvent', function(cm, s){
       if (s.type == 'keyup') {
         showNumberPicker(cm);
-      } // if (s.type == 'keyup') {
+      }
     });
 
     editor.on('focus', function(cm) {
@@ -65,8 +57,7 @@ var numberPicker = (function() {
 
     function onCursorActivity(cm) {
       // console.log('cursorActivity');
-      sliderDiv.css('visibility', 'hidden');
-      slider.val(50);
+      hideSlider(cm);
       showNumberPicker(cm);
     }
 
@@ -87,15 +78,16 @@ var numberPicker = (function() {
           .css('top', (pos.top - 15) + 'px');
       }
 
-      // match any ints in the token string
+      // we don't want to match colors
       var string = token.string;
       var hex = string.match(/#([A-Fa-f0-9]{6})/g);
       if (hex !== null) {
         return;
       }
 
+      // match any ints in the token string
       var matches = string.match(/-?\d+/g), match;
-      if (matches !== null) {
+      if (matches) {
         match = matches[0];
         tokenOriginalValue = parseInt(match, 10);
 
@@ -111,16 +103,35 @@ var numberPicker = (function() {
         // check if in the int boudaries
         if(cur.ch >= token.start + startInt && cur.ch <= token.start + endInt) {
           sliderDiv.css('visibility', 'visible');
+
+          // here we could bing right and left keys to
+          // move the slider with the keyboard
+          cm.addKeyMap(sliderMap);
+
         } else {
-          sliderDiv.css('visibility', 'hidden');
-          slider.val(50);
+          hideSlider(cm);
         }
       } else {
-        sliderDiv.css('visibility', 'hidden');
-        slider.val(50);
+        hideSlider(cm);
       }
     }
 
+    var sliderMap = {
+      Left: function() {
+        slider.get(0).stepDown(1);
+        slider.trigger('change');
+      },
+      Right: function() {
+        slider.get(0).stepUp(1);
+        slider.trigger('change');
+      }
+    };
+
+    function hideSlider(cm) {
+      sliderDiv.css('visibility', 'hidden');
+      slider.val(50);
+      cm.removeKeyMap(sliderMap);
+    }
     //-------------------------------------------------------
     //
     // Test mouse pointer over tokens, incomplete implementation