Mercurial > hg > isophonics-drupal-site
diff core/modules/tour/js/tour.js @ 0:4c8ae668cc8c
Initial import (non-working)
author | Chris Cannam |
---|---|
date | Wed, 29 Nov 2017 16:09:58 +0000 |
parents | |
children | 1fec387a4317 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/core/modules/tour/js/tour.js Wed Nov 29 16:09:58 2017 +0000 @@ -0,0 +1,130 @@ +/** +* DO NOT EDIT THIS FILE. +* See the following change record for more information, +* https://www.drupal.org/node/2815083 +* @preserve +**/ + +(function ($, Backbone, Drupal, document) { + var queryString = decodeURI(window.location.search); + + Drupal.behaviors.tour = { + attach: function attach(context) { + $('body').once('tour').each(function () { + var model = new Drupal.tour.models.StateModel(); + new Drupal.tour.views.ToggleTourView({ + el: $(context).find('#toolbar-tab-tour'), + model: model + }); + + model.on('change:isActive', function (model, isActive) { + $(document).trigger(isActive ? 'drupalTourStarted' : 'drupalTourStopped'); + }).set('tour', $(context).find('ol#tour')); + + if (/tour=?/i.test(queryString)) { + model.set('isActive', true); + } + }); + } + }; + + Drupal.tour = Drupal.tour || { + models: {}, + + views: {} + }; + + Drupal.tour.models.StateModel = Backbone.Model.extend({ + defaults: { + tour: [], + + isActive: false, + + activeTour: [] + } + }); + + Drupal.tour.views.ToggleTourView = Backbone.View.extend({ + events: { click: 'onClick' }, + + initialize: function initialize() { + this.listenTo(this.model, 'change:tour change:isActive', this.render); + this.listenTo(this.model, 'change:isActive', this.toggleTour); + }, + render: function render() { + this.$el.toggleClass('hidden', this._getTour().length === 0); + + var isActive = this.model.get('isActive'); + this.$el.find('button').toggleClass('is-active', isActive).prop('aria-pressed', isActive); + return this; + }, + toggleTour: function toggleTour() { + if (this.model.get('isActive')) { + var $tour = this._getTour(); + this._removeIrrelevantTourItems($tour, this._getDocument()); + var that = this; + if ($tour.find('li').length) { + $tour.joyride({ + autoStart: true, + postRideCallback: function postRideCallback() { + that.model.set('isActive', false); + }, + + template: { + link: '<a href=\"#close\" class=\"joyride-close-tip\">×</a>', + button: '<a href=\"#\" class=\"button button--primary joyride-next-tip\"></a>' + } + }); + this.model.set({ isActive: true, activeTour: $tour }); + } + } else { + this.model.get('activeTour').joyride('destroy'); + this.model.set({ isActive: false, activeTour: [] }); + } + }, + onClick: function onClick(event) { + this.model.set('isActive', !this.model.get('isActive')); + event.preventDefault(); + event.stopPropagation(); + }, + _getTour: function _getTour() { + return this.model.get('tour'); + }, + _getDocument: function _getDocument() { + return $(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 (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 (removals) { + var total = $tour.find('li').length; + if (!total) { + this.model.set({ 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); \ No newline at end of file