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

New: settings menu, mention parsing. Fix: block parsing

Browse source
This commit is contained in:
Glitchii 2022-02-18 23:36:20 +00:00
parent 4cee22107f
commit 0c0e5966a1
4 changed files with 292 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
README.md
View file

@ -18,38 +18,35 @@ Example URL: https://glitchii.github.io/embedbuilder/?editor=json
## Data param (/?data=...) ## Data param (/?data=...)
A data param is used to specify the dafault json data to be used when the website loads. Note that value of the data param should be URL encoded first, then base64 encoded last. Calling the `jsonToBase64` fuction in /assets/script.js does that and returns the encoded JSON data. A data param is used to specify the dafault json data to be used when the website loads. **Note** that value of the data param should be URL encoded first, then base64 encoded last because some characters like emojis can't be Base64 encoded alone. Calling the `jsonToBase64()` or `jsonToBase64(json, true)` function does that for you and returns the encoded JSON data.
Example URL: Example URL:
https://glitchii.github.io/embedbuilder/?data=JTdCJTIyZW1iZWQlMjIlM0ElN0IlMjJ0aXRsZSUyMiUzQSUyMkxvcmVtJTIwaXBzdW0lMjIlMkMlMjJkZXNjcmlwdGlvbiUyMiUzQSUyMkRvbG9yJTIwc2l0JTIwYW1ldC4uLiUyMiUyQyUyMmNvbG9yJTIyJTNBMzkxMjklN0QlN0Q= https://glitchii.github.io/embedbuilder/?data=JTdCJTIyZW1iZWQlMjIlM0ElN0IlMjJ0aXRsZSUyMiUzQSUyMkxvcmVtJTIwaXBzdW0lMjIlMkMlMjJkZXNjcmlwdGlvbiUyMiUzQSUyMkRvbG9yJTIwc2l0JTIwYW1ldC4uLiUyMiUyQyUyMmNvbG9yJTIyJTNBMzkxMjklN0QlN0Q=
## Other parameters ## Other parameters
<!-- `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. 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 Parameter Description
--------- ----------- --------- -----------
username= Used to set the deafult name of the bot. username= Used to set the default name of the bot.
avatar= If a valid URL is given, that will be the avatar or icon 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. verified Displays a verified badge on the bot tag when set to true.
reverse Reverse the preview and editors position. reverse Reverse the preview and editors position.
nouser Display embed or message content with no username or avatar. nouser Display embed or message content with no username or avatar.
embed Displa only the embed with no editor embed Display only the embed, no editor.
guitabs= Specify what gui tabs to display comma seperated. guitabs= Specify what gui tabs to display comma seperated.
Example: `guitabs=author` or `guitabs=image,footer` Example: `guitabs=author` or `guitabs=image,footer`
``` ```
### Example URL with all parameters: ### Example URL with all the above parameters:
https://glitchii.github.io/embedbuilder/?username=Troy&verified&reverse&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
>## Intergretting into your website >## 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. >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.
If all you want is to have an embed builder in your website with no additional features and maybe using your own bot name and avatar, etc., you could iframe https://glitchii.github.io/embedbuilder into your website with a few of the parameters above if needed instead. If all you want is to have an embed builder in your website with no additional features and maybe using your own bot name and avatar, etc., then you should iframe https://glitchii.github.io/embedbuilder into your website with a few of the parameters above if needed instead.
<br><br> <br><br>
You can look into the [project boards](https://github.com/Glitchii/embedbuilder/projects/3) if you want to see what is being worked on or want to contribute. You can look into the [project boards](https://github.com/Glitchii/embedbuilder/projects/3) to see what is being worked on or want to contribute.
<br> <br>
<small> Used at https://troybot.xyz/embed</small> <small> Example integration: https://troybot.xyz/embed</small>
[To Do](https://github.com/Glitchii/embedbuilder/projects/3) | [Discussions](https://github.com/Glitchii/embedbuilder/discussions/1) [To Do](https://github.com/Glitchii/embedbuilder/projects/3) | [Discussions](https://github.com/Glitchii/embedbuilder/discussions/1)

225
assets/css/index.css
View file

@ -223,15 +223,15 @@ a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, d
} }
.cm-string { .cm-string {
color: #92deea!important; color: #92deea !important;
} }
.cm-string~.cm-string { .cm-string~.cm-string {
color: #c3e88d!important; color: #c3e88d !important;
} }
.cm-number { .cm-number {
color: #d19a66!important; color: #d19a66 !important;
} }
code, [class^="cm-"] { code, [class^="cm-"] {
@ -262,6 +262,50 @@ img[alt] {
text-indent: -9999px; text-indent: -9999px;
} }
.\@ {
background-color: hsla(38, calc(var(--saturation-factor, 1)*95.7%), 54.1%, 0.1);
}
.\@::before {
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
pointer-events: none;
width: 2px;
}
.mention {
background-color: hsla(235, calc(85.6%), 64.7%, 0.3);
transition: background-color 50ms ease-out, color 50ms ease-out;
border-radius: 3px;
padding: 0 2px;
font-weight: 500;
position: relative;
}
.mention.channel::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='hsl(236,calc(83.3%),92.9%)' fill-rule='evenodd' clip-rule='evenodd' d='M5.88657 21C5.57547 21 5.3399 20.7189 5.39427 20.4126L6.00001 17H2.59511C2.28449 17 2.04905 16.7198 2.10259 16.4138L2.27759 15.4138C2.31946 15.1746 2.52722 15 2.77011 15H6.35001L7.41001 9H4.00511C3.69449 9 3.45905 8.71977 3.51259 8.41381L3.68759 7.41381C3.72946 7.17456 3.93722 7 4.18011 7H7.76001L8.39677 3.41262C8.43914 3.17391 8.64664 3 8.88907 3H9.87344C10.1845 3 10.4201 3.28107 10.3657 3.58738L9.76001 7H15.76L16.3968 3.41262C16.4391 3.17391 16.6466 3 16.8891 3H17.8734C18.1845 3 18.4201 3.28107 18.3657 3.58738L17.76 7H21.1649C21.4755 7 21.711 7.28023 21.6574 7.58619L21.4824 8.58619C21.4406 8.82544 21.2328 9 20.9899 9H17.41L16.35 15H19.7549C20.0655 15 20.301 15.2802 20.2474 15.5862L20.0724 16.5862C20.0306 16.8254 19.8228 17 19.5799 17H16L15.3632 20.5874C15.3209 20.8261 15.1134 21 14.8709 21H13.8866C13.5755 21 13.3399 20.7189 13.3943 20.4126L14 17H8.00001L7.36325 20.5874C7.32088 20.8261 7.11337 21 6.87094 21H5.88657ZM9.41045 9L8.35045 15H14.3504L15.4104 9H9.41045Z'%3E%3C/path%3E%3C/svg%3E");
width: 1.05rem;
height: 1.3rem;
-o-object-fit: contain;
object-fit: contain;
position: relative;
left: .125rem;
top: 3px;
display: inline-block;
margin-right: .125rem;
color: hsl(236, calc(83.3%),92.9%);
}
.mention.interactive:hover {
color: #fff;
cursor: pointer;
background-color: hsl(235, calc(85.6%), 64.7%);
}
.msgEmbed { .msgEmbed {
min-height: 2.75rem; min-height: 2.75rem;
position: absolute; position: absolute;
@ -783,12 +827,15 @@ u {
25% { 25% {
transform: translateX(22px) rotate(-90deg) scale(.5); transform: translateX(22px) rotate(-90deg) scale(.5);
} }
50% { 50% {
transform: translateX(22px) translateY(22px) rotate(-180deg); transform: translateX(22px) translateY(22px) rotate(-180deg);
} }
75% { 75% {
transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5); transform: translateX(0) translateY(22px) rotate(-270deg) scale(.5);
} }
to { to {
transform: rotate(-1turn); transform: rotate(-1turn);
} }
@ -827,13 +874,13 @@ u {
.CodeMirror { .CodeMirror {
background-color: #212121; background-color: #212121;
color: #eff; color: #eff;
width: 100%!important; width: 100% !important;
height: 100%!important; height: 100% !important;
background-color: inherit!important; background-color: inherit !important;
} }
.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error { .CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
background-image: none!important; background-image: none !important;
} }
.CodeMirror-lint-marker-error:after, .CodeMirror-lint-message-error:before { .CodeMirror-lint-marker-error:after, .CodeMirror-lint-message-error:before {
@ -850,15 +897,15 @@ u {
color: #f45711; color: #f45711;
font-size: 20px; font-size: 20px;
position: relative; position: relative;
left: -15px!important; left: -15px !important;
top: 1px!important; top: 1px !important;
} }
.CodeMirror-lint-tooltip { .CodeMirror-lint-tooltip {
box-shadow: 1px 10px 15px rgb(0 0 0 / 17%); box-shadow: 1px 10px 15px rgb(0 0 0 / 17%);
background-color: #202225!important; background-color: #202225 !important;
border: 1px solid #373a40!important; border: 1px solid #373a40 !important;
color: #cacaca!important; color: #cacaca !important;
} }
.CodeMirror-lint-message { .CodeMirror-lint-message {
@ -866,11 +913,11 @@ u {
} }
.CodeMirror-code .CodeMirror-gutter-wrapper .CodeMirror-gutter-elt { .CodeMirror-code .CodeMirror-gutter-wrapper .CodeMirror-gutter-elt {
left: 0px!important; left: 0px !important;
} }
.CodeMirror-gutters { .CodeMirror-gutters {
background: #292b2f!important; background: #292b2f !important;
display: none; display: none;
} }
@ -879,41 +926,41 @@ u {
} }
.CodeMirror-lint-marker.CodeMirror-lint-marker-error { .CodeMirror-lint-marker.CodeMirror-lint-marker-error {
left: 15px!important; left: 15px !important;
} }
.CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { .CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like {
padding: 0 15px!important; padding: 0 15px !important;
} }
.CodeMirror-foldmarker { .CodeMirror-foldmarker {
color: #e5ecff!important; color: #e5ecff !important;
text-shadow: none!important; text-shadow: none !important;
font-size: 20px; font-size: 20px;
} }
.CodeMirror-cursor { .CodeMirror-cursor {
border-left: 2px solid #6ba6ff !important; border-left: 2px solid #6ba6ff !important;
height: 17px!important; height: 17px !important;
} }
.CodeMirror-scrollbar-filler { .CodeMirror-scrollbar-filler {
display: none!important; display: none !important;
} }
.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div { .CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
background: #202225!important; background: #202225 !important;
} }
.cm-s-material-darker .cm-comment { .cm-s-material-darker .cm-comment {
color: #5d616b!important; color: #5d616b !important;
} }
.cm-s-material-darker .CodeMirror-matchingbracket { .cm-s-material-darker .CodeMirror-matchingbracket {
text-decoration: none!important; text-decoration: none !important;
background-color: rgb(173 192 212 / 3%)!important; background-color: rgb(173 192 212 / 3%) !important;
color: #b9c3d6 !important; color: #b9c3d6 !important;
border-bottom: 1px solid #c2d6ff!important; border-bottom: 1px solid #c2d6ff !important;
/* border: 1px solid #bacdf347; */ /* border: 1px solid #bacdf347; */
} }
@ -1186,14 +1233,14 @@ body:not(.gui) .chooser>.back {
transform: none; transform: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
top: 0!important; top: 0 !important;
left: 0!important; left: 0 !important;
border-radius: 10px; border-radius: 10px;
overflow: hidden; overflow: hidden;
} }
.color-picker>div { .color-picker>div {
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 { .colrs.picking .colRight .cTop>*:not(.color-picker), .colrs.picking .colRight .pallets, .colrs:not(.picking) .colRight .colBack, .colrs:not(.picking) .hex>div {
@ -1201,7 +1248,7 @@ body:not(.gui) .chooser>.back {
} }
.color-picker\:a { .color-picker\:a {
display: none!important; display: none !important;
} }
@keyframes colBackAn { @keyframes colBackAn {
@ -1375,7 +1422,7 @@ input, textarea {
textarea { textarea {
font-size: 13px; font-size: 13px;
min-width: 100%; min-width: 100%;
max-width: 100%!important; max-width: 100% !important;
height: 75px; height: 75px;
max-height: 200px; max-height: 200px;
} }
@ -1480,7 +1527,7 @@ input[type="file"], button[type="submit"] {
} }
.largeImg+.edit { .largeImg+.edit {
height: auto!important; height: auto !important;
} }
.largeImg.image+.edit .editIcon .imgParent { .largeImg.image+.edit .editIcon .imgParent {
@ -1668,6 +1715,7 @@ body {
opacity: 0; opacity: 0;
transform: translateY(40px); transform: translateY(40px);
} }
50% { 50% {
opacity: 0; opacity: 0;
transform: translateY(40px); transform: translateY(40px);
@ -1739,7 +1787,8 @@ body {
opacity: 1; opacity: 1;
} }
.clear { .top-btn {
--bgc: #27282e;
left: 140px; left: 140px;
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
@ -1747,12 +1796,77 @@ body {
transform: translate(0, -5px); transform: translate(0, -5px);
padding: 8.5px; padding: 8.5px;
border-radius: 100%; border-radius: 100%;
background: #27282e; background: var(--bgc);
width: 35px; width: 35px;
height: 35px; height: 35px;
transition: .5s ease; transition: .5s ease;
} }
.top-btn>svg {
width: 20px;
height: 100%;
position: relative;
left: -2.5px;
top: -2px;
}
.top-btn.menu {
left: auto;
right: 20px;
background: transparent;
}
.top-btn.menu:hover {
background: var(--bgc);
}
.top-btn.menu>svg {
left: -1.5px;
transition: transform .2s ease;
}
.top-btn.menu>.box {
display: none;
padding: 13px;
min-width: 160px;
/* height: 200px; */
background: var(--bgc);
margin: 15px 0 0 0;
border-radius: 10px;
position: absolute;
right: 0;
box-shadow: #00000026 0px 7px 29px 0px;
width: max-content;
}
.top-btn.menu>.box .item {
padding: 5px;
border-radius: 5px;
margin-bottom: 5px;
font-size: 13px;
transition: .5s ease;
}
.top-btn.menu>.box .item:hover {
background: #35373f;
}
.top-btn.menu>.box .item.datalink>svg {
transform: translateY(3px);
}
.top-btn.menu.active {
background: var(--bgc);
}
.top-btn.menu.active>.box {
display: block;
}
.top-btn.menu.active>svg {
transform: rotate(90deg);
}
@keyframes emptyTxtAn { @keyframes emptyTxtAn {
from { from {
opacity: 0; opacity: 0;
@ -1776,25 +1890,28 @@ body {
} }
.noDisplay { .noDisplay {
display: none!important; display: none !important;
} }
@keyframes clearAn { @keyframes clearAn {
0% { 0% {
transform: rotate(10deg); transform: rotate(10deg);
} }
25% { 25% {
transform: rotate(-10deg); transform: rotate(-10deg);
} }
50% { 50% {
transform: rotate(10deg); transform: rotate(10deg);
} }
75% { 75% {
transform: rotate(-13deg); transform: rotate(-13deg);
} }
} }
.clear:hover>svg { .top-btn.clear:hover>svg {
animation: clearAn 1s ease-in-out forwards; animation: clearAn 1s ease-in-out forwards;
transform-origin: top right; transform-origin: top right;
} }
@ -1809,14 +1926,6 @@ body.emptyEmbed.emptyContent .emptyTxt {
top: 800%; top: 800%;
} }
.clear>svg {
width: 20px;
height: 100%;
position: relative;
left: -2.5px;
top: -2px;
}
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 7px; width: 7px;
background: #292b2f00; background: #292b2f00;
@ -1830,36 +1939,44 @@ body.emptyEmbed.emptyContent .emptyTxt {
section.low .top>.gui { section.low .top>.gui {
opacity: .6; opacity: .6;
filter: blur(2px) brightness(.99); filter: blur(2px) brightness(.99);
pointer-events: none!important; pointer-events: none !important;
} }
section.low { section.low {
height: 50%!important; height: 50% !important;
transition: .4s ease; transition: .4s ease;
} }
section { section {
transition: .5s ease; transition: .5s ease;
} }
body.emptyEmbed.emptyContent section.side1:not(.low) { body.emptyEmbed.emptyContent section.side1:not(.low) {
height: 300%; height: 300%;
} }
.clear {
.top-btn {
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
z-index: 5; z-index: 5;
left: 135px; left: 135px;
} }
.main { .main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.side1 .item.top { .side1 .item.top {
height: 100%; height: 100%;
} }
.notification .inline { .notification .inline {
margin-top: 5px; margin-top: 5px;
background-color: #20222500; background-color: #20222500;
border: none; border: none;
} }
.bottom .colrs { .bottom .colrs {
bottom: 40px; bottom: 40px;
top: 100px; top: 100px;
@ -1868,18 +1985,22 @@ body.emptyEmbed.emptyContent .emptyTxt {
animation: colrsAn .1s ease-out; animation: colrsAn .1s ease-out;
box-shadow: 0px 5px 15px 0px #0000004f; box-shadow: 0px 5px 15px 0px #0000004f;
} }
body.reversed .bottom .colrs { body.reversed .bottom .colrs {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
} }
body.gui .side1 .item.top { body.gui .side1 .item.top {
height: 85%; height: 85%;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
.bottom { .bottom {
margin: 40px 0 0 0 !important; margin: 40px 0 0 0 !important;
} }
.pickerToggle { .pickerToggle {
display: block; display: block;
position: absolute; position: absolute;
@ -1891,12 +2012,15 @@ body.emptyEmbed.emptyContent .emptyTxt {
bottom: auto; bottom: auto;
margin-left: 15px; margin-left: 15px;
} }
.pickerToggle>svg { .pickerToggle>svg {
width: 17px; width: 17px;
} }
.main .side1 { .main .side1 {
border-right: none; border-right: none;
} }
.side1 .item.top { .side1 .item.top {
padding-top: 10px; padding-top: 10px;
transform: translateY(10px); transform: translateY(10px);
@ -1907,11 +2031,13 @@ body.emptyEmbed.emptyContent .emptyTxt {
.bottom .colrs { .bottom .colrs {
bottom: 10px; bottom: 10px;
} }
body.gui .side1 .item.top { body.gui .side1 .item.top {
height: 65%; height: 65%;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
.bottom { .bottom {
margin: 40px 0 0 0 !important; margin: 40px 0 0 0 !important;
} }
@ -1921,20 +2047,25 @@ body.emptyEmbed.emptyContent .emptyTxt {
.main .side1 { .main .side1 {
padding: 10px; padding: 10px;
} }
.top>.gui { .top>.gui {
margin-top: 5px; margin-top: 5px;
} }
.emptyTxt { .emptyTxt {
display: none!important; display: none !important;
} }
.msgEmbed { .msgEmbed {
margin: 20px 0px; margin: 20px 0px;
padding: 0.125rem 0 20px 65px; padding: 0.125rem 0 20px 65px;
} }
body.no-user .msgEmbed { body.no-user .msgEmbed {
padding-left: 25px; padding-left: 25px;
margin-top: 13px; margin-top: 13px;
} }
.avatar { .avatar {
left: 10px; left: 10px;
} }

117
assets/js/script.js
View file

@ -15,6 +15,7 @@ var params = new URL(location).searchParams,
noUser = hasParam('nouser'), noUser = hasParam('nouser'),
onlyEmbed = hasParam('embed'), onlyEmbed = hasParam('embed'),
activeFields, colNum = 1, num = 0, validationError, activeFields, colNum = 1, num = 0, validationError,
autoUpdateURL = localStorage.getItem('autoUpdateURL'),
jsonToBase64 = (jsonCode, withURL, redirect) => { jsonToBase64 = (jsonCode, withURL, redirect) => {
data = btoa(escape((JSON.stringify(typeof jsonCode === 'object' ? jsonCode : json)))); data = btoa(escape((JSON.stringify(typeof jsonCode === 'object' ? jsonCode : json))));
if (withURL) { if (withURL) {
@ -98,38 +99,41 @@ var params = new URL(location).searchParams,
} }
if (dataSpecified) if (dataSpecified)
window.json = base64ToJson(); json = base64ToJson();
window.onload = () => { addEventListener('load', () => {
let body = document.body; if (onlyEmbed)
document.body.classList.add('only-embed');
if (onlyEmbed) body.classList.add('only-embed');
else { else {
document.querySelector('.side1.noDisplay').classList.remove('noDisplay'); document.querySelector('.side1.noDisplay').classList.remove('noDisplay');
if (useJsonEditor) body.classList.remove('gui'); if (useJsonEditor)
document.body.classList.remove('gui');
} }
if (noUser) body.classList.add('no-user'); if (noUser)
document.body.classList.add('no-user');
else { else {
if (botName) document.querySelector('.username').textContent = botName; if (botName) document.querySelector('.username').textContent = botName;
if (botIcon) document.querySelector('.avatar').src = botIcon; if (botIcon) document.querySelector('.avatar').src = botIcon;
if (botVerified) document.querySelector('.msgEmbed > .contents').classList.add('verified'); if (botVerified) document.querySelector('.msgEmbed > .contents').classList.add('verified');
} }
if (reverseColmns) { if (reverseColmns) {
let side1 = document.querySelector('.side1'); const side1 = document.querySelector('.side1');
side1.parentElement.insertBefore(side1.nextElementSibling, side1); side1.parentElement.insertBefore(side1.nextElementSibling, side1);
body.classList.add('reversed'); document.body.classList.add('reversed');
}; };
if (autoUpdateURL)
document.querySelector('.top-btn.menu .item.auto input').checked = true;
document.querySelectorAll('.clickable > img') document.querySelectorAll('.clickable > img')
.forEach(e => e.parentElement.addEventListener('mouseup', el => window.open(el.target.src))); .forEach(e => e.parentElement.addEventListener('mouseup', el => window.open(el.target.src)));
let editorHolder = document.querySelector('.editorHolder'), const editorHolder = document.querySelector('.editorHolder'),
guiParent = document.querySelector('.top'), guiParent = document.querySelector('.top'),
embedContent = document.querySelector('.messageContent'), embedContent = document.querySelector('.messageContent'),
embedCont = document.querySelector('.messageContent + .container'), embedCont = document.querySelector('.messageContent + .container'),
gui = guiParent.querySelector('.gui:first-of-type'); gui = guiParent.querySelector('.gui:first-of-type');
window.editor = CodeMirror(elt => editorHolder.parentNode.replaceChild(elt, editorHolder), { editor = CodeMirror(elt => editorHolder.parentNode.replaceChild(elt, editorHolder), {
value: JSON.stringify(json, null, 4), value: JSON.stringify(json, null, 4),
gutters: ["CodeMirror-foldgutter", "CodeMirror-lint-markers"], gutters: ["CodeMirror-foldgutter", "CodeMirror-lint-markers"],
scrollbarStyle: "overlay", scrollbarStyle: "overlay",
@ -157,7 +161,7 @@ window.onload = () => {
}); });
editor.focus(); editor.focus();
let notif = document.querySelector('.notification'), const notif = document.querySelector('.notification'),
url = (url) => /^(https?:)?\/\//g.exec(url) ? url : '//' + url, url = (url) => /^(https?:)?\/\//g.exec(url) ? url : '//' + url,
makeShort = (txt, length, mediaWidth) => { makeShort = (txt, length, mediaWidth) => {
if (mediaWidth && window.matchMedia(`(max-width:${mediaWidth}px)`).matches) if (mediaWidth && window.matchMedia(`(max-width:${mediaWidth}px)`).matches)
@ -167,7 +171,8 @@ window.onload = () => {
if (msg === false) if (msg === false)
// Hide error element // Hide error element
return notif.animate({ opacity: '0', bottom: '-50px', offset: 1 }, { easing: 'ease', duration: 500 }).onfinish = () => notif.style.removeProperty('display'); return notif.animate({ opacity: '0', bottom: '-50px', offset: 1 }, { easing: 'ease', duration: 500 }).onfinish = () => notif.style.removeProperty('display');
notif.innerHTML = msg, notif.style.display = 'block'; notif.innerHTML = msg;
notif.style.display = 'block';
time && setTimeout(() => notif.animate({ opacity: '0', bottom: '-50px', offset: 1 }, { easing: 'ease', duration: 500 }) time && setTimeout(() => notif.animate({ opacity: '0', bottom: '-50px', offset: 1 }, { easing: 'ease', duration: 500 })
.onfinish = () => notif.style.removeProperty('display'), time); .onfinish = () => notif.style.removeProperty('display'), time);
return false; return false;
@ -193,23 +198,51 @@ window.onload = () => {
return error(err); return error(err);
} }
return true; return true;
}, innerHTML = (element, html) => {
// console.log(element, html);
element.innerHTML = html;
return element;
}, markup = (txt, opts) => { }, markup = (txt, opts) => {
if (opts.replaceEmojis)
txt = txt.replace(/(?<!code(?: \w+=".+")?>[^>]+)(?<!\/[^\s"]+?):((?!\/)\w+):/g, (match, p) => p && emojis[p] ? emojis[p] : match);
txt = txt txt = txt
.replace(/\&#60;:[^:]+:(\d+)\&#62;/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.png"/>') /** Markdown */
.replace(/\&#60;a:[^:]+:(\d+)\&#62;/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.gif"/>') .replace(/&#60;:[^:]+:(\d+)&#62;/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.png"/>')
.replace(/&#60;a:[^:]+:(\d+)&#62;/g, '<img class="emoji" src="https://cdn.discordapp.com/emojis/$1.gif"/>')
.replace(/~~(.+?)~~/g, '<s>$1</s>') .replace(/~~(.+?)~~/g, '<s>$1</s>')
.replace(/\*\*\*(.+?)\*\*\*/g, '<em><strong>$1</strong></em>') .replace(/\*\*\*(.+?)\*\*\*/g, '<em><strong>$1</strong></em>')
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>') .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
.replace(/__(.+?)__/g, '<u>$1</u>') .replace(/__(.+?)__/g, '<u>$1</u>')
.replace(/\*(.+?)\*/g, '<em>$1</em>') .replace(/\*(.+?)\*/g, '<em>$1</em>')
.replace(/_(.+?)_/g, '<em>$1</em>') .replace(/_(.+?)_/g, '<em>$1</em>')
if (opts.inlineBlock) txt = txt.replace(/\`([^\`]+?)\`|\`\`([^\`]+?)\`\`|\`\`\`((?:\n|.)+?)\`\`\`/g, (m, x, y, z) => x ? `<code class="inline">${x}</code>` : y ? `<code class="inline">${y}</code>` : z ? `<code class="inline">${z}</code>` : m); // Replace >>> and > with block quotes. &#62; is HTML code for >
else txt = txt.replace(/\`\`\`(\w{1,15})?\n((?:\n|.)+?)\`\`\`|\`\`(.+?)\`\`(?!\`)|\`([^\`]+?)\`/g, (m, w, x, y, z) => w && x ? `<pre><code class="${w}">${x.trim()}</code></pre>` : x ? `<pre><code class="hljs nohighlight">${x.trim()}</code></pre>` : y || z ? `<code class="inline">${y || z}</code>` : m); .replace(/^(?: *&#62;&#62;&#62; +([\s\S]*))|^(?: *&#62;(?!&#62;&#62;) +([^\n]*)(\n *&#62;(?!&#62;&#62;) +([^\n]*))*\n?)/mg, (m, b, c) =>
if (opts.inEmbed) txt = txt.replace(/\[([^\[\]]+)\]\((.+?)\)/g, `<a title="$1" target="_blank" class="anchor" href="$2">$1</a>`); `<div class="blockquote"><div class="blockquoteDivider"></div><blockquote>${b || c}</blockquote></div>`)
if (opts.replaceEmojis) txt = txt.replace(/(?<!code(?: \w+=".+")?>[^>]+)(?<!\/[^\s"]+?):((?!\/)\w+):/g, (match, x) => x && emojis[x] ? emojis[x] : match);
txt = txt /** Mentions */
.replace(/&#62; .+(?:\s&#62; .+)*\n?/g, match => `<div class="blockquote"><div class="blockquoteDivider"></div><blockquote>${match.replace(/&#62; /g, '')}</blockquote></div>`) .replace(/&#60;#\d+&#62;/g, () => `<span class="mention channel interactive">channel</span>`)
.replace(/\n/g, '<br>') .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>`
})
if (opts.inlineBlock)
// Treat both inline code and code blocks as inline code
txt = txt.replace(/`([^`]+?)`|``([^`]+?)``|```((?:\n|.)+?)```/g, (m, x, y, z) => x ? `<code class="inline">${x}</code>` : y ? `<code class="inline">${y}</code>` : z ? `<code class="inline">${z}</code>` : m);
else {
// Code block
txt = txt.replace(/```(?:([a-z0-9_+\-.]+?)\n)?\n*([^\n][^]*?)\n*```/ig, (m, w, x) => {
if (w) return `<pre><code class="${w}">${x.trim()}</code></pre>`
else return `<pre><code class="hljs nohighlight">${x.trim()}</code></pre>`
});
// Inline code
txt = txt.replace(/`([^`]+?)`|``([^`]+?)``/g, (m, x, y, z) => x ? `<code class="inline">${x}</code>` : y ? `<code class="inline">${y}</code>` : z ? `<code class="inline">${z}</code>` : m)
}
if (opts.inEmbed)
txt = txt.replace(/\[([^\[\]]+)\]\((.+?)\)/g, `<a title="$1" target="_blank" class="anchor" href="$2">$1</a>`);
return txt; return txt;
}, },
embed = document.querySelector('.embedGrid'), embed = document.querySelector('.embedGrid'),
@ -232,7 +265,7 @@ window.onload = () => {
yesterday.toDateString() === date.toDateString() ? `Yesterday at ${dateArray}` : yesterday.toDateString() === date.toDateString() ? `Yesterday at ${dateArray}` :
`${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}/${date.getFullYear()}`; `${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}/${date.getFullYear()}`;
}, display = (el, data, displayType) => { }, display = (el, data, displayType) => {
if (data) el.innerHTML = data; if (data) innerHTML(el, data);
el.style.display = displayType || "unset"; el.style.display = displayType || "unset";
}, hide = el => el.style.removeProperty('display'), }, hide = el => el.style.removeProperty('display'),
imgSrc = (elm, src, remove) => remove ? elm.style.removeProperty('content') : elm.style.content = `url(${src})`; imgSrc = (elm, src, remove) => remove ? elm.style.removeProperty('content') : elm.style.content = `url(${src})`;
@ -405,7 +438,7 @@ window.onload = () => {
</form> </form>
</div>`; </div>`;
let fieldsEditor = gui.querySelector('.fields ~ .edit'), addField = ` const fieldsEditor = gui.querySelector('.fields ~ .edit'), addField = `
<div class="addField"> <div class="addField">
<p>New Field</p> <p>New Field</p>
<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 477.867 477.867" xml:space="preserve"> <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 477.867 477.867" xml:space="preserve">
@ -639,7 +672,7 @@ window.onload = () => {
try { try {
if (!data.content) document.body.classList.add('emptyContent'); if (!data.content) document.body.classList.add('emptyContent');
else { else {
embedContent.innerHTML = markup(encodeHTML(data.content), { replaceEmojis: true }); innerHTML(embedContent, markup(encodeHTML(data.content), { replaceEmojis: true }));
document.body.classList.remove('emptyContent'); document.body.classList.remove('emptyContent');
} }
if (data.embed && Object.keys(data.embed).length) { if (data.embed && Object.keys(data.embed).length) {
@ -676,7 +709,7 @@ window.onload = () => {
else if (e.timestamp) display(embedFooter, `<span class="embedFooterText">${encodeHTML(tstamp(e.timestamp))}</span></div>`, 'flex'); else if (e.timestamp) display(embedFooter, `<span class="embedFooterText">${encodeHTML(tstamp(e.timestamp))}</span></div>`, 'flex');
else hide(embedFooter); else hide(embedFooter);
if (e.fields) { if (e.fields) {
embedFields.innerHTML = ''; innerHTML(embedFields, '');
let index, gridCol; let index, gridCol;
e.fields.forEach((f, i) => { e.fields.forEach((f, i) => {
@ -733,12 +766,19 @@ window.onload = () => {
display(embedFields, undefined, 'grid'); display(embedFields, undefined, 'grid');
} else hide(embedFields); } else hide(embedFields);
document.body.classList.remove('emptyEmbed'); document.body.classList.remove('emptyEmbed');
document.querySelectorAll('.markup pre > code').forEach((block) => hljs.highlightBlock(block)); for (block of document.querySelectorAll('.markup pre > code'))
hljs.highlightBlock(block);
error(false); error(false);
twemoji.parse(msgEmbed); twemoji.parse(msgEmbed);
} else document.body.classList.add('emptyEmbed'); } else document.body.classList.add('emptyEmbed');
if (!embedCont.innerText) document.body.classList.add('emptyEmbed'); if (!embedCont.innerText) document.body.classList.add('emptyEmbed');
json = data; json = data;
if (autoUpdateURL) {
// Update data param in url.
const url = new URL(location.href);
url.searchParams.set('data', jsonToBase64(json));
history.replaceState(null, null, url.href);
}
} catch (e) { } catch (e) {
console.log(e); console.log(e);
error(e); error(e);
@ -772,7 +812,7 @@ window.onload = () => {
catch (e) { catch (e) {
if (editor.getValue()) return; if (editor.getValue()) return;
document.body.classList.add('emptyEmbed'); document.body.classList.add('emptyEmbed');
embedContent.innerHTML = ''; innerHTML(embedContent, '');
} }
}); });
@ -824,8 +864,8 @@ window.onload = () => {
}, 1000) }, 1000)
document.querySelector('.timeText').innerText = tstamp(); document.querySelector('.timeText').innerText = tstamp();
document.querySelectorAll('.markup pre > code').forEach((block) => hljs.highlightBlock(block)); for (block of document.querySelectorAll('.markup pre > code'))
hljs.highlightBlock(block);
document.querySelector('.opt.gui').addEventListener('click', () => { document.querySelector('.opt.gui').addEventListener('click', () => {
json = JSON.parse(editor.getValue() || '{}'); json = JSON.parse(editor.getValue() || '{}');
buildGui(json, { activate: activeFields }); buildGui(json, { activate: activeFields });
@ -859,6 +899,21 @@ window.onload = () => {
content.focus(); content.focus();
}) })
document.querySelector('.top-btn.menu').addEventListener('click', e => {
if (e.target.closest('.item.datalink'))
prompt('Here\'s the current URL with base64 embed data:', jsonToBase64(json, true));
else if (e.target.closest('.item.auto')) {
const input = e.target.closest('.item.auto').querySelector('input');
input.checked = !input.checked;
autoUpdateURL = input.checked;
if (input.checked) localStorage.setItem('autoUpdateURL', true);
else localStorage.removeItem('autoUpdateURL');
update(json);
}
e.target.closest('.top-btn').classList.toggle('active')
})
document.querySelectorAll('.img').forEach(e => { document.querySelectorAll('.img').forEach(e => {
if (e.nextElementSibling?.classList.contains('spinner-container')) if (e.nextElementSibling?.classList.contains('spinner-container'))
e.addEventListener('error', el => { e.addEventListener('error', el => {
@ -894,4 +949,4 @@ window.onload = () => {
}) })
if (onlyEmbed) document.querySelector('.side1')?.remove(); if (onlyEmbed) document.querySelector('.side1')?.remove();
}; });

20
index.html
View file

@ -47,7 +47,7 @@
<div class="json opt"> <div class="json opt">
<p>JSON</p> <p>JSON</p>
</div> </div>
<div class="clear"> <div class="top-btn clear">
<svg title="clear everything" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" xml:space="preserve"> <svg title="clear everything" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" xml:space="preserve">
<g> <g>
<path d="M740.4,401.4c-46-25.4-92.5-49.9-139.1-74.2c-36.3-18.9-73.3-19.2-110-0.9c-22,11-38.8,27.5-50.4,49.9c116.5,62,232.2,123.6,348.7,185.6c2.2-5.1,4.4-9.3,6-13.7C816.7,491.3,794.5,431.2,740.4,401.4z" style="fill: #fff;"></path> <path d="M740.4,401.4c-46-25.4-92.5-49.9-139.1-74.2c-36.3-18.9-73.3-19.2-110-0.9c-22,11-38.8,27.5-50.4,49.9c116.5,62,232.2,123.6,348.7,185.6c2.2-5.1,4.4-9.3,6-13.7C816.7,491.3,794.5,431.2,740.4,401.4z" style="fill: #fff;"></path>
@ -93,6 +93,24 @@
<g></g> <g></g>
</svg> </svg>
</div> </div>
<div class="top-btn menu">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
<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>
<div class="box">
<div class="item datalink">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<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"/>
<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"/>
</svg>
<span>Get data link</span>
</div>
<div class="item auto">
<input type="checkbox" id="auto" name="auto" autocomplete="off">
<span>Auto-update data link in URL</span>
</div>
</div>
</div>
</div> </div>
<div class="top item"> <div class="top item">
<div class="gui"></div> <div class="gui"></div>