1080 lines
31 KiB
TypeScript
1080 lines
31 KiB
TypeScript
import {Contextmenu} from "./contextmenu.js";
|
|
import {User} from "./user.js";
|
|
import {Member} from "./member.js";
|
|
import {MarkDown, saveCaretPosition} from "./markdown.js";
|
|
import {Embed} from "./embed.js";
|
|
import {Channel} from "./channel.js";
|
|
import {Localuser} from "./localuser.js";
|
|
import {Role} from "./role.js";
|
|
import {File} from "./file.js";
|
|
import {SnowFlake} from "./snowflake.js";
|
|
import {memberjson, messagejson, userjson} from "./jsontypes.js";
|
|
import {Emoji} from "./emoji.js";
|
|
import {mobile} from "./utils/utils.js";
|
|
import {I18n} from "./i18n.js";
|
|
import {Hover} from "./hover.js";
|
|
import {Dialog} from "./settings.js";
|
|
import {Sticker} from "./sticker.js";
|
|
|
|
class Message extends SnowFlake {
|
|
static contextmenu = new Contextmenu<Message, void>("message menu");
|
|
stickers!: Sticker[];
|
|
owner: Channel;
|
|
headers: Localuser["headers"];
|
|
embeds: Embed[] = [];
|
|
author!: User;
|
|
mentions: User[] = [];
|
|
mention_roles!: Role[];
|
|
attachments: File[] = []; //probably should be its own class tbh, should be Attachments[]
|
|
message_reference!: {
|
|
guild_id: string;
|
|
channel_id: string;
|
|
message_id: string;
|
|
};
|
|
type!: number;
|
|
timestamp!: number;
|
|
content!: MarkDown;
|
|
static del: Promise<void>;
|
|
static resolve: Function;
|
|
/*
|
|
weakdiv:WeakRef<HTMLDivElement>;
|
|
set div(e:HTMLDivElement){
|
|
if(!e){
|
|
this.weakdiv=null;
|
|
return;
|
|
}
|
|
this.weakdiv=new WeakRef(e);
|
|
}
|
|
get div(){
|
|
return this.weakdiv?.deref();
|
|
}
|
|
*/
|
|
div: HTMLDivElement | undefined;
|
|
member: Member | undefined;
|
|
reactions!: messagejson["reactions"];
|
|
pinned!: boolean;
|
|
static setup() {
|
|
this.del = new Promise((_) => {
|
|
this.resolve = _;
|
|
});
|
|
Message.setupcmenu();
|
|
}
|
|
static setupcmenu() {
|
|
Message.contextmenu.addButton(
|
|
() => I18n.getTranslation("reply"),
|
|
function (this: Message) {
|
|
this.channel.setReplying(this);
|
|
},
|
|
{
|
|
icon: {
|
|
css: "svg-reply",
|
|
},
|
|
},
|
|
);
|
|
const editTypes = new Set([0, 19]);
|
|
Message.contextmenu.addButton(
|
|
() => I18n.getTranslation("message.edit"),
|
|
function (this: Message) {
|
|
this.setEdit();
|
|
},
|
|
{
|
|
visable: function () {
|
|
return this.author.id === this.localuser.user.id && editTypes.has(this.type);
|
|
},
|
|
|
|
icon: {
|
|
css: "svg-edit",
|
|
},
|
|
},
|
|
);
|
|
|
|
Message.contextmenu.addButton(
|
|
() => I18n.getTranslation("message.reactionAdd"),
|
|
function (this: Message, _, e: MouseEvent) {
|
|
Emoji.emojiPicker(e.x, e.y, this.localuser).then((_) => {
|
|
this.reactionToggle(_);
|
|
});
|
|
},
|
|
{
|
|
icon: {
|
|
css: "svg-emoji",
|
|
},
|
|
visable: function () {
|
|
return this.channel.hasPermission("ADD_REACTIONS");
|
|
},
|
|
},
|
|
);
|
|
|
|
Message.contextmenu.addSeperator();
|
|
Message.contextmenu.addButton(
|
|
() => I18n.getTranslation("copyrawtext"),
|
|
function (this: Message) {
|
|
navigator.clipboard.writeText(this.content.rawString);
|
|
},
|
|
{
|
|
icon: {
|
|
css: "svg-copy",
|
|
},
|
|
},
|
|
);
|
|
Message.contextmenu.addButton(
|
|
() => I18n.pinMessage(),
|
|
async function (this: Message) {
|
|
const f = await fetch(`${this.info.api}/channels/${this.channel.id}/pins/${this.id}`, {
|
|
method: "PUT",
|
|
headers: this.headers,
|
|
});
|
|
if (!f.ok) alert(I18n.unableToPin());
|
|
},
|
|
{
|
|
icon: {
|
|
css: "svg-pin",
|
|
},
|
|
visable: function () {
|
|
if (this.pinned) return false;
|
|
if (this.channel.guild.id === "@me") return true;
|
|
return this.channel.hasPermission("MANAGE_MESSAGES");
|
|
},
|
|
},
|
|
);
|
|
|
|
Message.contextmenu.addButton(
|
|
() => I18n.unpinMessage(),
|
|
async function (this: Message) {
|
|
const f = await fetch(`${this.info.api}/channels/${this.channel.id}/pins/${this.id}`, {
|
|
method: "DELETE",
|
|
headers: this.headers,
|
|
});
|
|
if (!f.ok) alert(I18n.unableToPin());
|
|
},
|
|
{
|
|
icon: {
|
|
css: "svg-pin",
|
|
},
|
|
visable: function () {
|
|
if (!this.pinned) return false;
|
|
if (this.channel.guild.id === "@me") return true;
|
|
return this.channel.hasPermission("MANAGE_MESSAGES");
|
|
},
|
|
},
|
|
);
|
|
|
|
Message.contextmenu.addButton(
|
|
() => I18n.getTranslation("copymessageid"),
|
|
function (this: Message) {
|
|
navigator.clipboard.writeText(this.id);
|
|
},
|
|
);
|
|
|
|
Message.contextmenu.addSeperator();
|
|
Message.contextmenu.addButton(
|
|
() => I18n.getTranslation("message.delete"),
|
|
function (this: Message) {
|
|
this.confirmDelete();
|
|
},
|
|
{
|
|
visable: function () {
|
|
return this.canDelete();
|
|
},
|
|
icon: {
|
|
css: "svg-delete",
|
|
},
|
|
color: "red",
|
|
},
|
|
);
|
|
}
|
|
setEdit() {
|
|
const prev = this.channel.editing;
|
|
this.channel.editing = this;
|
|
if (prev) prev.generateMessage();
|
|
this.generateMessage(undefined, false);
|
|
}
|
|
constructor(messagejson: messagejson, owner: Channel, dontStore = false) {
|
|
super(messagejson.id);
|
|
this.owner = owner;
|
|
this.headers = this.owner.headers;
|
|
this.giveData(messagejson);
|
|
if (!dontStore) {
|
|
this.owner.messages.set(this.id, this);
|
|
}
|
|
}
|
|
reactionToggle(emoji: string | Emoji) {
|
|
if (emoji instanceof Emoji && !emoji.id && emoji.emoji) {
|
|
emoji = emoji.emoji;
|
|
}
|
|
let remove = false;
|
|
for (const thing of this.reactions) {
|
|
if (thing.emoji.name === emoji) {
|
|
remove = thing.me;
|
|
break;
|
|
}
|
|
}
|
|
let reactiontxt: string;
|
|
if (emoji instanceof Emoji) {
|
|
reactiontxt = `${emoji.name}:${emoji.id}`;
|
|
} else {
|
|
reactiontxt = encodeURIComponent(emoji);
|
|
}
|
|
fetch(
|
|
`${this.info.api}/channels/${this.channel.id}/messages/${this.id}/reactions/${reactiontxt}/@me`,
|
|
{
|
|
method: remove ? "DELETE" : "PUT",
|
|
headers: this.headers,
|
|
},
|
|
);
|
|
}
|
|
edited_timestamp: string | null = null;
|
|
giveData(messagejson: messagejson) {
|
|
const func = this.channel.infinite.snapBottom();
|
|
for (const thing of Object.keys(messagejson)) {
|
|
if (thing === "attachments") {
|
|
this.attachments = [];
|
|
for (const thing of messagejson.attachments) {
|
|
this.attachments.push(new File(thing, this));
|
|
}
|
|
continue;
|
|
} else if (thing === "content") {
|
|
this.content = new MarkDown(messagejson[thing], this.channel);
|
|
continue;
|
|
} else if (thing === "id") {
|
|
continue;
|
|
} else if (thing === "member") {
|
|
Member.new(messagejson.member as memberjson, this.guild).then((_) => {
|
|
this.member = _ as Member;
|
|
});
|
|
continue;
|
|
} else if (thing === "embeds") {
|
|
this.embeds = [];
|
|
for (const thing in messagejson.embeds) {
|
|
this.embeds[thing] = new Embed(messagejson.embeds[thing], this);
|
|
}
|
|
continue;
|
|
} else if (thing === "author") {
|
|
continue;
|
|
} else if (thing === "sticker_items") {
|
|
this.stickers = messagejson.sticker_items.map((_) => {
|
|
const guild = this.localuser.guildids.get(_.guild_id as string);
|
|
return new Sticker(_, guild || this.localuser);
|
|
});
|
|
}
|
|
(this as any)[thing] = (messagejson as any)[thing];
|
|
}
|
|
this.stickers ||= [];
|
|
if (messagejson.reactions?.length) {
|
|
console.log(messagejson.reactions, ":3");
|
|
}
|
|
if (messagejson.webhook) {
|
|
messagejson.author.webhook = messagejson.webhook;
|
|
}
|
|
if (messagejson.author.id) {
|
|
this.author = new User(messagejson.author, this.localuser, false);
|
|
}
|
|
for (const thing in messagejson.mentions) {
|
|
this.mentions[thing] = new User(messagejson.mentions[thing], this.localuser);
|
|
}
|
|
if (!this.member && this.guild.id !== "@me") {
|
|
this.author.resolvemember(this.guild).then((_) => {
|
|
this.member = _;
|
|
});
|
|
}
|
|
if (this.mentions?.length || this.mention_roles?.length) {
|
|
//currently mention_roles isn't implemented on the spacebar servers
|
|
console.log(this.mentions, this.mention_roles);
|
|
}
|
|
if (this.mentionsuser(this.localuser.user)) {
|
|
console.log(this);
|
|
}
|
|
if (this.div) {
|
|
this.generateMessage();
|
|
return;
|
|
}
|
|
if (+this.id > +(this.channel.lastmessageid || "0")) {
|
|
func();
|
|
}
|
|
}
|
|
canDelete() {
|
|
return this.channel.hasPermission("MANAGE_MESSAGES") || this.author === this.localuser.user;
|
|
}
|
|
get channel() {
|
|
return this.owner;
|
|
}
|
|
get guild() {
|
|
return this.owner.guild;
|
|
}
|
|
get localuser() {
|
|
return this.owner.localuser;
|
|
}
|
|
get info() {
|
|
return this.owner.info;
|
|
}
|
|
messageevents(obj: HTMLDivElement) {
|
|
let drag = false;
|
|
Message.contextmenu.bindContextmenu(
|
|
obj,
|
|
this,
|
|
undefined,
|
|
(x) => {
|
|
//console.log(x,y);
|
|
if (!drag && x < 20) {
|
|
return;
|
|
}
|
|
drag = true;
|
|
this.channel.moveForDrag(Math.max(x, 0));
|
|
},
|
|
(x, y) => {
|
|
drag = false;
|
|
console.log(x, y);
|
|
this.channel.moveForDrag(-1);
|
|
if (x > 60) {
|
|
console.log("In here?");
|
|
const toggle = document.getElementById("maintoggle") as HTMLInputElement;
|
|
toggle.checked = false;
|
|
console.log(toggle);
|
|
}
|
|
},
|
|
);
|
|
this.div = obj;
|
|
obj.classList.add("messagediv");
|
|
}
|
|
deleteDiv() {
|
|
if (!this.div) return;
|
|
try {
|
|
this.div.remove();
|
|
this.div = undefined;
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
mentionsuser(userd: User | Member) {
|
|
if (userd instanceof User) {
|
|
return this.mentions.includes(userd);
|
|
} else if (userd instanceof Member) {
|
|
if (this.mentions.includes(userd.user)) {
|
|
return true;
|
|
} else {
|
|
return !new Set(this.mentions).isDisjointFrom(new Set(userd.roles)); //if the message mentions a role the user has
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
getimages() {
|
|
const build: File[] = [];
|
|
for (const thing of this.attachments) {
|
|
if (thing.content_type.startsWith("image/")) {
|
|
build.push(thing);
|
|
}
|
|
}
|
|
return build;
|
|
}
|
|
getUnixTime(): number {
|
|
return new Date(this.timestamp).getTime();
|
|
}
|
|
async edit(content: string) {
|
|
return await fetch(this.info.api + "/channels/" + this.channel.id + "/messages/" + this.id, {
|
|
method: "PATCH",
|
|
headers: this.headers,
|
|
body: JSON.stringify({content}),
|
|
});
|
|
}
|
|
async delete() {
|
|
await fetch(`${this.info.api}/channels/${this.channel.id}/messages/${this.id}`, {
|
|
headers: this.headers,
|
|
method: "DELETE",
|
|
});
|
|
}
|
|
deleteEvent() {
|
|
console.log("deleted");
|
|
if (this.div) {
|
|
this.div.remove();
|
|
this.div.innerHTML = "";
|
|
this.div = undefined;
|
|
}
|
|
const prev = this.channel.idToPrev.get(this.id);
|
|
const next = this.channel.idToNext.get(this.id);
|
|
this.channel.idToPrev.delete(this.id);
|
|
this.channel.idToNext.delete(this.id);
|
|
this.channel.messages.delete(this.id);
|
|
if (prev && next) {
|
|
this.channel.idToPrev.set(next, prev);
|
|
this.channel.idToNext.set(prev, next);
|
|
} else if (prev) {
|
|
this.channel.idToNext.delete(prev);
|
|
} else if (next) {
|
|
this.channel.idToPrev.delete(next);
|
|
}
|
|
if (prev) {
|
|
const prevMessage = this.channel.messages.get(prev);
|
|
if (prevMessage) {
|
|
prevMessage.generateMessage();
|
|
}
|
|
}
|
|
if (next) {
|
|
const nextMessage = this.channel.messages.get(next);
|
|
if (nextMessage) {
|
|
nextMessage.generateMessage();
|
|
}
|
|
}
|
|
if (this.channel.lastmessage === this || this.channel.lastmessageid === this.id) {
|
|
if (prev) {
|
|
this.channel.lastmessage = this.channel.messages.get(prev);
|
|
this.channel.lastmessageid = prev;
|
|
} else {
|
|
this.channel.lastmessage = undefined;
|
|
this.channel.lastmessageid = undefined;
|
|
}
|
|
}
|
|
if (this.channel.lastreadmessageid === this.id) {
|
|
if (prev) {
|
|
this.channel.lastreadmessageid = prev;
|
|
} else {
|
|
this.channel.lastreadmessageid = undefined;
|
|
}
|
|
}
|
|
console.log("deleted done");
|
|
}
|
|
reactdiv!: WeakRef<HTMLDivElement>;
|
|
blockedPropigate() {
|
|
const previd = this.channel.idToPrev.get(this.id);
|
|
if (!previd) {
|
|
this.generateMessage();
|
|
return;
|
|
}
|
|
const premessage = this.channel.messages.get(previd);
|
|
if (premessage?.author === this.author) {
|
|
premessage.blockedPropigate();
|
|
} else {
|
|
this.generateMessage();
|
|
}
|
|
}
|
|
generateMessage(
|
|
premessage?: Message | undefined,
|
|
ignoredblock = false,
|
|
dupe: false | HTMLDivElement = false,
|
|
) {
|
|
const div = dupe || this.div;
|
|
if (!div) return;
|
|
|
|
const editmode = this.channel.editing === this;
|
|
if (!premessage && !dupe) {
|
|
premessage = this.channel.messages.get(this.channel.idToPrev.get(this.id) as string);
|
|
}
|
|
for (const user of this.mentions) {
|
|
if (user === this.localuser.user) {
|
|
div.classList.add("mentioned");
|
|
}
|
|
}
|
|
if (this === this.channel.replyingto) {
|
|
div.classList.add("replying");
|
|
}
|
|
div.innerHTML = "";
|
|
const build = document.createElement("div");
|
|
|
|
build.classList.add("flexltr", "message");
|
|
|
|
const unreadLine = premessage && premessage.id === this.channel.lastreadmessageid;
|
|
let datelineNeeded = false;
|
|
if ((premessage || unreadLine) && !dupe) {
|
|
const thisTime = new Date(this.getUnixTime());
|
|
if (premessage && !unreadLine) {
|
|
const prevTime = new Date(premessage.getUnixTime());
|
|
datelineNeeded =
|
|
thisTime.getDay() !== prevTime.getDay() ||
|
|
thisTime.getMonth() !== prevTime.getMonth() ||
|
|
thisTime.getFullYear() !== prevTime.getFullYear();
|
|
} else {
|
|
console.warn(div);
|
|
datelineNeeded = true;
|
|
}
|
|
if (datelineNeeded) {
|
|
const dateline = document.createElement("div");
|
|
if (unreadLine) {
|
|
dateline.classList.add("unreadDateline");
|
|
}
|
|
dateline.classList.add("flexltr", "dateline");
|
|
dateline.append(document.createElement("hr"));
|
|
const span = document.createElement("span");
|
|
span.innerText = Intl.DateTimeFormat(I18n.lang, {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "2-digit",
|
|
}).format(thisTime);
|
|
dateline.append(span);
|
|
dateline.append(document.createElement("hr"));
|
|
div.append(dateline);
|
|
}
|
|
}
|
|
div.classList.remove("zeroheight");
|
|
if (this.author.relationshipType === 2) {
|
|
if (ignoredblock) {
|
|
if (premessage?.author !== this.author) {
|
|
const span = document.createElement("span");
|
|
span.textContent = I18n.getTranslation("hideBlockedMessages");
|
|
div.append(span);
|
|
span.classList.add("blocked");
|
|
span.onclick = (_) => {
|
|
const scroll = this.channel.infinite.scrollTop;
|
|
let next: Message | undefined = this;
|
|
while (next?.author === this.author) {
|
|
next.generateMessage();
|
|
next = this.channel.messages.get(this.channel.idToNext.get(next.id) as string);
|
|
}
|
|
if (this.channel.infinite.scollDiv && scroll) {
|
|
this.channel.infinite.scollDiv.scrollTop = scroll;
|
|
}
|
|
};
|
|
}
|
|
} else {
|
|
div.classList.remove("topMessage");
|
|
if (premessage?.author === this.author) {
|
|
div.classList.add("zeroheight");
|
|
premessage.blockedPropigate();
|
|
div.appendChild(build);
|
|
return div;
|
|
} else {
|
|
build.classList.add("blocked", "topMessage");
|
|
const span = document.createElement("span");
|
|
let count = 1;
|
|
let next = this.channel.messages.get(this.channel.idToNext.get(this.id) as string);
|
|
while (next?.author === this.author) {
|
|
count++;
|
|
next = this.channel.messages.get(this.channel.idToNext.get(next.id) as string);
|
|
}
|
|
span.textContent = I18n.getTranslation("showBlockedMessages", count + "");
|
|
build.append(span);
|
|
span.onclick = (_) => {
|
|
const scroll = this.channel.infinite.scrollTop;
|
|
const func = this.channel.infinite.snapBottom();
|
|
let next: Message | undefined = this;
|
|
while (next?.author === this.author) {
|
|
next.generateMessage(undefined, true);
|
|
next = this.channel.messages.get(this.channel.idToNext.get(next.id) as string);
|
|
console.log("loopy");
|
|
}
|
|
if (this.channel.infinite.scollDiv && scroll) {
|
|
func();
|
|
this.channel.infinite.scollDiv.scrollTop = scroll;
|
|
}
|
|
};
|
|
div.appendChild(build);
|
|
return div;
|
|
}
|
|
}
|
|
}
|
|
if (this.message_reference && this.type !== 6) {
|
|
const replyline = document.createElement("div");
|
|
|
|
const minipfp = document.createElement("img");
|
|
minipfp.classList.add("replypfp");
|
|
replyline.appendChild(minipfp);
|
|
|
|
const username = document.createElement("span");
|
|
replyline.appendChild(username);
|
|
|
|
const reply = document.createElement("div");
|
|
username.classList.add("username");
|
|
reply.classList.add("replytext", "ellipsis");
|
|
replyline.appendChild(reply);
|
|
|
|
const line2 = document.createElement("hr");
|
|
replyline.appendChild(line2);
|
|
line2.classList.add("reply");
|
|
replyline.classList.add("flexltr", "replyflex");
|
|
// TODO: Fix this
|
|
this.channel.getmessage(this.message_reference.message_id).then((message) => {
|
|
if (!message) {
|
|
minipfp.remove();
|
|
username.textContent = I18n.getTranslation("message.deleted");
|
|
username.classList.remove("username");
|
|
return;
|
|
}
|
|
if (message.author.relationshipType === 2) {
|
|
username.textContent = "Blocked user";
|
|
return;
|
|
}
|
|
if (message.attachments?.length || message.embeds?.length) {
|
|
const b = document.createElement("b");
|
|
b.innerText = I18n.getTranslation("message.attached");
|
|
reply.append(b);
|
|
}
|
|
const author = message.author;
|
|
reply.appendChild(message.content.makeHTML({stdsize: true}));
|
|
minipfp.src = author.getpfpsrc();
|
|
author.bind(minipfp, this.guild);
|
|
username.textContent = author.username;
|
|
author.bind(username, this.guild);
|
|
Member.resolveMember(author, this.guild).then((_) => {
|
|
if (_) {
|
|
username.textContent = _.name;
|
|
}
|
|
});
|
|
});
|
|
reply.onclick = (_) => {
|
|
// TODO: FIX this
|
|
this.channel.infinite.focus(this.message_reference.message_id);
|
|
};
|
|
div.appendChild(replyline);
|
|
}
|
|
div.appendChild(build);
|
|
const messageTypes = new Set([0, 19]);
|
|
if (messageTypes.has(this.type) || this.attachments.length !== 0) {
|
|
const pfpRow = document.createElement("div");
|
|
let current = true;
|
|
if (premessage !== undefined) {
|
|
const old = new Date(premessage.timestamp).getTime() / 1000;
|
|
const newt = new Date(this.timestamp).getTime() / 1000;
|
|
current = newt - old > 600;
|
|
}
|
|
const combine =
|
|
premessage?.author != this.author ||
|
|
current ||
|
|
this.message_reference ||
|
|
!messageTypes.has(premessage.type);
|
|
if (combine) {
|
|
const pfp = this.author.buildpfp(undefined, div);
|
|
this.author.bind(pfp, this.guild, false);
|
|
pfpRow.appendChild(pfp);
|
|
}
|
|
pfpRow.classList.add("pfprow");
|
|
build.appendChild(pfpRow);
|
|
const text = document.createElement("div");
|
|
text.classList.add("commentrow", "flexttb");
|
|
if (combine) {
|
|
const username = document.createElement("span");
|
|
username.classList.add("username");
|
|
this.author.bind(username, this.guild);
|
|
Member.resolveMember(this.author, this.guild).then((_) => {
|
|
if (_) {
|
|
username.textContent = _.name;
|
|
}
|
|
});
|
|
div.classList.add("topMessage");
|
|
username.textContent = this.author.username;
|
|
const userwrap = document.createElement("div");
|
|
userwrap.appendChild(username);
|
|
if (this.author.bot) {
|
|
const username = document.createElement("span");
|
|
username.classList.add("bot");
|
|
username.textContent = this.author.webhook ? I18n.webhook() : I18n.bot();
|
|
userwrap.appendChild(username);
|
|
}
|
|
const time = document.createElement("span");
|
|
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 = I18n.getTranslation("message.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");
|
|
}
|
|
const messagedwrap = document.createElement("div");
|
|
if (editmode) {
|
|
const box = document.createElement("div");
|
|
box.classList.add("messageEditContainer");
|
|
const area = document.createElement("div");
|
|
const sb = document.createElement("div");
|
|
sb.style.position = "absolute";
|
|
sb.style.width = "100%";
|
|
const search = document.createElement("div");
|
|
search.classList.add("searchOptions", "flexttb");
|
|
area.classList.add("editMessage");
|
|
area.contentEditable = "true";
|
|
const md = new MarkDown(this.content.rawString, this.owner, {keep: true});
|
|
area.append(md.makeHTML());
|
|
area.addEventListener("keyup", (event) => {
|
|
if (this.localuser.keyup(event)) return;
|
|
if (event.key === "Enter" && !event.shiftKey) {
|
|
this.edit(md.rawString);
|
|
this.channel.editing = null;
|
|
this.generateMessage();
|
|
}
|
|
});
|
|
area.addEventListener("keydown", (event) => {
|
|
this.localuser.keydown(event);
|
|
if (event.key === "Enter" && !event.shiftKey) event.preventDefault();
|
|
if (event.key === "Escape") {
|
|
this.channel.editing = null;
|
|
this.generateMessage();
|
|
}
|
|
});
|
|
md.giveBox(area, (str, pre) => {
|
|
this.localuser.search(search, md, str, pre);
|
|
});
|
|
sb.append(search);
|
|
box.append(sb, area);
|
|
messagedwrap.append(box);
|
|
setTimeout(() => {
|
|
area.focus();
|
|
const fun = saveCaretPosition(area, Infinity);
|
|
if (fun) fun();
|
|
});
|
|
box.oncontextmenu = (e) => {
|
|
e.stopImmediatePropagation();
|
|
};
|
|
} else {
|
|
this.content.onUpdate = () => {};
|
|
const messaged = this.content.makeHTML();
|
|
if (!this.embeds.find((_) => _.json.url === messaged.textContent)) {
|
|
messagedwrap.classList.add("flexttb");
|
|
messagedwrap.appendChild(messaged);
|
|
}
|
|
}
|
|
text.appendChild(messagedwrap);
|
|
build.appendChild(text);
|
|
if (this.attachments.length) {
|
|
console.log(this.attachments);
|
|
const attach = document.createElement("div");
|
|
attach.classList.add("flexltr", "attachments");
|
|
for (const thing of this.attachments) {
|
|
attach.appendChild(thing.getHTML());
|
|
}
|
|
messagedwrap.appendChild(attach);
|
|
}
|
|
if (this.embeds.length) {
|
|
const embeds = document.createElement("div");
|
|
for (const thing of this.embeds) {
|
|
embeds.appendChild(thing.generateHTML());
|
|
}
|
|
messagedwrap.appendChild(embeds);
|
|
}
|
|
//
|
|
} else if (this.type === 7) {
|
|
const messages = I18n.welcomeMessages("|||").split("\n");
|
|
const message = messages[Number(BigInt(this.id) % BigInt(messages.length))];
|
|
const [first, second] = message.split("|||");
|
|
const text = document.createElement("div");
|
|
build.appendChild(text);
|
|
|
|
const firstspan = document.createElement("span");
|
|
firstspan.textContent = first;
|
|
text.appendChild(firstspan);
|
|
|
|
const username = document.createElement("span");
|
|
username.textContent = this.author.username;
|
|
//this.author.profileclick(username);
|
|
this.author.bind(username, this.guild);
|
|
text.appendChild(username);
|
|
username.classList.add("username");
|
|
|
|
const secondspan = document.createElement("span");
|
|
secondspan.textContent = second;
|
|
text.appendChild(secondspan);
|
|
|
|
const time = document.createElement("span");
|
|
time.textContent = " " + formatTime(new Date(this.timestamp));
|
|
time.classList.add("timestamp");
|
|
text.append(time);
|
|
div.classList.add("topMessage");
|
|
} else if (this.type === 6) {
|
|
const text = document.createElement("div");
|
|
build.appendChild(text);
|
|
|
|
const m = I18n.message.pin("||").split("||");
|
|
if (m.length === 2) text.append(m.shift() as string);
|
|
|
|
const username = document.createElement("span");
|
|
username.textContent = this.author.username;
|
|
//this.author.profileclick(username);
|
|
this.author.bind(username, this.guild);
|
|
text.appendChild(username);
|
|
username.classList.add("username");
|
|
|
|
const afterText = document.createElement("span");
|
|
afterText.textContent = m[0];
|
|
afterText.onclick = (_) => {
|
|
this.channel.infinite.focus(this.message_reference.message_id);
|
|
};
|
|
afterText.classList.add("pinText");
|
|
text.append(afterText);
|
|
|
|
const time = document.createElement("span");
|
|
time.textContent = " " + formatTime(new Date(this.timestamp));
|
|
time.classList.add("timestamp");
|
|
text.append(time);
|
|
div.classList.add("topMessage");
|
|
}
|
|
const stickerArea = document.createElement("div");
|
|
stickerArea.classList.add("flexltr", "stickerMArea");
|
|
for (const sticker of this.stickers) {
|
|
stickerArea.append(sticker.getHTML());
|
|
}
|
|
div.append(stickerArea);
|
|
if (!dupe) {
|
|
const reactions = document.createElement("div");
|
|
reactions.classList.add("flexltr", "reactiondiv");
|
|
this.reactdiv = new WeakRef(reactions);
|
|
this.updateReactions();
|
|
div.append(reactions);
|
|
this.bindButtonEvent();
|
|
}
|
|
return div;
|
|
}
|
|
bindButtonEvent() {
|
|
if (this.div) {
|
|
let buttons: HTMLDivElement | undefined;
|
|
this.div.onmouseenter = (_) => {
|
|
if (mobile) return;
|
|
if (buttons) {
|
|
buttons.remove();
|
|
buttons = undefined;
|
|
}
|
|
if (this.div) {
|
|
buttons = document.createElement("div");
|
|
buttons.classList.add("messageButtons", "flexltr");
|
|
if (this.channel.hasPermission("SEND_MESSAGES")) {
|
|
const container = document.createElement("button");
|
|
const reply = document.createElement("span");
|
|
reply.classList.add("svg-reply", "svgicon");
|
|
container.append(reply);
|
|
buttons.append(container);
|
|
container.onclick = (_) => {
|
|
this.channel.setReplying(this);
|
|
};
|
|
}
|
|
if (this.channel.hasPermission("ADD_REACTIONS")) {
|
|
const container = document.createElement("button");
|
|
const reply = document.createElement("span");
|
|
reply.classList.add("svg-emoji", "svgicon");
|
|
container.append(reply);
|
|
buttons.append(container);
|
|
container.onclick = (e) => {
|
|
e.stopImmediatePropagation();
|
|
e.preventDefault();
|
|
Emoji.emojiPicker(e.x, e.y, this.localuser).then((_) => {
|
|
this.reactionToggle(_);
|
|
});
|
|
};
|
|
}
|
|
if (this.author === this.localuser.user) {
|
|
const container = document.createElement("button");
|
|
const edit = document.createElement("span");
|
|
edit.classList.add("svg-edit", "svgicon");
|
|
container.append(edit);
|
|
buttons.append(container);
|
|
container.onclick = (_) => {
|
|
this.setEdit();
|
|
};
|
|
}
|
|
if (this.canDelete()) {
|
|
const container = document.createElement("button");
|
|
const reply = document.createElement("span");
|
|
reply.classList.add("svg-delete", "svgicon");
|
|
container.append(reply);
|
|
buttons.append(container);
|
|
container.onclick = (_) => {
|
|
if (_.shiftKey) {
|
|
this.delete();
|
|
return;
|
|
}
|
|
this.confirmDelete();
|
|
};
|
|
}
|
|
if (buttons.childNodes.length !== 0) {
|
|
this.div.append(buttons);
|
|
}
|
|
}
|
|
};
|
|
this.div.onmouseleave = (_) => {
|
|
if (buttons) {
|
|
buttons.remove();
|
|
buttons = undefined;
|
|
}
|
|
};
|
|
}
|
|
}
|
|
confirmDelete() {
|
|
const diaolog = new Dialog("");
|
|
diaolog.options.addTitle(I18n.getTranslation("deleteConfirm"));
|
|
const options = diaolog.options.addOptions("", {ltr: true});
|
|
options.addButtonInput("", I18n.getTranslation("yes"), () => {
|
|
this.delete();
|
|
diaolog.hide();
|
|
});
|
|
options.addButtonInput("", I18n.getTranslation("no"), () => {
|
|
diaolog.hide();
|
|
});
|
|
diaolog.show();
|
|
}
|
|
updateReactions() {
|
|
const reactdiv = this.reactdiv.deref();
|
|
if (!reactdiv) return;
|
|
const func = this.channel.infinite.snapBottom();
|
|
reactdiv.innerHTML = "";
|
|
for (const thing of this.reactions) {
|
|
const reaction = document.createElement("div");
|
|
reaction.classList.add("reaction");
|
|
if (thing.me) {
|
|
reaction.classList.add("meReacted");
|
|
}
|
|
let emoji: HTMLElement;
|
|
if (thing.emoji.id || /\d{17,21}/.test(thing.emoji.name)) {
|
|
if (/\d{17,21}/.test(thing.emoji.name)) {
|
|
thing.emoji.id = thing.emoji.name; //Should stop being a thing once the server fixes this bug
|
|
}
|
|
const emo = new Emoji(
|
|
thing.emoji as {name: string; id: string; animated: boolean},
|
|
this.guild,
|
|
);
|
|
emoji = emo.getHTML(false);
|
|
} else {
|
|
emoji = document.createElement("p");
|
|
emoji.textContent = thing.emoji.name;
|
|
}
|
|
const h = new Hover(async () => {
|
|
//TODO this can't be real, name conflicts must happen, but for now it's fine
|
|
const f = await fetch(
|
|
`${this.info.api}/channels/${this.channel.id}/messages/${this.id}/reactions/${thing.emoji.name}?limit=3&type=0`,
|
|
{headers: this.headers},
|
|
);
|
|
const json = (await f.json()) as userjson[];
|
|
let build = "";
|
|
let users = json.map((_) => new User(_, this.localuser));
|
|
//FIXME this is a spacebar bug, I can't fix this the api ignores limit and just sends everything.
|
|
users = users.splice(0, 3);
|
|
let first = true;
|
|
for (const user of users) {
|
|
if (!first) {
|
|
build += ", ";
|
|
}
|
|
build += user.name;
|
|
first = false;
|
|
}
|
|
if (thing.count > 3) {
|
|
build += ", and more!";
|
|
} else {
|
|
}
|
|
build += "\nReacted with " + thing.emoji.name;
|
|
console.log(build);
|
|
return build;
|
|
});
|
|
h.addEvent(reaction);
|
|
const count = document.createElement("p");
|
|
count.textContent = "" + thing.count;
|
|
count.classList.add("reactionCount");
|
|
reaction.append(count);
|
|
reaction.append(emoji);
|
|
reactdiv.append(reaction);
|
|
|
|
reaction.onclick = (_) => {
|
|
this.reactionToggle(thing.emoji.name);
|
|
};
|
|
}
|
|
func();
|
|
}
|
|
reactionAdd(data: {name: string}, member: Member | {id: string}) {
|
|
for (const thing of this.reactions) {
|
|
if (thing.emoji.name === data.name) {
|
|
thing.count++;
|
|
if (member.id === this.localuser.user.id) {
|
|
thing.me = true;
|
|
this.updateReactions();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
this.reactions.push({
|
|
count: 1,
|
|
emoji: data,
|
|
me: member.id === this.localuser.user.id,
|
|
});
|
|
this.updateReactions();
|
|
}
|
|
reactionRemove(data: {name: string}, id: string) {
|
|
console.log("test");
|
|
for (const i in this.reactions) {
|
|
const thing = this.reactions[i];
|
|
console.log(thing, data);
|
|
if (thing.emoji.name === data.name) {
|
|
thing.count--;
|
|
if (thing.count === 0) {
|
|
this.reactions.splice(Number(i), 1);
|
|
this.updateReactions();
|
|
return;
|
|
}
|
|
if (id === this.localuser.user.id) {
|
|
thing.me = false;
|
|
this.updateReactions();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
reactionRemoveAll() {
|
|
this.reactions = [];
|
|
this.updateReactions();
|
|
}
|
|
reactionRemoveEmoji(emoji: Emoji) {
|
|
for (const i in this.reactions) {
|
|
const reaction = this.reactions[i];
|
|
if (
|
|
(reaction.emoji.id && reaction.emoji.id == emoji.id) ||
|
|
(!reaction.emoji.id && reaction.emoji.name == emoji.name)
|
|
) {
|
|
this.reactions.splice(Number(i), 1);
|
|
this.updateReactions();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
buildhtml(premessage?: Message | undefined, dupe = false): HTMLElement {
|
|
if (this.channel.fakeMessageMap.has(this.id)) {
|
|
this.channel.destroyFakeMessage(this.id);
|
|
}
|
|
if (dupe) {
|
|
return this.generateMessage(premessage, false, document.createElement("div")) as HTMLElement;
|
|
}
|
|
if (this.div) {
|
|
console.error(`HTML for ${this.id} already exists, aborting`);
|
|
return this.div;
|
|
}
|
|
try {
|
|
const div = document.createElement("div");
|
|
this.div = div;
|
|
this.messageevents(div);
|
|
return this.generateMessage(premessage) as HTMLElement;
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
return this.div as HTMLElement;
|
|
}
|
|
}
|
|
let now: string;
|
|
let yesterdayStr: string;
|
|
|
|
function formatTime(date: Date) {
|
|
updateTimes();
|
|
const datestring = date.toLocaleDateString();
|
|
const formatTime = (date: Date) =>
|
|
date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit"});
|
|
|
|
if (datestring === now) {
|
|
return I18n.getTranslation("todayAt", formatTime(date));
|
|
} else if (datestring === yesterdayStr) {
|
|
return I18n.getTranslation("yesterdayAt", formatTime(date));
|
|
} else {
|
|
return I18n.getTranslation("otherAt", date.toLocaleDateString(), formatTime(date));
|
|
}
|
|
}
|
|
let tomorrow = 0;
|
|
updateTimes();
|
|
function updateTimes() {
|
|
if (tomorrow < Date.now()) {
|
|
const d = new Date();
|
|
tomorrow = d.setHours(24, 0, 0, 0);
|
|
now = new Date().toLocaleDateString();
|
|
const yesterday = new Date(now);
|
|
yesterday.setDate(new Date().getDate() - 1);
|
|
yesterdayStr = yesterday.toLocaleDateString();
|
|
}
|
|
}
|
|
Message.setup();
|
|
export {Message};
|