|
|
-
- // 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);
- }
- }
- }
|