diff options
-rw-r--r-- | src/webview/lib/RecipeWebview.js | 11 | ||||
-rw-r--r-- | src/webview/recipe.js | 48 |
2 files changed, 56 insertions, 3 deletions
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js index 1d24326c5..4fac21c55 100644 --- a/src/webview/lib/RecipeWebview.js +++ b/src/webview/lib/RecipeWebview.js | |||
@@ -19,6 +19,8 @@ class RecipeWebview { | |||
19 | 19 | ||
20 | loopFunc = () => null; | 20 | loopFunc = () => null; |
21 | 21 | ||
22 | darkModeHandler = false; | ||
23 | |||
22 | /** | 24 | /** |
23 | * Initialize the loop | 25 | * Initialize the loop |
24 | * | 26 | * |
@@ -80,6 +82,15 @@ class RecipeWebview { | |||
80 | }); | 82 | }); |
81 | } | 83 | } |
82 | 84 | ||
85 | /** | ||
86 | * Set a custom handler for turning on and off dark mode | ||
87 | * | ||
88 | * @param {function} handler | ||
89 | */ | ||
90 | handleDarkMode(handler) { | ||
91 | this.darkModeHandler = handler; | ||
92 | } | ||
93 | |||
83 | onNotify(fn) { | 94 | onNotify(fn) { |
84 | if (typeof fn === 'function') { | 95 | if (typeof fn === 'function') { |
85 | window.Notification.prototype.onNotify = fn; | 96 | window.Notification.prototype.onNotify = fn; |
diff --git a/src/webview/recipe.js b/src/webview/recipe.js index 79392e20e..bad5a93b2 100644 --- a/src/webview/recipe.js +++ b/src/webview/recipe.js | |||
@@ -53,6 +53,10 @@ class RecipeController { | |||
53 | 53 | ||
54 | universalDarkModeInjected = false; | 54 | universalDarkModeInjected = false; |
55 | 55 | ||
56 | recipe = null; | ||
57 | |||
58 | hasUpdatedBeforeRecipeLoaded = false; | ||
59 | |||
56 | constructor() { | 60 | constructor() { |
57 | this.initialize(); | 61 | this.initialize(); |
58 | } | 62 | } |
@@ -93,11 +97,15 @@ class RecipeController { | |||
93 | // Delete module from cache | 97 | // Delete module from cache |
94 | delete require.cache[require.resolve(modulePath)]; | 98 | delete require.cache[require.resolve(modulePath)]; |
95 | try { | 99 | try { |
100 | this.recipe = new RecipeWebview(); | ||
96 | // eslint-disable-next-line | 101 | // eslint-disable-next-line |
97 | require(modulePath)(new RecipeWebview(), {...config, recipe,}); | 102 | require(modulePath)(this.recipe, {...config, recipe,}); |
98 | debug('Initialize Recipe', config, recipe); | 103 | debug('Initialize Recipe', config, recipe); |
99 | 104 | ||
100 | this.settings.service = Object.assign(config, { recipe }); | 105 | this.settings.service = Object.assign(config, { recipe }); |
106 | |||
107 | // Make sure to update the WebView, otherwise the custom darkmode handler may not be used | ||
108 | this.update(); | ||
101 | } catch (err) { | 109 | } catch (err) { |
102 | console.error('Recipe initialization failed', err); | 110 | console.error('Recipe initialization failed', err); |
103 | } | 111 | } |
@@ -166,12 +174,25 @@ class RecipeController { | |||
166 | } | 174 | } |
167 | } | 175 | } |
168 | 176 | ||
177 | if (!this.recipe) { | ||
178 | this.hasUpdatedBeforeRecipeLoaded = true; | ||
179 | } | ||
180 | |||
169 | console.log( | 181 | console.log( |
170 | 'Darkmode enabled?', | 182 | 'Darkmode enabled?', |
171 | this.settings.service.isDarkModeEnabled, | 183 | this.settings.service.isDarkModeEnabled, |
172 | 'Dark theme active?', | 184 | 'Dark theme active?', |
173 | this.settings.app.isDarkThemeActive, | 185 | this.settings.app.isDarkThemeActive, |
174 | ); | 186 | ); |
187 | |||
188 | const handlerConfig = { | ||
189 | removeDarkModeStyle, | ||
190 | disableDarkMode, | ||
191 | enableDarkMode, | ||
192 | injectDarkModeStyle: () => injectDarkModeStyle(this.settings.service.recipe.path), | ||
193 | isDarkModeStyleInjected, | ||
194 | }; | ||
195 | |||
175 | if (this.settings.service.isDarkModeEnabled && this.settings.app.isDarkThemeActive !== false) { | 196 | if (this.settings.service.isDarkModeEnabled && this.settings.app.isDarkThemeActive !== false) { |
176 | debug('Enable dark mode'); | 197 | debug('Enable dark mode'); |
177 | 198 | ||
@@ -181,7 +202,19 @@ class RecipeController { | |||
181 | 202 | ||
182 | console.log('darkmode.css exists? ', darkModeExists ? 'Yes' : 'No'); | 203 | console.log('darkmode.css exists? ', darkModeExists ? 'Yes' : 'No'); |
183 | 204 | ||
184 | if (darkModeExists) { | 205 | // Check if recipe has a custom dark mode handler |
206 | if (this.recipe && this.recipe.darkModeHandler) { | ||
207 | console.log('Using custom dark mode handler'); | ||
208 | |||
209 | // Remove other dark mode styles if they were already loaded | ||
210 | if (this.hasUpdatedBeforeRecipeLoaded) { | ||
211 | this.hasUpdatedBeforeRecipeLoaded = false; | ||
212 | removeDarkModeStyle(); | ||
213 | disableDarkMode(); | ||
214 | } | ||
215 | |||
216 | this.recipe.darkModeHandler(true, handlerConfig); | ||
217 | } else if (darkModeExists) { | ||
185 | console.log('Injecting darkmode.css'); | 218 | console.log('Injecting darkmode.css'); |
186 | injectDarkModeStyle(this.settings.service.recipe.path); | 219 | injectDarkModeStyle(this.settings.service.recipe.path); |
187 | 220 | ||
@@ -201,7 +234,16 @@ class RecipeController { | |||
201 | debug('Remove dark mode'); | 234 | debug('Remove dark mode'); |
202 | console.log('DarkMode disabled - removing remaining styles'); | 235 | console.log('DarkMode disabled - removing remaining styles'); |
203 | 236 | ||
204 | if (isDarkModeStyleInjected()) { | 237 | if (this.recipe && this.recipe.darkModeHandler) { |
238 | // Remove other dark mode styles if they were already loaded | ||
239 | if (this.hasUpdatedBeforeRecipeLoaded) { | ||
240 | this.hasUpdatedBeforeRecipeLoaded = false; | ||
241 | removeDarkModeStyle(); | ||
242 | disableDarkMode(); | ||
243 | } | ||
244 | |||
245 | this.recipe.darkModeHandler(false, handlerConfig); | ||
246 | } else if (isDarkModeStyleInjected()) { | ||
205 | console.log('Removing injected darkmode.css'); | 247 | console.log('Removing injected darkmode.css'); |
206 | removeDarkModeStyle(); | 248 | removeDarkModeStyle(); |
207 | } else { | 249 | } else { |