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.
186 lines
5.1 KiB
186 lines
5.1 KiB
|
|
|
|
// Tutorial handling
|
|
define(["webL10n", "activity/activity"], function () {
|
|
var tutorial = {};
|
|
var tour;
|
|
var l10n = l10n_s;
|
|
|
|
tutorial.elements = [];
|
|
|
|
// Init tutorial
|
|
tutorial.init = function() {
|
|
var prevString = l10n.get("TutoPrev");
|
|
var nextString = l10n.get("TutoNext");
|
|
var endString = l10n.get("TutoEnd");
|
|
var steps = [
|
|
{
|
|
element: "",
|
|
orphan: true,
|
|
placement: "bottom",
|
|
title: l10n.get("TutoExplainTitle"),
|
|
content: l10n.get("TutoExplainContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("board"),
|
|
placement: "right",
|
|
title: l10n.get("TutoBoardTitle"),
|
|
content: l10n.get("TutoBoardContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("activity"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoActivityTitle"),
|
|
content: l10n.get("TutoActivityContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("node"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoNodeTitle"),
|
|
content: l10n.get("TutoNodeContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("link"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoLinkTitle"),
|
|
content: l10n.get("TutoLinkContent")
|
|
},
|
|
{
|
|
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")
|
|
},
|
|
{
|
|
element: tutorial.getElement("textvalue"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoTextTitle"),
|
|
content: l10n.get("TutoTextContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("foreground"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoForegroundTitle"),
|
|
content: l10n.get("TutoForegroundContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("background"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoBackgroundTitle"),
|
|
content: l10n.get("TutoBackgroundContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("bold"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoBoldTitle"),
|
|
content: l10n.get("TutoBoldContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("italic"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoItalicTitle"),
|
|
content: l10n.get("TutoItalicContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("font"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoFontTitle"),
|
|
content: l10n.get("TutoFontContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("fontplus"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoFontPlusTitle"),
|
|
content: l10n.get("TutoFontPlusContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("fontminus"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoFontMinusTitle"),
|
|
content: l10n.get("TutoFontMinusContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("stop"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoStopTitle"),
|
|
content: l10n.get("TutoStopContent")
|
|
},
|
|
];
|
|
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() {
|
|
tutorial.init();
|
|
tour.start(true);
|
|
};
|
|
|
|
return tutorial;
|
|
});
|