From 1c451aa09384728ee840af641655e69a49ba5fd6 Mon Sep 17 00:00:00 2001 From: Atanas Penchev Date: Tue, 28 Feb 2023 00:08:32 +0200 Subject: [PATCH 01/10] FlexSlider always uses CSS3 transitions for "slide" animations jQuery transitions easing method are replicated via CSS3 transition-timing-function --- .../legacy/js/flexslider/jquery.flexslider.js | 69 ++++++++++++++----- 1 file changed, 53 insertions(+), 16 deletions(-) diff --git a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js index 852a326f63f..ba0d5be82f0 100755 --- a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js +++ b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js @@ -8,6 +8,46 @@ var focused = true; + // When wishing to use jQuery transitions, we replicate them with CSS3's transition-timing-function instead + // Default options provided by jQuery are "swing" and "linear"; jQuery easing plugin methods: https://easings.net/ + // We do NOT support easeInElastic, easeOutElastic, easeInOutElastic, easeInBounce, easeOutBounce, and easeInOutBounce + var easings = { + swing: 'cubic-bezier(.02, .01, .47, 1)', // https://stackoverflow.com/a/9245729 + linear: 'linear', + + easeInQuad: 'cubic-bezier(0.11, 0, 0.5, 0)', // https://easings.net/#easeInQuad + easeOutQuad: 'cubic-bezier(0.5, 1, 0.89, 1)', // https://easings.net/#easeOutQuad + easeInOutQuad: 'cubic-bezier(0.45, 0, 0.55, 1)', // https://easings.net/#easeInOutQuad + + easeInCubic: 'cubic-bezier(0.32, 0, 0.67, 0)', // https://easings.net/#easeInCubic + easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)', // https://easings.net/#easeOutCubic + easeInOutCubic: 'cubic-bezier(0.65, 0, 0.35, 1)', // https://easings.net/#easeInOutCubic + + easeInQuart: 'cubic-bezier(0.5, 0, 0.75, 0)', // https://easings.net/#easeInQuart + easeOutQuart: 'cubic-bezier(0.25, 1, 0.5, 1)', // https://easings.net/#easeOutQuart + easeInOutQuart: 'cubic-bezier(0.76, 0, 0.24, 1)', // https://easings.net/#easeInOutQuart + + easeInQuint: 'cubic-bezier(0.64, 0, 0.78, 0)', // https://easings.net/#easeInQuint + easeOutQuint: 'cubic-bezier(0.22, 1, 0.36, 1)', // https://easings.net/#easeOutQuint + easeInOutQuint: 'cubic-bezier(0.83, 0, 0.17, 1)', // https://easings.net/#easeInOutQuint + + easeInSine: 'cubic-bezier(0.12, 0, 0.39, 0)', // https://easings.net/#easeInSine + easeOutSine: 'cubic-bezier(0.61, 1, 0.88, 1)', // https://easings.net/#easeOutSine + easeInOutSine: 'cubic-bezier(0.37, 0, 0.63, 1)', // https://easings.net/#easeInOutSine + + easeInExpo: 'cubic-bezier(0.7, 0, 0.84, 0)', // https://easings.net/#easeInExpo + easeOutExpo: 'cubic-bezier(0.16, 1, 0.3, 1)', // https://easings.net/#easeOutExpo + easeInOutExpo: 'cubic-bezier(0.87, 0, 0.13, 1)', // https://easings.net/#easeInOutExpo + + easeInCirc: 'cubic-bezier(0.55, 0, 1, 0.45)', // https://easings.net/#easeInCirc + easeOutCirc: 'cubic-bezier(0, 0.55, 0.45, 1)', // https://easings.net/#easeOutCirc + easeInOutCirc: 'cubic-bezier(0.85, 0, 0.15, 1)', // https://easings.net/#easeInOutCirc + + easeInBack: 'cubic-bezier(0.36, 0, 0.66, -0.56)', // https://easings.net/#easeInBack + easeOutBack: 'cubic-bezier(0.34, 1.56, 0.64, 1)', // https://easings.net/#easeOutBack + easeInOutBack: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)' // https://easings.net/#easeInOutBack + }; + //FlexSlider: Object Instance $.flexslider = function(el, options) { var slider = $(el); @@ -26,6 +66,7 @@ eventType = "click touchend keyup", watchedEvent = "", watchedEventClearTimer, + easing = easings[slider.vars.easing], vertical = slider.vars.direction === "vertical", reverse = slider.vars.reverse, carousel = (slider.vars.itemWidth > 0), @@ -62,8 +103,8 @@ slider.started = false; slider.startTimeout = null; // TOUCH/USECSS: - slider.transitions = !slider.vars.video && !fade && slider.vars.useCSS; - if (slider.transitions) slider.prop = "transform"; + slider.transform = !slider.vars.video && !fade && slider.vars.useCSS; + if (slider.transform) slider.prop = "transform"; slider.isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; slider.ensureAnimationEnd = ''; // CONTROLSCONTAINER: @@ -452,7 +493,7 @@ if ( ! scrolling || Number( new Date() ) - startT > fxms ) { e.preventDefault(); - if (!fade && slider.transitions) { + if (!fade && slider.transform) { if (!slider.vars.animationLoop) { dx = dx/((slider.currentSlide === 0 && dx < 0 || slider.currentSlide === slider.last && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1); } @@ -640,11 +681,12 @@ slideString = (reverse) ? ((slider.count - 1) - target + slider.cloneOffset) * dimension : (target + slider.cloneOffset) * dimension; } slider.setProps(slideString, "", slider.vars.animationSpeed); - if (slider.transitions) { + if (slider.transform) { if (!slider.vars.animationLoop || !slider.atEnd) { slider.animating = false; slider.currentSlide = slider.animatingTo; } + } // Unbind previous transitionEnd events and re-bind new transitionEnd event slider.container.off("transitionend"); @@ -658,12 +700,6 @@ slider.ensureAnimationEnd = setTimeout(function() { slider.wrapup(dimension); }, slider.vars.animationSpeed + 100); - - } else { - slider.container.animate(slider.args, slider.vars.animationSpeed, slider.vars.easing, function(){ - slider.wrapup(dimension); - }); - } } else { // FADE: if (!touch) { slider.slides.eq(slider.currentSlide).css({"zIndex": 1}).animate({"opacity": 0}, slider.vars.animationSpeed, slider.vars.easing); @@ -767,16 +803,17 @@ return (posCalc * ((slider.vars.rtl)?1:-1)) + "px"; }()); - if (slider.transitions) { + if (slider.transform) { target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + (parseInt(target)+'px') + ",0,0)"; + } else { + // When wishing to use jQuery transitions, we replicate them with CSS3's transition-timing-function instead + slider.container.css("transition-timing-function", easing); + } dur = (dur !== undefined) ? (dur/1000) + "s" : "0s"; slider.container.css("transition-duration", dur); - } slider.args[slider.prop] = target; - if (slider.transitions || dur === undefined) { slider.container.css(slider.args); } - - slider.container.css('transform',target); + slider.container.css(slider.args); }; slider.setup = function(type) { @@ -996,7 +1033,7 @@ namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril animation: "fade", //String: Select your animation type, "fade" or "slide" - easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported! + easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. Most jQuery easing plugin methods are supported! direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical" reverse: false, //{NEW} Boolean: Reverse the animation direction animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end From 72695598d1fc2a70ab22c6b75f92a6ef687bf587 Mon Sep 17 00:00:00 2001 From: Atanas Penchev Date: Tue, 28 Feb 2023 00:29:52 +0200 Subject: [PATCH 02/10] Changelog --- plugins/woocommerce/changelog/flexslider-css3-transitions | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 plugins/woocommerce/changelog/flexslider-css3-transitions diff --git a/plugins/woocommerce/changelog/flexslider-css3-transitions b/plugins/woocommerce/changelog/flexslider-css3-transitions new file mode 100644 index 00000000000..8dd6d32af2a --- /dev/null +++ b/plugins/woocommerce/changelog/flexslider-css3-transitions @@ -0,0 +1,4 @@ +Significance: major +Type: update + +FlexSlider always uses CSS3 transitions for "slide" animations. From caead0385f3d1e9932dad57984d911fd6c984b39 Mon Sep 17 00:00:00 2001 From: Atanas Penchev Date: Sat, 4 Mar 2023 20:19:12 +0200 Subject: [PATCH 03/10] Add fallback easing --- .../client/legacy/js/flexslider/jquery.flexslider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js index ba0d5be82f0..2cdc4acba55 100755 --- a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js +++ b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js @@ -66,7 +66,7 @@ eventType = "click touchend keyup", watchedEvent = "", watchedEventClearTimer, - easing = easings[slider.vars.easing], + easing = easings[slider.vars.easing] || "ease", vertical = slider.vars.direction === "vertical", reverse = slider.vars.reverse, carousel = (slider.vars.itemWidth > 0), From 8caba33649f4ffe80a4075f67c7a86af41757cbd Mon Sep 17 00:00:00 2001 From: Atanas Penchev Date: Sat, 4 Mar 2023 20:22:57 +0200 Subject: [PATCH 04/10] Whitespace --- .../client/legacy/js/flexslider/jquery.flexslider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js index 2cdc4acba55..3d96abe097a 100755 --- a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js +++ b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js @@ -12,7 +12,7 @@ // Default options provided by jQuery are "swing" and "linear"; jQuery easing plugin methods: https://easings.net/ // We do NOT support easeInElastic, easeOutElastic, easeInOutElastic, easeInBounce, easeOutBounce, and easeInOutBounce var easings = { - swing: 'cubic-bezier(.02, .01, .47, 1)', // https://stackoverflow.com/a/9245729 + swing: 'cubic-bezier(.02, .01, .47, 1)', // https://stackoverflow.com/a/9245729 linear: 'linear', easeInQuad: 'cubic-bezier(0.11, 0, 0.5, 0)', // https://easings.net/#easeInQuad From 75a2615f5a53b5e7b1ea376926a0448335583ab5 Mon Sep 17 00:00:00 2001 From: Atanas Penchev Date: Sat, 4 Mar 2023 20:51:14 +0200 Subject: [PATCH 05/10] Add missing jQuery easing methods --- .../client/legacy/js/flexslider/jquery.flexslider.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js index 3d96abe097a..ea0f390ac26 100755 --- a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js +++ b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js @@ -48,6 +48,9 @@ easeInOutBack: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)' // https://easings.net/#easeInOutBack }; + easings['jswing'] = easings['swing']; // https://github.com/gdsmith/jquery.easing/blob/v1.4.0/jquery.easing.js#L22 + easings['def'] = easings['easeOutQuad']; // https://github.com/gdsmith/jquery.easing/blob/v1.4.0/jquery.easing.js#L52 + //FlexSlider: Object Instance $.flexslider = function(el, options) { var slider = $(el); From 87c40e7715a78f6c9eb27581a7e8fe9838731b77 Mon Sep 17 00:00:00 2001 From: Atanas Penchev Date: Sun, 5 Mar 2023 20:16:25 +0200 Subject: [PATCH 06/10] Correct 'jswing' easing --- .../client/legacy/js/flexslider/jquery.flexslider.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js index ea0f390ac26..25c6098459d 100755 --- a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js +++ b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js @@ -48,8 +48,8 @@ easeInOutBack: 'cubic-bezier(0.68, -0.6, 0.32, 1.6)' // https://easings.net/#easeInOutBack }; - easings['jswing'] = easings['swing']; // https://github.com/gdsmith/jquery.easing/blob/v1.4.0/jquery.easing.js#L22 - easings['def'] = easings['easeOutQuad']; // https://github.com/gdsmith/jquery.easing/blob/v1.4.0/jquery.easing.js#L52 + // Preserve the original jQuery "swing" easing as "jswing" + easings['jswing'] = easings['swing']; //FlexSlider: Object Instance $.flexslider = function(el, options) { From 8e64856bd497a40bcbb975347ca25a3cb63e7d55 Mon Sep 17 00:00:00 2001 From: Atanas Penchev Date: Mon, 6 Mar 2023 13:25:48 +0200 Subject: [PATCH 07/10] Element.animate() instead of CSS3 transitions --- .../legacy/js/flexslider/jquery.flexslider.js | 33 ++++++++++++------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js index 25c6098459d..e907b50aa35 100755 --- a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js +++ b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js @@ -106,8 +106,8 @@ slider.started = false; slider.startTimeout = null; // TOUCH/USECSS: - slider.transform = !slider.vars.video && !fade && slider.vars.useCSS; - if (slider.transform) slider.prop = "transform"; + slider.transitions = !slider.vars.video && !fade && slider.vars.useCSS; + if (slider.transitions) slider.prop = "transform"; slider.isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1; slider.ensureAnimationEnd = ''; // CONTROLSCONTAINER: @@ -496,7 +496,7 @@ if ( ! scrolling || Number( new Date() ) - startT > fxms ) { e.preventDefault(); - if (!fade && slider.transform) { + if (!fade && slider.transitions) { if (!slider.vars.animationLoop) { dx = dx/((slider.currentSlide === 0 && dx < 0 || slider.currentSlide === slider.last && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1); } @@ -684,12 +684,11 @@ slideString = (reverse) ? ((slider.count - 1) - target + slider.cloneOffset) * dimension : (target + slider.cloneOffset) * dimension; } slider.setProps(slideString, "", slider.vars.animationSpeed); - if (slider.transform) { + if (slider.transitions) { if (!slider.vars.animationLoop || !slider.atEnd) { slider.animating = false; slider.currentSlide = slider.animatingTo; } - } // Unbind previous transitionEnd events and re-bind new transitionEnd event slider.container.off("transitionend"); @@ -703,6 +702,19 @@ slider.ensureAnimationEnd = setTimeout(function() { slider.wrapup(dimension); }, slider.vars.animationSpeed + 100); + + } else { + var keyframes = {}; + keyframes[slider.prop] = [ + slider.container.css(slider.prop), + slider.args[slider.prop] + ]; + + slider.container[0].animate(keyframes, { duration: slider.vars.animationSpeed, easing: easing }).onfinish = function() { + slider.container.css(slider.args); + slider.wrapup(dimension); + }; + } } else { // FADE: if (!touch) { slider.slides.eq(slider.currentSlide).css({"zIndex": 1}).animate({"opacity": 0}, slider.vars.animationSpeed, slider.vars.easing); @@ -806,17 +818,16 @@ return (posCalc * ((slider.vars.rtl)?1:-1)) + "px"; }()); - if (slider.transform) { + if (slider.transitions) { target = (vertical) ? "translate3d(0," + target + ",0)" : "translate3d(" + (parseInt(target)+'px') + ",0,0)"; - } else { - // When wishing to use jQuery transitions, we replicate them with CSS3's transition-timing-function instead - slider.container.css("transition-timing-function", easing); - } dur = (dur !== undefined) ? (dur/1000) + "s" : "0s"; slider.container.css("transition-duration", dur); + } slider.args[slider.prop] = target; - slider.container.css(slider.args); + if (slider.transitions || dur === undefined) { slider.container.css(slider.args); } + + slider.container.css('transform',target); }; slider.setup = function(type) { From 9bc08a383e4973b7ff0d4c783d971ac650aafc40 Mon Sep 17 00:00:00 2001 From: Atanas Penchev Date: Tue, 7 Mar 2023 21:48:23 +0200 Subject: [PATCH 08/10] Correct changelog --- plugins/woocommerce/changelog/flexslider-css3-transitions | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/woocommerce/changelog/flexslider-css3-transitions b/plugins/woocommerce/changelog/flexslider-css3-transitions index 8dd6d32af2a..1ac28ac7d2b 100644 --- a/plugins/woocommerce/changelog/flexslider-css3-transitions +++ b/plugins/woocommerce/changelog/flexslider-css3-transitions @@ -1,4 +1,4 @@ Significance: major Type: update -FlexSlider always uses CSS3 transitions for "slide" animations. +FlexSlider always uses Web Animations API for "slide" animations. From 65e1d170ba421748ab5d7dd60fb760e62122d510 Mon Sep 17 00:00:00 2001 From: Atanas Penchev Date: Fri, 10 Mar 2023 13:16:18 +0200 Subject: [PATCH 09/10] Handle multiple slider containers --- .../legacy/js/flexslider/jquery.flexslider.js | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js index e907b50aa35..a175fdfa61b 100755 --- a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js +++ b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js @@ -704,16 +704,19 @@ }, slider.vars.animationSpeed + 100); } else { - var keyframes = {}; - keyframes[slider.prop] = [ - slider.container.css(slider.prop), - slider.args[slider.prop] - ]; + slider.container.each(function() { + var container = this; + var keyframes = {}; + keyframes[slider.prop] = [ + window.getComputedStyle(container)[slider.prop], + slider.args[slider.prop] + ]; - slider.container[0].animate(keyframes, { duration: slider.vars.animationSpeed, easing: easing }).onfinish = function() { - slider.container.css(slider.args); - slider.wrapup(dimension); - }; + container.animate(keyframes, { duration: slider.vars.animationSpeed, easing: easing }).onfinish = function() { + container.style[slider.prop] = slider.args[slider.prop]; + slider.wrapup(dimension); + }; + }); } } else { // FADE: if (!touch) { From 6db4d6b68a16ec80544e1c542e3ebf363d8aca48 Mon Sep 17 00:00:00 2001 From: Atanas Penchev Date: Sat, 11 Mar 2023 03:36:23 +0200 Subject: [PATCH 10/10] Extract variable --- .../client/legacy/js/flexslider/jquery.flexslider.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js index a175fdfa61b..c1a941bf7ab 100755 --- a/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js +++ b/plugins/woocommerce/client/legacy/js/flexslider/jquery.flexslider.js @@ -704,16 +704,17 @@ }, slider.vars.animationSpeed + 100); } else { + var prop = slider.prop; slider.container.each(function() { var container = this; var keyframes = {}; - keyframes[slider.prop] = [ - window.getComputedStyle(container)[slider.prop], - slider.args[slider.prop] + keyframes[prop] = [ + window.getComputedStyle(container)[prop], + slider.args[prop] ]; container.animate(keyframes, { duration: slider.vars.animationSpeed, easing: easing }).onfinish = function() { - container.style[slider.prop] = slider.args[slider.prop]; + container.style[prop] = slider.args[prop]; slider.wrapup(dimension); }; });