Actually runable as cmd or in the browser, using different main files.

node/server/server.js

@@ -6,6 +6,7 @@ var app = express();
 
 var index = fs.readFileSync("../../web/index.html").toString();
 var logo  = fs.readFileSync("../../web/img/logo.svg").toString();
+logo = logo.replace('<svg', '<svg id="mainlogo"');
 var output = index.replace('<img id="mainlogo" src="img/logo.svg" alt="Queer all year">', logo);
 
 app.get('/', function (req, res) {

node/tool/browser.js

@@ -0,0 +1,9 @@
+const recolor = require('./recolor.js');
+const flags = require('./flags.js');
+
+var gradients = window.document.getElementsByTagName("defs").item(0);
+recolor.processGradients(gradients, flags.ace);
+
+window.showflag = function(flagname) {
+    recolor.processGradients(gradients, flags[flagname]);
+}

node/tool/cmd.js

@@ -0,0 +1,18 @@
+const jsdom = require("jsdom");
+const { JSDOM } = jsdom;
+const fs = require('fs');
+
+const recolor = require('./recolor.js');
+const flags = require('./flags.js');
+
+function processSvgFile() {
+    JSDOM.fromFile("../../web/img/logo.svg", {} ).then(dom => {
+        var doc = dom.window.document;
+        //var gradients = dom.window.document.querySelector("defs");
+        var gradients = doc.getElementsByTagName("defs").item(0);
+        recolor.processGradients(gradients, flags.pan);
+        fs.writeFileSync("../output.svg", dom.serialize());
+    });
+}
+
+processSvgFile();

node/tool/compile.sh

@@ -1 +1,2 @@
-browserify queerallyear.js > ../../web/js/modules.js
+browserify browser.js > ../../web/js/modules.js
+ls -l ../../web/js/modules.js

node/tool/package.json

@@ -6,6 +6,8 @@
         "jsdom": " ^15.1.1"
     },
     "scripts": {
-        "start": "node queerallyear.js"
-    }
+        "start": "node cmd.js"
+    },
+    "main" : "cmd.js",
+    "browser" : "browser.js"
 }

node/tool/recolor.js

@@ -1,27 +1,5 @@
 var util = require('util');
-var fs = require('fs');
 var color = require('color');
-var flags = require('./flags.js');
-const jsdom = require("jsdom");
-const { JSDOM } = jsdom;
-
-function processSvgFile() {
-    JSDOM.fromFile("../../web/img/logo.svg", {} ).then(dom => {
-        var doc = dom.window.document;
-        //var gradients = dom.window.document.querySelector("defs");
-        var gradients = doc.getElementsByTagName("defs").item(0);
-        processGradients(gradients);
-        fs.writeFileSync("../output.svg", dom.serialize());
-    });
-}
-
-function processSvgInline() {
-    // TODO find element
-    // TODO process
-    // DONE, nothing to "output" because we work inplace
-}
-
-processSvgFile();
 
 var rangesL = {};
 var rangesS = {};
@@ -30,7 +8,7 @@ composedRangesL = {};
 composedRangesS = {};
 
 // the parameter "gradients" must be the DOM element with tag "defs" from the SVG file.
-function processGradients(gradients) {
+exports.processGradients = function(gradients, flag) {
     for (let i = 0; i < gradients.children.length; i++) {
         const gradient = gradients.children.item(i);
         var id = gradient.id;
@@ -62,15 +40,13 @@ function processGradients(gradients) {
         }
     }
 
-    targetColors = flags.ace;
-
     for (let i = 0; i < gradients.children.length; i++) {
         const gradient = gradients.children.item(i);
         var id = gradient.id;
         if (id.length == 3) {
             var letter = id.substring(0,2);
            
-            var targetColor = targetColors[letter];
+            var targetColor = flag[letter];
             var [th, ts, tl] = color(targetColor).hsl().color;
             var stops = gradient.children;
             var diffLightness = adaptRange(composedRangesL[letter], tl);
@@ -148,5 +124,4 @@ function getRange(stops, index) {
         "mid": (min + max) / 2,
         "width": max - min
     };
-}
-
+}

web/index.html

@@ -46,7 +46,7 @@
           Wir nehmen diese Einladung gerne an.
         </p>
         <p>
-          Denn wir sind nicht nur gay, sondern auch lesbisch, bi, pan, asexuell,
+          Denn wir sind nicht nur gay, sondern auch lesbisch, <a href="#" onclick="showflag('bi');">bi</a>,  <a href="#" onclick="showflag('pan');">pan</a>, asexuell,
           trans, polyamor, oder auch einfach: queer.
         </p>
         <p>
@@ -63,7 +63,6 @@
   <script src="js/vendor/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
     crossorigin="anonymous"></script>
   <script src="js/plugins.js"></script>
-  <script src="js/main.js"></script>
   <script src="js/modules.js"></script>
 </body>
 

web/js/main.js

@@ -1,4 +0,0 @@
-//$("stop").attr("stop-color","#FFFF00");
-
-// This is needed so that the CSS rules apply to the logo
-$("svg").attr("id","mainlogo");