From: Kevin Ball <kmball11@gmail.com>
Date: Fri, 18 Nov 2016 01:31:51 +0000 (-0800)
Subject: Merge branch 'develop' into v6.3
X-Git-Tag: v6.3-rc1~2^2~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F9386%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Merge branch 'develop' into v6.3
---

7ca212a0231d5ad976e0054d00dadcc0304267c1
diff --cc docs/pages/slider.md
index da62397ab,9857447c4..4c59323fa
--- a/docs/pages/slider.md
+++ b/docs/pages/slider.md
@@@ -131,23 -131,11 +131,32 @@@ It's possible to use both the JavaScrip
  - No support for vertical orientation.
  - No support for two handles.
  
 +---
 +
 +## 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.
++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');
+ ```
diff --cc js/foundation.slider.js
index a343c8e60,41efb7fc4..0d7e4cf23
--- a/js/foundation.slider.js
+++ b/js/foundation.slider.js
@@@ -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