feat: DragFavoriteEmotes plugin (#614)
* feat: DragFavoriteEmotes plugin * bleh * Update index.tsx * classnames * Update index.tsx --------- Co-authored-by: thororen1234 <78185467+thororen1234@users.noreply.github.com>
This commit is contained in:
busyboxkitty
GitHub
parent
f2ce468d9f
commit
02ffe7440a
3 changed files with 196 additions and 0 deletions
163
src/equicordplugins/dragFavoriteEmotes/index.tsx
Normal file
163
src/equicordplugins/dragFavoriteEmotes/index.tsx
Normal file
|
|
@ -0,0 +1,163 @@
|
||||||
|
/*
|
||||||
|
* Vencord, a modification for Discord's desktop app
|
||||||
|
* Copyright (c) 2024 Vendicated and contributors
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import "./styles.css";
|
||||||
|
|
||||||
|
import { EquicordDevs } from "@utils/constants";
|
||||||
|
import { classNameFactory } from "@utils/css";
|
||||||
|
import { classes } from "@utils/misc";
|
||||||
|
import definePlugin from "@utils/types";
|
||||||
|
import { findByPropsLazy } from "@webpack";
|
||||||
|
import { useDrag, useDrop, useLayoutEffect, useRef, UserSettingsActionCreators } from "@webpack/common";
|
||||||
|
|
||||||
|
const UserSettingsDelay = findByPropsLazy("INFREQUENT_USER_ACTION");
|
||||||
|
const imgCls = findByPropsLazy("image", "imageLoading");
|
||||||
|
const dndCls = findByPropsLazy("wrapper", "target", "dragOver");
|
||||||
|
|
||||||
|
const cl = classNameFactory("vc-drag-favorite-emotes-");
|
||||||
|
|
||||||
|
type EmojiData = {
|
||||||
|
uniqueName: string | undefined;
|
||||||
|
id: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type EmojiDescriptor = {
|
||||||
|
category: string;
|
||||||
|
emoji: EmojiData;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default definePlugin({
|
||||||
|
name: "DragFavoriteEmotes",
|
||||||
|
authors: [EquicordDevs.PWall],
|
||||||
|
description: "Adds the ability to change the order of your favourite emotes",
|
||||||
|
patches: [
|
||||||
|
{
|
||||||
|
find: "#{intl::EMOJI_FAVORITE_TOOLTIP}",
|
||||||
|
replacement: [
|
||||||
|
{
|
||||||
|
match: /(ref:\i,children:)(\(0,\i.jsx\)\(\i.\i)/,
|
||||||
|
replace: "$1arguments[0]?.collected?.isDragging?$self.dragItem():$2",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
match: /\[(\i\.emojiItemSelected)\]/,
|
||||||
|
replace: '[arguments[0].collected.isDragging?"":$1]',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
match: /(\[\i,\i\]=\i\.useState\(""\))/,
|
||||||
|
replace: "$1,[collected,drag]=$self.drag(arguments[0])",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
match: /(onFocus".{0,50}\(\i,{ref:)(\i),/,
|
||||||
|
replace: '$1arguments[0]?.descriptor?.emoji?.category==="FAVORITES"?drag:$2,collected:collected,',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
match: /(,\{key:\i,ref:\i)(?=\}\),)/,
|
||||||
|
replace: '$1,style:{position:"relative"}',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
match: /(delay:200,children:)(\i)/,
|
||||||
|
replace: "$1[$2,$self.wrapper(arguments[0]?.descriptor?.emoji)]",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
match: /(delay:200,children:.{0,100}\}\):)(\i)\)/,
|
||||||
|
replace: "$1[$2,$self.wrapper(arguments[0]?.descriptor?.emoji)])",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
drag(e: { descriptor: EmojiDescriptor; }) {
|
||||||
|
return useDrag(
|
||||||
|
() => ({
|
||||||
|
type: "emoji",
|
||||||
|
collect: monitor => ({
|
||||||
|
isDragging: !!monitor.isDragging(),
|
||||||
|
}),
|
||||||
|
canDrag: () => (e?.descriptor?.category === "FAVORITES"),
|
||||||
|
item: { id: e?.descriptor?.emoji?.uniqueName ?? e?.descriptor?.emoji?.id }
|
||||||
|
}),
|
||||||
|
[e?.descriptor],);
|
||||||
|
},
|
||||||
|
drop({ emoji, category }: EmojiDescriptor) {
|
||||||
|
return useDrop(() => ({
|
||||||
|
accept: "emoji",
|
||||||
|
canDrop() {
|
||||||
|
return category === "FAVORITES";
|
||||||
|
},
|
||||||
|
collect: monitor => ({
|
||||||
|
canDrop: !!monitor.canDrop(),
|
||||||
|
isOver: !!monitor.isOver(),
|
||||||
|
}),
|
||||||
|
drop(item: { id: string; }) {
|
||||||
|
const source = item.id;
|
||||||
|
const target = emoji?.uniqueName ?? emoji?.id;
|
||||||
|
function update(this: { source: string; target: string; }, e: { emojis: string[]; }) {
|
||||||
|
if (this.source === this.target) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const sourceIndex = e.emojis.findIndex(emoji => emoji === this.source);
|
||||||
|
const targetIndex = e.emojis.findIndex(emoji => emoji === this.target);
|
||||||
|
// Adjust final index to account for removal of source emoji
|
||||||
|
const finalIndex = targetIndex < sourceIndex ? targetIndex : targetIndex - 1;
|
||||||
|
if (sourceIndex === finalIndex) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
e.emojis.splice(sourceIndex, 1);
|
||||||
|
e.emojis.splice(finalIndex, 0, this.source);
|
||||||
|
}
|
||||||
|
UserSettingsActionCreators.FrecencyUserSettingsActionCreators.updateAsync("favoriteEmojis", update.bind({ source, target }), UserSettingsDelay.INFREQUENT_USER_ACTION);
|
||||||
|
}
|
||||||
|
}), [emoji]);
|
||||||
|
},
|
||||||
|
dragItem() {
|
||||||
|
return (
|
||||||
|
<span className={classes(cl("item"), imgCls.imageLoading)} />
|
||||||
|
);
|
||||||
|
},
|
||||||
|
wrapper(emoji: EmojiDescriptor) {
|
||||||
|
const [collected, drop] = this.drop(emoji);
|
||||||
|
const ref: React.RefObject<null | HTMLElement> = useRef(null);
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
if (emoji?.category !== "FAVORITES") return;
|
||||||
|
const frame = requestAnimationFrame(() => {
|
||||||
|
if (!ref.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (collected.canDrop) {
|
||||||
|
ref.current.classList.add(dndCls.autoPointerEvents);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
ref.current.classList.remove(dndCls.autoPointerEvents);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return () => cancelAnimationFrame(frame);
|
||||||
|
}, [collected, ref]);
|
||||||
|
|
||||||
|
if (emoji?.category !== "FAVORITES") return;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes(cl("wrapper"), dndCls.wrapper)} aria-hidden="true">
|
||||||
|
<div className={classes(collected.isOver ? cl("indicator") : "", dndCls.target)}
|
||||||
|
ref={e => {
|
||||||
|
ref.current = e;
|
||||||
|
drop(e);
|
||||||
|
}}>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
25
src/equicordplugins/dragFavoriteEmotes/styles.css
Normal file
25
src/equicordplugins/dragFavoriteEmotes/styles.css
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
.vc-drag-favorite-emotes-indicator::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
top: 4px;
|
||||||
|
right: 0;
|
||||||
|
left: 2px;
|
||||||
|
height: calc(100% - (var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2));
|
||||||
|
width: 4px;
|
||||||
|
transform: translateX(-4px);
|
||||||
|
background-color: var(--green-360);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-drag-favorite-emotes-wrapper {
|
||||||
|
inset: 0;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vc-drag-favorite-emotes-item {
|
||||||
|
background-size: 40px;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
@ -1233,6 +1233,14 @@ export const EquicordDevs = Object.freeze({
|
||||||
name: "Key",
|
name: "Key",
|
||||||
id: 1230319937155760131n
|
id: 1230319937155760131n
|
||||||
},
|
},
|
||||||
|
PWall: {
|
||||||
|
name: "PWall",
|
||||||
|
id: 0n
|
||||||
|
},
|
||||||
|
busyboxkitty: {
|
||||||
|
name: "busyboxkitty",
|
||||||
|
id: 1312185484159483948n
|
||||||
|
},
|
||||||
} satisfies Record<string, Dev>);
|
} satisfies Record<string, Dev>);
|
||||||
|
|
||||||
// iife so #__PURE__ works correctly
|
// iife so #__PURE__ works correctly
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue