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.
122 lines
3.8 KiB
122 lines
3.8 KiB
|
|
// Tutorial component based on bootstrap tour
|
|
var Tutorial = {
|
|
template: '<div/>',
|
|
data: function() {
|
|
return {
|
|
l10n: {
|
|
stringPrevShort: '',
|
|
stringNextShort: '',
|
|
stringEndShort: '',
|
|
stringTutoExplainTitle: '',
|
|
stringTutoExplainContent: '',
|
|
stringTutoBookTitle: '',
|
|
stringTutoBookContent: '',
|
|
stringTutoLibraryButtonTitle: '',
|
|
stringTutoLibraryButtonContent: '',
|
|
stringTutoSettingsButtonTitle: '',
|
|
stringTutoSettingsButtonContent: '',
|
|
stringTutoFullscreenButtonTitle: '',
|
|
stringTutoFullscreenButtonContent: '',
|
|
stringTutoNextButtonTitle: '',
|
|
stringTutoNextButtonContent: '',
|
|
stringTutoPrevButtonTitle: '',
|
|
stringTutoPrevButtonContent: '',
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
localized: function(localization) {
|
|
var vm = this;
|
|
Object.keys(this.l10n).forEach(function(key, index) {
|
|
vm.l10n[key] = localization.get(key.substr(6));
|
|
});
|
|
},
|
|
|
|
show: function(options) {
|
|
options = options || {};
|
|
var steps = [
|
|
{
|
|
element: "",
|
|
orphan: true,
|
|
placement: "bottom",
|
|
title: this.l10n.stringTutoExplainTitle,
|
|
content: this.l10n.stringTutoExplainContent
|
|
},
|
|
{
|
|
element: options.book,
|
|
placement: "right",
|
|
title: this.l10n.stringTutoBookTitle,
|
|
content: this.l10n.stringTutoBookContent
|
|
},
|
|
{
|
|
element: options.switchbutton,
|
|
placement: "bottom",
|
|
title: this.l10n.stringTutoLibraryButtonTitle,
|
|
content: this.l10n.stringTutoLibraryButtonContent
|
|
},
|
|
{
|
|
element: options.settingsbutton,
|
|
placement: "bottom",
|
|
title: this.l10n.stringTutoSettingsButtonTitle,
|
|
content: this.l10n.stringTutoSettingsButtonContent
|
|
},
|
|
{
|
|
element: options.fullscreenbutton,
|
|
placement: "bottom",
|
|
title: this.l10n.stringTutoFullscreenButtonTitle,
|
|
content: this.l10n.stringTutoFullscreenButtonContent
|
|
},
|
|
{
|
|
element: options.prevbutton,
|
|
placement: "right",
|
|
title: this.l10n.stringTutoPrevButtonTitle,
|
|
content: this.l10n.stringTutoPrevButtonContent
|
|
},
|
|
{
|
|
element: options.nextbutton,
|
|
placement: "left",
|
|
title: this.l10n.stringTutoNextButtonTitle,
|
|
content: this.l10n.stringTutoNextButtonContent
|
|
},
|
|
];
|
|
var 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 tutorial-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='tutorial-icon-text'>"+this.l10n.stringPrevShort+"</div>\
|
|
</div>\
|
|
<span data-role='separator' style='margin: 4px'>|</span>\
|
|
<div class='tutorial-next-icon tutorial-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='tutorial-icon-text'>"+this.l10n.stringNextShort+"</div>\
|
|
</div>\
|
|
<div class='tutorial-end-icon tutorial-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='tutorial-icon-text'>"+this.l10n.stringEndShort+"</div>\
|
|
</div>\
|
|
</div>\
|
|
</div>",
|
|
storage: false,
|
|
backdrop: true,
|
|
steps: steps
|
|
});
|
|
tour.init();
|
|
tour.start(true);
|
|
}
|
|
}
|
|
}
|