not really known
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

  1. // Tutorial component based on bootstrap tour
  2. var Tutorial = {
  3. template: '<div/>',
  4. data: function() {
  5. return {
  6. l10n: {
  7. stringPrevShort: '',
  8. stringNextShort: '',
  9. stringEndShort: '',
  10. stringTutoExplainTitle: '',
  11. stringTutoExplainContent: '',
  12. stringTutoBookTitle: '',
  13. stringTutoBookContent: '',
  14. stringTutoLibraryButtonTitle: '',
  15. stringTutoLibraryButtonContent: '',
  16. stringTutoSettingsButtonTitle: '',
  17. stringTutoSettingsButtonContent: '',
  18. stringTutoFullscreenButtonTitle: '',
  19. stringTutoFullscreenButtonContent: '',
  20. stringTutoNextButtonTitle: '',
  21. stringTutoNextButtonContent: '',
  22. stringTutoPrevButtonTitle: '',
  23. stringTutoPrevButtonContent: '',
  24. }
  25. }
  26. },
  27. methods: {
  28. localized: function(localization) {
  29. var vm = this;
  30. Object.keys(this.l10n).forEach(function(key, index) {
  31. vm.l10n[key] = localization.get(key.substr(6));
  32. });
  33. },
  34. show: function(options) {
  35. options = options || {};
  36. var steps = [
  37. {
  38. element: "",
  39. orphan: true,
  40. placement: "bottom",
  41. title: this.l10n.stringTutoExplainTitle,
  42. content: this.l10n.stringTutoExplainContent
  43. },
  44. {
  45. element: options.book,
  46. placement: "right",
  47. title: this.l10n.stringTutoBookTitle,
  48. content: this.l10n.stringTutoBookContent
  49. },
  50. {
  51. element: options.switchbutton,
  52. placement: "bottom",
  53. title: this.l10n.stringTutoLibraryButtonTitle,
  54. content: this.l10n.stringTutoLibraryButtonContent
  55. },
  56. {
  57. element: options.settingsbutton,
  58. placement: "bottom",
  59. title: this.l10n.stringTutoSettingsButtonTitle,
  60. content: this.l10n.stringTutoSettingsButtonContent
  61. },
  62. {
  63. element: options.fullscreenbutton,
  64. placement: "bottom",
  65. title: this.l10n.stringTutoFullscreenButtonTitle,
  66. content: this.l10n.stringTutoFullscreenButtonContent
  67. },
  68. {
  69. element: options.prevbutton,
  70. placement: "right",
  71. title: this.l10n.stringTutoPrevButtonTitle,
  72. content: this.l10n.stringTutoPrevButtonContent
  73. },
  74. {
  75. element: options.nextbutton,
  76. placement: "left",
  77. title: this.l10n.stringTutoNextButtonTitle,
  78. content: this.l10n.stringTutoNextButtonContent
  79. },
  80. ];
  81. var tour = new Tour({
  82. template: "\
  83. <div class='popover tour'>\
  84. <div class='arrow'></div>\
  85. <h3 class='popover-title tutorial-title'></h3>\
  86. <div class='popover-content'></div>\
  87. <div class='popover-navigation' style='display: flex; flex-wrap:wrap; justify-content: center; align-items: center'>\
  88. <div class='tutorial-prev-icon tutorial-icon-button' data-role='prev'>\
  89. <div class='tutorial-prev-icon1 web-activity'>\
  90. <div class='tutorial-prev-icon2 web-activity-icon'></div>\
  91. <div class='tutorial-prev-icon3 web-activity-disable'></div>\
  92. </div>\
  93. <div class='tutorial-icon-text'>"+this.l10n.stringPrevShort+"</div>\
  94. </div>\
  95. <span data-role='separator' style='margin: 4px'>|</span>\
  96. <div class='tutorial-next-icon tutorial-icon-button' data-role='next'>\
  97. <div class='tutorial-next-icon1 web-activity'>\
  98. <div class='tutorial-next-icon2 web-activity-icon'></div>\
  99. <div class='tutorial-next-icon3 web-activity-disable'></div>\
  100. </div>\
  101. <div class='tutorial-icon-text'>"+this.l10n.stringNextShort+"</div>\
  102. </div>\
  103. <div class='tutorial-end-icon tutorial-icon-button' data-role='end'>\
  104. <div class='tutorial-end-icon1 web-activity'>\
  105. <div class='tutorial-end-icon2 web-activity-icon'></div>\
  106. <div class='tutorial-end-icon3 web-activity-disable'></div>\
  107. </div>\
  108. <div class='tutorial-icon-text'>"+this.l10n.stringEndShort+"</div>\
  109. </div>\
  110. </div>\
  111. </div>",
  112. storage: false,
  113. backdrop: true,
  114. steps: steps
  115. });
  116. tour.init();
  117. tour.start(true);
  118. }
  119. }
  120. }