Merge branch 'master' into gh-pages

dist/backbone.plus.js

@@ -564,10 +564,6 @@
 			var i = _.indexOf(this.listeners, key );
 			this.listeners.splice( i, 1 );
 
-			/*if(this.listeners.length === 0) {
-				this.stop();
-			}*/
-
 			console.log("CORE :: LISTENERS :: " + this.listeners);
 		}
 
@@ -605,6 +601,16 @@
 			return this.addTween(null, args);
 		},
 
+		timer: function() {
+
+			var args = {
+				autoStart: false,
+				duration: -1
+			};
+
+			return this.addTween(null, args);
+		},
+
 		addTween: function(obj, args) {
 
 			var tween = new Backbone.Tween(obj, args),
@@ -662,14 +668,18 @@
 		this.elapsed = 0;
 		this.elapsedTime = 0;
 		this.delay = args.delay || 0;
+		this.delta = 0;
 		this.duration = args.duration || 1000;
 		this.easing = args.easing || Backbone.Easing.Linear.EaseNone;
+		this.autoStart = args.autoStart;
 
 		// Callbacks
 		this.progress = args.progress || null;
 		this.callback = args.complete || null;
 
-		this.start();
+		if(this.autoStart === true || this.autoStart === undefined) {
+			this.start();
+		}
 	};
 
 	_.extend(Backbone.Tween.prototype, Backbone.Events, {
@@ -723,9 +733,22 @@
 			return this;
 		},
 
+		resume: function() {
+
+			if(this.startTime !== null) {
+				this.delta = this.elapsedTime;
+				this.startTime = Date.now();
+				this.listen();
+			} else {
+				this.start();
+			}
+
+			return this;
+		},
+
 		stop: function() {
 			console.log("CORE :: STOP TWEEN");
-			this.elapsedTime = Date.now() - this.startTime;
+			this.elapsedTime = Date.now() - this.startTime + this.delta;
 			this.stopListening();
 
 			return this;
@@ -738,6 +761,7 @@
 		step: function() {
 
 			var current = Date.now(),
+				delta = current - this.startTime + this.delta,
 				value,
 				_currentValues = this._currentValues,
 				_startValues = this._startValues,
@@ -749,11 +773,18 @@
 			}
 
 			// Set elapsed time
-			this.elapsed = ( current - this.startTime ) / this.duration;
+			this.elapsedTime = delta;
 
-			// Elapsed can't be greater than 1.
-			this.elapsed = this.elapsed > 1 ? 1 : this.elapsed;
-			value = this.easing( this.elapsed );
+			// Duration is infinite
+			if(this.duration !== -1) {
+				this.elapsed = delta / this.duration;
+
+				// Elapsed can't be greater than 1.
+				this.elapsed = this.elapsed > 1 ? 1 : this.elapsed;
+				value = this.easing( this.elapsed );
+			} else {
+				value = delta;
+			}
 
 			// Actually update our values and redraw
 			if(this.obj) {

examples/time_tracking/css/style.css

@@ -247,6 +247,10 @@ body.stage header {
 #index article {
   margin: 2.0em;
 }
+#index .display {
+  font-family: 'ChunkFive';
+  font-size: 2.0em;
+}
 .element {
   position: absolute;
 }

examples/time_tracking/js/app/main.js

@@ -7,10 +7,10 @@
 var App = App || {};
 
 require(['router'], function(AppRouter) {
-	
+
 	// App Ready
 	$(document).ready(function() {
 		App = new Backbone.Stage();
 		App.router = new AppRouter();
 	});
-});
+});

examples/time_tracking/js/app/router.js

@@ -8,7 +8,7 @@
  define(['views/index'], function(IndexScene) {
 
 	var AppRouter = Backbone.Router.extend({
-	
+
 		routes: {
 			// Define some URL routes
 			'/index': 'index',
@@ -22,7 +22,7 @@
 		},
 
 		index: function() {
-			
+
 			var scene = new IndexScene();
 			App.changeScene(scene, 'index');
 		},
@@ -33,7 +33,7 @@
 		}
 
 	});
-  
+
   return AppRouter;
 
-});
+});

examples/time_tracking/js/app/templates/index.html

@@ -3,7 +3,8 @@
 	<h1>Time Tracking</h1>
 	<a href="#" title="Home" class="button right">New</a>
 </header>
-<article>	
-	<h2>Entries</h2>
-	<a href="" class="button">New Entry</a>
-</article>
+<article>
+	<h2>Stopwatch</h2>
+	<div class="display">00:00:00</div>
+	<a href="#" class="start button">Start / Stop</a>
+</article>

examples/time_tracking/js/app/views/index.js

@@ -11,23 +11,71 @@ define(['text!templates/index.html'], function(MainTemplate){
     id: 'index',
     tagName: 'div',
     className: 'scene',
-
-    initialize: function() {},
+
+    stopwatch: null,
+
+    initialize: function() {
+      _.bindAll(this);
+    },
 
     render: function(container) {
       this.renderTemplate(MainTemplate, {}, container);
+
+      this.button = this.$el.find('.start');
+      this.display = this.$el.find('.display');
       this.show();
     },
-    
+
     show: function() {
       this.slideIn(App.stageWidth());
+
+      // Stopwatch
+      this.stopwatch = this.timer();
+      this.stopwatch.progress = this.updateDisplay;
+
+      this.button.on('click', this.toggleState);
+    },
+
+    toggleState: function(e) {
+
+      e.preventDefault();
+
+      console.log(this.stopwatch);
+
+      if(this.stopwatch.listening) {
+        this.stopwatch.stop();
+      } else {
+        this.stopwatch.resume();
+      }
+    },
+
+    updateDisplay: function(value) {
+      var seconds = Math.floor((value / 1000)%60),
+          minutes = Math.floor((value/(1000*60))%60),
+          hours = Math.floor((value/(1000*60*60))%24),
+          str;
+
+      if( seconds < 10 ) {
+        seconds = '0' + seconds;
+      }
+
+      if( minutes < 10 ) {
+        minutes = '0' + minutes;
+      }
+
+      if( hours < 10 ) {
+        hours = '0' + hours;
+      }
+
+      str = hours + ':' + minutes + ':' + seconds;
+      this.display.html(str);
     },
 
     hide: function() {
       this.slideOut(App.stageWidth());
     }
 
   });
-  
+
   return MainScene;
-});
+});

examples/time_tracking/less/black.theme.less

@@ -7,10 +7,10 @@ header, footer, article, div, span, a {
 
 body.stage {
 
-  -webkit-user-select: none;	
+  -webkit-user-select: none;
   overflow:hidden;
   margin: 0; padding: 0;
-  
+
   /* Stage header */
   & > header {
     position: absolute;
@@ -30,7 +30,7 @@ body.stage {
   	background:#191919;
     width:100%;
     height: 40px;
-    bottom:0;	
+    bottom:0;
   }
 
   /* All scene headers */

examples/time_tracking/less/mixins.less

@@ -135,4 +135,4 @@
         -moz-transform-origin:    @x @y;
         -ms-transform-origin:     @x @y;
         -o-transform-origin:      @x @y;
-}
+}

examples/time_tracking/less/style.less

@@ -5,7 +5,7 @@
 /* =============================================================================
    HTML5 display definitions
    ========================================================================== */
-   
+
 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
 audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
 
@@ -94,7 +94,7 @@ body.stage {
 }
 
 .scene {
-    
+
     position:absolute;
     width: 100%;
 
@@ -119,9 +119,9 @@ body.stage {
         }
 
     }
-    
+
     article {
-        
+
         height: 100%;
 
         ul {
@@ -137,6 +137,11 @@ body.stage {
   article {
     margin: 2.0em;
   }
+
+  .display {
+    font-family: 'ChunkFive';
+    font-size: 2.0em;
+  }
 }
 
 .element {
@@ -198,7 +203,7 @@ textarea[contenteditable] {-webkit-appearance: none;}
 /* ==|== media queries ====================================================== */
 
 /* Landscape phones and down: iPhone, iPad, Android Phones */
-@media (max-width: 480px) { 
+@media (max-width: 480px) {
   body { font-size: 11px; }
 }
 
@@ -209,4 +214,4 @@ textarea[contenteditable] {-webkit-appearance: none;}
 @media (min-width: 768px) and (max-width: 980px) {}
 
 /* Large desktop */
-@media (min-width: 1200px) {}
+@media (min-width: 1200px) {}