Merge pull request #22 from shweshi/dev

shweshi · web-flow · commit 5e27d1ac8a29 · 2021-06-23T22:21:51.000+05:30
Share feature
diff --git a/README.md b/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
 
diff --git a/src/css/style.css b/src/css/style.css
@@ -147,6 +147,102 @@ a:visited {
     background-color: #1e1e1e !important;
 }
 
+.dark-mode-bottom {
+    background-color: #1e1e1e !important;
+}
+
+.dark-mode-bottom h3 {
+    color: white;
+}
+
+.dark-mode-bottom .shareLinkButton {
+    color: white;
+}
+
+.dark-mode-bottom .copied {
+    color: white;
+}
+
+.dark-mode-bottom .bottom i::after {
+    color: #1e1e1e;
+}
+
+.dark-mode-input {
+    background-color: #5b5f7c !important;
+    color: white;
+}
+
+.tooltip {
+    display: inline-block;
+    position: relative;
+    text-align: left;
+}
+
+.tooltip h3 {
+    margin: 0px 0px 10px 0px;
+}
+
+.shareLinkButton {
+    background: none;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    margin: 12px 0px 0px 0px;
+    font-weight: bold;
+}
+
+.copied {
+    display: none;
+    margin: 12px 0px 0px 0px;
+}
+
+.tooltip .bottom {
+    min-width: 280px;
+    /*max-width:400px;*/
+    top: 40px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    padding: 20px;
+    color: #121212;
+    background-color: #CEC98D;
+    font-weight: normal;
+    font-size: 13px;
+    border-radius: 8px;
+    position: absolute;
+    z-index: 99999999;
+    box-sizing: border-box;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
+    display: none;
+}
+
+.tooltip .bottom i {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    margin-left: -12px;
+    width: 24px;
+    height: 12px;
+    overflow: hidden;
+}
+
+.tooltip .bottom i::after {
+    content: '';
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    left: 50%;
+    transform: translate(-50%, 50%) rotate(45deg);
+    background-color: #CEC98D;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
+}
+
+.tooltip .input {
+    width: 200px;
+    padding: 8px;
+    background-color: #c9e9719a;
+}
+
 @media all and (max-width: 782px) {
     .clock {
         display: none;
diff --git a/src/images/share.png b/src/images/share.png
diff --git a/src/index.html b/src/index.html
@@ -75,6 +75,22 @@
         <button id="daynight" class="header-button" onclick="toggleDayNight()">
             &#127763; Day/Night
         </button>
+        <div id="tooltip" class="tooltip">
+            <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 [BETA]</h3>
+                <input type="text" id="shareLink" class="input"></input>
+                <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>
+                </div>
+
+                <i></i>
+            </div>
+        </div>
+
         <div class="dropdown">
             <button id="more" class="header-button dropbtn" onclick="showMore()">&vellip; More</button>
             <div id="more-dropdown" class="dropdown-content">
@@ -141,10 +157,10 @@
                     </div>
                 </div>
                 <div class="extra">
-                    <a rel="noopener" href="https://github.com/shweshi/editpad" target="_blank"><img width=auto; height=35px;
-                            style=" padding-bottom: 8px; " src="images/github.png" /></a>
-                    <a rel="noopener" href="https://play.google.com/store/apps/details?id=com.shweshi.editpad" target="_blank"><img
-                            width=auto; height=50px; src="images/playstore.png" /></a>
+                    <a rel="noopener" href="https://github.com/shweshi/editpad" target="_blank"><img width=auto;
+                            height=35px; style=" padding-bottom: 8px; " src="images/github.png" /></a>
+                    <a rel="noopener" href="https://play.google.com/store/apps/details?id=com.shweshi.editpad"
+                        target="_blank"><img width=auto; height=50px; src="images/playstore.png" /></a>
                 </div>
             </div>
         </div>
@@ -187,6 +203,7 @@
 
     document.getElementById("closeFullScreen").style.display = "none";
     setCleanRequired(1);
+    setContent();
     getRandomQuote();
     checkDarkMode();
     printConsoleArt();
diff --git a/src/js/main.js b/src/js/main.js
@@ -96,6 +96,16 @@ function applyDarkMode() {
     for (i = 0; i < dropdown.length; i++) {
         dropdown[i].classList.toggle("dark-mode-dropdown-content");
     }
+
+    var tooltip = document.getElementsByClassName("bottom");
+    for (i = 0; i < dropdown.length; i++) {
+        tooltip[i].classList.toggle("dark-mode-bottom");
+    }
+
+    var input = document.getElementsByClassName("input");
+    for (i = 0; i < dropdown.length; i++) {
+        input[i].classList.toggle("dark-mode-input");
+    }
 }
 
 function checkDarkMode() {
@@ -124,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')) {
@@ -153,5 +151,69 @@ window.onclick = function (event) {
                 }
             }
         }
+
+        if (!event.target.matches('.share-button')) {
+            document.getElementById('bottom').style.display = 'none';
+        }
+    }
+}
+
+function share() {
+    var tooltip = document.getElementById('bottom');
+    if (tooltip.style.display != 'block') {
+        tooltip.style.display = 'block';
+        const input = document.getElementById('shareLink');
+        input.value = 'https://editpad.shashi.dev?content=' + getEncodedContent();
+        input.select();
+    } else {
+        tooltip.style.display = 'none';
     }
+}
+
+function getEncodedContent() {
+    const content = document.getElementById("text").value;
+    return window.btoa(content);
+}
+
+function copyToClipboard() {
+    const content = document.getElementById("shareLink");
+
+    content.select();
+    content.setSelectionRange(0, 99999); /* For mobile devices */
+    document.execCommand("copy");
+
+    var copied = document.getElementById('copied');
+    if (copied.style.display != 'block') {
+        copied.style.display = 'block';
+    } 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);
 }
diff --git a/src/sw.js b/src/sw.js
@@ -1,4 +1,4 @@
-var cacheName = 'editpad-v1';
+var cacheName = 'editpad-v2';
 var filesToCache = [
     '/',
     '/index.html',

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-var cacheName = 'editpad-v1';`
	`1`	`+var cacheName = 'editpad-v2';`
`2`	`2`	`var filesToCache = [`
`3`	`3`	`'/',`
`4`	`4`	`'/index.html',`