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

assets/css/index.css

@@ -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) {
+@media screen and (max-width: 530px) {
-    .bottom .colrs {
+    .msgEmbed {
-        top: 70px;
+        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;
+    }
 }

assets/js/script.js

@@ -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');
+    let colrs = document.querySelector('.colrs'),
-    document.querySelector('.colBack').addEventListener('click', e => {
+        hexInput = colrs.querySelector('.hex>div input'),
-        picker.self.remove(); removePicker();
+        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('.colrs .hex>div').addEventListener('input', e => {
-    document.querySelector('.pickerToggle').addEventListener('click', () => colrs.classList.toggle('display'));
+        let inputValue = e.target.value;
-    update(json);
+        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);
+    })
 };

index.html

@@ -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 class="colrs high">
-                        <div></div>
+                        <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">