2018-03-08 09:40:29 +01:00
|
|
|
/**
|
|
|
|
* BetterDiscord Automated DOM Manipulations
|
|
|
|
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
|
|
|
* All rights reserved.
|
|
|
|
* https://betterdiscord.net
|
|
|
|
*
|
|
|
|
* This source code is licensed under the MIT license found in the
|
|
|
|
* LICENSE file in the root directory of this source tree.
|
|
|
|
*/
|
|
|
|
|
2018-03-08 20:40:43 +01:00
|
|
|
import { Events, WebpackModules, EventListener } from 'modules';
|
2018-03-08 09:40:29 +01:00
|
|
|
import Reflection from './reflection';
|
|
|
|
import DOM from './dom';
|
2018-03-08 12:15:58 +01:00
|
|
|
import VueInjector from './vueinjector';
|
2018-03-09 11:33:38 +01:00
|
|
|
import EditedTimeStamp from './components/common/EditedTimestamp.vue';
|
2018-03-10 04:05:12 +01:00
|
|
|
import Autocomplete from './components/common/Autocomplete.vue';
|
2018-03-08 09:40:29 +01:00
|
|
|
|
|
|
|
class TempApi {
|
|
|
|
static get currentGuildId() {
|
|
|
|
try {
|
|
|
|
return WebpackModules.getModuleByName('SelectedGuildStore').getGuildId();
|
|
|
|
} catch (err) {
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
static get currentChannelId() {
|
|
|
|
try {
|
|
|
|
return WebpackModules.getModuleByName('SelectedChannelStore').getChannelId();
|
|
|
|
} catch (err) {
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
static get currentUserId() {
|
|
|
|
try {
|
|
|
|
return WebpackModules.getModuleByName('UserStore').getCurrentUser().id;
|
|
|
|
} catch (err) {
|
|
|
|
return 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-03-08 20:40:43 +01:00
|
|
|
export default class extends EventListener {
|
2018-03-08 09:40:29 +01:00
|
|
|
|
|
|
|
constructor() {
|
2018-03-08 20:40:43 +01:00
|
|
|
super();
|
2018-03-10 04:05:12 +01:00
|
|
|
window.injectAc = this.injectAutocomplete;
|
2018-03-09 09:43:03 +01:00
|
|
|
const messageFilter = function (m) {
|
|
|
|
return m.addedNodes && m.addedNodes.length && m.addedNodes[0].classList && m.addedNodes[0].classList.contains('message-group');
|
2018-03-08 16:37:38 +01:00
|
|
|
}
|
|
|
|
|
2018-03-09 09:43:03 +01:00
|
|
|
DOM.observer.subscribe('loading-more-manip', messageFilter, mutations => {
|
2018-03-08 16:37:38 +01:00
|
|
|
this.setIds();
|
|
|
|
this.makeMutable();
|
2018-03-09 09:43:03 +01:00
|
|
|
Events.emit('ui:laodedmore', mutations.map(m => m.addedNodes[0]));
|
|
|
|
}, 'filter');
|
|
|
|
|
|
|
|
const userFilter = function (m) {
|
|
|
|
return m.addedNodes && m.addedNodes.length && m.addedNodes[0].classList && m.addedNodes[0].classList.contains('member');
|
|
|
|
}
|
|
|
|
|
|
|
|
DOM.observer.subscribe('loading-more-users-manip', userFilter, mutations => {
|
|
|
|
this.setUserIds();
|
|
|
|
Events.emit('ui:loadedmoreusers', mutations.map(m => m.addedNodes[0]));
|
|
|
|
}, 'filter');
|
2018-03-08 09:40:29 +01:00
|
|
|
}
|
|
|
|
|
2018-03-08 20:40:43 +01:00
|
|
|
bindings() {
|
|
|
|
this.manipAll = this.manipAll.bind(this);
|
|
|
|
this.markupInjector = this.markupInjector.bind(this);
|
2018-03-09 09:43:03 +01:00
|
|
|
this.setIds = this.setIds.bind(this);
|
|
|
|
this.setMessageIds = this.setMessageIds.bind(this);
|
|
|
|
this.setUserIds = this.setUserIds.bind(this);
|
2018-03-08 20:40:43 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
get eventBindings() {
|
|
|
|
return [
|
|
|
|
{ id: 'server-switch', callback: this.manipAll },
|
|
|
|
{ id: 'channel-switch', callback: this.manipAll },
|
|
|
|
{ id: 'discord:MESSAGE_CREATE', callback: this.markupInjector },
|
|
|
|
{ id: 'discord:MESSAGE_UPDATE', callback: this.markupInjector }
|
|
|
|
];
|
|
|
|
}
|
|
|
|
|
|
|
|
manipAll() {
|
|
|
|
try {
|
|
|
|
this.appMount.setAttribute('guild-id', TempApi.currentGuildId);
|
|
|
|
this.appMount.setAttribute('channel-id', TempApi.currentChannelId);
|
|
|
|
this.setIds();
|
|
|
|
this.makeMutable();
|
|
|
|
} catch (err) {
|
|
|
|
console.log(err);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
markupInjector(e) {
|
|
|
|
if (!e.element) return;
|
|
|
|
this.setId(e.element);
|
|
|
|
const markup = e.element.querySelector('.markup:not(.mutable)');
|
|
|
|
if (markup) this.injectMarkup(markup, this.cloneMarkup(markup), false);
|
|
|
|
}
|
|
|
|
|
2018-03-08 12:15:58 +01:00
|
|
|
getEts(node) {
|
|
|
|
try {
|
|
|
|
const reh = Object.keys(node).find(k => k.startsWith('__reactInternalInstance'));
|
|
|
|
return node[reh].memoizedProps.children[node[reh].memoizedProps.children.length - 1].props.text;
|
|
|
|
} catch (err) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
makeMutable() {
|
|
|
|
for (const el of document.querySelectorAll('.markup:not(.mutable)')) {
|
|
|
|
this.injectMarkup(el, this.cloneMarkup(el), false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
cloneMarkup(node) {
|
|
|
|
const childNodes = [...node.childNodes];
|
|
|
|
const clone = document.createElement('div');
|
|
|
|
clone.className = 'markup mutable';
|
|
|
|
const ets = this.getEts(node);
|
|
|
|
for (const [cni, cn] of childNodes.entries()) {
|
|
|
|
if (cn.nodeType !== Node.TEXT_NODE) {
|
|
|
|
if (cn.className.includes('edited')) continue;
|
|
|
|
}
|
|
|
|
clone.appendChild(cn.cloneNode(true));
|
|
|
|
}
|
|
|
|
return { clone, ets }
|
|
|
|
}
|
|
|
|
|
|
|
|
injectMarkup(sibling, markup, reinject) {
|
|
|
|
if (sibling.className && sibling.className.includes('mutable')) return; // Ignore trying to make mutable again
|
|
|
|
let cc = null;
|
|
|
|
for (const cn of sibling.parentElement.childNodes) {
|
|
|
|
if (cn.className && cn.className.includes('mutable')) cc = cn;
|
|
|
|
}
|
|
|
|
if (cc) sibling.parentElement.removeChild(cc);
|
|
|
|
if (markup === true) markup = this.cloneMarkup(sibling);
|
|
|
|
|
|
|
|
sibling.parentElement.insertBefore(markup.clone, sibling);
|
|
|
|
sibling.classList.add('shadow');
|
|
|
|
sibling.style.display = 'none';
|
|
|
|
if (markup.ets) {
|
|
|
|
const etsRoot = document.createElement('span');
|
|
|
|
markup.clone.appendChild(etsRoot);
|
|
|
|
VueInjector.inject(
|
|
|
|
etsRoot,
|
|
|
|
DOM.createElement('span', null, 'test'),
|
|
|
|
{ EditedTimeStamp },
|
|
|
|
`<EditedTimeStamp ets="${markup.ets}"/>`,
|
|
|
|
true
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-03-08 13:04:51 +01:00
|
|
|
Events.emit('ui:mutable:.markup', markup.clone);
|
2018-03-08 12:15:58 +01:00
|
|
|
}
|
|
|
|
|
2018-03-08 09:40:29 +01:00
|
|
|
setIds() {
|
2018-03-09 09:43:03 +01:00
|
|
|
this.setMessageIds();
|
|
|
|
this.setUserIds();
|
|
|
|
}
|
|
|
|
|
|
|
|
setMessageIds() {
|
2018-03-08 09:40:29 +01:00
|
|
|
for (let msg of document.querySelectorAll('.message')) {
|
2018-03-08 13:45:31 +01:00
|
|
|
this.setId(msg);
|
2018-03-08 09:40:29 +01:00
|
|
|
}
|
2018-03-09 09:43:03 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
setUserIds() {
|
2018-03-08 18:35:05 +01:00
|
|
|
for (let user of document.querySelectorAll('.channel-members-wrap .member')) {
|
|
|
|
this.setUserId(user);
|
|
|
|
}
|
2018-03-08 09:40:29 +01:00
|
|
|
}
|
2018-03-08 15:46:50 +01:00
|
|
|
|
2018-03-08 13:45:31 +01:00
|
|
|
setId(msg) {
|
|
|
|
if (msg.hasAttribute('message-id')) return;
|
2018-03-08 18:45:17 +01:00
|
|
|
const messageid = Reflection(msg).prop('message.id');
|
2018-03-08 18:37:50 +01:00
|
|
|
const authorid = Reflection(msg).prop('message.author.id');
|
|
|
|
if (!messageid || !authorid) return;
|
2018-03-08 18:45:17 +01:00
|
|
|
msg.setAttribute('data-message-id', messageid);
|
2018-03-08 13:45:31 +01:00
|
|
|
const msgGroup = msg.closest('.message-group');
|
|
|
|
if (!msgGroup) return;
|
2018-03-08 18:45:17 +01:00
|
|
|
msgGroup.setAttribute('data-author-id', authorid);
|
|
|
|
if (authorid === TempApi.currentUserId) msgGroup.setAttribute('data-currentuser', true);
|
2018-03-08 13:45:31 +01:00
|
|
|
}
|
2018-03-08 09:40:29 +01:00
|
|
|
|
2018-03-08 18:35:05 +01:00
|
|
|
setUserId(user) {
|
2018-03-08 20:58:53 +01:00
|
|
|
if (user.hasAttribute('data-user-id')) return;
|
2018-03-08 18:35:05 +01:00
|
|
|
const userid = Reflection(user).prop('user.id');
|
|
|
|
if (!userid) return;
|
2018-03-08 20:58:53 +01:00
|
|
|
user.setAttribute('data-user-id', userid);
|
2018-03-08 18:35:05 +01:00
|
|
|
const currentUser = userid === TempApi.currentUserId;
|
2018-03-08 18:45:17 +01:00
|
|
|
if (currentUser) user.setAttribute('data-currentuser', true);
|
2018-03-08 20:58:53 +01:00
|
|
|
Events.emit('ui:useridset', user);
|
2018-03-08 18:35:05 +01:00
|
|
|
}
|
|
|
|
|
2018-03-08 09:40:29 +01:00
|
|
|
get appMount() {
|
|
|
|
return document.getElementById('app-mount');
|
|
|
|
}
|
2018-03-10 04:05:12 +01:00
|
|
|
|
|
|
|
injectAutocomplete() {
|
|
|
|
const root = document.createElement('span');
|
|
|
|
const parent = document.querySelector('[class*="channelTextArea"] > [class*="inner"]');
|
|
|
|
if (!parent) return;
|
|
|
|
parent.append(root);
|
|
|
|
VueInjector.inject(
|
|
|
|
root,
|
|
|
|
DOM.createElement('span'),
|
|
|
|
{ Autocomplete },
|
|
|
|
`<Autocomplete/>`,
|
|
|
|
true
|
|
|
|
);
|
|
|
|
}
|
2018-03-08 09:40:29 +01:00
|
|
|
}
|