patek/patek.cz
9
0
Fork 0
Code Issues 4 Pull Requests 2 Packages Projects Releases Wiki Activity

Added swapper, fine tuned svg boundary.

Browse Source
This commit is contained in:
Greenscreener 2020-02-23 11:54:16 +01:00
parent feea091945
commit 61c3516c83
1 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
themes/patek/layouts/shortcodes/logo-generator.html
View File

@ -4,8 +4,9 @@
<div class="navbar-start" id="inputs"> <div class="navbar-start" id="inputs">
<span class="navbar-item"><input id="titip" type="text" class="input" placeholder="Title"></span> <span class="navbar-item"><input id="titip" type="text" class="input" placeholder="Title"></span>
<span class="navbar-item"><input id="subip" type="text" class="input" placeholder="Subtitle"></span> <span class="navbar-item"><input id="subip" type="text" class="input" placeholder="Subtitle"></span>
<span class="navbar-item"><label class="label" for="fgip">Foreground: </label><input id="fgip" type="color" class="input color" placeholder="Foreground" value="#ffffff"></span> <span class="navbar-item"><label class="label" for="fgip">FG: </label><input id="fgip" type="color" class="input color" placeholder="Foreground" value="#ffffff"></span>
<span class="navbar-item"><label class="label" for="bgip">Background: </label><input id="bgip" type="color" class="input color" placeholder="Background" value="#0b2a37"></span> <span class="navbar-item"><button class="button"onclick="swapColors()"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/><path d="M0 0h24v24H0z" fill="none"/></svg></button></span>
<span class="navbar-item"><label class="label" for="bgip">BG: </label><input id="bgip" type="color" class="input color" placeholder="Background" value="#0b2a37"></span>
<span class="navbar-item"><label for="padip" class="label">Padding: </label><input id="padip" type="range" min="0" value="32" max="384" class="range"></span> <span class="navbar-item"><label for="padip" class="label">Padding: </label><input id="padip" type="range" min="0" value="32" max="384" class="range"></span>
</div> </div>
</div> </div>
@ -45,20 +46,20 @@
</g> </g>
</svg> </svg>
`; `;
function updateLogo() {
const patekLogo = document.getElementById("patek-logo");
patekLogo.style.color = document.getElementById("fgip").value;
patekLogo.style.backgroundColor = document.getElementById("bgip").value;
const padding = document.getElementById("padip").value - 1 + 1;
patekLogo.style.padding = `${padding}px ${padding}px ${padding + 160}px`;
patekLogo.setAttribute("title", document.getElementById("titip").value);
patekLogo.setAttribute("subtitle", document.getElementById("subip").value);
}
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const fn = () => { updateLogo()
const patekLogo = document.getElementById("patek-logo");
patekLogo.style.color = document.getElementById("fgip").value;
patekLogo.style.backgroundColor = document.getElementById("bgip").value;
const padding = document.getElementById("padip").value - 1 + 1;
patekLogo.style.padding = `${padding}px ${padding}px ${padding + 160}px`;
patekLogo.setAttribute("title", document.getElementById("titip").value);
patekLogo.setAttribute("subtitle", document.getElementById("subip").value);
};
fn();
document.querySelectorAll("#inputs input").forEach(e => { document.querySelectorAll("#inputs input").forEach(e => {
e.addEventListener("keyup", fn); e.addEventListener("keyup", updateLogo);
e.addEventListener("change", fn); e.addEventListener("change", updateLogo);
}); });
}); });
@ -79,13 +80,13 @@
svg.querySelectorAll("path, text").forEach(e => e.attributes.fill.value = document.getElementById("fgip").value); svg.querySelectorAll("path, text").forEach(e => e.attributes.fill.value = document.getElementById("fgip").value);
svg.querySelector("rect").attributes.fill.value = document.getElementById("bgip").value; svg.querySelector("rect").attributes.fill.value = document.getElementById("bgip").value;
const width = patekLogo.clientWidth - 5.158; const width = patekLogo.clientWidth;
const height = patekLogo.clientHeight; const height = patekLogo.clientHeight;
const padding = parseInt(document.getElementById("padip").value); const padding = parseInt(document.getElementById("padip").value);
const originalWidth = 322.67578; const originalWidth = 322.67578;
const offsetX = -padding + width - originalWidth + 1.9; const offsetX = -padding + width - originalWidth;
const offsetY = padding; const offsetY = padding;
svg.querySelector("rect").attributes.width.value = width; svg.querySelector("rect").attributes.width.value = width;
@ -104,4 +105,12 @@
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
} }
function swapColors() {
const fg = document.getElementById("fgip");
const bg = document.getElementById("bgip");
const t = fg.value;
fg.value = bg.value;
bg.value = t;
updateLogo();
}
</script> </script>