DebaucheryLibrarian
/
based
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added copy buttons. Linked header (resets page).

This commit is contained in:
DebaucheryLibrarian 2025-02-20 22:42:43 +00:00
parent 1b9d25b37d
commit 38ac7c1deb
1 changed files with 157 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
index.html
View File

@ -48,6 +48,11 @@
color: #fff;
}
.title-link {
color: inherit;
text-decoration: none;
}
.title {
padding: .5rem 1rem;
margin: 0;
@ -78,7 +83,6 @@
justify-content: center;
box-sizing: border-box;
padding: 1rem;
margin-bottom: 1rem;
}
.section-heading {
@ -88,13 +92,16 @@
.row {
width: 100%;
display: flex;
align-items: center;
gap: 1rem;
}
.input {
font-size: 1.25rem;
.row-segment {
flex-grow: 1;
}
.input {
width: 100%;
font-size: 1.25rem;
box-sizing: border-box;
padding: .5rem .75rem;
border: solid 1px var(--shadow);
@ -107,6 +114,37 @@
box-shadow: 0 0 3px var(--shadow);
}
.copy {
display: flex;
justify-content: flex-end;
gap: .25rem;
margin-top: .5rem;
}
.copy-button {
padding: .25rem .5rem;
background: rgba(0, 0, 0, .1);
color: #555;
font-weight: bold;
font-size: .8rem;
border: none;
border-radius: .25rem;
}
.copy-button:not(:disabled):hover {
cursor: pointer;
background: var(--primary);
color: #fff;
}
.copy-button:disabled {
color: #999;
}
.arrow {
margin-top: .5rem;
}
.arrow-down {
display: none;
}
@ -126,6 +164,12 @@
font-size: 1rem;
}
.arrow {
display: block;
text-align: center;
margin-top: .25rem;
}
.arrow-right{
display: none;
}
@ -133,6 +177,11 @@
.arrow-down {
display: inline-block;
}
.copy {
justify-content: center;
margin-top: .75rem;
}
}
</style>
@ -141,33 +190,56 @@
<body>
<header class="header">
<h1 class="title">Based</h1>
<a
href="./"
class="title-link"
>
<h1 class="title">Based</h1>
</a>
</header>
<span
id="feedback"
class="feedback feedback-copy hidden"
>Copied '<span id="feedbackValue" class="feedback-value"></span>' to clipboard!</span>
>Copied <span id="feedbackValue" class="feedback-value"></span> to clipboard!</span>
<section class="section">
<h2 class="section-heading">Encode</h2>
<div class="row">
<input
id="nameInput"
placeholder="Name"
class="input"
>
<div class="row-segment">
<input
id="nameInput"
placeholder="Name"
class="input"
>
</div>
<span class="arrow arrow-right">&#x27A1;</span>
<span class="arrow arrow-down"> &#x2B07;</span>
<input
id="codeOutput"
placeholder="Code"
class="input"
readonly
>
<div class="row-segment">
<input
id="codeOutput"
placeholder="Code"
class="input"
readonly
>
<div class="copy">
<button
id="copyReddit"
class="copy-button"
disabled
>Copy for Reddit</button>
<button
id="copyMarkdown"
class="copy-button"
disabled
>Copy Markdown</button>
</div>
</div>
</div>
</section>
@ -175,21 +247,25 @@
<h2 class="section-heading">Decode</h2>
<div class="row">
<input
id="codeInput"
placeholder="Code"
class="input"
>
<div class="row-segment">
<input
id="codeInput"
placeholder="Code"
class="input"
>
</div>
<span class="arrow arrow-right">&#x27A1;</span>
<span class="arrow arrow-down"> &#x2B07;</span>
<input
id="nameOutput"
placeholder="Name"
class="input"
readonly
>
<div class="row-segment">
<input
id="nameOutput"
placeholder="Name"
class="input"
readonly
>
</div>
</div>
</section>
</body>
@ -203,6 +279,9 @@
const feedback = document.querySelector('#feedback');
const feedbackValue = document.querySelector('#feedbackValue');
const copyReddit = document.querySelector('#copyReddit');
const copyMarkdown = document.querySelector('#copyMarkdown');
function normalize(text) {
return text
.normalize("NFD")
@ -219,6 +298,15 @@
const encoded = base32.encode(normalized).toUpperCase();
codeOutput.value = encoded;
const url = new URL(window.location);
url.searchParams.set('code', encoded);
history.replaceState(null, '', url);
copyReddit.disabled = encoded.length === 0;
copyMarkdown.disabled = encoded.length === 0;
}
function getName() {
@ -231,6 +319,15 @@
nameInput.addEventListener('input', () => getCode());
codeInput.addEventListener('input', () => getName());
function showCopyFeedback(text) {
feedbackValue.textContent = text;
feedback.classList.remove('hidden');
setTimeout(() => {
feedback.classList.add('hidden');
}, 1000);
}
function selectCopy(event, type) {
const text = event.target.value;
@ -241,12 +338,7 @@
event.target.select();
navigator.clipboard.writeText(text);
feedbackValue.textContent = text;
feedback.classList.remove('hidden');
setTimeout(() => {
feedback.classList.add('hidden');
}, 1000);
showCopyFeedback(`'${text}'`);
if (typeof umami !== 'undefined') {
umami.track(type, text);
@ -259,6 +351,37 @@
nameInput.addEventListener('focus', (event) => event.target.select());
codeInput.addEventListener('focus', (event) => event.target.select());
copyReddit.addEventListener('click', async (event) => {
const code = codeOutput.value;
const span = document.createElement('span');
const text = document.createTextNode('Code: ');
const link = document.createElement('a');
link.href = `${window.location.origin}${window.location.pathname}?code=${code}>`;
link.textContent = code;
span.appendChild(text);
span.appendChild(link);
const blob = new Blob([span.innerHTML], { type: 'text/html' });
const data = [new ClipboardItem({ 'text/html': blob })];
await navigator.clipboard.write(data);
// navigator.clipboard.writeText(`Code: <a href="${window.location.origin}${window.location.pathname}?code=${code}">${code}</a>`);
showCopyFeedback('linked code for Reddit');
});
copyMarkdown.addEventListener('click', (event) => {
const code = codeOutput.value;
navigator.clipboard.writeText(`Code: [${code}](${window.location.origin}${window.location.pathname}?code=${code})`);
showCopyFeedback('linked code for Markdown');
});
const query = new URL(window.location);
const urlName = query.searchParams.get('name');