kaf.js sample 06

by mtsgi

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mtsgi/[email protected]/d/kitstrap.css">
<script src="https://mtsgi.github.io/kafjs/kaf.js"></script>
<main id="kaf">
  <div class="kit-flex">
    <kit-button kit-e="start">Start</kit-button>
    <kit-button kit-e="stop" kit:if="remain">Stop</kit-button>
  </div>
  <kit-pane kit:if="remain">
    <span kit:observe="remain"></span> sec left.
  </kit-pane>
</main>

JavaScript

import Kaf from 'https://mtsgi.github.io/kafjs/kaf.js';

const kaf = new Kaf({
  elem: '#kaf',
  data: {
    remain: 0,
    toid: null
  },
  events: {
    start() {
    	this.remain = 5;
      this.toid = setTimeout(() => this.dec(), 1000);
    },
    dec() {
      this.remain -= 1;
      if(this.remain) this.toid = setTimeout(() => this.dec(), 1000);
      else this.stop();
    },
    stop() {
      clearTimeout(this.toid);
      this.remain = 0;
      alert('Finished');
    }
  }
});