Simplified tutorial integration from #153.

Move tutorial files to seperated folder and changed button layout.

Author: MarkusBordihn

package-lock.json

@@ -65,6 +65,7 @@ cwc.addon.Message.prototype.prepare = function() {
   }
 };
 
+
 /**
  * @param {Event} e
  */

src/addon/message/message.js

@@ -394,6 +394,26 @@ cwc.fileFormat.File.prototype.getTitle = function() {
 };
 
 
+/**
+ * @return {Object}
+ */
+cwc.fileFormat.File.prototype.getTutorial = function() {
+  return this.getMetadata('tutorial');
+};
+
+
+/**
+ * @return {Array}
+ */
+cwc.fileFormat.File.prototype.getTutorialTour = function() {
+  let tour = this.getMetadata('tour', 'tutorial');
+  if (tour && Array.isArray(tour)) {
+    return tour;
+  }
+  return null;
+};
+
+
 /**
  * @param {!string} version
  * @return {cwc.fileFormat.File}

src/file_format/file_format.js

@@ -199,6 +199,17 @@ cwc.fileHandler.File.prototype.getFileDescription = function() {
 };
 
 
+/**
+ * @return {Array}
+ */
+cwc.fileHandler.File.prototype.getFileTutorialTour = function() {
+  if (this.file_) {
+    return this.file_.getTutorialTour();
+  }
+  return null;
+};
+
+
 /**
  * @param {string} filename
  */

src/file_handler/file_handler.js

@@ -222,10 +222,17 @@ cwc.fileHandler.FileLoader.prototype.loadCWCFile = function(file,
     }
   }
 
+  // Handle tutorial / tour data
+  let tutorialInstance = this.helper.getInstance('tutorial');
+  if (tutorialInstance) {
+    tutorialInstance.setTour(file.getTutorialTour());
+  }
+
   // Handle sidebar icons
   let sidebarInstance = this.helper.getInstance('sidebar');
   if (sidebarInstance) {
     sidebarInstance.enableDescription(file.getDescription());
+    sidebarInstance.enableTutorial(file.getTutorialTour());
   }
 
   modeInstance.postMode();

src/file_handler/file_loader.js

@@ -23,7 +23,6 @@ goog.provide('cwc.mode.Modder');
 goog.require('cwc.utils.mime.Type');
 goog.require('cwc.mode.Config');
 goog.require('cwc.mode.Type');
-goog.require('cwc.Tutorial');
 goog.require('cwc.utils.Helper');
 goog.require('cwc.utils.Logger');
 
@@ -60,9 +59,6 @@ cwc.mode.Modder = function(helper) {
 
   /** @private {string} */
   this.templatePath_ = '../resources/templates/';
-
-  /** @private {cwc.Tutorial} */
-  this.tutorial_ = null;
 };
 
 
@@ -134,12 +130,6 @@ cwc.mode.Modder.prototype.setMode = function(mode) {
     sidebarInstance.clear();
   }
 
-  // Remove tutorial
-  if (this.tutorial_) {
-    this.tutorial_.clear();
-    this.tutorial_ = null;
-  }
-
   this.log_.info('Initialize mode and decorate UI for', mode, '…');
   this.mode = mode;
   this.modder = modeConfig.getMod(this.helper);
@@ -194,9 +184,11 @@ cwc.mode.Modder.prototype.postMode = function(mode = this.mode) {
       this.syncLibrary();
     }
 
-    // Enable tutorials
-    this.tutorial_ = new cwc.Tutorial(this.helper);
-    this.tutorial_.render();
+    // Start tutorial for tutorial files .cwct automatically
+    let tutorialInstance = this.helper.getInstance('tutorial');
+    if (tutorialInstance && this.filename.toLowerCase().endsWith('.cwct')) {
+      tutorialInstance.startTour();
+    }
   }
 
   // Event Handling

src/mode/modder.js

@@ -60,6 +60,7 @@ goog.require('cwc.ui.Notification');
 goog.require('cwc.ui.SelectScreen');
 goog.require('cwc.ui.SettingScreen');
 goog.require('cwc.ui.Sidebar');
+goog.require('cwc.ui.Tutorial');
 goog.require('cwc.ui.connectScreen.Screens');
 goog.require('cwc.utils.Dialog');
 goog.require('cwc.utils.Events');
@@ -105,6 +106,7 @@ cwc.ui.BuilderHelpers = {
   'selectScreen': cwc.ui.SelectScreen,
   'settingScreen': cwc.ui.SettingScreen,
   'sidebar': cwc.ui.Sidebar,
+  'tutorial': cwc.ui.Tutorial,
 };
 
 

src/tutorial/tutorial.js

@@ -95,18 +95,20 @@
           {param title: 'Coding with Chrome Basics' /}
           {param text: 'An introduction to Coding with Chrome' /}
           {param opt_link_text: 'Learn Coding with Chrome' /}
-          {param file: 'basic/blocks/cwc.cwct' /}
+          {param tutorial: 'basic/blocks/cwc.cwct' /}
           {param opt_color_class: 'bg-light-blue' /}
           {param opt_icon: 'school' /}
         {/call}
+
         {call cwc.soy.SelectScreenTemplate.fileCard data="all"}
           {param title: 'Blockly Basics' /}
           {param text: 'Learn drag-and-drop programming' /}
           {param opt_link_text: 'Learn Blockly' /}
-          {param file: 'basic/blocks/blockly.cwct' /}
+          {param tutorial: 'basic/blocks/blockly.cwct' /}
           {param opt_color_class: 'bg-light-blue' /}
           {param opt_icon: 'school' /}
         {/call}
+
       </div>
     </div>
   {/if}

src/ui/builder.js

@@ -70,6 +70,9 @@ cwc.ui.SelectScreen = function(helper) {
 
   /** @private {!string} */
   this.resourcesPath_ = '../resources/examples/';
+
+  /** @private {!string} */
+  this.tutorialPath_ = '../resources/tutorial/';
 };
 
 
@@ -298,6 +301,13 @@ cwc.ui.SelectScreen.prototype.handleFileClick_ = function(e) {
           .loadLocalFile(this.resourcesPath_ + filename);
         break;
       }
+      case 'loadTutorial': {
+        this.showDialog_('Loading tutorial file ' + filename,
+          cwc.soy.SelectScreen.loading_);
+        this.helper.getInstance('fileLoader')
+          .loadLocalFile(this.tutorialPath_ + filename);
+        break;
+      }
       case 'loadMode': {
         this.showDialog_('Loading mode ' + filename,
           cwc.soy.SelectScreen.loading_);