various changes+hover events

.gitignore

@@ -135,4 +135,5 @@ CC
 uptime.json
 .directory
 .dist/
-bun.lockb
+bun.lockb
+src/webpage/translations/langs.js

package.json

@@ -12,13 +12,7 @@
   "author": "MathMan05",
   "license": "GPL-3.0",
   "dependencies": {
-    "@html-eslint/parser": "^0.27.0",
-    "@stylistic/eslint-plugin-js": "^2.8.0",
-    "@swc/core": "^1.7.26",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
-    "@typescript-eslint/parser": "^8.14.0",
     "compression": "^1.7.4",
-    "eslint-plugin-html": "^8.1.1",
     "express": "^4.19.2",
     "gulp-sourcemaps": "^3.0.0",
     "gulp-swc": "^2.2.0",
@@ -26,6 +20,16 @@
     "ts-to-jsdoc": "^2.2.0"
   },
   "devDependencies": {
+    "@html-eslint/parser": "^0.27.0",
+    "eslint-plugin-html": "^8.1.1",
+    "@stylistic/eslint-plugin-js": "^2.8.0",
+    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/parser": "^8.14.0",
+    "@rsbuild/core": "^1.1.4",
+    "@rsbuild/plugin-node-polyfill": "^1.2.0",
+    "@swc/core": "^1.7.26",
+    "rspack": "^0.1.1",
+    "swc": "^1.0.11",
     "@eslint/js": "^9.10.0",
     "@html-eslint/eslint-plugin": "^0.25.0",
     "@stylistic/eslint-plugin": "^2.3.0",

src/webpage/hover.ts

@@ -0,0 +1,43 @@
+import { Contextmenu } from "./contextmenu.js";
+import { MarkDown } from "./markdown.js";
+
+class Hover{
+    str:string|MarkDown
+    constructor(txt:string|MarkDown){
+        this.str=txt;
+    }
+    addEvent(elm:HTMLElement){
+        let timeOut=setTimeout(()=>{},0);
+        let elm2=document.createElement("div");
+        elm.addEventListener("mouseover",()=>{
+            timeOut=setTimeout(()=>{
+                elm2=this.makeHover(elm);
+            },750)
+        });
+        elm.addEventListener("mouseout",()=>{
+            clearTimeout(timeOut);
+            elm2.remove();
+        })
+    }
+    makeHover(elm:HTMLElement){
+        const div=document.createElement("div");
+        if(this.str instanceof MarkDown){
+            div.append(this.str.makeHTML({stdsize:true}))
+        }else{
+            div.append(this.str);
+        }
+        const box=elm.getBoundingClientRect();
+        div.style.top=(box.bottom+4)+"px";
+        div.style.left=Math.floor(box.left+box.width/2)+"px";
+        div.classList.add("hoverthing");
+        div.style.opacity="0";
+        setTimeout(()=>{
+            div.style.opacity="1";
+        },10)
+        document.body.append(div);
+        Contextmenu.keepOnScreen(div);
+        console.log(div,elm);
+        return div;
+    }
+}
+export{Hover}

src/webpage/localuser.ts

@@ -1724,6 +1724,7 @@ class Localuser{
 
 		const typebox = document.getElementById("typebox") as CustomHTMLDivElement;
 		this.typeMd=typebox.markdown;
+		this.typeMd.owner=this;
 		this.typeMd.onUpdate=this.search.bind(this);
 	}
 	MDReplace(replacewith:string,original:string){

src/webpage/message.ts

@@ -13,6 +13,7 @@ import{ Emoji }from"./emoji.js";
 import{ Dialog }from"./dialog.js";
 import{ mobile }from"./login.js";
 import { I18n } from "./i18n.js";
+import { Hover } from "./hover.js";
 
 class Message extends SnowFlake{
 	static contextmenu = new Contextmenu<Message, undefined>("message menu");
@@ -133,6 +134,7 @@ class Message extends SnowFlake{
 			}
 		);
 	}
+	edited_timestamp:string|null=null;
 	giveData(messagejson: messagejson){
 		const func = this.channel.infinite.snapBottom();
 		for(const thing of Object.keys(messagejson)){
@@ -510,7 +512,16 @@ class Message extends SnowFlake{
 				time.textContent = "  " + formatTime(new Date(this.timestamp));
 				time.classList.add("timestamp");
 				userwrap.appendChild(time);
-
+				const hover=new Hover(new Date(this.timestamp).toString());
+				hover.addEvent(time);
+				if(this.edited_timestamp){
+					const edit=document.createElement("span");
+					edit.classList.add("timestamp");
+					edit.textContent="(edited)";
+					const hover=new Hover(new Date(this.edited_timestamp).toString());
+					hover.addEvent(edit);
+					userwrap.append(edit);
+				}
 				text.appendChild(userwrap);
 			}else{
 				div.classList.remove("topMessage");

src/webpage/style.css

@@ -259,7 +259,15 @@ textarea {
 	width: 12px;
 	pointer-events: none;
 }
-
+.hoverthing{
+	position:absolute;
+	background:var(--dock-bg);
+	padding:.04in;
+	border-radius:.05in;
+	transform: translate(-50%, 0);
+	transition: opacity .2s;
+	border: solid .03in var(--black);
+}
 /* Animations */
 @keyframes fade {
 	0%, 100% {
@@ -2017,4 +2025,4 @@ fieldset input[type="radio"] {
 }
 .bigemoji{
 	width:.6in;
-}
+}