mirror of
https://github.com/Vendicated/Vencord.git
synced 2024-09-20 06:30:35 +00:00
BetterQuickReact: Scrolling support
This commit is contained in:
parent
efde7bf917
commit
226555cd59
1 changed files with 29 additions and 2 deletions
|
@ -35,6 +35,11 @@ export const settings = definePluginSettings({
|
||||||
description: "Scales the buttons to 75% of their original scale, whilst increasing the inner emoji to 125% scale. Emojis will be 93.75% of the original size. Recommended to have a minimum of 5 columns",
|
description: "Scales the buttons to 75% of their original scale, whilst increasing the inner emoji to 125% scale. Emojis will be 93.75% of the original size. Recommended to have a minimum of 5 columns",
|
||||||
type: OptionType.BOOLEAN,
|
type: OptionType.BOOLEAN,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
scroll: {
|
||||||
|
description: "Enable scrolling the list of emojis",
|
||||||
|
type: OptionType.BOOLEAN,
|
||||||
|
default: true
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -58,7 +63,7 @@ export default definePlugin({
|
||||||
find: "default.Messages.ADD_REACTION_NAMED.format",
|
find: "default.Messages.ADD_REACTION_NAMED.format",
|
||||||
replacement: {
|
replacement: {
|
||||||
match: /(\i)\.length>4&&\((\i)\.length=4\);/,
|
match: /(\i)\.length>4&&\((\i)\.length=4\);/,
|
||||||
replace: "$1.length>$self.getMaxQuickReactions()&&($2.length=$self.getMaxQuickReactions());"
|
replace: "let [betterQuickReactScrollValue,setBetterQuickReactScrollValue]=Vencord.Webpack.Common.React.useState(0);betterQuickReactScrollValue;"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// Add a custom class to identify the quick reactions have been modified and a CSS variable for the number of columns to display
|
// Add a custom class to identify the quick reactions have been modified and a CSS variable for the number of columns to display
|
||||||
|
@ -69,16 +74,38 @@ export default definePlugin({
|
||||||
replace: "className:\"vc-better-quick-react \"+($self.settings.store.compactMode?\"vc-better-quick-react-compact \":\"\")+$1.wrapper,style:{\"--vc-better-quick-react-columns\":$self.settings.store.columns},"
|
replace: "className:\"vc-better-quick-react \"+($self.settings.store.compactMode?\"vc-better-quick-react-compact \":\"\")+$1.wrapper,style:{\"--vc-better-quick-react-columns\":$self.settings.store.columns},"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
find: "default.Messages.ADD_REACTION_NAMED.format",
|
||||||
|
replacement: {
|
||||||
|
match: /children:(\i)\.map\(/,
|
||||||
|
replace: "onWheel:$self.onWheelWrapper(betterQuickReactScrollValue,setBetterQuickReactScrollValue,$1.length),children:$self.applyScroll($1,betterQuickReactScrollValue).map("
|
||||||
|
}
|
||||||
|
},
|
||||||
// MenuGroup doesn't accept styles or anything special by default :/
|
// MenuGroup doesn't accept styles or anything special by default :/
|
||||||
{
|
{
|
||||||
find: "{MenuGroup:function()",
|
find: "{MenuGroup:function()",
|
||||||
replacement: {
|
replacement: {
|
||||||
match: /role:"group",/,
|
match: /role:"group",/,
|
||||||
replace: "role:\"group\",style:arguments[0].style,"
|
replace: "role:\"group\",style:arguments[0].style,onWheel:arguments[0].onWheel,"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
getMaxQuickReactions() {
|
getMaxQuickReactions() {
|
||||||
return settings.store.rows * settings.store.columns;
|
return settings.store.rows * settings.store.columns;
|
||||||
|
},
|
||||||
|
applyScroll(emojis: any[], index: number) {
|
||||||
|
return emojis.slice(index, index + this.getMaxQuickReactions());
|
||||||
|
},
|
||||||
|
onWheelWrapper(currentScrollValue: number, setScrollHook: (value: number) => void, emojisLength: number) {
|
||||||
|
if (settings.store.scroll) return (e: WheelEvent) => {
|
||||||
|
if (e.deltaY === 0 || e.shiftKey) return;
|
||||||
|
e.stopPropagation(); // does this do anything?
|
||||||
|
const modifier = e.deltaY < 0 ? -1 : 1;
|
||||||
|
const newValue = currentScrollValue + (modifier * settings.store.columns);
|
||||||
|
setScrollHook(Math.max(0, Math.min(newValue, emojisLength - this.getMaxQuickReactions())));
|
||||||
|
};
|
||||||
|
},
|
||||||
|
AddReactionsButton() {
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue