mirror of
https://github.com/node-red/node-red.git
synced 2025-03-01 10:36:34 +00:00
Add initial tour-guide feature
This commit is contained in:
Nick O'Leary
80
packages/node_modules/@node-red/editor-client/src/tours/first-flow.js
vendored
Normal file
80
packages/node_modules/@node-red/editor-client/src/tours/first-flow.js
vendored
Normal file
@@ -0,0 +1,80 @@
|
||||
export default {
|
||||
steps: [
|
||||
{
|
||||
title: "Create your first flow",
|
||||
width: 400,
|
||||
description: 'This tutorial will guide you through creating your first flow',
|
||||
nextButton: 'start'
|
||||
},
|
||||
{
|
||||
element: "#red-ui-workspace .red-ui-tab-button.red-ui-tabs-add",
|
||||
description: 'To add a new tab, click the <i class="fa fa-plus"></i> button',
|
||||
wait: {
|
||||
type: "dom-event",
|
||||
event: "click",
|
||||
element: "#red-ui-workspace .red-ui-tab-button.red-ui-tabs-add a"
|
||||
},
|
||||
},
|
||||
{
|
||||
element: '.red-ui-palette-node[data-palette-type="inject"]',
|
||||
direction: 'right',
|
||||
description: 'The palette lists all of the nodes available to use. Drag a new Inject node into the workspace.',
|
||||
fallback: 'inset-bottom-right',
|
||||
wait: {
|
||||
type: "nr-event",
|
||||
event: "nodes:add",
|
||||
filter: function(event) {
|
||||
if (event.type === "inject") {
|
||||
this.injectNode = event;
|
||||
return true;
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
$('.red-ui-palette-node[data-palette-type="inject"]').css("z-index","auto");
|
||||
}
|
||||
},
|
||||
{
|
||||
element: '.red-ui-palette-node[data-palette-type="debug"]',
|
||||
direction: 'right',
|
||||
description: 'Next, drag a new Debug node into the workspace.',
|
||||
fallback: 'inset-bottom-right',
|
||||
wait: {
|
||||
type: "nr-event",
|
||||
event: "nodes:add",
|
||||
filter: function(event) {
|
||||
if (event.type === "debug") {
|
||||
this.debugNode = event;
|
||||
return true;
|
||||
}
|
||||
return false
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
$('.red-ui-palette-node[data-palette-type="debug"]').css("z-index","auto");
|
||||
},
|
||||
},
|
||||
{
|
||||
element: function() { return $("#"+this.injectNode.id+" .red-ui-flow-port") },
|
||||
description: 'Add a wire from the output of the Inject node to the input of the Debug node',
|
||||
fallback: 'inset-bottom-right',
|
||||
wait: {
|
||||
type: "nr-event",
|
||||
event: "links:add",
|
||||
filter: function(event) {
|
||||
return event.source.id === this.injectNode.id && event.target.id === this.debugNode.id;
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
element: "#red-ui-header-button-deploy",
|
||||
description: 'Deploy your changes so the flow is active in the runtime',
|
||||
width: 200,
|
||||
wait: {
|
||||
type: "dom-event",
|
||||
event: "click"
|
||||
},
|
||||
}
|
||||
]
|
||||
}
|
||||
69
packages/node_modules/@node-red/editor-client/src/tours/welcome-2-1.js
vendored
Normal file
69
packages/node_modules/@node-red/editor-client/src/tours/welcome-2-1.js
vendored
Normal file
@@ -0,0 +1,69 @@
|
||||
export default {
|
||||
steps: [
|
||||
{
|
||||
titleIcon: "fa fa-map-o",
|
||||
title: "Welcome to Node-RED 2.1!",
|
||||
description: "Let's take a moment to discover the new features in this release."
|
||||
},
|
||||
{
|
||||
title: "A new Tour Guide",
|
||||
description: "<p>First, as you've already found, we now have this tour of new features. We'll only show the tour the first time you open the editor for each new version of Node-RED.</p>"+
|
||||
"<p>You can choose not to see this tour in the future by disabling it under the View tab of User Settings.</p>",
|
||||
},
|
||||
{
|
||||
prepare:function() {
|
||||
$("#red-ui-header-button-sidemenu").trigger("click");
|
||||
$("#menu-item-edit-menu").parent().addClass("open")
|
||||
},
|
||||
complete: function() {
|
||||
$("#menu-item-edit-menu").parent().removeClass("open")
|
||||
},
|
||||
element: "#menu-item-edit-menu-submenu",
|
||||
interactive: false,
|
||||
direction: "left",
|
||||
title: "New Edit menu",
|
||||
description: "<p>The main menu has been updated with a new 'Edit' section. This includes all of the familar options, like cut/paste and undo/redo.</p>"+
|
||||
"<p>The menu now displays keyboard shortcuts for the options.</p>"
|
||||
|
||||
},
|
||||
{
|
||||
prepare: function() {
|
||||
$("#red-ui-header-button-sidemenu").trigger("click");
|
||||
$("#menu-item-arrange-menu").parent().addClass("open")
|
||||
},
|
||||
complete: function() {
|
||||
$("#menu-item-arrange-menu").parent().removeClass("open")
|
||||
},
|
||||
element: "#menu-item-arrange-menu-submenu",
|
||||
interactive: false,
|
||||
direction: "left",
|
||||
title: "Arranging nodes",
|
||||
description: "<p>The new 'Arrange' section of the menu provides new options to help arrange your nodes. You can align them to a common edge, spread them out evenly or change their order.</p>",
|
||||
},
|
||||
{
|
||||
element: "#red-ui-workspace-tabs > li:first-child",
|
||||
title: "Flow and Group level environment variables",
|
||||
description: "<p>Flows and Groups can now have their own environment variables that can be referenced by nodes inside them.</p>",
|
||||
},
|
||||
{
|
||||
prepare: function(done) {
|
||||
RED.editor.editFlow(RED.nodes.workspace(RED.workspaces.active()),"editor-tab-envProperties");
|
||||
setTimeout(done,800);
|
||||
},
|
||||
element: "#red-ui-tab-editor-tab-envProperties-link-button",
|
||||
description: "<p>Flows and Groups now have an Environment Variables section in their edit dialog.</p>"
|
||||
},
|
||||
{
|
||||
element: ".node-input-env-container-row .red-ui-editableList-addButton",
|
||||
direction: "top",
|
||||
description: '<p>The environment variables are listed in this table and new ones can be added by clicking the <i class="fa fa-plus"></i> button.</p>',
|
||||
complete: function() {
|
||||
$("#node-dialog-cancel").trigger("click");
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "And that's not all...",
|
||||
description: "<p>There's more still to come before 2.1.0 is released. Watch this space!</p>"
|
||||
},
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user