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

Compare commits

base: patek:master
Branches Tags
patek:master
patek:vojta001/simplify-styles
patek:vojta001/load-font-at-the-end
..
compare: patek:vojta001/load-font-at-the-end
Branches Tags
patek:master
patek:vojta001/simplify-styles
patek:vojta001/load-font-at-the-end

1 Commits
master ... vojta001/l

Author SHA1 Message Date
Vojtěch Káně
edd2da4714 Move loading font to the end of the style not to block applying the style while loading the font and thus allowing the logo to scale uncontrolably under certain conditions and browsers. 
The original bug is only visible in scaled variants - <patek-logo style="font-size: 100px;"></patek-logo>.
 2019-07-17 10:28:34 +02:00
3 changed files with 69 additions and 83 deletions
Show Stats Expand all files Collapse all files

9
README.md
View File

@ -3,20 +3,17 @@
Reusable custom element for the Pátek logo. Reusable custom element for the Pátek logo.
## Installation ## Installation
Include the patek-logo.js file into your HTML file. Include the patekLogo.js file into your HTML file.
```html ```html
<script src="path/to/patek-logo.js"></script> <script src="path/to/patekLogo.js"></script>
``` ```
## Usage ## Usage
```html ```html
<patek-logo title="<your title here>" subtitle="<your subtitle here>">Fallback value here</patek-logo> <patek-logo title="<your title here>" subtitle="<your subtitle 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>Pátek</patek-logo></p> <p><patek-logo></patek-logo></p>
<p><patek-logo title="Custom" subtitle="Text" style="font-size: 50px;">Custom Text</patek-logo></p> <p><patek-logo title="Custom" subtitle="Text" style="font-size: 50px;"></patek-logo></p>
<p><patek-logo style="font-size: 100px;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 100px;"></patek-logo></p>
<p><patek-logo style="font-size: 75px;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 75px;"></patek-logo></p>
<p><patek-logo style="font-size: 60px;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 60px;"></patek-logo></p>
<p><patek-logo style="font-size: 50px;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 50px;"></patek-logo></p>
<p><patek-logo style="font-size: 40px;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 40px;"></patek-logo></p>
<p><patek-logo style="font-size: 32px;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 32px;"></patek-logo></p>
<p><patek-logo style="font-size: 24px;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 24px;"></patek-logo></p>
<p><patek-logo style="font-size: 16px;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 16px;"></patek-logo></p>
<p><patek-logo style="font-size: 11px;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 11px;"></patek-logo></p>
<p><patek-logo style="font-size: 8px;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 8px;"></patek-logo></p>
<p><patek-logo style="font-size: 5px;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 5px;"></patek-logo></p>
<p><patek-logo style="font-size: 50px; color: white; background-color: #0b2a37;">Pátek</patek-logo></p> <p><patek-logo style="font-size: 50px; color: white; background-color: #0b2a37;"></patek-logo></p>
<br> <br>
<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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: purple;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: purple;">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>
<br> <br>
<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="Print" subtitle="Pátek" style="font-size: 50px; color: black; background-color: #ff7300;"></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="Talks" subtitle="Pátek" style="font-size: 50px; color: red; background-color: white;"></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> <p><patek-logo title="Space" subtitle="Pátek" style="font-size: 50px; color: white; background-color: #24007f;"></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?">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> <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>
<script src="patek-logo.js"></script> <script src="patekLogo.js"></script>
</body> </body>
</html> </html>

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

@ -19,20 +19,18 @@ template.innerHTML = `
font-weight: bold; font-weight: bold;
} }
#titlePlaceholder { #titlePlaceholder {
margin-right: -1.55em; margin-right: -0.9em;
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;
@ -44,14 +42,13 @@ 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;
} }
@import 'https://unpkg.com/firacode@1.206.0/distr/fira_code.css';
</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">
@ -69,53 +66,45 @@ template.innerHTML = `
`; `;
class PatekLogo extends HTMLElement { class PatekLogo extends HTMLElement {
calculateCircles() { calculateCircles() {
const inputValue = typeof this.attributes.title !== "undefined" && this.attributes.title.value !== "" ? this.attributes.title.value : "Pátek"; const inputValue = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek";
const opacities = PatekLogo.calculateBinary(inputValue); const normalizedInputValue = inputValue.normalize("NFD").replace(/[^\x00-\x7F]/g, "");
for (let i = 0; i < 7; i++) { let outputChar = String.fromCharCode(0);
this.shadow.getElementById("circle" + i.toString()).style.fillOpacity = opacities[i]; for (let i = 0; i < normalizedInputValue.length; i++) {
} outputChar ^= normalizedInputValue[i].charCodeAt(0);
} }
const opacities = outputChar.toString(2);
static calculateBinary(inputValue) { this.shadow.getElementById("circle0").style.fillOpacity = opacities[0];
/* eslint no-control-regex: "off", "unicorn/no-hex-escape": off */ this.shadow.getElementById("circle1").style.fillOpacity = opacities[1];
const normalizedInputValue = inputValue.normalize("NFD").replace(/[^\x00-\x7F]/g, ""); this.shadow.getElementById("circle2").style.fillOpacity = opacities[2];
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); }
for (let i = 0; i < normalizedInputValue.length; i++) { constructor() {
outputChar ^= normalizedInputValue[i].charCodeAt(0); super();
} this.shadow = this.attachShadow({mode: "open"});
const clone = template.content.cloneNode(true);
const outputString = outputChar.toString(2); clone.getElementById("titlePlaceholder").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek";
clone.getElementById("titleText").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek";
return "0".repeat(7 - outputString.length) + outputString; clone.getElementById("subtitleText").innerText = typeof this.attributes.subtitle !== "undefined" ? this.attributes.subtitle.value : "";
} this.shadow.appendChild(clone);
this.calculateCircles();
constructor() { }
super(); static get observedAttributes() { return ['title', 'subtitle']; }
this.shadow = this.attachShadow({mode: "open"}); attributeChangedCallback(name, oldValue, newValue) {
const clone = template.content.cloneNode(true); if (name === 'title') {
clone.getElementById("titlePlaceholder").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; this.calculateCircles();
clone.getElementById("titleText").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; this.shadow.getElementById("titleText").innerText = newValue || "Pátek";
clone.getElementById("subtitleText").innerText = typeof this.attributes.subtitle !== "undefined" ? this.attributes.subtitle.value : ""; this.shadow.getElementById("titlePlaceholder").innerText = newValue || "Pátek";
this.shadow.append(clone); } else if (name === 'subtitle') {
this.calculateCircles(); this.shadow.getElementById("subtitleText").innerText = newValue;
} }
}
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);