- /**
- * @type {object}
- */
- events: { click: 'onClick' },
-
- /**
- * Handles edit mode toggle interactions.
- *
- * @constructs
- *
- * @augments Backbone.View
- */
- 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() {
- // Render the visibility.
- this.$el.toggleClass('hidden', this._getTour().length === 0);
- // Render the state.
- const isActive = this.model.get('isActive');
- this.$el.find('button')
- .toggleClass('is-active', isActive)
- .prop('aria-pressed', isActive);
- return this;
- },
-
- /**
- * Model change handler; starts or stops the tour.
- */
- toggleTour() {
- if (this.model.get('isActive')) {
- const $tour = this._getTour();
- this._removeIrrelevantTourItems($tour, this._getDocument());
- const that = this;
- const close = Drupal.t('Close');
- if ($tour.find('li').length) {
- $tour.joyride({
- autoStart: true,
- postRideCallback() {
- that.model.set('isActive', false);
- },
- // HTML segments for tip layout.
- template: {
- link: `<a href="#close" class="joyride-close-tip" aria-label="${close}">×</a>`,
- button: '<a href="#" class="button button--primary joyride-next-tip"></a>',
- },
- });
- this.model.set({ isActive: true, activeTour: $tour });
+ /**
+ * Model change handler; starts or stops the tour.
+ */
+ toggleTour() {
+ if (this.model.get('isActive')) {
+ const $tour = this._getTour();
+ this._removeIrrelevantTourItems($tour, this._getDocument());
+ const that = this;
+ const close = Drupal.t('Close');
+ if ($tour.find('li').length) {
+ $tour.joyride({
+ autoStart: true,
+ postRideCallback() {
+ that.model.set('isActive', false);
+ },
+ // HTML segments for tip layout.
+ template: {
+ link: `<a href="#close" class="joyride-close-tip" aria-label="${close}">×</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: [] });