rezometz/re2o
8
0
Fork 0
mirror of https://gitlab2.federez.net/re2o/re2o synced 2024-11-25 22:22:26 +00:00
Code Issues Releases Wiki Activity

Sapphire.js cleanup

Browse source 
Make sapphire.js follow new javascript conventions. Also fix a dirty JS
in base.html.
This commit is contained in:
Alexandre Iooss 2018-09-19 18:31:21 +02:00 committed by Alexandre IOOSS
parent 033c22bf1d
commit 0ef6ec5b28
2 changed files with 315 additions and 157 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

395
static/js/sapphire.js
View file

@ -21,51 +21,75 @@
// General options // General options
//===================================== //=====================================
// Times the canvas is refreshed a second // 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) // 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 // The color of the characters
var RAIN_COLOR = "#00F"; let RAIN_COLOR = "#00F";
// The characters displayed // The characters displayed
var CHARACTERS = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑".split(""); let CHARACTERS = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑".split("");
// The font size used to display the characters // The font size used to display the characters
var FONT_SIZE = 10; let FONT_SIZE = 10;
// The maximum number of characters displayed by column // The maximum number of characters displayed by column
var MAX_CHAR = 7; let MAX_CHAR = 7;
var Sapphire = function () { let Sapphire;
var sapphire = {
Sapphire = function () {
let sapphire = {
triggerHandle: undefined, triggerHandle: undefined,
activated: false, activated: false,
runOnce: false, runOnce: false,
getClass: function(elt, main, name) { elt.obj = main.getElementsByClassName(name); }, getClass: function (elt, main, name) {
getTag: function(elt, main, name) { elt.obj = main.getElementsByTagName(name); }, elt.obj = main.getElementsByClassName(name);
},
getTag: function (elt, main, name) {
elt.obj = main.getElementsByTagName(name);
},
getProp: function(elt) { getProp: function (elt) {
for (var i=0 ; i<elt.obj.length ; i++) { for (let i = 0; i < elt.obj.length; i++) {
for (var p in elt.prop) { for (let p in elt.prop) {
if ( p === "color" ) { elt.prop[p][i] = elt.obj[i].style.color; } if (p === "color") {
else if ( p === "bgColor" ) { elt.prop[p][i] = elt.obj[i].style.backgroundColor; } elt.prop[p][i] = elt.obj[i].style.color;
else if ( p === "display" ) { elt.prop[p][i] = elt.obj[i].style.display; } }
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) { alterProp: function (elt) {
for (var i=0 ; i<elt.obj.length ; i++) { for (let i = 0; i < elt.obj.length; i++) {
for (var p in elt.prop) { for (let p in elt.prop) {
if ( p === "color" ) { elt.obj[i].style.color = "white"; } if (p === "color") {
else if ( p === "bgColor" ) { elt.obj[i].style.backgroundColor = "transparent"; } elt.obj[i].style.color = "white";
else if ( p === "display" ) { elt.obj[i].style.display = "none"; } }
else if (p === "bgColor") {
elt.obj[i].style.backgroundColor = "transparent";
}
else if (p === "display") {
elt.obj[i].style.display = "none";
}
} }
} }
}, },
revertProp: function(elt) { revertProp: function (elt) {
for (var i=0 ; i<elt.obj.length ; i++) { for (let i = 0; i < elt.obj.length; i++) {
for (var p in elt.prop) { for (let p in elt.prop) {
if ( p === "color" ) { elt.obj[i].style.color = elt.prop[p][i]; } if (p === "color") {
else if ( p === "bgColor" ) { elt.obj[i].style.backgroundColor = elt.prop[p][i]; } elt.obj[i].style.color = elt.prop[p][i];
else if ( p === "display" ) { elt.obj[i].style.display = 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];
}
} }
} }
}, },
@ -74,136 +98,255 @@ var Sapphire = function () {
alerts: { alerts: {
obj: undefined, obj: undefined,
prop: {bgColor: []}, prop: {bgColor: []},
get: function(main) { sapphire.getClass(this, main, "alert"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getClass(this, main, "alert");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
btns: { btns: {
obj: undefined, obj: undefined,
prop: {color: [], bgColor: []}, prop: {color: [], bgColor: []},
get: function(main) { sapphire.getClass(this, main, "btn"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getClass(this, main, "btn");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
body: { body: {
obj: undefined, obj: undefined,
prop: {color: []}, prop: {color: []},
get: function(main) { get: function () {
this.obj = document.body; 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"; } } }, alter: function () {
revert: function() { for (var p in this.prop) { if ( p === "color" ) { this.obj.style.color = this.prop[p]; } } } 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: { captions: {
obj: undefined, obj: undefined,
prop: {color: []}, prop: {color: []},
get: function(main) { sapphire.getClass(this, main, "caption"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getClass(this, main, "caption");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
helps: { helps: {
obj: undefined, obj: undefined,
prop: {color: []}, prop: {color: []},
get: function(main) { sapphire.getClass(this, main, "help-block"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getClass(this, main, "help-block");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
hrs: { hrs: {
obj: undefined, obj: undefined,
prop: {display: []}, prop: {display: []},
get: function(main) { sapphire.getTag(this, main, "hr"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getTag(this, main, "hr");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
inputs: { inputs: {
obj: undefined, obj: undefined,
prop: {color: [], bgColor: []}, prop: {color: [], bgColor: []},
get: function(main) { sapphire.getTag(this, main, "input"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getTag(this, main, "input");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
listGroups: { listGroups: {
obj: undefined, obj: undefined,
prop: {color: [], bgColor: []}, prop: {color: [], bgColor: []},
get: function(main) { sapphire.getClass(this, main, "list-group-item"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getClass(this, main, "list-group-item");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
paginations: { paginations: {
obj: [], obj: [],
prop: {bgColor: []}, prop: {bgColor: []},
get: function(main) { get: function (main) {
var a = main.getElementsByClassName("pagination"); let a = main.getElementsByClassName("pagination");
for (var i=0 ; i<a.length ; i++) { for (let i = 0; i < a.length; i++) {
this.obj[i] = []; this.prop.bgColor[i] = []; this.obj[i] = [];
for (var j=0 ; j<a[i].children.length ; j++) { 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.obj[i][j] = a[i].children[j].children[0];
this.prop.bgColor[i][j] = this.obj[i][j].style.backgroundColor; this.prop.bgColor[i][j] = this.obj[i][j].style.backgroundColor;
} }
} }
}, },
alter: function () { alter: function () {
for (var i=0 ; i<this.obj.length ; i++) for (let i = 0; i < this.obj.length; i++)
for (var j=0 ; j<this.obj[i].length ; j++) for (let j = 0; j < this.obj[i].length; j++)
for (var p in this.prop) for (let p in this.prop)
if ( p === "bgColor" ) { this.obj[i][j].style.backgroundColor = "transparent"; } if (p === "bgColor") {
this.obj[i][j].style.backgroundColor = "transparent";
}
}, },
revert: function() { revert: function () {
for (var i=0 ; i<this.obj.length ; i++) for (let i = 0; i < this.obj.length; i++)
for (var j=0 ; j<this.obj[i].length ; j++) for (let j = 0; j < this.obj[i].length; j++)
for (var p in this.prop) for (let p in this.prop)
if ( p === "bgColor" ) { this.obj[i][j].style.backgroundColor = this.prop[p][i][j]; } if (p === "bgColor") {
this.obj[i][j].style.backgroundColor = this.prop[p][i][j];
}
} }
}, },
panelHeadings: { panelHeadings: {
obj: undefined, obj: undefined,
prop: {bgColor: [], color: []}, prop: {bgColor: [], color: []},
get: function(main) { sapphire.getClass(this, main, "panel-heading"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getClass(this, main, "panel-heading");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
panels: { panels: {
obj: undefined, obj: undefined,
prop: {bgColor: []}, prop: {bgColor: []},
get: function(main) { sapphire.getClass(this, main, "panel"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getClass(this, main, "panel");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
selects: { selects: {
obj: undefined, obj: undefined,
prop: {color: [], bgColor: []}, prop: {color: [], bgColor: []},
get: function(main) { sapphire.getTag(this, main, "select"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getTag(this, main, "select");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
sidenavs: { sidenavs: {
obj: undefined, obj: undefined,
prop: {bgColor: []}, prop: {bgColor: []},
get: function(main) { sapphire.getClass(this, main, "sidenav"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getClass(this, main, "sidenav");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
tds: { tds: {
obj: undefined, obj: undefined,
prop: {bgColor: []}, prop: {bgColor: []},
get: function(main) { sapphire.getTag(this, main, "td"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getTag(this, main, "td");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
thumbnails: { thumbnails: {
obj: undefined, obj: undefined,
prop: {bgColor: []}, prop: {bgColor: []},
get: function(main) { sapphire.getClass(this, main, "thumbnail"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getClass(this, main, "thumbnail");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
}, },
trs: { trs: {
obj: undefined, obj: undefined,
prop: {bgColor: []}, prop: {bgColor: []},
get: function(main) { sapphire.getTag(this, main, "tr"); sapphire.getProp(this); }, get: function (main) {
alter: function() { sapphire.alterProp(this); }, sapphire.getTag(this, main, "tr");
revert: function() { sapphire.revertProp(this); } sapphire.getProp(this);
},
alter: function () {
sapphire.alterProp(this);
},
revert: function () {
sapphire.revertProp(this);
}
} }
}, },
@ -212,35 +355,39 @@ var Sapphire = function () {
drops: undefined, drops: undefined,
canvas: undefined, canvas: undefined,
init: function() { init: function () {
var main = document.getElementById("main"); let main = document.getElementById("main");
for (var e in sapphire.elts) { sapphire.elts[e].get(main); } for (let e in sapphire.elts) {
sapphire.elts[e].get(main);
}
}, },
resize: function() { resize: function () {
var ctx = sapphire.canvas.getContext("2d"); let ctx = sapphire.canvas.getContext("2d");
var img = ctx.getImageData( 0, 0, sapphire.canvas.width, sapphire.canvas.height ); let img = ctx.getImageData(0, 0, sapphire.canvas.width, sapphire.canvas.height);
sapphire.canvas.width = window.innerWidth; sapphire.canvas.width = window.innerWidth;
sapphire.canvas.height = window.innerHeight; sapphire.canvas.height = window.innerHeight;
ctx.fillStyle = "rgba(0, 0, 0, 1)"; ctx.fillStyle = "rgba(0, 0, 0, 1)";
ctx.fillRect(0, 0, sapphire.canvas.width, sapphire.canvas.height); ctx.fillRect(0, 0, sapphire.canvas.width, sapphire.canvas.height);
ctx.putImageData( img, 0, 0 ); ctx.putImageData(img, 0, 0);
sapphire.columns = sapphire.canvas.width/FONT_SIZE; sapphire.columns = sapphire.canvas.width / FONT_SIZE;
sapphire.alpha = Math.max( 0, Math.min( 1, TRAIL_TIME / ( sapphire.canvas.height/FONT_SIZE ) ) ); sapphire.alpha = Math.max(0, Math.min(1, TRAIL_TIME / (sapphire.canvas.height / FONT_SIZE)));
var newDrops = []; let newDrops = [];
for(var x = 0; x < sapphire.columns; x++) { for (let x = 0; x < sapphire.columns; x++) {
if ( sapphire.drops && sapphire.drops[x] ) { newDrops[x] = sapphire.drops[x] } if (sapphire.drops && sapphire.drops[x]) {
newDrops[x] = sapphire.drops[x]
}
else { else {
newDrops[x] = []; newDrops[x] = [];
var nb = Math.floor(Math.random()*MAX_CHAR); let nb = Math.floor(Math.random() * MAX_CHAR);
for (var y = 0; y < nb; y++) for (let y = 0; y < nb; y++)
newDrops[x][y] = 0; newDrops[x][y] = 0;
} }
} }
sapphire.drops = newDrops; sapphire.drops = newDrops;
}, },
run: function() { run: function () {
sapphire.canvas = document.createElement("canvas"); sapphire.canvas = document.createElement("canvas");
document.body.appendChild(sapphire.canvas); document.body.appendChild(sapphire.canvas);
sapphire.canvas.style.position = "fixed"; sapphire.canvas.style.position = "fixed";
@ -248,23 +395,23 @@ var Sapphire = function () {
sapphire.canvas.style.left = 0; sapphire.canvas.style.left = 0;
sapphire.canvas.style.top = 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.fillStyle = "rgba(0, 0, 0, 1)";
ctx.fillRect(0, 0, sapphire.canvas.width, sapphire.canvas.height); ctx.fillRect(0, 0, sapphire.canvas.width, sapphire.canvas.height);
function attenuateBackground() { 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); ctx.fillRect(0, 0, sapphire.canvas.width, sapphire.canvas.height);
} }
function drawMatrixRainDrop() { function drawMatrixRainDrop() {
ctx.fillStyle = RAIN_COLOR; ctx.fillStyle = RAIN_COLOR;
ctx.font = FONT_SIZE + "px arial"; ctx.font = FONT_SIZE + "px arial";
for(var i = 0; i < sapphire.drops.length; i++) { for (let i = 0; i < sapphire.drops.length; i++) {
for (var j = 0; j < sapphire.drops[i].length; j++) { for (let j = 0; j < sapphire.drops[i].length; j++) {
var text = CHARACTERS[Math.floor(Math.random()*CHARACTERS.length)]; let text = CHARACTERS[Math.floor(Math.random() * CHARACTERS.length)];
ctx.fillText(text, i*FONT_SIZE, sapphire.drops[i][j]*FONT_SIZE); 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) if (sapphire.drops[i][j] * FONT_SIZE > sapphire.canvas.height && Math.random() > 0.975)
sapphire.drops[i][j] = 0; sapphire.drops[i][j] = 0;
sapphire.drops[i][j]++; sapphire.drops[i][j]++;
} }
@ -278,19 +425,29 @@ var Sapphire = function () {
sapphire.resize(); sapphire.resize();
window.addEventListener('resize', 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); window.removeEventListener('resize', sapphire.resize);
clearInterval(sapphire.triggerHandle); clearInterval(sapphire.triggerHandle);
sapphire.canvas.parentNode.removeChild(sapphire.canvas); sapphire.canvas.parentNode.removeChild(sapphire.canvas);
}, },
alterElts: function() { for (var e in sapphire.elts) { sapphire.elts[e].alter(main); } }, alterElts: function () {
revertElts: function() { for (var e in sapphire.elts) { sapphire.elts[e].revert(main); } }, 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) { if (!sapphire.runOnce) {
sapphire.runOnce = true; sapphire.runOnce = true;
sapphire.init(); sapphire.init();
@ -306,11 +463,7 @@ var Sapphire = function () {
sapphire.revertElts(); sapphire.revertElts();
} }
} }
} };
return sapphire; return sapphire;
} };
var s = Sapphire();
Konami(s.activate);

7
templates/base.html
View file

@ -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/typeahead/typeahead.js"></script>
<script src="/static/js/handlebars/handlebars.js"></script> <script src="/static/js/handlebars/handlebars.js"></script>
<script src="/static/js/konami/konami.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/bootstrap-tokenfield/bootstrap-tokenfield.js"></script>
<script src="/static/js/shortcuts.js"></script> <script src="/static/js/shortcuts.js"></script>