FHEM/ftui_components_flipclock
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

0.1

Browse Source
This commit is contained in:
Torte
2021-01-13 07:51:45 +01:00
parent e6eab868d0
commit c6e210f76a
2 changed files with 221 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
www/ftui/components/flipclock/flipclock.component.js
View File

@@ -19,10 +19,8 @@ export class FtuiFlipClock extends FtuiElement {
super(Object.assign(FtuiFlipClock.properties, properties));
this.smten=0;
this.smone=0;
this.shten=0;
this.shone=0;
this.stime = [];
this.dots();
this.update();
this.startInterval();
this.setcolor(this.clockbg, this.clockfontcolor);
@@ -32,7 +30,7 @@ export class FtuiFlipClock extends FtuiElement {
template() {
return `<style> @import "components/flipclock/flipclock.component.css"; </style>
<div class="clock-container">
<ul class="clockfl go hourten">
<ul class="clockfl go one" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
@@ -54,7 +52,7 @@ export class FtuiFlipClock extends FtuiElement {
</a>
</li>
</ul>
<ul class="clockfl go hourone">
<ul class="clockfl go two" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
@@ -76,15 +74,12 @@ export class FtuiFlipClock extends FtuiElement {
</a>
</li>
</ul>
<span class="clock-divider ">
<span class="clock-label"></span>
<span class="clock-dot top"></span>
<span class="clock-dot bottom"></span>
</span>
<ul class="clockfl go ten">
<span class="clock-divider doth">
<span class="clock-label"></span>
<span class="clock-dot top"></span>
<span class="clock-dot bottom"></span>
</span>
<ul class="clockfl go three" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
@@ -106,7 +101,7 @@ export class FtuiFlipClock extends FtuiElement {
</a>
</li>
</ul>
<ul class="clockfl go min">
<ul class="clockfl go four" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
@@ -128,6 +123,56 @@ export class FtuiFlipClock extends FtuiElement {
</a>
</li>
</ul>
<span class="clock-divider dots">
<span class="clock-label"></span>
<span class="clock-dot top"></span>
<span class="clock-dot bottom"></span>
</span>
<ul class="clockfl go five" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
</div>
<div class="down">
<div class="shadow"></div>
</div>
</a>
</li>
<li class="clock-active ten">
<a href="#">
<div class="up">
<div class="shadow"></div>
</div>
<div class="down">
<div class="shadow"></div>
</div>
</a>
</li>
</ul>
<ul class="clockfl go six" style="display: none;">
<li class="clock-before">
<a href="#">
<div class="up">
<div class="shadow"></div>
</div>
<div class="down">
<div class="shadow"></div>
</div>
</a>
</li>
<li class="clock-active min">
<a href="#">
<div class="up">
<div class="shadow"></div>
</div>
<div class="down">
<div class="shadow"></div>
</div>
</a>
</li>
</ul>
</div>`;
}
@@ -153,57 +198,83 @@ export class FtuiFlipClock extends FtuiElement {
});
}
}
dots() {
var i = this.format.length;
if (i >= 3 && i <= 5 ) {
this.el = this.shadowRoot.querySelector('.dots');
this.el.setAttribute("style", "display: none;");
}
if (i <= 2){
this.el = this.shadowRoot.querySelector('.dots');
this.el.setAttribute("style", "display: none;");
this.el = this.shadowRoot.querySelector('.doth');
this.el.setAttribute("style", "display: none;");
}
}
update() {
var mone = parseInt(dateFormat(this.getDateTime(), this.format).toString()[3]) + 20;
var mten = parseInt(dateFormat(this.getDateTime(), this.format).toString()[2]) + 20;
var hone = parseInt(dateFormat(this.getDateTime(), this.format).toString()[1]) + 20;
var hten = parseInt(dateFormat(this.getDateTime(), this.format).toString()[0]) + 20;
console.log( hten + " " + hone + ":" + mten + " " + mone + " smten: " );
if (this.smone != mone){
this.flip_card(".min", mone);
let time = [];
let i = [];
for( i = 0; i < dateFormat(this.getDateTime(), this.format).length; ++i) {
time[i] = dateFormat(this.getDateTime(), this.format)[i];
if (this.stime[i] != time[i]) {
this.flip_card (i, parseInt(time[i]) + 20);
}
}
if (this.smten != mten) {
this.flip_card(".ten", mten);
}
if (this.shone != hone) {
this.flip_card(".hourone", hone);
}
if (this.shten != hten) {
this.flip_card(".hourten", hten);
}
this.smone = mone;
this.smten = mten;
this.shone = hone;
this.shten = hten;
this.stime = time.slice();
}
// Setting Color
setcolor (bg, fc){
this.el = this.shadowRoot.querySelector('.clock-container');
this.el.setAttribute("style", "--clock-flip-bg:" + bg + "; --clock-flip-font-color:" + fc + ";");
this.el.setAttribute("style", "--clock-flip-bg:" + bg + "; --clock-flip-font-color:" + fc + ";" );
this.el.className += " " + this.clocksize;
}
// Flip the card
flip_card(cl, digit){
switch (cl){
case 0:
cl = '.one';
break;
case 1:
cl = '.two';
break;
case 2:
cl = '.three';
break;
case 3:
cl = '.four';
break;
case 4:
cl = '.five';
break;
case 5:
cl = '.six';
break;
}
this.replace (cl + " .down",null, digit);
this.replace (cl + " .up",null, digit);
this.replace (cl + " li.clock-active a div.up", digit);
this.replace (cl + " li.clock-active .down", digit);
this.replace(cl + " .clock-active");
}
// Replace the element to start the animation
replace (cl, aattr, battr){
this.el = this.shadowRoot.querySelector(cl);
this.newel = this.el.cloneNode(true);
//before
if (battr) {
if (cl.includes('.five') || cl.includes('.three')){if (battr === 20 ) {battr = 26; }} //workarround count 59
this.newel.setAttribute("data-num", (parseInt(battr) - 1).toString()[1]);
}
//active
if (aattr) {
this.newel.setAttribute("data-num", (parseInt(aattr).toString()[1]));
}
if (battr) {
this.newel.setAttribute("data-num", (parseInt(battr) - 1).toString()[1]);
this.el.parentNode.setAttribute("style", "display: '';");
this.el.parentNode.replaceChild(this.newel, this.el);
}
this.el.parentNode.replaceChild(this.newel, this.el);
}
getDateTime() {