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

Compare commits

merge into: patek:vojta001/simplify-styles
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

6 Commits
vojta001/s ... 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
3 changed files with 81 additions and 73 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.
## Installation
Include the patekLogo.js file into your HTML file.
Include the patek-logo.js file into your HTML file.
```html
<script src="path/to/patekLogo.js"></script>
<script src="path/to/patek-logo.js"></script>
```
## Usage
```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.
The fallback value is used only in browsers without support for custom elements
or with JavaScript disabled.
The logo **will** obey all CSS rules.
## Examples
You can find examples in [examples.html](examples.html).

56
examples.html
View File

@ -5,36 +5,36 @@
<title>PátekLogo Examples</title>
</head>
<body>
<p><patek-logo></patek-logo></p>
<p><patek-logo title="Custom" subtitle="Text" style="font-size: 50px;"></patek-logo></p>
<p><patek-logo style="font-size: 100px;"></patek-logo></p>
<p><patek-logo style="font-size: 75px;"></patek-logo></p>
<p><patek-logo style="font-size: 60px;"></patek-logo></p>
<p><patek-logo style="font-size: 50px;"></patek-logo></p>
<p><patek-logo style="font-size: 40px;"></patek-logo></p>
<p><patek-logo style="font-size: 32px;"></patek-logo></p>
<p><patek-logo style="font-size: 24px;"></patek-logo></p>
<p><patek-logo style="font-size: 16px;"></patek-logo></p>
<p><patek-logo style="font-size: 11px;"></patek-logo></p>
<p><patek-logo style="font-size: 8px;"></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;"></patek-logo></p>
<p><patek-logo>Pátek</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;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 75px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 60px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 50px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 40px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 32px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 24px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 16px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 11px;">Pátek</patek-logo></p>
<p><patek-logo style="font-size: 8px;">Pátek</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;">Pátek</patek-logo></p>
<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: 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;"></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;"></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;"></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;"></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;"></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;"></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;"></patek-logo><patek-logo style="font-size: 50px; color: purple;"></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;">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;">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;">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;">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;">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;">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;">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;">Pátek</patek-logo><patek-logo style="font-size: 50px; color: purple;">Pátek</patek-logo></p>
<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="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;"></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;">PátekTalks</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>
<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="patekLogo.js"></script>
<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="patek-logo.js"></script>
</body>
</html>

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

@ -1,7 +1,6 @@
const template = document.createElement("template");
template.innerHTML = `
<style>
@import 'https://unpkg.com/firacode@1.206.0/distr/fira_code.css';
svg > * {
fill: currentColor;
}
@ -20,7 +19,7 @@ template.innerHTML = `
font-weight: bold;
}
#titlePlaceholder {
margin-right: -1.15em;
margin-right: -1.55em;
visibility: hidden;
}
#titleText {
@ -45,12 +44,14 @@ template.innerHTML = `
white-space: nowrap;
}
:host {
font-family: "Fira Code", monospace;
display: inline-block;
vertical-align: top;
margin-bottom: -0.3em;
height: 2em;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/firacode@1.206.0/distr/fira_code.css">
<span id="wrapper">
<span id="titlePlaceholder"></span>
<svg id="svg8" version="1.1" viewBox="0 0 22.452 22.454" xmlns="http://www.w3.org/2000/svg">
@ -68,49 +69,53 @@ template.innerHTML = `
`;
class PatekLogo extends HTMLElement {
calculateCircles() {
const inputValue = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek";
calculateCircles() {
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 < normalizedInputValue.length; i++) {
outputChar ^= normalizedInputValue[i].charCodeAt(0);
}
const opacities = outputChar.toString(2);
for (let i = 0; i < 7; i++) {
this.shadow.getElementById("circle" + i.toString()).style.fillOpacity = opacities[i];
}
}
this.shadow.getElementById("circle0").style.fillOpacity = opacities[0];
this.shadow.getElementById("circle1").style.fillOpacity = opacities[1];
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];
static calculateBinary(inputValue) {
/* eslint no-control-regex: "off", "unicorn/no-hex-escape": off */
const normalizedInputValue = inputValue.normalize("NFD").replace(/[^\x00-\x7F]/g, "");
}
constructor() {
super();
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";
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 : "";
this.shadow.appendChild(clone);
this.shadow.getElementById("wrapper").style.display = "none";
this.calculateCircles();
window.addEventListener("load", () => {
this.shadow.getElementById("wrapper").style.display = "inline-block";
});
}
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;
}
}
let outputChar = String.fromCharCode(0);
for (let i = 0; i < normalizedInputValue.length; i++) {
outputChar ^= normalizedInputValue[i].charCodeAt(0);
}
const outputString = outputChar.toString(2);
return "0".repeat(7 - outputString.length) + outputString;
}
constructor() {
super();
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";
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 : "";
this.shadow.append(clone);
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);