Merge pull request #2191 from christopheschwyzer/issue-2191

Make "Integer" form field inherit from "Text"

library/CM/Form/Example.php

@@ -10,7 +10,7 @@ protected function _initialize() {
         $this->registerField(new CM_FormField_Float(['name' => 'float']));
         $this->registerField(new CM_FormField_Money(['name' => 'money']));
         $this->registerField(new CM_FormField_Url(['name' => 'url']));
-        $this->registerField(new CM_FormField_Integer(['name' => 'int', 'min' => -10, 'max' => 20, 'step' => 2]));
+        $this->registerField(new CM_FormField_Number(['name' => 'int', 'min' => -10, 'max' => 20]));
         $this->registerField(new CM_FormField_Distance(['name' => 'locationSlider']));
         $this->registerField(new CM_FormField_Location(['name' => 'location', 'fieldNameDistance' => 'locationSlider']));
         $this->registerField(new CM_FormField_File(['name' => 'file', 'cardinality' => 2]));

library/CM/Form/ExampleIcon.php

@@ -3,13 +3,13 @@
 class CM_Form_ExampleIcon extends CM_Form_Abstract {
 
     protected function _initialize() {
-        $this->registerField(new CM_FormField_Integer(['name' => 'sizeSlider', 'min' => 6, 'max' => 120]));
+        $this->registerField(new CM_FormField_Distance(['name' => 'sizeSlider', 'min' => 6, 'max' => 120]));
         $this->registerField(new CM_FormField_Color(['name' => 'colorBackground']));
         $this->registerField(new CM_FormField_Color(['name' => 'color']));
         $this->registerField(new CM_FormField_Color(['name' => 'shadowColor']));
-        $this->registerField(new CM_FormField_Integer(['name' => 'shadowX', 'min' => 0, 'max' => 20]));
-        $this->registerField(new CM_FormField_Integer(['name' => 'shadowY', 'min' => 0, 'max' => 20]));
-        $this->registerField(new CM_FormField_Integer(['name' => 'shadowBlur', 'min' => 0, 'max' => 20]));
+        $this->registerField(new CM_FormField_Distance(['name' => 'shadowX', 'min' => 0, 'max' => 20]));
+        $this->registerField(new CM_FormField_Distance(['name' => 'shadowY', 'min' => 0, 'max' => 20]));
+        $this->registerField(new CM_FormField_Distance(['name' => 'shadowBlur', 'min' => 0, 'max' => 20]));
     }
 
     public function prepare(CM_Frontend_Environment $environment, CM_Frontend_ViewResponse $viewResponse) {

library/CM/FormField/Distance.js

@@ -1,7 +1,90 @@
 /**
  * @class CM_FormField_Distance
- * @extends CM_FormField_Integer
+ * @extends CM_FormField_Hidden
  */
-var CM_FormField_Distance = CM_FormField_Integer.extend({
-  _class: 'CM_FormField_Distance'
+var CM_FormField_Distance = CM_FormField_Hidden.extend({
+
+  _class: 'CM_FormField_Distance',
+
+  /** @type {jQuery} */
+  _$noUiHandle: null,
+
+  /** @type {Element} */
+  _slider: null,
+
+  ready: function() {
+    var field = this;
+    var $slider = this.$('.noUiSlider');
+    var $sliderValue = this.$('.noUiSlider-value');
+    this._slider = $slider[0];
+
+    noUiSlider.create(this._slider, {
+      range: {min: field.getOption('min'), max: field.getOption('max')},
+      start: $sliderValue.text(),
+      step: field.getOption('step'),
+      handles: 1,
+      behaviour: 'tap'
+    });
+    this._$noUiHandle = $slider.find('.noUi-handle');
+    this._$noUiHandle.attr('tabindex', '0');
+
+    this._slider.noUiSlider.on('update', function(values, handle) {
+      var val = parseInt(values[handle]);
+      $sliderValue.html(val);
+      field._onChange();
+    });
+
+    this.bindJquery($(window), 'keydown', this._onKeyDown);
+  },
+
+  getInput: function() {
+    return this.$('.noUiSlider');
+  },
+
+  getValue: function() {
+    if (this._slider) {
+      return +this._slider.noUiSlider.get();
+    }
+    return null;
+  },
+
+  /**
+   * @param {Number} value
+   */
+  setValue: function(value) {
+    this._slider.noUiSlider.set(value);
+  },
+
+  getEnabled: function() {
+    return !this._slider.getAttribute('disabled');
+  },
+
+  /**
+   * @param {Boolean} enabled
+   */
+  setEnabled: function(enabled) {
+    if (enabled) {
+      this._slider.removeAttribute('disabled');
+    } else {
+      this._slider.setAttribute('disabled', 'disabled');
+    }
+  },
+
+  _onChange: function() {
+    this.trigger('change');
+  },
+
+  _onKeyDown: function(event) {
+    if (this._$noUiHandle.is(':focus') && this.getEnabled()) {
+      if (event.which === cm.keyCode.LEFT || event.which === cm.keyCode.DOWN) {
+        this.setValue(this.getValue() - this.getOption('step'));
+        event.preventDefault();
+      }
+      if (event.which === cm.keyCode.RIGHT || event.which === cm.keyCode.UP) {
+        this.setValue(this.getValue() + this.getOption('step'));
+        event.preventDefault();
+      }
+
+    }
+  }
 });

library/CM/FormField/Distance.php

@@ -1,9 +1,15 @@
 <?php
 
-class CM_FormField_Distance extends CM_FormField_Integer {
+class CM_FormField_Distance extends CM_FormField_Hidden {
 
     public function validate(CM_Frontend_Environment $environment, $userInput) {
-        return parent::validate($environment, $userInput) * 1609;
+        parent::validate($environment, $userInput);
+        $value = (int) $userInput;
+        if ($value < $this->_options['min'] || $value > $this->_options['max']) {
+            throw new CM_Exception_FormFieldValidation(new CM_I18n_Phrase('Value not in range.'));
+        }
+
+        return $value * 1609;
     }
 
     /**
@@ -12,4 +18,11 @@ public function validate(CM_Frontend_Environment $environment, $userInput) {
     public function getValue() {
         return parent::getValue() / 1609;
     }
+
+    protected function _initialize() {
+        $this->_options['min'] = $this->_params->getInt('min', 0);
+        $this->_options['max'] = $this->_params->getInt('max', 100);
+        $this->_options['step'] = $this->_params->getInt('step', 1);
+        parent::_initialize();
+    }
 }

library/CM/FormField/Location.js

@@ -24,7 +24,7 @@ var CM_FormField_Location = CM_FormField_SuggestOne.extend({
   },
 
   /**
-   * @returns {CM_FormField_Integer|Null}
+   * @returns {CM_FormField_Distance|Null}
    */
   getDistanceField: function() {
     if (!this.getOption("distanceName")) {

library/CM/FormField/Number.js

@@ -0,0 +1,9 @@
+/**
+ * @class CM_FormField_Number
+ * @extends CM_FormField_Text
+ */
+var CM_FormField_Number = CM_FormField_Text.extend({
+
+  _class: 'CM_FormField_Number'
+
+});

library/CM/FormField/Integer.php → library/CM/FormField/Number.php

@@ -1,10 +1,6 @@
 <?php
 
-class CM_FormField_Integer extends CM_FormField_Abstract {
-
-    public function prepare(CM_Params $renderParams, CM_Frontend_Environment $environment, CM_Frontend_ViewResponse $viewResponse) {
-        $viewResponse->set('class', $renderParams->has('class') ? $renderParams->getString('class') : null);
-    }
+class CM_FormField_Number extends CM_FormField_Text {
 
     public function validate(CM_Frontend_Environment $environment, $userInput) {
         if (!is_numeric($userInput)) {
@@ -14,13 +10,13 @@ public function validate(CM_Frontend_Environment $environment, $userInput) {
         if ($value < $this->_options['min'] || $value > $this->_options['max']) {
             throw new CM_Exception_FormFieldValidation(new CM_I18n_Phrase('Value not in range.'));
         }
+
         return $value;
     }
 
     protected function _initialize() {
         $this->_options['min'] = $this->_params->getInt('min', 0);
         $this->_options['max'] = $this->_params->getInt('max', 100);
-        $this->_options['step'] = $this->_params->getInt('step', 1);
         parent::_initialize();
     }
 }