From bdbf6eadb3a0097c7d7007ed290458d897d4952f Mon Sep 17 00:00:00 2001
From: Pierre-Alexandre Veyry <paveyry@arista.com>
Date: Thu, 22 Aug 2019 15:22:35 +0100
Subject: [PATCH] js: make js code use separate shape and color css

---
 generate_patch.sh |  9 ++++---
 js/plugin.js      | 63 +++++++++++++++++++++++++----------------------
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/generate_patch.sh b/generate_patch.sh
index 6020ffa..8a60169 100755
--- a/generate_patch.sh
+++ b/generate_patch.sh
@@ -18,17 +18,18 @@ mkdir -p out/slacktheme
 
 generateFiles() {
    cat js/plugin.js \
-      | sed "s/CSSURL/$1/g" \
+      | sed "s/CSSSHAPEURL/$1/g" \
+      | sed "s/CSSCOLORURL/$2/g" \
       > "$PLUGINGEN"
    echo "document.addEventListener(\"DOMContentLoaded\", function() {" > "$PLUGINGEN2"
    cat "$PLUGINGEN" >> "$PLUGINGEN2"
    echo "});" >> "$PLUGINGEN2"
    [ -z "$ASARFILE" ] || sed -e "10r $PLUGINGEN2" $DEFAULTINIT > "$DIR/renderer/init.js"
-   cat js/gmonkeyscript_template.js "$PLUGINGEN" > "$2/gmonkeyscript.js"
+   cat js/gmonkeyscript_template.js "$PLUGINGEN" > "$3/gmonkeyscript.js"
    [ -z "$ASARFILE" ] || asar pack "$DIR" electron.asar
-   [ -z "$ASARFILE" ] || mv electron.asar "$2/electron.asar"
+   [ -z "$ASARFILE" ] || mv electron.asar "$3/electron.asar"
 }
 
-generateFiles "https:\/\/raw.githubusercontent.com\/paveyry\/Slack-Theme-for-Hangouts-Chat\/master\/custom.css" "out/slacktheme"
+generateFiles "https:\/\/raw.githubusercontent.com\/paveyry\/Slack-Theme-for-Hangouts-Chat\/master\/css\/shape.css" "https:\/\/raw.githubusercontent.com\/paveyry\/Slack-Theme-for-Hangouts-Chat\/master\/css\/color_slack.css" "out/slacktheme"
 
 rm -rf "$DIR" "$DEFAULTINIT" "$PLUGINGEN" "$PLUGINGEN2"
diff --git a/js/plugin.js b/js/plugin.js
index 9420b6d..12e8564 100644
--- a/js/plugin.js
+++ b/js/plugin.js
@@ -25,36 +25,39 @@ for (i = 0; i < topics.length; i++) {
 }
 insertionQ('.cZICLc').every(linkFunction);
 
-
 // Then get its webviews
 let webviews = document.querySelectorAll("webview");
 
-// Fetch our CSS in parallel ahead of time
-const cssPath = 'CSSURL';
-let cssPromise = fetch(cssPath).then(response => response.text());
-
-// Insert a style tag into the wrapper view
-cssPromise.then(css => {
-   let s = document.createElement('style');
-   s.type = 'text/css';
-   s.innerHTML = css;
-   document.head.appendChild(s);
-});
-
-// Wait for each webview to load
-webviews.forEach(webview => {
-   webview.addEventListener('ipc-message', message => {
-      if (message.channel == 'didFinishLoading')
-         // Finally add the CSS into the webview
-         cssPromise.then(css => {
-            let script = `
-            let s = document.createElement('style');
-            s.type = 'text/css';
-            s.id = 'slack-custom-css';
-            s.innerHTML = \`${css}\`;
-            document.head.appendChild(s);
-            `
-            webview.executeJavaScript(script);
-         })
-   });
-});
+function loadCSS(cssPath) {
+    // Fetch our CSS in parallel ahead of time
+    let cssPromise = fetch(cssPath).then(response => response.text());
+
+    // Insert a style tag into the wrapper view
+    cssPromise.then(css => {
+       let s = document.createElement('style');
+       s.type = 'text/css';
+       s.innerHTML = css;
+       document.head.appendChild(s);
+    });
+
+    // Wait for each webview to load
+    webviews.forEach(webview => {
+       webview.addEventListener('ipc-message', message => {
+          if (message.channel == 'didFinishLoading')
+             // Finally add the CSS into the webview
+             cssPromise.then(css => {
+                let script = `
+                let s = document.createElement('style');
+                s.type = 'text/css';
+                s.id = 'slack-custom-css';
+                s.innerHTML = \`${css}\`;
+                document.head.appendChild(s);
+                `
+                webview.executeJavaScript(script);
+             })
+       });
+    });
+}
+
+loadCSS('CSSSHAPEURL');
+loadCSS('CSSCOLORURL');