Skip to content

Commit d4c0ccb

Browse files
shweshishweshi
committed
share
1 parent 73f9619 commit d4c0ccb

3 files changed

Lines changed: 158 additions & 4 deletions

File tree

‎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: 250px;
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/index.html‎

Lines changed: 20 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" onclick="share()">Share</button>
80+
<div id="bottom" class="bottom">
81+
<h3>Share a link of this snippet</h3>
82+
<input type="text" id="shareLink" class="input"></input>
83+
<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>

‎src/js/main.js‎

Lines changed: 42 additions & 0 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() {
@@ -154,4 +164,36 @@ window.onclick = function (event) {
154164
}
155165
}
156166
}
167+
}
168+
169+
function share() {
170+
var tooltip = document.getElementById('bottom');
171+
if (tooltip.style.display != 'block') {
172+
tooltip.style.display = 'block';
173+
const input = document.getElementById('shareLink');
174+
input.value = 'https://editpad.org?content=' + getEncodedContent();
175+
input.select();
176+
} else {
177+
tooltip.style.display = 'none';
178+
}
179+
}
180+
181+
function getEncodedContent() {
182+
const content = document.getElementById("text").value;
183+
return btoa(content);
184+
}
185+
186+
function copyToClipboard() {
187+
const content = document.getElementById("text");
188+
189+
content.select();
190+
content.setSelectionRange(0, 99999); /* For mobile devices */
191+
document.execCommand("copy");
192+
193+
var copied = document.getElementById('copied');
194+
if (copied.style.display != 'block') {
195+
copied.style.display = 'block';
196+
} else {
197+
copied.style.display = 'none';
198+
}
157199
}

0 commit comments

Comments
 (0)