Merge pull request #46 from dabhitapan/main

Create upload gif feature
lcrojano · Oct 31, 2023 · 962550b · 962550b
2 parents 1e80303 + b318018
commit 962550b
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -50,7 +50,14 @@ <h2>Share GIF</h2>
                 <h1 class="grow-2" id="logo">Giphy Search</h1>
                 <caption>By Luis Rojano</caption>
             </div>
-            <button class="secondary-btn">Log in</button>
+            <div style="display: flex">
+                <button class="secondary-btn">Log in</button>
+                <!-- Add this button to trigger the modal for uploading GIFs -->
+                <button id="upload-button" class="secondary-btn" style="margin-left: 15px;">Upload GIF</button>
+
+                <!-- Add a hidden input element for file selection -->
+                <input type="file" id="file-upload" accept=".gif" style="display: none">   
+            </div>
         </header>
         <section class="flex-col justify-content-center stickysearchbar" id="searchbar">
             <div class="flex-row justify-content-btw align-items-center ">
@@ -62,6 +69,23 @@ <h1 class="grow-2" id="logo">Giphy Search</h1>
             </div>
         </section>
 
+        <!-- Update the modal for sharing GIFs -->
+        <section class="modal" id="modal-overlay">
+            <div class="share-modal">
+                <div class="share-head">
+                    <h2>Share GIF</h2>
+                    <i class="fa-solid fa-x" id="close"></i>
+                </div>
+                <ul class="social-links">
+                    <li><i class="fa-brands fa-square-facebook"></i></li>
+                    <li><i class="fa-brands fa-square-twitter"></i></li>
+                    <li><i class="fa-brands fa-square-instagram"></i></li>
+                    <li><i class="fa-brands fa-square-pinterest"></i></li>
+                </ul>
+                <button id="copy" class="secondary-btn copy-btn">Copy Link</button>
+            </div>
+        </section>
+
         <section class="flex-row justify-content-btw  align-items-center searchtermdata">
             <div class="flex-col ">
                 <strong id="search-term">GATOS</strong>

diff --git a/scripts/scripts.js b/scripts/scripts.js
@@ -59,8 +59,8 @@ const searchEvent = (e, giphyObj) => {
   queryParams.set('q', q);
   history.replaceState(null, null, '?' + queryParams.toString());
   setHistory(q);
-    document.body.scrollTop = 0; // For Safari
-            document.documentElement.scrollTop = 0;
+  document.body.scrollTop = 0; // For Safari
+  document.documentElement.scrollTop = 0;
 };
 /**Load infinite */
 // listen for scroll event and load more images if we reach the bottom of window
@@ -125,6 +125,7 @@ const updateMainView = (gifs) => {
     let figure = document.createElement('figure', { class: 'figure' }); //Este no esta en el dom todavia
     let modal = document.querySelector('.modal');
     let url;
+
     let text, description;
     figure.addEventListener('click', (e)=>{
       modal.classList.add('display-modal');
@@ -158,31 +159,29 @@ const updateMainView = (gifs) => {
         // }
       })
     });
-    modal.addEventListener('click', (e) =>{
-      if(e.target.id === 'close' || e.target.id === 'modal-overlay'){
+    modal.addEventListener('click', (e) => {
+      if (e.target.id === 'close' || e.target.id === 'modal-overlay') {
         modal.classList.remove('display-modal');
       }
-
+      if (e.target.id === 'copy') {
+        console.log(url);
+      }
     })
 
     figure.innerHTML = `
             <picture class="picture ">
-                <source srcset="${
-                  gif.images?.downsized?.url
-                }" type="image/png" media="(min-width:1920px)">
-                <source srcset="${
-                  gif.images?.downsized?.url
-                }" type="image/png" media="(min-width:1200px)">
-                <source srcset="${
-                  gif.images?.downsized?.url
-                }" type="image/png" media="(min-width:700px)">
+                <source srcset="${gif.images?.downsized?.url
+      }" type="image/png" media="(min-width:1920px)">
+                <source srcset="${gif.images?.downsized?.url
+      }" type="image/png" media="(min-width:1200px)">
+                <source srcset="${gif.images?.downsized?.url
+      }" type="image/png" media="(min-width:700px)">
                 <img src="${gif.images?.downsized?.url}" alt="Test" class="abc">
             </picture>
             <figcaption>
                 <div class="autor flex-row aling-items-center">
-                    <img src="${
-                      gif.user?.avatar_url || 'https://placehold.jp/150x150.png'
-                    }" alt="">
+                    <img src="${gif.user?.avatar_url || 'https://placehold.jp/150x150.png'
+      }" alt="">
                     <div class="info flex-col ">
                         <p><strong>${gif.user?.username || 'autor'}</strong></p>
                         <p>${gif.source_tld}</p>
@@ -227,7 +226,7 @@ const init = async (offset = 0) => {
       giphyObj.updateOffset();
       //update css
       let list = document.querySelector("#gifs-list");
-      list.style.height = `${giphyObj.offset*10}vh`;
+      list.style.height = `${giphyObj.offset * 10}vh`;
       if (searchTerm) {
         loadGifs(giphyObj.search_api(), (gifs) => {
           updateMainView(gifs);
@@ -273,4 +272,19 @@ const init = async (offset = 0) => {
   };
 };
 
+// Add an event listener for the "Upload GIF" button
+document.getElementById('upload-button').addEventListener('click', () => {
+  // Trigger the hidden file input
+  document.getElementById('file-upload').click();
+});
+
+// Add an event listener for the file input to handle the selected GIF
+document.getElementById('file-upload').addEventListener('change', async (e) => {
+  const file = e.target.files[0];
+
+  if (file && file.type === 'image/gif') {
+    console.log("file upload successfull")
+  }
+});
+
 init();