Ember 0.9.8.1 Template

by imehesz

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<script type="text/x-handlebars" data-template-name='timer'>
  <div class='timeleft'>{{timeLeft}}</div>
  <a href="#" class='btn btn-large btn-primary' {{action "pomodoro"}}   >Pomodoro</a>
  <a href="#" class='btn btn-large'             {{action "shortBreak"}} >Short Break</a>
  <a href="#" class='btn btn-large'             {{action "longBreak"}}  >Long Break</a>
  <a href="#" class='btn btn-large btn-danger'  {{action "stop"}}       >Stop</a>
</script>
<h1>Pomodoro</h1>
<div id='timer'></div>

JavaScript

var Pomodoro = Em.Application.create();

var timer = Ember.Object.create({
  timeLeft: "25:00",
  totalTime: 25*60*1000,
  
  start: function(time) {
    var _this = this;
    this.reset(time);
    this._startedAt = new Date();
    this._intervalId = setInterval(function() { _this.updateTimeLeft.apply(_this); }, 100);
  },
  
  reset: function(time) {
    clearInterval(this._intervalId);
    if (time) {
      this.set('totalTime', time*60*1000);
    }
    var totalTime = this.get( 'totalTime' );
    this.set('timeLeft', totalTime.toString());
  },
  
  updateTimeLeft: function() {
    var now = new Date();
    var diff = now - this._startedAt;
    var totalTime = this.get('totalTime');
      
    this.set('timeLeft', totalTime.toString() - diff);
  }
});

Ember.View.create({
  templateName: 'timer',
  timer: timer,
  timeLeftBinding: 'timer.timeLeft',

  pomodoro: function(){
    this.timer.start(25);
  },
  shortBreak: function() {
    this.timer.start(5);
  },
  longBreak: function() {
    this.timer.start(15);
  },
  stop: function() {
    this.timer.reset();
  }
}).appendTo('#timer');