Mirrors/queerallyear
2
0
Fork 0
mirror of https://github.com/lenaschimmel/queerallyear synced 2024-11-10 05:54:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

Made gradients object oriented, so that there can be more then one.

Browse source
This commit is contained in:
Lena Schimmel 2019-06-18 04:19:53 +02:00
parent df6e2a7707
commit 7c52b1adf4
3 changed files with 72 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
node/server/server.js
View file

@ -3,7 +3,7 @@ var express = require('express');
var fs = require('fs');
var app = express();
var { pages } = require('./pages.js');
const recolor = require('../tool/recolor.js');
const GradientSvg = require('../tool/recolor.js');
const flags = require('../tool/flags.js');
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
@ -92,9 +92,8 @@ async function initSvg(withshadow) {
dom = await JSDOM.fromFile("../../web/img/logo.svg", {} );
var doc = dom.window.document;
//var gradients = dom.window.document.querySelector("defs");
var gradients = doc.getElementsByTagName("defs").item(0);
recolor.prepareGradients(gradients);
return gradients;
var defs = doc.getElementsByTagName("defs").item(0);
return new GradientSvg(defs);
}
//gradientsFutureWithShadow = initSvg(true);
@ -110,7 +109,7 @@ app.get('/design/download', async function (req, res) {
//var gradients = withshadow ? (await gradientsFutureWithShadow) : (await gradientsFuture);
var gradients = await gradientsFuture;
recolor.changeGradients(gradients, flags.allFlags[flag]);
gradients.changeGradients(flags.allFlags[flag]);
var start = '<!--?xml version="1.0" encoding="UTF-8" standalone="no"?--><html><head></head><body>';
var end = '</body></html>';

18
node/tool/browser.js
View file

@ -1,17 +1,15 @@
const recolor = require('./recolor.js');
const GradientSvg = require('./recolor.js');
const flags = require('./flags.js');
const util = require('util');
var gradients = window.document.getElementsByTagName("defs").item(0);
recolor.prepareGradients(gradients);
var defs = window.document.getElementsByTagName("defs").item(0);
gradientSvg = new GradientSvg(defs);
window.queer = {};
window.queer.showflag = function (flagname) {
recolor.changeGradients(gradients, flags[flagname], true);
gradientSvg.changeGradients(flags[flagname], true);
}
window.queer.initFlagAnimation = function () {
var lastFlagName = "Gay";
@ -27,16 +25,13 @@ window.queer.initFlagAnimation = function () {
$("#identity").html("(" + flagName + ")").fadeIn(500);
});
recolor.changeGradients(gradients, flags.allFlags[flagName], true);
gradientSvg.changeGradients(flags.allFlags[flagName], true);
}
}
setInterval(nextFlag, 3500);
}
window.queer.initArrow = function () {
window.queer.scrollDown = function () {
@ -68,6 +63,5 @@ window.queer.initArrow = function () {
window.queer.flagSelected = function () {
flagName = $("#flagselect :selected").val();
console.log("Selected flag: " + flagName);
recolor.changeGradients(gradients, flags.allFlags[flagName], false);
gradientSvg.changeGradients(flags.allFlags[flagName], false);
}

121
node/tool/recolor.js
View file

@ -1,84 +1,87 @@
var util = require('util');
var color = require('color');
var rangesL = {};
var rangesS = {};
var composedRangesL = {};
var composedRangesS = {};
var originalColors = {};
// the parameter "gradients" must be the DOM element with tag "defs" from the SVG file.
exports.prepareGradients = function(gradients) {
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 stops = gradient.children;
originalColors[id] = {};
for (let s = 0; s < stops.length; s++) {
var stop = stops.item(s);
originalColors[id][s] = color(stop.getAttribute("stop-color"));
}
if(!rangesL[letter])
rangesL[letter] = [];
if(!rangesS[letter])
rangesS[letter] = [];
rangesL[letter].push(getLightnessRange(stops));
rangesS[letter].push(getSaturationRange(stops));
}
}
for (const letter in rangesL) {
if (rangesL.hasOwnProperty(letter)) {
const letterRanges = rangesL[letter];
composedRangesL[letter] = composeRanges(letterRanges);
}
}
for (const letter in rangesS) {
if (rangesS.hasOwnProperty(letter)) {
const letterRanges = rangesS[letter];
composedRangesS[letter] = composeRanges(letterRanges);
}
}
}
function sleep(milliseconds) {
return new Promise(resolve => setTimeout(resolve, milliseconds));
}
exports.changeGradients = async function(gradients, flag, animate = false) {
for (let i = 0; i < gradients.children.length; i++) {
const gradient = gradients.children.item(i);
var method = GradientSvg.prototype;
// the parameter "defs" must be the DOM element with tag "defs" from the SVG file.
function GradientSvg(defs) {
this.defs = defs;
this.rangesL = {};
this.rangesS = {};
this.composedRangesL = {};
this.composedRangesS = {};
this.originalColors = {};
for (let i = 0; i < defs.children.length; i++) {
const gradient = defs.children.item(i);
var id = gradient.id;
if (id.length == 3) {
var letter = id.substring(0,2);
colorLetter(gradient, flag[letter], animate);
var stops = gradient.children;
this.originalColors[id] = {};
for (let s = 0; s < stops.length; s++) {
var stop = stops.item(s);
this.originalColors[id][s] = color(stop.getAttribute("stop-color"));
}
if(!this.rangesL[letter])
this.rangesL[letter] = [];
if(!this.rangesS[letter])
this.rangesS[letter] = [];
this.rangesL[letter].push(getLightnessRange(stops));
this.rangesS[letter].push(getSaturationRange(stops));
}
}
for (const letter in this.rangesL) {
if (this.rangesL.hasOwnProperty(letter)) {
const letterRanges = this.rangesL[letter];
this.composedRangesL[letter] = composeRanges(letterRanges);
}
}
for (const letter in this.rangesS) {
if (this.rangesS.hasOwnProperty(letter)) {
const letterRanges = this.rangesS[letter];
this.composedRangesS[letter] = composeRanges(letterRanges);
}
}
}
method.changeGradients = async function(flag, animate = false) {
for (let i = 0; i < this.defs.children.length; i++) {
const gradient = this.defs.children.item(i);
var id = gradient.id;
if (id.length == 3) {
var letter = id.substring(0,2);
this.colorLetter(gradient, flag[letter], animate);
}
if(animate)
await sleep(25);
}
}
async function colorLetter(gradient, targetColor, animate = false) {
method.colorLetter = async function(gradient, targetColor, animate = false) {
var id = gradient.id;
var letter = id.substring(0,2);
var [th, ts, tl] = color(targetColor).hsl().color;
var stops = gradient.children;
var diffLightness = adaptRange(composedRangesL[letter], tl);
var diffSaturation = adaptRange(composedRangesS[letter], 75);
var diffLightness = adaptRange(this.composedRangesL[letter], tl);
var diffSaturation = adaptRange(this.composedRangesS[letter], 75);
for (let s = 0; s < stops.length; s++) {
if(animate)
await sleep(45);
var stop = stops.item(s);
var stopcolor = originalColors[id][s];
var stopcolor = this.originalColors[id][s];
var [sh, ss, sl] = stopcolor.hsl().color;
@ -91,8 +94,6 @@ async function colorLetter(gradient, targetColor, animate = false) {
}
}
exports.colorLetter = colorLetter;
function composeRanges(rangeArray) {
var min, max;
for (const key in rangeArray) {
@ -146,4 +147,6 @@ function getRange(stops, index) {
"mid": (min + max) / 2,
"width": max - min
};
}
}
module.exports = GradientSvg;