Compare commits
1 Commits
master
...
vojta001/l
| Author | SHA1 | Date | |
|---|---|---|---|
|
edd2da4714 |
@ -3,20 +3,17 @@
|
||||
Reusable custom element for the Pátek logo.
|
||||
|
||||
## Installation
|
||||
Include the patek-logo.js file into your HTML file.
|
||||
Include the patekLogo.js file into your HTML file.
|
||||
```html
|
||||
<script src="path/to/patek-logo.js"></script>
|
||||
<script src="path/to/patekLogo.js"></script>
|
||||
```
|
||||
|
||||
## Usage
|
||||
```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.
|
||||
|
||||
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).
|
||||
|
||||
@ -5,36 +5,36 @@
|
||||
<title>PátekLogo Examples</title>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<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>
|
||||
<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: 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>
|
||||
<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>
|
||||
<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="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>
|
||||
<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>
|
||||
<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>
|
||||
<script src="patek-logo.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?"></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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -19,20 +19,18 @@ template.innerHTML = `
|
||||
font-weight: bold;
|
||||
}
|
||||
#titlePlaceholder {
|
||||
margin-right: -1.55em;
|
||||
margin-right: -0.9em;
|
||||
visibility: hidden;
|
||||
}
|
||||
#titleText {
|
||||
font-size: 1em;
|
||||
right: 1.1em;
|
||||
bottom: 1.181em;
|
||||
line-height: initial;
|
||||
}
|
||||
#subtitleText {
|
||||
font-size: 0.6em;
|
||||
top: 1.583333333em;
|
||||
right: 3.4em;
|
||||
line-height: initial;
|
||||
}
|
||||
#wrapper {
|
||||
position: relative;
|
||||
@ -44,14 +42,13 @@ template.innerHTML = `
|
||||
white-space: nowrap;
|
||||
}
|
||||
:host {
|
||||
font-family: "Fira Code", monospace;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: -0.3em;
|
||||
height: 2em;
|
||||
}
|
||||
@import 'https://unpkg.com/firacode@1.206.0/distr/fira_code.css';
|
||||
</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">
|
||||
@ -69,53 +66,45 @@ template.innerHTML = `
|
||||
`;
|
||||
|
||||
class PatekLogo extends HTMLElement {
|
||||
calculateCircles() {
|
||||
const inputValue = typeof this.attributes.title !== "undefined" && this.attributes.title.value !== "" ? this.attributes.title.value : "Pátek";
|
||||
calculateCircles() {
|
||||
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++) {
|
||||
this.shadow.getElementById("circle" + i.toString()).style.fillOpacity = opacities[i];
|
||||
}
|
||||
}
|
||||
let outputChar = String.fromCharCode(0);
|
||||
for (let i = 0; i < normalizedInputValue.length; i++) {
|
||||
outputChar ^= normalizedInputValue[i].charCodeAt(0);
|
||||
}
|
||||
const opacities = outputChar.toString(2);
|
||||
|
||||
static calculateBinary(inputValue) {
|
||||
/* eslint no-control-regex: "off", "unicorn/no-hex-escape": off */
|
||||
const normalizedInputValue = inputValue.normalize("NFD").replace(/[^\x00-\x7F]/g, "");
|
||||
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];
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
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.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);
|
||||
Loading…
Reference in New Issue
Block a user