From 75e12ca1b25cdcdb457ee2a159a0bf4287841c63 Mon Sep 17 00:00:00 2001 From: Jan Szejko Date: Wed, 22 Mar 2017 17:03:29 +0100 Subject: [PATCH] tutorial in editor (mechanics only) --- libs/bootstrap/less/popovers.less | 2 ++ .../modules/documentCanvas/canvas/canvas.js | 2 +- .../modules/documentCanvas/canvas/gutter.js | 5 ++++- src/editor/modules/documentToolbar/actionView.js | 6 +++--- .../modules/documentToolbar/documentToolbar.js | 2 +- .../documentToolbar/templates/actionView.html | 2 +- src/editor/modules/mainBar/mainBar.js | 6 ++++++ src/editor/modules/mainBar/template.html | 12 ++++++------ src/editor/modules/rng/rng.js | 6 +++--- src/editor/views/tabs/tabs.js | 4 ++-- src/editor/views/tabs/templates/handle.html | 2 +- src/fnpjs/runner.js | 15 +++++++++++++++ 12 files changed, 45 insertions(+), 19 deletions(-) diff --git a/libs/bootstrap/less/popovers.less b/libs/bootstrap/less/popovers.less index aae35c8..d60b8f3 100644 --- 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; + color: black; + font-size: 14px; -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 --- 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.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); diff --git a/src/editor/modules/documentCanvas/canvas/gutter.js b/src/editor/modules/documentCanvas/canvas/gutter.js index 472998a..73a46e0 100644 --- 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'); -var GutterView = function(gutter) { +var GutterView = function(gutter, tutorial) { 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 = $('
'); + var tutorialHolder = $('
').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 --- 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.setElement(viewTemplate()); + this.setElement(viewTemplate({tutorial: this.options.tutorial})); }, 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 { diff --git a/src/editor/modules/documentToolbar/documentToolbar.js b/src/editor/modules/documentToolbar/documentToolbar.js index 6e3d630..4cc43fb 100644 --- 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); - view = actionView.create(action); + view = actionView.create(action, sandbox.getTutorialItem(action.definition.name)); _.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 --- a/src/editor/modules/documentToolbar/templates/actionView.html +++ b/src/editor/modules/documentToolbar/templates/actionView.html @@ -1 +1 @@ -
\ No newline at end of file +
data-toggle="tutorial" data-tutorial="<%= tutorial.index %>" data-placement="bottom" data-content="<%= tutorial.text %>"<% } %>>
\ 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 --- 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, + 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) { diff --git a/src/editor/modules/mainBar/template.html b/src/editor/modules/mainBar/template.html index c3295fe..66e8fcc 100644 --- a/src/editor/modules/mainBar/template.html +++ b/src/editor/modules/mainBar/template.html @@ -1,18 +1,18 @@
- MIL/PEER | - <%= userName %> (<%= gettext('Exit') %>) + data-toggle="tutorial" data-tutorial="<%= mainPageTutorial.index %>" data-placement="bottom" data-content="<%= mainPageTutorial.text %>"<% } %>>MIL/PEER | + <%= userName %> data-toggle="tutorial" data-tutorial="<%= exitTutorial.index %>" data-placement="bottom" data-content="<%= exitTutorial.text %>"<% } %>>(<%= gettext('Exit') %>)
diff --git a/src/editor/modules/rng/rng.js b/src/editor/modules/rng/rng.js index fc82fc8..fc4afb0 100644 --- 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'); - + 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(); diff --git a/src/editor/views/tabs/tabs.js b/src/editor/views/tabs/tabs.js index 1b7ba44..0310a04 100644 --- a/src/editor/views/tabs/tabs.js +++ b/src/editor/views/tabs/tabs.js @@ -39,7 +39,7 @@ define([ return this; }, - addTab: function(title, slug, content) { + addTab: function(title, slug, content, tutorial) { if(this.contents[slug]) { this.contents[slug].detach(); } @@ -49,7 +49,7 @@ define([ 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); diff --git a/src/editor/views/tabs/templates/handle.html b/src/editor/views/tabs/templates/handle.html index b828ce4..12b0c9f 100644 --- a/src/editor/views/tabs/templates/handle.html +++ b/src/editor/views/tabs/templates/handle.html @@ -1 +1 @@ -
  • <% if(icon) { %><% } %><%= text %>
    • \ No newline at end of file + data-toggle="tutorial" data-tutorial="<%= tutorial.index %>" data-placement="bottom" data-content="<%= tutorial.text %>"<% } %>><% if(icon) { %><% } %><%= text %> \ No newline at end of file diff --git a/src/fnpjs/runner.js b/src/fnpjs/runner.js index 0dd52e5..27441b1 100644 --- 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(); }; + + 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) { -- 2.20.1