rezometz
/
re2o
mirror of https://gitlab.federez.net/re2o/re2o
8
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Sapphire.js cleanup 

Make sapphire.js follow new javascript conventions. Also fix a dirty JS
in base.html.
add_link_port_search_results
Alexandre Iooss 7 years ago
committed by Alexandre IOOSS
parent
033c22bf1d
commit
0ef6ec5b28
2 changed files with 316 additions and 158 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 467
      static/js/sapphire.js
  2. 7
      templates/base.html

467
static/js/sapphire.js
View File

@ -21,189 +21,332 @@
// 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];
}
} }
} }
}, },
elts: { elts: {
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 (let p in this.prop) {
if (p === "color") {
this.obj.style.color = "white";
}
}
}, },
alter: function() { for (var p in this.prop) { if ( p === "color" ) { this.obj.style.color = "white"; } } }, revert: 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 = 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() { }
for (var i=0 ; i<this.obj.length ; i++) },
for (var j=0 ; j<this.obj[i].length ; j++) revert: function () {
for (var p in this.prop) for (let i = 0; i < this.obj.length; i++)
if ( p === "bgColor" ) { this.obj[i][j].style.backgroundColor = this.prop[p][i][j]; } 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: { 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>

Write Preview
Loading…
Cancel
Save