Skip to content

Commit 5e27d1a

Browse files
shweshishweshi
authored
Merge pull request #22 from shweshi/dev
Share feature
2 parents 6a572a2 + b4c3ea9 commit 5e27d1a

6 files changed

Lines changed: 198 additions & 20 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ Edit Pad is an easy and clean Online text editor and note taking tool. Take note
1515
### Customizable
1616
- Theme can be customize as per your choice.
1717

18+
### Easy share
19+
- Share your content easily.
20+
1821
## Usages
1922
Use online here: https://editpad.shashi.dev
2023

‎src/css/style.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,102 @@ a:visited {
147147
background-color: #1e1e1e !important;
148148
}
149149

150+
.dark-mode-bottom {
151+
background-color: #1e1e1e !important;
152+
}
153+
154+
.dark-mode-bottom h3 {
155+
color: white;
156+
}
157+
158+
.dark-mode-bottom .shareLinkButton {
159+
color: white;
160+
}
161+
162+
.dark-mode-bottom .copied {
163+
color: white;
164+
}
165+
166+
.dark-mode-bottom .bottom i::after {
167+
color: #1e1e1e;
168+
}
169+
170+
.dark-mode-input {
171+
background-color: #5b5f7c !important;
172+
color: white;
173+
}
174+
175+
.tooltip {
176+
display: inline-block;
177+
position: relative;
178+
text-align: left;
179+
}
180+
181+
.tooltip h3 {
182+
margin: 0px 0px 10px 0px;
183+
}
184+
185+
.shareLinkButton {
186+
background: none;
187+
border: none;
188+
padding: 0;
189+
font: inherit;
190+
cursor: pointer;
191+
margin: 12px 0px 0px 0px;
192+
font-weight: bold;
193+
}
194+
195+
.copied {
196+
display: none;
197+
margin: 12px 0px 0px 0px;
198+
}
199+
200+
.tooltip .bottom {
201+
min-width: 280px;
202+
/*max-width:400px;*/
203+
top: 40px;
204+
left: 50%;
205+
transform: translate(-50%, 0);
206+
padding: 20px;
207+
color: #121212;
208+
background-color: #CEC98D;
209+
font-weight: normal;
210+
font-size: 13px;
211+
border-radius: 8px;
212+
position: absolute;
213+
z-index: 99999999;
214+
box-sizing: border-box;
215+
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
216+
display: none;
217+
}
218+
219+
.tooltip .bottom i {
220+
position: absolute;
221+
bottom: 100%;
222+
left: 50%;
223+
margin-left: -12px;
224+
width: 24px;
225+
height: 12px;
226+
overflow: hidden;
227+
}
228+
229+
.tooltip .bottom i::after {
230+
content: '';
231+
position: absolute;
232+
width: 12px;
233+
height: 12px;
234+
left: 50%;
235+
transform: translate(-50%, 50%) rotate(45deg);
236+
background-color: #CEC98D;
237+
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
238+
}
239+
240+
.tooltip .input {
241+
width: 200px;
242+
padding: 8px;
243+
background-color: #c9e9719a;
244+
}
245+
150246
@media all and (max-width: 782px) {
151247
.clock {
152248
display: none;

‎src/images/share.png‎

16.2 KB
Loading

‎src/index.html‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,22 @@
7575
<button id="daynight" class="header-button" onclick="toggleDayNight()">
7676
&#127763; Day/Night
7777
</button>
78+
<div id="tooltip" class="tooltip">
79+
<button id="share" class="header-button share-button" onclick="share()"><img width="12px" height="12px" src="images/share.png"></img> Share</button>
80+
<div id="bottom" class="bottom">
81+
<h3>Share a link of this snippet [BETA]</h3>
82+
<input type="text" id="shareLink" class="input"></input>
83+
<div class="share-div" style="display: flex; justify-content: space-between;">
84+
<button class="shareLinkButton" onclick="copyToClipboard()">
85+
Copy Link
86+
</button>
87+
<span id="copied" class="copied">Copied!!!</span>
88+
</div>
89+
90+
<i></i>
91+
</div>
92+
</div>
93+
7894
<div class="dropdown">
7995
<button id="more" class="header-button dropbtn" onclick="showMore()">&vellip; More</button>
8096
<div id="more-dropdown" class="dropdown-content">
@@ -141,10 +157,10 @@
141157
</div>
142158
</div>
143159
<div class="extra">
144-
<a rel="noopener" href="https://github.com/shweshi/editpad" target="_blank"><img width=auto; height=35px;
145-
style=" padding-bottom: 8px; " src="images/github.png" /></a>
146-
<a rel="noopener" href="https://play.google.com/store/apps/details?id=com.shweshi.editpad" target="_blank"><img
147-
width=auto; height=50px; src="images/playstore.png" /></a>
160+
<a rel="noopener" href="https://github.com/shweshi/editpad" target="_blank"><img width=auto;
161+
height=35px; style=" padding-bottom: 8px; " src="images/github.png" /></a>
162+
<a rel="noopener" href="https://play.google.com/store/apps/details?id=com.shweshi.editpad"
163+
target="_blank"><img width=auto; height=50px; src="images/playstore.png" /></a>
148164
</div>
149165
</div>
150166
</div>
@@ -187,6 +203,7 @@
187203

188204
document.getElementById("closeFullScreen").style.display = "none";
189205
setCleanRequired(1);
206+
setContent();
190207
getRandomQuote();
191208
checkDarkMode();
192209
printConsoleArt();

‎src/js/main.js‎

Lines changed: 77 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,16 @@ function applyDarkMode() {
9696
for (i = 0; i < dropdown.length; i++) {
9797
dropdown[i].classList.toggle("dark-mode-dropdown-content");
9898
}
99+
100+
var tooltip = document.getElementsByClassName("bottom");
101+
for (i = 0; i < dropdown.length; i++) {
102+
tooltip[i].classList.toggle("dark-mode-bottom");
103+
}
104+
105+
var input = document.getElementsByClassName("input");
106+
for (i = 0; i < dropdown.length; i++) {
107+
input[i].classList.toggle("dark-mode-input");
108+
}
99109
}
100110

101111
function checkDarkMode() {
@@ -124,23 +134,11 @@ function resizeText(multiplier) {
124134
document.getElementById("text").style.fontSize = parseFloat(document.getElementById("text").style.fontSize) + (multiplier * 0.2) + "em";
125135
}
126136

127-
function printConsoleArt() {
128-
const consoleStr = `
129-
███████ ██████  ██ ████████ ██████  █████  ██████ 
130-
██      ██   ██ ██    ██    ██   ██ ██   ██ ██   ██ 
131-
█████  ██  ██ ██  ██  ██████  ███████ ██  ██ 
132-
██     ██  ██ ██  ██  ██      ██   ██ ██  ██ 
133-
███████ ██████  ██  ██  ██  ██  ██ ██████  
134-
                                          
135-
136-
Github: https://github.com/shweshi/editpad
137-
`
138-
console.log(consoleStr);
139-
}
140-
141137
// Close the dropdown menu if the user clicks outside of it
142138
window.onclick = function (event) {
143-
if (event.target.matches('.font') || event.target.matches('.color-button')) {
139+
if (event.target.matches('.font') || event.target.matches('.color-button') || event.target.matches('.share-button') || event.target.matches('.bottom')
140+
|| event.target.matches('.input') || event.target.matches('.shareLinkButton') || event.target.matches('h3') || event.target.matches('.share-div')
141+
|| event.target.matches('.copied')) {
144142
event.stopPropagation();
145143
} else {
146144
if (!event.target.matches('.dropbtn')) {
@@ -153,5 +151,69 @@ window.onclick = function (event) {
153151
}
154152
}
155153
}
154+
155+
if (!event.target.matches('.share-button')) {
156+
document.getElementById('bottom').style.display = 'none';
157+
}
158+
}
159+
}
160+
161+
function share() {
162+
var tooltip = document.getElementById('bottom');
163+
if (tooltip.style.display != 'block') {
164+
tooltip.style.display = 'block';
165+
const input = document.getElementById('shareLink');
166+
input.value = 'https://editpad.shashi.dev?content=' + getEncodedContent();
167+
input.select();
168+
} else {
169+
tooltip.style.display = 'none';
156170
}
171+
}
172+
173+
function getEncodedContent() {
174+
const content = document.getElementById("text").value;
175+
return window.btoa(content);
176+
}
177+
178+
function copyToClipboard() {
179+
const content = document.getElementById("shareLink");
180+
181+
content.select();
182+
content.setSelectionRange(0, 99999); /* For mobile devices */
183+
document.execCommand("copy");
184+
185+
var copied = document.getElementById('copied');
186+
if (copied.style.display != 'block') {
187+
copied.style.display = 'block';
188+
} else {
189+
copied.style.display = 'none';
190+
}
191+
}
192+
193+
function setContent() {
194+
let params = (new URL(document.location)).searchParams;
195+
let content = params.get("content");
196+
if (content) {
197+
let textarea = document.querySelector('textarea')
198+
199+
text = window.atob(content);
200+
textarea.value = text;
201+
setCleanRequired(0);
202+
}
203+
}
204+
205+
function printConsoleArt() {
206+
const consoleStr = `
207+
███████ ██████  ██ ████████ ██████  █████  ██████ 
208+
██      ██   ██ ██    ██    ██   ██ ██   ██ ██   ██ 
209+
█████  ██  ██ ██  ██  ██████  ███████ ██  ██ 
210+
██     ██  ██ ██  ██  ██      ██   ██ ██  ██ 
211+
███████ ██████  ██  ██  ██  ██  ██ ██████  
212+
                                          
213+
214+
Github: https://github.com/shweshi/editpad
215+
216+
Version: 1.0.1
217+
`
218+
console.log(consoleStr);
157219
}

‎src/sw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
var cacheName = 'editpad-v1';
1+
var cacheName = 'editpad-v2';
22
var filesToCache = [
33
'/',
44
'/index.html',

0 commit comments

Comments
 (0)