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.
477 lines
14 KiB
477 lines
14 KiB
|
|
|
|
// Tutorial handling
|
|
define([], function () {
|
|
var tutorial = {};
|
|
var tour;
|
|
var launched = false;
|
|
|
|
tutorial.elements = [];
|
|
tutorial.icons = null;
|
|
|
|
// Init tutorial
|
|
tutorial.init = function() {
|
|
var prevString = l10n.get("TutoPrev");
|
|
var nextString = l10n.get("TutoNext");
|
|
var endString = l10n.get("TutoEnd");
|
|
this.activityId = "org.olpcfrance.sharednotes";
|
|
var gotoStep = undefined;
|
|
tour = new Tour({
|
|
template: "\
|
|
<div class='popover tour'>\
|
|
<div class='arrow'></div>\
|
|
<h3 class='popover-title tutorial-title'></h3>\
|
|
<table><tr><td style='vertical-align:top;'><div id='icon-tutorial' style='visibility:hidden;display:inline-block;'></div>\
|
|
</td><td><div class='popover-content'></div></td></tr></table>\
|
|
<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: [],
|
|
onShown: function() {
|
|
if (tutorial.icons && tutorial.icons.steps && tutorial.icons.steps[tour.getCurrentStep()]) {
|
|
var icon = tutorial.icons.steps[tour.getCurrentStep()];
|
|
var iconElement = document.getElementById("icon-tutorial");
|
|
iconElement.style.visibility = 'visible';
|
|
iconElement.style.backgroundImage = "url('"+ icon.directory + "/" + icon.icon + "')";
|
|
iconElement.style.backgroundSize = icon.size + "px";
|
|
iconElement.style.width = icon.size + "px";
|
|
iconElement.style.height = icon.size + "px";
|
|
iconElement.style.marginTop = "15px";
|
|
iconElement.style.marginLeft = "5px";
|
|
if (icon.color) {
|
|
iconLib.colorize(iconElement, icon.color, function(){});
|
|
}
|
|
}
|
|
},
|
|
onEnd: function() {
|
|
tutorial.elements = [];
|
|
tutorial.icons = null;
|
|
}
|
|
});
|
|
var currentView = app.getView();
|
|
if (currentView == constant.radialView) {
|
|
tour.addSteps([
|
|
{
|
|
element: "",
|
|
orphan: true,
|
|
placement: "bottom",
|
|
title: l10n.get("TutoInitMainTitle"),
|
|
content: l10n.get("TutoInitMainContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("owner"),
|
|
placement: "right",
|
|
title: l10n.get("TutoUserTitle"),
|
|
content: l10n.get("TutoUserContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("activity"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoActivityTitle"),
|
|
content: l10n.get("TutoActivityContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("journal"),
|
|
placement: "right",
|
|
title: l10n.get("TutoJournalTitle"),
|
|
content: l10n.get("TutoJournalContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("radialbutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoFavoriteTitle"),
|
|
content: l10n.get("TutoFavoriteContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("listbutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoListTitle"),
|
|
content: l10n.get("TutoListContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("searchtext"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoSearchTitle"),
|
|
content: l10n.get("TutoSearchContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("offlinebutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoOfflineTitle"),
|
|
content: l10n.get("TutoOfflineContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("neighborbutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoNeighborTitle"),
|
|
content: l10n.get("TutoNeighborContent")
|
|
},
|
|
{
|
|
element: "",
|
|
orphan: true,
|
|
placement: "bottom",
|
|
title: l10n.get("TutoRunTitle"),
|
|
content: l10n.get("TutoRunContent")
|
|
}
|
|
]);
|
|
tutorial.icons = {
|
|
steps: {
|
|
0: {icon: 'owner-icon.svg', directory: 'icons', size: constant.sizeEmpty, color: preferences.getColor()},
|
|
3: {icon: 'activity-journal.svg', directory: 'icons', size: constant.sizeEmpty},
|
|
7: {icon: 'cloud-warning.svg', directory: 'icons', size: constant.sizeEmpty},
|
|
9: {icon: 'activity-icon.svg', directory: 'activities/SharedNotes.activity/activity', size: constant.sizeEmpty},
|
|
}
|
|
};
|
|
} else if (currentView == constant.listView) {
|
|
var activities = tutorial.getElementAsObject("activities");
|
|
if (!activities) {
|
|
tour.addSteps([
|
|
{
|
|
element: tutorial.getElement("radialbutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoFavoriteTitle"),
|
|
content: l10n.get("TutoFavoriteContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("listbutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoListTitle"),
|
|
content: l10n.get("TutoListContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("favoriteitembutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoFavswitchTitle"),
|
|
content: l10n.get("TutoFavswitchContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("searchtext"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoSearchTitle"),
|
|
content: l10n.get("TutoSearchContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("neighborbutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoNeighborTitle"),
|
|
content: l10n.get("TutoNeighborContent")
|
|
}
|
|
]);
|
|
} else {
|
|
var steps = [];
|
|
tutorial.icons = {steps: {}};
|
|
for (var i = 0 ; i < activities.length ; i++) {
|
|
steps.push({
|
|
element: "",
|
|
orphan: true,
|
|
placement: "bottom",
|
|
title: activities[i].title,
|
|
content: activities[i].description
|
|
});
|
|
tutorial.icons.steps[i] = activities[i].icon;
|
|
}
|
|
tour.addSteps(steps);
|
|
gotoStep = tutorial.getElementAsObject("step");
|
|
}
|
|
} else if (currentView == constant.journalView) {
|
|
tour.addSteps([
|
|
{
|
|
element: "",
|
|
orphan: true,
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalIntroTitle"),
|
|
content: l10n.get("TutoJournalIntroContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("activityitem"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalActivityTitle"),
|
|
content: l10n.get("TutoJournalActivityContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("timeitem"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalTimeTitle"),
|
|
content: l10n.get("TutoJournalTimeContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("titleitem"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalTitleTitle"),
|
|
content: l10n.get("TutoJournalTitleContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("favoriteitem"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalFavoriteTitle"),
|
|
content: l10n.get("TutoJournalFavoriteContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("checkitem"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalCheckTitle"),
|
|
content: l10n.get("TutoJournalCheckContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("searchtext"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalSearchTitle"),
|
|
content: l10n.get("TutoJournalSearchContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("favoritebutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalFavButtonTitle"),
|
|
content: l10n.get("TutoJournalFavButtonContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("typeselect"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalTypeTitle"),
|
|
content: l10n.get("TutoJournalTypeContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("timeselect"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalTimeButtonTitle"),
|
|
content: l10n.get("TutoJournalTimeButtonContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("sortselect"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalSortButtonTitle"),
|
|
content: l10n.get("TutoJournalSortButtonContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("fromdevicebutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoJournalFromDeviceButtonTitle"),
|
|
content: l10n.get("TutoJournalFromDeviceButtonContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("journalbutton"),
|
|
placement: "top",
|
|
title: l10n.get("TutoJournalLocalTitle"),
|
|
content: l10n.get("TutoJournalLocalContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("cloudonebutton"),
|
|
placement: "top",
|
|
title: l10n.get("TutoJournalCloudOneTitle"),
|
|
content: l10n.get("TutoJournalCloudOneContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("cloudallbutton"),
|
|
placement: "top",
|
|
title: l10n.get("TutoJournalCloudAllTitle"),
|
|
content: l10n.get("TutoJournalCloudAllContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("radialbutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoGotoHomeTitle"),
|
|
content: l10n.get("TutoGotoHomeContent")
|
|
}
|
|
]);
|
|
} else if (currentView == constant.neighborhoodView) {
|
|
tour.addSteps([
|
|
{
|
|
element: "",
|
|
orphan: true,
|
|
placement: "bottom",
|
|
title: l10n.get("TutoNeighborIntroTitle"),
|
|
content: window.sugarizerOS ? l10n.get("TutoNeighborIntroContent2") : l10n.get("TutoNeighborIntroContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("owner"),
|
|
placement: "right",
|
|
title: l10n.get("TutoNeighborUserTitle"),
|
|
content: l10n.get("TutoNeighborUserContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("server"),
|
|
placement: "auto",
|
|
title: l10n.get("TutoNeighborServerTitle"),
|
|
content: l10n.get("TutoNeighborServerContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("other"),
|
|
placement: "auto",
|
|
title: l10n.get("TutoNeighborOtherTitle"),
|
|
content: l10n.get("TutoNeighborOtherContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("activity"),
|
|
placement: "auto",
|
|
title: l10n.get("TutoNeighborActivityTitle"),
|
|
content: l10n.get("TutoNeighborActivityContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("wifi"),
|
|
placement: "auto",
|
|
title: l10n.get("TutoNeighborWifiTitle"),
|
|
content: l10n.get("TutoNeighborWifiContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("radialbutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoGotoHomeTitle"),
|
|
content: l10n.get("TutoGotoHomeContent")
|
|
}
|
|
]);
|
|
} else if (currentView == constant.initView) {
|
|
var previous = {
|
|
element: tutorial.getElement("previous"),
|
|
placement: "top",
|
|
title: l10n.get("TutoInitPreviousTitle"),
|
|
content: l10n.get("TutoInitPreviousContent")
|
|
};
|
|
var next = {
|
|
element: tutorial.getElement("next"),
|
|
placement: "top",
|
|
title: l10n.get("TutoInitNextTitle"),
|
|
content: l10n.get("TutoInitNextContent")
|
|
};
|
|
var createMode = tutorial.getElementAsObject("createnew");
|
|
var steps = [
|
|
[
|
|
{
|
|
element: "",
|
|
orphan: true,
|
|
placement: "bottom",
|
|
title: l10n.get("TutoInitIntroTitle"),
|
|
content: l10n.get("TutoInitIntroTitleIntroContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("newuser"),
|
|
placement: "left",
|
|
title: l10n.get("TutoInitNewUserTitle"),
|
|
content: l10n.get("TutoInitNewUserContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("login"),
|
|
placement: "right",
|
|
title: l10n.get("TutoInitLoginTitle"),
|
|
content: l10n.get("TutoInitLoginContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("historybox"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoInitHistoryTitle"),
|
|
content: l10n.get("TutoInitHistoryContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("helpbutton"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoInitHelpTitle"),
|
|
content: l10n.get("TutoInitHelpContent")
|
|
},
|
|
],
|
|
[
|
|
{
|
|
element: tutorial.getElement("serverbox"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoInitServerTitle"),
|
|
content: l10n.get("TutoInitServerContent")
|
|
},
|
|
{
|
|
element: tutorial.getElement("qrcode"),
|
|
placement: "bottom",
|
|
title: l10n.get("TutoInitQRCodeTitle"),
|
|
content: l10n.get("TutoInitQRCodeContent")
|
|
},
|
|
previous,
|
|
next,
|
|
],
|
|
[
|
|
{
|
|
element: tutorial.getElement("namebox"),
|
|
placement: "bottom",
|
|
title: (createMode ? l10n.get("TutoInitNameNewTitle") : l10n.get("TutoInitNameTitle")),
|
|
content: (createMode ? l10n.get("TutoInitNameNewContent") : l10n.get("TutoInitNameContent"))
|
|
},
|
|
previous,
|
|
next,
|
|
],
|
|
[
|
|
{
|
|
element: tutorial.getElement("passbox"),
|
|
placement: "right",
|
|
title: (createMode ? l10n.get("TutoInitPasswordNewTitle") : l10n.get("TutoInitPasswordTitle")),
|
|
content: (createMode ? l10n.get("TutoInitPasswordNewContent") : l10n.get("TutoInitPasswordContent"))
|
|
},
|
|
previous,
|
|
next,
|
|
],
|
|
[
|
|
{
|
|
element: (createMode ? tutorial.getElement("owner") : tutorial.getElement("passbox")),
|
|
placement: "right",
|
|
title: (createMode ? l10n.get("TutoInitColorTitle") : l10n.get("TutoInitPasswordTitle")),
|
|
content: (createMode ? l10n.get("TutoInitColorContent") : l10n.get("TutoInitPasswordContent"))
|
|
},
|
|
previous,
|
|
next,
|
|
],
|
|
];
|
|
var currentstep = tutorial.getElementAsObject("currentstep");
|
|
tour.addSteps(steps[currentstep]);
|
|
if (currentstep == 0) {
|
|
tutorial.icons = {steps: {0: {icon: 'owner-icon.svg', directory: 'icons', size: constant.sizeEmpty, color: {stroke: "#005FE4", fill: "#FF2B34"}}}};
|
|
}
|
|
}
|
|
tour.init();
|
|
if (gotoStep !== undefined) {
|
|
tour.goTo(gotoStep);
|
|
}
|
|
}
|
|
|
|
// Handle tutorial element id
|
|
tutorial.setElement = function(name, id) {
|
|
tutorial.elements[name] = id;
|
|
}
|
|
tutorial.getElement = function(name) {
|
|
return "#"+tutorial.elements[name];
|
|
}
|
|
tutorial.getElementAsObject = function(name) {
|
|
return tutorial.elements[name];
|
|
}
|
|
|
|
// Start tutorial
|
|
tutorial.start = function() {
|
|
tutorial.init();
|
|
tour.start(true);
|
|
launched = true;
|
|
};
|
|
|
|
// Test if launched
|
|
tutorial.isLaunched = function() {
|
|
return launched;
|
|
};
|
|
|
|
return tutorial;
|
|
});
|