Added presentation

app/assets/javascripts/controllers/main.js.coffee

@@ -40,7 +40,6 @@ class Controller.Main extends Controller.Base
 		@addChild 'graphs', new Controller.Graphs( "#graphs" )
 		@addChild 'undo', new Controller.Undo( @timemachine )
 		@addChild 'tutorial', new Controller.Tutorial( this )
-		@addChild 'presentation', new Controller.Presentation( this )
 
 		# Child Views
 		@view.add @controller('cell').view
@@ -297,6 +296,17 @@ class Controller.Main extends Controller.Base
 			.done( success )
 			.fail( error )
 			.always( enable )
+	# On Presentation Button clicked
+	#
+	# @param target [jQuery.Elem] target element
+	# @param enable [Function] function to re-enable buttons
+	# @param succes [Function] function to run on success
+	# @param error [Function] function to run on error
+	# @todo action should be more dynamic for child controllers and views
+	#
+	_onPresent: ( target, enable, success, error ) ->
+		@view.resetActionButtonState()
+		@addChild 'presentation', new Controller.Presentation( this )
 
 	# On Tutorial Button clicked
 	#
@@ -480,3 +490,4 @@ class Controller.Main extends Controller.Base
 	onUnload: () =>
 		locache.set( 'main.cell', @controller("cell").model.serialize() )
 		super()
+

app/assets/javascripts/controllers/presentation.js.coffee

@@ -2,12 +2,134 @@
 #
 class Controller.Presentation extends Controller.Base
 
+
 	# Constructs a new presentation
 	#
 	constructor: ( @parent, view ) ->
 		super view ? ( new View.Collection() )
+
+		@_bindKeys( [37, false, false, false], @, @backward )
 		@_bindKeys( [39, false, false, false], @, @forward )
+		@_bindKeys( [32, false, false, false], @, @present )
+
+		@cursor = $("<div id=\"cursor\"></div>")
+		$("body").append(@cursor)
+
+		@_presentation = [null]
+		@index = 0
+
+		# Hardcode presentation
+
+		# Set cell name
+		@add "#cell_name", "Antidote"
+
+		# Add virus
+		@add ".add_metabolite"
+		@add ".module-properties.selected .name input", "virus"
+		@add ".module-properties.selected .parameter .control-group:contains('amount') input", "100"
+		#@add ".module-properties.selected .parameter .control-group:contains('supply') input", "10"
+		@add ".module-properties.selected div button:contains('Create')"
+
+		# Transport the virus in
+
+		@add ".add_transporter"
+		@add ".module-properties.selected .metabolite .control-group [data-selectable='transported'] label:contains('virus') input"
+		@add ".module-properties.selected div button:contains('Create')"
+
+		# Convert the virus to product
+		@add ".add_metabolism"
+		@add ".module-properties.selected .metabolites .control-group [data-selectable='orig'] input[value='s#int']"
+		@add ".module-properties.selected .metabolites .control-group [data-selectable='orig'] input[value='virus#int']"
+		@add ".module-properties.selected div button:contains('Create')"
+
+		# Add protein
+		@add ".add_protein"
+		@add ".module-properties.selected div button:contains('Create')"
+
+		# Transport the product out
+
+		@add ".add_transporter:gt(0)"
+		@add ".module-properties.selected div button:contains('Create')"
+
+		# Simulate the cell
+
+		@add "[data-action='simulate']"
+
+		###
+
+		# Change metabolism velocity
+
+		@add ".metabolism-hitbox"
+		@add ".module-properties.selected .parameter .control-group input:gt(3)", "0.5"
+		@add ".module-properties.selected div button:contains('Save')"
+
+		###
+
+		# Save the cell
+
+		@add ".btn.dropdown-toggle"
+		@add "[data-action='saveAs']"
+
+		# Reset the cell
+
+		@add "[data-action='reset']"
+		@add ".modal[aria-hidden='false'] [data-action='confirm']"
+
+		# Add virus again
+
+		@add ".add_metabolite"
+		@add ".module-properties.selected .name input", "virus"
+		@add ".module-properties.selected div button:contains('Create')"
+
+		# Load antidote
+
+		@add "[data-action='load']"
+		@add "[data-action='load']:gt(0)"
+
+	# Add a new slide to move to the id and click or enter an optional value
+	#
+	# @param selector [String] The DOM selector of the element to present
+	# @param value [String] An optional value for the element. If omitted, will click on the element
+	#
+	add: ( selector, value) ->
+		@_presentation.push new Controller.Slide( @, selector, value )
+
+	# Moves the presentation backward one step
+	#
+	backward: ( ) ->
+		console.log "Receding presetation"
+		@index--
+		@jumpToSlide @index
 
 	# Moves the presentation forward one step
 	#
 	forward: ( ) ->
+		console.log "Advancing presentation"
+		@index++
+		@jumpToSlide @index
+
+	# Jumps to the slide at the specified index
+	#
+	jumpToSlide: ( index ) ->
+		console.log "Jumping to slide", index
+		slide = @_presentation[index]
+
+		if slide?
+			done = () =>
+				@preparing = off
+			@preparing = on
+			slide.prepare(done)
+		else
+			@end()
+
+	# Presents the current slide
+	#
+	present: ( ) ->
+		unless @preparing
+			@_presentation[@index]?.present()
+
+	# Ends the presentation
+	#
+	end: ( ) ->
+		console.log "Presentation ended"
+		@_unbindAllKeys()

app/assets/javascripts/controllers/slide.js.coffee

@@ -0,0 +1,66 @@
+# Slide for presentation
+#
+class Controller.Slide extends Controller.Base
+
+	# Constructs a new slide
+	#
+	# @param parent [Controller.Presentation] The presentation this slide belongs to
+	# @param selector [String] A DOM selector
+	# @param value [Object] An optional value for the element
+	#
+	constructor: ( @parent, @selector, @argument ) ->
+		super( new View.Collection() )
+
+		Object.defineProperty( @, "element",
+			get: () => $(@selector).first()
+		)
+
+	# Prepares the slide
+	#
+	prepare: ( done ) ->
+		console.log "Preparing", @
+		@_moveTo @element, done
+
+	# Animates the cursor to a specific DOM element
+	#
+	# @param element [JQuery] The element
+	# @param done [Function] Function to execute when done moving
+	#
+	_moveTo: ( element = @element, done ) ->
+		centreX = element.offset().left #+ 10 #(element.width() / 2 )
+		centreY = element.offset().top # + 10 #(element.height() / 2 )
+		console.log element.width()
+		object = {
+			top: centreY
+			left: centreX
+		}
+		@parent.cursor.animate(object, 500,"swing", done)
+
+	# Inputs a character into an element
+	#
+	# @param element [JQuery] The element to input into
+	# @param char [Character] The character to input
+	#
+	_inputCharacter: ( element, char ) ->
+		element.val( element.val() + char )
+
+	# Animates the input of value into element
+	#
+	_inputValue: ( element, value ) ->
+		console.log "Inputting", value, "into", element
+		element.val("")
+		for i,character of value
+			setTimeout( @_inputCharacter, i * 200, element, character )
+
+
+	# Presents this slide
+	#
+	present: ( ) ->
+		console.log "Presenting", @
+
+		@element.select()
+		if @argument
+			@_inputValue @element, @argument
+		else
+			console.log @element
+			@element.click()

app/assets/javascripts/views/raphael.module.dummy.js.coffee

@@ -214,4 +214,7 @@ class View.DummyModule extends View.RaphaelBase
 		hitbox = @paper.rect(rect.x, rect.y, rect.width, rect.height)
 		hitbox.node.setAttribute('class', 'module-hitbox hitdummy-' + @type.toLowerCase() )	
 
+		classname = "add_#{@model.constructor.name.toLowerCase()}"
+		$(hitbox.node).addClass classname
+
 		return hitbox

app/assets/stylesheets/presentation.css

@@ -0,0 +1,9 @@
+div#cursor {
+	position: absolute;
+	background-image: url("/img/cursor.png");
+	top: 400px;
+	left: 500px;
+	width: 13px;
+	height: 15px;
+	z-index: 1000;
+}

app/views/main/_actions.html.erb

@@ -53,6 +53,12 @@
 			:title => "Generate a report"
 		%>
 		<div class="pull-right">
+		<%= f.button '<i class=" icon-film icon-white"></i>'.html_safe, 
+			:class => "btn btn-info", :value => 'present', :type => 'button', 
+			:data => { :action => 'present' }, 
+			:title => "Start the presentation"
+		%>
+
 		<%= f.button '<i class=" icon-question-sign	 icon-white"></i>'.html_safe, 
 			:class => "btn btn-info", :value => 'reset', :type => 'button', 
 			:data => { :action => 'help' }, 
@@ -72,4 +78,4 @@
 		%>
 		</div>
 	</div>
-<% end %>
+<% end %>

app/views/main/index.html.erb

@@ -7,4 +7,4 @@
 </div>
 
 <div id="graphs" class="container">
-</div>
+</div>