add expire view count feature

added toggle button for view count moved click event from html to js
vinyashegde · Oct 5, 2023 · 059c1bc · 059c1bc
1 parent 9652029
commit 059c1bc
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 21 deletions.
diff --git a/Source/off-button.png b/Source/off-button.png
diff --git a/Source/on-button.png b/Source/on-button.png
diff --git a/Source/popup.html b/Source/popup.html
@@ -32,7 +32,7 @@
         #qrcode {
             padding: 8px;
             display: flex;
-            justify-content: center;                
+            justify-content: center;
         }
         #qrcode > img{
             height: 200px;
@@ -44,7 +44,7 @@
 
         .card-header{
             background-color: #C8D4FF;
-            border: 2px solid black; 
+            border: 2px solid black;
             /* border-radius: 12px; */
             margin-bottom: 7px;
         }
@@ -78,12 +78,15 @@
         color: #172A8C;
         transition: 0.3s ease-in;
         }
+        #expiry-count {
+            display: none;
+        }
         #shortSelTab{
             border-radius: 10px;
             padding: 1px 8px;
         }
         #shortURL{
-            border-radius: 10px; 
+            border-radius: 10px;
             padding: 1px 5px;
         }
         #darkmode{
@@ -106,9 +109,10 @@
             color: #000F46;
             margin-left: 2px;
         }
-        #github-icon{
-            margin-bottom: -10px;
-            margin-left: 10px;
+        .container {
+          display: flex;
+          justify-content: space-between;
+          padding: 0px 15px 0px 15px;
         }
         #downloadQr{
             border-radius: 10px;
@@ -135,14 +139,18 @@
                 <a href="options.html"><button class="btn btn-sm" class="btn btn-action" id="shortbut"><i class="icon icon-menu"></i></button></a>
                 </div>
                 <div class="card-title h5">Shorto - URL Shorter</div>   </div>
-                <div>
-                     <iframe src="https://ghbtns.com/github-btn.html?user=vinyashegde&repo=shorto_url_shorter&type=star&count=true" frameborder="0" scrolling="0" width="120" height="20" title="GitHub" id="github-icon"></iframe>           
+                <div class="container">
+                     <iframe src="https://ghbtns.com/github-btn.html?user=vinyashegde&repo=shorto_url_shorter&type=star&count=true" frameborder="0" scrolling="0" width="120" height="20" title="GitHub" id="github-icon"></iframe>
+                     <img src="off-button.png" id="toggleBtn" width="32" height="32" style="cursor: pointer;"/>
             </div>
-     
+
             <div class="card-body">
                 <div class="form-group">
                     <input class="form-input" type="text" id="myurl"placeholder="Enter URL">
                 </div>
+                <div class="form-group">
+                    <input class="form-input" type="text" id="expiry-count"placeholder="View Expiry Count">
+                </div>
             </div>
             <div class="card-footer">
                 <div class="loading d-hide"></div>
@@ -156,17 +164,17 @@
             <div style="float:bottom;" class="toast toast-success d-hide" id="downloadedQr">Downloading QR!</div>
         </div>
         <!-- Option to Copy or Download QR code to clipboard -->
-        
+
         <div id="qrcode" class="qr d-hide"></div>
-        
+
         <div class="px-2 m-2" >
             <button class="btn btn-primary d-hide " id="share">Share</button>
             <button class="btn btn-primary d-hide " id="copyQr">Copy QR</button>
             <button class="btn btn-primary d-hide " id="downloadQr">Download QR</button>
         </div>
-        
+
     </div>
-   
+
 
 </body>
 

diff --git a/Source/src/popup.js b/Source/src/popup.js
@@ -7,6 +7,7 @@ let copiedQr = document.querySelector("#copiedQr");
 let downloadedQr = document.querySelector("#downloadedQr");
 let share = document.querySelector("#share");
 let api = document.querySelector("#myurl")
+let expiryCount = document.querySelector("#expiry-count")
 let toastError = document.querySelector('.toast-error')
 let toastSuccess = document.querySelector('.toast-success')
 let loader = document.querySelector('.loading')
@@ -16,6 +17,8 @@ const copyQr = document.getElementById("copyQr")
 const downloadQr = document.getElementById("downloadQr")
 const sharer = document.getElementById("share")
 var qrcode = new QRCode(codeDiv);
+const toggleBtn = document.querySelector("#toggleBtn");
+let viewCountEnabled = false;
 
 
 const resultDiv = document.getElementById('result');
@@ -36,7 +39,7 @@ function urlValidate(url) {
     return regex.test(url);
   }
 
-  
+
 
 generateBtn.addEventListener('click', () => {
     shortenUrl(api.value)
@@ -49,7 +52,7 @@ generateSelTabBtn.addEventListener('click', () => {
 })
 
 // // Display the shortened URLs in the history table
-      
+
 // shortenedUrls.slice(-3).reverse().forEach(urlPair => {
 //     const row = document.createElement('tr');
 //     row.innerHTML = `<td><a href="${urlPair[1]}" target="_blank">${urlPair[1]}</a></td><td><a href="${urlPair[0]}" target="_blank">${urlPair[0].substring(0,22) + String("...")}</a></td>`;
@@ -64,7 +67,8 @@ function shortenUrl(longURL) {
                 method: "POST",
                 headers: headers,
                 body: JSON.stringify({
-                    "long_url": longURL, 
+                    "long_url": longURL,
+                    "expire_at_views": validateExpiryCount(expiryCount.value),
                     "domain": "https://t.ly/",
                     "api_token": result.API
                 })
@@ -88,26 +92,26 @@ function shortenUrl(longURL) {
                     document.execCommand("copy");
                     document.body.removeChild(dummy);
 
-                    
+
                     // Add the shortened URL to the history list and local storage
                     const urlPair = [longURL, json.short_url];
                     shortenedUrls.push(urlPair);
                     shortenedUrls = shortenedUrls.slice(-3).reverse();
                     localStorage.setItem(storageKey, JSON.stringify(shortenedUrls));
 
-                    
+
                     qrcode.makeCode(copyText);
                     codeDiv.classList.remove('d-hide')
                     downloadQr.classList.remove('d-hide')
                     copyQr.classList.remove('d-hide')
                     share.classList.remove('d-hide')
-                    
+
                 })
                 .catch(err => { alert(err) })
         });
     } else {
         toastError.classList.remove('d-hide')
-        
+
         setTimeout(() => {
             toastError.classList.add('d-hide')
         }, 1500)
@@ -123,7 +127,7 @@ async function copyQrfunc(){
     const imgQr= document.querySelector('div.qr img')
     const data=await fetch(imgQr.src);
     const blob = await data.blob();
-    
+
     try{
         await navigator.clipboard.write([
             new ClipboardItem({
@@ -163,5 +167,27 @@ sharer.addEventListener('click',()=>{
     window.open(tweet, "_blank");
 })
 
+const validateExpiryCount = (expiryCount) => {
+    if(expiryCount && +expiryCount < 1) {
+        return '1';
+    }
+    return expiryCount;
+}
+
+const toggleViewCount = () => {
+  viewCountEnabled = !viewCountEnabled;
+  const img = document.querySelector(".container > img");
+  const viewCountInput = document.querySelector("#expiry-count");
+  if(viewCountEnabled){
+    img.src = "on-button.png";
+    viewCountInput.style.display = "block";
+  }else{
+    img.src = "off-button.png";
+    viewCountInput.style.display = "none";
+  }
+}
+
+toggleBtn.addEventListener('click', toggleViewCount);
+
 //backBtn.addEventListener('click', () => {})