Flexslider 2.7.1 - fixes RTL firefox issues. Adds isFirefox param.

README.md

@@ -1,6 +1,6 @@
 [![Gitter chat](https://badges.gitter.im/woothemes/FlexSlider.png)](https://gitter.im/woothemes/FlexSlider)
 
-# FlexSlider 2.7.0
+# FlexSlider 2.7.1
 http://www.woothemes.com/flexslider/ - Copyright (c) 2015 WooThemes
 
 ## Releases
@@ -19,6 +19,10 @@ To keep up to date with how FlexSlider's development roadmap looks, please see o
 
 ## Updates
 
+** Version 2.7.1 **
+
+** RTL fixes for Firefox browser.
+
 ** Version 2.7.0 **
 
 ** Fixes resize method call for orientationchange. Adds RTL feature - param "rtl" added. **
@@ -211,3 +215,7 @@ Boolean. Whether or not you'd like FlexSlider to initialize as usual if only one
 ### rtl: *{new}*
 Boolean. False by default. Supports RTL functionality in the slider.
 *Note: you must add `style="direction:rtl"` to your container div in order for this to work.*
+
+### isFirefox: *{new}*
+Boolean. False by default. Set to true if the Firefox browser is in use.
+*Note: used for RTL compatibility logic.*

bower.json

@@ -1,6 +1,6 @@
 {
  "name": "flexslider",
- "version": "2.7.0",
+ "version": "2.7.1",
  "homepage": "https://github.com/woocommerce/FlexSlider",
  "authors": [
  "Automattic <[email protected]>"

changelog.txt

@@ -45,4 +45,8 @@ FLEXSLIDER CHANGELOG
 2018.02.01 - Version 2.7.0
 * Fixes resize method call for orientationchange.
 * Adds RTL feature - param "rtl" added.
-* Adds RTL demo's.
+* Adds RTL demo's.
+
+2018.06.15 - Version 2.7.1
+* Firefox RTL fixes.
+* Adds "isFirefox" param.

demo/js/jquery.flexslider.js

@@ -15,8 +15,8 @@
  // making variables public
 
  //if rtl value was not passed and html is in rtl..enable it by default.
-  if(typeof options.rtl=='undefined' && $('html').attr('dir')=='rtl'){
-  options.rtl=true;
+  if(typeof options.rtl=='undefined' && $('html').attr('dir')=='rtl'){
+  options.rtl=true;
  }
  slider.vars = $.extend({}, $.flexslider.defaults, options);
 
@@ -177,14 +177,14 @@
  e.preventDefault();
  var $slide = $(this),
  target = $slide.index();
-  var posFromX;
+  var posFromX;
  if(slider.vars.rtl){
-  posFromX = -1*($slide.offset().right - $(slider).scrollLeft()); // Find position of slide relative to right of slider container
-  }
-  else
-  {
-  posFromX = $slide.offset().left - $(slider).scrollLeft(); // Find position of slide relative to left of slider container
-  }
+  posFromX = -1*($slide.offset().right - $(slider).scrollLeft()); // Find position of slide relative to right of slider container
+  }
+  else
+  {
+  posFromX = $slide.offset().left - $(slider).scrollLeft(); // Find position of slide relative to left of slider container
+  }
  if( posFromX <= 0 && $slide.hasClass( namespace + 'active-slide' ) ) {
  slider.flexAnimate(slider.getTarget("prev"), true);
  } else if (!$(slider.vars.asNavFor).data('flexslider').animating && !$slide.hasClass(namespace + "active-slide")) {
@@ -895,7 +895,11 @@
  }());
 
  if (slider.transitions) {
- target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + (parseInt(target)+'px') + ",0,0)";
+ if (slider.isFirefox) {
+ target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + (parseInt(target)+'px') + ",0,0)";
+ } else {
+ target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + ((slider.vars.rtl?-1:1)*parseInt(target)+'px') + ",0,0)";
+ }
  dur = (dur !== undefined) ? (dur/1000) + "s" : "0s";
  slider.container.css("-" + slider.pfx + "-transition-duration", dur);
  slider.container.css("transition-duration", dur);
@@ -951,7 +955,12 @@
  setTimeout(function(){
  slider.doMath();
  if(slider.vars.rtl){
+ if (slider.isFirefox) {
  slider.newSlides.css({"width": slider.computedW, "marginRight" : slider.computedM, "float": "right", "display": "block"});
+ } else {
+ slider.newSlides.css({"width": slider.computedW, "marginRight" : slider.computedM, "float": "left", "display": "block"});
+ }
+
  }
  else{
  slider.newSlides.css({"width": slider.computedW, "marginRight" : slider.computedM, "float": "left", "display": "block"});
@@ -1141,7 +1150,7 @@
  // Usability features
  pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
  pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
- pauseInvisible: true,  //{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage.
+ pauseInvisible: true,  //{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage.
  useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
  touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
  video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
@@ -1186,7 +1195,7 @@
  added: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is added
  removed: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is removed
  init: function() {}, //{NEW} Callback: function(slider) - Fires after the slider is initially setup
- rtl: false //{NEW} Boolean: Whether or not to enable RTL mode
+ rtl: false //{NEW} Boolean: Whether or not to enable RTL mode
  };
 
  //FlexSlider: Plugin Function

jquery.flexslider.js

@@ -15,8 +15,8 @@
  // making variables public
 
  //if rtl value was not passed and html is in rtl..enable it by default.
-  if(typeof options.rtl=='undefined' && $('html').attr('dir')=='rtl'){
-  options.rtl=true;
+  if(typeof options.rtl=='undefined' && $('html').attr('dir')=='rtl'){
+  options.rtl=true;
  }
  slider.vars = $.extend({}, $.flexslider.defaults, options);
 
@@ -177,14 +177,14 @@
  e.preventDefault();
  var $slide = $(this),
  target = $slide.index();
-  var posFromX;
+  var posFromX;
  if(slider.vars.rtl){
-  posFromX = -1*($slide.offset().right - $(slider).scrollLeft()); // Find position of slide relative to right of slider container
-  }
-  else
-  {
-  posFromX = $slide.offset().left - $(slider).scrollLeft(); // Find position of slide relative to left of slider container
-  }
+  posFromX = -1*($slide.offset().right - $(slider).scrollLeft()); // Find position of slide relative to right of slider container
+  }
+  else
+  {
+  posFromX = $slide.offset().left - $(slider).scrollLeft(); // Find position of slide relative to left of slider container
+  }
  if( posFromX <= 0 && $slide.hasClass( namespace + 'active-slide' ) ) {
  slider.flexAnimate(slider.getTarget("prev"), true);
  } else if (!$(slider.vars.asNavFor).data('flexslider').animating && !$slide.hasClass(namespace + "active-slide")) {
@@ -895,7 +895,11 @@
  }());
 
  if (slider.transitions) {
- target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + (parseInt(target)+'px') + ",0,0)";
+ if (slider.isFirefox) {
+ target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + (parseInt(target)+'px') + ",0,0)";
+ } else {
+ target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + ((slider.vars.rtl?-1:1)*parseInt(target)+'px') + ",0,0)";
+ }
  dur = (dur !== undefined) ? (dur/1000) + "s" : "0s";
  slider.container.css("-" + slider.pfx + "-transition-duration", dur);
  slider.container.css("transition-duration", dur);
@@ -951,7 +955,12 @@
  setTimeout(function(){
  slider.doMath();
  if(slider.vars.rtl){
+ if (slider.isFirefox) {
  slider.newSlides.css({"width": slider.computedW, "marginRight" : slider.computedM, "float": "right", "display": "block"});
+ } else {
+ slider.newSlides.css({"width": slider.computedW, "marginRight" : slider.computedM, "float": "left", "display": "block"});
+ }
+
  }
  else{
  slider.newSlides.css({"width": slider.computedW, "marginRight" : slider.computedM, "float": "left", "display": "block"});
@@ -1141,7 +1150,7 @@
  // Usability features
  pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
  pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
- pauseInvisible: true,  //{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage.
+ pauseInvisible: true,  //{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage.
  useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available
  touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices
  video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches
@@ -1186,7 +1195,7 @@
  added: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is added
  removed: function(){}, //{NEW} Callback: function(slider) - Fires after a slide is removed
  init: function() {}, //{NEW} Callback: function(slider) - Fires after the slider is initially setup
- rtl: false //{NEW} Boolean: Whether or not to enable RTL mode
+ rtl: false //{NEW} Boolean: Whether or not to enable RTL mode
  };
 
  //FlexSlider: Plugin Function

package.json

@@ -1,6 +1,6 @@
 {
  "name": "flexslider",
- "version": "2.7.0",
+ "version": "2.7.1",
  "description": "An awesome, fully responsive jQuery slider toolkit.",
  "main": "jquery.flexslider.js",
  "scripts": {