patek/patek-logo-custom-element
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: patek:vojta001/load-font-at-the-end
Branches Tags
patek:master
patek:vojta001/simplify-styles
patek:vojta001/load-font-at-the-end
...
pull from: patek:master
Branches Tags
patek:master
patek:vojta001/simplify-styles
patek:vojta001/load-font-at-the-end

9 Commits
vojta001/l ... master

Author SHA1 Message Date
Greenscreener
d22c509af7 88 88 
88                                 88
88                                 88
88,dPPYba,  8b,dPPYba, 88       88 88,dPPYba,
88P'    "8a 88P'   "Y8 88       88 88P'    "8a
88       d8 88         88       88 88       88
88b,   ,a8" 88         "8a,   ,a88 88       88
8Y"Ybbd8"'  88          `"YbbdP'Y8 88       88
 2022-01-06 08:32:29 +01:00
Greenscreener
a9d73d164a Fixed an issue, where the logo would be off center, if the font-family attribute was applied to the element. 2020-05-18 19:43:43 +02:00
Greenscreener
2661c6da1c Added fallback value usage. 2020-05-12 11:43:31 +02:00
Greenscreener
73b5844991 Fixed bügs, separated special static function for generating binary. 2020-02-22 20:55:23 +01:00
Greenscreener
0a5cf1419b Code style update. 2019-07-17 22:47:35 +02:00
Greenscreener
ebb95c5f91 A better fix for the giant logo at startup. 2019-07-17 22:12:26 +02:00
Greenscreener
895805bda1 Fixed weird bug from last commit. 2019-07-15 21:06:25 +02:00
Greenscreener
4d655ee8c4 Reapplied 'This fixes bulma breaking layout.' 2019-07-15 20:49:04 +02:00
Greenscreener
d7455d95ff Fixed the logo being giant for a second while page is loading. Also a layout mishap. 2019-07-15 19:39:38 +02:00
3 changed files with 83 additions and 69 deletions
Show Stats Expand all files Collapse all files

9
README.md
View File

@ -3,17 +3,20 @@
Reusable custom element for the Pátek logo. Reusable custom element for the Pátek logo.
## Installation ## Installation
Include the patekLogo.js file into your HTML file. Include the patek-logo.js file into your HTML file.
```html ```html
<script src="path/to/patekLogo.js"></script> <script src="path/to/patek-logo.js"></script>
``` ```
## Usage ## Usage
```html ```html
<patek-logo title="<your title here>" subtitle="<your subtitle here>"></patek-logo> <patek-logo title="<your title here>" subtitle="<your subtitle here>">Fallback value here</patek-logo>
``` ```
If no `title` or `subtitle` attribute is set, it defaults to `"Pátek"` and `""` respectively. If no `title` or `subtitle` attribute is set, it defaults to `"Pátek"` and `""` respectively.
The fallback value is used only in browsers without support for custom elements
or with JavaScript disabled.
The logo **will** obey all CSS rules. The logo **will** obey all CSS rules.
## Examples ## Examples
You can find examples in [examples.html](examples.html). You can find examples in [examples.html](examples.html).

56
examples.html
View File

@ -5,36 +5,36 @@
<title>PátekLogo Examples</title> <title>PátekLogo Examples</title>
</head> </head>
<body> <body>
<p><patek-logo></patek-logo></p> <p><patek-logo>Pátek</patek-logo></p>
<p><patek-logo title="Custom" subtitle="Text" style="font-size: 50px;"></patek-logo></p> <p><patek-logo title="Custom" subtitle="Text" style="font-size: 50px;">Custom Text</patek-logo></p>
<p><patek-logo style="font-size: 100px;"></patek-logo></p> <p><patek-logo style="font-size: 100px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 75px;"></patek-logo></p> <p><patek-logo style="font-size: 75px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 60px;"></patek-logo></p> <p><patek-logo style="font-size: 60px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px;"></patek-logo></p> <p><patek-logo style="font-size: 50px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 40px;"></patek-logo></p> <p><patek-logo style="font-size: 40px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 32px;"></patek-logo></p> <p><patek-logo style="font-size: 32px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 24px;"></patek-logo></p> <p><patek-logo style="font-size: 24px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 16px;"></patek-logo></p> <p><patek-logo style="font-size: 16px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 11px;"></patek-logo></p> <p><patek-logo style="font-size: 11px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 8px;"></patek-logo></p> <p><patek-logo style="font-size: 8px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 5px;"></patek-logo></p> <p><patek-logo style="font-size: 5px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: #0b2a37;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: #0b2a37;">Pátek</patek-logo></p>
<br> <br>
<p><patek-logo style="font-size: 50px; color: white; background-color: red;"></patek-logo><patek-logo style="font-size: 50px; color: red;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: red;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: red;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: orangered;"></patek-logo><patek-logo style="font-size: 50px; color: orangered;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: orangered;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: orangered;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: yellow;"></patek-logo><patek-logo style="font-size: 50px; color: yellow;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: yellow;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: yellow;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: lime;"></patek-logo><patek-logo style="font-size: 50px; color: lime;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: lime;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: lime;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: green;"></patek-logo><patek-logo style="font-size: 50px; color: green;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: green;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: green;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: darkcyan;"></patek-logo><patek-logo style="font-size: 50px; color: darkcyan;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: darkcyan;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: darkcyan;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: blue;"></patek-logo><patek-logo style="font-size: 50px; color: blue;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: blue;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: blue;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: blueviolet;"></patek-logo><patek-logo style="font-size: 50px; color: blueviolet;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: blueviolet;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: blueviolet;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: purple;"></patek-logo><patek-logo style="font-size: 50px; color: purple;"></patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: purple;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: purple;">Pátek</patek-logo></p>
<br> <br>
<p><patek-logo title="Print" subtitle="Pátek" style="font-size: 50px; color: black; background-color: #ff7300;"></patek-logo></p> <p><patek-logo title="Print" subtitle="Pátek" style="font-size: 50px; color: black; background-color: #ff7300;">PátekPrint</patek-logo></p>
<p><patek-logo title="Talks" subtitle="Pátek" style="font-size: 50px; color: red; background-color: white;"></patek-logo></p> <p><patek-logo title="Talks" subtitle="Pátek" style="font-size: 50px; color: red; background-color: white;">PátekTalks</patek-logo></p>
<p><patek-logo title="Space" subtitle="Pátek" style="font-size: 50px; color: white; background-color: #24007f;"></patek-logo></p> <p><patek-logo title="Space" subtitle="Pátek" style="font-size: 50px; color: white; background-color: #24007f;">PátekSpace</patek-logo></p>
<br> <br>
<div style="font-size: 20px;"> Vae, germanus ausus! Fermiums observare, tanquam domesticus luna. Heu. Animalis regius advena est. Pol, a bene axona. Pes, itineris tramitem, et lixa. Hydras sunt orexiss de flavum demolitione. Cur homo <patek-logo title="cadunt?"></patek-logo> Absolutios mori, tanquam regius gallus. Zirbus, imber, et orexis. Ventuss sunt apolloniatess de emeritis lapsus. Apolloniates neuter onus est. Aususs tolerare! Cur visus trabem? Vae. <a href="https://example.com"> <patek-logo title="Example!"></patek-logo></a> Exemplar, cacula, et scutum. Byssus trabems, tanquam velox danista. Calceuss assimilant!</div> <div style="font-size: 20px;"> Vae, germanus ausus! Fermiums observare, tanquam domesticus luna. Heu. Animalis regius advena est. Pol, a bene axona. Pes, itineris tramitem, et lixa. Hydras sunt orexiss de flavum demolitione. Cur homo <patek-logo title="cadunt?">cadunt?</patek-logo> Absolutios mori, tanquam regius gallus. Zirbus, imber, et orexis. Ventuss sunt apolloniatess de emeritis lapsus. Apolloniates neuter onus est. Aususs tolerare! Cur visus trabem? Vae. <a href="https://example.com"> <patek-logo title="Example!">Example!</patek-logo></a> Exemplar, cacula, et scutum. Byssus trabems, tanquam velox danista. Calceuss assimilant!</div>
<script src="patekLogo.js"></script> <script src="patek-logo.js"></script>
</body> </body>
</html> </html>

87
patekLogo.js → patek-logo.js
View File

@ -1,7 +1,6 @@
const template = document.createElement("template"); const template = document.createElement("template");
template.innerHTML = ` template.innerHTML = `
<style> <style>
@import 'https://unpkg.com/firacode@1.206.0/distr/fira_code.css';
svg > * { svg > * {
fill: currentColor; fill: currentColor;
} }
@ -20,18 +19,20 @@ template.innerHTML = `
font-weight: bold; font-weight: bold;
} }
#titlePlaceholder { #titlePlaceholder {
margin-right: -0.9em; margin-right: -1.55em;
visibility: hidden; visibility: hidden;
} }
#titleText { #titleText {
font-size: 1em; font-size: 1em;
right: 1.1em; right: 1.1em;
bottom: 1.181em; bottom: 1.181em;
line-height: initial;
} }
#subtitleText { #subtitleText {
font-size: 0.6em; font-size: 0.6em;
top: 1.583333333em; top: 1.583333333em;
right: 3.4em; right: 3.4em;
line-height: initial;
} }
#wrapper { #wrapper {
position: relative; position: relative;
@ -43,12 +44,14 @@ template.innerHTML = `
white-space: nowrap; white-space: nowrap;
} }
:host { :host {
font-family: "Fira Code", monospace;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin-bottom: -0.3em; margin-bottom: -0.3em;
height: 2em; height: 2em;
} }
</style> </style>
<link rel="stylesheet" href="https://unpkg.com/firacode@1.206.0/distr/fira_code.css">
<span id="wrapper"> <span id="wrapper">
<span id="titlePlaceholder"></span> <span id="titlePlaceholder"></span>
<svg id="svg8" version="1.1" viewBox="0 0 22.452 22.454" xmlns="http://www.w3.org/2000/svg"> <svg id="svg8" version="1.1" viewBox="0 0 22.452 22.454" xmlns="http://www.w3.org/2000/svg">
@ -66,45 +69,53 @@ template.innerHTML = `
`; `;
class PatekLogo extends HTMLElement { class PatekLogo extends HTMLElement {
calculateCircles() { calculateCircles() {
const inputValue = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; const inputValue = typeof this.attributes.title !== "undefined" && this.attributes.title.value !== "" ? this.attributes.title.value : "Pátek";
const normalizedInputValue = inputValue.normalize("NFD").replace(/[^\x00-\x7F]/g, ""); const opacities = PatekLogo.calculateBinary(inputValue);
let outputChar = String.fromCharCode(0); for (let i = 0; i < 7; i++) {
for (let i = 0; i < normalizedInputValue.length; i++) { this.shadow.getElementById("circle" + i.toString()).style.fillOpacity = opacities[i];
outputChar ^= normalizedInputValue[i].charCodeAt(0); }
} }
const opacities = outputChar.toString(2);
this.shadow.getElementById("circle0").style.fillOpacity = opacities[0]; static calculateBinary(inputValue) {
this.shadow.getElementById("circle1").style.fillOpacity = opacities[1]; /* eslint no-control-regex: "off", "unicorn/no-hex-escape": off */
this.shadow.getElementById("circle2").style.fillOpacity = opacities[2]; const normalizedInputValue = inputValue.normalize("NFD").replace(/[^\x00-\x7F]/g, "");
this.shadow.getElementById("circle3").style.fillOpacity = opacities[3];
this.shadow.getElementById("circle4").style.fillOpacity = opacities[4];
this.shadow.getElementById("circle5").style.fillOpacity = opacities[5];
this.shadow.getElementById("circle6").style.fillOpacity = opacities[6];
} let outputChar = String.fromCharCode(0);
constructor() { for (let i = 0; i < normalizedInputValue.length; i++) {
super(); outputChar ^= normalizedInputValue[i].charCodeAt(0);
this.shadow = this.attachShadow({mode: "open"}); }
const clone = template.content.cloneNode(true);
clone.getElementById("titlePlaceholder").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; const outputString = outputChar.toString(2);
clone.getElementById("titleText").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek";
clone.getElementById("subtitleText").innerText = typeof this.attributes.subtitle !== "undefined" ? this.attributes.subtitle.value : ""; return "0".repeat(7 - outputString.length) + outputString;
this.shadow.appendChild(clone); }
this.calculateCircles();
} constructor() {
static get observedAttributes() { return ['title', 'subtitle']; } super();
attributeChangedCallback(name, oldValue, newValue) { this.shadow = this.attachShadow({mode: "open"});
if (name === 'title') { const clone = template.content.cloneNode(true);
this.calculateCircles(); clone.getElementById("titlePlaceholder").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek";
this.shadow.getElementById("titleText").innerText = newValue || "Pátek"; clone.getElementById("titleText").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek";
this.shadow.getElementById("titlePlaceholder").innerText = newValue || "Pátek"; clone.getElementById("subtitleText").innerText = typeof this.attributes.subtitle !== "undefined" ? this.attributes.subtitle.value : "";
} else if (name === 'subtitle') { this.shadow.append(clone);
this.shadow.getElementById("subtitleText").innerText = newValue; this.calculateCircles();
} }
}
static get observedAttributes() {
return ["title", "subtitle"];
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === "title") {
this.calculateCircles();
this.shadow.getElementById("titleText").innerText = newValue || "Pátek";
this.shadow.getElementById("titlePlaceholder").innerText = newValue || "Pátek";
} else if (name === "subtitle") {
this.shadow.getElementById("subtitleText").innerText = newValue;
}
}
} }
customElements.define("patek-logo", PatekLogo); customElements.define("patek-logo", PatekLogo);