From 583eb05247c1381c98ecb0c20ed2b5bc379b8966 Mon Sep 17 00:00:00 2001 From: MathMan05 Date: Mon, 12 Aug 2024 09:11:59 -0500 Subject: [PATCH] Renamed Fullscreen to Dialog --- .dist/channel.js | 4 +- .dist/dialog.js | 247 +++++++++++++++++++++++++++ .dist/embed.js | 8 +- .dist/file.js | 4 +- .dist/fullscreen.js | 4 +- .dist/guild.js | 12 +- .dist/localuser.js | 16 +- .dist/login.js | 4 +- webpage/channel.ts | 4 +- webpage/{fullscreen.ts => dialog.ts} | 4 +- webpage/embed.ts | 8 +- webpage/file.ts | 4 +- webpage/guild.ts | 12 +- webpage/localuser.ts | 20 +-- webpage/login.ts | 4 +- 15 files changed, 301 insertions(+), 54 deletions(-) create mode 100644 .dist/dialog.js rename webpage/{fullscreen.ts => dialog.ts} (99%) diff --git a/.dist/channel.js b/.dist/channel.js index e96c51f..e6e4641 100644 --- a/.dist/channel.js +++ b/.dist/channel.js @@ -2,7 +2,7 @@ import { Message } from "./message.js"; import { Voice } from "./audio.js"; import { Contextmenu } from "./contextmenu.js"; -import { Fullscreen } from "./fullscreen.js"; +import { Dialog } from "./dialog.js"; import { Permissions } from "./permissions.js"; import { Settings, RoleList } from "./settings.js"; import { Role } from "./role.js"; @@ -446,7 +446,7 @@ class Channel { let nsfw = this.nsfw; const thisid = this.snowflake; const thistype = this.type; - const full = new Fullscreen(["hdiv", + const full = new Dialog(["hdiv", ["vdiv", ["textbox", "Channel name:", this.name, function () { name = this.value; }], ["mdbox", "Channel topic:", this.topic, function () { topic = this.value; }], diff --git a/.dist/dialog.js b/.dist/dialog.js new file mode 100644 index 0000000..fc2f3ab --- /dev/null +++ b/.dist/dialog.js @@ -0,0 +1,247 @@ +export { Dialog }; +class Dialog { + layout; + onclose; + onopen; + html; + background; + constructor(layout, onclose = _ => { }, onopen = _ => { }) { + this.layout = layout; + this.onclose = onclose; + this.onopen = onopen; + const div = document.createElement("div"); + div.appendChild(this.tohtml(layout)); + this.html = div; + this.html.classList.add("centeritem"); + if (!(layout[0] === "img")) { + this.html.classList.add("nonimagecenter"); + } + } + tohtml(array) { + switch (array[0]) { + case "img": + const img = document.createElement("img"); + img.src = array[1]; + if (array[2] != undefined) { + if (array[2].length == 2) { + img.width = array[2][0]; + img.height = array[2][1]; + } + else if (array[2][0] == "fit") { + img.classList.add("imgfit"); + } + } + return img; + case "hdiv": + const hdiv = document.createElement("table"); + const tr = document.createElement("tr"); + hdiv.appendChild(tr); + for (const thing of array) { + if (thing === "hdiv") { + continue; + } + const td = document.createElement("td"); + td.appendChild(this.tohtml(thing)); + tr.appendChild(td); + } + return hdiv; + case "vdiv": + const vdiv = document.createElement("table"); + for (const thing of array) { + if (thing === "vdiv") { + continue; + } + const tr = document.createElement("tr"); + tr.appendChild(this.tohtml(thing)); + vdiv.appendChild(tr); + } + return vdiv; + case "checkbox": + { + const div = document.createElement("div"); + const checkbox = document.createElement('input'); + div.appendChild(checkbox); + const label = document.createElement("span"); + checkbox.checked = array[2]; + label.textContent = array[1]; + div.appendChild(label); + checkbox.addEventListener("change", array[3]); + checkbox.type = "checkbox"; + return div; + } + case "button": + { + const div = document.createElement("div"); + const input = document.createElement('button'); + const label = document.createElement("span"); + input.textContent = array[2]; + label.textContent = array[1]; + div.appendChild(label); + div.appendChild(input); + input.addEventListener("click", array[3]); + return div; + } + case "mdbox": + { + const div = document.createElement("div"); + const input = document.createElement("textarea"); + input.value = array[2]; + const label = document.createElement("span"); + label.textContent = array[1]; + input.addEventListener("input", array[3]); + div.appendChild(label); + div.appendChild(document.createElement("br")); + div.appendChild(input); + return div; + } + case "textbox": + { + const div = document.createElement("div"); + const input = document.createElement("input"); + input.value = array[2]; + input.type = "text"; + const label = document.createElement("span"); + label.textContent = array[1]; + console.log(array[3]); + input.addEventListener("input", array[3]); + div.appendChild(label); + div.appendChild(input); + return div; + } + case "fileupload": + { + const div = document.createElement("div"); + const input = document.createElement("input"); + input.type = "file"; + const label = document.createElement("span"); + label.textContent = array[1]; + div.appendChild(label); + div.appendChild(input); + input.addEventListener("change", array[2]); + console.log(array); + return div; + } + case "text": { + const span = document.createElement("span"); + span.textContent = array[1]; + return span; + } + case "title": { + const span = document.createElement("span"); + span.classList.add("title"); + span.textContent = array[1]; + return span; + } + case "radio": { + const div = document.createElement("div"); + const fieldset = document.createElement("fieldset"); + fieldset.addEventListener("change", function () { + let i = -1; + for (const thing of fieldset.children) { + i++; + if (i === 0) { + continue; + } + const checkbox = thing.children[0].children[0]; + if (checkbox.checked) { + array[3](checkbox.value); + } + } + }); + const legend = document.createElement("legend"); + legend.textContent = array[1]; + fieldset.appendChild(legend); + let i = 0; + for (const thing of array[2]) { + const div = document.createElement("div"); + const input = document.createElement("input"); + input.classList.add("radio"); + input.type = "radio"; + input.name = array[1]; + input.value = thing; + if (i === array[4]) { + input.checked = true; + } + const label = document.createElement("label"); + label.appendChild(input); + const span = document.createElement("span"); + span.textContent = thing; + label.appendChild(span); + div.appendChild(label); + fieldset.appendChild(div); + i++; + } + div.appendChild(fieldset); + return div; + } + case "html": { + return array[1]; + } + case "select": { + const div = document.createElement("div"); + const label = document.createElement("label"); + const select = document.createElement("select"); + label.textContent = array[1]; + div.append(label); + div.appendChild(select); + for (const thing of array[2]) { + const option = document.createElement("option"); + option.textContent = thing; + select.appendChild(option); + } + select.selectedIndex = array[4]; + select.addEventListener("change", array[3]); + return div; + } + case "tabs": { + const table = document.createElement("table"); + const tabs = document.createElement("tr"); + tabs.classList.add("tabbed-head"); + table.appendChild(tabs); + const td = document.createElement("td"); + tabs.appendChild(td); + const content = document.createElement("tr"); + content.classList.add("tabbed-content"); + table.appendChild(content); + let shown; + for (const thing of array[1]) { + const button = document.createElement("button"); + button.textContent = thing[0]; + td.appendChild(button); + const tdcontent = document.createElement("td"); + tdcontent.colSpan = array[1].length; + tdcontent.appendChild(this.tohtml(thing[1])); + content.appendChild(tdcontent); + if (!shown) { + shown = tdcontent; + } + else { + tdcontent.hidden = true; + } + button.addEventListener("click", _ => { + shown.hidden = true; + tdcontent.hidden = false; + shown = tdcontent; + }); + } + return table; + } + default: + console.error("can't find element:" + array[0], " full element:" + array); + return; + } + } + show() { + this.onopen(); + console.log("fullscreen"); + this.background = document.createElement("div"); + this.background.classList.add("background"); + document.body.appendChild(this.background); + document.body.appendChild(this.html); + this.background.onclick = function () { this.hide(); }.bind(this); + } + hide() { + document.body.removeChild(this.background); + document.body.removeChild(this.html); + } +} diff --git a/.dist/embed.js b/.dist/embed.js index 5033ecd..a662fb1 100644 --- a/.dist/embed.js +++ b/.dist/embed.js @@ -1,4 +1,4 @@ -import { Fullscreen } from "./fullscreen.js"; +import { Dialog } from "./dialog.js"; import { MarkDown } from "./markdown.js"; class Embed { type; @@ -128,7 +128,7 @@ class Embed { const img = document.createElement("img"); img.classList.add("messageimg"); img.onclick = function () { - const full = new Fullscreen(["img", img.src, ["fit"]]); + const full = new Dialog(["img", img.src, ["fit"]]); full.show(); }; img.src = this.json.thumbnail.proxy_url; @@ -153,7 +153,7 @@ class Embed { if (this.json.thumbnail) { img.classList.add("embedimg"); img.onclick = function () { - const full = new Fullscreen(["img", img.src, ["fit"]]); + const full = new Dialog(["img", img.src, ["fit"]]); full.show(); }; img.src = this.json.thumbnail.proxy_url; @@ -193,7 +193,7 @@ class Embed { const img = document.createElement("img"); img.classList.add("bigembedimg"); img.onclick = function () { - const full = new Fullscreen(["img", img.src, ["fit"]]); + const full = new Dialog(["img", img.src, ["fit"]]); full.show(); }; img.src = this.json.thumbnail.proxy_url || this.json.thumbnail.url; diff --git a/.dist/file.js b/.dist/file.js index 2e80120..2954783 100644 --- a/.dist/file.js +++ b/.dist/file.js @@ -1,4 +1,4 @@ -import { Fullscreen } from "./fullscreen.js"; +import { Dialog } from "./dialog.js"; class File { owner; id; @@ -27,7 +27,7 @@ class File { const img = document.createElement("img"); img.classList.add("messageimg"); img.onclick = function () { - const full = new Fullscreen(["img", img.src, ["fit"]]); + const full = new Dialog(["img", img.src, ["fit"]]); full.show(); }; img.src = src; diff --git a/.dist/fullscreen.js b/.dist/fullscreen.js index 44d790c..fc2f3ab 100644 --- a/.dist/fullscreen.js +++ b/.dist/fullscreen.js @@ -1,5 +1,5 @@ -export { Fullscreen }; -class Fullscreen { +export { Dialog }; +class Dialog { layout; onclose; onopen; diff --git a/.dist/guild.js b/.dist/guild.js index 6a921a9..124ea07 100644 --- a/.dist/guild.js +++ b/.dist/guild.js @@ -1,7 +1,7 @@ import { Channel } from "./channel.js"; import { Contextmenu } from "./contextmenu.js"; import { Role } from "./role.js"; -import { Fullscreen } from "./fullscreen.js"; +import { Dialog } from "./dialog.js"; import { Member } from "./member.js"; import { Settings, RoleList } from "./settings.js"; import { SnowFlake } from "./snowflake.js"; @@ -108,7 +108,7 @@ class Guild { } setnotifcation() { let noti = this.message_notifications; - const notiselect = new Fullscreen(["vdiv", + const notiselect = new Dialog(["vdiv", ["radio", "select notifications type", ["all", "only mentions", "none"], function (e) { @@ -134,7 +134,7 @@ class Guild { notiselect.show(); } confirmleave() { - const full = new Fullscreen([ + const full = new Dialog([ "vdiv", ["title", "Are you sure you want to leave?" @@ -270,7 +270,7 @@ class Guild { } confirmDelete() { let confirmname = ""; - const full = new Fullscreen([ + const full = new Dialog([ "vdiv", ["title", "Are you sure you want to delete " + this.properties.name + "?" @@ -421,7 +421,7 @@ class Guild { createchannels(func = this.createChannel) { let name = ""; let category = 0; - const channelselect = new Fullscreen(["vdiv", + const channelselect = new Dialog(["vdiv", ["radio", "select channel type", ["voice", "text", "announcement"], function (e) { @@ -445,7 +445,7 @@ class Guild { createcategory() { let name = ""; let category = 4; - const channelselect = new Fullscreen(["vdiv", + const channelselect = new Dialog(["vdiv", ["textbox", "Name of category", "", function () { console.log(this); name = this.value; diff --git a/.dist/localuser.js b/.dist/localuser.js index 88b2d9f..dec4e8c 100644 --- a/.dist/localuser.js +++ b/.dist/localuser.js @@ -2,7 +2,7 @@ import { Guild } from "./guild.js"; import { Direct } from "./direct.js"; import { Voice } from "./audio.js"; import { User } from "./user.js"; -import { Fullscreen } from "./fullscreen.js"; +import { Dialog } from "./dialog.js"; import { getBulkInfo, setTheme } from "./login.js"; import { SnowFlake } from "./snowflake.js"; import { Message } from "./message.js"; @@ -466,7 +466,7 @@ class Localuser { createGuild() { let inviteurl = ""; const error = document.createElement("span"); - const full = new Fullscreen(["tabs", [ + const full = new Dialog(["tabs", [ ["Join using invite", [ "vdiv", ["textbox", @@ -509,7 +509,7 @@ class Localuser { const content = document.createElement("div"); content.classList.add("guildy"); content.textContent = "Loading..."; - const full = new Fullscreen(["html", content]); + const full = new Dialog(["html", content]); full.show(); const res = await fetch(this.info.api + "/discoverable-guilds?limit=50", { headers: this.headers @@ -774,7 +774,7 @@ class Localuser { } let password = ""; let code = ""; - const addmodel = new Fullscreen(["vdiv", + const addmodel = new Dialog(["vdiv", ["title", "2FA set up"], ["text", "Copy this secret into your totp(time-based one time password) app"], ["text", `Your secret is: ${secret} and it's 6 digits, with a 30 second token period`], @@ -815,7 +815,7 @@ class Localuser { genusersettings() { const connectionContainer = document.createElement("div"); connectionContainer.id = "connection-container"; - this.userConnections = new Fullscreen(["html", + this.userConnections = new Dialog(["html", connectionContainer ], () => { }, async () => { connectionContainer.innerHTML = ""; @@ -846,7 +846,7 @@ class Localuser { let appName = ""; const appListContainer = document.createElement("div"); appListContainer.id = "app-list-container"; - this.devPortal = new Fullscreen(["vdiv", + this.devPortal = new Dialog(["vdiv", ["hdiv", ["textbox", "Name:", appName, event => { appName = event.target.value; @@ -906,7 +906,7 @@ class Localuser { }); const json = await res.json(); const fields = {}; - const appDialog = new Fullscreen(["vdiv", + const appDialog = new Dialog(["vdiv", ["title", "Editing " + json.name ], @@ -995,7 +995,7 @@ class Localuser { username: json.bot.username, avatar: json.bot.avatar ? (this.info.cdn + "/app-icons/" + appId + "/" + json.bot.avatar + ".png?size=256") : "" }; - const botDialog = new Fullscreen(["vdiv", + const botDialog = new Dialog(["vdiv", ["title", "Editing bot: " + json.bot.username ], diff --git a/.dist/login.js b/.dist/login.js index beb4de4..be2f697 100644 --- a/.dist/login.js +++ b/.dist/login.js @@ -1,4 +1,4 @@ -import { Fullscreen } from "./fullscreen.js"; +import { Dialog } from "./dialog.js"; const mobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); export { mobile, getBulkUsers, getBulkInfo, setTheme, Specialuser }; function setTheme() { @@ -204,7 +204,7 @@ async function login(username, password, captcha) { console.log(response); if (response.ticket) { let onetimecode = ""; - new Fullscreen(["vdiv", ["title", "2FA code:"], ["textbox", "", "", function () { onetimecode = this.value; }], ["button", "", "Submit", function () { + new Dialog(["vdiv", ["title", "2FA code:"], ["textbox", "", "", function () { onetimecode = this.value; }], ["button", "", "Submit", function () { fetch(api + "/auth/mfa/totp", { method: "POST", headers: { diff --git a/webpage/channel.ts b/webpage/channel.ts index 0265c08..c9db602 100644 --- a/webpage/channel.ts +++ b/webpage/channel.ts @@ -2,7 +2,7 @@ import { Message } from "./message.js"; import {Voice} from "./audio.js"; import {Contextmenu} from "./contextmenu.js"; -import {Fullscreen} from "./fullscreen.js"; +import {Dialog} from "./dialog.js"; import {Guild} from "./guild.js"; import { Localuser } from "./localuser.js"; import { Permissions } from "./permissions.js"; @@ -454,7 +454,7 @@ class Channel{ let nsfw=this.nsfw; const thisid=this.snowflake; const thistype=this.type; - const full=new Fullscreen( + const full=new Dialog( ["hdiv", ["vdiv", ["textbox","Channel name:",this.name,function(){name=this.value}], diff --git a/webpage/fullscreen.ts b/webpage/dialog.ts similarity index 99% rename from webpage/fullscreen.ts rename to webpage/dialog.ts index 0e6e13c..985031a 100644 --- a/webpage/fullscreen.ts +++ b/webpage/dialog.ts @@ -1,5 +1,5 @@ -export {Fullscreen}; -class Fullscreen{ +export {Dialog}; +class Dialog{ layout; onclose: Function; onopen: Function; diff --git a/webpage/embed.ts b/webpage/embed.ts index 6432c3e..50094cb 100644 --- a/webpage/embed.ts +++ b/webpage/embed.ts @@ -1,4 +1,4 @@ -import {Fullscreen} from "./fullscreen.js"; +import {Dialog} from "./dialog.js"; import {Message} from "./message.js"; import {MarkDown} from "./markdown.js"; import { embedjson } from "./jsontypes.js"; @@ -133,7 +133,7 @@ class Embed{ const img=document.createElement("img"); img.classList.add("messageimg") img.onclick=function(){ - const full=new Fullscreen(["img",img.src,["fit"]]); + const full=new Dialog(["img",img.src,["fit"]]); full.show(); } img.src=this.json.thumbnail.proxy_url; @@ -158,7 +158,7 @@ class Embed{ if(this.json.thumbnail){ img.classList.add("embedimg"); img.onclick=function(){ - const full=new Fullscreen(["img",img.src,["fit"]]); + const full=new Dialog(["img",img.src,["fit"]]); full.show(); } img.src=this.json.thumbnail.proxy_url; @@ -201,7 +201,7 @@ class Embed{ const img=document.createElement("img"); img.classList.add("bigembedimg"); img.onclick=function(){ - const full=new Fullscreen(["img",img.src,["fit"]]); + const full=new Dialog(["img",img.src,["fit"]]); full.show(); } img.src=this.json.thumbnail.proxy_url||this.json.thumbnail.url; diff --git a/webpage/file.ts b/webpage/file.ts index 8687e06..5153b73 100644 --- a/webpage/file.ts +++ b/webpage/file.ts @@ -1,5 +1,5 @@ import { Message } from "./message.js"; -import { Fullscreen } from "./fullscreen.js"; +import { Dialog } from "./dialog.js"; import { filejson } from "./jsontypes.js"; class File{ @@ -30,7 +30,7 @@ class File{ const img=document.createElement("img"); img.classList.add("messageimg"); img.onclick=function(){ - const full=new Fullscreen(["img",img.src,["fit"]]); + const full=new Dialog(["img",img.src,["fit"]]); full.show(); } img.src=src; diff --git a/webpage/guild.ts b/webpage/guild.ts index 0d19a92..aeb65e9 100644 --- a/webpage/guild.ts +++ b/webpage/guild.ts @@ -2,7 +2,7 @@ import { Channel } from "./channel.js"; import { Localuser } from "./localuser.js"; import {Contextmenu} from "./contextmenu.js"; import {Role} from "./role.js"; -import {Fullscreen} from "./fullscreen.js"; +import {Dialog} from "./dialog.js"; import {Member} from "./member.js"; import {Settings,RoleList} from "./settings.js"; import {Permissions} from "./permissions.js"; @@ -118,7 +118,7 @@ class Guild{ } setnotifcation(){ let noti=this.message_notifications - const notiselect=new Fullscreen( + const notiselect=new Dialog( ["vdiv", ["radio","select notifications type", ["all","only mentions","none"], @@ -145,7 +145,7 @@ class Guild{ notiselect.show(); } confirmleave(){ - const full= new Fullscreen([ + const full= new Dialog([ "vdiv", ["title", "Are you sure you want to leave?" @@ -280,7 +280,7 @@ class Guild{ } confirmDelete(){ let confirmname=""; - const full= new Fullscreen([ + const full= new Dialog([ "vdiv", ["title", "Are you sure you want to delete "+this.properties.name+"?" @@ -429,7 +429,7 @@ class Guild{ createchannels(func=this.createChannel){ let name=""; let category=0; - const channelselect=new Fullscreen( + const channelselect=new Dialog( ["vdiv", ["radio","select channel type", ["voice","text","announcement"], @@ -454,7 +454,7 @@ class Guild{ createcategory(){ let name=""; let category=4; - const channelselect=new Fullscreen( + const channelselect=new Dialog( ["vdiv", ["textbox","Name of category","",function(){ console.log(this); diff --git a/webpage/localuser.ts b/webpage/localuser.ts index 19a18e6..2d0f2d8 100644 --- a/webpage/localuser.ts +++ b/webpage/localuser.ts @@ -3,7 +3,7 @@ import {Channel} from "./channel.js"; import {Direct} from "./direct.js"; import {Voice} from "./audio.js"; import {User} from "./user.js"; -import {Fullscreen} from "./fullscreen.js"; +import {Dialog} from "./dialog.js"; import {getBulkInfo, setTheme, Specialuser} from "./login.js"; import { SnowFlake } from "./snowflake.js"; import { Message } from "./message.js"; @@ -23,8 +23,8 @@ class Localuser{ info:Specialuser["serverurls"]; headers:{"Content-type":string,Authorization:string}; usersettings:Settings; - userConnections:Fullscreen; - devPortal:Fullscreen; + userConnections:Dialog; + devPortal:Dialog; ready:readyjson; guilds:Guild[]; guildids:Map; @@ -479,7 +479,7 @@ class Localuser{ let inviteurl=""; const error=document.createElement("span"); - const full=new Fullscreen(["tabs",[ + const full=new Dialog(["tabs",[ ["Join using invite",[ "vdiv", ["textbox", @@ -523,7 +523,7 @@ class Localuser{ const content=document.createElement("div"); content.classList.add("guildy"); content.textContent="Loading..."; - const full=new Fullscreen(["html", content]); + const full=new Dialog(["html", content]); full.show(); const res=await fetch(this.info.api+"/discoverable-guilds?limit=50", { @@ -792,7 +792,7 @@ class Localuser{ } let password=""; let code=""; - const addmodel=new Fullscreen( + const addmodel=new Dialog( ["vdiv", ["title","2FA set up"], ["text","Copy this secret into your totp(time-based one time password) app"], @@ -834,7 +834,7 @@ class Localuser{ genusersettings():void{ const connectionContainer=document.createElement("div"); connectionContainer.id="connection-container"; - this.userConnections=new Fullscreen( + this.userConnections=new Dialog( ["html", connectionContainer ], () => {}, async () => { @@ -872,7 +872,7 @@ class Localuser{ let appName=""; const appListContainer=document.createElement("div"); appListContainer.id="app-list-container"; - this.devPortal=new Fullscreen( + this.devPortal=new Dialog( ["vdiv", ["hdiv", ["textbox", "Name:", appName, event => { @@ -940,7 +940,7 @@ class Localuser{ const json=await res.json(); const fields: any={}; - const appDialog=new Fullscreen( + const appDialog=new Dialog( ["vdiv", ["title", "Editing " + json.name @@ -1031,7 +1031,7 @@ class Localuser{ username: json.bot.username, avatar: json.bot.avatar ? (this.info.cdn+"/app-icons/" + appId + "/" + json.bot.avatar + ".png?size=256") : "" }; - const botDialog=new Fullscreen( + const botDialog=new Dialog( ["vdiv", ["title", "Editing bot: " + json.bot.username diff --git a/webpage/login.ts b/webpage/login.ts index 860b027..d798f77 100644 --- a/webpage/login.ts +++ b/webpage/login.ts @@ -1,4 +1,4 @@ -import { Fullscreen } from "./fullscreen.js"; +import { Dialog } from "./dialog.js"; const mobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); export {mobile, getBulkUsers,getBulkInfo,setTheme,Specialuser} @@ -201,7 +201,7 @@ async function login(username:string, password:string, captcha:string){ console.log(response); if(response.ticket){ let onetimecode=""; - new Fullscreen(["vdiv",["title","2FA code:"],["textbox","","",function(){onetimecode=this.value}],["button","","Submit",function(){ + new Dialog(["vdiv",["title","2FA code:"],["textbox","","",function(){onetimecode=this.value}],["button","","Submit",function(){ fetch(api+"/auth/mfa/totp",{ method:"POST", headers:{