Merge pull request #1722 from woocommerce/ff_rtl_fixes

Ff rtl fixes
woocommerce · Jun 15, 2018 · 53570ee · 53570ee
2 parents 91e323d + 9490185
commit 53570ee
Show file tree

Hide file tree

Showing 15 changed files with 171 additions and 32 deletions.
diff --git a/README.md b/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.*
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "flexslider",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "homepage": "https://github.com/woocommerce/FlexSlider",
   "authors": [
     "Automattic <jeff@woothemes.com>"

diff --git a/changelog.txt b/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.
diff --git a/css/theme.less b/css/theme.less
@@ -38,6 +38,14 @@
   }
 }
 
+@-moz-document url-prefix() {
+  .loading { 
+    .flex-viewport {
+      max-height: none;
+    }
+  }
+} 
+
 .carousel li {
 
   margin-right: 5px;

diff --git a/demo/css/flexslider-rtl-min.css b/demo/css/flexslider-rtl-min.css
@@ -0,0 +1,11 @@
+/*
+ * jQuery FlexSlider v2.7.1
+ * http://www.woothemes.com/flexslider/
+ *
+ * Copyright 2012 WooThemes
+ * Free to use under the GPLv2 and later license.
+ * http://www.gnu.org/licenses/gpl-2.0.html
+ *
+ * Contributing author: Tyler Smith (@mbmufffin)
+ *
+ */.flexslider{direction:rtl}.carousel li{margin-right:5px}.flex-direction-nav{*height:0}.flex-direction-nav a:before{content:'\f002'}.flex-direction-nav a.flex-next:before{content:'\f001'}.flex-direction-nav .flex-prev{left:auto;right:-50px}.flex-direction-nav .flex-next{right:auto;left:-50px;text-align:left}.flexslider:hover .flex-direction-nav .flex-prev{opacity:0.7;left:auto;right:10px}.flexslider:hover .flex-direction-nav .flex-next{opacity:0.7;right:auto;left:10px}.flex-pauseplay a{left:auto;right:10px}@media screen and (max-width: 860px){.flex-direction-nav .flex-prev{left:auto;right:10px}.flex-direction-nav .flex-next{right:auto;left:10px}}
diff --git a/demo/css/flexslider-rtl.css b/demo/css/flexslider-rtl.css
@@ -0,0 +1,75 @@
+/*
+ * jQuery FlexSlider v2.7.1
+ * http://www.woothemes.com/flexslider/
+ *
+ * Copyright 2012 WooThemes
+ * Free to use under the GPLv2 and later license.
+ * http://www.gnu.org/licenses/gpl-2.0.html
+ *
+ * Contributing author: Tyler Smith (@mbmufffin)
+ *
+ */
+/* ====================================================================================================================
+ * FONT-FACE
+ * ====================================================================================================================*/
+
+/* ====================================================================================================================
+ * RESETS
+ * ====================================================================================================================*/
+
+/* ====================================================================================================================
+ * BASE STYLES
+ * ====================================================================================================================*/
+.flexslider {
+	direction:rtl;
+}
+/* ====================================================================================================================
+ * DEFAULT THEME
+ * ====================================================================================================================*/
+
+.carousel li {
+  margin-right: 5px;
+}
+.flex-direction-nav {
+  *height: 0;
+}
+
+.flex-direction-nav a:before {
+  content: '\f002';
+}
+.flex-direction-nav a.flex-next:before {
+  content: '\f001';
+}
+.flex-direction-nav .flex-prev {
+  left: auto; right: -50px;
+}
+.flex-direction-nav .flex-next {
+  right: auto; left: -50px;
+  text-align: left;
+}
+.flexslider:hover .flex-direction-nav .flex-prev {
+  opacity: 0.7;
+  left: auto; right: 10px;
+}
+
+.flexslider:hover .flex-direction-nav .flex-next {
+  opacity: 0.7;
+  right: auto; left: 10px;
+}
+
+
+.flex-pauseplay a {
+  left: auto; right: 10px;
+}
+
+/* ====================================================================================================================
+ * RESPONSIVE
+ * ====================================================================================================================*/
+@media screen and (max-width: 860px) {
+  .flex-direction-nav .flex-prev {
+    left: auto; right: 10px;
+  }
+  .flex-direction-nav .flex-next {
+    right: auto; left: 10px;
+  }
+}
diff --git a/demo/css/flexslider.css b/demo/css/flexslider.css
@@ -1,5 +1,5 @@
 /*
- * jQuery FlexSlider v2.7.0
+ * jQuery FlexSlider v2.7.1
  * http://www.woothemes.com/flexslider/
  *
  * Copyright 2012 WooThemes
@@ -104,6 +104,11 @@ html[xmlns] .flexslider .slides {
 .loading .flex-viewport {
   max-height: 300px;
 }
+@-moz-document url-prefix() {
+  .loading .flex-viewport {
+    max-height: none;
+  }
+}
 .carousel li {
   margin-right: 5px;
 }

diff --git a/demo/js/jquery.flexslider.js b/demo/js/jquery.flexslider.js
@@ -1,5 +1,5 @@
 /*
- * jQuery FlexSlider v2.7.0
+ * jQuery FlexSlider v2.7.1
  * Copyright 2012 WooThemes
  * Contributing Author: Tyler Smith
  */
@@ -75,6 +75,7 @@
           }
           return false;
         }());
+        slider.isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
         slider.ensureAnimationEnd = '';
         // CONTROLSCONTAINER:
         if (slider.vars.controlsContainer !== "") slider.controlsContainer = $(slider.vars.controlsContainer).length > 0 && $(slider.vars.controlsContainer);
@@ -894,7 +895,11 @@
           }());
 
       if (slider.transitions) {
-        target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + ((slider.vars.rtl?-1:1)*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);
@@ -950,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"});
@@ -996,6 +1006,7 @@
           maxItems = slider.vars.maxItems;
 
       slider.w = (slider.viewport===undefined) ? slider.width() : slider.viewport.width();
+      if (slider.isFirefox) { slider.w = slider.width(); }
       slider.h = slide.height();
       slider.boxPadding = slide.outerWidth() - slide.width();
 
@@ -1173,6 +1184,9 @@
     move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
     allowOneSlide: true,           //{NEW} Boolean: Whether or not to allow a slider comprised of a single slide
 
+    // Browser Specific
+    isFirefox: false,             // {NEW} Boolean: Set to true when Firefox is the browser used.
+
     // Callback API
     start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
     before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation

diff --git a/flexslider-rtl-min.css b/flexslider-rtl-min.css
@@ -1,5 +1,5 @@
 /*
- * jQuery FlexSlider v2.7.0
+ * jQuery FlexSlider v2.7.1
  * http://www.woothemes.com/flexslider/
  *
  * Copyright 2012 WooThemes
@@ -8,4 +8,4 @@
  *
  * Contributing author: Tyler Smith (@mbmufffin)
  *
- */.flexslider{direction:rtl}.carousel li{margin-right:5px}.flex-direction-nav{*height:0}.flex-direction-nav a:before{content:'\f002'}.flex-direction-nav a.flex-next:before{content:'\f001'}.flex-direction-nav .flex-prev{left:auto;right:-50px}.flex-direction-nav .flex-next{right:auto;left:-50px;text-align:left}.flexslider:hover .flex-direction-nav .flex-prev{opacity:0.7;left:auto;right:10px}.flexslider:hover .flex-direction-nav .flex-next{opacity:0.7;right:auto;left:10px}.flex-pauseplay a{left:auto;right:10px}.flex-control-thumbs li{float:right}@media screen and (max-width: 860px){.flex-direction-nav .flex-prev{left:auto;right:10px}.flex-direction-nav .flex-next{right:auto;left:10px}}
+ */.flexslider{direction:rtl}.carousel li{margin-right:5px}.flex-direction-nav{*height:0}.flex-direction-nav a:before{content:'\f002'}.flex-direction-nav a.flex-next:before{content:'\f001'}.flex-direction-nav .flex-prev{left:auto;right:-50px}.flex-direction-nav .flex-next{right:auto;left:-50px;text-align:left}.flexslider:hover .flex-direction-nav .flex-prev{opacity:0.7;left:auto;right:10px}.flexslider:hover .flex-direction-nav .flex-next{opacity:0.7;right:auto;left:10px}.flex-pauseplay a{left:auto;right:10px}@media screen and (max-width: 860px){.flex-direction-nav .flex-prev{left:auto;right:10px}.flex-direction-nav .flex-next{right:auto;left:10px}}
diff --git a/flexslider-rtl.css b/flexslider-rtl.css
@@ -1,5 +1,5 @@
 /*
- * jQuery FlexSlider v2.7.0
+ * jQuery FlexSlider v2.7.1
  * http://www.woothemes.com/flexslider/
  *
  * Copyright 2012 WooThemes
@@ -62,11 +62,6 @@
   left: auto; right: 10px;
 }
 
-
-.flex-control-thumbs li {
-  float: right;
-}
-
 /* ====================================================================================================================
  * RESPONSIVE
  * ====================================================================================================================*/

diff --git a/flexslider.css b/flexslider.css
@@ -1,5 +1,5 @@
 /*
- * jQuery FlexSlider v2.7.0
+ * jQuery FlexSlider v2.7.1
  * http://www.woothemes.com/flexslider/
  *
  * Copyright 2012 WooThemes
@@ -104,6 +104,11 @@ html[xmlns] .flexslider .slides {
 .loading .flex-viewport {
   max-height: 300px;
 }
+@-moz-document url-prefix() {
+  .loading .flex-viewport {
+    max-height: none;
+  }
+}
 .carousel li {
   margin-right: 5px;
 }

diff --git a/flexslider.less b/flexslider.less
@@ -1,5 +1,5 @@
 /*
- * jQuery FlexSlider v2.7.0
+ * jQuery FlexSlider v2.7.1
  * http://www.woothemes.com/flexslider/
  *
  * Copyright 2012 WooThemes

diff --git a/jquery.flexslider-min.js b/jquery.flexslider-min.js
diff --git a/jquery.flexslider.js b/jquery.flexslider.js
@@ -1,5 +1,5 @@
 /*
- * jQuery FlexSlider v2.7.0
+ * jQuery FlexSlider v2.7.1
  * Copyright 2012 WooThemes
  * Contributing Author: Tyler Smith
  */
@@ -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);
 
@@ -75,6 +75,7 @@
           }
           return false;
         }());
+        slider.isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
         slider.ensureAnimationEnd = '';
         // CONTROLSCONTAINER:
         if (slider.vars.controlsContainer !== "") slider.controlsContainer = $(slider.vars.controlsContainer).length > 0 && $(slider.vars.controlsContainer);
@@ -176,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")) {
@@ -894,7 +895,11 @@
           }());
 
       if (slider.transitions) {
-        target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + ((slider.vars.rtl?-1:1)*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);
@@ -950,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"});
@@ -996,6 +1006,7 @@
           maxItems = slider.vars.maxItems;
 
       slider.w = (slider.viewport===undefined) ? slider.width() : slider.viewport.width();
+      if (slider.isFirefox) { slider.w = slider.width(); }
       slider.h = slide.height();
       slider.boxPadding = slide.outerWidth() - slide.width();
 
@@ -1139,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
@@ -1173,6 +1184,9 @@
     move: 0,                        //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.
     allowOneSlide: true,           //{NEW} Boolean: Whether or not to allow a slider comprised of a single slide
 
+    // Browser Specific
+    isFirefox: false,             // {NEW} Boolean: Set to true when Firefox is the browser used.
+
     // Callback API
     start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
     before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animation
@@ -1181,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