rivia 0.0.10 → 0.0.11

package/dist/index.js

@@ -1267,7 +1267,7 @@ var RIVIA_TOUR = function() {
       window.sessionStorage.removeItem("rivia_tour_state");
     }
   }
-  function createTooltip({
+  async function createTooltip({
     id,
     selector,
     title,
@@ -1282,7 +1282,7 @@ var RIVIA_TOUR = function() {
     card_next_button = true,
     card_skip_button = false
   }) {
-    const anchor = findBySelector(selector);
+    const anchor = await findBySelector(selector);
     if (!anchor) return null;
     const tip = document.createElement("div");
     tip.dataset.riviaTipId = id;
@@ -1542,7 +1542,7 @@ var RIVIA_TOUR = function() {
       return STATE.tips;
     }
   }
-  function showStep(i, isPreview = false) {
+  async function showStep(i, isPreview = false) {
     uploadVisitedPagesInBackground(STATE.tour_id, user_var12, i);
     console.log("Showing step", i, "of", STATE.tips.length);
     document.querySelectorAll("[data-rivia-tip-id]").forEach((n) => n.remove());
@@ -1578,7 +1578,7 @@ var RIVIA_TOUR = function() {
     if (step.card_type === "video_explainer") {
       if (isPreview) {
         console.log("Preview mode: Showing video explainer for step:", step.id);
-        const targetElement = findBySelector(step.selector);
+        const targetElement = await findBySelector(step.selector);
         if (targetElement) {
           try {
             targetElement.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
@@ -1606,7 +1606,7 @@ var RIVIA_TOUR = function() {
         console.log("Edit mode: Showing video explainer for step:", step.id);
         console.log("Step selector:", step.selector);
         if (step.selector) {
-          const targetElement = findBySelector(step.selector);
+          const targetElement = await findBySelector(step.selector);
           console.log("Found target element:", targetElement, "for selector:", step.selector);
           if (targetElement) {
             console.log("Element found, scrolling into view...");
@@ -1653,7 +1653,7 @@ var RIVIA_TOUR = function() {
       return;
     }
     if (isPreview) {
-      const el = findBySelector(step.selector);
+      const el = await findBySelector(step.selector);
       if (el) {
         try {
           el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
@@ -1696,7 +1696,7 @@ var RIVIA_TOUR = function() {
       return;
     }
     if (!isPreview && step.selector && !step.card_type) {
-      const el = findBySelector(step.selector);
+      const el = await findBySelector(step.selector);
       if (el) {
         try {
           el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
@@ -1752,9 +1752,9 @@ var RIVIA_TOUR = function() {
       }
     }, 100);
   }
-  function createVideoUI(step) {
+  async function createVideoUI(step) {
     console.log("Creating video UI for step:", step);
-    const anchor = findBySelector(step.selector);
+    const anchor = await findBySelector(step.selector);
     console.log("Found anchor:", anchor);
     if (!anchor) {
       console.warn("Anchor not found for selector:", step.selector);
@@ -1990,7 +1990,7 @@ var RIVIA_TOUR = function() {
     }, 0);
     return videoContainer;
   }
-  function previewAnimation(selector, animationType) {
+  async function previewAnimation(selector, animationType) {
     try {
       const element = document.querySelector(selector);
       if (!element) {
@@ -2019,16 +2019,36 @@ var RIVIA_TOUR = function() {
       console.warn("Error previewing animation:", err);
     }
   }
-  function findBySelector(selector) {
-    try {
-      return document.querySelector(selector);
-    } catch (e) {
-      console.warn("Invalid selector:", selector, e);
-      return null;
-    }
+  async function findBySelector(selector) {
+    return new Promise((resolve) => {
+      const maxRetries = 50;
+      const retryInterval = 100;
+      let attempts = 0;
+      const checkElement = () => {
+        try {
+          const element = document.querySelector(selector);
+          if (element) {
+            resolve(element);
+            return;
+          }
+        } catch (e) {
+          console.warn("Invalid selector:", selector, e);
+          resolve(null);
+          return;
+        }
+        attempts++;
+        if (attempts < maxRetries) {
+          setTimeout(checkElement, retryInterval);
+        } else {
+          console.warn("Element not found after retries:", selector);
+          resolve(null);
+        }
+      };
+      checkElement();
+    });
   }
-  function highlightElementBySelector(selector) {
-    const el = findBySelector(selector);
+  async function highlightElementBySelector(selector) {
+    const el = await findBySelector(selector);
     if (!el) return;
     try {
       el.scrollIntoView({
@@ -2051,7 +2071,7 @@ var RIVIA_TOUR = function() {
       height: r.height + "px"
     });
   }
-  function previewBackdrop(selector, backdropType) {
+  async function previewBackdrop(selector, backdropType) {
     try {
       let backdropOverlay = document.getElementById("rivia-backdrop-overlay");
       if (backdropOverlay) {
@@ -2060,7 +2080,7 @@ var RIVIA_TOUR = function() {
       if (backdropType === "none") {
         return;
       }
-      const targetElement = findBySelector(selector);
+      const targetElement = await findBySelector(selector);
       if (!targetElement) return;
       const targetRect = targetElement.getBoundingClientRect();
       const padding = 8;
@@ -2172,7 +2192,7 @@ var RIVIA_TOUR = function() {
       console.warn("Error previewing backdrop:", err);
     }
   }
-  function showWelcomeCardPreview(step, stepIndex) {
+  async function showWelcomeCardPreview(step, stepIndex) {
     if (!step) {
       console.warn("Step not found for preview");
       return;
@@ -2345,7 +2365,7 @@ var RIVIA_TOUR = function() {
     nextBtn.onmouseout = () => {
       nextBtn.style.background = "#2563eb";
     };
-    nextBtn.onclick = () => {
+    nextBtn.onclick = async () => {
       const advanceAction = step.basic_advanceAction || "next button";
       overlay2.remove();
       const backdropOverlay = document.getElementById(
@@ -2363,7 +2383,7 @@ var RIVIA_TOUR = function() {
         STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
         if (STATE.tourIndex < STATE.tips.length) {
           const nextStep2 = STATE.tips[STATE.tourIndex];
-          const nextElement = findBySelector(nextStep2.selector);
+          const nextElement = await findBySelector(nextStep2.selector);
           if (nextElement) {
             nextElement.scrollIntoView({ behavior: "smooth", block: "center" });
             setTimeout(() => showStep(STATE.tourIndex, true), 600);
@@ -2413,7 +2433,7 @@ var RIVIA_TOUR = function() {
       step.basic_advanceAction
     );
   }
-  function showModalDialogPreview(step, stepIndex) {
+  async function showModalDialogPreview(step, stepIndex) {
     const existingCenteredModal = document.getElementById(
       "rivia-modal-dialog-preview-modal"
     );
@@ -2546,7 +2566,7 @@ var RIVIA_TOUR = function() {
     `;
     nextBtn.onmouseover = () => nextBtn.style.background = "#1d4ed8";
     nextBtn.onmouseout = () => nextBtn.style.background = "#2563eb";
-    nextBtn.onclick = () => {
+    nextBtn.onclick = async () => {
       const advanceAction = step.basic_advanceAction || "next button";
       centeredContainer.remove();
       const backdropOverlay = document.getElementById(
@@ -2564,7 +2584,7 @@ var RIVIA_TOUR = function() {
         STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
         if (STATE.tourIndex < STATE.tips.length) {
           const nextStepData = STATE.tips[STATE.tourIndex];
-          const nextElement = findBySelector(nextStepData.selector);
+          const nextElement = await findBySelector(nextStepData.selector);
           if (nextElement) {
             nextElement.scrollIntoView({ behavior: "smooth", block: "center" });
             setTimeout(() => showStep(STATE.tourIndex, true), 600);
@@ -2601,7 +2621,7 @@ var RIVIA_TOUR = function() {
       step.basic_advanceAction
     );
   }
-  function attachNavigationButtons(tip, i, isPreview) {
+  async function attachNavigationButtons(tip, i, isPreview) {
     const nav = document.createElement("div");
     const navStyle = isPreview ? `
     display: flex;
@@ -2652,7 +2672,7 @@ var RIVIA_TOUR = function() {
       nav.appendChild(back);
     }
     if (advanceAction === "manual click") {
-      const targetElement = findBySelector(step.selector);
+      const targetElement = await findBySelector(step.selector);
       if (targetElement) {
         attachClickListenerToElement(targetElement);
       }
@@ -2752,7 +2772,7 @@ var RIVIA_TOUR = function() {
       tip.appendChild(stepIndicator);
     }
   }
-  function cleanupAllOverlays() {
+  async function cleanupAllOverlays() {
     const welcomeBackdropOverlay = document.getElementById(
       "rivia-welcome-backdrop-overlay"
     );
@@ -2792,24 +2812,8 @@ var RIVIA_TOUR = function() {
       svg.remove();
     });
   }
-  function nextStep() {
+  async function nextStep() {
     if (STATE.tourIndex < STATE.tips.length - 1) {
-      let getNextStepInfo3 = function(currentIndex2) {
-        if (currentIndex2 >= STATE.tips.length - 1) {
-          return { type: "end", index: currentIndex2 };
-        }
-        const nextStep2 = STATE.tips[currentIndex2 + 1];
-        if (!nextStep2) return { type: "end", index: currentIndex2 };
-        if (nextStep2.targetUrl && nextStep2.targetUrl.trim()) {
-          console.log("WE reached navigation");
-          return { type: "navigate", index: currentIndex2 + 1, url: nextStep2.targetUrl };
-        }
-        if (isStepAvailableOnCurrentPage(nextStep2)) {
-          return { type: "show", index: currentIndex2 + 1 };
-        }
-        return getNextStepInfo3(currentIndex2 + 1);
-      };
-      var getNextStepInfo2 = getNextStepInfo3;
       const currentIndex = STATE.tourIndex;
       STATE.tourIndex++;
       const nextStepData = STATE.tips[STATE.tourIndex];
@@ -2828,7 +2832,22 @@ var RIVIA_TOUR = function() {
         window.location.href = navUrl;
         return;
       }
-      const nextStepInfo = getNextStepInfo3(currentIndex);
+      async function getNextStepInfo2(currentIndex2) {
+        if (currentIndex2 >= STATE.tips.length - 1) {
+          return { type: "end", index: currentIndex2 };
+        }
+        const nextStep2 = STATE.tips[currentIndex2 + 1];
+        if (!nextStep2) return { type: "end", index: currentIndex2 };
+        if (nextStep2.targetUrl && nextStep2.targetUrl.trim()) {
+          console.log("WE reached navigation");
+          return { type: "navigate", index: currentIndex2 + 1, url: nextStep2.targetUrl };
+        }
+        if (isStepAvailableOnCurrentPage(nextStep2)) {
+          return { type: "show", index: currentIndex2 + 1 };
+        }
+        return getNextStepInfo2(currentIndex2 + 1);
+      }
+      const nextStepInfo = getNextStepInfo2(currentIndex);
       if (nextStepInfo.type === "navigate") {
         sessionStorage.setItem("rivia_tour_state", JSON.stringify({
           tourIndex: nextStepInfo.index,
@@ -2850,7 +2869,7 @@ var RIVIA_TOUR = function() {
       endTour();
     }
   }
-  function getNextStepInfo(currentIndex) {
+  async function getNextStepInfo(currentIndex) {
     if (currentIndex >= STATE.tips.length - 1) {
       return { type: "end", index: currentIndex };
     }
@@ -2864,12 +2883,12 @@ var RIVIA_TOUR = function() {
     }
     return getNextStepInfo(currentIndex + 1);
   }
-  function isStepAvailableOnCurrentPage(step) {
+  async function isStepAvailableOnCurrentPage(step) {
     if (!step) return false;
     if (!step.targetUrl || !step.targetUrl.trim()) return true;
     return urlMatches(step.targetUrl);
   }
-  function urlMatches(pattern, currentUrl = window.location.href) {
+  async function urlMatches(pattern, currentUrl = window.location.href) {
     if (!pattern || !pattern.trim()) return true;
     const cleanPattern = pattern.trim();
     const cleanUrl = currentUrl.trim();
@@ -2900,7 +2919,7 @@ var RIVIA_TOUR = function() {
     }
     return cleanUrl.includes(cleanPattern);
   }
-  function addTourParamsToUrl(url, tourId) {
+  async function addTourParamsToUrl(url, tourId) {
     if (!url || !tourId) return url;
     try {
       const urlObj = new URL(url);
@@ -2910,7 +2929,7 @@ var RIVIA_TOUR = function() {
       return url;
     }
   }
-  function getPreviousStepInfo(currentIndex) {
+  async function getPreviousStepInfo(currentIndex) {
     if (currentIndex <= 0) {
       return { type: "start", index: 0 };
     }
@@ -2924,7 +2943,7 @@ var RIVIA_TOUR = function() {
     }
     return getPreviousStepInfo(currentIndex - 1);
   }
-  function prevStep() {
+  async function prevStep() {
     if (STATE.tourIndex > 0) {
       const prevInfo = getPreviousStepInfo(STATE.tourIndex);
       if (prevInfo.type === "start") {
@@ -2953,7 +2972,7 @@ var RIVIA_TOUR = function() {
       }
     }
   }
-  function endTour() {
+  async function endTour() {
     console.log("Ending tour and cleaning up UI elements...");
     document.querySelectorAll("[data-rivia-tip-id]").forEach((n) => n.remove());
     STATE.tourIndex = 0;
@@ -2975,7 +2994,7 @@ var RIVIA_TOUR = function() {
       console.warn("Failed to end tour:", err);
     });
   }
-  function updateUrlStatus() {
+  async function updateUrlStatus() {
     const urlStatus = document.getElementById("rivia-url-status");
     if (!urlStatus) return;
     const currentStep = STATE.tips[STATE.tourIndex];
@@ -2996,7 +3015,7 @@ var RIVIA_TOUR = function() {
       urlStatus.title = stepUrlInfo.displayText;
     }
   }
-  function playTour() {
+  async function playTour() {
     if (STATE.is_completed)
       return;
     if (!STATE.tips.length) {
@@ -3050,7 +3069,7 @@ var RIVIA_TOUR = function() {
     }
     showStep(STATE.tourIndex, true);
   }
-  function cleanUrlForStorage(url) {
+  async function cleanUrlForStorage(url) {
     if (!url || !url.trim()) return url;
     try {
       const urlObj = new URL(url);
@@ -3062,7 +3081,7 @@ var RIVIA_TOUR = function() {
       return url;
     }
   }
-  function showFeedbackCardPreview(step, stepIndex) {
+  async function showFeedbackCardPreview(step, stepIndex) {
     if (!step) {
       console.warn("Step not found for preview");
       return;
@@ -3283,7 +3302,7 @@ var RIVIA_TOUR = function() {
     nextBtn.onmouseout = () => {
       nextBtn.style.background = "#2563eb";
     };
-    nextBtn.onclick = () => {
+    nextBtn.onclick = async () => {
       const advanceAction = step.basic_advanceAction || "next button";
       overlay2.remove();
       const backdropOverlay = document.getElementById(
@@ -3307,7 +3326,7 @@ var RIVIA_TOUR = function() {
         STATE.tourIndex = Math.min(STATE.tourIndex + 1, STATE.tips.length - 1);
         if (STATE.tourIndex < STATE.tips.length) {
           const nextStep2 = STATE.tips[STATE.tourIndex];
-          const nextElement = findBySelector(nextStep2.selector);
+          const nextElement = await findBySelector(nextStep2.selector);
           if (nextElement) {
             nextElement.scrollIntoView({ behavior: "smooth", block: "center" });
             setTimeout(() => showStep(STATE.tourIndex, true), 600);
@@ -3359,7 +3378,7 @@ var RIVIA_TOUR = function() {
   }
   return { loadTips, playTour, endTour, STATE };
 }();
-function tours(tourId, userId) {
+async function tours(tourId, userId) {
   if (!sessionStorage.getItem("rivia_tour_state")) {
     RIVIA_TOUR.loadTips(tourId, userId).then(() => {
       try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rivia",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",