share feature done

Author: shweshi

README.md

@@ -15,6 +15,9 @@ Edit Pad is an easy and clean Online text editor and note taking tool. Take note
 ### Customizable
 - Theme can be customize as per your choice.
 
+### Easy share
+- Share your content easily.
+
 ## Usages
 Use online here: https://editpad.shashi.dev
 

src/css/style.css

@@ -198,7 +198,7 @@ a:visited {
 }
 
 .tooltip .bottom {
-    min-width: 250px;
+    min-width: 280px;
     /*max-width:400px;*/
     top: 40px;
     left: 50%;

src/images/share.png

@@ -76,15 +76,15 @@
             🌓 Day/Night
         </button>
         <div id="tooltip" class="tooltip">
-            <button id="share" class="header-button" onclick="share()">Share</button>
+            <button id="share" class="header-button share-button" onclick="share()"><img width="12px" height="12px" src="images/share.png"></img> Share</button>
             <div id="bottom" class="bottom">
-                <h3>Share a link of this snippet</h3>
+                <h3>Share a link of this snippet [BETA]</h3>
                 <input type="text" id="shareLink" class="input"></input>
-                <div style="display: flex; justify-content: space-between;">
+                <div class="share-div" style="display: flex; justify-content: space-between;">
                     <button class="shareLinkButton" onclick="copyToClipboard()">
                         Copy Link
                     </button>
-                    <span id="copied" class="copied">Copied!</span>
+                    <span id="copied" class="copied">Copied!!!</span>
                 </div>
 
                 <i></i>
@@ -203,6 +203,7 @@ <h3>Share a link of this snippet</h3>
 
     document.getElementById("closeFullScreen").style.display = "none";
     setCleanRequired(1);
+    setContent();
     getRandomQuote();
     checkDarkMode();
     printConsoleArt();

src/index.html

@@ -134,23 +134,11 @@ function resizeText(multiplier) {
     document.getElementById("text").style.fontSize = parseFloat(document.getElementById("text").style.fontSize) + (multiplier * 0.2) + "em";
 }
 
-function printConsoleArt() {
-    const consoleStr = `
-    ███████ ██████  ██ ████████ ██████   █████  ██████  
-    ██      ██   ██ ██    ██    ██   ██ ██   ██ ██   ██ 
-    █████   ██   ██ ██    ██    ██████  ███████ ██   ██ 
-    ██      ██   ██ ██    ██    ██      ██   ██ ██   ██ 
-    ███████ ██████  ██    ██    ██      ██   ██ ██████  
-                                                        
-                        
-    Github: https://github.com/shweshi/editpad
-    `
-    console.log(consoleStr);
-}
-
 // Close the dropdown menu if the user clicks outside of it
 window.onclick = function (event) {
-    if (event.target.matches('.font') || event.target.matches('.color-button')) {
+    if (event.target.matches('.font') || event.target.matches('.color-button') || event.target.matches('.share-button') || event.target.matches('.bottom')
+        || event.target.matches('.input') || event.target.matches('.shareLinkButton') || event.target.matches('h3') || event.target.matches('.share-div')
+        || event.target.matches('.copied')) {
         event.stopPropagation();
     } else {
         if (!event.target.matches('.dropbtn')) {
@@ -163,6 +151,10 @@ window.onclick = function (event) {
                 }
             }
         }
+
+        if (!event.target.matches('.share-button')) {
+            document.getElementById('bottom').style.display = 'none';
+        }
     }
 }
 
@@ -171,7 +163,7 @@ function share() {
     if (tooltip.style.display != 'block') {
         tooltip.style.display = 'block';
         const input = document.getElementById('shareLink');
-        input.value = 'https://editpad.org?content=' + getEncodedContent();
+        input.value = 'https://editpad.shashi.dev?content=' + getEncodedContent();
         input.select();
     } else {
         tooltip.style.display = 'none';
@@ -180,11 +172,11 @@ function share() {
 
 function getEncodedContent() {
     const content = document.getElementById("text").value;
-    return btoa(content);
+    return window.btoa(content);
 }
 
 function copyToClipboard() {
-    const content = document.getElementById("text");
+    const content = document.getElementById("shareLink");
 
     content.select();
     content.setSelectionRange(0, 99999); /* For mobile devices */
@@ -196,4 +188,32 @@ function copyToClipboard() {
     } else {
         copied.style.display = 'none';
     }
+}
+
+function setContent() {
+    let params = (new URL(document.location)).searchParams;
+    let content = params.get("content");
+    if (content) {
+        let textarea = document.querySelector('textarea')
+
+        text = window.atob(content);
+        textarea.value = text;
+        setCleanRequired(0);
+    }
+}
+
+function printConsoleArt() {
+    const consoleStr = `
+    ███████ ██████  ██ ████████ ██████   █████  ██████  
+    ██      ██   ██ ██    ██    ██   ██ ██   ██ ██   ██ 
+    █████   ██   ██ ██    ██    ██████  ███████ ██   ██ 
+    ██      ██   ██ ██    ██    ██      ██   ██ ██   ██ 
+    ███████ ██████  ██    ██    ██      ██   ██ ██████  
+                                                        
+                        
+    Github: https://github.com/shweshi/editpad
+
+    Version: 1.0.1
+    `
+    console.log(consoleStr);
 }

src/js/main.js

@@ -1,4 +1,4 @@
-var cacheName = 'editpad-v1';
+var cacheName = 'editpad-v2';
 var filesToCache = [
     '/',
     '/index.html',