@aw-webflow/pricing_page_js 1.1.0 → 1.3.0

package/.claude/settings.local.json

@@ -20,7 +20,10 @@
       "Bash(curl -sL \"https://atomicwork.webflow.io/pricing-new?cb=$\\(date +%s\\)\" -o live.html)",
       "Bash(curl -sL \"https://cdn.prod.website-files.com/64f08da4e7effe6dcb06d456/css/atomicwork.6a195ea2d503d973ad3d9f0b.6d732586d.opt.min.css\" -o page.css)",
       "Bash(gh release create v1.0.1 --title v1.0.1 --notes ' *)",
-      "Bash(gh release create v1.1.0 --title v1.1.0 --notes ' *)"
+      "Bash(gh release create v1.1.0 --title v1.1.0 --notes ' *)",
+      "Bash(npm view *)",
+      "mcp__chrome-devtools__evaluate_script",
+      "Bash(git commit -m ' *)"
     ]
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aw-webflow/pricing_page_js",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "",
   "scripts": {
     "start": "parcel script.js",

package/script.js

@@ -249,6 +249,9 @@
   var VISIBLE_CLASS = 'is-visible';
   var OPEN_CLASS = 'is-open';
   var INIT_FLAG = 'awTooltipBound';
+  // grace period (ms) for the cursor to travel from the trigger across any
+  // gap onto the bubble before it closes — lets users reach links inside.
+  var HIDE_DELAY = 250;
 
   // Hover devices use mouseenter/leave; touch devices use tap-to-toggle.
   var hoverCapable = !(
@@ -316,6 +319,22 @@
     else hide(wrap);
   }
 
+  // delayed-close helpers so the cursor can cross the gap onto the bubble
+  function cancelHide(wrap) {
+    if (wrap.awHideTimer) {
+      window.clearTimeout(wrap.awHideTimer);
+      wrap.awHideTimer = null;
+    }
+  }
+
+  function scheduleHide(wrap) {
+    cancelHide(wrap);
+    wrap.awHideTimer = window.setTimeout(function () {
+      wrap.awHideTimer = null;
+      hide(wrap);
+    }, HIDE_DELAY);
+  }
+
   function bind(wrap) {
     if (wrap[INIT_FLAG]) return;
     var trigger = wrap.querySelector(TRIGGER_SELECTOR);
@@ -335,11 +354,14 @@
     }
 
     if (hoverCapable) {
+      // mouseenter/leave on the wrap treat the trigger + bubble (a descendant)
+      // as one region; the delayed hide bridges any visual gap between them.
       wrap.addEventListener('mouseenter', function () {
+        cancelHide(wrap);
         show(wrap);
       });
       wrap.addEventListener('mouseleave', function () {
-        hide(wrap);
+        scheduleHide(wrap);
       });
     } else {
       trigger.addEventListener('click', function (e) {
@@ -401,3 +423,109 @@
     init();
   }
 })();
+
+/* FAQ deep-link opener
+ *
+ * Some hash links (CTAs etc.) scroll the page down to the FAQ section. To stop
+ * the fixed navbar from covering the targeted question, the scroll target is
+ * set in Webflow to the FAQ *above* the one we actually want to read (Webflow
+ * scroll-spy interactions can't add a scroll offset). So when one of those
+ * links is clicked, we open the NEXT FAQ dropdown after the scroll target.
+ *
+ * FAQs are Webflow native dropdowns:
+ *   .faq_dd (.w-dropdown)
+ *     .faq_dd_toggle (.w-dropdown-toggle)   <- the clickable bar
+ *     .faq_dd_list   (.w-dropdown-list)     <- the answer
+ *
+ * We open one by replaying mousedown/mouseup/click on the toggle so Webflow's
+ * own dropdown handler runs and keeps its internal open/closed state in sync —
+ * the user can then still collapse it with a single click. Simply forcing the
+ * `w--open` class would desync that state.
+ *
+ * ES5 only (var / no arrow functions) for browser compatibility.
+ */
+(function () {
+  'use strict';
+
+  var FAQ_SELECTOR = '.faq_dd';
+  var TOGGLE_SELECTOR = '.faq_dd_toggle';
+  var SECTION_SELECTOR = '.faq-section';
+  var OPEN_CLASS = 'w--open';
+  // let the link's own click finish first — Webflow closes any open dropdown on
+  // an outside click, so opening on the next tick avoids being closed instantly.
+  var OPEN_DELAY = 80; // ms
+
+  function matches(el, selector) {
+    if (!el || el.nodeType !== 1) return false;
+    var fn =
+      el.matches ||
+      el.webkitMatchesSelector ||
+      el.msMatchesSelector ||
+      el.mozMatchesSelector;
+    return fn ? fn.call(el, selector) : false;
+  }
+
+  function closest(el, selector) {
+    while (el && el.nodeType === 1) {
+      if (matches(el, selector)) return el;
+      el = el.parentNode;
+    }
+    return null;
+  }
+
+  // First FAQ dropdown that appears AFTER the scroll target in document order.
+  // If the target is itself a FAQ, this returns the one below it; if the target
+  // is inside a FAQ, the FAQ containing it is skipped (it "contains", doesn't
+  // "follow"), so we still land on the next one.
+  function firstFollowingFaq(target) {
+    var faqs = document.querySelectorAll(FAQ_SELECTOR);
+    for (var i = 0; i < faqs.length; i++) {
+      // 4 = Node.DOCUMENT_POSITION_FOLLOWING
+      if (target.compareDocumentPosition(faqs[i]) & 4) return faqs[i];
+    }
+    return null;
+  }
+
+  function fire(el, type) {
+    var ev;
+    try {
+      ev = new MouseEvent(type, { bubbles: true, cancelable: true, view: window });
+    } catch (e) {
+      ev = document.createEvent('MouseEvents');
+      ev.initEvent(type, true, true);
+    }
+    el.dispatchEvent(ev);
+  }
+
+  function openFaq(faq) {
+    if (!faq) return;
+    var toggle = faq.querySelector(TOGGLE_SELECTOR);
+    if (!toggle) return;
+    if (toggle.className.indexOf(OPEN_CLASS) !== -1) return; // already open
+    fire(toggle, 'mousedown');
+    fire(toggle, 'mouseup');
+    fire(toggle, 'click');
+  }
+
+  function resolveTarget(hash) {
+    if (!hash || hash.charAt(0) !== '#' || hash === '#') return null;
+    var id = hash.slice(1);
+    return document.getElementById(id);
+  }
+
+  function onClick(e) {
+    var link = closest(e.target, 'a[href^="#"]');
+    if (!link) return;
+    var target = resolveTarget(link.getAttribute('href'));
+    if (!target) return;
+    // only react to links that scroll into the FAQ area
+    if (!matches(target, FAQ_SELECTOR) && !closest(target, SECTION_SELECTOR)) return;
+    var faq = firstFollowingFaq(target);
+    if (!faq) return;
+    window.setTimeout(function () {
+      openFaq(faq);
+    }, OPEN_DELAY);
+  }
+
+  document.addEventListener('click', onClick, false);
+})();