Merge branch 'gs/logo-generator-png' into 'master'

Added PNG generation to logo generator.

See merge request patek-devs/patek.cz!15

themes/patek/assets/css/logo-generator.scss

@@ -31,3 +31,6 @@
 	margin-left: -5px;
 	margin-right: 5px;
 }
+.label.narrowLabel {
+	padding-right: .5em;
+}

themes/patek/layouts/shortcodes/logo-generator.html

@@ -20,10 +20,15 @@
 		<div class="navbar">
 			<div class="navbar-start" id="outputs">
 				<span class="navbar-item"><button class="button is-primary" onclick="downloadSvg()"><svg class="svg-in-button" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path fill="#fff" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>  Download SVG</button></span>
+				<span class="navbar-item"><button class="button is-primary" onclick="downloadPng(document.getElementById('widthip').value)"><svg class="svg-in-button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24" height="24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg> Download PNG</button></span>
+				<span class="navbar-item"><label for="widthip" class="label narrowLabel">PNG Width: </label><input type="number" value="1000" class="input" style="width: 5em;" id="widthip"></span>
 			</div>
 		</div>
 	</div>
 </div>
+<canvas id="canvas" width="1" height="1" style="display: none">
+
+</canvas>
 <script type="text/javascript">
 	const svgTemplate = document.createElement("template");
 	svgTemplate.innerHTML = `
@@ -64,6 +69,47 @@
 		});
 	});
 	function downloadSvg () {
+		const svg = generateSvg();
+
+		const a = document.createElement('a');
+		a.href = URL.createObjectURL(new Blob([svg.querySelector("svg").outerHTML], {type: "image/svg+xml"}))
+		a.download = "patek-logo.svg";
+
+		a.style.display = "none";
+		document.body.append(a);
+		a.click();
+		document.body.removeChild(a);
+	}
+	function downloadPng(width) {
+		const svg = generateSvg();
+		const patekLogo = document.getElementById("patek-logo");
+		const renderedWidth = patekLogo.clientWidth;
+		const renderedHeight = patekLogo.clientHeight;
+		svg.querySelector("svg").setAttribute("width", width.toString());
+		svg.querySelector("svg").setAttribute("height", ((renderedHeight/renderedWidth)*width).toString());
+		const canvas = document.getElementById("canvas");
+		canvas.width = width;
+		canvas.height = (renderedHeight/renderedWidth)*width;
+		const img = new Image();
+		const ctx = canvas.getContext("2d");
+		const url = URL.createObjectURL(new Blob([svg.querySelector("svg").outerHTML], {type: "image/svg+xml"}))
+		img.src = url;
+		img.width = 100;
+		img.height = 100;
+		img.addEventListener("load", () => {
+			ctx.drawImage(img, 0, 0);
+			const png = canvas.toDataURL("image/png");
+			const a = document.createElement('a');
+			a.href = png;
+			a.download = "patek-logo.png";
+			a.style.display = "none";
+			document.body.append(a);
+			a.click();
+			document.body.removeChild(a);
+		});
+
+	}
+	function generateSvg() {
 		const svg = svgTemplate.content.cloneNode(true);
 		const patekLogo = document.getElementById("patek-logo");
 		const binary = PatekLogo.calculateBinary(document.getElementById("titip").value || "Pátek");
@@ -96,14 +142,7 @@
 
 		svg.querySelector("#content").setAttribute("transform", `translate(${offsetX},${offsetY})`);
 
-		const a = document.createElement('a');
+		return svg;
-		a.href = URL.createObjectURL(new Blob([svg.querySelector("svg").outerHTML], {type: "image/svg+xml"}))
-		a.download = "patek-logo.svg";
-
-		a.style.display = "none";
-		document.body.append(a);
-		a.click();
-		document.body.removeChild(a);
 	}
 	function swapColors() {
 		const fg = document.getElementById("fgip");