You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
172 lines
4.7 KiB
172 lines
4.7 KiB
|
|
|
|
// Tutorial handling
|
|
define(["webL10n", "activity/activity"], function () {
|
|
var tutorial = {};
|
|
var tour;
|
|
var l10n = l10n_s;
|
|
|
|
tutorial.elements = [];
|
|
tutorial.tourInit = 1;
|
|
tutorial.tourStandard = 2;
|
|
|
|
// Init tutorial
|
|
tutorial.init = function(tourType) {
|
|
var prevString = l10n.get("TutoPrev");
|
|
var nextString = l10n.get("TutoNext");
|
|
var endString = l10n.get("TutoEnd");
|
|
var steps;
|
|
if (tourType == tutorial.tourInit) {
|
|
steps = [
|
|
{
|
|
reflex: "click",
|
|
element: tutorial.getElement("activity"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoActivityTitle"),
|
|
content: l10n.get("TutoActivityContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("title"),
|
|
placement: "right",
|
|
title: l10n.get("TutoTitleTitle"),
|
|
content: l10n.get("TutoTitleContent")
|
|
},
|
|
{
|
|
reflex: "click",
|
|
element: tutorial.getElement("network"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoNetworkTitle"),
|
|
content: l10n.get("TutoNetworkContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("shared"),
|
|
placement: "right",
|
|
title: l10n.get("TutoSharedTitle"),
|
|
content: l10n.get("TutoSharedContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("help"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoHelpTitle"),
|
|
content: l10n.get("TutoHelpContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("stop"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoStopTitle"),
|
|
content: l10n.get("TutoStopContent")
|
|
},
|
|
];
|
|
} else {
|
|
steps = [
|
|
{
|
|
element: "",
|
|
orphan: true,
|
|
placement: "bottom",
|
|
title: l10n.get("TutoExplainTitle"),
|
|
content: l10n.get("TutoExplainContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("node"),
|
|
placement: "right",
|
|
title: l10n.get("TutoNodeTitle"),
|
|
content: l10n.get("TutoNodeContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("color"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoColorTitle"),
|
|
content: l10n.get("TutoColorContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("add"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoAddTitle"),
|
|
content: l10n.get("TutoAddContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("remove"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoRemoveTitle"),
|
|
content: l10n.get("TutoRemoveContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("undo"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoUndoTitle"),
|
|
content: l10n.get("TutoUndoContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("redo"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoRedoTitle"),
|
|
content: l10n.get("TutoRedoContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("zoom"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoZoomTitle"),
|
|
content: l10n.get("TutoZoomContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("png"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoPngTitle"),
|
|
content: l10n.get("TutoPngContent")
|
|
},
|
|
];
|
|
}
|
|
tour = new Tour({
|
|
template: "\
|
|
<div class='popover tour'>\
|
|
<div class='arrow'></div>\
|
|
<h3 class='popover-title tutorial-title'></h3>\
|
|
<div class='popover-content'></div>\
|
|
<div class='popover-navigation' style='display: flex; flex-wrap:wrap; justify-content: center; align-items: center'>\
|
|
<div class='tutorial-prev-icon icon-button' data-role='prev'>\
|
|
<div class='tutorial-prev-icon1 web-activity'>\
|
|
<div class='tutorial-prev-icon2 web-activity-icon'></div>\
|
|
<div class='tutorial-prev-icon3 web-activity-disable'></div>\
|
|
</div>\
|
|
<div class='icon-tutorial-text'>"+prevString+"</div>\
|
|
</div>\
|
|
<span data-role='separator' style='margin: 4px'>|</span>\
|
|
<div class='tutorial-next-icon icon-button' data-role='next'>\
|
|
<div class='tutorial-next-icon1 web-activity'>\
|
|
<div class='tutorial-next-icon2 web-activity-icon'></div>\
|
|
<div class='tutorial-next-icon3 web-activity-disable'></div>\
|
|
</div>\
|
|
<div class='icon-tutorial-text'>"+nextString+"</div>\
|
|
</div>\
|
|
<div class='tutorial-end-icon icon-button' data-role='end'>\
|
|
<div class='tutorial-end-icon1 web-activity'>\
|
|
<div class='tutorial-end-icon2 web-activity-icon'></div>\
|
|
<div class='tutorial-end-icon3 web-activity-disable'></div>\
|
|
</div>\
|
|
<div class='icon-tutorial-text'>"+endString+"</div>\
|
|
</div>\
|
|
</div>\
|
|
</div>",
|
|
storage: false,
|
|
backdrop: true,
|
|
steps: steps
|
|
});
|
|
tour.init();
|
|
}
|
|
|
|
// Handle tutorial element id
|
|
tutorial.setElement = function(name, id) {
|
|
tutorial.elements[name] = id;
|
|
}
|
|
tutorial.getElement = function(name) {
|
|
return tutorial.elements[name];
|
|
}
|
|
|
|
// Start tutorial
|
|
tutorial.start = function(tourType) {
|
|
tutorial.init(tourType);
|
|
tour.start(true);
|
|
};
|
|
|
|
return tutorial;
|
|
});
|