From 0ef6ec5b28f145603be208f744adb5776c33c71c Mon Sep 17 00:00:00 2001
From: Alexandre Iooss <erdnaxe@crans.org>
Date: Wed, 19 Sep 2018 18:31:21 +0200
Subject: [PATCH] Sapphire.js cleanup

Make sapphire.js follow new javascript conventions. Also fix a dirty JS
in base.html.
---
 static/js/sapphire.js | 465 ++++++++++++++++++++++++++++--------------
 templates/base.html   |   7 +-
 2 files changed, 315 insertions(+), 157 deletions(-)

diff --git a/static/js/sapphire.js b/static/js/sapphire.js
index db65fdd1..4f2e6c29 100644
--- a/static/js/sapphire.js
+++ b/static/js/sapphire.js
@@ -21,189 +21,332 @@
 // General options
 //=====================================
 // Times the canvas is refreshed a second
-var FPS = 30;
+let FPS = 30;
 // Determine the length of the trail (0=instant disappear, maximum=window.innerHeight=no disappear)
-var TRAIL_TIME = 5;
+let TRAIL_TIME = 5;
 // The color of the characters
-var RAIN_COLOR = "#00F";
+let RAIN_COLOR = "#00F";
 // The characters displayed
-var CHARACTERS = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑".split("");
+let CHARACTERS = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑".split("");
 // The font size used to display the characters
-var FONT_SIZE = 10;
+let FONT_SIZE = 10;
 // The maximum number of characters displayed by column
-var MAX_CHAR = 7;
+let MAX_CHAR = 7;
 
-var Sapphire = function () {
-    var sapphire = {
+let Sapphire;
+
+Sapphire = function () {
+    let sapphire = {
         triggerHandle: undefined,
-        activated:     false,
-        runOnce:       false,
+        activated: false,
+        runOnce: false,
 
-        getClass: function(elt, main, name) { elt.obj = main.getElementsByClassName(name); },
-        getTag:   function(elt, main, name) { elt.obj = main.getElementsByTagName(name); },
+        getClass: function (elt, main, name) {
+            elt.obj = main.getElementsByClassName(name);
+        },
+        getTag: function (elt, main, name) {
+            elt.obj = main.getElementsByTagName(name);
+        },
 
-        getProp: function(elt) {
-            for (var i=0 ; i<elt.obj.length ; i++) {
-                for (var p in elt.prop) {
-                    if ( p === "color" ) { elt.prop[p][i] = elt.obj[i].style.color; }
-                    else if ( p === "bgColor" ) { elt.prop[p][i] = elt.obj[i].style.backgroundColor; }
-                    else if ( p === "display" ) { elt.prop[p][i] = elt.obj[i].style.display; }
+        getProp: function (elt) {
+            for (let i = 0; i < elt.obj.length; i++) {
+                for (let p in elt.prop) {
+                    if (p === "color") {
+                        elt.prop[p][i] = elt.obj[i].style.color;
+                    }
+                    else if (p === "bgColor") {
+                        elt.prop[p][i] = elt.obj[i].style.backgroundColor;
+                    }
+                    else if (p === "display") {
+                        elt.prop[p][i] = elt.obj[i].style.display;
+                    }
                 }
             }
         },
-        alterProp: function(elt) {
-            for (var i=0 ; i<elt.obj.length ; i++) {
-                for (var p in elt.prop) {
-                    if ( p === "color" ) { elt.obj[i].style.color = "white"; }
-                    else if ( p === "bgColor" ) { elt.obj[i].style.backgroundColor = "transparent"; }
-                    else if ( p === "display" ) { elt.obj[i].style.display = "none"; }
+        alterProp: function (elt) {
+            for (let i = 0; i < elt.obj.length; i++) {
+                for (let p in elt.prop) {
+                    if (p === "color") {
+                        elt.obj[i].style.color = "white";
+                    }
+                    else if (p === "bgColor") {
+                        elt.obj[i].style.backgroundColor = "transparent";
+                    }
+                    else if (p === "display") {
+                        elt.obj[i].style.display = "none";
+                    }
                 }
             }
         },
-        revertProp: function(elt) {
-            for (var i=0 ; i<elt.obj.length ; i++) {
-                for (var p in elt.prop) {
-                    if ( p === "color" ) { elt.obj[i].style.color = elt.prop[p][i]; }
-                    else if ( p === "bgColor" ) { elt.obj[i].style.backgroundColor = elt.prop[p][i]; }
-                    else if ( p === "display" ) { elt.obj[i].style.display = elt.prop[p][i]; }
+        revertProp: function (elt) {
+            for (let i = 0; i < elt.obj.length; i++) {
+                for (let p in elt.prop) {
+                    if (p === "color") {
+                        elt.obj[i].style.color = elt.prop[p][i];
+                    }
+                    else if (p === "bgColor") {
+                        elt.obj[i].style.backgroundColor = elt.prop[p][i];
+                    }
+                    else if (p === "display") {
+                        elt.obj[i].style.display = elt.prop[p][i];
+                    }
                 }
             }
         },
 
         elts: {
             alerts: {
-                obj:    undefined,
-                prop:   {bgColor: []},
-                get:    function(main) { sapphire.getClass(this, main, "alert"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {bgColor: []},
+                get: function (main) {
+                    sapphire.getClass(this, main, "alert");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             btns: {
-                obj:    undefined,
-                prop:   {color: [], bgColor: []},
-                get:    function(main) { sapphire.getClass(this, main, "btn"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {color: [], bgColor: []},
+                get: function (main) {
+                    sapphire.getClass(this, main, "btn");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             body: {
-                obj:    undefined,
-                prop:   {color: []},
-                get:    function(main) {
+                obj: undefined,
+                prop: {color: []},
+                get: function () {
                     this.obj = document.body;
-                    for (var p in this.prop) { if ( p === "color" ) { this.prop[p] = this.obj.style.color; } }
+                    for (let p in this.prop) {
+                        if (p === "color") {
+                            this.prop[p] = this.obj.style.color;
+                        }
+                    }
                 },
-                alter:  function() { for (var p in this.prop) { if ( p === "color" ) { this.obj.style.color = "white"; } } },
-                revert: function() { for (var p in this.prop) { if ( p === "color" ) { this.obj.style.color = this.prop[p]; } } }
+                alter: function () {
+                    for (let p in this.prop) {
+                        if (p === "color") {
+                            this.obj.style.color = "white";
+                        }
+                    }
+                },
+                revert: function () {
+                    for (let p in this.prop) {
+                        if (p === "color") {
+                            this.obj.style.color = this.prop[p];
+                        }
+                    }
+                }
             },
             captions: {
-                obj:    undefined,
-                prop:   {color: []},
-                get:    function(main) { sapphire.getClass(this, main, "caption"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {color: []},
+                get: function (main) {
+                    sapphire.getClass(this, main, "caption");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             helps: {
-                obj:    undefined,
-                prop:   {color: []},
-                get:    function(main) { sapphire.getClass(this, main, "help-block"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {color: []},
+                get: function (main) {
+                    sapphire.getClass(this, main, "help-block");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             hrs: {
-                obj:    undefined,
-                prop:   {display: []},
-                get:    function(main) { sapphire.getTag(this, main, "hr"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {display: []},
+                get: function (main) {
+                    sapphire.getTag(this, main, "hr");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             inputs: {
-                obj:    undefined,
-                prop:   {color: [], bgColor: []},
-                get:    function(main) { sapphire.getTag(this, main, "input"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {color: [], bgColor: []},
+                get: function (main) {
+                    sapphire.getTag(this, main, "input");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             listGroups: {
-                obj:    undefined,
-                prop:   {color: [], bgColor: []},
-                get:    function(main) { sapphire.getClass(this, main, "list-group-item"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {color: [], bgColor: []},
+                get: function (main) {
+                    sapphire.getClass(this, main, "list-group-item");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             paginations: {
-                obj:    [],
-                prop:   {bgColor: []},
-                get:    function(main) {
-                    var a = main.getElementsByClassName("pagination");
-                    for (var i=0 ; i<a.length ; i++) {
-                        this.obj[i] = []; this.prop.bgColor[i] = [];
-                        for (var j=0 ; j<a[i].children.length ; j++) {
+                obj: [],
+                prop: {bgColor: []},
+                get: function (main) {
+                    let a = main.getElementsByClassName("pagination");
+                    for (let i = 0; i < a.length; i++) {
+                        this.obj[i] = [];
+                        this.prop.bgColor[i] = [];
+                        for (let j = 0; j < a[i].children.length; j++) {
                             this.obj[i][j] = a[i].children[j].children[0];
                             this.prop.bgColor[i][j] = this.obj[i][j].style.backgroundColor;
                         }
                     }
                 },
-                alter:  function () {
-                    for (var i=0 ; i<this.obj.length ; i++)
-                        for (var j=0 ; j<this.obj[i].length ; j++)
-                            for (var p in this.prop)
-                                if ( p === "bgColor" ) { this.obj[i][j].style.backgroundColor = "transparent"; }
+                alter: function () {
+                    for (let i = 0; i < this.obj.length; i++)
+                        for (let j = 0; j < this.obj[i].length; j++)
+                            for (let p in this.prop)
+                                if (p === "bgColor") {
+                                    this.obj[i][j].style.backgroundColor = "transparent";
+                                }
                 },
-                revert: function() {
-                    for (var i=0 ; i<this.obj.length ; i++)
-                        for (var j=0 ; j<this.obj[i].length ; j++)
-                            for (var p in this.prop)
-                                if ( p === "bgColor" ) { this.obj[i][j].style.backgroundColor = this.prop[p][i][j]; }
+                revert: function () {
+                    for (let i = 0; i < this.obj.length; i++)
+                        for (let j = 0; j < this.obj[i].length; j++)
+                            for (let p in this.prop)
+                                if (p === "bgColor") {
+                                    this.obj[i][j].style.backgroundColor = this.prop[p][i][j];
+                                }
                 }
             },
             panelHeadings: {
-                obj:    undefined,
-                prop:   {bgColor: [], color: []},
-                get:    function(main) { sapphire.getClass(this, main, "panel-heading"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {bgColor: [], color: []},
+                get: function (main) {
+                    sapphire.getClass(this, main, "panel-heading");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             panels: {
-                obj:    undefined,
-                prop:   {bgColor: []},
-                get:    function(main) { sapphire.getClass(this, main, "panel"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {bgColor: []},
+                get: function (main) {
+                    sapphire.getClass(this, main, "panel");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             selects: {
-                obj:    undefined,
-                prop:   {color: [], bgColor: []},
-                get:    function(main) { sapphire.getTag(this, main, "select"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {color: [], bgColor: []},
+                get: function (main) {
+                    sapphire.getTag(this, main, "select");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             sidenavs: {
-                obj:    undefined,
-                prop:   {bgColor: []},
-                get:    function(main) { sapphire.getClass(this, main, "sidenav"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {bgColor: []},
+                get: function (main) {
+                    sapphire.getClass(this, main, "sidenav");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             tds: {
-                obj:    undefined,
-                prop:   {bgColor: []},
-                get:    function(main) { sapphire.getTag(this, main, "td"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {bgColor: []},
+                get: function (main) {
+                    sapphire.getTag(this, main, "td");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             thumbnails: {
-                obj:    undefined,
-                prop:   {bgColor: []},
-                get:    function(main) { sapphire.getClass(this, main, "thumbnail"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {bgColor: []},
+                get: function (main) {
+                    sapphire.getClass(this, main, "thumbnail");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             },
             trs: {
-                obj:    undefined,
-                prop:   {bgColor: []},
-                get:    function(main) { sapphire.getTag(this, main, "tr"); sapphire.getProp(this); },
-                alter:  function()     { sapphire.alterProp(this); },
-                revert: function()     { sapphire.revertProp(this); }
+                obj: undefined,
+                prop: {bgColor: []},
+                get: function (main) {
+                    sapphire.getTag(this, main, "tr");
+                    sapphire.getProp(this);
+                },
+                alter: function () {
+                    sapphire.alterProp(this);
+                },
+                revert: function () {
+                    sapphire.revertProp(this);
+                }
             }
         },
 
@@ -212,35 +355,39 @@ var Sapphire = function () {
         drops: undefined,
         canvas: undefined,
 
-        init: function() {
-            var main = document.getElementById("main");
-            for (var e in sapphire.elts) { sapphire.elts[e].get(main); }
+        init: function () {
+            let main = document.getElementById("main");
+            for (let e in sapphire.elts) {
+                sapphire.elts[e].get(main);
+            }
         },
 
-        resize: function() {
-            var ctx = sapphire.canvas.getContext("2d");
-            var img = ctx.getImageData( 0, 0, sapphire.canvas.width, sapphire.canvas.height );
+        resize: function () {
+            let ctx = sapphire.canvas.getContext("2d");
+            let img = ctx.getImageData(0, 0, sapphire.canvas.width, sapphire.canvas.height);
             sapphire.canvas.width = window.innerWidth;
             sapphire.canvas.height = window.innerHeight;
             ctx.fillStyle = "rgba(0, 0, 0, 1)";
             ctx.fillRect(0, 0, sapphire.canvas.width, sapphire.canvas.height);
-            ctx.putImageData( img, 0, 0 );
-            sapphire.columns = sapphire.canvas.width/FONT_SIZE;
-            sapphire.alpha = Math.max( 0, Math.min( 1, TRAIL_TIME / ( sapphire.canvas.height/FONT_SIZE ) ) );
-            var newDrops = [];
-            for(var x = 0; x < sapphire.columns; x++) {
-                if ( sapphire.drops && sapphire.drops[x] ) { newDrops[x] = sapphire.drops[x] }
+            ctx.putImageData(img, 0, 0);
+            sapphire.columns = sapphire.canvas.width / FONT_SIZE;
+            sapphire.alpha = Math.max(0, Math.min(1, TRAIL_TIME / (sapphire.canvas.height / FONT_SIZE)));
+            let newDrops = [];
+            for (let x = 0; x < sapphire.columns; x++) {
+                if (sapphire.drops && sapphire.drops[x]) {
+                    newDrops[x] = sapphire.drops[x]
+                }
                 else {
                     newDrops[x] = [];
-                    var nb = Math.floor(Math.random()*MAX_CHAR);
-                    for (var y = 0; y < nb; y++)
+                    let nb = Math.floor(Math.random() * MAX_CHAR);
+                    for (let y = 0; y < nb; y++)
                         newDrops[x][y] = 0;
                 }
             }
             sapphire.drops = newDrops;
         },
 
-        run: function() {
+        run: function () {
             sapphire.canvas = document.createElement("canvas");
             document.body.appendChild(sapphire.canvas);
             sapphire.canvas.style.position = "fixed";
@@ -248,23 +395,23 @@ var Sapphire = function () {
             sapphire.canvas.style.left = 0;
             sapphire.canvas.style.top = 0;
 
-            var ctx = sapphire.canvas.getContext("2d");
+            let ctx = sapphire.canvas.getContext("2d");
             ctx.fillStyle = "rgba(0, 0, 0, 1)";
             ctx.fillRect(0, 0, sapphire.canvas.width, sapphire.canvas.height);
 
             function attenuateBackground() {
-                ctx.fillStyle = "rgba(0, 0, 0, "+sapphire.alpha+")";
+                ctx.fillStyle = "rgba(0, 0, 0, " + sapphire.alpha + ")";
                 ctx.fillRect(0, 0, sapphire.canvas.width, sapphire.canvas.height);
             }
 
             function drawMatrixRainDrop() {
                 ctx.fillStyle = RAIN_COLOR;
                 ctx.font = FONT_SIZE + "px arial";
-                for(var i = 0; i < sapphire.drops.length; i++) {
-                    for (var j = 0; j < sapphire.drops[i].length; j++) {
-                        var text = CHARACTERS[Math.floor(Math.random()*CHARACTERS.length)];
-                        ctx.fillText(text, i*FONT_SIZE, sapphire.drops[i][j]*FONT_SIZE);
-                        if(sapphire.drops[i][j]*FONT_SIZE > sapphire.canvas.height && Math.random() > 0.975)
+                for (let i = 0; i < sapphire.drops.length; i++) {
+                    for (let j = 0; j < sapphire.drops[i].length; j++) {
+                        let text = CHARACTERS[Math.floor(Math.random() * CHARACTERS.length)];
+                        ctx.fillText(text, i * FONT_SIZE, sapphire.drops[i][j] * FONT_SIZE);
+                        if (sapphire.drops[i][j] * FONT_SIZE > sapphire.canvas.height && Math.random() > 0.975)
                             sapphire.drops[i][j] = 0;
                         sapphire.drops[i][j]++;
                     }
@@ -278,19 +425,29 @@ var Sapphire = function () {
 
             sapphire.resize();
             window.addEventListener('resize', sapphire.resize);
-            sapphire.triggerHandle = setInterval(drawEverything, 1000/FPS);
+            sapphire.triggerHandle = setInterval(drawEverything, 1000 / FPS);
         },
 
-        stop: function() {
+        stop: function () {
             window.removeEventListener('resize', sapphire.resize);
             clearInterval(sapphire.triggerHandle);
             sapphire.canvas.parentNode.removeChild(sapphire.canvas);
         },
 
-        alterElts:  function() { for (var e in sapphire.elts) { sapphire.elts[e].alter(main); } },
-        revertElts: function() { for (var e in sapphire.elts) { sapphire.elts[e].revert(main); } },
+        alterElts: function () {
+            for (let e in sapphire.elts) {
+                let main = document.getElementById("main");
+                sapphire.elts[e].alter(main);
+            }
+        },
+        revertElts: function () {
+            for (let e in sapphire.elts) {
+                let main = document.getElementById("main");
+                sapphire.elts[e].revert(main);
+            }
+        },
 
-        activate:   function() {
+        activate: function () {
             if (!sapphire.runOnce) {
                 sapphire.runOnce = true;
                 sapphire.init();
@@ -306,11 +463,7 @@ var Sapphire = function () {
                 sapphire.revertElts();
             }
         }
-    }
+    };
 
     return sapphire;
-}
-
-var s = Sapphire();
-Konami(s.activate);
-
+};
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index fc79ed8c..f6cf3c39 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -269,7 +269,12 @@ with this program; if not, write to the Free Software Foundation, Inc.,
         <script src="/static/js/typeahead/typeahead.js"></script>
         <script src="/static/js/handlebars/handlebars.js"></script>
         <script src="/static/js/konami/konami.js"></script>
-        <script src="/static/js/sapphire.js"> var s=Sapphire(); Konami(s.activate); </script>
+        <script src="/static/js/sapphire.js"></script>
+        <script>
+            // Konami activate sapphire
+            let s = Sapphire();
+            Konami(s.activate);
+        </script>
         <script src="/static/js/bootstrap-tokenfield/bootstrap-tokenfield.js"></script>
         <script src="/static/js/shortcuts.js"></script>