schoolbox web extension :)
refactor: storage
+104
-124
+2
-2
src/entrypoints/plugins/subheader.ts
+2
-2
src/entrypoints/plugins/subheader.ts
···
1
1
export default function init() {
2
2
defineStPlugin(
3
3
"subheader",
4
-
(_id, data) => {
4
+
(_id, data, settings) => {
5
5
const style = document.createElement("style");
6
6
style.classList = "schooltape";
7
7
style.innerHTML = `
···
60
60
if (!periodLink) {
61
61
periodLink = document.createElement("a");
62
62
63
-
const openInNewTab = (await data.settings?.toggle?.openInNewTab?.toggle.storage.getValue())?.toggle;
63
+
const openInNewTab = settings.openInNewTab.state.storage.getValue().toggle;
64
64
periodLink.target = openInNewTab ? "_blank" : "_self";
65
65
periodSpan.appendChild(periodLink);
66
66
}
+85
-95
src/utils/storage.ts
+85
-95
src/utils/storage.ts
···
68
68
name: string,
69
69
description: string,
70
70
fallbackToggle: boolean,
71
-
settings?: Types.PluginSettings,
71
+
settings?: Record<string, Types.PluginSetting>,
72
72
) {
73
73
const plugin: Types.PluginData = {
74
74
toggle: new StorageState(
75
-
storage.defineItem<Types.ItemGeneric>(`local:plugin-${id}`, {
75
+
storage.defineItem<Types.ToggleState>(`local:plugin-${id}`, {
76
76
fallback: {
77
77
toggle: fallbackToggle,
78
78
},
···
92
92
return plugin;
93
93
}
94
94
95
+
function pluginToggle(
96
+
pluginId: string,
97
+
settingId: string,
98
+
name: string,
99
+
description: string,
100
+
fallback: boolean,
101
+
): Types.PluginSetting {
102
+
return {
103
+
type: "toggle",
104
+
state: new StorageState(
105
+
storage.defineItem<Types.ToggleState>(`local:${pluginId}-${settingId}`, {
106
+
fallback: { toggle: fallback },
107
+
}),
108
+
),
109
+
info: { name, description },
110
+
};
111
+
}
112
+
113
+
export function pluginSlider(
114
+
pluginId: string,
115
+
settingId: string,
116
+
name: string,
117
+
description: string,
118
+
min: number,
119
+
max: number,
120
+
fallback: number,
121
+
): Types.PluginSetting {
122
+
return {
123
+
type: "slider",
124
+
state: new StorageState(
125
+
storage.defineItem<Types.SliderState>(`local:${pluginId}-${settingId}`, {
126
+
fallback: { value: fallback, min, max },
127
+
}),
128
+
),
129
+
info: { name, description },
130
+
};
131
+
}
132
+
95
133
export const plugins: Record<Types.PluginId, Types.PluginData> = {
96
134
subheader: createPlugin(
97
135
"subheader",
···
99
137
"Adds a clock and current period info to the subheader.",
100
138
true,
101
139
{
102
-
toggle: {
103
-
openInNewTab: {
104
-
toggle: new StorageState(
105
-
storage.defineItem<Types.ToggleSetting>("local:plugin-subheaderRevamp-openInNewTab", {
106
-
fallback: {
107
-
toggle: true,
108
-
},
109
-
}),
110
-
),
111
-
info: {
112
-
name: "Open links in new tab",
113
-
description: "Whether to open the class link in a new tab."
114
-
}
115
-
},
116
-
},
140
+
openInNewTab: pluginToggle(
141
+
"subheaderRevamp",
142
+
"openInNewTab",
143
+
"Open links in new tab",
144
+
"Whether to open the class link in a new tab.",
145
+
true,
146
+
),
117
147
},
118
148
),
119
149
···
125
155
),
126
156
127
157
scrollPeriod: createPlugin("scrollPeriod", "Scroll Period", "Scrolls to the current period on the timetable.", true, {
128
-
toggle: {
129
-
resetCooldownOnMouseMove: {
130
-
toggle: new StorageState(
131
-
storage.defineItem<Types.ToggleSetting>("local:plugin-scrollPeriod-resetCooldownOnMouseMove", {
132
-
fallback: {
133
-
toggle: true,
134
-
},
135
-
}),
136
-
),
137
-
info: {
138
-
name: "Reset on mouse move",
139
-
description: "Whether to reset the scrolling cooldown when you move your mouse.",
140
-
},
141
-
},
142
-
},
143
-
slider: {
144
-
cooldownDuration: {
145
-
slider: new StorageState(
146
-
storage.defineItem<Types.SliderSetting>("local:plugin-scrollPeriod-cooldownDuration", {
147
-
fallback: {
148
-
min: 1,
149
-
max: 60,
150
-
value: 10,
151
-
},
152
-
}),
153
-
),
154
-
info: {
155
-
name: "Cooldown duration (s)",
156
-
description: "How long to wait before scrolling.",
157
-
},
158
-
},
159
-
},
158
+
resetCooldownOnMouseMove: pluginToggle(
159
+
"scrollPeriod",
160
+
"resetCooldownOnMouseMove",
161
+
"Reset on mouse move",
162
+
"Whether to reset the scrolling cooldown when you move your mouse.",
163
+
true,
164
+
),
165
+
cooldownDuration: pluginSlider(
166
+
"scrollPeriod",
167
+
"cooldownDuration",
168
+
"Cooldown duration (s)",
169
+
"How long to wait before scrolling.",
170
+
1,
171
+
60,
172
+
10,
173
+
),
160
174
}),
161
175
162
176
progressBar: createPlugin(
···
167
181
),
168
182
169
183
modernIcons: createPlugin("modernIcons", "Modern Icons", "Modernise the icons across Schoolbox.", true, {
170
-
toggle: {
171
-
filled: {
172
-
toggle: new StorageState(
173
-
storage.defineItem<Types.ToggleSetting>("local:plugin-modernIcons-filled", {
174
-
fallback: {
175
-
toggle: true,
176
-
},
177
-
}),
178
-
),
179
-
info: {
180
-
name: "Filled Icons",
181
-
description: "Whether the icons should be filled or outlined.",
182
-
},
183
-
},
184
-
},
184
+
filled: pluginToggle(
185
+
"modernIcons",
186
+
"filled",
187
+
"Filled Icons",
188
+
"Whether the icons should be filled or outlined.",
189
+
true,
190
+
),
185
191
}),
186
192
187
193
tabTitle: createPlugin("tabTitle", "Better Tab Titles", "Improves the tab titles for easier navigation.", true, {
188
-
toggle: {
189
-
showSubjectPrefix: {
190
-
toggle: new StorageState(
191
-
storage.defineItem<Types.ToggleSetting>("local:plugin-tabTitle-showSubjectPrefix", {
192
-
fallback: {
193
-
toggle: true,
194
-
},
195
-
}),
196
-
),
197
-
info: {
198
-
name: "Show subject prefix",
199
-
description: `e.g. "ENG - VCE English 1 & 2" becomes "VCE English 1 & 2"`,
200
-
},
201
-
},
202
-
},
194
+
showSubjectPrefix: pluginToggle(
195
+
"tabTitle",
196
+
"showSubjectPrefix",
197
+
"Show subject prefix",
198
+
`e.g. "ENG - VCE English 1 & 2" becomes "VCE English 1 & 2"`,
199
+
true,
200
+
),
203
201
}),
204
202
205
203
homepageSwitcher: createPlugin(
···
208
206
"The logo will switch to existing Schoolbox homepage when available.",
209
207
true,
210
208
{
211
-
toggle: {
212
-
closeCurrentTab: {
213
-
toggle: new StorageState(
214
-
storage.defineItem<Types.ToggleSetting>("local:plugin-homepageSwitcher-closeCurrentTab", {
215
-
fallback: {
216
-
toggle: false,
217
-
},
218
-
}),
219
-
),
220
-
info: {
221
-
name: "Close current tab",
222
-
description: "When switching to another tab, close the current one.",
223
-
},
224
-
},
225
-
},
209
+
closeCurrentTab: pluginToggle(
210
+
"homepageSwitcher",
211
+
"closeCurrentTab",
212
+
"Close current tab",
213
+
"When switching to another tab, close the current one.",
214
+
false,
215
+
),
226
216
},
227
217
),
228
218
};
···
231
221
function createSnippet(id: string, name: string, description: string, fallbackToggle: boolean) {
232
222
return {
233
223
toggle: new StorageState(
234
-
storage.defineItem<Types.ItemGeneric>(`local:snippet-${id}`, {
224
+
storage.defineItem<Types.ToggleState>(`local:snippet-${id}`, {
235
225
fallback: {
236
226
toggle: fallbackToggle,
237
227
},
+17
-27
src/utils/types.ts
+17
-27
src/utils/types.ts
···
44
44
}
45
45
46
46
// Common for plugins and snippets
47
-
export interface ItemGeneric {
48
-
toggle: boolean;
49
-
}
50
47
export interface ItemInfo {
51
48
name: string;
52
49
description: string;
53
-
}
54
-
export type ItemId = PluginId | SnippetId;
55
-
export interface PopulatedItem<T> extends ItemGeneric, ItemInfo {
56
-
id: T;
57
50
}
58
51
59
52
// Plugins
···
66
59
| "tabTitle"
67
60
| "homepageSwitcher";
68
61
69
-
type ToggleData = {
70
-
toggle: StorageState<ToggleSetting>;
62
+
export type ToggleState = { toggle: boolean };
63
+
type Toggle = {
64
+
type: "toggle";
65
+
state: StorageState<ToggleState>;
71
66
info: ItemInfo;
72
67
};
73
-
type SliderData = {
74
-
slider: StorageState<SliderSetting>;
68
+
69
+
export type SliderState = {
70
+
value: number;
71
+
min: number;
72
+
max: number;
73
+
};
74
+
type Slider = {
75
+
type: "slider";
76
+
state: StorageState<SliderState>;
75
77
info: ItemInfo;
76
78
};
79
+
export type PluginSetting = Toggle | Slider;
77
80
78
-
export type PluginSettings = {
79
-
toggle?: Record<string, ToggleData>;
80
-
slider?: Record<string, SliderData>;
81
-
};
82
81
export type PluginData = {
83
-
toggle: StorageState<ToggleSetting>;
82
+
toggle: StorageState<ToggleState>;
84
83
info: ItemInfo;
85
-
settings?: PluginSettings;
84
+
settings?: Record<string, PluginSetting>;
86
85
};
87
86
88
87
// Snippets
89
88
export type SnippetId = "roundedCorners" | "hidePfp" | "hidePwaPrompt" | "censor";
90
89
91
90
export type SnippetData = {
92
-
toggle: StorageState<ToggleSetting>;
91
+
toggle: StorageState<ToggleState>;
93
92
info: ItemInfo;
94
93
};
95
-
96
-
export interface ToggleSetting {
97
-
toggle: boolean;
98
-
}
99
-
export interface SliderSetting {
100
-
min: number;
101
-
max: number;
102
-
value: number;
103
-
}