Update change(s) to:

1.1 Steps template: Make actions on Create and Run Tabs non-hardcoded and multiple. 1.2 Steps template: Remove actions from Prepare as this step should be user focused, not system focused. Reaffirm "contract" and user's expectation as to what has happened on Create step and what is going to happen. 1.4 Steps template: On Run tab, move deploy action here and demarcate clean up as an exit step, not another action. This means: a. Modifying the HarpJs template code in the Steps.ejs template b. Adding further fields to the _data.json file. Based on User Feedback - Did not do the secondary navigation as it was confusing for user and inconsistent navigation/interaction behaviour.
ot4i · Mar 13, 2015 · 61a8c40 · 61a8c40
1 parent 7b38da3
commit 61a8c40
Show file tree

Hide file tree

Showing 3 changed files with 331 additions and 253 deletions.
diff --git a/src/_data.json b/src/_data.json
@@ -18,7 +18,7 @@
 "separatorFrameworkListJSON":{},
 	"_comments":
 	{
-"separator-ot4i":"",
+"separator-ot4i":{},
 		"repoUrlProtocol":"http://",
 		"repoUrlSite":"ot4i.github.io",
 
@@ -34,8 +34,9 @@
 		"repoUrlFilepathJs2java":"/ot4i.tutorials/dist/js/js2java.js",
 		"repoUrlFilepathJs2javaSteps":"/ot4i.tutorials/dist/js/js2java_steps.js",
 		"repoUrlFilepathActionIcon":"/ot4i.tutorials/dist/images/icons/ibmdesign/back-right-previous_128-orange.png",
+		"repoUrlFilepathExitIcon":"/ot4i.tutorials/dist/images/icons/ibmdesign/close-cancel-error_128-red.png",
 
-"separator-Local":"",
+"separator-Local":{},
 		"repoUrlProtocol":"http://",
 		"repoUrlSite":"localhost:3000",
 
@@ -51,33 +52,35 @@
 		"repoUrlFilepathJs2java":"/js/js2java.js",
 		"repoUrlFilepathJs2javaSteps":"/js/js2java_steps.js",
 
-		"repoUrlFilepathActionIcon":"/images/icons/ibmdesign/back-right-previous_128-orange.png"
+		"repoUrlFilepathActionIcon":"/images/icons/ibmdesign/back-right-previous_128-orange.png",
+		"repoUrlFilepathExitIcon":"/images/icons/ibmdesign/close-cancel-error_128-red.png"
 	},
 	"header":
-	  {
-	    "lang":"en-us",
-	    "charset":"UTF-8",
-	    "metaDescription":"IBM Integration Bus V10 Tutorial",
-	    "metaAuthor":"IBM",
-	    "keywords":"keywords",
-	    "robots":"index,follow",
-	    "source":"IBM Integration Bus V10 Tutorial",
-
-		"repoUrlProtocol":"http://",
-		"repoUrlSite":"localhost:3000",
-
-		"repoUrlFilepathCss":"/css/main.css",
-		"repoUrlFilepathCssApp":"/css/app.css",
-		"repoUrlFilepathJs":"/js/main.js",
-
-		"repoUrlFilepathFoundationModernizr":"/js/vendor/modernizr.js",
-		"repoUrlFilepathFoundationJquery":"/js/vendor/jquery.js",
-		"repoUrlFilepathFoundationJs":"/js/vendor/foundation.min.js",
-
-		"repoUrlFilepathJson2":"/js/json2.js",
-		"repoUrlFilepathJs2java":"/js/js2java.js",
-		"repoUrlFilepathJs2javaSteps":"/js/js2java_steps.js",
-
-		"repoUrlFilepathActionIcon":"/images/icons/ibmdesign/back-right-previous_128-orange.png"
-	  }
+	{
+	"lang":"en-us",
+	"charset":"UTF-8",
+	"metaDescription":"IBM Integration Bus V10 Tutorial",
+	"metaAuthor":"IBM",
+	"keywords":"keywords",
+	"robots":"index,follow",
+	"source":"IBM Integration Bus V10 Tutorial",
+
+	"repoUrlProtocol":"http://",
+	"repoUrlSite":"localhost:3000",
+
+	"repoUrlFilepathCss":"/css/main.css",
+	"repoUrlFilepathCssApp":"/css/app.css",
+	"repoUrlFilepathJs":"/js/main.js",
+
+	"repoUrlFilepathFoundationModernizr":"/js/vendor/modernizr.js",
+	"repoUrlFilepathFoundationJquery":"/js/vendor/jquery.js",
+	"repoUrlFilepathFoundationJs":"/js/vendor/foundation.min.js",
+
+	"repoUrlFilepathJson2":"/js/json2.js",
+	"repoUrlFilepathJs2java":"/js/js2java.js",
+	"repoUrlFilepathJs2javaSteps":"/js/js2java_steps.js",
+
+	"repoUrlFilepathActionIcon":"/images/icons/ibmdesign/back-right-previous_128-orange.png",
+	"repoUrlFilepathExitIcon":"/images/icons/ibmdesign/close-cancel-error_128-red.png"
+	}
 } 
diff --git a/src/_includes/steps.ejs b/src/_includes/steps.ejs
@@ -75,7 +75,11 @@
 					</div>
 				</div>
 		    	<div class="content" id="panel21">
+		    		<% if (tutorialSteps.create.actions) { %>
 		    		<div class="small-10 medium-10 large-10 columns divider">
+					<% } else { %>
+					<div class="small-12 medium-12 large-12 columns">
+					<% } %>
 				      	<div class="row content-details">
 					      	<h4><%= tutorialSteps.create.overview.heading %></h4>
 					        <% var sections = tutorialSteps.create.overview.sections %>
@@ -103,13 +107,17 @@
 					<div class="small-2 medium-2 large-2 columns">
 					<% for (var i in tutorialSteps.create.actions.details) { %>
 					<% var link = tutorialSteps.create.actions.details[i] %>
-					<h4 class="tkaction"><a href="javascript:;" onclick="<%= link.method %>; openResource('<%= tutorialCommon.resourceToOpen %>');"> <%= link.name %> <img class="icon-image" src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathActionIcon %>" /></a></h4>						
+					<h4 class="tkaction"><a href="javascript:;" onclick="<%= link.method %>; openResource('<%= tutorialCommon.resourceToOpen %>');"> <%= link.name %> <img class="icon-image" src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathActionIcon %>" /></a></h4>
+					<% } %>					
 				    </div>
 					<% } %>
-					<% } %>
 		    	</div>
 		    	<div class="content" id="panel31">
+					<% if (tutorialSteps.prepare.actions) { %>
 		    		<div class="small-10 medium-10 large-10 columns divider">
+					<% } else { %>
+					<div class="small-12 medium-12 large-12 columns">
+					<% } %>
 						<div class="row content-details">
 						  	<h4><%= tutorialSteps.prepare.overview.heading %></h4>
 						    <% var sections = tutorialSteps.prepare.overview.sections %>
@@ -133,12 +141,21 @@
 						</div>
 						<% } %>	
 					</div>
+					<% if (tutorialSteps.prepare.actions) { %>
 					<div class="small-2 medium-2 large-2 columns">
-						<h4 class="tkaction"><a href="javascript:;" onclick="deployArtifacts();"> <%= tutorialSteps.prepare.actionName %> <img class="icon-image" src="http://ot4i.github.io/ot4i.tutorials/dist/images/icons/ibmdesign/back-right-previous_128-orange.png" /></a></h4>
+					<% for (var i in tutorialSteps.prepare.actions.details) { %>
+					<% var link = tutorialSteps.prepare.actions.details[i] %>
+					<h4 class="tkaction"><a href="javascript:;" onclick="<%= link.method %>;"> <%= link.name %> <img class="icon-image" src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathActionIcon %>" /></a></h4>						
+				    <% } %>					
 				    </div>
+					<% } %>
 		    	</div>
 		    	<div class="content" id="panel41">
+		    		<% if (tutorialSteps.run.actions) { %>
 		    		<div class="small-10 medium-10 large-10 columns divider">
+					<% } else { %>
+					<div class="small-12 medium-12 large-12 columns">
+					<% } %>
 				    	<div class="row content-details">
 					      	<h4><%= tutorialSteps.run.overview.heading %></h4>
 					        <% var sections = tutorialSteps.run.overview.sections %>
@@ -195,9 +212,21 @@
 						</div>
 						<% } %>	
 					</div>
+					<% if ((tutorialSteps.run.actions) || (tutorialSteps.run.exits) ) { %>
 					<div class="small-2 medium-2 large-2 columns">
-						<h4 class="tkaction"><a href="javascript:;" onclick="cleanUp();" title="<%= tutorialSteps.run.cleanupDescription %>"><%= tutorialSteps.run.cleanupName %><img class="icon-image" src="http://ot4i.github.io/ot4i.tutorials/dist/images/icons/ibmdesign/back-right-previous_128-orange.png" /></a></h4>
+					<% for (var i in tutorialSteps.run.actions.details) { %>
+					<% var link = tutorialSteps.run.actions.details[i] %>
+					<h4 class="tkaction"><a href="javascript:;" onclick="<%= link.method %>;"> <%= link.name %> <img class="icon-image" src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathActionIcon %>" /></a></h4>
+				    <% } %>
+					<% if (tutorialSteps.run.exits) { %>
+					<hr />
+					<% for (var i in tutorialSteps.run.exits.details) { %>
+					<% var link = tutorialSteps.run.exits.details[i] %>
+					<h4 class="tkaction"><a href="javascript:;" onclick="<%= link.method %>;" title="<%= link.description %>"> <%= link.name %> <img class="icon-image" src="<%= header.repoUrlProtocol %><%= header.repoUrlSite %><%= header.repoUrlFilepathExitIcon %>" /></a></h4>
+				    <% } %>
+					<% } %>
 				    </div>
+					<% } %>
 				</div>	
 			</div> <!-- tab-content -->
 		</div> <!-- columns -->