Merge pull request #622 from brickify/feature/newDownloadDialog

Test strip wizard

public/styles/app/exportModal.styl

@@ -3,3 +3,12 @@
 	margin-right 42px
 	text-align center
 
+#testStripContent
+	#calibrationResult
+		text-align center
+	#calibrationSettings
+		font-size 2em
+	.wizardSelect
+		margin-top 0.5em
+	img
+		width 100%

src/client/ui/downloadModal.coffee

@@ -1,63 +1,182 @@
-addOptions = ($select, range, defaultValue) ->
+wizardLogicInitialized = false
+currentWizardStep = 0
+wizardSteps = [
+	'#wizardStepIntro'
+	'#wizardStepStuds'
+	'#wizardStepHoles'
+	'#wizardStepFinished'
+]
+wizardFadeTime = 300
+
+# Scoping variables
+$modal = undefined
+$sizeSelect = undefined
+$legoContent = undefined
+$stlContent = undefined
+$testStripContent = undefined
+$wizardButtons = undefined
+$wizardHoleSizeSelect = undefined
+$wizardStudSizeSelect = undefined
+$studSizeSelect = undefined
+$holeSizeSelect = undefined
+
+alphabeticalList = (i, range) ->
+	# A = 65
+	return String.fromCharCode 65 + (range + i)
+
+numericalList = (i, range) ->
+	return range + i + 1
+
+addOptions = ($select, range, defaultValue, listFunction) ->
 	for i in [-range..range]
-		$select.append($('<option/>').attr('value', i).text(i))
+		caption = listFunction(i, range)
+		$select.append(
+			$('<option/>')
+				.attr('value', i)
+				.text(caption)
+		)
+
 	$select.val defaultValue
 
+disableWizard = ->
+	$sizeSelect.fadeIn wizardFadeTime
+	$legoContent.fadeIn wizardFadeTime
+	$stlContent.fadeIn wizardFadeTime
+	$wizardButtons.fadeOut wizardFadeTime
+	currentWizardStep = 0
+
+# Initializes the logic for the test strip wizard
+initializeWizard = ($modal) ->
+	wizardLogicInitialized = true
+
+	# Bind all jQuery Elements, hide everything
+	$wizardButtons = $modal.find('#wizardButtons')
+	$nextButton = $wizardButtons.find('#wizardNext')
+	$nextButtonText = $nextButton.find('#text')
+	$backButton = $wizardButtons.find('#wizardBack')
+	$backButtonText = $backButton.find('#text')
+	$calibrationSettings = $modal.find('#calibrationSettings')
+	$wizardButtons.hide()
+
+	$startWizard = $modal.find('#startWizard')
+
+	$wizardStepObjects = wizardSteps.map (selector) ->
+		$wizardStep = $modal.find(selector)
+		$wizardStep.hide()
+		return $wizardStep
+
+	$sizeSelect = $modal.find('#sizeSelect')
+
+	applyCurrentWizardStep = ->
+		if currentWizardStep is wizardSteps.length or
+		currentWizardStep is -1
+			# Finish wizard
+
+			# Apply data values
+			studVal = $wizardStudSizeSelect.val()
+			$studSizeSelect
+				.find("option[value=#{studVal}]")
+				.attr('selected', true)
+			holeVal = $wizardHoleSizeSelect.val()
+			$holeSizeSelect
+				.find("option[value=#{holeVal}]")
+				.attr('selected', true)
+
+			# Trigger intput event - so that
+			# the selected settings get stored fpr csg
+			$studSizeSelect.trigger 'input'
+			$holeSizeSelect.trigger 'input'
+
+			disableWizard()
+		else
+			$wizardStepObjects[currentWizardStep]
+			.fadeIn wizardFadeTime
+
+		# Update calibration preview on last step
+		if currentWizardStep is wizardSteps.length - 1
+			size = $wizardStudSizeSelect
+				.find('option:selected')
+				.html() +
+				' ' +
+				$wizardHoleSizeSelect
+				.find('option:selected')
+				.html()
+			$calibrationSettings.html size
+
+	updateButtonCaptions = ->
+		if currentWizardStep is wizardSteps.length - 1
+			$nextButtonText.html 'Finish'
+		else
+			$nextButtonText.html 'Next step'
+
+		if currentWizardStep is 0
+			$backButtonText.html 'Cancel wizard'
+		else
+			$backButtonText.html 'Go back'
+
+	# Bind button logic
+	$nextButton.click ->
+		$wizardStepObjects[currentWizardStep]
+		.fadeOut wizardFadeTime, ->
+			currentWizardStep++
+			applyCurrentWizardStep()
+			updateButtonCaptions()
+
+	$backButton.click ->
+		$wizardStepObjects[currentWizardStep]
+		.fadeOut wizardFadeTime, ->
+			currentWizardStep--
+			applyCurrentWizardStep()
+			updateButtonCaptions()
+
+	# Fade out size select, start wizard on click
+	$startWizard.click ->
+		currentWizardStep = 0
+		updateButtonCaptions()
+		$legoContent.fadeOut wizardFadeTime
+		$stlContent.fadeOut wizardFadeTime
+		$sizeSelect.fadeOut wizardFadeTime, ->
+			$wizardStepObjects[0].fadeIn wizardFadeTime
+			$wizardButtons.fadeIn wizardFadeTime
+
+getModal = ({testStrip, stl, lego, steps} = {}) ->
+	$modal ?= $('#downloadModal')
+	$legoContent ?= $modal.find('#legoContent')
+	$stlContent ?= $modal.find('#stlContent')
+	$testStripContent ?= $modal.find('#testStripContent')
 
-getModal = ({testStrip: testStrip, stl: stl, lego: lego, steps: steps}) ->
-	html = '
-<div id=\"downloadModal\" tabindex=\"-1\" class=\"modal fade\">
-    <div class=\"modal-dialog\">
-      <div class=\"modal-content\">
-        <div class=\"modal-header\">
-          <button data-dismiss=\"modal\" class=\"close\">&#215;</button>
-          <h4 class=\"modal-title disabled\">Download</h4>
-        </div>
-        <div class=\"modal-body\">'
-	if testStrip
-		html += '
-    <h4 class=\"disabled\">Download stl for 3d printer</h4>
-    <p>Select the stud size that works best for your 3d printer. If you don\'t
-know the size, download and print the&nbsp;
-<a  href=\"/download/testStrip.zip\">test strip</a>.</p>
-    <center>
-        <img src=\"/img/testStrip.png\" width=\"300\" />
-    </center>
-<p>To connect LEGO studs into the test strip, this size works best:
-    <select id=\"holeSizeSelect\" class=\"form-control\"/>
-</p>
-<p>To connect test strip studs into LEGO bricks, this size works best:
-    <select id=\"studSizeSelect\" class=\"form-control\"/>
-</p>
-<br />'
-
-	if  stl
-		html += '
-<div id=\"stlDownloadButton\" class=\"btn btn-success btn-block disabled\">
-    Download stl for 3D printer
-</div>'
 	if lego
-		html += '
-<h4 class=\"disabled\">Download Instructions</h4>
-<div id=\"downloadInstructionsButton\"
-class=\"btn btn-success btn-block disabled\">
-    Download LEGO instructions and scad file
-</div>'
-	html += '
-</div>
-<div class=\"modal-footer\">
-    <button data-dismiss=\"modal\" class=\"btn btn-primary disabled\">
-        Close
-    </button>
-</div>
-</div></div></div>'
-
-	$modal = $($.parseHTML html)
+		$legoContent.show()
+	else
+		$legoContent.hide()
+
+	if stl
+		$stlContent.show()
+	else
+		$stlContent.hide()
+
 	if testStrip
+		$testStripContent.show()
+
+		# Prefill select values
 		$studSizeSelect = $modal.find '#studSizeSelect'
-		addOptions $studSizeSelect, steps, 0
+		$wizardStudSizeSelect = $modal.find '#wizardStudSizeSelect'
+		addOptions $studSizeSelect, steps, 0, alphabeticalList
+		addOptions $wizardStudSizeSelect, steps, 0, alphabeticalList
+
 		$holeSizeSelect = $modal.find '#holeSizeSelect'
-		addOptions $holeSizeSelect, steps, 0
+		$wizardHoleSizeSelect = $modal.find '#wizardHoleSizeSelect'
+		addOptions $holeSizeSelect, steps, 0, numericalList
+		addOptions $wizardHoleSizeSelect, steps, 0, numericalList
+	else
+		$testStripContent.hide()
+
+	if not wizardLogicInitialized
+		initializeWizard $modal
+
+	# Reset wizard when closing the modal
+	$modal.on 'hidden.bs.modal', ->
+		disableWizard()
 
 	return $modal
 

views/app/app.jade

@@ -30,6 +30,7 @@ block body
 	a(target='_blank' href='https://docs.google.com/forms/d/14_gpbiIdyQciLczzW1SGx9inXeuj3eNF9w2cBZzIoC4/viewform?usp=send_form')
 		.corner-ribbon.top-right.blue.shadow.sticky.hidden-xs Give Feedback!
 
+	include ../downloadModal/downloadModal.jade
 block scripts
 	script(src='/libs/webglCheck.js')
 	script(src='node_modules/mousetrap/mousetrap.min.js')

views/downloadModal/downloadModal.jade

@@ -0,0 +1,19 @@
+#downloadModal(tabindex='-1').modal.fade
+	.modal-dialog
+		.modal-content
+			.modal-header
+				button(data-dismiss='modal').close ×
+				h4.modal-title.disabled Download
+			.modal-body
+				#testStripContent
+					include testStripWizard.jade
+				#stlContent
+					.btn.btn-success.btn-block.disabled#stlDownloadButton.
+						Download stl for 3D printer
+				#legoContent
+					h4.disabled Download instructions
+					.btn.btn-success.btn-block.disabled#downloadInstructionsButton.
+						Download LEGO instructions and scad file
+			.modal-footer
+				button(data-dismiss='modal').btn.btn-primary.disabled Close
+

views/downloadModal/testStripWizard.jade

@@ -0,0 +1,54 @@
+h4.disabled Download stl for 3d printer
+#sizeSelect
+	p.
+		Please enter your printer type:
+	.row
+		.col-sm-6
+			select.form-control#studSizeSelect
+		.col-sm-6
+			select.form-control#holeSizeSelect
+	br
+	p.
+		If you don't know your printer's type, use our wizard to find it out:
+	button.btn.btn-primary.btn-block#startWizard Start wizard
+	br
+#wizardStepIntro
+	p.
+		Every 3D-printer is different and produces slightly differnt 3D-printed objects.
+		Therefore, to ensure a good fit between the 3D-printed parts and your LEGO-bricks,
+		you need to calibrate your printer.
+	p.
+		For the calibration, download the #[a(href='download/testStrip.zip') test strip] and print it.
+#wizardStepStuds
+	p.
+		Try to connect the test strip studs into a LEGO-brick. Which size fits best?
+	img(src='img/testStripWizard-studSize.png')
+	p.wizardSelect This size fits best:
+		select.form-control#wizardStudSizeSelect
+#wizardStepHoles
+	p.
+		Now connect the LEGO-brick studs into the test strip. Which size fits best?
+	img(src='img/testStripWizard-holeSize.png')
+	p.wizardSelect This size fits best:
+		select.form-control#wizardHoleSizeSelect
+#wizardStepFinished
+	p.
+		You're all set! If you don't change your 3D-printer's settings, you can re-use
+		the calibration settings for further prints.
+	p#calibrationResult
+		| Your calibration settings:
+		br
+		strong#calibrationSettings A 4
+
+#wizardButtons
+	br
+	.row
+		.col-sm-6
+			button.btn.btn-primary.btn-block#wizardBack
+				span #[i.fa.fa-chevron-left]  
+				span#text Go back
+		.col-sm-6
+			button.btn.btn-primary.btn-block#wizardNext
+				span#text Next step
+				span   #[i.fa.fa-chevron-right]
+	br

views/landingpage/landingpage.jade

@@ -12,6 +12,7 @@ block body
 
 	include feedback
 
+	include ../downloadModal/downloadModal.jade
 
 block scripts
 	script(src='/libs/webglCheck.js')