Commit 102b8e40 authored by alexpott's avatar alexpott

Issue #1942576 by nick_schuch, clemens.tolboom: Tour tips to be able to link...

Issue #1942576 by nick_schuch, clemens.tolboom: Tour tips to be able to link to other pages and start tour's automatically.
parent 420f38c5
...@@ -9,6 +9,15 @@ ...@@ -9,6 +9,15 @@
/** /**
* Attaches the tour's toolbar tab behavior. * 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
*/ */
Drupal.behaviors.tour = { Drupal.behaviors.tour = {
attach: function (context) { attach: function (context) {
...@@ -53,6 +62,13 @@ Drupal.behaviors.tour = { ...@@ -53,6 +62,13 @@ Drupal.behaviors.tour = {
}) })
// Initialization: check whether a tour is available on the current page. // Initialization: check whether a tour is available on the current page.
.set('tour', $(context).find('ol#tour')); .set('tour', $(context).find('ol#tour'));
// Start the tour imediately if toggled via query string.
var query = $.deparam.querystring();
if (query.tour) {
model.set('isActive', true);
}
}); });
} }
}; };
...@@ -114,10 +130,12 @@ Drupal.tour.views.ToggleTourView = Backbone.View.extend({ ...@@ -114,10 +130,12 @@ Drupal.tour.views.ToggleTourView = Backbone.View.extend({
var $tour = this._getTour(); var $tour = this._getTour();
this._removeIrrelevantTourItems($tour, this._getDocument()); this._removeIrrelevantTourItems($tour, this._getDocument());
var that = this; var that = this;
$tour.joyride({ if ($tour.find('li').length) {
postRideCallback: function () { that.model.set('isActive', false); } $tour.joyride({
}); postRideCallback: function () { that.model.set('isActive', false); }
this.model.set({ isActive: true, activeTour: $tour }); });
this.model.set({ isActive: true, activeTour: $tour });
}
} }
else { else {
this.model.get('activeTour').joyride('destroy'); this.model.get('activeTour').joyride('destroy');
...@@ -159,7 +177,14 @@ Drupal.tour.views.ToggleTourView = Backbone.View.extend({ ...@@ -159,7 +177,14 @@ Drupal.tour.views.ToggleTourView = Backbone.View.extend({
}, },
/** /**
* Removes tour items for elements that don't exist. * Removes tour items for elements that don't have matching page elements or
* are explicitly filtered out via the 'tips' query string.
*
* Example:
* http://example.com/foo?tips=bar
*
* The above will filter out tips that do not have a matching page element or
* don't have the "bar" class.
* *
* @param jQuery $tour * @param jQuery $tour
* A jQuery element pointing to a <ol> containing tour items. * A jQuery element pointing to a <ol> containing tour items.
...@@ -171,14 +196,23 @@ Drupal.tour.views.ToggleTourView = Backbone.View.extend({ ...@@ -171,14 +196,23 @@ Drupal.tour.views.ToggleTourView = Backbone.View.extend({
*/ */
_removeIrrelevantTourItems: function ($tour, $document) { _removeIrrelevantTourItems: function ($tour, $document) {
var removals = false; var removals = false;
var query = $.deparam.querystring();
$tour $tour
.find('li') .find('li')
.each(function () { .each(function () {
var $this = $(this); var $this = $(this);
var itemId = $this.attr('data-id'); var itemId = $this.attr('data-id');
var itemClass = $this.attr('data-class'); var itemClass = $this.attr('data-class');
// If the query parameter 'tips' is set, remove all tips that don't
// have the matching class.
if (query.tips && !$(this).hasClass(query.tips)) {
removals = true;
$this.remove();
return;
}
// Remove tip from the DOM if there is no corresponding page element.
if ((!itemId && !itemClass) || if ((!itemId && !itemClass) ||
(itemId && $document.find('#' + itemId).length) || (itemId && $document.find('#' + itemId).length) ||
(itemClass && $document.find('.' + itemClass).length)){ (itemClass && $document.find('.' + itemClass).length)){
return; return;
} }
...@@ -189,6 +223,10 @@ Drupal.tour.views.ToggleTourView = Backbone.View.extend({ ...@@ -189,6 +223,10 @@ Drupal.tour.views.ToggleTourView = Backbone.View.extend({
// If there were removals, we'll have to do some clean-up. // If there were removals, we'll have to do some clean-up.
if (removals) { if (removals) {
var total = $tour.find('li').length; var total = $tour.find('li').length;
if (!total) {
this.model.set({ tour: [] });
}
$tour $tour
.find('li') .find('li')
// Rebuild the progress data. // Rebuild the progress data.
......
...@@ -36,6 +36,7 @@ function tour_library_info() { ...@@ -36,6 +36,7 @@ function tour_library_info() {
array('system', 'jquery'), array('system', 'jquery'),
array('system', 'drupal'), array('system', 'drupal'),
array('system', 'backbone'), array('system', 'backbone'),
array('system', 'jquery.bbq'),
array('tour', 'jquery.joyride'), array('tour', 'jquery.joyride'),
array('tour', 'tour-styling'), array('tour', 'tour-styling'),
), ),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment