1 files changed, 113 insertions, 0 deletions
diff --git a/src/js/love.js b/src/js/love.js
new file mode 100644
index 0000000..5706c95
--- /dev/null
+++ b/src/js/love.js
@@ -0,0 +1,113 @@
+window.addEventListener('DOMContentLoaded', () => {
+  // This script insert a love button at the end of an article page
+
+  const articles = document.querySelectorAll('article');
+
+  const config = {
+    likesEndPointBase: 'localhost:3000',
+  };
+
+  function getLikeEndPoint() {
+    let currentArticleName = window.location.pathname.split('/')[2];
+    if (currentArticleName.indexOf('.') > 0) {
+      currentArticleName = currentArticleName.slice(0, currentArticleName.lastIndexOf('.'))
+    }
+    return `${window.location.protocol}//${config.likesEndPointBase}/like/${currentArticleName}`;
+  }
+
+  // The front page have multiple articles
+  if (articles.length === 1) {
+    const article = articles[0];
+    const likes = article.querySelector('.likes');
+    const nbLikes = article.querySelector('.nbLikes');
+    const footnotes = article.querySelector('.footnotes');
+
+    likes.style="display: 'block';";
+    const updateNbLikes = () => {
+      fetch(getLikeEndPoint(), {
+        method: 'GET',
+        headers: {
+          'i-love-what-you-do': '<3',
+        },
+      }).then((res) => {
+        if (res.ok) {
+          res.text().then((text) => nbLikes.textContent = text);
+        } else {
+          nbLikes.textContent = "";
+        }
+      });
+    };
+
+    updateNbLikes();
+
+    if (footnotes) {
+      // We want: article.insertBefore(likes, footnotes);
+      footnotes.before(likes);
+    }
+
+    const icon = likes.querySelector('.icon');
+    const messagesLike = likes.querySelector('.likesNotes');
+
+    icon.addEventListener('mouseover', () => {
+      for (const c of icon.children) {
+        const path = c.querySelector('path');
+        path?.classList.add('anim');
+      }
+    });
+
+    icon.addEventListener('mouseout', () => {
+      for (const c of icon.children) {
+        const path = c.querySelector('path');
+        path?.classList.remove('anim');
+      }
+    });
+
+    let timeOut;
+    let messageText;
+    icon.addEventListener('click', () => {
+      const c = icon.children[1];
+      {
+        const path = c.querySelector('path');
+        console.log(path)
+        path.classList.add('anim-click');
+        path.getAnimations().forEach(anim => {
+          anim.cancel();
+          anim.play();
+        });
+
+        fetch(getLikeEndPoint(), {
+          method: 'POST',
+          headers: {
+            'i-love-what-you-do': '<3',
+          },
+        }).then(response => {
+          const currentText = messagesLike.textContent;
+          const t = response.text().then(text => {
+            messagesLike.textContent = text;
+            return text;
+          });
+
+          if (response.ok) {
+            messagesLike.classList.remove('err');
+            t.then((t) => messageText = t);
+            updateNbLikes();
+          } else {
+            if (!messageText) {
+              messageText = currentText;
+            }
+
+            messagesLike.classList.add('err');
+            setTimeout(() => {
+              messagesLike.classList.remove('err');
+              messagesLike.textContent = messageText;
+            }, 3000);
+          }
+        }).catch(() => {
+          messagesLike.classList.add('err');
+          messagesLike.textContent = 'Désolé, le service est indisponible';
+          messageText = '';
+        });
+      }
+    });
+  }
+});