The-Naomi-Developers/embedbuilder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Show selected menu options in menu

Browse source
This commit is contained in:
Glitchii 2022-03-07 22:01:09 +00:00
parent a8f2e1b35a
commit 43096f29e0
3 changed files with 65 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
assets/css/index.css
View file

@ -71,6 +71,10 @@ body.no-user .msgEmbed>.contents {
display: none; display: none;
} }
.hidden {
display: none;
}
.main { .main {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -1865,11 +1869,8 @@ body {
transform: translateX(-50%); transform: translateX(-50%);
} }
/* .top-btn.menu>.box .item>svg { .top-btn.menu>.box .item> :is(*, *>svg) {
transform: translateY(3px); display: flex;
} */
.top-btn.menu>.box .item>* {
align-self: flex-end; align-self: flex-end;
margin: 0; margin: 0;
} }
@ -1877,6 +1878,23 @@ body {
.top-btn.menu>.box .item>input { .top-btn.menu>.box .item>input {
pointer-events: none; pointer-events: none;
} }
.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);
}
body.autoUpdateURL .top-btn.menu > .box .item.auto > .icon::after,
body.reversed .top-btn.menu > .box .item.reverse > .icon::after {
display: block;
}
.top-btn.menu.active { .top-btn.menu.active {
background: var(--bgc); background: var(--bgc);

6
assets/js/script.js
View file

@ -146,7 +146,7 @@ addEventListener('DOMContentLoaded', () => {
if (reverseColumns || localStorage.getItem('reverseColumns')) if (reverseColumns || localStorage.getItem('reverseColumns'))
reverse(); reverse();
if (autoUpdateURL) if (autoUpdateURL)
document.querySelector('.top-btn.menu .item.auto input').checked = true; document.body.classList.add('autoUpdateURL');
if (autoParams) if (autoParams)
document.querySelector('.auto-params > input').checked = true; document.querySelector('.auto-params > input').checked = true;
document.querySelectorAll('.clickable > img') document.querySelectorAll('.clickable > img')
@ -931,8 +931,8 @@ addEventListener('DOMContentLoaded', () => {
if (input) input.checked = !input.checked; if (input) input.checked = !input.checked;
if (e.target.closest('.item.auto')) { if (e.target.closest('.item.auto')) {
autoUpdateURL = input.checked; autoUpdateURL = document.body.classList.toggle('autoUpdateURL');
if (input.checked) localStorage.setItem('autoUpdateURL', true); if (autoUpdateURL) localStorage.setItem('autoUpdateURL', true);
else localStorage.removeItem('autoUpdateURL'); else localStorage.removeItem('autoUpdateURL');
update(json); update(json);
} else if (e.target.closest('.item.reverse')) { } else if (e.target.closest('.item.reverse')) {

54
index.html
View file

@ -98,31 +98,55 @@
<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"/> <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> </svg>
<div class="box"> <div class="box">
<div class="item datalink"> <div class="item normal datalink">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <div class="icon">
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/> <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">
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/> <g>
</svg> <path xmlns="http://www.w3.org/2000/svg" d="m17.47 11.293a1 1 0 1 0 1.414 1.414l1.544-1.544a5.368 5.368 0 0 0 -7.591-7.591l-1.544 1.544a1 1 0 1 0 1.414 1.414l1.544-1.544a3.368 3.368 0 1 1 4.763 4.763z" fill="#ffffff"></path>
<path xmlns="http://www.w3.org/2000/svg" d="m6.53 12.707a1 1 0 1 0 -1.414-1.414l-1.544 1.544a5.368 5.368 0 0 0 7.591 7.591l1.544-1.544a1 1 0 0 0 -1.414-1.414l-1.544 1.544a3.368 3.368 0 0 1 -4.763-4.763z" fill="#ffffff"></path>
<path xmlns="http://www.w3.org/2000/svg" d="m8.205 15.8a1 1 0 0 0 1.414 0l6.181-6.181a1 1 0 1 0 -1.414-1.414l-6.181 6.176a1 1 0 0 0 0 1.419z" fill="#ffffff"></path>
</g>
</svg>
</div>
<div>Get data link</div> <div>Get data link</div>
</div> </div>
<div class="item auto"> <div class="item normal auto">
<input type="checkbox" id="auto" name="auto" autocomplete="off"> <!-- <input type="checkbox" id="auto" name="auto" autocomplete="off" class="hidden"> -->
<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 48 48" xml:space="preserve" width="16" height="16">
<g>
<g xmlns="http://www.w3.org/2000/svg">
<path d="m40.26 7.74a23 23 0 0 0 -29.26-2.74h.37a2 2 0 0 1 1.63.55c.9.92.53 2 .4 3.13a18.61 18.61 0 0 1 25.85 26l-1.34-1.34c-.2 1.74-.66 6-.77 7l7-.77-1.72-1.72a23 23 0 0 0 -2.16-30.11z" fill="#ffffff"></path>
<path d="m37.17 42.26a2 2 0 0 1 -2-2.22l.14-1.26a18.61 18.61 0 0 1 -25.93-26.3l1.45 1.45c.3-2.64-.05.5.78-7l-7 .78 1.66 1.65a23 23 0 0 0 31.81 32.81 6.29 6.29 0 0 1 -.91.09z" fill="#ffffff"></path>
<path d="m28 18h4l-4-4z" fill="#ffffff"></path>
<path d="m26 13h-9a2 2 0 0 0 -2 2v18a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2c0-14.55.08-13-.18-13h-5.82a1 1 0 0 1 -1-1c0-6.35 0-5.83 0-6zm-1 18h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2zm0-4h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2zm0-4h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2z" fill="#ffffff"></path>
</g>
</g>
</svg>
</div>
<div>Auto-update data link in URL</div> <div>Auto-update data link in URL</div>
</div> </div>
<div class="item reverse"> <div class="item normal reverse">
<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" width="16" height="16" x="0" y="0" viewBox="0 0 20 20" xml:space="preserve"> <div class="icon">
<g> <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" width="16" height="16" x="0" y="0" viewBox="0 0 20 20" xml:space="preserve">
<g xmlns="http://www.w3.org/2000/svg" fill="#2b2a3d"> <g>
<path d="m14.6 8.6 1.4 1.4 4-4-4-4-1.4 1.4 1.6 1.6h-16.2v2h16.2z" fill="#ffffff"></path> <g xmlns="http://www.w3.org/2000/svg" fill="#2b2a3d">
<path d="m5.4 11.4-1.4-1.4-4 4 4 4 1.4-1.4-1.6-1.6h16.2v-2h-16.2z" fill="#ffffff"></path> <path d="m14.6 8.6 1.4 1.4 4-4-4-4-1.4 1.4 1.6 1.6h-16.2v2h16.2z" fill="#ffffff"></path>
<path d="m5.4 11.4-1.4-1.4-4 4 4 4 1.4-1.4-1.6-1.6h16.2v-2h-16.2z" fill="#ffffff"></path>
</g>
</g> </g>
</g> </svg>
</svg> </div>
<div>Reverse editor and preview</div> <div>Reverse editor and preview</div>
</div> </div>
<div class="vs"></div> <div class="vs"></div>
<div class="item auto-params"> <div class="item auto-params">
<input id="auto" name="auto" autocomplete="off" type="checkbox"> <input id="auto" name="auto" autocomplete="off" type="checkbox">
<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 512 512" xml:space="preserve" width="16" height="16" fill="currentColor" style="display: none;">
<g>
<path xmlns="http://www.w3.org/2000/svg" d="M200,24a24,24,0,1,1-24,24A24,24,0,0,1,200,24ZM32,192a24,24,0,1,0,24-24A24,24,0,0,0,32,192Zm53-91a24,24,0,1,0,24-24A24,24,0,0,0,85,101Zm354.039,7.273A237.668,237.668,0,0,0,315.461,24.881a24,24,0,1,0-12.883,46.238,189.368,189.368,0,0,1,98.448,66.463A185.963,185.963,0,0,1,440,252.116C440,355.716,355.629,440,251.922,440a186.451,186.451,0,0,1-114.189-38.577,188.962,188.962,0,0,1-36.191-36.548L88,361.865v59.956a236.16,236.16,0,0,0,330.847-2.9,235.762,235.762,0,0,0,20.192-310.646ZM72,456V341.919l114.794,25.51a24,24,0,1,0,10.412-46.858l-144-32A24,24,0,0,0,24,312V456a24,24,0,0,0,48,0Z"></path>
</g>
</svg>
<div>Auto-update URL options</div> <div>Auto-update URL options</div>
</div> </div>
</div> </div>