From ba3ca680a1cb3f88e22474ce08d722a985e0d7a0 Mon Sep 17 00:00:00 2001 From: mellodoot Date: Sun, 30 Oct 2022 13:23:22 +0000 Subject: [PATCH 1/9] =?UTF-8?q?handy=20docs!=20=F0=9F=93=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index c11ef5f..3017248 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,7 @@ + + Progressive Pride Flag \ No newline at end of file From 968339a8ea46faa64b6e8d83ddc4af25f02576d5 Mon Sep 17 00:00:00 2001 From: mellodoot Date: Sun, 30 Oct 2022 13:31:38 +0000 Subject: [PATCH 2/9] renamed pridetriangle.css --- index.html | 4 ++-- pride-triangle.css => pridetriangle.css | 0 2 files changed, 2 insertions(+), 2 deletions(-) rename pride-triangle.css => pridetriangle.css (100%) diff --git a/index.html b/index.html index 3017248..6724c29 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + - + Progressive Pride Flag \ No newline at end of file diff --git a/pride-triangle.css b/pridetriangle.css similarity index 100% rename from pride-triangle.css rename to pridetriangle.css From 7b90125f440c6457dbf221cc7f16bdc7289b567f Mon Sep 17 00:00:00 2001 From: mellodoot Date: Sat, 18 Mar 2023 03:14:49 +0000 Subject: [PATCH 3/9] =?UTF-8?q?compacted=20into=20a=20single=20js=20file!?= =?UTF-8?q?=20=F0=9F=93=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 19 +++++----- index.html | 7 ---- pridetriangle.css | 27 -------------- pridetriangle.js | 89 +++++++++++++++++++++++++++++++++++++++++++++++ pridetriangle.svg | 25 ++++++------- 5 files changed, 113 insertions(+), 54 deletions(-) delete mode 100644 index.html delete mode 100644 pridetriangle.css create mode 100644 pridetriangle.js diff --git a/README.md b/README.md index 72496ae..8344393 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,23 @@ # progressive pride flag! 🌈 -## made with ❀ by mellodoot! -a lovely little pride flag made in vector, and optimised to be nice and lightweight! +## made with ❀ by mellodoot -it tucks into the top-left or top-right corner of any website you drop it on, and you're free to link it to whichever lgbt-supporting site you like :) +a lovely little pride flag made in svg, loaded with js, and optimised to be nice and lightweight! + +it tucks into the top-right corner of any website you drop it on, and you're free to link it to whichever lgbt-supporting site you like :) ![progressive pride flag](pridetriangle.svg) this flag is currently in use over at my own website, [mellodoot.com](https://mellodoot.com)! feel free to check it out if you'd like to see it in action! -### how do I put this in the top-right of my website? -simple! just add `right` as an attribute to the surrounding `` tag! the css stylesheet will handle the rest :) +## how do I use this on my own website? + +simple! just slap this code into your html document, and the js file will be automagically loaded into your site, generating your flag! -**example:** ```html - + ``` -have fun spreading the gay! 🌈 \ No newline at end of file +...or copy the code from `pridetriangle.js` and drop it into your own self-hosted file. up to you! + +have fun spreading the gay! 🌈 diff --git a/index.html b/index.html deleted file mode 100644 index 6724c29..0000000 --- a/index.html +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - Progressive Pride Flag - \ No newline at end of file diff --git a/pridetriangle.css b/pridetriangle.css deleted file mode 100644 index 94a1164..0000000 --- a/pridetriangle.css +++ /dev/null @@ -1,27 +0,0 @@ -#pride-triangle img { - position: fixed; - top: 0; - left: 0; - width: 120px; - transform-origin: 0% 0%; - transition: transform .5s cubic-bezier(.32,1.63,.41,1.01); - z-index: 100; -} -#pride-triangle[right] img { - left: initial; - right: -120px; - rotate: 90deg; -} -#pride-triangle img:hover { - transform: scale(110%); -} -#pride-triangle img:active { - transform: scale(90%); -} - -@media only screen and (max-width: 720px) { - #pride-triangle img { - width: 6rem; - right: -6rem; - } -} \ No newline at end of file diff --git a/pridetriangle.js b/pridetriangle.js new file mode 100644 index 0000000..9212b6c --- /dev/null +++ b/pridetriangle.js @@ -0,0 +1,89 @@ +function create_path(id, d, fill) { + const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); + path.setAttribute('id', id); + path.setAttribute('d', d); + path.setAttribute('style', `fill:${fill}`); + return path; +} + +function create_rect(id, x, y, width, height, fill) { + const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); + rect.setAttribute('id', id); + rect.setAttribute('x', x); + rect.setAttribute('y', y); + rect.setAttribute('width', width); + rect.setAttribute('height', height); + rect.setAttribute('style', `fill:${fill}`); + return rect; +} + +function create_svg() { + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("viewBox", "0 0 120 120"); + + const title = document.createElementNS("http://www.w3.org/2000/svg", "title"); + title.textContent = "Progressive Pride Flag"; + svg.appendChild(title); + + svg.appendChild(create_path("red", "M40,0 H0 L20,20 Z", "#d20605")); + svg.appendChild(create_path("orange", "M80,0 H40 L20,20 L40,40 Z", "#ef9c00")); + svg.appendChild(create_path("yellow", "M120,0 H80 L40,40 L60,60 Z", "#e5fe02")); + svg.appendChild(create_path("green", "M120,40 V0 L60,60 L80,80 Z", "#09be01")); + svg.appendChild(create_path("blue", "M120,80 V40 L80,80 L100,100 Z", "#081a9a")); + svg.appendChild(create_path("purple", "M120,80 L100,100 L120,120 Z", "#76008a")); + + svg.appendChild(create_rect("black", "70", "0", "50", "50", "#010101")); + svg.appendChild(create_rect("brown", "80", "0", "40", "40", "#603814")); + svg.appendChild(create_rect("lightblue", "90", "0", "30", "30", "#73d6ed")); + svg.appendChild(create_rect("pink", "100", "0", "20", "20", "#ffafc8")); + svg.appendChild(create_rect("white", "110", "0", "10", "10", "#ffffff")); + + return svg; +} + +function create_triangle() { + const link = document.createElement("a"); + link.id = "pride-triangle"; + link.href = "https://github.com/mellodoot/prideflag"; + link.target = "_blank"; + + const triangle = create_svg(); + triangle.style.position = "fixed"; + triangle.style.top = "0"; + triangle.style.right = "0"; + triangle.style.width = "120px"; + triangle.style.transformOrigin = "100% 0%"; + triangle.style.transition = "transform .5s cubic-bezier(.32,1.63,.41,1.01)"; + triangle.style.zIndex = "100"; + + triangle.onmouseenter = function () { + this.style.transform = "scale(110%)"; + }; + triangle.onmouseleave = function () { + this.style.transform = "initial"; + }; + + triangle.onmousedown = function () { + this.style.transform = "scale(90%)"; + }; + triangle.onmouseup = function () { + this.style.transform = "initial"; + }; + + window.onresize = function () { + if (window.innerWidth <= 720) { + triangle.style.width = "6rem"; + triangle.style.right = "-6rem"; + } else { + triangle.style.width = "120px"; + triangle.style.right = "-120px"; + } + } + + link.appendChild(triangle); + + return link; +} + +const triangle = create_triangle(); +document.body.appendChild(triangle); \ No newline at end of file diff --git a/pridetriangle.svg b/pridetriangle.svg index 94cb217..4227c7b 100644 --- a/pridetriangle.svg +++ b/pridetriangle.svg @@ -1,13 +1,14 @@ - - - - - - - - - - - - + + + + + + + + + + + + + \ No newline at end of file From 35e0bbca0b6f376d709e87ea18fb616036e5aadc Mon Sep 17 00:00:00 2001 From: mellodoot Date: Sat, 18 Mar 2023 04:31:35 +0000 Subject: [PATCH 4/9] added intersex flag! --- pridetriangle.js | 25 ++++++++++++++++++++----- pridetriangle.svg | 13 ++++++++----- 2 files changed, 28 insertions(+), 10 deletions(-) diff --git a/pridetriangle.js b/pridetriangle.js index 9212b6c..4724509 100644 --- a/pridetriangle.js +++ b/pridetriangle.js @@ -17,6 +17,18 @@ function create_rect(id, x, y, width, height, fill) { return rect; } +function create_circle(id, x, y, radius, stroke, stroke_width, fill) { + const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); + circle.setAttribute('id', id); + circle.setAttribute('cx', x); + circle.setAttribute('cy', y); + circle.setAttribute('r', radius); + circle.setAttribute('stroke', stroke); + circle.setAttribute('stroke-width', stroke_width); + circle.setAttribute('fill', fill); + return circle; +} + function create_svg() { const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("viewBox", "0 0 120 120"); @@ -32,11 +44,14 @@ function create_svg() { svg.appendChild(create_path("blue", "M120,80 V40 L80,80 L100,100 Z", "#081a9a")); svg.appendChild(create_path("purple", "M120,80 L100,100 L120,120 Z", "#76008a")); - svg.appendChild(create_rect("black", "70", "0", "50", "50", "#010101")); - svg.appendChild(create_rect("brown", "80", "0", "40", "40", "#603814")); - svg.appendChild(create_rect("lightblue", "90", "0", "30", "30", "#73d6ed")); - svg.appendChild(create_rect("pink", "100", "0", "20", "20", "#ffafc8")); - svg.appendChild(create_rect("white", "110", "0", "10", "10", "#ffffff")); + svg.appendChild(create_rect("black", "60", "0", "60", "60", "#010101")); + svg.appendChild(create_rect("brown", "70", "0", "50", "50", "#603814")); + svg.appendChild(create_rect("lightblue", "80", "0", "40", "40", "#73d6ed")); + svg.appendChild(create_rect("pink", "90", "0", "30", "30", "#ffafc8")); + svg.appendChild(create_rect("white", "100", "0", "20", "20", "#ffffff")); + + svg.appendChild(create_rect("intyellow", "110", "0", "10", "10", "#fed800")); + svg.appendChild(create_circle("intpurple", "120", "0", "5", "#7800ab", "2", "none")); return svg; } diff --git a/pridetriangle.svg b/pridetriangle.svg index 4227c7b..fda4bb5 100644 --- a/pridetriangle.svg +++ b/pridetriangle.svg @@ -6,9 +6,12 @@ - - - - - + + + + + + + + \ No newline at end of file From 183b2d1dd78e3528adaefabc21f08bbf092712cf Mon Sep 17 00:00:00 2001 From: mellodoot Date: Sat, 18 Mar 2023 04:31:41 +0000 Subject: [PATCH 5/9] updated readme! --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8344393..62dd427 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,14 @@ it tucks into the top-right corner of any website you drop it on, and you're fre ![progressive pride flag](pridetriangle.svg) -this flag is currently in use over at my own website, [mellodoot.com](https://mellodoot.com)! feel free to check it out if you'd like to see it in action! +this flag currently represents: + +- original LGBTQ+ colours! πŸ³οΈβ€πŸŒˆ +- marginalized people of colour (POC) communities! πŸ§‘πŸΎπŸ§”πŸΏ +- trans pride! πŸ³οΈβ€βš§οΈ +- intersex! ♂️ ♀️ + +this flag is currently in use over at my own website, [mellodoot.com](https://www.mellodoot.com)! feel free to check it out if you'd like to see it in action! ## how do I use this on my own website? From f3ff9adb9c6104796909720dd13ff709947c8b1d Mon Sep 17 00:00:00 2001 From: mellodoot Date: Sat, 18 Mar 2023 04:35:20 +0000 Subject: [PATCH 6/9] updated readme! --- README.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8344393..62dd427 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,14 @@ it tucks into the top-right corner of any website you drop it on, and you're fre ![progressive pride flag](pridetriangle.svg) -this flag is currently in use over at my own website, [mellodoot.com](https://mellodoot.com)! feel free to check it out if you'd like to see it in action! +this flag currently represents: + +- original LGBTQ+ colours! πŸ³οΈβ€πŸŒˆ +- marginalized people of colour (POC) communities! πŸ§‘πŸΎπŸ§”πŸΏ +- trans pride! πŸ³οΈβ€βš§οΈ +- intersex! ♂️ ♀️ + +this flag is currently in use over at my own website, [mellodoot.com](https://www.mellodoot.com)! feel free to check it out if you'd like to see it in action! ## how do I use this on my own website? From 1a9fb03ffbb231b1dfd700c9696c5ec596919da8 Mon Sep 17 00:00:00 2001 From: mellodoot Date: Sat, 18 Mar 2023 04:59:45 +0000 Subject: [PATCH 7/9] fixed triangle disappearing after window resize! --- pridetriangle.js | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/pridetriangle.js b/pridetriangle.js index 4724509..5278b0f 100644 --- a/pridetriangle.js +++ b/pridetriangle.js @@ -85,16 +85,6 @@ function create_triangle() { this.style.transform = "initial"; }; - window.onresize = function () { - if (window.innerWidth <= 720) { - triangle.style.width = "6rem"; - triangle.style.right = "-6rem"; - } else { - triangle.style.width = "120px"; - triangle.style.right = "-120px"; - } - } - link.appendChild(triangle); return link; From ba1d4bda401e0e20279541ae27352052e6a1a2cc Mon Sep 17 00:00:00 2001 From: mellodoot Date: Tue, 18 Apr 2023 11:07:44 +0100 Subject: [PATCH 8/9] pro tip: we don't need to generate static svg! --- README.md | 4 +- pridetriangle.js => prideflag-generator.js | 61 +++++++++++++++++++-- prideflag.js | 64 ++++++++++++++++++++++ 3 files changed, 122 insertions(+), 7 deletions(-) rename pridetriangle.js => prideflag-generator.js (60%) create mode 100644 prideflag.js diff --git a/README.md b/README.md index 62dd427..29d726d 100644 --- a/README.md +++ b/README.md @@ -23,8 +23,10 @@ simple! just slap this code into your html document, and the js file will be aut ```html + + ``` -...or copy the code from `pridetriangle.js` and drop it into your own self-hosted file. up to you! +...or copy the code from `prideflag.js` and drop it into your own self-hosted file. up to you! have fun spreading the gay! 🌈 diff --git a/pridetriangle.js b/prideflag-generator.js similarity index 60% rename from pridetriangle.js rename to prideflag-generator.js index 5278b0f..ddbf5f9 100644 --- a/pridetriangle.js +++ b/prideflag-generator.js @@ -1,3 +1,23 @@ +/** + * πŸ³οΈβ€πŸŒˆπŸ³οΈβ€βš§οΈπŸ’– pride flag πŸ’–πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆ + * made with ❀️ by mellodoot, 2023 + * + * an alternate, insanely over-engineered version of prideflag.js + * which generates all required svg elements at runtime. + * + * given the svg doesn't exactly change however, this turned + * out to be wholly unnecessary. + * + * neat proof of concept, though! + */ + +/** + * Creates an SVG path using the given parameters. + * @param {string} id The SVG `id` tag to give the path element. + * @param {string} d An SVG draw path. + * @param {string} fill A fill colour to apply within an included `style` tag. + * @returns An SVG path. + */ function create_path(id, d, fill) { const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute('id', id); @@ -6,6 +26,16 @@ function create_path(id, d, fill) { return path; } +/** + * Creates an SVG rectangle using the given parameters. + * @param {string} id The SVG `id` tag to give the rectangle element. + * @param {number} x The X coordinate of the rectangle. + * @param {number} y The Y coordinate of the rectangle. + * @param {number} width The width of the rectangle. + * @param {number} height The height of the rectangle. + * @param {string} fill A fill colour to apply within an included `style` tag. + * @returns An SVG rectangle. + */ function create_rect(id, x, y, width, height, fill) { const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute('id', id); @@ -17,19 +47,35 @@ function create_rect(id, x, y, width, height, fill) { return rect; } -function create_circle(id, x, y, radius, stroke, stroke_width, fill) { +/** + * Creates an SVG circle using the given parameters. + * @param {string} id The SVG `id` tag to give the circle element. + * @param {number} x The X coordinate of the circle. + * @param {number} y The Y coordinate of the circle. + * @param {number} radius The radius of the circle. + * @param {string} stroke_colour The stroke colour of the rectangle. + * @param {number} stroke_width The stroke width of the rectangle. + * @param {string} fill A fill colour to apply within an included `style` tag. + * @returns An SVG rectangle. + */ +function create_circle(id, x, y, radius, stroke_colour, stroke_width, fill) { const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); circle.setAttribute('id', id); circle.setAttribute('cx', x); circle.setAttribute('cy', y); circle.setAttribute('r', radius); - circle.setAttribute('stroke', stroke); + circle.setAttribute('stroke', stroke_colour); circle.setAttribute('stroke-width', stroke_width); circle.setAttribute('fill', fill); return circle; } -function create_svg() { +/** + * Uses the included SVG generation methods to create a complete + * pride flag SVG element. + * @returns An SVG pride flag. + */ +function create_pride_flag_svg() { const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.setAttribute("viewBox", "0 0 120 120"); @@ -56,13 +102,16 @@ function create_svg() { return svg; } -function create_triangle() { +/** + * @returns A completed pride flag with link and animations. + */ +function create_pride_flag() { const link = document.createElement("a"); link.id = "pride-triangle"; link.href = "https://github.com/mellodoot/prideflag"; link.target = "_blank"; - const triangle = create_svg(); + const triangle = create_pride_flag_svg(); triangle.style.position = "fixed"; triangle.style.top = "0"; triangle.style.right = "0"; @@ -90,5 +139,5 @@ function create_triangle() { return link; } -const triangle = create_triangle(); +const triangle = create_pride_flag(); document.body.appendChild(triangle); \ No newline at end of file diff --git a/prideflag.js b/prideflag.js new file mode 100644 index 0000000..aabc865 --- /dev/null +++ b/prideflag.js @@ -0,0 +1,64 @@ +/** + * πŸ³οΈβ€πŸŒˆπŸ³οΈβ€βš§οΈπŸ’– pride flag πŸ’–πŸ³οΈβ€βš§οΈπŸ³οΈβ€πŸŒˆ + * made with ❀️ by mellodoot, 2023 + * + * web: https://mellodoot.com + * source: https://github.com/mellodoot/prideflag + */ + +const pride_flag_svg = +` + + + + + + + + + + + + + + + +`; + +function create_pride_flag() { + const container = document.createElement("a"); + container.id = "pride-triangle"; + container.href = "https://github.com/mellodoot/prideflag"; + container.target = "_blank"; + + triangle = document.createElement('svg'); + triangle.innerHTML = pride_flag_svg; + triangle.style.position = "fixed"; + triangle.style.top = "0"; + triangle.style.right = "0"; + triangle.style.width = "120px"; + triangle.style.transformOrigin = "100% 0%"; + triangle.style.transition = "transform .5s cubic-bezier(.32,1.63,.41,1.01)"; + triangle.style.zIndex = "8008135"; + + triangle.onmouseenter = function () { + this.style.transform = "scale(110%)"; + }; + triangle.onmouseleave = function () { + this.style.transform = "initial"; + }; + + triangle.onmousedown = function () { + this.style.transform = "scale(90%)"; + }; + triangle.onmouseup = function () { + this.style.transform = "initial"; + }; + + container.appendChild(triangle); + + return container; +} + +pride_flag = create_pride_flag(); +document.body.appendChild(pride_flag); \ No newline at end of file From 0498a68f90377b746a379dda01f4a6eb3cb6add9 Mon Sep 17 00:00:00 2001 From: mellodoot Date: Tue, 18 Apr 2023 11:32:11 +0100 Subject: [PATCH 9/9] inject css at runtime- no onmouse events! --- prideflag.js | 90 +++++++++++++++++++++++++++------------------------- 1 file changed, 46 insertions(+), 44 deletions(-) diff --git a/prideflag.js b/prideflag.js index aabc865..42fc6c9 100644 --- a/prideflag.js +++ b/prideflag.js @@ -7,58 +7,60 @@ */ const pride_flag_svg = -` - - - - - - + ` + + + + + + - - - - - - - - -`; + + + + + + + + + `; + +const pride_flag_css = + `#pride-flag svg { + position: fixed; + top: 0; + right: 0; + width: 120px; + transform-origin: 100% 0%; + transition: transform .5s cubic-bezier(.32,1.63,.41,1.01); + z-index: 8008135; + pointer-events: none; + } + #pride-flag svg:hover { + transform: scale(110%); + } + #pride-flag svg:active { + transform: scale(110%); + } + #pride-flag svg * { + pointer-events: all; + }`; function create_pride_flag() { const container = document.createElement("a"); - container.id = "pride-triangle"; + container.id = "pride-flag"; container.href = "https://github.com/mellodoot/prideflag"; container.target = "_blank"; - - triangle = document.createElement('svg'); - triangle.innerHTML = pride_flag_svg; - triangle.style.position = "fixed"; - triangle.style.top = "0"; - triangle.style.right = "0"; - triangle.style.width = "120px"; - triangle.style.transformOrigin = "100% 0%"; - triangle.style.transition = "transform .5s cubic-bezier(.32,1.63,.41,1.01)"; - triangle.style.zIndex = "8008135"; - - triangle.onmouseenter = function () { - this.style.transform = "scale(110%)"; - }; - triangle.onmouseleave = function () { - this.style.transform = "initial"; - }; - - triangle.onmousedown = function () { - this.style.transform = "scale(90%)"; - }; - triangle.onmouseup = function () { - this.style.transform = "initial"; - }; - - container.appendChild(triangle); - + container.innerHTML = pride_flag_svg; return container; } +function load_pride_flag_style() { + const pride_stylesheet = document.createElement('style'); + pride_stylesheet.textContent = pride_flag_css; + document.head.appendChild(pride_stylesheet); +} + +load_pride_flag_style(); pride_flag = create_pride_flag(); document.body.appendChild(pride_flag); \ No newline at end of file