diff --git a/node/server/server.js b/node/server/server.js index efd5852..510d038 100644 --- a/node/server/server.js +++ b/node/server/server.js @@ -74,7 +74,7 @@ function getNavi(activeName) { } function flagList() { - var list = ""; + var list = ""; for (const key in flags.allFlags) { if (flags.allFlags.hasOwnProperty(key)) { list += ''; @@ -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") { diff --git a/node/tool/browser.js b/node/tool/browser.js index 39b44fe..59f698f 100644 --- a/node/tool/browser.js +++ b/node/tool/browser.js @@ -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 = "
"; + for (let l = 0; l < 100; l+= 15) { + var color = colorLib.hsl(0,0,l); + id = "color" + color.hex().substring(1); + x += '
'; + } + x += " (Gray)
"; + $("#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 = "
"; + for(const color in colors) { + id = "color" + color.substring(1); + x += '
'; + } + x += " ("+flagKey+")
"; + $("#colors").append(x); + } + } +} + +window.queer.activateColor = function(id) { + $(".cd").removeClass("active"); + $("#" + id).addClass("active"); + activeColor = "#" + id.substring(5); } \ No newline at end of file diff --git a/node/tool/flags.js b/node/tool/flags.js index 6914dad..6d0590b 100644 --- a/node/tool/flags.js +++ b/node/tool/flags.js @@ -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 -}; \ No newline at end of file +}; + +exports.letters = ["Q0", "U0", "E0", "E1", "R0", "A0", "L0", "L1", "Y0", "E2", "A1", "R1"]; diff --git a/node/tool/recolor.js b/node/tool/recolor.js index 0d1b4cc..138b53a 100644 --- a/node/tool/recolor.js +++ b/node/tool/recolor.js @@ -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; diff --git a/web/contents/design.fragment b/web/contents/design.fragment index 9be8c7b..eb57adf 100644 --- a/web/contents/design.fragment +++ b/web/contents/design.fragment @@ -38,15 +38,36 @@
+ + + + + + + + + + + + +

Vorschau

$PREVIEWLOGO + + +
\ No newline at end of file diff --git a/web/css/main.css b/web/css/main.css index 5eab13d..67e2735 100755 --- a/web/css/main.css +++ b/web/css/main.css @@ -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. diff --git a/web/img/logo_orig_shadow.svg b/web/img/logo_orig_shadow.svg index 840add1..aa5fbea 100644 --- a/web/img/logo_orig_shadow.svg +++ b/web/img/logo_orig_shadow.svg @@ -63,10 +63,10 @@ id="defs226"> -