Refactor UserProfileModals badges
This commit is contained in:
parent
68beee12d3
commit
d98f152009
|
@ -17,6 +17,7 @@ export { default as Vendor } from './vendor';
|
|||
export * from './webpackmodules';
|
||||
export * from './patcher';
|
||||
export * from './reactcomponents';
|
||||
export { default as Module } from './module';
|
||||
export { default as EventListener } from './eventlistener';
|
||||
export { default as SocketProxy } from './socketproxy';
|
||||
export { default as EventHook } from './eventhook';
|
||||
|
|
|
@ -229,7 +229,7 @@ export class ReactComponents {
|
|||
return;
|
||||
}
|
||||
if (!reflect.component.displayName) reflect.component.displayName = name;
|
||||
Logger.info('ReactComponents', [`Found important component ${name} with reflection`, reflect.component, reflect]);
|
||||
Logger.info('ReactComponents', [`Found important component ${name} with reflection`, reflect]);
|
||||
this.push(reflect.component);
|
||||
clearInterval(importantInterval);
|
||||
}, 50);
|
||||
|
@ -240,7 +240,7 @@ export class ReactComponents {
|
|||
listeners: []
|
||||
});
|
||||
return new Promise(resolve => {
|
||||
this.listeners.find(l => l.id === name).listeners.push(c => resolve(c));
|
||||
this.listeners.find(l => l.id === name).listeners.push(resolve);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -1,7 +1,11 @@
|
|||
.bd-profile-badges-wrap {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
margin-top: 8px;
|
||||
flex: 1 1 auto;
|
||||
|
||||
+ [class*="profileBadges"] {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-profile-badges {
|
||||
|
|
|
@ -24,49 +24,39 @@ export default class {
|
|||
server: DiscordApi.currentGuild,
|
||||
channel: DiscordApi.currentChannel
|
||||
};
|
||||
|
||||
window.addEventListener('keyup', e => Events.emit('gkh:keyup', e));
|
||||
this.autoManip = new AutoManip();
|
||||
const defer = setInterval(() => {
|
||||
if (!this.profilePopupModule) return;
|
||||
clearInterval(defer);
|
||||
|
||||
MonkeyPatch('BdUI', this.profilePopupModule).after('open', (context, [userid]) => Events.emit('ui-event', {
|
||||
event: 'profile-popup-open',
|
||||
data: { userid }
|
||||
}));
|
||||
}, 100);
|
||||
|
||||
const ehookInterval = setInterval(() => {
|
||||
if (!remote.BrowserWindow.getFocusedWindow()) return;
|
||||
clearInterval(ehookInterval);
|
||||
remote.BrowserWindow.getFocusedWindow().webContents.on('did-navigate-in-page', (e, url, isMainFrame) => {
|
||||
const { currentGuild, currentChannel } = DiscordApi;
|
||||
|
||||
if (!this.pathCache.server) {
|
||||
Events.emit('server-switch', { server: currentGuild, channel: currentChannel });
|
||||
this.pathCache.server = currentGuild;
|
||||
this.pathCache.channel = currentChannel;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.pathCache.channel) {
|
||||
Events.emit('channel-switch', currentChannel);
|
||||
this.pathCache.server = currentGuild;
|
||||
this.pathCache.channel = currentChannel;
|
||||
return;
|
||||
}
|
||||
if (currentGuild &&
|
||||
currentGuild.id &&
|
||||
this.pathCache.server &&
|
||||
this.pathCache.server.id !== currentGuild.id) {
|
||||
|
||||
if (currentGuild && currentGuild.id && this.pathCache.server && this.pathCache.server.id !== currentGuild.id) {
|
||||
Events.emit('server-switch', { server: currentGuild, channel: currentChannel });
|
||||
this.pathCache.server = currentGuild;
|
||||
this.pathCache.channel = currentChannel;
|
||||
return;
|
||||
}
|
||||
if (currentChannel &&
|
||||
currentChannel.id &&
|
||||
this.pathCache.channel &&
|
||||
this.pathCache.channel.id !== currentChannel.id) Events.emit('channel-switch', currentChannel);
|
||||
|
||||
if (currentChannel && currentChannel.id && this.pathCache.channel && this.pathCache.channel.id !== currentChannel.id)
|
||||
Events.emit('channel-switch', currentChannel);
|
||||
|
||||
this.pathCache.server = currentGuild;
|
||||
this.pathCache.channel = currentChannel;
|
||||
|
@ -74,10 +64,6 @@ export default class {
|
|||
}, 100);
|
||||
}
|
||||
|
||||
static get profilePopupModule() {
|
||||
return WebpackModules.getModuleByProps(['fetchMutualFriends', 'setSection']);
|
||||
}
|
||||
|
||||
static injectUi() {
|
||||
DOM.createElement('div', null, 'bd-settings').appendTo(DOM.bdBody);
|
||||
DOM.createElement('div', null, 'bd-modals').appendTo(DOM.bdModals);
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
*/
|
||||
|
||||
<template>
|
||||
<div :class="{'bd-profile-badges-wrap': !hasBadges}">
|
||||
<div class="bd-profile-badges-wrap">
|
||||
<div class="bd-profile-badges">
|
||||
<div v-if="developer" v-tooltip="'BetterDiscord Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
|
||||
<div v-else-if="webdev" v-tooltip="'BetterDiscord Web Developer'" class="bd-profile-badge bd-profile-badge-developer" @click="click"></div>
|
||||
|
@ -23,7 +23,7 @@
|
|||
import { shell } from 'electron';
|
||||
|
||||
export default {
|
||||
props: ['webdev', 'developer', 'contributor', 'hasBadges'],
|
||||
props: ['webdev', 'developer', 'contributor'],
|
||||
methods: {
|
||||
click() {
|
||||
if (this.developer) return shell.openExternal('https://github.com/JsSucks/BetterDiscordApp');
|
||||
|
|
|
@ -8,60 +8,21 @@
|
|||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import { EventListener, ReactComponents, ReactHelpers, MonkeyPatch } from 'modules';
|
||||
import { Module, ReactComponents, ReactHelpers, MonkeyPatch, WebpackModules } from 'modules';
|
||||
import { Reflection } from 'ui';
|
||||
import { ClientLogger as Logger } from 'common';
|
||||
import { Utils, ClientLogger as Logger } from 'common';
|
||||
import DOM from './dom';
|
||||
import { BdBadge, BdMessageBadge } from './components/bd';
|
||||
import VueInjector from './vueinjector';
|
||||
import contributors from '../data/contributors';
|
||||
|
||||
export default class extends EventListener {
|
||||
export default class extends Module {
|
||||
|
||||
init() {
|
||||
this.patchMessage();
|
||||
this.patchChannelMember();
|
||||
this.patchNameTag();
|
||||
}
|
||||
|
||||
bindings() {
|
||||
this.uiEvent = this.uiEvent.bind(this);
|
||||
}
|
||||
|
||||
get eventBindings() {
|
||||
return [
|
||||
{ id: 'ui-event', callback: this.uiEvent }
|
||||
];
|
||||
}
|
||||
|
||||
uiEvent(e) {
|
||||
const { event, data } = e;
|
||||
if (event !== 'profile-popup-open') return;
|
||||
const { userid } = data;
|
||||
if (!userid) return;
|
||||
|
||||
this.inject(userid);
|
||||
}
|
||||
|
||||
inject(userid) {
|
||||
const c = contributors.find(c => c.id === userid);
|
||||
if (!c) return;
|
||||
|
||||
setTimeout(() => {
|
||||
let hasBadges = false;
|
||||
let root = document.querySelector('[class*="profileBadges"]');
|
||||
if (root) {
|
||||
hasBadges = true;
|
||||
} else {
|
||||
root = document.querySelector('[class*="headerInfo"]');
|
||||
}
|
||||
|
||||
VueInjector.inject(root, {
|
||||
components: { BdBadge },
|
||||
data: { hasBadges, c },
|
||||
template: '<BdBadge :hasBadges="hasBadges" :developer="c.developer" :webdev="c.webdev" :contributor="c.contributor" />',
|
||||
}, DOM.createElement('div', null, 'bdprofilebadges'));
|
||||
}, 400);
|
||||
this.patchUserProfileModals();
|
||||
}
|
||||
|
||||
get contributors() {
|
||||
|
@ -182,7 +143,8 @@ export default class extends EventListener {
|
|||
}
|
||||
|
||||
injectMessageBadges(element) {
|
||||
for (const beo of element.getElementsByClassName('bd-badge-outer')) this.injectMessageBadge(beo);
|
||||
for (const beo of element.getElementsByClassName('bd-badge-outer'))
|
||||
this.injectMessageBadge(beo);
|
||||
}
|
||||
|
||||
injectMessageBadge(root) {
|
||||
|
@ -204,4 +166,34 @@ export default class extends EventListener {
|
|||
root.classList.add('bd-has-badge');
|
||||
}
|
||||
|
||||
/**
|
||||
* Patches UserProfileModals to inject profile badges into the modal once opened.
|
||||
* TODO: just patch the modal component
|
||||
*/
|
||||
async patchUserProfileModals() {
|
||||
const UserProfileModals = WebpackModules.getModuleByName('UserProfileModals');
|
||||
|
||||
MonkeyPatch('BdUI', UserProfileModals).after('open', async (context, [userid]) => {
|
||||
const c = contributors.find(c => c.id === userid);
|
||||
if (!c) return;
|
||||
|
||||
const root = await Utils.until(() => document.querySelector('[class*="headerInfo"]'));
|
||||
const el = DOM.createElement('div', null, 'bdprofilebadges');
|
||||
root.insertBefore(el.element, root.firstChild.nextSibling);
|
||||
|
||||
this.injectProfileBadge(userid, el.element);
|
||||
});
|
||||
}
|
||||
|
||||
injectProfileBadge(userid, root) {
|
||||
const c = contributors.find(c => c.id === userid);
|
||||
if (!c) return;
|
||||
|
||||
VueInjector.inject(root, {
|
||||
components: { BdBadge },
|
||||
data: { c },
|
||||
template: '<BdBadge :developer="c.developer" :webdev="c.webdev" :contributor="c.contributor" />',
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -159,6 +159,17 @@ export class Utils {
|
|||
enumerable: true
|
||||
});
|
||||
}
|
||||
|
||||
static async until(check, time = 0) {
|
||||
let value, i;
|
||||
do {
|
||||
// Wait for the next tick
|
||||
await new Promise(resolve => setTimeout(resolve, time));
|
||||
value = check(i);
|
||||
i++;
|
||||
} while (!value);
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
export class FileUtils {
|
||||
|
|
Loading…
Reference in New Issue