fancoolo-fx 1.8.1 → 1.8.5

package/CHANGELOG.md

@@ -0,0 +1,74 @@
+# Fancoolo FX — Changelog
+
+## 1.8.3
+_(current release)_
+
+## 1.8.2
+- **Fix:** `textReveal` now detects containers with block-level children (divs, sections, forms) and only splits text-bearing elements (h1–h6, p, blockquote, etc.) — prevents breakage of interactive widgets like accordions, tabs, and sliders
+
+## 1.8.1
+- **Fix:** Removed `split.revert()` calls from `textReveal`, `typeWriter`, and `splitWords` — revert destroys JS state (event listeners, injected DOM) added after SplitText ran
+- **Fix:** `textReveal` resize re-splitting fully handled by `autoSplit`, no manual revert needed
+
+## 1.8.0
+- **Refactor:** `textReveal` uses native SplitText `autoSplit`, `mask: "lines"`, and `onSplit` — removes manual overflow wrappers and resize handler
+- **Refactor:** Responsive and reduced-motion handling via `gsap.matchMedia()` — animations auto-revert when conditions change
+- **Refactor:** Idempotent `init()` using persistent WeakSet — safe to call multiple times without double-animating
+- **Refactor:** Scrub effects (`tiltIn`, `parallax`, `drawSVG` scrub) routed through `buildScrollTrigger()` — now support debug markers and `fx-start-[...]` overrides
+- **Removed:** Manual resize listener, `_splitRegistry`, `document.fonts.ready` blocking — all handled natively by GSAP
+- **Enhancement:** `FX.refresh()` simplified to `ScrollTrigger.refresh()`
+
+## 1.7.1
+- **Fix:** FOUC prevention — all effects now use `autoAlpha` instead of `opacity`; elements start with `visibility:hidden` and are revealed by GSAP
+- **New:** WordPress plugin injects `visibility:hidden` CSS automatically in the head
+- **New:** Text-based effects set parent visibility before animating children to prevent flash
+- **Enhancement:** `clipUp`/`clipDown` now include `autoAlpha` for consistent FOUC handling
+
+## 1.7.0
+- **Fix:** Text-based effects (`textReveal`, `typeWriter`, `splitWords`) now re-split on browser resize — line breaks stay correct at every viewport width
+- **New:** SplitText is reverted after one-shot animations complete — text reflows naturally without extra DOM wrappers
+- **New:** `FX.refresh()` public method — manually re-split text after layout changes (sidebar toggle, font load)
+- **New:** Automatic debounced resize handler (200ms, width-only) for pending scroll-triggered text animations
+
+## 1.6.1
+- **Refactor:** Split plugin into namespaced classes under `inc/` with `FancooloFX` namespace
+  - `Settings.php`, `Frontend.php`, `Editor.php`, `Admin.php`, `AdminPage.php`, `SaveHandler.php`
+- **New:** Integrated dPlugins self-hoster update checker
+- Updated release workflow to use `rsync` + `.distignore` pattern
+
+## 1.6.0
+- **New:** Gutenberg inspector panel — "FX Animation" added to every block's sidebar
+  - Effect dropdown with all 15 effects
+  - Trigger toggle: Item (scroll) / Trigger (section) / Page (load)
+  - Duration, delay, ease, start position modifiers
+  - Parallax Y-shift and `drawSVG` scrub options
+  - Copy/Paste FX between blocks (sidebar + context menu)
+- **New:** Gutenberg integration toggle in plugin settings
+- Build workflow updated to compile editor assets on release
+
+## 1.5.0
+- **New:** 5 additional animation effects (fade-in, blur-in, clip-up, clip-down, slide-left/right, draw-svg, parallax, split-words, type-writer, tilt-in)
+- **New:** Plugin settings page with import/export
+
+## 1.3.0
+- **New:** Settings sidebar in the editor tab
+
+## 1.2.0
+- **New:** `tiltIn` 3D perspective effect (scrub-based)
+
+## 1.1.0
+- **Fix:** Syntax error — `stagger-all` block was outside `init()`
+
+## 1.0.2
+- **Fix:** `-st` scroll trigger
+
+## 1.0.1
+- Version bump
+
+## 1.0.0
+- Initial release
+- 5 animation effects (text-reveal, reveal, spin-reveal, bg-reveal, scale-in)
+- Page load, scroll trigger, and section trigger modes
+- Modifier classes for timing overrides
+- Custom JavaScript editor with CodeMirror
+- Built-in quick reference table

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fancoolo-fx",
-  "version": "1.8.1",
+  "version": "1.8.5",
   "description": "A class-driven GSAP animation wrapper for WordPress and static sites.",
   "main": "src/fx.js",
   "homepage": "https://krstivoja.github.io/fancoolo-fx/",

package/readme.txt

@@ -68,6 +68,9 @@ Yes. Use the `fx-start-[top center]` modifier class, or set `scrollStart` in the
 
 == Changelog ==
 
+= 1.8.2 =
+* Fix: textReveal now detects containers with block-level children (divs, sections, forms) and only splits text-bearing elements (h1-h6, p, blockquote, etc.) — prevents breakage of interactive widgets like accordions, tabs, and sliders
+
 = 1.8.1 =
 * Fix: Removed split.revert() calls from textReveal, typeWriter, and splitWords — revert destroys JS state (event listeners, injected DOM) added after SplitText ran
 * Fix: textReveal resize re-splitting fully handled by autoSplit, no manual revert needed

package/src/fx.js

@@ -164,14 +164,23 @@
 
     // ── Effects ──────────────────────────────────
 
-    function textReveal(el, opts) {
-        opts = opts || {};
-        var o = resolveOptions(el, 'textReveal', opts);
-        var isScroll = opts.trigger === 'scroll' || opts.scrollTrigger;
-
-        gsap.set(el, { visibility: 'inherit' });
+    // Exclude an element from TranslatePress's dynamic (DOM-change) re-translation.
+    // SplitText restructures text into line/word/char spans; TranslatePress's
+    // MutationObserver (trp-translate-dom-changes.js) sees those mutations and
+    // re-translates the fragments, racing with SplitText and flickering the text
+    // between languages. The server already renders the translated text, so the
+    // dynamic pass is redundant here. `data-no-dynamic-translation` is in
+    // TranslatePress's own skip-selector list; it's an inert data attribute when
+    // TranslatePress isn't present.
+    function markNoDynamicTranslation(el) {
+        if (el && el.setAttribute) {
+            el.setAttribute('data-no-dynamic-translation', '');
+        }
+    }
 
-        SplitText.create(el, {
+    function splitTextReveal(target, o, isScroll, triggerEl, opts) {
+        markNoDynamicTranslation(target);
+        SplitText.create(target, {
             type: 'lines',
             mask: 'lines',
             autoSplit: true,
@@ -186,7 +195,7 @@
                 };
 
                 if (isScroll) {
-                    tweenVars.scrollTrigger = buildScrollTrigger(el, opts.scrollTrigger || {});
+                    tweenVars.scrollTrigger = buildScrollTrigger(triggerEl, opts.scrollTrigger || {});
                 }
 
                 return gsap.from(self.lines, tweenVars);
@@ -194,6 +203,46 @@
         });
     }
 
+    // Block-level tags whose presence signals a container with interactive children.
+    // When these are found as direct children, SplitText is applied only to
+    // text-bearing siblings to avoid restructuring interactive widgets.
+    var CONTAINER_CHILD_TAGS = /^(DIV|SECTION|ARTICLE|ASIDE|NAV|HEADER|FOOTER|MAIN|FORM|TABLE|DETAILS|FIELDSET)$/;
+    var TEXT_CHILD_TAGS = /^(H[1-6]|P|BLOCKQUOTE|FIGCAPTION|PRE|LABEL)$/;
+
+    function textReveal(el, opts) {
+        opts = opts || {};
+        var o = resolveOptions(el, 'textReveal', opts);
+        var isScroll = opts.trigger === 'scroll' || opts.scrollTrigger;
+
+        gsap.set(el, { visibility: 'inherit' });
+
+        // If the element contains block-level children (divs, sections, etc.),
+        // only split text-bearing children to avoid breaking interactive widgets
+        // like accordions, tabs, or sliders inside the same container.
+        var hasBlockChild = false;
+        for (var c = 0; c < el.children.length; c++) {
+            if (CONTAINER_CHILD_TAGS.test(el.children[c].tagName)) {
+                hasBlockChild = true;
+                break;
+            }
+        }
+
+        if (hasBlockChild) {
+            var targets = [];
+            for (var t = 0; t < el.children.length; t++) {
+                if (TEXT_CHILD_TAGS.test(el.children[t].tagName)) {
+                    targets.push(el.children[t]);
+                }
+            }
+            targets.forEach(function (textEl) {
+                splitTextReveal(textEl, o, isScroll, el, opts);
+            });
+            return;
+        }
+
+        splitTextReveal(el, o, isScroll, el, opts);
+    }
+
     function reveal(el, opts) {
         opts = opts || {};
         var o = resolveOptions(el, 'reveal', opts);
@@ -377,6 +426,7 @@
         var o = resolveOptions(el, 'typeWriter', opts);
 
         gsap.set(el, { visibility: 'inherit' });
+        markNoDynamicTranslation(el);
         var split = new SplitText(el, { type: 'chars' });
         gsap.set(split.chars, { autoAlpha: 0 });
 
@@ -467,6 +517,7 @@
         var o = resolveOptions(el, 'splitWords', opts);
 
         gsap.set(el, { visibility: 'inherit' });
+        markNoDynamicTranslation(el);
         var split = new SplitText(el, { type: 'words' });
 
         var tweenVars = {
@@ -740,7 +791,22 @@
         if (pre.excludeSelectors !== undefined) config.excludeSelectors = pre.excludeSelectors;
     }
 
+    // Detect the TranslatePress translation editor. It loads the page inside an
+    // iframe with a `trp-edit-translation` URL param. FX must stand down there:
+    // SplitText fragments text into spans (the real string survives only in
+    // aria-label), and its autoSplit ResizeObserver fights TranslatePress's DOM
+    // rewriting — producing an endless re-split flicker and untranslatable blocks.
+    function isTranslationEditor() {
+        try {
+            return /[?&]trp-edit-translation=/.test(window.location.search);
+        } catch (e) {
+            return false;
+        }
+    }
+
     function boot() {
+        if (isTranslationEditor()) return;
+
         applyPreConfig();
 
         // Build media query from config — animations auto-revert when conditions stop matching