Merge branch 'feature/tutorial-cleanup' into develop

Author: wimpyprogrammer

css/main.css

@@ -1,6 +1,9 @@
 #input {
 	height: 5em;
 }
+.alert-info a {
+	color: #FFF;
+}
 TH, TD {
 	text-align: center;
 }
@@ -32,4 +35,8 @@ TH, TD {
 }
 .table-bordered .end-expression {
 	border-right: 3px solid black;
+}
+/* The specificity of Bootstrap Tour is less than Bootstrap Flatly, causing z-index issues */
+.tour-step-backdrop {
+	z-index: 1101 !important;
 }

index.html

@@ -10,7 +10,7 @@
 		<meta name="description" content="">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 
-		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css">
 		<style>
 			body {
 				padding-top: 50px;
@@ -75,7 +75,7 @@
 
 				<div class="alert alert-info js-intro-text">
 					<button type="button" class="close" data-dismiss="alert">×</button>
-					Enter the conditional expression you want to parse in the box above<span class="hidden-xs">, or click "View Tutorial" for a walkthrough</span>.
+					Enter the conditional expression you want to parse in the box above<span class="hidden-xs">, or click <a href="javascript:void(0)" class="js-tutorial-start" role="button">"View Tutorial"</a> for a walkthrough</span>.
 				</div>
 
 				<div class="alert alert-danger hidden js-alert-mixed-operators">
@@ -120,8 +120,8 @@
 						'vendor/lodash-2.4.1.min'
 					],
 					'bootstrap': [
-						'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min',
-						'vendor/bootstrap-3.1.1.min'
+						'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min',
+						'vendor/bootstrap-3.3.2.min'
 					],
 					'tour': [
 						'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tour/0.10.1/js/bootstrap-tour.min',

js/main.js

@@ -139,7 +139,7 @@ define(function(require, exports, module) {
         $startTutorial = $('.js-tutorial-start'),
         lastTutorialStepNum = null;
 
-    $submit.on('click keypress', function() {
+    function processInput(trackEvents) {
       var input = $input.val(),
           expression, columnClasses;
 
@@ -158,7 +158,8 @@ define(function(require, exports, module) {
         if(expression.hasMixedOperatorsDeep()) {
           $inputForm.addClass('has-error');
           $alertMixedOperators.removeClass('hidden');
-          trackEventInputMixedOperators();
+          
+          if(trackEvents) { trackEventInputMixedOperators(); }
         } else {
 
           $truthTable.removeClass('hidden');
@@ -169,26 +170,32 @@ define(function(require, exports, module) {
             printCells(expression, columnClasses)
           );
 
-          trackEventInputParse();
+          if(trackEvents) { trackEventInputParse(); }
 
         }
 
       }
+    }
+    
+    $submit.on('click keypress', function() {
+      processInput(true);
+    });
+    
+    $input.on('tutorial.change', function() {
+      processInput(false);
     });
 
     $startTutorial.click(function() {
       var thisStepNum = function(tour) { return tour.getCurrentStep() + 1; },
           userInput;
 
       var tutorial = new Tutorial.Tutorial({
-        debug: true,
-        //template: tutorialTemplate,
         onShow: function() {
           // onStart does not fire if the user has previously seen the tutorial,
           // so detect the start using onShow
           if(lastTutorialStepNum === null) {
             userInput = $input.val();
-            $input.val('').change();
+            $input.val('').trigger('tutorial.change');
           }
         },
         onShown: function(tour) {
@@ -207,7 +214,7 @@ define(function(require, exports, module) {
         },
         onEnd: function(tour) {
           lastTutorialStepNum = null;
-          $input.val(userInput).change();
+          $input.val(userInput).trigger('tutorial.change');
           trackEventTutorialEnd(thisStepNum(tour));
         }
       });

js/tutorial.js

@@ -7,7 +7,7 @@ define(function(require, exports, module) {
 
   function Tutorial(_options) {
     var resetInput = function() {
-      return $input.val('').change();
+      return $input.val('').trigger('tutorial.change');
     };
 
     var example1 = 'if( A || B ) {',
@@ -41,7 +41,7 @@ define(function(require, exports, module) {
         },{
           onShow: function(tour) {
             if(_options.onShow) { _options.onShow(tour); }
-            resetInput().val(example1).change();
+            resetInput().val(example1).trigger('tutorial.change');
           },
           element: '.js-truth-table',
           placement: 'bottom',
@@ -59,7 +59,7 @@ define(function(require, exports, module) {
         },{
           onShow: function(tour) {
             if(_options.onShow) { _options.onShow(tour); }
-            resetInput().val(example2).change();
+            resetInput().val(example2).trigger('tutorial.change');
           },
           element: '.js-truth-table',
           placement: 'bottom',
@@ -77,7 +77,7 @@ define(function(require, exports, module) {
         },{
           onShow: function(tour) {
             if(_options.onShow) { _options.onShow(tour); }
-            resetInput().val(example3).change();
+            resetInput().val(example3).trigger('tutorial.change');
           },
           element: '.js-truth-table',
           placement: 'bottom',