Disable emulator manipulation buttons when timeline is being played

richtr · Jul 15, 2015 · fe28cf1 · fe28cf1
1 parent 4cd3c34
commit fe28cf1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/controller/js/app.js b/controller/js/app.js
@@ -168,6 +168,12 @@ var APP = {
 
 				var frameNumber = 0;
 
+				sendMessage(
+					window.parent, {
+						'action': 'playbackStarted'
+					}
+				);
+
 				// Tween through each of our animation frames
 				data.frames.reduce( function( chain, frame ) {
 					// Add these actions to the end of the promise chain
@@ -193,7 +199,7 @@ var APP = {
 					window.setTimeout( function() {
 						sendMessage(
 							window.parent, {
-								'action': 'resetTimeline'
+								'action': 'playbackEnded'
 							}
 						);
 
@@ -387,10 +393,10 @@ var APP = {
 
 			if ( tweenInProgress ) {
 				TWEEN.update( time );
+			} else {
+				controls.update();
 			}
 
-			controls.update();
-
 			// *** Calculate device orientation quaternion (without affecting rendering)
 			camQuat.copy( controls.object.quaternion );
 			camQuat.inverse();

diff --git a/emulator/index.html b/emulator/index.html
@@ -54,13 +54,13 @@
 			<li>
 				<div class="info" style="margin-right: 0px; padding-right:0px;" title="Current Device Orientation Data (in degrees)">
 					a:
-					<input type="number" id="orientationAlpha" value="-" tabindex="1"> b:
-					<input type="number" id="orientationBeta" value="-" tabindex="2"> g:
-					<input type="number" id="orientationGamma" value="-" tabindex="3">
+					<input type="number" id="orientationAlpha" data-disable-during-playback="true" value="-" tabindex="1"> b:
+					<input type="number" id="orientationBeta" data-disable-during-playback="true" value="-" tabindex="2"> g:
+					<input type="number" id="orientationGamma" data-disable-during-playback="true" value="-" tabindex="3">
 				</div>
 			</li>
 			<li>
-				<button class="charcoal reset" title="Reset Device Orientation Data" style="margin-right: 10px" tabindex="-1"><i class="icon-location-arrow"></i></button>
+				<button class="charcoal reset" title="Reset Device Orientation Data" style="margin-right: 10px" data-disable-during-playback="true" tabindex="-1"><i class="icon-location-arrow"></i></button>
 			</li>
 			<li>
 				<div class="info" style="margin: 0; padding-right: 10px" title="Current Screen Orientation Angle (in degrees)">
@@ -69,7 +69,7 @@
 				</div>
 			</li>
 			<li>
-				<button class="charcoal rotate" data-rotate="true" title="Rotate the Screen" tabindex="-1"><i class="icon-rotate-left"></i></button>
+				<button class="charcoal rotate" data-rotate="true" title="Rotate the Screen" data-disable-during-playback="true" tabindex="-1"><i class="icon-rotate-left"></i></button>
 			</li>
 		</ul>
 	</div>
@@ -81,7 +81,7 @@
 	<div id="timeline" class="bounceInUp animated" style="z-index:3;">
 		<ul class="button-group">
 			<li>
-				<button id="play" class="charcoal" title="Play timeline" tabindex="4"><i class="icon-play"></i></button>
+				<button id="play" class="charcoal" title="Play timeline" data-disable-during-playback="true" tabindex="4"><i class="icon-play"></i></button>
 			</li>
 			<li>
 				<div class="info" style="margin-right:0px">
@@ -97,12 +97,12 @@
 		</ul>
 		<ul class="button-group">
 			<li>
-				<button id="addNewFrame" class="frame blue" title="Add a new animation frame" tabindex="-1"><i class="icon-plus"></i></button>
+				<button id="addNewFrame" class="frame blue" title="Add a new animation frame" data-disable-during-playback="true" tabindex="-1"><i class="icon-plus"></i></button>
 			</li>
 		</ul>
 		<ul class="button-group">
 			<li>
-				<button id="clearTimeline" class="frame red" title="Remove all animation frames" tabindex="-1"><i class="icon-trash"></i></button>
+				<button id="clearTimeline" class="frame red" title="Remove all animation frames" data-disable-during-playback="true" tabindex="-1"><i class="icon-trash"></i></button>
 			</li>
 		</ul>
 	</div>

diff --git a/emulator/js/timeliner.js b/emulator/js/timeliner.js
@@ -147,9 +147,6 @@ var actions = {
 		$( 'button#play' ).on( 'click', function() {
 			$( 'button[data-frame-number=0]' ).removeClass( 'charcoal' ).addClass( 'asphalt active' );
 
-			// Disable play button for duration of animation
-			$( 'button#play' ).attr( 'disabled', 'disabled' );
-
 			$( 'button[data-frame-number=0]' ).trigger( 'click' );
 
 			timeline.start();
@@ -347,12 +344,22 @@ var actions = {
 		$( 'button[data-frame-number=' + ( data || 0 ) + ']' ).trigger( 'click' );
 
 	},
-	'resetTimeline': function( data ) {
+	'playbackStarted': function( data ) {
+
+		// Disable buttons
+		$( '[data-disable-during-playback]').each(function() {
+			$( this ).attr('disabled', 'disabled');
+		});
+
+	},
+	'playbackEnded': function( data ) {
 
 		$( 'button[data-frame-number=0]' ).trigger( 'click' );
 
-		// Re-enable play button
-		$( 'button#play' ).removeAttr( 'disabled' );
+		// Re-enable buttons
+		$( '[data-disable-during-playback]').each(function() {
+			$( this ).removeAttr( 'disabled' );
+		});
 
 	}
 };