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%;
}
@keyframes colrsAn {
@keyframes colorsAn {
0% {
transform: translateX(-200px);
opacity: 0;
}
}
.bottom .colrs {
.bottom .colors {
z-index: 5;
animation: colrsAn .25s ease-out;
animation: colorsAn .25s ease-out;
background: #212226;
border-radius: 10px;
width: 250px;
@ -1160,11 +1160,11 @@ body:not(.gui) .chooser>.back {
grid-template-columns: 5% 27.5% 67.5%;
}
.bottom .colrs .colr {
.bottom .colors .color {
background: #41f097;
}
.bottom .colrs.display {
.bottom .colors.display {
display: grid;
}
@ -1229,7 +1229,7 @@ body:not(.gui) .chooser>.back {
transition: .5s;
}
.colrs:hover .pallets {
.colors:hover .pallets {
opacity: 1;
}
@ -1256,7 +1256,7 @@ body:not(.gui) .chooser>.back {
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;
}
@ -1736,7 +1736,7 @@ body {
}
}
.colrs .hex>div {
.colors .hex>div {
position: absolute;
top: -35px;
background: #212226;
@ -1748,12 +1748,12 @@ body {
width: 50%;
}
.colrs .hex>div>span {
.colors .hex>div>span {
padding: 6px 6px 6px 10px;
display: flex;
}
.colrs .hex>div>span>span {
.colors .hex>div>span>span {
user-select: none;
padding: 0;
margin: 0;
@ -1764,12 +1764,12 @@ body {
margin-right: 2px;
}
.colrs .hex>div>span input {
.colors .hex>div>span input {
width: 100%;
opacity: .8;
}
.colrs .hex.incorrect>div {
.colors .hex.incorrect>div {
background: #262121;
}
@ -2078,13 +2078,13 @@ body.no-preview .side2 {
display: none !important;
}
/* body.no-editor .bottom .colrs {
/* body.no-editor .bottom .colors {
left: 20px;
top: 90px;
bottom: 0;
} */
body.no-editor .bottom .colrs {
body.no-editor .bottom .colors {
left: 20px;
top: 90px;
bottom: 0;
@ -2118,7 +2118,7 @@ body.no-editor .side1 .item.top {
transform: translateY(10px);
}
body.no-editor .bottom .colrs.display {
body.no-editor .bottom .colors.display {
display: grid;
}
@ -2421,17 +2421,17 @@ body.toHook .done .channels .selectOptions .hook {
border: none;
}
.bottom .colrs {
.bottom .colors {
bottom: 40px;
top: 100px;
top: 90px;
left: 20px;
display: none;
animation: colrsAn .1s ease-out;
animation: colorsAn .1s ease-out;
box-shadow: 0px 5px 15px 0px #0000004f;
}
body.reversed .bottom .colrs {
body.reversed .bottom .colors {
left: 50%;
transform: translateX(-50%);
}
@ -2474,7 +2474,7 @@ body.toHook .done .channels .selectOptions .hook {
}
@media screen and (max-height: 760px) {
.bottom .colrs {
.bottom .colors {
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;@(?:&#38;|!)?\d+&#62;|@(?:everyone|here)/g, match => {
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)
@ -888,15 +888,15 @@ addEventListener('DOMContentLoaded', () => {
let picker = new CP(document.querySelector('.picker'), state = { parent: document.querySelector('.cTop') });
picker.fire('change', toRGB('#41f097'));
let colrs = document.querySelector('.colrs'),
hexInput = colrs.querySelector('.hex>div input'),
let colors = document.querySelector('.colors'),
hexInput = colors.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');
colors.classList.remove('picking');
picker.exit();
}
}
@ -912,11 +912,11 @@ addEventListener('DOMContentLoaded', () => {
hexInput.value = json.embed.color.toString(16).padStart(6, '0');
document.querySelector('.hex.incorrect')?.classList.remove('incorrect');
}
colrs.classList.add('picking')
colors.classList.add('picking')
})
document.querySelectorAll('.colr').forEach(e => e.addEventListener('click', el => {
el = el.target.closest('.colr') || el.target;
document.querySelectorAll('.color').forEach(e => e.addEventListener('click', el => {
el = el.target.closest('.color') || el.target;
embed.closest('.embed').style.borderColor = el.style.backgroundColor;
json.embed && (json.embed.color = toRGB(el.style.backgroundColor, false, true));
picker.source.style.removeProperty('background');
@ -1034,7 +1034,7 @@ addEventListener('DOMContentLoaded', () => {
let pickInGuiMode = false;
togglePicker = pickLater => {
colrs.classList.toggle('display');
colors.classList.toggle('display');
document.querySelector('.side1').classList.toggle('low');
pickLater && (pickInGuiMode = true);
};
@ -1043,11 +1043,11 @@ addEventListener('DOMContentLoaded', () => {
update(json);
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();
})
document.querySelector('.colrs .hex>div').addEventListener('input', e => {
document.querySelector('.colors .hex>div').addEventListener('input', e => {
let inputValue = e.target.value;
if (inputValue.startsWith('#'))
e.target.value = inputValue.slice(1), inputValue = e.target.value;

28
index.html
View file

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