tour.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. /**
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/2815083
  5. * @preserve
  6. **/
  7. (function ($, Backbone, Drupal, document) {
  8. var queryString = decodeURI(window.location.search);
  9. Drupal.behaviors.tour = {
  10. attach: function attach(context) {
  11. $('body').once('tour').each(function () {
  12. var model = new Drupal.tour.models.StateModel();
  13. new Drupal.tour.views.ToggleTourView({
  14. el: $(context).find('#toolbar-tab-tour'),
  15. model: model
  16. });
  17. model.on('change:isActive', function (model, isActive) {
  18. $(document).trigger(isActive ? 'drupalTourStarted' : 'drupalTourStopped');
  19. }).set('tour', $(context).find('ol#tour'));
  20. if (/tour=?/i.test(queryString)) {
  21. model.set('isActive', true);
  22. }
  23. });
  24. }
  25. };
  26. Drupal.tour = Drupal.tour || {
  27. models: {},
  28. views: {}
  29. };
  30. Drupal.tour.models.StateModel = Backbone.Model.extend({
  31. defaults: {
  32. tour: [],
  33. isActive: false,
  34. activeTour: []
  35. }
  36. });
  37. Drupal.tour.views.ToggleTourView = Backbone.View.extend({
  38. events: { click: 'onClick' },
  39. initialize: function initialize() {
  40. this.listenTo(this.model, 'change:tour change:isActive', this.render);
  41. this.listenTo(this.model, 'change:isActive', this.toggleTour);
  42. },
  43. render: function render() {
  44. this.$el.toggleClass('hidden', this._getTour().length === 0);
  45. var isActive = this.model.get('isActive');
  46. this.$el.find('button').toggleClass('is-active', isActive).prop('aria-pressed', isActive);
  47. return this;
  48. },
  49. toggleTour: function toggleTour() {
  50. if (this.model.get('isActive')) {
  51. var $tour = this._getTour();
  52. this._removeIrrelevantTourItems($tour, this._getDocument());
  53. var that = this;
  54. var close = Drupal.t('Close');
  55. if ($tour.find('li').length) {
  56. $tour.joyride({
  57. autoStart: true,
  58. postRideCallback: function postRideCallback() {
  59. that.model.set('isActive', false);
  60. },
  61. template: {
  62. link: '<a href="#close" class="joyride-close-tip" aria-label="' + close + '">&times;</a>',
  63. button: '<a href="#" class="button button--primary joyride-next-tip"></a>'
  64. }
  65. });
  66. this.model.set({ isActive: true, activeTour: $tour });
  67. }
  68. } else {
  69. this.model.get('activeTour').joyride('destroy');
  70. this.model.set({ isActive: false, activeTour: [] });
  71. }
  72. },
  73. onClick: function onClick(event) {
  74. this.model.set('isActive', !this.model.get('isActive'));
  75. event.preventDefault();
  76. event.stopPropagation();
  77. },
  78. _getTour: function _getTour() {
  79. return this.model.get('tour');
  80. },
  81. _getDocument: function _getDocument() {
  82. return $(document);
  83. },
  84. _removeIrrelevantTourItems: function _removeIrrelevantTourItems($tour, $document) {
  85. var removals = false;
  86. var tips = /tips=([^&]+)/.exec(queryString);
  87. $tour.find('li').each(function () {
  88. var $this = $(this);
  89. var itemId = $this.attr('data-id');
  90. var itemClass = $this.attr('data-class');
  91. if (tips && !$(this).hasClass(tips[1])) {
  92. removals = true;
  93. $this.remove();
  94. return;
  95. }
  96. if (!itemId && !itemClass || itemId && $document.find('#' + itemId).length || itemClass && $document.find('.' + itemClass).length) {
  97. return;
  98. }
  99. removals = true;
  100. $this.remove();
  101. });
  102. if (removals) {
  103. var total = $tour.find('li').length;
  104. if (!total) {
  105. this.model.set({ tour: [] });
  106. }
  107. $tour.find('li').each(function (index) {
  108. var progress = Drupal.t('!tour_item of !total', {
  109. '!tour_item': index + 1,
  110. '!total': total
  111. });
  112. $(this).find('.tour-progress').text(progress);
  113. }).eq(-1).attr('data-text', Drupal.t('End tour'));
  114. }
  115. }
  116. });
  117. })(jQuery, Backbone, Drupal, document);