1.0.2

Edsardio · Apr 15, 2022 · b063cba · b063cba
1 parent 3b5f16f
commit b063cba
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 16 deletions.
diff --git a/dist/module.cjs.js b/dist/module.cjs.js
@@ -15,7 +15,7 @@ __export(exports, {
 function src_default(Alpine) {
   document.addEventListener("alpine:init", () => {
     let body = document.querySelector("body");
-    body.innerHTML = `<div style="display: none;" x-bind:class="$store.tour.active ? '' : 'hidden'" class="absolute z-10 inset-0" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.tour.active" x-data>
+    body.insertAdjacentHTML("afterbegin", `<div style="display: none;" x-bind:class="$store.tour.active ? '' : 'hidden'" class="absolute z-10 inset-0" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.tour.active" x-data>
                       <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
                           x-transition:enter="ease-out duration-300"
                           x-transition:enter-start="opacity-0"
@@ -40,9 +40,6 @@ function src_default(Alpine) {
                             <div x-show="$store.tour.activeStep?.modifier === 'bottom'" class="w-6 overflow-hidden inline-block absolute" style="top: -1rem; left: 50%; transform: translateX(-50%)">
                              <div class=" h-4 w-4 bg-white rotate-45 transform origin-bottom-left"></div>
                             </div>
-                            <div x-show="$store.tour.activeStep?.modifier === 'top'" class="w-6 overflow-hidden inline-block absolute" style="bottom: -1rem; left: 50%; transform: translateX(-50%)">
-                             <div class=" h-4 w-4 bg-white -rotate-45 transform origin-top-left"></div>
-                            </div>
                             <div x-show="$store.tour.activeStep?.modifier === 'right'" class="w-4 overflow-hidden inline-block absolute" style="left: -1rem; top: 50%; transform: translateY(-50%)">
                              <div class=" h-6 bg-white -rotate-45 transform origin-top-right"></div>
                             </div>
@@ -75,7 +72,7 @@ function src_default(Alpine) {
                       </div>
                       </div>
                   </div>
-        ` + body.innerHTML;
+        `);
     document.addEventListener("keyup", (e) => {
       const tour = Alpine.store("tour");
       if (tour.active) {

diff --git a/dist/module.esm.js b/dist/module.esm.js
@@ -2,7 +2,7 @@
 function src_default(Alpine) {
   document.addEventListener("alpine:init", () => {
     let body = document.querySelector("body");
-    body.innerHTML = `<div style="display: none;" x-bind:class="$store.tour.active ? '' : 'hidden'" class="absolute z-10 inset-0" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.tour.active" x-data>
+    body.insertAdjacentHTML("afterbegin", `<div style="display: none;" x-bind:class="$store.tour.active ? '' : 'hidden'" class="absolute z-10 inset-0" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.tour.active" x-data>
                       <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
                           x-transition:enter="ease-out duration-300"
                           x-transition:enter-start="opacity-0"
@@ -27,9 +27,6 @@ function src_default(Alpine) {
                             <div x-show="$store.tour.activeStep?.modifier === 'bottom'" class="w-6 overflow-hidden inline-block absolute" style="top: -1rem; left: 50%; transform: translateX(-50%)">
                              <div class=" h-4 w-4 bg-white rotate-45 transform origin-bottom-left"></div>
                             </div>
-                            <div x-show="$store.tour.activeStep?.modifier === 'top'" class="w-6 overflow-hidden inline-block absolute" style="bottom: -1rem; left: 50%; transform: translateX(-50%)">
-                             <div class=" h-4 w-4 bg-white -rotate-45 transform origin-top-left"></div>
-                            </div>
                             <div x-show="$store.tour.activeStep?.modifier === 'right'" class="w-4 overflow-hidden inline-block absolute" style="left: -1rem; top: 50%; transform: translateY(-50%)">
                              <div class=" h-6 bg-white -rotate-45 transform origin-top-right"></div>
                             </div>
@@ -62,7 +59,7 @@ function src_default(Alpine) {
                       </div>
                       </div>
                   </div>
-        ` + body.innerHTML;
+        `);
     document.addEventListener("keyup", (e) => {
       const tour = Alpine.store("tour");
       if (tour.active) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@edsardio/alpine-tour",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A dynamic tour using AlpineJS and TailwindCSS",
   "main": "dist/module.cjs.js",
   "module": "dist/module.esm.js",

diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,7 @@
 export default function (Alpine) {
     document.addEventListener('alpine:init', () => {
         let body = document.querySelector('body');
-        body.innerHTML = `<div style="display: none;" x-bind:class="$store.tour.active ? '' : 'hidden'" class="absolute z-10 inset-0" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.tour.active" x-data>
+        body.insertAdjacentHTML('afterbegin', `<div style="display: none;" x-bind:class="$store.tour.active ? '' : 'hidden'" class="absolute z-10 inset-0" aria-labelledby="modal-title" role="dialog" aria-modal="true" x-show="$store.tour.active" x-data>
                       <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"
                           x-transition:enter="ease-out duration-300"
                           x-transition:enter-start="opacity-0"
@@ -26,9 +26,6 @@ export default function (Alpine) {
                             <div x-show="$store.tour.activeStep?.modifier === 'bottom'" class="w-6 overflow-hidden inline-block absolute" style="top: -1rem; left: 50%; transform: translateX(-50%)">
                              <div class=" h-4 w-4 bg-white rotate-45 transform origin-bottom-left"></div>
                             </div>
-                            <div x-show="$store.tour.activeStep?.modifier === 'top'" class="w-6 overflow-hidden inline-block absolute" style="bottom: -1rem; left: 50%; transform: translateX(-50%)">
-                             <div class=" h-4 w-4 bg-white -rotate-45 transform origin-top-left"></div>
-                            </div>
                             <div x-show="$store.tour.activeStep?.modifier === 'right'" class="w-4 overflow-hidden inline-block absolute" style="left: -1rem; top: 50%; transform: translateY(-50%)">
                              <div class=" h-6 bg-white -rotate-45 transform origin-top-right"></div>
                             </div>
@@ -61,7 +58,7 @@ export default function (Alpine) {
                       </div>
                       </div>
                   </div>
-        ` + body.innerHTML;
+        `)
 
         document.addEventListener('keyup', (e) => {
             const tour = Alpine.store('tour');