From 2f0ec0e87de1a25ea072207f7a7d83ed3f0d1b0a Mon Sep 17 00:00:00 2001
From: Jesvi Jonathan <jesvi22j@gmail.com>
Date: Wed, 12 Apr 2023 08:56:39 +0530
Subject: [PATCH] added root margin prop, better mobile view support

---
 dist/jos.js | 27 +++++++++++++++++++--------
 style.css   | 39 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 8 deletions(-)

diff --git a/dist/jos.js b/dist/jos.js
index cec18d2..414ad77 100644
--- a/dist/jos.js
+++ b/dist/jos.js
@@ -7,14 +7,22 @@ onload = () => {
     ".jos { transition: " + transition_temp + " !important; }"
   );
 };
+
+let centerWindow = window.innerHeight / 2;
+
 let jos_default_once = false; // true or false
 let jos_default_animation = "fade"; // fade, slide, zoom, rotate
 let jos_default_timingFunction = "ease-in-out"; // ease-in-out, ease-in, ease-out, linear
-let jos_default_threshold = 0.9; // 0-1  | higher value for mobile and lower for desktop
-let jos_default_intersectionRatio = intersectionRatio_set(); //0-0.99
+let jos_default_threshold = 0; // 0-1  | higher value for mobile and lower for desktop
 let jos_default_duration = 0.4;
+let jos_rootMargin_top = "-10%";
+let jos_rootMargin_bottom = "-50%";
 let jos_default_type = "linear";
 
+let jos_default_intersectionRatio = intersectionRatio_set(); //0-0.99
+let jos_default_rootMargin =
+  jos_rootMargin_top + " 0% " + jos_rootMargin_bottom + " 0%";
+
 function intersectionRatio_set() {
   if (jos_default_threshold == 1) return 0.99;
 
@@ -42,7 +50,7 @@ function animation_invoker(target, state) {
 
   if (state) {
     target.classList.remove("jos-" + target_jos_animation);
-    console.log("jos-" + target_jos_animation);
+    // console.log("jos-" + target_jos_animation);
 
     if (target.dataset.jos_invoke != undefined) {
       window[target.dataset.jos_invoke](target);
@@ -63,17 +71,17 @@ function callbackRouter(entries, observer) {
 
   if (entry.intersectionRatio > jos_default_intersectionRatio) {
     if (target.dataset.jos_animation) {
-      console.log("Animation-Triggered");
+      // console.log("Animation-Triggered");
       animation_invoker(target, true);
       if (target.dataset.jos_once == "true") {
         // target.classList.remove("jos");
-        console.log("Removed-Observer");
+        // console.log("Removed-Observer");
         observer.unobserve(target);
       }
     }
   } else {
     if (target.dataset.jos_animation) {
-      console.log("Animation-Reverting");
+      // console.log("Animation-Reverting");
       animation_invoker(target, false);
     }
   }
@@ -81,8 +89,9 @@ function callbackRouter(entries, observer) {
 
 var options = {
   root: null,
-  rootMargin: "100px",
+  rootMargin: jos_default_rootMargin,
   threshold: jos_default_threshold,
+  passive: true,
 };
 
 // There is another way to implement this,
@@ -144,7 +153,9 @@ console.log(
     "\n" +
     "Default Type: " +
     jos_default_type +
-    "\n"
+    "\n" +
+    "Default Root Margin: " +
+    jos_default_rootMargin
 );
 
 console.log("\nDebug :\n");
diff --git a/style.css b/style.css
index 99b59e1..7cae531 100644
--- a/style.css
+++ b/style.css
@@ -99,6 +99,12 @@ footer {
   cursor: none;
   width: 0;
   opacity: 0;
+  display: flex;
+  width: fit-content;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
 }
 
 .demo-container:hover .demo-text {
@@ -114,3 +120,36 @@ pre {
   font-size: 0.9em;
   padding: 2em 1em;
 }
+
+@media screen and (max-width: 1000px) {
+  .demo-container {
+    flex-direction: column;
+    margin: 4vw;
+  }
+  .demo-name {
+    flex-direction: column;
+  }
+  .demo-text {
+    margin-left: 0;
+  }
+  .demo-code {
+    margin-left: 0;
+    font-size: 0.8em;
+    height: 0;
+
+    height: 0;
+    width: fit-content;
+  }
+  .demo-container:hover .demo-text {
+    margin-left: 0vw;
+    margin-bottom: 1em;
+  }
+  .demo-container:hover .demo-code {
+    opacity: 1;
+    min-height: 25%;
+    height: 14em;
+    margin-top: 0;
+    overflow-y: scroll;
+    width: auto;
+  }
+}