Ability to define own color combinations

This commit is contained in:
Lena Schimmel 2019-06-27 14:56:32 +02:00
parent 4d6bb7b78d
commit fe0755a5ff
8 changed files with 208 additions and 59 deletions

View file

@ -74,7 +74,7 @@ function getNavi(activeName) {
}
function flagList() {
var list = "";
var list = "<option>Eigene Farbkombination</option>";
for (const key in flags.allFlags) {
if (flags.allFlags.hasOwnProperty(key)) {
list += '<option>' + key + '</option>';
@ -167,7 +167,14 @@ app.get('/design/download', async function (req, res) {
return;
}
gradients.changeGradients(flags.allFlags[flag]);
if(flag == "Eigene Farbkombination") {
flags.letters.forEach(letter => {
var color = "#" + (req.query[letter] || "FFFFFF");
gradients.colorLetter(letter, color, false);
});
} else {
gradients.changeGradients(flags.allFlags[flag]);
}
gradients.setShadowMode(withshadow ? "on" : "off");
if (type == "svg") {

View file

@ -1,7 +1,10 @@
const GradientSvg = require('./recolor.js');
const flags = require('./flags.js');
const util = require('util');
var colorLib = require('color');
var lastLayout = "";
var activeColor = "#000000";
window.queer = {};
window.queer.showflag = function (flagname) {
@ -36,8 +39,27 @@ window.queer.initFlagAnimation = function () {
window.queer.initPreviewLogo = function() {
previewLogo = new GradientSvg(window.document.getElementById("previewlogo"), window.document, window);
previewLogo.setShadowMode("off");
flags.letters.forEach(letter => {
$("#"+letter).attr("value", sessionStorage.getItem(letter) || "FFFFFF");
});
window.queer.flagSelected();
window.queer.layoutSelected();
var gs = window.document.getElementsByTagName("g");
for (let g of gs) {
if(g.getAttribute("id").startsWith("letter")) {
var letter = g.getAttribute("id").substring(6);
console.log("letter: " + letter);
if(letter.length == 2) {
g.setAttribute("onclick", "queer.colorLetter('"+ letter +"')");
}
}
}
}
window.queer.colorLetter = function(letter) {
$("#"+letter).attr("value", activeColor.substring(1));
sessionStorage.setItem(letter, activeColor.substring(1));
previewLogo.colorLetter(letter, activeColor);
}
window.queer.initArrow = function () {
@ -71,24 +93,69 @@ window.queer.initArrow = function () {
window.queer.flagSelected = function () {
flagName = $("#flagselect :selected").val();
if(flagName == "Eigene Farbkombination") {
flags.letters.forEach(letter => {
var color = "#" + ($("#"+letter).val() || "FFFFFF");
previewLogo.colorLetter(letter, color, false);
});
$("#colors").removeClass("hidden");
} else {
previewLogo.changeGradients(flags.allFlags[flagName], false);
$("#colors").addClass("hidden");
}
shadow = $("#withshadow").is(":checked");
previewLogo.changeGradients(flags.allFlags[flagName], false);
previewLogo.setShadowMode(shadow ? "on" : "off");
}
window.queer.layoutSelected = function () {
layoutName = $("#layoutselect :selected").val();
console.log("Layout: " + layoutName);
$.get("/img/shadow/" + layoutName + ".svg", function(data) {
data.documentElement.setAttribute("id", "previewlogo");
$("#previewlogo").replaceWith(data.documentElement);
previewLogo = new GradientSvg(window.document.getElementById("previewlogo"), window.document, window);
flagName = $("#flagselect :selected").val();
shadow = $("#withshadow").is(":checked");
previewLogo.changeGradients(flags.allFlags[flagName], false);
previewLogo.setShadowMode(shadow ? "on" : "off");
});
if(lastLayout != layoutName) {
lastLayout = layoutName;
console.log("Layout: " + layoutName);
$.get("/img/shadow/" + layoutName + ".svg", function(data) {
data.documentElement.setAttribute("id", "previewlogo");
$("#previewlogo").replaceWith(data.documentElement);
queer.initPreviewLogo();
});
}
}
window.queer.initColors = function() {
var x = "<div class='colorgroup'>";
for (let l = 0; l < 100; l+= 15) {
var color = colorLib.hsl(0,0,l);
id = "color" + color.hex().substring(1);
x += '<div class="cd" id="'+id+'" style="background-color:'+color+'" onclick="queer.activateColor(\''+id+'\');" />';
}
x += " (Gray)</div>";
$("#colors").append(x);
for (const flagKey in flags.allFlags) {
if (flags.allFlags.hasOwnProperty(flagKey)) {
const flag = flags.allFlags[flagKey];
var colors = {};
for (const letterKey in flag) {
if (flag.hasOwnProperty(letterKey)) {
const color = flag[letterKey];
colors[color] = true;
}
}
var x = "<div class='colorgroup'>";
for(const color in colors) {
id = "color" + color.substring(1);
x += '<div class="cd" id="'+id+'" style="background-color:'+color+'" onclick="queer.activateColor(\''+id+'\');" />';
}
x += " ("+flagKey+")</div>";
$("#colors").append(x);
}
}
}
window.queer.activateColor = function(id) {
$(".cd").removeClass("active");
$("#" + id).addClass("active");
activeColor = "#" + id.substring(5);
}

View file

@ -141,6 +141,25 @@ const agenderGreen = "#CDF29F";
const kinkBlue = "#0E24C0";
const kinkRed = "#ED4024";
const gayRed = "#CA0E26";
const gayOrange = "#EC7408";
const gayYellow = "#F9DA00";
const gayGreen = "#6FB327";
const gayBlue = "#073E85";
const gayViolet = "#8E3371";
const gayPink = "#E4007D";
exports.allColors = [
white, black, transBlue, transRose, biPink, biViolet, biBlue, aceGrey, aceViolet, panPink, panYellow, panBlue,
romanticDarkGreen, romanticLightGreen, intersexYellow, nonbinaryYellow, nonbinaryViolet, genderqueerViolet,
genderqueerGreen, phillyBrown, genderfluidPink, genderfluidViolet, genderfluidBlue, polysexualPink, polysexualGreen,
polysexualBlue, lebsian1, lebsian2, lebsian3, lebsian4, lebsian5, lebsian6, lebsian7, polyamRed, polyamBlue,
polyamYellow, agenderGrey, agenderGreen, kinkBlue, kinkRed, gayRed, gayOrange, gayYellow, gayGreen, gayBlue, gayViolet, gayPink
];
exports.gay = flag7(gayRed, gayOrange, gayYellow, gayGreen, gayBlue, gayViolet, gayPink);
exports.aro = flag5(romanticDarkGreen, romanticLightGreen, white, aceGrey, black);
exports.nonbinary = flag4(nonbinaryYellow, white, nonbinaryViolet, black);
exports.genderqueer = flag3(genderqueerViolet, white, genderqueerGreen);
@ -175,6 +194,7 @@ exports.kink = {
exports.allFlags = {
"Gay" : exports.gay,
"Asexuell" : exports.ace,
"Bisexuell" : exports.bi,
"Pansexuell" : exports.pan,
@ -189,4 +209,6 @@ exports.allFlags = {
"Agender" : exports.agender,
"Lesbisch" : exports.lebsian,
"Kinky" : exports.kink
};
};
exports.letters = ["Q0", "U0", "E0", "E1", "R0", "A0", "L0", "L1", "Y0", "E2", "A1", "R1"];

View file

@ -73,7 +73,23 @@ method.changeGradients = async function(flag, animate = false) {
var id = gradient.id;
if (id.length == 3) {
var letter = id.substring(0,2);
this.colorLetter(gradient, flag[letter], animate);
this.colorLetterGradient(gradient, flag[letter], animate);
}
if(animate)
await sleep(25);
}
}
method.colorLetter = async function(letterToColor, targetColor, 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);
if(letter == letterToColor) {
this.colorLetterGradient(gradient, targetColor, animate);
}
}
if(animate)
await sleep(25);
@ -99,7 +115,7 @@ method.setShadowMode = function(mode) {
}
}
method.colorLetter = async function(gradient, targetColor, animate = false) {
method.colorLetterGradient = async function(gradient, targetColor, animate = false) {
var id = gradient.id;
var letter = id.substring(0,2);
var [th, ts, tl] = color(targetColor).hsl().color;

View file

@ -38,15 +38,36 @@
</select>
<br>
<input type="hidden" name="Q0" id="Q0">
<input type="hidden" name="U0" id="U0">
<input type="hidden" name="E0" id="E0">
<input type="hidden" name="E1" id="E1">
<input type="hidden" name="R0" id="R0">
<input type="hidden" name="A0" id="A0">
<input type="hidden" name="L0" id="L0">
<input type="hidden" name="L1" id="L1">
<input type="hidden" name="Y0" id="Y0">
<input type="hidden" name="E2" id="E2">
<input type="hidden" name="A1" id="A1">
<input type="hidden" name="R1" id="R1">
<button type="submit">Herunterladen</button>
</form>
<h1>Vorschau</h1>
$PREVIEWLOGO
<noscript>Die Vorschau erfordert Javascript. Der Download funtioniert auch ohne.</noscript>
<div id="colors" class="hidden">
<h1>Eigene Farbkombination bauen</h1>
<p>Wähle unten eine Farbe aus, und klicke auf die Buchstaben um sie entsprechend einzufärben.</p>
<p>Deine Farbauswahl wird lokal gespeichert, bis du deine Browsersitzung beendest.</p>
</div>
<div style="clear:both; height:2em; display:block;"> </div>
</div>
</div>
</div>
<script src="js/modules.js"></script>
<script>
queer.initPreviewLogo();
queer.initColors();
</script>

View file

@ -331,6 +331,24 @@ textarea {
color: black;
}
.cd {
display: inline-block;
width: 1em;
height: 1em;
border: 2px solid transparent;
margin: 2px;
vertical-align: bottom;
}
.cd.active {
border: 2px solid black;
}
.colorgroup {
float: left;
width: 45%;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.

View file

@ -63,10 +63,10 @@
id="defs226">
<linearGradient
gradientUnits="userSpaceOnUse"
y2="292.53"
x2="505.12"
y1="200.71001"
x1="452.10999"
x1="424.78"
y1="82.760002"
x2="477.79001"
y2="174.57001"
id="E13">
<stop
id="stop1144"
@ -83,10 +83,10 @@
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
y2="208.50999"
x2="438.60999"
y1="300.32001"
x1="491.62"
x1="464.29001"
y1="182.37"
x2="411.28"
y2="90.550003"
id="E12">
<stop
id="stop1118"
@ -103,10 +103,10 @@
</linearGradient>
<linearGradient
gradientUnits="userSpaceOnUse"
y2="296.13"
x2="506.39001"
y1="259.62"
x1="443.14999"
x1="415.82001"
y1="141.67"
x2="479.04999"
y2="178.17"
id="E11">
<stop
id="stop1111"
@ -121,8 +121,6 @@
stop-color="#153f72"
offset="0.89" />
</linearGradient>
<style
id="style2">.cls-1{fill:url(#Unbenannter_Verlauf_160);}.cls-2{fill:url(#Unbenannter_Verlauf_164);}.cls-3{fill:url(#Unbenannter_Verlauf_51);}.cls-4{fill:url(#Unbenannter_Verlauf_55);}.cls-5{fill:url(#Unbenannter_Verlauf_58);}.cls-6{fill:url(#Unbenannter_Verlauf_51-2);}.cls-7{fill:url(#Unbenannter_Verlauf_55-2);}.cls-8{fill:url(#Unbenannter_Verlauf_58-2);}.cls-9{fill:url(#Unbenannter_Verlauf_22);}.cls-10{fill:url(#Unbenannter_Verlauf_8);}.cls-11{fill:url(#Unbenannter_Verlauf_90);}.cls-12{fill:url(#Unbenannter_Verlauf_83);}.cls-13{fill:url(#Unbenannter_Verlauf_77);}.cls-14{fill:url(#Unbenannter_Verlauf_119);}.cls-15{fill:url(#Unbenannter_Verlauf_127);}.cls-16{fill:url(#Unbenannter_Verlauf_104);}.cls-17{fill:url(#Unbenannter_Verlauf_105);}.cls-18{fill:url(#Unbenannter_Verlauf_71);}.cls-19{fill:url(#Unbenannter_Verlauf_68);}.cls-20{fill:url(#Unbenannter_Verlauf_35);}.cls-21{fill:url(#Unbenannter_Verlauf_39);}.cls-22{fill:url(#Unbenannter_Verlauf_46);}.cls-23{fill:url(#Unbenannter_Verlauf_28);}.cls-24{fill:url(#Unbenannter_Verlauf_11);}.cls-25{fill:url(#Unbenannter_Verlauf_16);}.cls-26{fill:url(#Unbenannter_Verlauf_108);}.cls-27{fill:url(#Unbenannter_Verlauf_113);}.cls-28{fill:url(#Unbenannter_Verlauf_133);}.cls-29{fill:url(#Unbenannter_Verlauf_151);}.cls-30{fill:url(#Unbenannter_Verlauf_155);}</style>
<linearGradient
id="R12"
x1="571.62"
@ -890,7 +888,7 @@
transform="translate(10.982823,-16.692362)"
id="g1129">
<g
id="g1042"
id="letterA0"
transform="translate(38,20.699999)">
<polygon
style="fill:url(#A03);fill-opacity:1"
@ -913,7 +911,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1046"
id="letterL0"
transform="translate(38,15.999999)">
<path
style="fill:url(#linearGradient1099)"
@ -931,7 +929,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1050"
id="letterL1"
transform="translate(38,17.499999)">
<path
style="fill:url(#linearGradient1097)"
@ -953,24 +951,24 @@
transform="translate(17.627502,18.897638)"
id="g1149">
<g
id="g1033"
id="letterE1"
transform="translate(32.656586,-16)">
<path
style="fill:url(#Unbenannter_Verlauf_51-2);fill-opacity:1"
style="fill:url(#E13);fill-opacity:1"
id="path240"
transform="translate(-224.32,-83.36)"
d="M 482.8,171.68 H 423.75 V 83.36 h 53.75 v 16.78 h -27.38 v 16.91 h 26.75 V 134 h -26.75 v 21 h 32.68 z"
class="cls-6"
inkscape:connector-curvature="0" />
<path
style="fill:url(#Unbenannter_Verlauf_55-2);fill-opacity:1"
style="fill:url(#E12);fill-opacity:1"
id="path242"
transform="translate(-224.32,-83.36)"
d="M 450.12,154.9 V 134 h 0.5 c -8.34,0 -15.1,-14.2 -15.1,-31.72 a 57.66,57.66 0 0 1 3,-18.87 h -14.77 v 88.32 H 482.8 V 154.9 Z"
class="cls-7"
inkscape:connector-curvature="0" />
<path
style="fill:url(#Unbenannter_Verlauf_58-2);fill-opacity:1"
style="fill:url(#E11);fill-opacity:1"
id="path244"
transform="translate(-224.32,-83.36)"
d="m 450.12,154.9 v -0.09 c -14.72,-0.88 -26.37,-12.55 -26.37,-26.87 v 43.74 H 482.8 V 154.9 Z"
@ -978,7 +976,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1023"
id="letterU0"
transform="translate(32.291107,-14.29)">
<path
style="fill:url(#linearGradient1091)"
@ -996,7 +994,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1037"
id="letterR0"
transform="translate(34.100505,-18.463941)">
<path
style="fill:url(#linearGradient1095)"
@ -1014,7 +1012,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1028"
id="letterE0"
transform="translate(32.026838,-17.1)">
<path
style="fill:url(#linearGradient1093);fill-opacity:1"
@ -1039,7 +1037,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1017"
id="letterQ0"
transform="translate(35.310136,-11.39)">
<path
style="fill:url(#Q03);fill-opacity:1"
@ -1068,7 +1066,7 @@
transform="translate(226.28282,-131.70236)"
id="g1117">
<g
id="g1068"
id="letterR1"
transform="translate(-177.5,135.05606)">
<path
style="fill:url(#R12)"
@ -1086,7 +1084,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1059"
id="letterE2"
transform="translate(-175.5,135)">
<path
style="fill:url(#linearGradient1102);fill-opacity:1"
@ -1111,7 +1109,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1054"
id="letterY0"
transform="translate(-175.5,134.87)">
<path
style="fill:url(#Y02);fill-opacity:1"
@ -1129,7 +1127,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1064"
id="letterA1"
transform="translate(-177.5,133.5)">
<polygon
style="fill:url(#A13)"

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 33 KiB

View file

@ -889,7 +889,7 @@
transform="translate(17.627502,18.897638)"
id="g1149">
<g
id="g1033"
id="letterE1"
transform="translate(42.656586)">
<path
style="fill:url(#Unbenannter_Verlauf_51-2);fill-opacity:1"
@ -914,7 +914,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1023"
id="letterU0"
transform="translate(24.291107,-4.29)">
<path
style="fill:url(#linearGradient1091)"
@ -932,7 +932,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1037"
id="letterR0"
transform="translate(50.100505,-18.463941)">
<path
style="fill:url(#linearGradient1095)"
@ -950,7 +950,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1028"
id="letterE0"
transform="translate(32.026838,-17.1)">
<path
style="fill:url(#linearGradient1093);fill-opacity:1"
@ -975,7 +975,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1017"
id="letterQ0"
transform="translate(1.310136,-11.39)">
<path
style="fill:url(#Q03);fill-opacity:1"
@ -1004,7 +1004,7 @@
transform="translate(98.782822,-1.1023622)"
id="g1129">
<g
id="g1042"
id="letterA0"
transform="translate(-18,8.6999988)">
<polygon
style="fill:url(#A03);fill-opacity:1"
@ -1027,7 +1027,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1046"
id="letterL0"
transform="translate(0,-1.2207031e-6)">
<path
style="fill:url(#linearGradient1099)"
@ -1045,7 +1045,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1050"
id="letterL1"
transform="translate(38,17.499999)">
<path
style="fill:url(#linearGradient1097)"
@ -1067,7 +1067,7 @@
transform="translate(50.482823,-21.102363)"
id="g1117">
<g
id="g1068"
id="letterR1"
transform="translate(-101.5,123.05606)">
<path
style="fill:url(#R12)"
@ -1085,7 +1085,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1059"
id="letterE2"
transform="translate(-143.5,119)">
<path
style="fill:url(#linearGradient1102);fill-opacity:1"
@ -1110,7 +1110,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1054"
id="letterY0"
transform="translate(-175.5,134.87)">
<path
style="fill:url(#Y02);fill-opacity:1"
@ -1128,7 +1128,7 @@
inkscape:connector-curvature="0" />
</g>
<g
id="g1064"
id="letterA1"
transform="translate(-121.5,135.5)">
<polygon
style="fill:url(#A13)"

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 35 KiB