Skip to content

Commit bc49dc1

Browse files
dotzerodotzero
committed
Add copy and paste buttons for mobile
1 parent 430f997 commit bc49dc1

4 files changed

Lines changed: 116 additions & 1 deletion

File tree

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2022 dotzero
3+
Copyright (c) 2026 dotzero
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎static/css/application.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,10 @@ form {
8181
border-radius: 1px;
8282
}
8383

84+
.toolbar_shell {
85+
display: none;
86+
}
87+
8488
.stack {
8589
position: absolute;
8690
top: 30px;
@@ -150,6 +154,27 @@ form {
150154
border-radius: 3px;
151155
}
152156

157+
.toolbar {
158+
display: flex;
159+
gap: 10px;
160+
}
161+
162+
.toolbar_button {
163+
min-height: 42px;
164+
padding: 0 16px;
165+
border: 1px solid #cfd5dc;
166+
background: #f7f9fb;
167+
color: #3a3b3c;
168+
font: normal 14px Arial, Helvetica, sans-serif;
169+
border-radius: 10px;
170+
cursor: pointer;
171+
-webkit-tap-highlight-color: transparent;
172+
}
173+
174+
.toolbar_button:active {
175+
background: #e9edf2;
176+
}
177+
153178
.stack .layer_1 .layer_2 .layer_3 .contents {
154179
width: 100%;
155180
height: 100%;
@@ -180,3 +205,45 @@ form {
180205
font: normal 18px Arial, sans-serif;
181206
color: #aaacb0;
182207
}
208+
209+
@media (max-width: 640px) {
210+
#loading {
211+
top: 14px;
212+
left: 18px;
213+
}
214+
215+
.toolbar_shell {
216+
display: block;
217+
position: absolute;
218+
top: 18px;
219+
right: 16px;
220+
left: 16px;
221+
z-index: 2;
222+
}
223+
224+
.stack {
225+
top: 82px;
226+
right: 16px;
227+
bottom: 24px;
228+
left: 16px;
229+
}
230+
231+
.stack .layer_1 .layer_2 .layer_3 {
232+
padding: 14px 14px 16px;
233+
}
234+
235+
.toolbar {
236+
gap: 8px;
237+
}
238+
239+
.toolbar_button {
240+
flex: 1;
241+
min-height: 46px;
242+
padding: 0 12px;
243+
font-size: 15px;
244+
}
245+
246+
.stack .layer_1 .layer_2 .layer_3 .contents {
247+
font-size: 16px;
248+
}
249+
}

‎static/js/application.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,50 @@ $(function() {
22
var $textarea = $("#contents"),
33
$printarea = $('#printable_contents'),
44
$loading = $("#loading"),
5+
$copyButton = $("#copy_button"),
6+
$pasteButton = $("#paste_button"),
57
content = $textarea.val();
68

9+
function selectAllContents() {
10+
var textarea = $textarea.get(0);
11+
12+
$textarea.trigger("focus");
13+
textarea.setSelectionRange(0, textarea.value.length);
14+
}
15+
16+
async function copyContents() {
17+
var text = $textarea.val();
18+
19+
if (navigator.clipboard && window.isSecureContext) {
20+
await navigator.clipboard.writeText(text);
21+
return;
22+
}
23+
24+
// fallback for older browsers
25+
selectAllContents();
26+
document.execCommand("copy");
27+
}
28+
29+
async function pasteContents() {
30+
if (navigator.clipboard && window.isSecureContext) {
31+
$textarea.val(await navigator.clipboard.readText());
32+
return;
33+
}
34+
35+
// fallback for older browsers
36+
$textarea.focus();
37+
$textarea.setSelectionRange(0, $textarea.value.length);
38+
document.execCommand("paste");
39+
}
40+
41+
$copyButton.on("click", function() {
42+
copyContents().catch(function() {});
43+
});
44+
45+
$pasteButton.on("click", function() {
46+
pasteContents().catch(function() {});
47+
});
48+
749
$printarea.text(content);
850

951
setInterval(function() {

‎templates/main.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@
1111
<link href="/assets/css/print.css" rel="stylesheet" media="print" />
1212
</head>
1313
<body>
14+
<div class="toolbar_shell">
15+
<div class="toolbar">
16+
<button type="button" id="copy_button" class="toolbar_button">Copy</button>
17+
<button type="button" id="paste_button" class="toolbar_button">Paste</button>
18+
</div>
19+
</div>
1420
<div class="stack">
1521
<div class="layer_1">
1622
<div class="layer_2">

0 commit comments

Comments
 (0)