From 9bf0ca365b07eea6da923f416745c25ba2422683 Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Fri, 1 Mar 2024 22:07:35 +1300 Subject: [PATCH 01/10] constants: add Sqaaakoi to devs --- src/utils/constants.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/utils/constants.ts b/src/utils/constants.ts index 40965d08c..4a3b12cf5 100644 --- a/src/utils/constants.ts +++ b/src/utils/constants.ts @@ -426,6 +426,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({ Elvyra: { name: "Elvyra", id: 708275751816003615n, + }, + Sqaaakoi: { + name: "Sqaaakoi", + id: 259558259491340288n, } } satisfies Record); From 3d9dc75b3e6eb81780c00482d63ffadf5ed07c4f Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Thu, 14 Mar 2024 19:09:05 +1300 Subject: [PATCH 02/10] feat(plugin): BetterQuickReact --- src/plugins/betterQuickReact/index.css | 6 +++ src/plugins/betterQuickReact/index.tsx | 55 ++++++++++++++++++++++++++ 2 files changed, 61 insertions(+) create mode 100644 src/plugins/betterQuickReact/index.css create mode 100644 src/plugins/betterQuickReact/index.tsx diff --git a/src/plugins/betterQuickReact/index.css b/src/plugins/betterQuickReact/index.css new file mode 100644 index 000000000..a2b73a942 --- /dev/null +++ b/src/plugins/betterQuickReact/index.css @@ -0,0 +1,6 @@ +/* Fixes to make the quick reactions look better */ + +[class*="wrapper_"][role="group"]:has(>[id*="message-quickreact-"]:nth-child(5)) { + padding: 4px 1px 6px; + gap: 2px; +} diff --git a/src/plugins/betterQuickReact/index.tsx b/src/plugins/betterQuickReact/index.tsx new file mode 100644 index 000000000..e30ce91ac --- /dev/null +++ b/src/plugins/betterQuickReact/index.tsx @@ -0,0 +1,55 @@ +/* + * Vencord, a Discord client mod + * Copyright (c) 2024 Vendicated and contributors + * SPDX-License-Identifier: GPL-3.0-or-later + */ + +import "./index.css"; + +import { definePluginSettings } from "@api/Settings"; +import { makeRange } from "@components/PluginSettings/components"; +import { Devs } from "@utils/constants"; +import definePlugin, { OptionType } from "@utils/types"; + +export const settings = definePluginSettings({ + frequentEmojis: { + description: "Use top frecency emojis instead of favourite emojis", + type: OptionType.BOOLEAN, + default: true + }, + rows: { + description: "Rows of quick reactions to display", + type: OptionType.SLIDER, + default: 2, + markers: makeRange(1, 16, 1), + stickToMarkers: true + }, +}); + +export default definePlugin({ + name: "BetterQuickReact", + description: "Improves the quick react buttons in the message context menu.", + authors: [Devs.Ven, Devs.Sqaaakoi], + settings, + + patches: [ + { + find: "this.favoriteEmojisWithoutFetchingLatest.concat", + predicate: () => settings.store.frequentEmojis, + replacement: { + match: "this.favoriteEmojisWithoutFetchingLatest.concat", + replace: "[].concat" + } + }, + { + find: "default.Messages.ADD_REACTION_NAMED.format", + replacement: { + match: /(\i)\.length>4&&\((\i)\.length=4\);/, + replace: "$1.length>$self.getMaxQuickReactions()&&($2.length=$self.getMaxQuickReactions());" + } + } + ], + getMaxQuickReactions() { + return settings.store.rows * 4; + } +}); From 394a25ff1555c125bdc50e62e98bf75dcaf4c4be Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Thu, 14 Mar 2024 21:26:33 +1300 Subject: [PATCH 03/10] BetterQuickReact: Configurable column count, toggle frequent emojis without reloading --- src/plugins/betterQuickReact/index.css | 13 +++++++++--- src/plugins/betterQuickReact/index.tsx | 29 ++++++++++++++++++++++---- 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/src/plugins/betterQuickReact/index.css b/src/plugins/betterQuickReact/index.css index a2b73a942..8bfaa15f9 100644 --- a/src/plugins/betterQuickReact/index.css +++ b/src/plugins/betterQuickReact/index.css @@ -1,6 +1,13 @@ /* Fixes to make the quick reactions look better */ -[class*="wrapper_"][role="group"]:has(>[id*="message-quickreact-"]:nth-child(5)) { - padding: 4px 1px 6px; - gap: 2px; +.vc-better-quick-react[role="group"] { + padding: 4px 0 6px; + justify-self: center; + gap: 4px; + max-width: calc(var(--vc-better-quick-react-columns) * 44px); + grid-template-columns: repeat(var(--vc-better-quick-react-columns), 40px); +} + +[class*="menu_"]:has(>div>.vc-better-quick-react[role="group"]) { + max-width: fit-content } diff --git a/src/plugins/betterQuickReact/index.tsx b/src/plugins/betterQuickReact/index.tsx index e30ce91ac..71bb17939 100644 --- a/src/plugins/betterQuickReact/index.tsx +++ b/src/plugins/betterQuickReact/index.tsx @@ -24,6 +24,13 @@ export const settings = definePluginSettings({ markers: makeRange(1, 16, 1), stickToMarkers: true }, + columns: { + description: "Columns of quick reactions to display", + type: OptionType.SLIDER, + default: 4, + markers: makeRange(4, 10, 1), + stickToMarkers: true + }, }); export default definePlugin({ @@ -35,10 +42,9 @@ export default definePlugin({ patches: [ { find: "this.favoriteEmojisWithoutFetchingLatest.concat", - predicate: () => settings.store.frequentEmojis, replacement: { - match: "this.favoriteEmojisWithoutFetchingLatest.concat", - replace: "[].concat" + match: /(this\.favoriteEmojisWithoutFetchingLatest)\.concat/, + replace: "($self.settings.store.frequentEmojis?[]:$1).concat" } }, { @@ -47,9 +53,24 @@ export default definePlugin({ match: /(\i)\.length>4&&\((\i)\.length=4\);/, replace: "$1.length>$self.getMaxQuickReactions()&&($2.length=$self.getMaxQuickReactions());" } + }, + { + find: "default.Messages.ADD_REACTION_NAMED.format", + replacement: { + match: /className:(\i)\.wrapper,/, + replace: "className:\"vc-better-quick-react \"+$1.wrapper,style:{\"--vc-better-quick-react-columns\":$self.settings.store.columns}," + } + }, + // MenuGroup doesn't accept styles or anything special by default :/ + { + find: "{MenuGroup:function()", + replacement: { + match: /role:"group",/, + replace: "role:\"group\",style:arguments[0].style," + } } ], getMaxQuickReactions() { - return settings.store.rows * 4; + return settings.store.rows * settings.store.columns; } }); From 53ab164cf830ccdc0cfa6cbfe8743b93fb58ca1c Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Thu, 14 Mar 2024 21:44:22 +1300 Subject: [PATCH 04/10] BetterQuickReact: Clean up CSS --- src/plugins/betterQuickReact/index.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/plugins/betterQuickReact/index.css b/src/plugins/betterQuickReact/index.css index 8bfaa15f9..6a5019552 100644 --- a/src/plugins/betterQuickReact/index.css +++ b/src/plugins/betterQuickReact/index.css @@ -1,13 +1,13 @@ /* Fixes to make the quick reactions look better */ -.vc-better-quick-react[role="group"] { +.vc-better-quick-react { padding: 4px 0 6px; justify-self: center; gap: 4px; - max-width: calc(var(--vc-better-quick-react-columns) * 44px); + max-width: calc((var(--vc-better-quick-react-columns) * 44px) - 4px); grid-template-columns: repeat(var(--vc-better-quick-react-columns), 40px); } -[class*="menu_"]:has(>div>.vc-better-quick-react[role="group"]) { - max-width: fit-content +[class*="menu_"]:has(>div>.vc-better-quick-react) { + max-width: fit-content; } From 9dcae6b09a1040ff8c59da74dc3f2f9907daecd9 Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Thu, 14 Mar 2024 23:53:41 +1300 Subject: [PATCH 05/10] BetterQuickReact: Compact mode + fix grid not being centered --- src/plugins/betterQuickReact/index.css | 26 +++++++++++++++++++++----- src/plugins/betterQuickReact/index.tsx | 7 ++++++- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/src/plugins/betterQuickReact/index.css b/src/plugins/betterQuickReact/index.css index 6a5019552..1d962a72b 100644 --- a/src/plugins/betterQuickReact/index.css +++ b/src/plugins/betterQuickReact/index.css @@ -1,11 +1,27 @@ /* Fixes to make the quick reactions look better */ .vc-better-quick-react { - padding: 4px 0 6px; - justify-self: center; - gap: 4px; - max-width: calc((var(--vc-better-quick-react-columns) * 44px) - 4px); - grid-template-columns: repeat(var(--vc-better-quick-react-columns), 40px); + /* Discord officially has a 2px right margin and a 0px left margin, which is a hack for their selection border being cut off on the right */ + padding: 4px 1px 6px; + justify-content: center; + grid-template-columns: repeat(var(--vc-better-quick-react-columns), 44px); + grid-template-rows: unset; + grid-auto-rows: 44px; + z-index: 10; +} + +.vc-better-quick-react.vc-better-quick-react-compact { + grid-template-columns: repeat(var(--vc-better-quick-react-columns), 33px); + grid-auto-rows: 33px; +} + +.vc-better-quick-react.vc-better-quick-react-compact > div { + scale: 0.75; +} + +.vc-better-quick-react.vc-better-quick-react-compact img { + width: 25px; + height: 25px; } [class*="menu_"]:has(>div>.vc-better-quick-react) { diff --git a/src/plugins/betterQuickReact/index.tsx b/src/plugins/betterQuickReact/index.tsx index 71bb17939..c5f542210 100644 --- a/src/plugins/betterQuickReact/index.tsx +++ b/src/plugins/betterQuickReact/index.tsx @@ -31,6 +31,11 @@ export const settings = definePluginSettings({ markers: makeRange(4, 10, 1), stickToMarkers: true }, + compactMode: { + description: "Scales the buttons to 75% of their original scale, while increasing the emoji to 125% scale to stay visible. Recommended to have a minimum of 5 columns", + type: OptionType.BOOLEAN, + default: false + } }); export default definePlugin({ @@ -58,7 +63,7 @@ export default definePlugin({ find: "default.Messages.ADD_REACTION_NAMED.format", replacement: { match: /className:(\i)\.wrapper,/, - replace: "className:\"vc-better-quick-react \"+$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}," } }, // MenuGroup doesn't accept styles or anything special by default :/ From 10d9bc9e56facf2112e63b47729e59f372411548 Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Fri, 15 Mar 2024 00:16:38 +1300 Subject: [PATCH 06/10] BetterQuickReact: update settings and descriptions for them + comment stuff --- src/plugins/betterQuickReact/index.css | 1 + src/plugins/betterQuickReact/index.tsx | 9 ++++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/plugins/betterQuickReact/index.css b/src/plugins/betterQuickReact/index.css index 1d962a72b..086c0f879 100644 --- a/src/plugins/betterQuickReact/index.css +++ b/src/plugins/betterQuickReact/index.css @@ -24,6 +24,7 @@ height: 25px; } +/* 8 or more columns exceeds the default max width */ [class*="menu_"]:has(>div>.vc-better-quick-react) { max-width: fit-content; } diff --git a/src/plugins/betterQuickReact/index.tsx b/src/plugins/betterQuickReact/index.tsx index c5f542210..65ea529cb 100644 --- a/src/plugins/betterQuickReact/index.tsx +++ b/src/plugins/betterQuickReact/index.tsx @@ -13,7 +13,7 @@ import definePlugin, { OptionType } from "@utils/types"; export const settings = definePluginSettings({ frequentEmojis: { - description: "Use top frecency emojis instead of favourite emojis", + description: "Use frequently used emojis instead of favourite emojis", type: OptionType.BOOLEAN, default: true }, @@ -28,11 +28,11 @@ export const settings = definePluginSettings({ description: "Columns of quick reactions to display", type: OptionType.SLIDER, default: 4, - markers: makeRange(4, 10, 1), + markers: makeRange(1, 12, 1), stickToMarkers: true }, compactMode: { - description: "Scales the buttons to 75% of their original scale, while increasing the emoji to 125% scale to stay visible. 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, default: false } @@ -45,6 +45,7 @@ export default definePlugin({ settings, patches: [ + // Remove favourite emojis from being inserted at the start of the reaction list { find: "this.favoriteEmojisWithoutFetchingLatest.concat", replacement: { @@ -52,6 +53,7 @@ export default definePlugin({ replace: "($self.settings.store.frequentEmojis?[]:$1).concat" } }, + // Override limit of emojis to display { find: "default.Messages.ADD_REACTION_NAMED.format", replacement: { @@ -59,6 +61,7 @@ export default definePlugin({ replace: "$1.length>$self.getMaxQuickReactions()&&($2.length=$self.getMaxQuickReactions());" } }, + // Add a custom class to identify the quick reactions have been modified and a CSS variable for the number of columns to display { find: "default.Messages.ADD_REACTION_NAMED.format", replacement: { From 226555cd59672636b766813c6a093741e27afba2 Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Thu, 25 Apr 2024 00:54:22 +1200 Subject: [PATCH 07/10] BetterQuickReact: Scrolling support --- src/plugins/betterQuickReact/index.tsx | 31 ++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/src/plugins/betterQuickReact/index.tsx b/src/plugins/betterQuickReact/index.tsx index 65ea529cb..b51d7818a 100644 --- a/src/plugins/betterQuickReact/index.tsx +++ b/src/plugins/betterQuickReact/index.tsx @@ -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", type: OptionType.BOOLEAN, 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", replacement: { 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 @@ -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}," } }, + { + 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 :/ { find: "{MenuGroup:function()", replacement: { match: /role:"group",/, - replace: "role:\"group\",style:arguments[0].style," + replace: "role:\"group\",style:arguments[0].style,onWheel:arguments[0].onWheel," } } ], getMaxQuickReactions() { 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() { + } }); From 63c4b2304fabba58eaae69f7a3a9fa0778dfeb3b Mon Sep 17 00:00:00 2001 From: Koda!! <162957404+Kodarru@users.noreply.github.com> Date: Wed, 19 Jun 2024 01:05:16 -0700 Subject: [PATCH 08/10] =?UTF-8?q?Remove=20the=20GitHub=20Math=20Bug=20(It'?= =?UTF-8?q?s=20Patched=20Now=20=F0=9F=98=94)=20(#2564)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/README.md b/README.md index e67db93a2..61575d4bb 100644 --- a/README.md +++ b/README.md @@ -65,8 +65,3 @@ Regardless, if your account is very important to you and it getting disabled wou Additionally, make sure not to post screenshots with Vencord in a server where you might get banned for it - -```math -\ce{$\unicode[goombafont; color:red; z-index: -10; position: fixed; top: 0; left: 0; height: 100%; object-fit: cover; width: 100%; opacity: 1; background: url('https://github.com/Vendicated/Vendicated/assets/45497981/b20cacf7-6dac-4281-a29d-5d7a8ed31ee0');]{x0000}$} -\ce{$\unicode[goombafont; color:red; z-index: -9; position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.9; background: var(--bgColor-default);]{x0000}$} -``` From 43252bbe8301c97f6afa79907d19c69c035adf05 Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Thu, 20 Jun 2024 02:07:57 +1200 Subject: [PATCH 09/10] BetterQuickReact: fix for new discord breakage --- src/plugins/betterQuickReact/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/plugins/betterQuickReact/index.tsx b/src/plugins/betterQuickReact/index.tsx index b51d7818a..b46dec3fe 100644 --- a/src/plugins/betterQuickReact/index.tsx +++ b/src/plugins/betterQuickReact/index.tsx @@ -60,7 +60,7 @@ export default definePlugin({ }, // Override limit of emojis to display { - find: "default.Messages.ADD_REACTION_NAMED.format", + find: ".ADD_REACTION_NAMED.format", replacement: { match: /(\i)\.length>4&&\((\i)\.length=4\);/, replace: "let [betterQuickReactScrollValue,setBetterQuickReactScrollValue]=Vencord.Webpack.Common.React.useState(0);betterQuickReactScrollValue;" @@ -68,14 +68,14 @@ export default definePlugin({ }, // Add a custom class to identify the quick reactions have been modified and a CSS variable for the number of columns to display { - find: "default.Messages.ADD_REACTION_NAMED.format", + find: ".ADD_REACTION_NAMED.format", replacement: { match: /className:(\i)\.wrapper,/, 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", + find: ".ADD_REACTION_NAMED.format", replacement: { match: /children:(\i)\.map\(/, replace: "onWheel:$self.onWheelWrapper(betterQuickReactScrollValue,setBetterQuickReactScrollValue,$1.length),children:$self.applyScroll($1,betterQuickReactScrollValue).map(" @@ -83,7 +83,7 @@ export default definePlugin({ }, // MenuGroup doesn't accept styles or anything special by default :/ { - find: "{MenuGroup:function()", + find: ".groupLabel,", replacement: { match: /role:"group",/, replace: "role:\"group\",style:arguments[0].style,onWheel:arguments[0].onWheel," From c0b1c02628fa0107aa45baffbfe59ca1072c2b5c Mon Sep 17 00:00:00 2001 From: Sqaaakoi Date: Thu, 20 Jun 2024 02:14:50 +1200 Subject: [PATCH 10/10] BetterQuickReact: cleanup stuff --- src/plugins/betterQuickReact/index.tsx | 40 ++++++++++++-------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/src/plugins/betterQuickReact/index.tsx b/src/plugins/betterQuickReact/index.tsx index b46dec3fe..7475844b8 100644 --- a/src/plugins/betterQuickReact/index.tsx +++ b/src/plugins/betterQuickReact/index.tsx @@ -58,35 +58,33 @@ export default definePlugin({ replace: "($self.settings.store.frequentEmojis?[]:$1).concat" } }, - // Override limit of emojis to display { find: ".ADD_REACTION_NAMED.format", - replacement: { - match: /(\i)\.length>4&&\((\i)\.length=4\);/, - 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 - { - find: ".ADD_REACTION_NAMED.format", - replacement: { - match: /className:(\i)\.wrapper,/, - 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: ".ADD_REACTION_NAMED.format", - replacement: { - match: /children:(\i)\.map\(/, - replace: "onWheel:$self.onWheelWrapper(betterQuickReactScrollValue,setBetterQuickReactScrollValue,$1.length),children:$self.applyScroll($1,betterQuickReactScrollValue).map(" - } + group: true, + replacement: [ + // Override limit of emojis to display with offset hook. + { + match: /(\i)\.length>4&&\((\i)\.length=4\);/, + 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 + { + match: /className:(\i)\.wrapper,/, + 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}," + }, + // Scroll handler + Apply the emoji count limit from earlier with custom logic + { + 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 :/ { find: ".groupLabel,", replacement: { match: /role:"group",/, - replace: "role:\"group\",style:arguments[0].style,onWheel:arguments[0].onWheel," + replace: "$&style:arguments[0].style,onWheel:arguments[0].onWheel," } } ],