tutorial in editor (mechanics only)

diff --git a/libs/bootstrap/less/popovers.less b/libs/bootstrap/less/popovers.less
index aae35c8..d60b8f3 100644 (file)
--- a/libs/bootstrap/less/popovers.less
+++ b/libs/bootstrap/less/popovers.less
@@ -13,6 +13,8 @@
   padding: 1px;
   text-align: left; // Reset given new insertion method
   background-color: @popoverBackground;
   padding: 1px;
   text-align: left; // Reset given new insertion method
   background-color: @popoverBackground;

+  color: black;
+  font-size: 14px;

   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
           background-clip: padding-box;
   -webkit-background-clip: padding-box;
      -moz-background-clip: padding;
           background-clip: padding-box;

diff --git a/src/editor/modules/documentCanvas/canvas/canvas.js b/src/editor/modules/documentCanvas/canvas/canvas.js
index d7d94a7..fa6d27b 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/canvas.js
+++ b/src/editor/modules/documentCanvas/canvas/canvas.js
@@ -86,7 +86,7 @@ var Canvas = function(wlxmlDocument, elements, metadata, sandbox) {
     
 
     this.gutter = gutter.create();
     
 
     this.gutter = gutter.create();

-    this.gutterView = new gutter.GutterView(this.gutter);
+    this.gutterView = new gutter.GutterView(this.gutter, sandbox.getTutorialItem('comment'));

     this.dom.find('.view-row').append(this.gutterView.dom);
     
     this.wlxmlListener = wlxmlListener.create(this);
     this.dom.find('.view-row').append(this.gutterView.dom);
     
     this.wlxmlListener = wlxmlListener.create(this);

diff --git a/src/editor/modules/documentCanvas/canvas/gutter.js b/src/editor/modules/documentCanvas/canvas/gutter.js
index 472998a..73a46e0 100644 (file)
--- a/src/editor/modules/documentCanvas/canvas/gutter.js
+++ b/src/editor/modules/documentCanvas/canvas/gutter.js
@@ -8,7 +8,7 @@ var $ = require('libs/jquery'),
     gutterBoxTemplate = require('libs/text!./gutterBox.html');
 
 
     gutterBoxTemplate = require('libs/text!./gutterBox.html');
 
 

-var GutterView = function(gutter) {
+var GutterView = function(gutter, tutorial) {

     gutter.on('show', function(group) {
         if(this.groupView) {
             this.groupView.remove();
     gutter.on('show', function(group) {
         if(this.groupView) {
             this.groupView.remove();


@@ -19,6 +19,9 @@ var GutterView = function(gutter) {
         this.groupView.show();
     }, this);
     this.dom = $('<div class="gutter"></div>');
         this.groupView.show();
     }, this);
     this.dom = $('<div class="gutter"></div>');

+    var tutorialHolder = $('<div/>').attr('data-toggle', 'tutorial').attr('data-tutorial', tutorial.index)
+        .attr('data-placement', 'bottom').attr('data-content', tutorial.text);
+    this.dom.append(tutorialHolder);

 };
 
 
 };
 
 

diff --git a/src/editor/modules/documentToolbar/actionView.js b/src/editor/modules/documentToolbar/actionView.js
index 5439045..8ac81b9 100644 (file)
--- a/src/editor/modules/documentToolbar/actionView.js
+++ b/src/editor/modules/documentToolbar/actionView.js
@@ -38,7 +38,7 @@ var ActionView = Backbone.View.extend({
         this.action.on('paramsChanged', function() {
             this.render();
         }, this);
         this.action.on('paramsChanged', function() {
             this.render();
         }, this);

-        this.setElement(viewTemplate());
+        this.setElement(viewTemplate({tutorial: this.options.tutorial}));

     },
     render: function() {
         /* globals document */
     },
     render: function() {
         /* globals document */


@@ -126,8 +126,8 @@ var ActionView = Backbone.View.extend({
     }
 });
 
     }
 });
 

-var create = function(action) {
-    var view = new ActionView({action:action});
+var create = function(action, tutorial) {
+    var view = new ActionView({action: action, tutorial: tutorial});

     view.render();
 
     return {
     view.render();
 
     return {

diff --git a/src/editor/modules/documentToolbar/documentToolbar.js b/src/editor/modules/documentToolbar/documentToolbar.js
index 6e3d630..4cc43fb 100644 (file)
--- a/src/editor/modules/documentToolbar/documentToolbar.js
+++ b/src/editor/modules/documentToolbar/documentToolbar.js
@@ -18,7 +18,7 @@ return function(sandbox) {
             var action = sandbox.createAction(actionDescription.actionName, actionDescription.actionConfig),
                 view;
             addedActions.push(action);
             var action = sandbox.createAction(actionDescription.actionName, actionDescription.actionConfig),
                 view;
             addedActions.push(action);

-            view = actionView.create(action);
+            view = actionView.create(action, sandbox.getTutorialItem(action.definition.name));

             
             _.pairs(contextParams).forEach(function(pair) {
                 var name = pair[0],
             
             _.pairs(contextParams).forEach(function(pair) {
                 var name = pair[0],

diff --git a/src/editor/modules/documentToolbar/templates/actionView.html b/src/editor/modules/documentToolbar/templates/actionView.html
index f5ca649..83d59b1 100644 (file)
--- a/src/editor/modules/documentToolbar/templates/actionView.html
+++ b/src/editor/modules/documentToolbar/templates/actionView.html
@@ -1 +1 @@
-<div class="toolbar-widget"></div>
\ No newline at end of file
+<div class="toolbar-widget"<% if(tutorial) { %> data-toggle="tutorial" data-tutorial="<%= tutorial.index %>" data-placement="bottom" data-content="<%= tutorial.text %>"<% } %>></div>
\ No newline at end of file

diff --git a/src/editor/modules/mainBar/mainBar.js b/src/editor/modules/mainBar/mainBar.js
index 4fdee83..93bb8e0 100644 (file)
--- a/src/editor/modules/mainBar/mainBar.js
+++ b/src/editor/modules/mainBar/mainBar.js
@@ -17,6 +17,12 @@ return function(sandbox) {
             documentForkUrl: config.documentForkUrl,
             documentPreviewUrl: config.documentPreviewMainUrl(data.revision),
             documentGalleryUrl: config.documentGalleryUrl,
             documentForkUrl: config.documentForkUrl,
             documentPreviewUrl: config.documentPreviewMainUrl(data.revision),
             documentGalleryUrl: config.documentGalleryUrl,

+            previewTutorial: sandbox.getTutorialItem('preview'),
+            attachmentsTutorial: sandbox.getTutorialItem('attachments'),
+            draftTutorial: sandbox.getTutorialItem('draft'),
+            saveTutorial: sandbox.getTutorialItem('save'),
+            mainPageTutorial: sandbox.getTutorialItem('mainpage'),
+            exitTutorial: sandbox.getTutorialItem('exit')

         }));
 
     view.find('[data-cmd]').click(function(e) {
         }));
 
     view.find('[data-cmd]').click(function(e) {

diff --git a/src/editor/modules/mainBar/template.html b/src/editor/modules/mainBar/template.html
index c3295fe..66e8fcc 100644 (file)
--- a/src/editor/modules/mainBar/template.html
+++ b/src/editor/modules/mainBar/template.html
@@ -1,18 +1,18 @@
 <div class="rng-module-mainBar">
     <div class="top">
 <div class="rng-module-mainBar">
     <div class="top">

-        <a target="_blank" href="/"><span style="color: #dd8000">MIL</span>/<span style="color: #0a0">PEER</span></a> | 
-        <%= userName %> (<a href="/"><%= gettext('Exit') %></a>)
+        <span<% if(mainPageTutorial) { %> data-toggle="tutorial" data-tutorial="<%= mainPageTutorial.index %>" data-placement="bottom" data-content="<%= mainPageTutorial.text %>"<% } %>><a target="_blank" href="/"><span style="color: #dd8000">MIL</span>/<span style="color: #0a0">PEER</span></a></span> |
+        <%= userName %> <span<% if(exitTutorial) { %> data-toggle="tutorial" data-tutorial="<%= exitTutorial.index %>" data-placement="bottom" data-content="<%= exitTutorial.text %>"<% } %>>(<a href="/"><%= gettext('Exit') %></a>)</span>

     </div>
     <div style="clear:both;"></div>
     <div class="bottom">
         <ul>
             <!--li><a target="_blank" href="<%= documentScheduleUrl %>">Edit schedule</a></li>
             <li><a target="_blank" href="<%= documentForkUrl %>">Create another version</a></li-->
     </div>
     <div style="clear:both;"></div>
     <div class="bottom">
         <ul>
             <!--li><a target="_blank" href="<%= documentScheduleUrl %>">Edit schedule</a></li>
             <li><a target="_blank" href="<%= documentForkUrl %>">Create another version</a></li-->

-           <li><a target="_blank" href="<%= documentPreviewUrl %>"><%= gettext('Preview saved version') %></a></li>
-            <li><a target="_blank" href="<%= documentGalleryUrl %>"><%= gettext('Attachments') %></a></li>
+           <li<% if(previewTutorial) { %> data-toggle="tutorial" data-tutorial="<%= previewTutorial.index %>" data-placement="bottom" data-content="<%= previewTutorial.text %>"<% } %>><a target="_blank" href="<%= documentPreviewUrl %>"><%= gettext('Preview saved version') %></a></li>
+            <li<% if(attachmentsTutorial) { %> data-toggle="tutorial" data-tutorial="<%= attachmentsTutorial.index %>" data-placement="bottom" data-content="<%= attachmentsTutorial.text %>"<% } %>><a target="_blank" href="<%= documentGalleryUrl %>"><%= gettext('Attachments') %></a></li>

 
 

-            <li><a href="#" data-cmd="drop-draft" data-disabled-text="<%= gettext('no draft exists') %>"><%= gettext('drop a working draft') %></a></li>
-            <li><button class="btn btn-mini btn-info" data-cmd="save"><%= gettext('Save') %></button></li>
+            <li<% if(draftTutorial) { %> data-toggle="tutorial" data-tutorial="<%= draftTutorial.index %>" data-placement="bottom" data-content="<%= draftTutorial.text %>"<% } %>><a href="#" data-cmd="drop-draft" data-disabled-text="<%= gettext('no draft exists') %>"><%= gettext('drop a working draft') %></a></li>
+            <li<% if(saveTutorial) { %> data-toggle="tutorial" data-tutorial="<%= saveTutorial.index %>" data-placement="bottom" data-content="<%= saveTutorial.text %>"<% } %>><button class="btn btn-mini btn-info" data-cmd="save"><%= gettext('Save') %></button></li>

         </ul>
     </div>
 </div>
         </ul>
     </div>
 </div>

diff --git a/src/editor/modules/rng/rng.js b/src/editor/modules/rng/rng.js
index fc82fc8..fc4afb0 100644 (file)
--- a/src/editor/modules/rng/rng.js
+++ b/src/editor/modules/rng/rng.js
@@ -16,11 +16,11 @@ return function(sandbox) {
     /* globals gettext */
 
     var logger = logging.getLogger('editor.modules.rng');
     /* globals gettext */
 
     var logger = logging.getLogger('editor.modules.rng');

-    
+

     function addMainTab(title, slug, view) {
     function addMainTab(title, slug, view) {

-        views.mainTabs.addTab(title, slug, view);
+        views.mainTabs.addTab(title, slug, view, sandbox.getTutorialItem(slug));

     }
     }

-     
+

     var commands = {
         refreshCanvasSelection: function(selection) {
             var fragment = selection.toDocumentFragment();
     var commands = {
         refreshCanvasSelection: function(selection) {
             var fragment = selection.toDocumentFragment();

diff --git a/src/editor/views/tabs/tabs.js b/src/editor/views/tabs/tabs.js
index 1b7ba44..0310a04 100644 (file)
--- a/src/editor/views/tabs/tabs.js
+++ b/src/editor/views/tabs/tabs.js
@@ -39,7 +39,7 @@ define([
             return this;
         },
         
             return this;
         },
         

-        addTab: function(title, slug, content) {
+        addTab: function(title, slug, content, tutorial) {

             if(this.contents[slug]) {
                 this.contents[slug].detach();
             }
             if(this.contents[slug]) {
                 this.contents[slug].detach();
             }


@@ -49,7 +49,7 @@ define([
             var icon = title.icon || null;
             
             if(!this.tabExists(slug)) {
             var icon = title.icon || null;
             
             if(!this.tabExists(slug)) {

-                this.nodes.tabBar.append(this.handleTemplate({text: text, icon: icon, slug: slug}));
+                this.nodes.tabBar.append(this.handleTemplate({text: text, icon: icon, slug: slug, tutorial: tutorial}));

             }
             if(!this.selectedTab) {
                 this.selectTab(slug);
             }
             if(!this.selectedTab) {
                 this.selectTab(slug);

diff --git a/src/editor/views/tabs/templates/handle.html b/src/editor/views/tabs/templates/handle.html
index b828ce4..12b0c9f 100644 (file)
--- a/src/editor/views/tabs/templates/handle.html
+++ b/src/editor/views/tabs/templates/handle.html
@@ -1 +1 @@
-<li><a href="#<%= slug %>"><% if(icon) { %><i class="icon-<%= icon %>"></i><% } %><%= text %></a></li>
\ No newline at end of file
+<li<% if(tutorial) { %> data-toggle="tutorial" data-tutorial="<%= tutorial.index %>" data-placement="bottom" data-content="<%= tutorial.text %>"<% } %>><a href="#<%= slug %>"><% if(icon) { %><i class="icon-<%= icon %>"></i><% } %><%= text %></a></li>
\ No newline at end of file

diff --git a/src/fnpjs/runner.js b/src/fnpjs/runner.js
index 0dd52e5..27441b1 100644 (file)
--- a/src/fnpjs/runner.js
+++ b/src/fnpjs/runner.js
@@ -89,6 +89,21 @@ var Runner = function(app, modules) {
             menu.dom.css({top: coors.y, left: coors.x});
             menu.show();
         };
             menu.dom.css({top: coors.y, left: coors.x});
             menu.show();
         };

+
+        this.getTutorialItem = function(name) {
+            var tutorial = this.getConfig().tutorial;
+            var tutorialText, index;
+            tutorial.some(function(item, i) {
+                if(item.name === name) {
+                    tutorialText = item.text;
+                    index = i;
+                    return true;
+                }
+            });
+            if(!tutorialText)
+                return;
+            return {index: index + 1, text: tutorialText};
+        }

     };
       
     this.setBootstrappedData = function(moduleName, data) {
     };
       
     this.setBootstrappedData = function(moduleName, data) {