Add copy button
This commit is contained in:
Glitchii
parent
d2590ec216
commit
419b0f60de
4 changed files with 86 additions and 18 deletions
|
|
@ -1806,6 +1806,26 @@ body {
|
|||
transition: .5s ease;
|
||||
}
|
||||
|
||||
.top-btn.copy {
|
||||
left: 190px;
|
||||
}
|
||||
|
||||
.top-btn.copy>svg {
|
||||
width: 15px;
|
||||
left: 1px;
|
||||
top: -.5px;
|
||||
}
|
||||
|
||||
.top-btn.copy>svg.mark {
|
||||
width: 18px;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
.top-btn.copy>svg * {
|
||||
fill: var(#fff);
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.top-btn>svg {
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
|
|
@ -1878,21 +1898,23 @@ body {
|
|||
.top-btn.menu>.box .item>input {
|
||||
pointer-events: none;
|
||||
}
|
||||
.top-btn.menu > .box .item > .icon::after {
|
||||
|
||||
.top-btn.menu>.box .item>.icon::after {
|
||||
display: none;
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #00bb9c;
|
||||
z-index: 1000000;
|
||||
border-radius: 100%;
|
||||
left: 7px;
|
||||
transform: translateY(7px);
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #00bb9c;
|
||||
z-index: 1000000;
|
||||
border-radius: 100%;
|
||||
left: 7px;
|
||||
transform: translateY(7px);
|
||||
}
|
||||
|
||||
body.autoUpdateURL .top-btn.menu > .box .item.auto > .icon::after,
|
||||
body.reversed .top-btn.menu > .box .item.reverse > .icon::after {
|
||||
body.autoUpdateURL .top-btn.menu>.box .item.auto>.icon::after,
|
||||
body.no-user .top-btn.menu>.box .item.noUser>.icon::after,
|
||||
body.reversed .top-btn.menu>.box .item.reverse>.icon::after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -2047,7 +2069,7 @@ body.emptyEmbed.emptyContent .emptyTxt {
|
|||
position: absolute;
|
||||
cursor: pointer;
|
||||
z-index: 5;
|
||||
left: 170px;
|
||||
left: 226px;
|
||||
border-left: 2px solid #4c5057;
|
||||
padding-left: 15px;
|
||||
bottom: auto;
|
||||
|
|
@ -2056,6 +2078,7 @@ body.emptyEmbed.emptyContent .emptyTxt {
|
|||
|
||||
.pickerToggle>svg {
|
||||
width: 17px;
|
||||
transform: translateY(2px);
|
||||
}
|
||||
|
||||
.main .side1 {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ var params = new URL(top.location.href).searchParams,
|
|||
useJsonEditor = params.get('editor') === 'json' || options.useJsonEditor,
|
||||
verified = hasParam('verified') || options.verified,
|
||||
reverseColumns = hasParam('reverse') || options.reverseColumns,
|
||||
noUser = hasParam('nouser') || options.noUser,
|
||||
noUser = localStorage.getItem('noUser') || hasParam('nouser') || options.noUser,
|
||||
onlyEmbed = hasParam('embed') || options.onlyEmbed,
|
||||
allowPlaceholders = hasParam('placeholders') || options.allowPlaceholders,
|
||||
autoUpdateURL = localStorage.getItem('autoUpdateURL') || options.autoUpdateURL,
|
||||
|
|
@ -927,7 +927,7 @@ addEventListener('DOMContentLoaded', () => {
|
|||
})
|
||||
|
||||
document.querySelector('.top-btn.menu').addEventListener('click', e => {
|
||||
if (e.target.closest('.item.datalink'))
|
||||
if (e.target.closest('.item.dataLink'))
|
||||
return prompt('Here\'s the current URL with base64 embed data:', jsonToBase64(json, true));
|
||||
|
||||
const input = e.target.closest('.item')?.querySelector('input');
|
||||
|
|
@ -942,6 +942,9 @@ addEventListener('DOMContentLoaded', () => {
|
|||
reverse(reverseColumns);
|
||||
reverseColumns = !reverseColumns;
|
||||
toggleStored('reverseColumns');
|
||||
} else if (e.target.closest('.item.noUser')) {
|
||||
document.body.classList.toggle('no-user');
|
||||
toggleStored('noUser');
|
||||
} else if (e.target.closest('.item.auto-params')) {
|
||||
if (input.checked) localStorage.setItem('autoParams', true);
|
||||
else localStorage.removeItem('autoParams');
|
||||
|
|
@ -987,4 +990,29 @@ addEventListener('DOMContentLoaded', () => {
|
|||
})
|
||||
|
||||
if (onlyEmbed) document.querySelector('.side1')?.remove();
|
||||
|
||||
document.querySelector('.top-btn.copy').addEventListener('click', e => {
|
||||
const mark = e.target.closest('.top-btn.copy').querySelector('.mark'),
|
||||
jsonData = JSON.stringify(json, null, 4),
|
||||
next = () => {
|
||||
mark.classList.remove('hidden');
|
||||
mark.previousElementSibling.classList.add('hidden');
|
||||
|
||||
setTimeout(() => {
|
||||
mark.classList.add('hidden');
|
||||
mark.previousElementSibling.classList.remove('hidden');
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
if (!navigator.clipboard?.writeText(jsonData).then(next).catch(err => alert('Could not copy to clipboard: ' + err.message))) {
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = jsonData;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
textarea.setSelectionRange(0, 50000);
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
next();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -5,7 +5,6 @@ options = {
|
|||
avatar: 'https://cdn.discordapp.com/embed/avatars/1.png',
|
||||
verified: false,
|
||||
noUser: false,
|
||||
hasParam: false,
|
||||
dataSpecified: false,
|
||||
guiTabs: ['author', 'description'],
|
||||
useJsonEditor: false,
|
||||
|
|
|
|||
22
index.html
22
index.html
|
|
@ -57,6 +57,16 @@
|
|||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="top-btn copy">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve" title="Copy JSON data">
|
||||
<g>
|
||||
<path fill="currentColor" d="M437.781,36.885C415.688,13.395,384.888,0.052,352.64,0H288c-60.623,0.095-111.219,46.301-116.8,106.667H160 C95.228,106.737,42.737,159.228,42.667,224v170.667C42.737,459.439,95.228,511.929,160,512h85.333 c64.772-0.071,117.263-52.561,117.333-117.333v-11.2c60.37-5.572,106.582-56.173,106.667-116.8V116.693 C469.376,87.041,458.089,58.492,437.781,36.885z M298.667,394.667c0,29.455-23.878,53.333-53.333,53.333H160 c-29.455,0-53.333-23.878-53.333-53.333V224c0-29.455,23.878-53.333,53.333-53.333h10.667v96 C170.737,331.439,223.228,383.929,288,384h10.667V394.667z M405.333,266.667C405.333,296.122,381.455,320,352,320h-64 c-29.455,0-53.333-23.878-53.333-53.333V117.333C234.667,87.878,258.545,64,288,64h53.333v21.333 C341.333,108.897,360.436,128,384,128h21.333V266.667z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" class="mark hidden">
|
||||
<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="pickerToggle">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve">
|
||||
<path style="fill:#D8D8DA;" d="M256,0C114.615,0,0,114.615,0,256s114.615,256,256,256s256-114.615,256-256S397.385,0,256,0z M256,336.842c-44.648,0-80.842-36.194-80.842-80.842s36.194-80.842,80.842-80.842s80.842,36.194,80.842,80.842 S300.648,336.842,256,336.842z"></path>
|
||||
|
|
@ -95,11 +105,11 @@
|
|||
</svg>
|
||||
</div>
|
||||
<div class="top-btn menu">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
|
||||
</svg>
|
||||
<div class="box">
|
||||
<div class="item normal datalink">
|
||||
<div class="item normal dataLink">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve" height="16" width="16">
|
||||
<g>
|
||||
|
|
@ -140,6 +150,14 @@
|
|||
</div>
|
||||
<div>Reverse editor and preview</div>
|
||||
</div>
|
||||
<div class="item normal noUser">
|
||||
<div class="icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-x-fill" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm6.146-2.854a.5.5 0 0 1 .708 0L14 6.293l1.146-1.147a.5.5 0 0 1 .708.708L14.707 7l1.147 1.146a.5.5 0 0 1-.708.708L14 7.707l-1.146 1.147a.5.5 0 0 1-.708-.708L13.293 7l-1.147-1.146a.5.5 0 0 1 0-.708z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>Hide username and avatar</div>
|
||||
</div>
|
||||
<div class="vs"></div>
|
||||
<div class="item auto-params">
|
||||
<input id="auto" name="auto" autocomplete="off" type="checkbox">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue