fix stuff
This commit is contained in:
Strencher
parent
7170372976
commit
56fc757650
File diff suppressed because one or more lines are too long
|
|
@ -1,45 +1,7 @@
|
|||
import Builtin from "../../structs/builtin";
|
||||
import {Utilities, Events, DOM} from "modules";
|
||||
import Modals from "../../ui/modals";
|
||||
|
||||
import EmoteModule from "./emotes";
|
||||
|
||||
const headerHTML = `<div id="bd-qem">
|
||||
<button class="active" id="bd-qem-twitch">Twitch</button>
|
||||
<button id="bd-qem-favourite">Favourite</button>
|
||||
<button id="bd-qem-emojis">Emojis</buttond>
|
||||
</div>`;
|
||||
|
||||
const twitchEmoteHTML = `<div id="bd-qem-twitch-container">
|
||||
<div class="scroller-wrap scrollerWrap-2lJEkd fade">
|
||||
<div class="scroller scroller-2FKFPG">
|
||||
<div class="emote-menu-inner">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const favoritesHTML = `<div id="bd-qem-favourite-container">
|
||||
<div class="scroller-wrap scrollerWrap-2lJEkd fade">
|
||||
<div class="scroller scroller-2FKFPG">
|
||||
<div class="emote-menu-inner">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const makeEmote = (emote, url, options = {}) => {
|
||||
const {onContextMenu, onClick} = options;
|
||||
const emoteContainer = DOM.createElement(`<div class="emote-container">
|
||||
<img class="emote-icon" alt="${emote}" src="${url}" title="${emote}">
|
||||
</div>`);
|
||||
if (onContextMenu) emoteContainer.addEventListener("contextmenu", onContextMenu);
|
||||
emoteContainer.addEventListener("click", onClick);
|
||||
return emoteContainer;
|
||||
};
|
||||
|
||||
import {Utilities, WebpackModules, React} from "modules";
|
||||
import Tabs from "./tabs";
|
||||
const EmojiPicker = WebpackModules.find(m => m.type && m.type.displayName == "ExpressionPicker");
|
||||
export default new class EmoteMenu extends Builtin {
|
||||
get name() {return "EmoteMenu";}
|
||||
get collection() {return "emotes";}
|
||||
|
|
@ -50,151 +12,37 @@ export default new class EmoteMenu extends Builtin {
|
|||
|
||||
constructor() {
|
||||
super();
|
||||
this.lastTab = "bd-qem-emojis";
|
||||
|
||||
this.qmeHeader = DOM.createElement(headerHTML);
|
||||
for (const button of this.qmeHeader.getElementsByTagName("button")) button.addEventListener("click", this.switchMenu.bind(this));
|
||||
|
||||
this.teContainer = DOM.createElement(twitchEmoteHTML);
|
||||
this.teContainerInner = this.teContainer.querySelector(".emote-menu-inner");
|
||||
|
||||
this.faContainer = DOM.createElement(favoritesHTML);
|
||||
this.faContainerInner = this.faContainer.querySelector(".emote-menu-inner");
|
||||
|
||||
this.observer = new MutationObserver(mutations => {for (const mutation of mutations) this.observe(mutation);});
|
||||
this.enableHideEmojis = this.enableHideEmojis.bind(this);
|
||||
this.disableHideEmojis = this.disableHideEmojis.bind(this);
|
||||
this.updateTwitchEmotes = this.updateTwitchEmotes.bind(this);
|
||||
}
|
||||
|
||||
async enabled() {
|
||||
// Temporary measure, so not using Strings/translation
|
||||
return Modals.alert("Emote Menu Broken", "Emote Menu is currently broken, it is recommended to disable this until it is fixed.");
|
||||
// this.log("Starting to observe");
|
||||
// this.observer.observe(document.getElementById("app-mount"), {
|
||||
// childList: true,
|
||||
// subtree: true
|
||||
// });
|
||||
// this.hideEmojiCancel = this.registerSetting(this.hideEmojisID, this.enableHideEmojis, this.disableHideEmojis);
|
||||
// if (this.hideEmojis) this.enableHideEmojis();
|
||||
// if (EmoteModule.emotesLoaded) this.updateTwitchEmotes();
|
||||
// this.updateFavorites();
|
||||
// Events.on("emotes-loaded", this.updateTwitchEmotes);
|
||||
}
|
||||
enabled() {
|
||||
this.before(EmojiPicker, "type", (_, [args], ret) => {
|
||||
if(args.expressionPickerView == "emoji" && this.hideEmojis) args.expressionPickerView = "gif";
|
||||
});
|
||||
this.after(EmojiPicker, "type", (_, [args], ret) => {
|
||||
const head = Utilities.getNestedProp(ret, "props.children.props.children.1.props.children.0.props.children.props.children");
|
||||
const body = Utilities.getNestedProp(ret, "props.children.props.children.1.props.children");
|
||||
if(!head || !body) return ret;
|
||||
const currentTab = Tabs.find(e => e.id === selected);
|
||||
const selected = args.expressionPickerView;
|
||||
let tabProps = head[0].props;
|
||||
head.push(
|
||||
...Tabs.map(e => React.createElement("div", {
|
||||
id: e.id+"-tab",
|
||||
role: "tab",
|
||||
"aria-selected": selected == e.id,
|
||||
className: tabProps.className,
|
||||
}, React.createElement(tabProps.children.type, {
|
||||
viewType: e.id,
|
||||
isActive: selected == e.id,
|
||||
setActiveView: tabProps.children.props.setActiveView
|
||||
}, e.label))
|
||||
));
|
||||
if(currentTab) body[2] = currentTab.element();
|
||||
if(this.hideEmojis) head.splice(head.findIndex(e=>e.props.id == "emoji-picker-tab"), 1);
|
||||
})
|
||||
}
|
||||
|
||||
disabled() {
|
||||
Events.off("emotes-loaded", this.updateTwitchEmotes);
|
||||
this.observer.disconnect();
|
||||
this.disableHideEmojis();
|
||||
if (this.hideEmojiCancel) this.hideEmojiCancel();
|
||||
}
|
||||
|
||||
enableHideEmojis() {
|
||||
const picker = document.querySelector(".emojiPicker-3m1S-j");
|
||||
if (picker) picker.classList.add("bd-qme-hidden");
|
||||
}
|
||||
|
||||
disableHideEmojis() {
|
||||
const picker = document.querySelector(".emojiPicker-3m1S-j");
|
||||
if (picker) picker.classList.remove("bd-qme-hidden");
|
||||
}
|
||||
|
||||
insertEmote(emote) {
|
||||
const ta = Utilities.getTextArea();
|
||||
Utilities.insertText(ta[0], ta.val().slice(-1) == " " ? ta.val() + emote : ta.val() + " " + emote);
|
||||
}
|
||||
|
||||
favContext(e) {
|
||||
e.stopPropagation();
|
||||
const em = e.target.closest(".emote-container").children[0];
|
||||
const menu = $(`<div id="removemenu" class="bd-context-menu context-menu theme-dark">Remove</div>`);
|
||||
menu.css({
|
||||
top: e.pageY - $("#bd-qem-favourite-container").offset().top,
|
||||
left: e.pageX - $("#bd-qem-favourite-container").offset().left
|
||||
});
|
||||
$(em).parent().append(menu);
|
||||
menu.on("click", (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
$(em).remove();
|
||||
EmoteModule.removeFavorite($(em).attr("title"));
|
||||
this.updateFavorites();
|
||||
$(document).off("mousedown.emotemenu");
|
||||
});
|
||||
$(document).on("mousedown.emotemenu", function(event) {
|
||||
if (event.target.id == "removemenu") return;
|
||||
$("#removemenu").remove();
|
||||
$(document).off("mousedown.emotemenu");
|
||||
});
|
||||
}
|
||||
|
||||
switchMenu(e) {
|
||||
let id = typeof(e) == "string" ? e : e.target.id;
|
||||
if (id == "bd-qem-emojis" && this.hideEmojis) id = "bd-qem-favourite";
|
||||
const twitch = $("#bd-qem-twitch");
|
||||
const fav = $("#bd-qem-favourite");
|
||||
const emojis = $("#bd-qem-emojis");
|
||||
twitch.removeClass("active");
|
||||
fav.removeClass("active");
|
||||
emojis.removeClass("active");
|
||||
|
||||
$(".emojiPicker-3m1S-j").hide();
|
||||
$("#bd-qem-favourite-container").hide();
|
||||
$("#bd-qem-twitch-container").hide();
|
||||
|
||||
switch (id) {
|
||||
case "bd-qem-twitch":
|
||||
twitch.addClass("active");
|
||||
$("#bd-qem-twitch-container").show();
|
||||
break;
|
||||
case "bd-qem-favourite":
|
||||
fav.addClass("active");
|
||||
$("#bd-qem-favourite-container").show();
|
||||
break;
|
||||
case "bd-qem-emojis":
|
||||
emojis.addClass("active");
|
||||
$(".emojiPicker-3m1S-j").show();
|
||||
$(".emojiPicker-3m1S-j input").focus();
|
||||
break;
|
||||
}
|
||||
if (id) this.lastTab = id;
|
||||
}
|
||||
|
||||
observe(mutation) {
|
||||
if (!mutation.addedNodes.length || !(mutation.addedNodes[0] instanceof Element)) return;
|
||||
const node = mutation.addedNodes[0];
|
||||
// if (!node.classList.contains("popout-2iWAc-") || node.classList.contains("popoutLeft-30WmrD") || !node.getElementsByClassName("emojiPicker-3m1S-j").length) return;
|
||||
if (!node.classList.contains("layer-v9HyYc") || !node.getElementsByClassName("emojiPicker-3m1S-j").length || node.querySelector(".emojiPicker-3m1S-j").parentElement.classList.contains("animatorLeft-1EQxU0")) return;
|
||||
|
||||
const e = $(node);
|
||||
if (this.hideEmojis) e.addClass("bd-qme-hidden");
|
||||
else e.removeClass("bd-qme-hidden");
|
||||
|
||||
e.prepend(this.qmeHeader);
|
||||
e.append(this.teContainer);
|
||||
e.append(this.faContainer);
|
||||
|
||||
this.switchMenu(this.lastTab);
|
||||
}
|
||||
|
||||
updateTwitchEmotes() {
|
||||
while (this.teContainerInner.firstChild) this.teContainerInner.firstChild.remove();
|
||||
for (const emote in EmoteModule.getCategory("TwitchGlobal")) {
|
||||
if (!EmoteModule.getCategory("TwitchGlobal").hasOwnProperty(emote)) continue;
|
||||
const url = EmoteModule.getUrl("TwitchGlobal", emote);
|
||||
const emoteElement = makeEmote(emote, url, {onClick: this.insertEmote.bind(this, emote)});
|
||||
this.teContainerInner.append(emoteElement);
|
||||
}
|
||||
}
|
||||
|
||||
updateFavorites() {
|
||||
while (this.faContainerInner.firstChild) this.faContainerInner.firstChild.remove();
|
||||
for (const emote in EmoteModule.favorites) {
|
||||
const url = EmoteModule.favorites[emote];
|
||||
const emoteElement = makeEmote(emote, url, {onClick: this.insertEmote.bind(this, emote), onContextMenu: this.favContext.bind(this)});
|
||||
this.faContainerInner.append(emoteElement);
|
||||
}
|
||||
EmoteModule.saveFavorites();
|
||||
this.unpatchAll();
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import {React} from "modules";
|
||||
import EmoteModule from "./emotes";
|
||||
import EmoteMenuCard from "../../ui/emotemenucard";
|
||||
import EmoteIcon from "../../ui/emoteicon";
|
||||
export default [
|
||||
{
|
||||
id: "twitchEmotes",
|
||||
label: "Twitch Emotes",
|
||||
element: () => React.createElement(EmoteMenuCard, {
|
||||
type: "twitch"
|
||||
}, Object.keys(EmoteModule.getCategory("TwitchGlobal")).map(emote=> {
|
||||
const url = EmoteModule.getUrl("TwitchGlobal", emote);
|
||||
return React.createElement(EmoteIcon, {emote, url});
|
||||
}))
|
||||
},
|
||||
{
|
||||
id: "favoriteEmotes",
|
||||
label: "Favorite Emotes",
|
||||
element: () => React.createElement(EmoteMenuCard, {
|
||||
type: "favourite"
|
||||
}, Object.entries(EmoteModule.favorites).map(([emote, url]) => {
|
||||
return React.createElement(EmoteIcon, {emote, url});
|
||||
}))
|
||||
}
|
||||
]
|
||||
|
|
@ -11,13 +11,17 @@ import ThemeManager from "./thememanager";
|
|||
import Settings from "./settingsmanager";
|
||||
import Logger from "./logger";
|
||||
import Patcher from "./patcher";
|
||||
import Emotes from "../builtins/emotes/emotes";
|
||||
|
||||
const BdApi = {
|
||||
get React() { return DiscordModules.React; },
|
||||
get ReactDOM() { return DiscordModules.ReactDOM; },
|
||||
get WindowConfigFile() {return "";},
|
||||
get settings() {return Settings.collections;},
|
||||
get emotes() {return {};},
|
||||
get emotes() {return new Proxy(Emotes.Emotes, {
|
||||
get() { return Emotes.Emotes},
|
||||
set() { Logger.warn("Emotes", "Addon policy for plugins #5 https://github.com/rauenzi/BetterDiscordApp/wiki/Addon-Policies#plugins");}
|
||||
});},
|
||||
get version() {return Config.version;}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -127,4 +127,7 @@
|
|||
|
||||
.bd-qme-hidden #bd-qem-emojis {
|
||||
display: none;
|
||||
}
|
||||
.bd-em-scroller {
|
||||
height: 400px;
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import {React, WebpackModules, DiscordModules} from "modules";
|
||||
import EmoteModule from "../builtins/emotes/emotes";
|
||||
const {openContextMenu, closeContextMenu} = WebpackModules.getByProps("openContextMenu");
|
||||
const {MenuItem, MenuGroup} = WebpackModules.find(m => m.MenuRadioItem && !m.default);
|
||||
const ContextMenu = WebpackModules.getByProps("default", "MenuStyle").default;
|
||||
const {ComponentDispatch} = WebpackModules.getByProps("ComponentDispatch");
|
||||
export default class EmoteIcon extends React.Component {
|
||||
render() {
|
||||
return <div className="emote-container" onClick={this.handleOnClick.bind(this)} onContextMenu={this.handleOnContextMenu.bind(this)}>
|
||||
<img src={this.props.url} alt={this.props.emote} title={this.props.emote}/>
|
||||
</div>
|
||||
}
|
||||
handleOnClick() {
|
||||
this.insertText(this.props.emote);
|
||||
}
|
||||
handleOnContextMenu(e) {
|
||||
openContextMenu(e, () => <ContextMenu navId="EmoteContextMenu" onClose={closeContextMenu}>
|
||||
<MenuGroup>
|
||||
<MenuItem label={EmoteModule.isFavorite(this.props.emote) ? "Remove Favorite" : "Add Favorite"} id="favorite" action={this.handlefavorite.bind(this)} onClose={closeContextMenu}/>
|
||||
</MenuGroup>
|
||||
</ContextMenu>);
|
||||
}
|
||||
handlefavorite() {
|
||||
closeContextMenu();
|
||||
EmoteModule.isFavorite(this.props.emote) ? EmoteModule.removeFavorite(this.props.emote) : EmoteModule.addFavorite(this.props.emote, this.props.url);
|
||||
}
|
||||
insertText(emote) {
|
||||
ComponentDispatch.dispatchToLastSubscribed("INSERT_TEXT", {content: emote})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import {React, WebpackModules} from "modules";
|
||||
const Scroller = WebpackModules.getByDisplayName("VerticalScroller");
|
||||
export default class EmoteMenuCard extends React.Component {
|
||||
render() {
|
||||
return <div className={`bd-qem-${this.props.type}-container`}>
|
||||
<Scroller className="bd-em-scroller">
|
||||
<div className="emote-menu-inner">
|
||||
{this.props.children}
|
||||
</div>
|
||||
</Scroller>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue