diff --git a/demo/src/DemoInitializer.js b/demo/src/DemoInitializer.js
index 994086efae..39cffcda9a 100644
--- a/demo/src/DemoInitializer.js
+++ b/demo/src/DemoInitializer.js
@@ -26,23 +26,23 @@ define(
"../lib/hopscotch/hopscotch.min",
"zepto"
],
- function (ConductorRepresenter, hopscotch, $){
+ function (ConductorRepresenter, hopscotch, $) {
"use strict";
function DemoInitializer($timeout, representers, objectService, $location) {
function indexOf(array, callback) {
- return array.reduce(function(previous, element, index) {
- if (previous=== -1 && callback(element)) {
- return index;
- } else {
- return previous;
- }
+ return array.reduce(function (previous, element, index) {
+ if (previous === -1 && callback(element)) {
+ return index;
+ } else {
+ return previous;
+ }
}, -1);
}
- function removeRepresenter(type){
- var index = indexOf(representers, function(representer) {
+ function removeRepresenter(type) {
+ var index = indexOf(representers, function (representer) {
return representer.implementation === type;
});
if (index !== -1) {
@@ -63,56 +63,140 @@ define(
"b171cc31-2cc5-4ae9-ba40-baf1163f22c4"
];
})
- }).then(function() {
+ }).then(function () {
//For default route, redirect user to layout
if ($location.path().length == 0 || $location.path() === "/") {
$location.url("/browse/mct:demo/88a26104-8bd5-445d-8b57-10b567d2823d");
}
});
- $timeout(function() {
+ $timeout(function () {
var tour = {
id: "hello-hopscotch",
steps: [
{
- title: "The Object Tree",
- content: "The object tree contains telemetry and" +
- " view objects",
- target: document.querySelector("mct-tree ul.tree"),
+ title: "Welcome to Open MCT",
+ content: "This brief tour will introduce you to the main elements and concepts of the application. To cancel at any time, click the 'X' in the top right of this box, or click 'Next' to continue.",
+ target: ".user-environ",
+ placement: "top",
+ xOffset: "center",
+ yOffset: "center",
+ arrowOffset: "100000px"
+ },
+ {
+ title: "Object Tree",
+ content: "This contains all the objects you have access to, both telemetry objects and user-created objects. ",
+ target: "mct-tree ul.tree",
placement: "right"
},
{
- title: "Viewing objects",
- content: "Objects selected in the tree" +
- " are shown in the view",
- target: document.querySelector(".object-holder-main"),
- placement: "left",
- xOffset: "200px;"
+ title: "View Area",
+ content: "This area shows the contents of a selected item. Different types of items provide different views of their contents.",
+ target: ".object-holder-main",
+ placement: "top",
+ xOffset: "center",
+ yOffset: "200px",
+ arrowOffset: "center"
},
{
- title: "Creating objects",
- content: "New objects can be created under" +
- " the My Items folder using the " +
- " Create button",
- target: document.querySelector(".create-btn"),
+ title: "Create Button",
+ content: "Many objects in the application are created via this button. Click it to view the Create menu, and rollover each item in the menu to see more information about it. Click 'Next' when ready to continue.",
+ target: ".create-btn",
+ placement: "right",
+ width: "700px",
+ yOffset: "-10px"
+ },
+ {
+ title: "Search",
+ content: "Search filters items in the Object Tree by their name. You can also filter by object type by clicking the 'down' arrow in the right side of the input.",
+ target: ".search-bar",
+ placement: "right",
+ yOffset: "-20px"
+ },
+ {
+ title: "Inspection Pane",
+ content: "This pane shows useful information about the currently selected item. You can hide this pane by clicking its 'X' icon to the right.",
+ target: ".split-pane-component.t-inspect",
+ placement: "left"
+ },
+ {
+ title: "Editing",
+ content: "This part of the tour will step you through editing an object. Anything you change won’t be persisted, so don’t refresh your browser. Click 'Next' to continue.",
+ target: ".user-environ",
+ placement: "top",
+ xOffset: "center",
+ yOffset: "center",
+ arrowOffset: "100000px"
+ },
+ {
+ title: "Select Object to Edit",
+ content: "Expand the 'Examples' folder and click on the 'Layout Edit Example' object.",
+ target: "mct-tree ul.tree",
+ placement: "right",
+ yOffset: "20px"
+ },
+ {
+ title: "Edit Button",
+ content: "Click this button now to begin editing the current object, then click 'Next' to continue.",
+ target: ".object-browse-bar .btn-bar",
+ placement: "bottom",
+ width: "200px",
+ xOffset: "-20px"
+ },
+ {
+ title: "Editing",
+ content: "Each type of object can be edited in different ways. This Display Layout allows you to add, position, size and remove many different types of objects. ",
+ target: ".user-environ",
+ placement: "top",
+ xOffset: "center",
+ yOffset: "center",
+ arrowOffset: "100000px"
+ },
+ {
+ title: "Adding an Object",
+ content: "Let’s add a telemetry element into our layout. Expand 'Mars Science Laboratory', then its folder 'rems', then drag 'Max Air Temperature' into the empty spot in the layout area. Click 'Next' to continue.",
+ target: "mct-tree ul.tree",
+ placement: "right"
+ },
+ {
+ title: "Positioning and Resizing",
+ content: "Any object in a layout can be positioned and resized. Mouse over the object, and grab a corner and drag it to make it fit in the empty spot. When you’re done, click 'Next' to continue.",
+ target: ".user-environ",
+ placement: "left",
+ xOffset: "center",
+ yOffset: "200px"
+ },
+ {
+ title: "Elements Pool",
+ content: "This area lists all objects in the current object. To remove an object, right-click it and choose 'Remove' from the context menu.",
+ target: ".holder-elements",
+ placement: "left"
+ },
+ {
+ title: "Saving",
+ content: "When you are done editing, click 'Save' to save and exit editing. To exit without saving any changes, click the 'X' button.",
+ target: ".t-save",
+ width: "200px",
placement: "bottom"
},
- /*
{
- title: "Composing objects",
- content: "Objects can be composed by dragging" +
- " them from the tree...",
- target: document.querySelector("mct-tree" +
- " ul.tree"),
- placement: "right"
+ title: "Object Types",
+ content: "Try experimenting creating different object types, and adding other objects to them by dragging them from the tree. Only certain types of objects can be dragged into a given object type - if a type of object can’t be added, it simply won’t. ",
+ target: ".user-environ",
+ placement: "top",
+ xOffset: "center",
+ yOffset: "center",
+ arrowOffset: "100000px"
},
{
- title: "Composing objects (cont.)",
- content: "...into the current view",
- target: document.querySelector(".object-holder-main"),
+ title: "Thank You",
+ content: "That’s the end of the tour. Thanks for your time, and we hope you enjoy using and contributing to Open MCT!",
+ target: ".user-environ",
placement: "top",
- yOffset: "100px;"
- }*/
+ xOffset: "center",
+ yOffset: "center",
+ arrowOffset: "100000px"
+ }
]
};
hopscotch.endTour(true);