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

Add nouser and embed parameters

Browse source
This commit is contained in:
Glitchii 2021-09-06 14:00:28 +01:00
parent c2eb7674c9
commit c28f53ce6a
9 changed files with 82 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
README.md
View file

@ -12,7 +12,7 @@ Aside the JSON editor, it also includes a GUI editor which converts to JSON for
# Supported URL Parameters
## Editor param (/?editor=json)
The GUI editor is used by default. If 'editor' parameter is set with the editor set to "json", the website will use the JSON editor by default instead when the website loads. Setting the value to anything else other than 'json' will be ignored.
The GUI editor is used by default. If 'editor' parameter is set with it's value set to "json", the website will use the JSON editor by default instead. Setting the value to anything else other than 'json' will be ignored.
Example URL: https://glitchii.github.io/embedbuilder/?editor=json
@ -27,18 +27,22 @@ https://glitchii.github.io/embedbuilder/?data=JTdCJTIyZW1iZWQlMjIlM0ElN0IlMjJ0aX
<!-- `username=`: Used to set the deafult name of the bot.
`avatar=`: If a valid URL is given, that will be the avatar/icon of the bot.
`verified=`: Whether or not the bot should have a verified badge (true/false). -->
Params that end with `=` in the list below need a value, those that don't will always be truthy when set either with or with no value.
```
Parameter Description
--------- -----------
username= Used to set the deafult name of the bot.
avatar= If a valid URL is given, that will be the avatar or icon of the bot.
verified= Displays a verified badge on the bot tag when set to true.
reversed= Reverse the preview and editors position.
verified Displays a verified badge on the bot tag when set to true.
reverse Reverse the preview and editors position.
nouser Display embed or message content with no username or avatar.
embed Displa only the embed with no editor
editor=json Use the JSON editor by default instead of the GUI.
guitabs= Specify what gui tabs to display comma seperated.
Example: `guitabs=author` or `guitabs=image,footer`
```
### Example URL with all parameters:
https://glitchii.github.io/embedbuilder/?username=Troy&verified=true&reversed=true&guitabs=image,footer&avatar=https://cdn.discordapp.com/avatars/663074487335649292/576eb5f13519b9da10ba7807bdd83fab.webp?size=128
https://glitchii.github.io/embedbuilder/?username=Troy&verified&reverse&guitabs=image,footer&avatar=https://cdn.discordapp.com/avatars/663074487335649292/576eb5f13519b9da10ba7807bdd83fab.webp?size=128
>## Intergretting into your website
>You are free to use this in your website. Intergretting into your websites allows sending the embed to Discord with a few changes, and using 'formmaters' eg. '{ server_name }' or '{ user_name }' etc. A not so bad downside would be that you'd probably have to keep up with fixes and updates.

85
assets/css/index.css
View file

@ -1,6 +1,6 @@
@font-face {
font-family: DsWhitney;
src: local("Whitney"), url("../fonts/whitney-300.woff2"), url("../fonts/whitney-300.woff");
src: local("Whitney"), url("../fonts/whitney-300.woff");
font-style: normal;
font-weight: 300;
font-display: swap;
@ -8,7 +8,7 @@
@font-face {
font-family: DsWhitney;
src: local("Whitney"), url("../fonts/whitney-400.woff2"), url("../fonts/whitney-400.woff");
src: local("Whitney"), url("../fonts/whitney-400.woff");
font-style: normal;
font-weight: 400;
font-display: swap;
@ -16,7 +16,7 @@
@font-face {
font-family: DsWhitney;
src: local("Whitney"), url("../fonts/whitney-500.woff2"), url("../fonts/whitney-500.woff");
src: local("Whitney"), url("../fonts/whitney-500.woff");
font-style: normal;
font-weight: 500;
font-display: swap;
@ -24,7 +24,7 @@
@font-face {
font-family: DsWhitney;
src: local("Whitney"), url("../fonts/whitney-600.woff2"), url("../fonts/whitney-600.woff");
src: local("Whitney"), url("../fonts/whitney-600.woff");
font-style: normal;
font-weight: 600;
font-display: swap;
@ -32,7 +32,7 @@
@font-face {
font-family: DsWhitney;
src: local("Whitney"), url("../fonts/whitney-700.woff2"), url("../fonts/whitney-700.woff");
src: local("Whitney"), url("../fonts/whitney-700.woff");
font-style: normal;
font-weight: 700;
font-display: swap;
@ -67,11 +67,18 @@ body {
color: #fff;
}
body.no-user .msgEmbed>.contents, .botTagVerified, .embedGrid>* {
display: none;
}
.main {
position: absolute;
width: 100%;
height: 100%;
display: grid;
}
body:not(.only-embed) .main {
grid-template-columns: 45% 55%;
}
@ -147,7 +154,7 @@ body.gui .side1 .item.top {
.main .side2 {
height: 100%;
background-color: var(--fullEmbedBackground);
/* background-color: var(--fullEmbedBackground); */
justify-content: center;
vertical-align: center;
overflow: auto;
@ -266,6 +273,10 @@ img[alt] {
padding: calc(0.125rem + 10px) 20px 20px 92px;
}
body.no-user .msgEmbed {
padding-left: 35px;
}
.msgEmbed:hover {
background-color: #04040512;
}
@ -274,10 +285,6 @@ img[alt] {
line-height: 1.375rem;
}
.botTagVerified {
display: none;
}
.contents {
position: static;
margin-left: 0px;
@ -582,10 +589,6 @@ img[alt] {
color: #fff;
}
.embedGrid>* {
display: none;
}
.messageContent {
user-select: text;
margin-left: -72px;
@ -660,6 +663,10 @@ u {
text-size-adjust: none;
}
.embedMargin {
word-break: break-all;
}
.embed blockquote {
max-width: 100%;
}
@ -742,7 +749,7 @@ u {
display: none;
}
.embedImage > .spinner-container {
.embedImage>.spinner-container {
background: none;
}
@ -1761,6 +1768,10 @@ body {
pointer-events: none;
}
.noDisplay {
display: none!important;
}
@keyframes clearAn {
0% {
transform: rotate(10deg);
@ -1808,26 +1819,6 @@ body.emptyEmbed.emptyContent .emptyTxt {
background: #202225;
}
@media screen and (max-width: 1270px) {
.fieldNumber::before {
right: 300%;
}
}
@media screen and (max-height: 760px) {
.bottom .colrs {
bottom: 10px;
}
body.gui .side1 .item.top {
height: 65%;
max-width: 100%;
width: 100%;
}
.bottom {
margin: 40px 0 0 0 !important;
}
}
@media screen and (max-width: 1015px) {
section.low .top>.gui {
opacity: .6;
@ -1905,6 +1896,20 @@ body.emptyEmbed.emptyContent .emptyTxt {
}
}
@media screen and (max-height: 760px) {
.bottom .colrs {
bottom: 10px;
}
body.gui .side1 .item.top {
height: 65%;
max-width: 100%;
width: 100%;
}
.bottom {
margin: 40px 0 0 0 !important;
}
}
@media screen and (max-width: 530px) {
.main .side1 {
padding: 10px;
@ -1919,7 +1924,17 @@ body.emptyEmbed.emptyContent .emptyTxt {
margin: 20px 0px;
padding: 0.125rem 0 20px 65px;
}
body.no-user .msgEmbed {
padding-left: 25px;
margin-top: 13px;
}
.avatar {
left: 10px;
}
}
@media screen and (max-width: 490px) {
.markup>blockquote, .markup pre {
max-width: 99%;
}
}

0
assets/fonts/whitney-300.woff2 → assets/fonts/whitney-300.woff
View file

0
assets/fonts/whitney-400.woff2 → assets/fonts/whitney-400.woff
View file

0
assets/fonts/whitney-500.woff2 → assets/fonts/whitney-500.woff
View file

0
assets/fonts/whitney-600.woff2 → assets/fonts/whitney-600.woff
View file

0
assets/fonts/whitney-700.woff2 → assets/fonts/whitney-700.woff
View file

28
assets/js/script.js
View file

@ -4,13 +4,16 @@
var params = new URL(location).searchParams,
hasParam = param => params.get(param) !== null,
dataSpecified = params.get('data'),
botName = params.get('username'),
botIcon = params.get('avatar'),
guiTabs = params.get('guitabs'),
useJsonEditor = params.get('editor') === 'json',
botVerified = params.get('verified') === 'true',
reverseColmns = params.get('reversed') === 'true',
botVerified = hasParam('verified'),
reverseColmns = hasParam('reverse'),
noUser = hasParam('nouser'),
onlyEmbed = hasParam('embed'),
activeFields, colNum = 1, num = 0, validationError,
jsonToBase64 = (jsonCode, withURL, redirect) => {
let data = jsonCode || json;
@ -101,14 +104,23 @@ if (dataSpecified)
window.json = base64ToJson();
window.onload = () => {
if (useJsonEditor) document.body.classList.remove('gui');
if (botName) document.querySelector('.username').textContent = botName;
if (botIcon) document.querySelector('.avatar').src = botIcon;
if (botVerified) document.querySelector('.msgEmbed > .contents').classList.add('verified');
let body = document.body;
if (onlyEmbed) body.classList.add('only-embed');
else {
document.querySelector('.side1.noDisplay').classList.remove('noDisplay');
if (useJsonEditor) body.classList.remove('gui');
}
if (noUser) body.classList.add('no-user');
else {
if (botName) document.querySelector('.username').textContent = botName;
if (botIcon) document.querySelector('.avatar').src = botIcon;
if (botVerified) document.querySelector('.msgEmbed > .contents').classList.add('verified');
}
if (reverseColmns) {
let side1 = document.querySelector('.side1');
side1.parentElement.insertBefore(side1.nextElementSibling, side1);
document.body.classList.add('reversed');
body.classList.add('reversed');
};
document.querySelectorAll('.clickable > img')
@ -883,4 +895,6 @@ window.onload = () => {
json.embed.color = parseInt(inputValue, 16);
update(json);
})
if (onlyEmbed) document.querySelector('.side1')?.remove();
};

2
index.html
View file

@ -38,7 +38,7 @@
</head>
<body class="gui emptyEmbed">
<div class="main">
<section class="side1">
<section class="side1 noDisplay">
<div class="chooser">
<div class="back"></div>
<div class="gui opt">