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

Add hex input, rename index.js to script.js

Browse source
This commit is contained in:
Glitchii 2021-07-13 22:29:29 +01:00
parent 6cf7a2a4f7
commit c74c1bf1f2
3 changed files with 160 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
assets/css/index.css
View file

@ -929,6 +929,7 @@ body:not(.gui) .chooser>.back {
}
.bottom .colrs {
z-index: 5;
animation: colrsAn .5s ease-out;
background: #212226;
border-radius: 10px;
@ -1038,7 +1039,7 @@ body:not(.gui) .chooser>.back {
height: 100%!important;
}
.colRight.picking .cTop>*:not(.color-picker), .colRight.picking .pallets, .colRight:not(.picking) .colBack {
.colrs.picking .colRight .cTop>*:not(.color-picker), .colrs.picking .colRight .pallets, .colrs:not(.picking) .colRight .colBack, .colrs:not(.picking) .hex>div {
display: none;
}
@ -1505,6 +1506,52 @@ body {
}
}
@keyframes hexAn {
0% {
opacity: 0;
transform: translateY(40px);
}
50% {
transform: translateY(40px);
}
}
.colrs .hex>div {
position: absolute;
top: -35px;
background: #212226;
border-radius: 5px;
animation: hexAn .4s ease-in-out;
box-shadow: 0px -2px 10px 0px #0000001f;
right: 0;
width: 50%;
}
.colrs .hex>div>span {
padding: 6px 6px 6px 10px;
display: flex;
}
.colrs .hex>div>span>span {
user-select: none;
padding: 0;
margin: 0;
font-size: 100%;
position: relative;
bottom: -1px;
opacity: .6;
margin-right: 2px;
}
.colrs .hex>div>span input {
width: 100%;
opacity: .8;
}
.colrs .hex.incorrect>div {
background: #262121;
}
.addField {
animation: addFieldFade .5s ease;
font-size: 13px;
@ -1589,11 +1636,11 @@ body {
transform-origin: top right;
}
.messageContent.empty, .messageContent+.container.empty, .emptyTxt {
body.emptyContent .messageContent, body.emptyEmbed .messageContent+.container, body.emptyEmbed .messageContent+.container, body.emptyContent .messageContent, .emptyTxt {
display: none;
}
.messageContent.empty+.container.empty+.emptyTxt {
body.emptyEmbed.emptyContent .emptyTxt {
display: block;
position: absolute;
top: 800%;
@ -1622,19 +1669,6 @@ body {
}
}
@media screen and (max-width: 530px) {
.msgEmbed {
margin: 20px 0px;
padding: 0.125rem 0 20px 65px;
}
.avatar {
left: 10px;
}
.main .side1 {
padding: 10px;
}
}
@media screen and (max-height: 760px) {
.bottom .colrs {
bottom: 10px;
@ -1650,6 +1684,21 @@ body {
}
@media screen and (max-width: 1015px) {
section.low .top>.gui {
opacity: .6;
filter: blur(2px) brightness(.99);
pointer-events: none!important;
}
section.low {
height: 50%!important;
transition: .4s ease;
}
section {
transition: .5s ease;
}
body.emptyEmbed.emptyContent section.side1:not(.low) {
height: 300%;
}
.clear {
position: absolute;
cursor: pointer;
@ -1670,9 +1719,9 @@ body {
}
.bottom .colrs {
bottom: 40px;
left: 200px;
top: 100px;
left: 10px;
display: none;
top: 0;
animation: colrsAn .1s ease-out;
box-shadow: 0px 5px 15px 0px #0000004f;
}
@ -1704,12 +1753,21 @@ body {
}
}
@media screen and (max-width: 460px) {
.bottom .colrs {
top: 70px;
@media screen and (max-width: 530px) {
.msgEmbed {
margin: 20px 0px;
padding: 0.125rem 0 20px 65px;
}
.avatar {
left: 10px;
}
.main .side1 {
padding: 10px;
}
.top>.gui {
margin-top: 5px;
}
.emptyTxt {
display: none!important;
}
}

85
assets/js/index.js → assets/js/script.js
View file

@ -433,9 +433,11 @@ window.onload = () => {
elm.classList.add('active');
if (inlineField) inlineField.querySelector('.ttle~input').focus();
else if (input) {
input.focus();
if (!matchMedia('(max-width: 1015px)').matches)
input.focus();
input.selectionStart = input.selectionEnd = input.value.length;
} else if (txt) txt.focus();
} else if (txt && !matchMedia('(max-width: 1015px)').matches)
txt.focus();
elm.classList.contains('fields') && elm.scrollIntoView({ behavior: "smooth", block: "center" });
}
})
@ -550,10 +552,10 @@ window.onload = () => {
fields = gui.querySelector('.fields ~ .edit');
update = data => {
try {
if (!data.content) embedContent.classList.add('empty');
if (!data.content) document.body.classList.add('emptyContent');
else {
embedContent.innerHTML = markup(encodeHTML(data.content), { replaceEmojis: true });
embedContent.classList.remove('empty');
document.body.classList.remove('emptyContent');
}
if (data.embed && Object.keys(data.embed).length) {
let e = data.embed;
@ -612,11 +614,13 @@ window.onload = () => {
embed.style.removeProperty('max-width');
display(embedFields, undefined, 'grid');
} else hide(embedFields);
embedCont.classList.remove('empty');
document.body.classList.remove('emptyEmbed');
document.querySelectorAll('.markup pre > code').forEach((block) => hljs.highlightBlock(block));
notif.animate({ opacity: '0', bottom: '-50px', offset: 1 }, { easing: 'ease', duration: 500 }).onfinish = () => notif.style.removeProperty('display');
twemoji.parse(msgEmbed);
} else embedCont.classList.add('empty');
} else document.body.classList.add('emptyEmbed');
if (!embedCont.innerText)
document.body.classList.add('emptyEmbed');
} catch (e) {
error(e);
}
@ -632,7 +636,7 @@ window.onload = () => {
try { update(JSON.parse(editor.getValue())); }
catch (e) {
if (editor.getValue()) return;
embedCont.classList.add('empty');
document.body.classList.add('emptyEmbed');
embedContent.innerHTML = '';
}
});
@ -640,12 +644,32 @@ window.onload = () => {
let picker = new CP(document.querySelector('.picker'), state = { parent: document.querySelector('.cTop') });
picker.fire('change', toRGB('#41f097'));
let colRight = document.querySelector('.colRight'), removePicker = () => colRight.classList.remove('picking');
document.querySelector('.colBack').addEventListener('click', e => {
picker.self.remove(); removePicker();
let colrs = document.querySelector('.colrs'),
hexInput = colrs.querySelector('.hex>div input'),
typingHex = true, exit = false,
removePicker = () => {
if (exit) return exit = false;
if (typingHex) picker.enter();
else {
typingHex = false, exit = true;
colrs.classList.remove('picking');
picker.exit();
}
}
document.querySelector('.colBack').addEventListener('click', () => {
picker.self.remove();
typingHex = false;
removePicker();
})
picker.on('enter', () => colRight.classList.add('picking'))
window.picker = picker
picker.on('exit', removePicker);
picker.on('enter', () => {
if (json?.embed?.color){
hexInput.value = json.embed.color.toString(16).padStart(6, '0');
document.querySelector('.hex.incorrect')?.classList.remove('incorrect');
}
colrs.classList.add('picking')
})
document.querySelectorAll('.colr').forEach(e => e.addEventListener('click', el => {
el = el.target.closest('.colr') || el.target;
@ -654,11 +678,13 @@ window.onload = () => {
picker.source.style.removeProperty('background');
}))
hexInput.addEventListener('focus', () => typingHex = true);
setTimeout(() => {
picker.on('change', function (r, g, b, a) {
embed.closest('.embed').style.borderColor = this.color(r, g, b);
json.embed && (json.embed.color = parseInt(this.color(r, g, b).slice(1), 16));
picker.source.style.background = this.color(r, g, b);
hexInput.value = json.embed.color.toString(16).padStart(6, '0');
})
}, 1000)
@ -670,14 +696,21 @@ window.onload = () => {
buildGui(json, { activate: activeFields });
document.body.classList.add('gui');
activeFields = null;
if (pickInGuiMode) {
pickInGuiMode = false;
togglePicker();
}
})
document.querySelector('.opt.json').addEventListener('click', () => {
editor.setValue(JSON.stringify(json, null, 4));
editor.refresh();
document.body.classList.remove('gui');
// if (!matchMedia('(max-width: 1015px)').matches)
editor.focus();
activeFields = document.querySelectorAll('.gui > .item.active');
if (document.querySelector('section.low'))
togglePicker(true);
})
document.querySelector('.clear').addEventListener('click', () => {
@ -686,10 +719,32 @@ window.onload = () => {
picker.source.style.removeProperty('background');
update(json); buildGui(json); editor.setValue(JSON.stringify(json, null, 4));
document.querySelectorAll('.gui>.item').forEach(e => e.classList.add('active'));
content.focus();
if (!matchMedia('(max-width: 1015px)').matches)
content.focus();
})
let pickInGuiMode = false;
togglePicker = pickLater => {
colrs.classList.toggle('display');
document.querySelector('.side1').classList.toggle('low');
pickLater && (pickInGuiMode = true);
};
document.querySelector('.pickerToggle').addEventListener('click', togglePicker);
update(json);
document.body.addEventListener('click', e => {
if (e.target.classList.contains('low') || e.target.classList.contains('top'))
togglePicker();
})
let colrs = document.querySelector('.colrs');
document.querySelector('.pickerToggle').addEventListener('click', () => colrs.classList.toggle('display'));
update(json);
document.querySelector('.colrs .hex>div').addEventListener('input', e => {
let inputValue = e.target.value;
if (inputValue.startsWith('#'))
e.target.value = inputValue.slice(1), inputValue = e.target.value;
if (inputValue.length !== 6 || !/^[a-zA-Z0-9]{6}$/g.test(inputValue))
return e.target.closest('.hex').classList.add('incorrect');
e.target.closest('.hex').classList.remove('incorrect');
json.embed.color = parseInt(inputValue, 16);
update(json);
})
};

15
index.html
View file

@ -34,9 +34,9 @@
<script src="./assets/libs/color-picker/color-picker.min.js"></script>
<link rel="stylesheet" href="./assets/libs/color-picker/color-picker.min.css">
<script src="./assets/js/components.js"></script>
<script src="./assets/js/index.js"></script>
<script src="./assets/js/script.js"></script>
</head>
<body class="gui empty">
<body class="gui">
<div class="main">
<section class="side1">
<div class="chooser">
@ -99,8 +99,15 @@
<div class="editorHolder"></div>
</div>
<div class="bottom item">
<div class="colrs">
<div></div>
<div class="colrs high">
<div class="hex">
<div>
<span>
<span>#</span>
<input placeholder="Hex code" autocomplete="off">
</span>
</div>
</div>
<div class="col colLeft">
<div class="picker">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" x="0" y="0" viewBox="0 0 390.954 390.955" xml:space="preserve">