diff --git a/src/webpage/channel.ts b/src/webpage/channel.ts index aee41a7..62c383c 100644 --- a/src/webpage/channel.ts +++ b/src/webpage/channel.ts @@ -852,6 +852,7 @@ class Channel extends SnowFlake{ await this.buildmessages(); //loading.classList.remove("loading"); (document.getElementById("typebox") as HTMLDivElement).contentEditable =""+this.canMessage; + (document.getElementById("upload") as HTMLElement).style.visibility=this.canMessage?"visible":"hidden"; (document.getElementById("typebox") as HTMLDivElement).focus(); } typingmap: Map = new Map(); diff --git a/src/webpage/direct.ts b/src/webpage/direct.ts index e6e1add..1b582a1 100644 --- a/src/webpage/direct.ts +++ b/src/webpage/direct.ts @@ -199,6 +199,7 @@ class Group extends Channel{ } this.buildmessages(); (document.getElementById("typebox") as HTMLDivElement).contentEditable ="" + true; + (document.getElementById("upload") as HTMLElement).style.visibility="visible"; (document.getElementById("typebox") as HTMLDivElement).focus(); } messageCreate(messagep: { d: messagejson }){ diff --git a/src/webpage/icons/upload.svg b/src/webpage/icons/upload.svg new file mode 100644 index 0000000..6c72ded --- /dev/null +++ b/src/webpage/icons/upload.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/webpage/index.html b/src/webpage/index.html index 46c0197..8a05715 100644 --- a/src/webpage/index.html +++ b/src/webpage/index.html @@ -81,7 +81,10 @@
-
+
+ +
+
+ diff --git a/src/webpage/index.ts b/src/webpage/index.ts index 40e2fa6..9099fba 100644 --- a/src/webpage/index.ts +++ b/src/webpage/index.ts @@ -3,7 +3,7 @@ import{ Contextmenu }from"./contextmenu.js"; import{ mobile, getBulkUsers, setTheme, Specialuser }from"./login.js"; import{ MarkDown }from"./markdown.js"; import{ Message }from"./message.js"; -import{ File }from"./file.js"; +import{File}from"./file.js"; import { I18n } from "./i18n.js"; (async ()=>{ @@ -17,10 +17,12 @@ import { I18n } from "./i18n.js"; const loadingText=document.getElementById("loadingText"); const loaddesc=document.getElementById("load-desc"); const switchaccounts=document.getElementById("switchaccounts"); - if(loadingText&&loaddesc&&switchaccounts){ + const filedroptext=document.getElementById("filedroptext"); + if(loadingText&&loaddesc&&switchaccounts&&filedroptext){ loadingText.textContent=I18n.getTranslation("htmlPages.loadingText"); loaddesc.textContent=I18n.getTranslation("htmlPages.loaddesc"); switchaccounts.textContent=I18n.getTranslation("htmlPages.switchaccounts"); + filedroptext.textContent=I18n.getTranslation("uploadFilesText"); } } I18n @@ -191,50 +193,115 @@ import { I18n } from "./i18n.js"; } } - interface CustomHTMLDivElement extends HTMLDivElement {markdown: MarkDown;} + interface CustomHTMLDivElement extends HTMLDivElement {markdown: MarkDown;} - const typebox = document.getElementById("typebox") as CustomHTMLDivElement; - const markdown = new MarkDown("", thisUser); - typebox.markdown = markdown; - typebox.addEventListener("keyup", handleEnter); - typebox.addEventListener("keydown", event=>{ - thisUser.keydown(event) - if(event.key === "Enter" && !event.shiftKey) event.preventDefault(); - }); - markdown.giveBox(typebox); + const typebox = document.getElementById("typebox") as CustomHTMLDivElement; + const markdown = new MarkDown("", thisUser); + typebox.markdown = markdown; + typebox.addEventListener("keyup", handleEnter); + typebox.addEventListener("keydown", event=>{ + thisUser.keydown(event) + if(event.key === "Enter" && !event.shiftKey) event.preventDefault(); + }); + markdown.giveBox(typebox); - const images: Blob[] = []; - const imagesHtml: HTMLElement[] = []; + const images: Blob[] = []; + const imagesHtml: HTMLElement[] = []; - document.addEventListener("paste", async (e: ClipboardEvent)=>{ - if(!e.clipboardData)return; + document.addEventListener("paste", async (e: ClipboardEvent)=>{ + if(!e.clipboardData)return; - for(const file of Array.from(e.clipboardData.files)){ - const fileInstance = File.initFromBlob(file); - e.preventDefault(); - const html = fileInstance.upHTML(images, file); - pasteImageElement.appendChild(html); - images.push(file); - imagesHtml.push(html); + for(const file of Array.from(e.clipboardData.files)){ + const fileInstance = File.initFromBlob(file); + e.preventDefault(); + const html = fileInstance.upHTML(images, file); + pasteImageElement.appendChild(html); + images.push(file); + imagesHtml.push(html); + } + }); + + setTheme(); + + function userSettings(): void{ + thisUser.showusersettings(); + } + + (document.getElementById("settings") as HTMLImageElement).onclick = + userSettings; + + if(mobile){ + const channelWrapper = document.getElementById("channelw") as HTMLDivElement; + channelWrapper.onclick = ()=>{ + const toggle = document.getElementById("maintoggle") as HTMLInputElement; + toggle.checked = true; + }; + const memberListToggle = document.getElementById("memberlisttoggle") as HTMLInputElement; + memberListToggle.checked = false; + } + let dragendtimeout=setTimeout(()=>{}) + document.addEventListener("dragover",(e)=>{ + clearTimeout(dragendtimeout); + const data = e.dataTransfer; + const bg=document.getElementById("gimmefile") as HTMLDivElement; + + if(data){ + const isfile=data.types.includes("Files")||data.types.includes("application/x-moz-file"); + if(!isfile){ + bg.hidden=true; + return; } - }); - - setTheme(); - - function userSettings(): void{ - thisUser.showusersettings(); + e.preventDefault(); + bg.hidden=false; + //console.log(data.types,data) + }else{ + bg.hidden=true; } - - (document.getElementById("settings") as HTMLImageElement).onclick = - userSettings; - - if(mobile){ - const channelWrapper = document.getElementById("channelw") as HTMLDivElement; - channelWrapper.onclick = ()=>{ - const toggle = document.getElementById("maintoggle") as HTMLInputElement; - toggle.checked = true; - }; - const memberListToggle = document.getElementById("memberlisttoggle") as HTMLInputElement; - memberListToggle.checked = false; + }); + document.addEventListener("dragleave",(_)=>{ + dragendtimeout=setTimeout(()=>{ + const bg=document.getElementById("gimmefile") as HTMLDivElement; + bg.hidden=true; + },1000) + }); + document.addEventListener("dragenter",(e)=>{ + e.preventDefault(); + }) + document.addEventListener("drop",e=>{ + const data = e.dataTransfer; + const bg=document.getElementById("gimmefile") as HTMLDivElement; + bg.hidden=true; + if(data){ + const isfile=data.types.includes("Files")||data.types.includes("application/x-moz-file"); + if(isfile){ + e.preventDefault(); + console.log(data.files); + for(const file of Array.from(data.files)){ + const fileInstance = File.initFromBlob(file); + const html = fileInstance.upHTML(images, file); + pasteImageElement.appendChild(html); + images.push(file); + imagesHtml.push(html); + } + } } + }); + (document.getElementById("upload") as HTMLElement).onclick=()=>{ + const input=document.createElement("input"); + input.type="file"; + input.click(); + console.log("clicked") + input.onchange=(() => { + if(input.files){ + for(const file of Array.from(input.files)){ + const fileInstance = File.initFromBlob(file); + const html = fileInstance.upHTML(images, file); + pasteImageElement.appendChild(html); + images.push(file); + imagesHtml.push(html); + } + } + }) + } + })(); diff --git a/src/webpage/style.css b/src/webpage/style.css index ddb84cd..ba652d9 100644 --- a/src/webpage/style.css +++ b/src/webpage/style.css @@ -246,6 +246,11 @@ textarea { .svg-plus { mask: url(/icons/plus.svg); } +.svg-upload { + mask: url(/icons/upload.svg); + width: .2in !important;!i;!; + cursor: pointer; +} .svg-x { mask: url(/icons/x.svg); } @@ -278,6 +283,13 @@ textarea { padding: .05in; border-radius: .04in; } +#gimmefile{ + position: absolute; + width: 100%; + height: 100%; + background: #00000070; + top:0px; +} /* Animations */ @keyframes fade { 0%, 100% { @@ -832,6 +844,7 @@ span.instanceStatus { display: flex; gap: 12px; overflow-y: auto; + flex-wrap: wrap; } #pasteimage:empty { height: 0; @@ -885,14 +898,21 @@ span.instanceStatus { #realbox { padding: 0 16px 28px 16px; } -#typebox { +#typebox{ + flex-grow:1; + width:100%; + margin-left: .06in; +} +.outerTypeBox { max-height: 50svh; - padding: 10px 14px; + padding: 10px 10px; background: var(--typebox-bg); border-radius: 4px; overflow-y: auto; + display:flex; + flex-direction: row; } -#typebox > span::before { +.outerTypeBox > span::before { content: "\feff"; } #typebox[contenteditable=false] { diff --git a/translations/en.json b/translations/en.json index 781c475..370939b 100644 --- a/translations/en.json +++ b/translations/en.json @@ -375,6 +375,7 @@ "reason:":"Reason:", "ban":"Ban $1 from $2" }, + "uploadFilesText":"Upload your files here!", "errorReconnect":"Unable to connect to the server, retrying in **$1** seconds...", "retrying":"Retrying...", "unableToConnect":"Unable to connect to the Spacebar server. Please try logging out and back in."