diff --git a/www/flipclock.html b/www/flipclock.html new file mode 100644 index 0000000..fb0934d --- /dev/null +++ b/www/flipclock.html @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + FTUI Demo + + + + + + + + + + + + Home + + + + Music + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tab2
+ + + + + +
Tab3
+ + + + + +
Tab4
+ + + + + +
Tab5
+ + + + + + + diff --git a/www/ftui/components/flipclock/flipclock.component.js b/www/ftui/components/flipclock/flipclock.component.js index 9741cda..3608858 100644 --- a/www/ftui/components/flipclock/flipclock.component.js +++ b/www/ftui/components/flipclock/flipclock.component.js @@ -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 `
-
`; } @@ -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() {