Update google-calendar recipe to load external scripts to fix CSP error (#402)

* Update google-calendar recipe to load external scripts to fix CSP error

https://github.com/ferdium/ferdium-app/issues/1086\#issuecomment-1656926137

* use Ferdium.handleDarkMode() in google-calendar webview to be able to toggle between light and dark mode

---------

Co-authored-by: MCMXC <16797721+mcmxcdev@users.noreply.github.com>

1 files changed, 29 insertions, 2 deletions

diff --git a/recipes/google-calendar/webview.js b/recipes/google-calendar/webview.js
index 3921dea..804527d 100644
--- a/recipes/google-calendar/webview.js
+++ b/recipes/google-calendar/webview.js
@@ -13,6 +13,33 @@ module.exports = Ferdium => {
     location.href =
       'https://accounts.google.com/AccountChooser?continue=https://calendar.google.com/u/0/';
   }
-  Ferdium.injectCSS(_path.default.join(__dirname, 'calendar.css'));
-  Ferdium.injectJSUnsafe(_path.default.join(__dirname, 'webview-unsafe.js'));
+
+  Ferdium.injectCSS(_path.default.join(__dirname, 'service.css'));
+  Ferdium.injectCSS(
+    'https://cdn.statically.io/gh/ferdium/ferdium-recipes/main/recipes/google-calendar/calendar.css',
+  );
+  Ferdium.injectJSUnsafe(
+    'https://cdn.statically.io/gh/ferdium/ferdium-recipes/main/recipes/google-calendar/webview-unsave.js',
+  );
+
+  Ferdium.handleDarkMode(isEnabled => {
+    const cssId = 'cssDarkModeWorkaround';
+
+    if (isEnabled) {
+      // Workaround for loading darkmode.css
+      if (!document.querySelector(`#${cssId}`)) {
+        const head = document.querySelectorAll('head')[0];
+        const link = document.createElement('link');
+        link.id = cssId;
+        link.rel = 'stylesheet';
+        link.type = 'text/css';
+        link.href =
+          'https://cdn.statically.io/gh/ferdium/ferdium-recipes/main/recipes/google-calendar/darkmode.css';
+        link.media = 'all';
+        head.append(link);
+      }
+    } else {
+      document.querySelector(`#${cssId}`)?.remove();
+    }
+  });
 };