feat<client>: image update (#20) (#21)

* feat<client>: ui overhaul part 3 (#11) * fix<client>: remove message empty popup * feat<client>: UI user list User List UI overhauled Fixed some mobile bugs * feat<client>: UI user popup & message rework Added user popups Reworked how messages are displayed * Delete undefined * fix<client>: context menu Removed default context menu from entire page Removed unused css Caught up to commit 7e012f9 * feat<client>: UI user popup styling Styled user popups Fixed user popup bugs Added user popup hide on window resize * Update README.md * feat<client>: ui overhaul part 3 * fix<client>: some bugs Made some static images into dynamic images Fixed a small mention styling mistake * chore<back>: increment version * feat<client>: allow mentioning with @user or @user#discrm * Update app.css (#13) * Update app.css (#15) * refactor<all>: breaking structure change to servers * fix<back>: forgot name from channel struct * chore<ws>: increment version * chore<back>: add potential pfp prototype * feat<client>: context menus (#18) * Fix prod (#17) * feat<client>: ui overhaul part 3 (#11) * fix<client>: remove message empty popup * feat<client>: UI user list User List UI overhauled Fixed some mobile bugs * feat<client>: UI user popup & message rework Added user popups Reworked how messages are displayed * Delete undefined * fix<client>: context menu Removed default context menu from entire page Removed unused css Caught up to commit 7e012f9 * feat<client>: UI user popup styling Styled user popups Fixed user popup bugs Added user popup hide on window resize * Update README.md * feat<client>: ui overhaul part 3 * fix<client>: some bugs Made some static images into dynamic images Fixed a small mention styling mistake * chore<back>: increment version * feat<client>: allow mentioning with @user or @user#discrm * Update app.css (#13) * Update app.css (#15) * refactor<all>: breaking structure change to servers * fix<back>: forgot name from channel struct * chore<ws>: increment version --------- * feat<client>: context menus Added message and user context menus Fixed scrollbar bug on firefox Fixed @System user popup --------- * feat<client>: chat images Images in chat, yay --------- Co-authored-by: Sebastian (SeaBass) W <82669765+dip-land@users.noreply.github.com>
TenDRILLL · May 2, 2024 · 90d156c · 90d156c
1 parent e5cfd99
commit 90d156c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/src/html/pages/app.ejs b/src/html/pages/app.ejs
@@ -87,7 +87,6 @@
 <script src="/resource/app.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/linkifyjs@4.1.3/dist/linkify.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/linkify-html@4.1.3/dist/linkify-html.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/dompurify@2.4.0/dist/purify.min.js"></script>
 </body>
 </html>
diff --git a/src/html/scripts/app.js b/src/html/scripts/app.js
@@ -182,7 +182,7 @@ function message(data, scroll, previousMessage){
 }
 
 function formatContent(content, message) {
-    content = DOMPurify.sanitize(linkifyHtml(content, {target: "_blank"}),{ ALLOWED_TAGS: ['a'], ALLOWED_ATTR: ['target','href'] });
+    content = linky(DOMPurify.sanitize(content));
     const mentionRgx = /&lt;@[a-z0-9]{8}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{4}-[a-z0-9]{12}&gt;/gmi;
     let m;
     do {
@@ -196,6 +196,22 @@ function formatContent(content, message) {
     return content;
 }
 
+function linky(content) {
+    const links = linkify.find(content);
+    const anchors = [...content.matchAll(/<a (.*?)<\/a>/g)];
+    for (const index in links) {
+        const link = links[index];
+        const anchor = anchors[index]?.at(0);
+        if (anchor && anchor.includes(link.href)) {
+            content = content.replace(anchor, `${anchor.replaceAll('<', '&lt;').replaceAll('>', '&gt;')}`);
+            continue;
+        }
+        content = content.replace(link.href, `<a href="${link.href}" target="_blank">${link.href}</a>`);
+        content += `<img src="${link.href}" onerror="this.remove()" />`;
+    }
+    return content;
+}
+
 const toast = document.getElementById("snackbar");
 function showToast(msg, load, time){
     toast.className = "show";
@@ -326,6 +342,7 @@ if (isMobile) {
     document.body.style.minHeight = "100%";
     leftContainer.style = 'display: none; width: 100%; max-width: 100vw;';
     userContainer.style = 'display: none; width: 100%; min-width: 100%; max-width: 100vw;';
+    document.getElementById('messages').style.maxWidth = '100vw';
     leftToggle.style.display = "block";
     mobileSend.style.display = "block";
     mobileSend.addEventListener("click", () => {

diff --git a/src/html/styles/app.css b/src/html/styles/app.css
@@ -53,7 +53,7 @@ body {
     padding-bottom: .5rem;
 }
 
-.navbar > div {
+.navbar>div {
     display: flex;
     flex-wrap: inherit;
     align-items: center;
@@ -319,7 +319,7 @@ pre {
     flex-grow: 1;
 }
 
-#leftContainer > div {
+#leftContainer>div {
     display: flex;
     height: 1px;
     flex-grow: 1;
@@ -487,7 +487,7 @@ div:has(> #serverNameContainer) {
 }
 
 #user>img {
-    float: left; 
+    float: left;
     border-radius: 50%;
     width: 42px;
     aspect-ratio: 1;
@@ -531,7 +531,7 @@ div:has(> #serverNameContainer) {
 }
 
 .userPopupMain {
-    height: 100%; 
+    height: 100%;
     flex-direction: column;
 }
 
@@ -688,7 +688,7 @@ div:has(> #serverNameContainer) {
     display: flex;
     flex-direction: column;
     width: 100%;
-    min-width: 240px;
+    max-width: calc(100vw - 552px);
     background-color: var(--bg-4);
     color: #FFFFFF;
     overflow: hidden;
@@ -783,6 +783,15 @@ div:has(> #serverNameContainer) {
 .message pre {
     font-size: 16px;
     margin: 0;
+    overflow-wrap: break-word;
+    text-wrap: wrap;
+}
+
+.message pre img {
+    display: block;
+    max-height: 350px;
+    max-width: min(550px, 100%);
+    border-radius: 6px;
 }
 
 .mention {
@@ -834,16 +843,16 @@ div:has(> #serverNameContainer) {
     cursor: pointer;
 }
 
-#mobileSend > svg {
+#mobileSend>svg {
     padding: 10px;
     transform: translateY(-2px) translateX(2px) rotate(-45deg);
 }
 
-#messageField ~ #messageFieldPlaceholder {
+#messageField~#messageFieldPlaceholder {
     display: none;
 }
 
-#messageField:empty ~ #messageFieldPlaceholder {
+#messageField:empty~#messageFieldPlaceholder {
     display: block;
 }
 
@@ -961,4 +970,4 @@ div:has(> #serverNameContainer) {
     #userPopup {
         width: auto;
     }
-}
+}