Permalink
Browse files

Merge branch 'master' into gh-pages

  • Loading branch information...
blackjk3 committed Mar 23, 2012
2 parents a740f1c + 48f81aa commit 4897a7fd4e82ad0331cb7cb41d3012c09f4d3f70
View
@@ -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) {

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -247,6 +247,10 @@ body.stage header {
#index article {
margin: 2.0em;
}
+#index .display {
+ font-family: 'ChunkFive';
+ font-size: 2.0em;
+}
.element {
position: absolute;
}
@@ -118,4 +118,4 @@ Copyright : Generated in 2009 by FontLab Studio Copyright info pending
<glyph unicode="&#xfb03;" horiz-adv-x="2256" d="M1632 0v268h86v490h-86v266h475v-756h99v-268h-574zM1690 1323q0 78 60 143.5t160.5 65.5t163 -65.5t62.5 -143.5q0 -88 -60.5 -147.5t-164.5 -59.5q-92 0 -156.5 64.5t-64.5 142.5zM842 758v266h84v174q0 43 6 84t31 97.5t66 96.5t119.5 68.5t183.5 28.5q80 0 170 -15.5 t131 -35.5l-123 -236q-45 20 -113 21q-66 0 -65 -109v-174h186v-266h-186v-490h123v-268h-611v268h82v490h-84zM51 758v266h84v174q0 43 6 84t31 97.5t66 96.5t119.5 68.5t183.5 28.5q80 0 170 -15.5t131 -35.5l-123 -236q-45 20 -113 21q-66 0 -65 -109v-174h186v-266h-186 v-490h123v-268h-611v268h82v490h-84z" />
<glyph unicode="&#xfb04;" horiz-adv-x="2260" d="M1632 0v268h88v1004h-86v264h475v-1268h121v-268h-598zM842 758v266h84v174q0 43 6 84t31 97.5t66 96.5t119.5 68.5t183.5 28.5q80 0 170 -15.5t131 -35.5l-123 -236q-45 20 -113 21q-66 0 -65 -109v-174h186v-266h-186v-490h123v-268h-611v268h82v490h-84zM51 758v266 h84v174q0 43 6 84t31 97.5t66 96.5t119.5 68.5t183.5 28.5q80 0 170 -15.5t131 -35.5l-123 -236q-45 20 -113 21q-66 0 -65 -109v-174h186v-266h-186v-490h123v-268h-611v268h82v490h-84z" />
</font>
-</defs></svg>
+</defs></svg>
Binary file not shown.
@@ -7,10 +7,10 @@
var App = App || {};
require(['router'], function(AppRouter) {
-
+
// App Ready
$(document).ready(function() {
App = new Backbone.Stage();
App.router = new AppRouter();
});
-});
+});
@@ -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;
-});
+});
@@ -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>
@@ -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;
-});
+});
@@ -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 */
@@ -135,4 +135,4 @@
-moz-transform-origin: @x @y;
-ms-transform-origin: @x @y;
-o-transform-origin: @x @y;
-}
+}
@@ -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) {}
Oops, something went wrong.

0 comments on commit 4897a7f

Please sign in to comment.