Skip to content

Commit

Permalink
Merge pull request #22 from shweshi/dev
Browse files Browse the repository at this point in the history 
Share feature
  • Loading branch information
@shweshi
shweshi authored Jun 23, 2021
2 parents 6a572a2 + b4c3ea9 commit 5e27d1a
Show file tree
Hide file tree
Showing 6 changed files with 198 additions and 20 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
96 changes: 96 additions & 0 deletions src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Binary file added src/images/share.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
25 changes: 21 additions & 4 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -187,6 +203,7 @@

document.getElementById("closeFullScreen").style.display = "none";
setCleanRequired(1);
setContent();
getRandomQuote();
checkDarkMode();
printConsoleArt();
Expand Down
92 changes: 77 additions & 15 deletions src/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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')) {
Expand All @@ -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);
}
2 changes: 1 addition & 1 deletion src/sw.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
var cacheName = 'editpad-v1';
var cacheName = 'editpad-v2';
var filesToCache = [
'/',
'/index.html',
Expand Down

0 comments on commit 5e27d1a

Please sign in to comment.