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

Differenciate between role and user mentions in render

Browse source
This commit is contained in:
Glitchii 2022-04-12 22:31:19 +01:00
parent 806cc35d17
commit 83174581ac
3 changed files with 43 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
assets/css/index.css
View file

@ -1138,16 +1138,16 @@ body:not(.gui) .chooser>.back {
max-width: 90%; max-width: 90%;
} }
@keyframes colrsAn { @keyframes colorsAn {
0% { 0% {
transform: translateX(-200px); transform: translateX(-200px);
opacity: 0; opacity: 0;
} }
} }
.bottom .colrs { .bottom .colors {
z-index: 5; z-index: 5;
animation: colrsAn .25s ease-out; animation: colorsAn .25s ease-out;
background: #212226; background: #212226;
border-radius: 10px; border-radius: 10px;
width: 250px; width: 250px;
@ -1160,11 +1160,11 @@ body:not(.gui) .chooser>.back {
grid-template-columns: 5% 27.5% 67.5%; grid-template-columns: 5% 27.5% 67.5%;
} }
.bottom .colrs .colr { .bottom .colors .color {
background: #41f097; background: #41f097;
} }
.bottom .colrs.display { .bottom .colors.display {
display: grid; display: grid;
} }
@ -1229,7 +1229,7 @@ body:not(.gui) .chooser>.back {
transition: .5s; transition: .5s;
} }
.colrs:hover .pallets { .colors:hover .pallets {
opacity: 1; opacity: 1;
} }
@ -1256,7 +1256,7 @@ body:not(.gui) .chooser>.back {
height: 100% !important; height: 100% !important;
} }
.colrs.picking .colRight .cTop>*:not(.color-picker), .colrs.picking .colRight .pallets, .colrs:not(.picking) .colRight .colBack, .colrs:not(.picking) .hex>div { .colors.picking .colRight .cTop>*:not(.color-picker), .colors.picking .colRight .pallets, .colors:not(.picking) .colRight .colBack, .colors:not(.picking) .hex>div {
display: none; display: none;
} }
@ -1736,7 +1736,7 @@ body {
} }
} }
.colrs .hex>div { .colors .hex>div {
position: absolute; position: absolute;
top: -35px; top: -35px;
background: #212226; background: #212226;
@ -1748,12 +1748,12 @@ body {
width: 50%; width: 50%;
} }
.colrs .hex>div>span { .colors .hex>div>span {
padding: 6px 6px 6px 10px; padding: 6px 6px 6px 10px;
display: flex; display: flex;
} }
.colrs .hex>div>span>span { .colors .hex>div>span>span {
user-select: none; user-select: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -1764,12 +1764,12 @@ body {
margin-right: 2px; margin-right: 2px;
} }
.colrs .hex>div>span input { .colors .hex>div>span input {
width: 100%; width: 100%;
opacity: .8; opacity: .8;
} }
.colrs .hex.incorrect>div { .colors .hex.incorrect>div {
background: #262121; background: #262121;
} }
@ -2078,13 +2078,13 @@ body.no-preview .side2 {
display: none !important; display: none !important;
} }
/* body.no-editor .bottom .colrs { /* body.no-editor .bottom .colors {
left: 20px; left: 20px;
top: 90px; top: 90px;
bottom: 0; bottom: 0;
} */ } */
body.no-editor .bottom .colrs { body.no-editor .bottom .colors {
left: 20px; left: 20px;
top: 90px; top: 90px;
bottom: 0; bottom: 0;
@ -2118,7 +2118,7 @@ body.no-editor .side1 .item.top {
transform: translateY(10px); transform: translateY(10px);
} }
body.no-editor .bottom .colrs.display { body.no-editor .bottom .colors.display {
display: grid; display: grid;
} }
@ -2421,17 +2421,17 @@ body.toHook .done .channels .selectOptions .hook {
border: none; border: none;
} }
.bottom .colrs { .bottom .colors {
bottom: 40px; bottom: 40px;
top: 100px; top: 100px;
top: 90px; top: 90px;
left: 20px; left: 20px;
display: none; display: none;
animation: colrsAn .1s ease-out; animation: colorsAn .1s ease-out;
box-shadow: 0px 5px 15px 0px #0000004f; box-shadow: 0px 5px 15px 0px #0000004f;
} }
body.reversed .bottom .colrs { body.reversed .bottom .colors {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
@ -2474,7 +2474,7 @@ body.toHook .done .channels .selectOptions .hook {
} }
@media screen and (max-height: 760px) { @media screen and (max-height: 760px) {
.bottom .colrs { .bottom .colors {
bottom: 10px; bottom: 10px;
} }

20
assets/js/script.js
View file

@ -281,7 +281,7 @@ addEventListener('DOMContentLoaded', () => {
.replace(/&#60;#\d+&#62;/g, () => `<span class="mention channel interactive">channel</span>`) .replace(/&#60;#\d+&#62;/g, () => `<span class="mention channel interactive">channel</span>`)
.replace(/&#60;@(?:&#38;|!)?\d+&#62;|@(?:everyone|here)/g, match => { .replace(/&#60;@(?:&#38;|!)?\d+&#62;|@(?:everyone|here)/g, match => {
if (match.startsWith('@')) return `<span class="mention">${match}</span>` if (match.startsWith('@')) return `<span class="mention">${match}</span>`
else return `<span class="mention interactive">@user</span>` else return `<span class="mention interactive">@${match.includes('&#38;') ? 'role' : 'user'}</span>`
}) })
if (opts.inlineBlock) if (opts.inlineBlock)
@ -888,15 +888,15 @@ addEventListener('DOMContentLoaded', () => {
let picker = new CP(document.querySelector('.picker'), state = { parent: document.querySelector('.cTop') }); let picker = new CP(document.querySelector('.picker'), state = { parent: document.querySelector('.cTop') });
picker.fire('change', toRGB('#41f097')); picker.fire('change', toRGB('#41f097'));
let colrs = document.querySelector('.colrs'), let colors = document.querySelector('.colors'),
hexInput = colrs.querySelector('.hex>div input'), hexInput = colors.querySelector('.hex>div input'),
typingHex = true, exit = false, typingHex = true, exit = false,
removePicker = () => { removePicker = () => {
if (exit) return exit = false; if (exit) return exit = false;
if (typingHex) picker.enter(); if (typingHex) picker.enter();
else { else {
typingHex = false, exit = true; typingHex = false, exit = true;
colrs.classList.remove('picking'); colors.classList.remove('picking');
picker.exit(); picker.exit();
} }
} }
@ -912,11 +912,11 @@ addEventListener('DOMContentLoaded', () => {
hexInput.value = json.embed.color.toString(16).padStart(6, '0'); hexInput.value = json.embed.color.toString(16).padStart(6, '0');
document.querySelector('.hex.incorrect')?.classList.remove('incorrect'); document.querySelector('.hex.incorrect')?.classList.remove('incorrect');
} }
colrs.classList.add('picking') colors.classList.add('picking')
}) })
document.querySelectorAll('.colr').forEach(e => e.addEventListener('click', el => { document.querySelectorAll('.color').forEach(e => e.addEventListener('click', el => {
el = el.target.closest('.colr') || el.target; el = el.target.closest('.color') || el.target;
embed.closest('.embed').style.borderColor = el.style.backgroundColor; embed.closest('.embed').style.borderColor = el.style.backgroundColor;
json.embed && (json.embed.color = toRGB(el.style.backgroundColor, false, true)); json.embed && (json.embed.color = toRGB(el.style.backgroundColor, false, true));
picker.source.style.removeProperty('background'); picker.source.style.removeProperty('background');
@ -1034,7 +1034,7 @@ addEventListener('DOMContentLoaded', () => {
let pickInGuiMode = false; let pickInGuiMode = false;
togglePicker = pickLater => { togglePicker = pickLater => {
colrs.classList.toggle('display'); colors.classList.toggle('display');
document.querySelector('.side1').classList.toggle('low'); document.querySelector('.side1').classList.toggle('low');
pickLater && (pickInGuiMode = true); pickLater && (pickInGuiMode = true);
}; };
@ -1043,11 +1043,11 @@ addEventListener('DOMContentLoaded', () => {
update(json); update(json);
document.body.addEventListener('click', e => { document.body.addEventListener('click', e => {
if (e.target.classList.contains('low') || (e.target.classList.contains('top') && colrs.classList.contains('display'))) if (e.target.classList.contains('low') || (e.target.classList.contains('top') && colors.classList.contains('display')))
togglePicker(); togglePicker();
}) })
document.querySelector('.colrs .hex>div').addEventListener('input', e => { document.querySelector('.colors .hex>div').addEventListener('input', e => {
let inputValue = e.target.value; let inputValue = e.target.value;
if (inputValue.startsWith('#')) if (inputValue.startsWith('#'))
e.target.value = inputValue.slice(1), inputValue = e.target.value; e.target.value = inputValue.slice(1), inputValue = e.target.value;

28
index.html
View file

@ -192,7 +192,7 @@
<div class="editorHolder"></div> <div class="editorHolder"></div>
</div> </div>
<div class="bottom item needed"> <div class="bottom item needed">
<div class="colrs high"> <div class="colors high">
<div class="hex"> <div class="hex">
<div> <div>
<span> <span>
@ -244,7 +244,7 @@
</g> </g>
</svg> </svg>
</div> </div>
<div class="colr" style="background: #41f097"></div> <div class="color" style="background: #41f097"></div>
</div> </div>
<div class="col colRight"> <div class="col colRight">
<div class="colBack"> <div class="colBack">
@ -261,18 +261,18 @@
<p class="desc">Pick the embed colour</p> <p class="desc">Pick the embed colour</p>
</div> </div>
<div class="pallets"> <div class="pallets">
<div class="colr" class="colr" style="background: #00bb9c"></div> <div class="color" class="color" style="background: #00bb9c"></div>
<div class="colr" style="background: #00cb74"></div> <div class="color" style="background: #00cb74"></div>
<div class="colr" style="background: #0098d9"></div> <div class="color" style="background: #0098d9"></div>
<div class="colr" style="background: #a05bb4"></div> <div class="color" style="background: #a05bb4"></div>
<div class="colr" style="background: #f52565"></div> <div class="color" style="background: #f52565"></div>
<div class="colr" style="background: #f6c42f"></div> <div class="color" style="background: #f6c42f"></div>
<div class="colr" style="background: #ef7f31"></div> <div class="color" style="background: #ef7f31"></div>
<div class="colr" style="background: #f24e43"></div> <div class="color" style="background: #f24e43"></div>
<div class="colr" style="background: #93a5a6"></div> <div class="color" style="background: #93a5a6"></div>
<div class="colr" style="background: #5c7d8a"></div> <div class="color" style="background: #5c7d8a"></div>
<div class="colr" style="background: #00806a"></div> <div class="color" style="background: #00806a"></div>
<div class="colr" style="background: #008a4e"></div> <div class="color" style="background: #008a4e"></div>
</div> </div>
</div> </div>
</div> </div>