X-Git-Url: http://www.aleph1.co.uk/gitweb/?p=yaffs-website;a=blobdiff_plain;f=web%2Fcore%2Fmodules%2Ftour%2Fjs%2Ftour.js;h=f20796a43681dafa2debb41c54b80bc98b633992;hp=2c7050f75fd01d39461adbc0ad2740a99a2aa9ac;hb=9917807b03b64faf00f6a1f29dcb6eafc454efa5;hpb=aea91e65e895364e460983b890e295aa5d5540a5 diff --git a/web/core/modules/tour/js/tour.js b/web/core/modules/tour/js/tour.js index 2c7050f75..f20796a43 100644 --- a/web/core/modules/tour/js/tour.js +++ b/web/core/modules/tour/js/tour.js @@ -1,33 +1,15 @@ /** - * @file - * Attaches behaviors for the Tour module's toolbar tab. - */ +* DO NOT EDIT THIS FILE. +* See the following change record for more information, +* https://www.drupal.org/node/2815083 +* @preserve +**/ (function ($, Backbone, Drupal, document) { - - 'use strict'; - var queryString = decodeURI(window.location.search); - /** - * Attaches the tour's toolbar tab behavior. - * - * It uses the query string for: - * - tour: When ?tour=1 is present, the tour will start automatically after - * the page has loaded. - * - tips: Pass ?tips=class in the url to filter the available tips to the - * subset which match the given class. - * - * @example - * http://example.com/foo?tour=1&tips=bar - * - * @type {Drupal~behavior} - * - * @prop {Drupal~behaviorAttach} attach - * Attach tour functionality on `tour` events. - */ Drupal.behaviors.tour = { - attach: function (context) { + attach: function attach(context) { $('body').once('tour').each(function () { var model = new Drupal.tour.models.StateModel(); new Drupal.tour.views.ToggleTourView({ @@ -35,16 +17,10 @@ model: model }); - model - // Allow other scripts to respond to tour events. - .on('change:isActive', function (model, isActive) { - $(document).trigger((isActive) ? 'drupalTourStarted' : 'drupalTourStopped'); - }) - // Initialization: check whether a tour is available on the current - // page. - .set('tour', $(context).find('ol#tour')); + model.on('change:isActive', function (model, isActive) { + $(document).trigger(isActive ? 'drupalTourStarted' : 'drupalTourStopped'); + }).set('tour', $(context).find('ol#tour')); - // Start the tour immediately if toggled via query string. if (/tour=?/i.test(queryString)) { model.set('isActive', true); } @@ -52,99 +28,37 @@ } }; - /** - * @namespace - */ Drupal.tour = Drupal.tour || { - - /** - * @namespace Drupal.tour.models - */ models: {}, - /** - * @namespace Drupal.tour.views - */ views: {} }; - /** - * Backbone Model for tours. - * - * @constructor - * - * @augments Backbone.Model - */ - Drupal.tour.models.StateModel = Backbone.Model.extend(/** @lends Drupal.tour.models.StateModel# */{ - - /** - * @type {object} - */ - defaults: /** @lends Drupal.tour.models.StateModel# */{ - - /** - * Indicates whether the Drupal root window has a tour. - * - * @type {Array} - */ + Drupal.tour.models.StateModel = Backbone.Model.extend({ + defaults: { tour: [], - /** - * Indicates whether the tour is currently running. - * - * @type {bool} - */ isActive: false, - /** - * Indicates which tour is the active one (necessary to cleanly stop). - * - * @type {Array} - */ activeTour: [] } }); - Drupal.tour.views.ToggleTourView = Backbone.View.extend(/** @lends Drupal.tour.views.ToggleTourView# */{ - - /** - * @type {object} - */ - events: {click: 'onClick'}, + Drupal.tour.views.ToggleTourView = Backbone.View.extend({ + events: { click: 'onClick' }, - /** - * Handles edit mode toggle interactions. - * - * @constructs - * - * @augments Backbone.View - */ - initialize: function () { + initialize: function initialize() { this.listenTo(this.model, 'change:tour change:isActive', this.render); this.listenTo(this.model, 'change:isActive', this.toggleTour); }, - - /** - * @inheritdoc - * - * @return {Drupal.tour.views.ToggleTourView} - * The `ToggleTourView` view. - */ - render: function () { - // Render the visibility. + render: function render() { this.$el.toggleClass('hidden', this._getTour().length === 0); - // Render the state. + var isActive = this.model.get('isActive'); - this.$el.find('button') - .toggleClass('is-active', isActive) - .prop('aria-pressed', isActive); + this.$el.find('button').toggleClass('is-active', isActive).prop('aria-pressed', isActive); return this; }, - - /** - * Model change handler; starts or stops the tour. - */ - toggleTour: function () { + toggleTour: function toggleTour() { if (this.model.get('isActive')) { var $tour = this._getTour(); this._removeIrrelevantTourItems($tour, this._getDocument()); @@ -152,119 +66,65 @@ if ($tour.find('li').length) { $tour.joyride({ autoStart: true, - postRideCallback: function () { that.model.set('isActive', false); }, - // HTML segments for tip layout. + postRideCallback: function postRideCallback() { + that.model.set('isActive', false); + }, + template: { link: '×', button: '' } }); - this.model.set({isActive: true, activeTour: $tour}); + this.model.set({ isActive: true, activeTour: $tour }); } - } - else { + } else { this.model.get('activeTour').joyride('destroy'); - this.model.set({isActive: false, activeTour: []}); + this.model.set({ isActive: false, activeTour: [] }); } }, - - /** - * Toolbar tab click event handler; toggles isActive. - * - * @param {jQuery.Event} event - * The click event. - */ - onClick: function (event) { + onClick: function onClick(event) { this.model.set('isActive', !this.model.get('isActive')); event.preventDefault(); event.stopPropagation(); }, - - /** - * Gets the tour. - * - * @return {jQuery} - * A jQuery element pointing to a `
    ` containing tour items. - */ - _getTour: function () { + _getTour: function _getTour() { return this.model.get('tour'); }, - - /** - * Gets the relevant document as a jQuery element. - * - * @return {jQuery} - * A jQuery element pointing to the document within which a tour would be - * started given the current state. - */ - _getDocument: function () { + _getDocument: function _getDocument() { return $(document); }, - - /** - * Removes tour items for elements that don't have matching page elements. - * - * Or that are explicitly filtered out via the 'tips' query string. - * - * @example - * This will filter out tips that do not have a matching - * page element or don't have the "bar" class. - * http://example.com/foo?tips=bar - * - * @param {jQuery} $tour - * A jQuery element pointing to a `
      ` containing tour items. - * @param {jQuery} $document - * A jQuery element pointing to the document within which the elements - * should be sought. - * - * @see Drupal.tour.views.ToggleTourView#_getDocument - */ - _removeIrrelevantTourItems: function ($tour, $document) { + _removeIrrelevantTourItems: function _removeIrrelevantTourItems($tour, $document) { var removals = false; var tips = /tips=([^&]+)/.exec(queryString); - $tour - .find('li') - .each(function () { - var $this = $(this); - var itemId = $this.attr('data-id'); - var itemClass = $this.attr('data-class'); - // If the query parameter 'tips' is set, remove all tips that don't - // have the matching class. - if (tips && !$(this).hasClass(tips[1])) { - removals = true; - $this.remove(); - return; - } - // Remove tip from the DOM if there is no corresponding page element. - if ((!itemId && !itemClass) || - (itemId && $document.find('#' + itemId).length) || - (itemClass && $document.find('.' + itemClass).length)) { - return; - } + $tour.find('li').each(function () { + var $this = $(this); + var itemId = $this.attr('data-id'); + var itemClass = $this.attr('data-class'); + + if (tips && !$(this).hasClass(tips[1])) { removals = true; $this.remove(); - }); + return; + } + + if (!itemId && !itemClass || itemId && $document.find('#' + itemId).length || itemClass && $document.find('.' + itemClass).length) { + return; + } + removals = true; + $this.remove(); + }); - // If there were removals, we'll have to do some clean-up. if (removals) { var total = $tour.find('li').length; if (!total) { - this.model.set({tour: []}); + this.model.set({ tour: [] }); } - $tour - .find('li') - // Rebuild the progress data. - .each(function (index) { - var progress = Drupal.t('!tour_item of !total', {'!tour_item': index + 1, '!total': total}); - $(this).find('.tour-progress').text(progress); - }) - // Update the last item to have "End tour" as the button. - .eq(-1) - .attr('data-text', Drupal.t('End tour')); + $tour.find('li').each(function (index) { + var progress = Drupal.t('!tour_item of !total', { '!tour_item': index + 1, '!total': total }); + $(this).find('.tour-progress').text(progress); + }).eq(-1).attr('data-text', Drupal.t('End tour')); } } - }); - -})(jQuery, Backbone, Drupal, document); +})(jQuery, Backbone, Drupal, document); \ No newline at end of file