Starting embed support

webpage/embed.js

@@ -0,0 +1,139 @@
+class embed{
+    constructor(json, owner){
+
+        this.type=this.getType(json);
+        this.owner=owner;
+        this.json=json;
+    }
+    getType(json){
+        return json.type||"form";
+    }
+    generateHTML(){
+        switch(this.type){
+            case "form":
+                return this.generateForm();
+            case "image":
+                return this.generateImage();
+            case "link":
+                return this.generateLink();
+            case "article":
+                return this.generateArticle();
+            default:
+                console.warn(`unsupported embed type ${this.type}, please add support dev :3`,this.json);
+                return document.createElement("div");//prevent errors by giving blank div
+        }
+    }
+    generateForm(){
+        const div=document.createElement("div");
+        div.style.backgroundColor="#"+this.json.color.toString(16);
+        div.classList.add("embed-color");
+
+        const embed=document.createElement("div");
+        embed.classList.add("embed");
+        div.append(embed);
+        const title=document.createElement("h3");
+        title.innerText=this.json.title;
+        embed.append(title);
+        embed.append(document.createElement("br"));
+        for(const thing of this.json.fields){
+            const b=document.createElement("b");
+            b.innerText=thing.name;
+            embed.append(b);
+            embed.append(document.createElement("br"));
+            const p=document.createElement("p")
+            p.innerText=thing.value;
+            p.classList.add("embedp")
+            embed.append(p);
+        }
+        const footer=document.createElement("div");
+        if(this.json.footer.icon_url){
+            const img=document.createElement("img");
+            img.src=this.json.footer.icon_url;
+            img.classList.add("embedicon");
+            footer.append(img);
+        }
+        if(this.json.footer.text){
+            footer.append(this.json.footer.text);
+        }
+        embed.append(footer);
+        return div;
+    }
+    generateImage(){
+        const img=document.createElement("img");
+        img.classList.add("messageimg")
+        img.onclick=function(){
+            const full=new fullscreen(["img",img.src,["fit"]]);
+            full.show();
+        }
+        img.src=this.json.thumbnail.proxy_url;
+        return img;
+    }
+    generateLink(){
+        const table=document.createElement("table");
+        table.classList.add("embed","linkembed");
+        const trtop=document.createElement("tr");
+        table.append(trtop);
+        {
+            const td=document.createElement("td");
+            const a=document.createElement("a");
+            a.href=this.json.url;
+            a.innerText=this.json.title;
+            td.append(a);
+            trtop.append(td);
+        }
+        {
+            const td=document.createElement("td");
+            const img=document.createElement("img");
+            img.classList.add("embedimg");
+            img.onclick=function(){
+                const full=new fullscreen(["img",img.src,["fit"]]);
+                full.show();
+            }
+            img.src=this.json.thumbnail.proxy_url;
+            td.append(img);
+            trtop.append(td);
+        }
+        const bottomtr=document.createElement("tr");
+        const td=document.createElement("td");
+        const span=document.createElement("span");
+        span.innerText=this.json.description;
+        td.append(span);
+        bottomtr.append(td);
+        table.append(bottomtr)
+        return table;
+    }
+    generateArticle(){
+        const colordiv=document.createElement("div");
+        colordiv.style.backgroundColor="#000000";
+        colordiv.classList.add("embed-color");
+
+        console.log(this.json,":3")
+        const div=document.createElement("div");
+        div.classList.add("embed");
+        const providor=document.createElement("p");
+        providor.classList.add("provider");
+        providor.innerText=this.json.provider.name;
+        div.append(providor);
+        const a=document.createElement("a");
+        a.href=this.json.url;
+        a.innerText=this.json.title;
+        div.append(a);
+
+        const description=document.createElement("p");
+        description.innerText=this.json.description;
+        div.append(description);
+
+        {
+            const img=document.createElement("img");
+            img.classList.add("bigembedimg");
+            img.onclick=function(){
+                const full=new fullscreen(["img",img.src,["fit"]]);
+                full.show();
+            }
+            img.src=this.json.thumbnail.proxy_url;
+            div.append(img);
+        }
+        colordiv.append(div);
+        return colordiv;
+    }
+}

webpage/index.html

@@ -14,6 +14,7 @@
     <script src="/contextmenu.js"></script>
     <script src="/member.js"></script>
     <script src="/user.js"></script>
+    <script src="/embed.js"></script>
     <script src="/message.js"></script>
     <script src="/channel.js"></script>
     <script src="/role.js"></script>

webpage/login.html

@@ -1,5 +1,6 @@
 <body>
 <head>
+<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="/style.css" rel="stylesheet" type="text/css" />
 <link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>

webpage/message.js

@@ -42,6 +42,10 @@ class cmessage{
         for(const thing of Object.keys(messagejson)){
             this[thing]=messagejson[thing];
         }
+        for(const thing in this.embeds){
+            console.log(thing,this.embeds)
+            this.embeds[thing]=new embed(this.embeds[thing],this);
+        }
         this.author=new user(this.author);
     }
     messageevents(obj){
@@ -88,7 +92,7 @@ class cmessage{
         messagelist.push(div)
         build.classList.add("message");
         div.appendChild(build);
-        if({0:true,19:true}[this.type]||this.attachments.length!=0){
+        if({0:true,19:true}[this.type]||this.attachments.length!==0){
             const pfpRow = document.createElement('th');
 
             let pfpparent, current
@@ -143,7 +147,7 @@ class cmessage{
             texttxt.appendChild(messagedwrap)
 
             build.appendChild(text)
-            if(this.attachments.length!=0){
+            if(this.attachments.length){
                 const attatch = document.createElement("tr")
                 for(const thing of this.attachments){
                     const array=thing.url.split("/");array.shift();array.shift();array.shift();
@@ -164,6 +168,13 @@ class cmessage{
                 }
                 messagedwrap.appendChild(attatch)
             }
+            if(this.embeds.length){
+                const embeds = document.createElement("tr")
+                for(const thing of this.embeds){
+                    embeds.appendChild(thing.generateHTML());
+                }
+                messagedwrap.appendChild(embeds)
+            }
             //
         }else if(this.type===7){
 

webpage/register.html

@@ -1,5 +1,6 @@
 <body>
 <head>
+<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link href="/style.css" rel="stylesheet" type="text/css" />
 <link href="/themes.css" rel="stylesheet" type="text/css" id="lightcss"/>

webpage/style.css

@@ -288,7 +288,7 @@ div {
 	font-size: 16px;
 	padding: 3px;
 	border-radius: .25cm;
-	width: -webkit-fill-available;
+	width: 99%;
 	height: .5in;
 	z-index: -100;
 }
@@ -563,7 +563,13 @@ textarea {
 	cursor: pointer;
 	user-select: none;
 }
-
+.embedimg {
+	cursor: pointer;
+	user-select: none;
+	max-width:1in;
+	max-height:.75in;
+	border-radius:.03in;
+}
 .tag {
 	font-size: .13in;
 	font-weight: 500;
@@ -610,7 +616,7 @@ button {
 	text-align: left;
 	font-size: .45cm;
 	cursor: pointer;
-	border-width: 0px .00in .03in 0;
+	border-width: 0px .00in .03in 0in;
 	border-radius:.03in;
 	margin: .02in .05in;
 	box-shadow: 0px 0px .03in var(--black);
@@ -892,3 +898,42 @@ span {
 	font-size:.125in;
 	margin-left:.025in;
 }
+.embed-color{
+	padding-left: .04in;
+	border-radius:.05in;
+}
+.embed{
+	background:var(--embed);
+	padding:.075in;
+	border-radius:.05in;
+	max-width: 4in;
+	font-size: .15in;
+}
+.embedp{
+	margin-bottom:.075in
+}
+.embedicon{
+	width:.25in;
+	height:.25in;
+	border-radius:.25in;
+	margin-right:.1in;
+}
+.linkembed{
+	max-width:5in;
+}
+.bigembedimg {
+	cursor: pointer;
+	user-select: none;
+	max-width:4in;
+	max-height:3in;
+	border-radius:.03in;
+}
+.embed a{
+	margin-bottom:.1in;
+	display: block;
+	text-decoration:none;
+	font-size:.2in
+}
+.provider{
+	color:var(--timestamp-color)
+}

webpage/themes.css

@@ -42,6 +42,7 @@
 	--scrollbar-track: #34313c;
 	--scrollbar-thumb: #201f29;
 	--scrollbar-thumb-hover: #16161f;
+	--embed: #1a1823;
 }
 .WHITE-theme {
 	color-scheme: light;