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

Code style update.

Browse Source
This commit is contained in:
Greenscreener 2019-07-17 22:47:35 +02:00
parent ebb95c5f91
commit 0a5cf1419b
3 changed files with 45 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -3,9 +3,9 @@
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

2
examples.html
View File

@ -35,6 +35,6 @@
<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;"></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?"></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> <script src="patek-logo.js"></script>
</body> </body>
</html> </html>

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

@ -68,45 +68,51 @@ 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 : "Pátek";
const normalizedInputValue = inputValue.normalize("NFD").replace(/[^\x00-\x7F]/g, ""); /* eslint no-control-regex: "off", "unicorn/no-hex-escape": off */
const normalizedInputValue = inputValue.normalize("NFD").replace(/[^\x00-\x7F]/g, "");
let outputChar = String.fromCharCode(0); let outputChar = String.fromCharCode(0);
for (let i = 0; i < normalizedInputValue.length; i++) { for (let i = 0; i < normalizedInputValue.length; i++) {
outputChar ^= normalizedInputValue[i].charCodeAt(0); outputChar ^= normalizedInputValue[i].charCodeAt(0);
} }
const opacities = outputChar.toString(2);
this.shadow.getElementById("circle0").style.fillOpacity = opacities[0]; const opacities = outputChar.toString(2);
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];
} this.shadow.getElementById("circle0").style.fillOpacity = opacities[0];
constructor() { this.shadow.getElementById("circle1").style.fillOpacity = opacities[1];
super(); this.shadow.getElementById("circle2").style.fillOpacity = opacities[2];
this.shadow = this.attachShadow({mode: "open"}); this.shadow.getElementById("circle3").style.fillOpacity = opacities[3];
const clone = template.content.cloneNode(true); this.shadow.getElementById("circle4").style.fillOpacity = opacities[4];
clone.getElementById("titlePlaceholder").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; this.shadow.getElementById("circle5").style.fillOpacity = opacities[5];
clone.getElementById("titleText").innerText = typeof this.attributes.title !== "undefined" ? this.attributes.title.value : "Pátek"; this.shadow.getElementById("circle6").style.fillOpacity = opacities[6];
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);