3 * Attaches behaviors for the Tour module's toolbar tab.
6 (function ($, Backbone, Drupal, document) {
7 const queryString = decodeURI(window.location.search);
10 * Attaches the tour's toolbar tab behavior.
12 * It uses the query string for:
13 * - tour: When ?tour=1 is present, the tour will start automatically after
14 * the page has loaded.
15 * - tips: Pass ?tips=class in the url to filter the available tips to the
16 * subset which match the given class.
19 * http://example.com/foo?tour=1&tips=bar
21 * @type {Drupal~behavior}
23 * @prop {Drupal~behaviorAttach} attach
24 * Attach tour functionality on `tour` events.
26 Drupal.behaviors.tour = {
28 $('body').once('tour').each(() => {
29 const model = new Drupal.tour.models.StateModel();
30 new Drupal.tour.views.ToggleTourView({
31 el: $(context).find('#toolbar-tab-tour'),
36 // Allow other scripts to respond to tour events.
37 .on('change:isActive', (model, isActive) => {
38 $(document).trigger((isActive) ? 'drupalTourStarted' : 'drupalTourStopped');
40 // Initialization: check whether a tour is available on the current
42 .set('tour', $(context).find('ol#tour'));
44 // Start the tour immediately if toggled via query string.
45 if (/tour=?/i.test(queryString)) {
46 model.set('isActive', true);
55 Drupal.tour = Drupal.tour || {
58 * @namespace Drupal.tour.models
63 * @namespace Drupal.tour.views
69 * Backbone Model for tours.
73 * @augments Backbone.Model
75 Drupal.tour.models.StateModel = Backbone.Model.extend(/** @lends Drupal.tour.models.StateModel# */{
80 defaults: /** @lends Drupal.tour.models.StateModel# */{
83 * Indicates whether the Drupal root window has a tour.
90 * Indicates whether the tour is currently running.
97 * Indicates which tour is the active one (necessary to cleanly stop).
105 Drupal.tour.views.ToggleTourView = Backbone.View.extend(/** @lends Drupal.tour.views.ToggleTourView# */{
110 events: { click: 'onClick' },
113 * Handles edit mode toggle interactions.
117 * @augments Backbone.View
120 this.listenTo(this.model, 'change:tour change:isActive', this.render);
121 this.listenTo(this.model, 'change:isActive', this.toggleTour);
127 * @return {Drupal.tour.views.ToggleTourView}
128 * The `ToggleTourView` view.
131 // Render the visibility.
132 this.$el.toggleClass('hidden', this._getTour().length === 0);
134 const isActive = this.model.get('isActive');
135 this.$el.find('button')
136 .toggleClass('is-active', isActive)
137 .prop('aria-pressed', isActive);
142 * Model change handler; starts or stops the tour.
145 if (this.model.get('isActive')) {
146 const $tour = this._getTour();
147 this._removeIrrelevantTourItems($tour, this._getDocument());
149 const close = Drupal.t('Close');
150 if ($tour.find('li').length) {
154 that.model.set('isActive', false);
156 // HTML segments for tip layout.
158 link: `<a href="#close" class="joyride-close-tip" aria-label="${close}">×</a>`,
159 button: '<a href="#" class="button button--primary joyride-next-tip"></a>',
162 this.model.set({ isActive: true, activeTour: $tour });
166 this.model.get('activeTour').joyride('destroy');
167 this.model.set({ isActive: false, activeTour: [] });
172 * Toolbar tab click event handler; toggles isActive.
174 * @param {jQuery.Event} event
178 this.model.set('isActive', !this.model.get('isActive'));
179 event.preventDefault();
180 event.stopPropagation();
187 * A jQuery element pointing to a `<ol>` containing tour items.
190 return this.model.get('tour');
194 * Gets the relevant document as a jQuery element.
197 * A jQuery element pointing to the document within which a tour would be
198 * started given the current state.
205 * Removes tour items for elements that don't have matching page elements.
207 * Or that are explicitly filtered out via the 'tips' query string.
210 * <caption>This will filter out tips that do not have a matching
211 * page element or don't have the "bar" class.</caption>
212 * http://example.com/foo?tips=bar
214 * @param {jQuery} $tour
215 * A jQuery element pointing to a `<ol>` containing tour items.
216 * @param {jQuery} $document
217 * A jQuery element pointing to the document within which the elements
220 * @see Drupal.tour.views.ToggleTourView#_getDocument
222 _removeIrrelevantTourItems($tour, $document) {
223 let removals = false;
224 const tips = /tips=([^&]+)/.exec(queryString);
228 const $this = $(this);
229 const itemId = $this.attr('data-id');
230 const itemClass = $this.attr('data-class');
231 // If the query parameter 'tips' is set, remove all tips that don't
232 // have the matching class.
233 if (tips && !$(this).hasClass(tips[1])) {
238 // Remove tip from the DOM if there is no corresponding page element.
239 if ((!itemId && !itemClass) ||
240 (itemId && $document.find(`#${itemId}`).length) ||
241 (itemClass && $document.find(`.${itemClass}`).length)) {
248 // If there were removals, we'll have to do some clean-up.
250 const total = $tour.find('li').length;
252 this.model.set({ tour: [] });
257 // Rebuild the progress data.
258 .each(function (index) {
259 const progress = Drupal.t('!tour_item of !total', { '!tour_item': index + 1, '!total': total });
260 $(this).find('.tour-progress').text(progress);
262 // Update the last item to have "End tour" as the button.
264 .attr('data-text', Drupal.t('End tour'));
269 }(jQuery, Backbone, Drupal, document));