From e851100bd1ddb883d6f21e59ee1dea2afed55291 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samuel=20Pilay=20Mu=C3=B1oz?= <yhau1989@gmail.com>
Date: Tue, 20 Oct 2020 03:43:18 -0500
Subject: [PATCH] pornhub case study (images hover preview) hacktoberfest

---
 .DS_Store             | Bin 0 -> 6148 bytes
 example/showcase.html |  10 +++++-----
 src/hover-preview.js  |  44 +++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 .DS_Store

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..b73ff0064019fee863f2c647a3830598fc9cd852
GIT binary patch
literal 6148
zcmeHKOG-mQ5Ue%<18%Z(IalxoLx?BH1rjj0iBSZ_<y+-k9?j|x!SIqzz>QQxcg^&4
z&EwVL^=kmO_;`8%<^X1NM;tti&ClIOc2gN6(s{=lcG!Nd-uJuLQT6$Rb8oT57dCkL
z&EG%gt><aVN&zV#1*Cu!kOEgK;JueNyGvA*0#ZN<92M~IL!&$P!XYs}9Sku75T{Is
zaUHV+v3Y{n3x`BzXqHrBQmsY|OFHwd>U!ajm~>bTA68GcnoumB&ih-G!+N5k6p#X^
z3QTf4_x}G#zcBxwlC+ZoQs7@HVAJJlx!@~RZymjy_u58Z)4k@K?#6Xc7@{2$qaAbO
f?f5>5vab1>=e=-93_9~cC+cUwb&*MdzgFM}lnE7}

literal 0
HcmV?d00001

diff --git a/example/showcase.html b/example/showcase.html
index 05aac07..1df0fd3 100644
--- a/example/showcase.html
+++ b/example/showcase.html
@@ -29,9 +29,9 @@
         </div>
       </header>
       <main>
-        <div class="album">
+        <div  class="album">
           <div class="img-container">
-            <img
+            <img id="imgtest"
               class="hover-preview img-preview img-1"
               src=""
               style="border-radius:50%"
@@ -48,7 +48,7 @@ <h2>Use is as a preview of a gallery</h2>
           </div>
         </div>
 
-        <div class="album">
+        <div  class="album">
           <div class="info">
             <h2>Or as a preview for a video</h2>
             <p>
@@ -63,9 +63,9 @@ <h2>Or as a preview for a video</h2>
           </div>
         </div>
 
-        <div class="album">
+        <div  class="album">
           <div class="img-container">
-            <img
+            <img 
               class="hover-preview img-preview img-3 "
               src=""
               style="border-radius:20%"
diff --git a/src/hover-preview.js b/src/hover-preview.js
index 096ed8c..0c6817e 100644
--- a/src/hover-preview.js
+++ b/src/hover-preview.js
@@ -1,7 +1,7 @@
 (function () {
   const HOVER_DELAY = 70
   const PREVIEW_DURATION = 500
-  const images = Array.from(document.querySelectorAll('.hover-preview'))
+  const images = Array.from(document.querySelectorAll('img.hover-preview'))
 
   // singleton timeout object, only one timeout should be active at a time
   const timeout = {
@@ -90,4 +90,46 @@
   images.forEach(img => {
     img.addEventListener('mouseenter', mouseEnterListener)
   })
+
+
+  const almover = () => {
+      let last_known_scroll_position = window.scrollY;
+      images.forEach(img => {
+        
+        if((last_known_scroll_position >= (parseInt(img.dataset.posy) - 10)) &&  (last_known_scroll_position <= (parseInt(img.dataset.posy)  + 10)))
+        {
+
+          hoveredImg.el = img
+          hoveredImg.poster = hoveredImg.el.getAttribute('src')
+          hoveredImg.index = -1
+          hoveredImg.images = hoveredImg.el.getAttribute('data-preview').split('|')
+
+          timeout.set(() => previewImages(true), HOVER_DELAY)
+          hoveredImg.el.addEventListener('mouseleave', () => {
+            hoveredImg.reset()
+            timeout.reset()
+          })
+          
+          //console.log(img.id);
+          //mouseEnterListener(img);
+          //console.log(`${img.id}, img position :${img.dataset.posy} , scroll positions: ${last_known_scroll_position}`);
+        }
+      })
+  }
+
+  const setPosYImages = () => {
+    images.forEach(img => {
+      img.dataset.posy = img.getBoundingClientRect().y;
+    })
+  }
+
+    window.addEventListener('scroll', function(){
+      almover();
+    })
+
+    window.addEventListener('load', function(){
+      setPosYImages();
+    })
+
+
 })()