]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Merge branch 'develop' into v6.3 9386/head
authorKevin Ball <kmball11@gmail.com>
Fri, 18 Nov 2016 01:31:51 +0000 (17:31 -0800)
committerKevin Ball <kmball11@gmail.com>
Fri, 18 Nov 2016 01:31:51 +0000 (17:31 -0800)
1  2 
docs/pages/slider.md
js/foundation.slider.js

index da62397abab813ea8239fdb7b782e5ff4be24dc0,9857447c421f82d91fc04cc5bd3fff3886883815..4c59323faaff9f90021a9fe8611876b812a0a566
@@@ -131,23 -131,11 +131,32 @@@ It's possible to use both the JavaScrip
  - No support for vertical orientation.
  - No support for two handles.
  
- The nonLinearBase-option is optional and defaults to 5.
 +---
 +
 +## Non-linear value translation
 +
 +Sometimes not every value is of equal importance. In the example below, the slider focusses on the higher numbers by adding a `log`-type position value funtion.
 +Alternatively there is also a `pow`-type position value function available, making the reverse possible.
 +
 +```html_example
 +<div class="small-10 columns">
 +<div class="slider" data-slider data-initial-start="50" data-step="1" data-position-value-function="log" data-non-linear-base="5">
 +  <span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutputNonLinear"></span>
 +</div>
 +</div>
 +<div class="small-2 columns">
 +  <input type="number" id="sliderOutputNonLinear">
 +</div>
 +</div>
 +```
 +
++The nonLinearBase-option is optional and defaults to 5.
++
+ ## Reflow
+ The slider takes into account the width of the handles when calculating how to display itself. This means that if the slider is initially hidden, or hidden while the value is adjusted, the resulting visual will be slightly different because the width of the handle is indeterminate.  If this is problematic, you can use JavaScript to cause the slider to reflow at the time that you change it from being hidden.  Example:
+ ```js
+ $('#my-slider').show();
+ $('#my-slider').foundation('_reflow');
+ ```
index a343c8e600d9f34eadec9bfb35620d886ad623b5,41efb7fc4b23111f8eaa3653bea6e334b3f22ba6..0d7e4cf23229ce3adcffedbf4fd54bdf1f3cdb25
@@@ -95,63 -101,9 +101,66 @@@ class Slider 
      }
    }
  
+   _reflow() {
+     this.setHandles();
+   }
 +  /**
 +  * @function
 +  * @private
 +  * @param {Number} value - floating point (the value) to be transformed using to a relative position on the slider (the inverse of _value)
 +  */
 +  _pctOfBar(value) {
 +    var pctOfBar = percent(value - this.options.start, this.options.end - this.options.start)
 +
 +    switch(this.options.positionValueFunction) {
 +    case "pow":
 +      pctOfBar = this._logTransform(pctOfBar);
 +      break;
 +    case "log":
 +      pctOfBar = this._powTransform(pctOfBar);
 +      break;
 +    }
 +
 +    return pctOfBar.toFixed(2)
 +  }
 +
 +  /**
 +  * @function
 +  * @private
 +  * @param {Number} pctOfBar - floating point, the relative position of the slider (typically between 0-1) to be transformed to a value
 +  */
 +  _value(pctOfBar) {
 +    switch(this.options.positionValueFunction) {
 +    case "pow":
 +      pctOfBar = this._powTransform(pctOfBar);
 +      break;
 +    case "log":
 +      pctOfBar = this._logTransform(pctOfBar);
 +      break;
 +    }
 +    var value = (this.options.end - this.options.start) * pctOfBar + this.options.start;
 +
 +    return value
 +  }
 +
 +  /**
 +  * @function
 +  * @private
 +  * @param {Number} value - floating point (typically between 0-1) to be transformed using the log function
 +  */
 +  _logTransform(value) {
 +    return baseLog(this.options.nonLinearBase, ((value*(this.options.nonLinearBase-1))+1))
 +  }
 +
 +  /**
 +  * @function
 +  * @private
 +  * @param {Number} value - floating point (typically between 0-1) to be transformed using the power function
 +  */
 +  _powTransform(value) {
 +    return (Math.pow(this.options.nonLinearBase, value) - 1) / (this.options.nonLinearBase - 1)
 +  }
 +
    /**
     * Sets the position of the selected handle and fill bar.
     * @function