|
|
@@ -619,26 +619,43 @@ Tour.prototype.addEventHandler = function (eventName, handler) { |
|
|
*/ |
|
|
Tour.prototype.processStepListeners = function (stepConfig) { |
|
|
this.listeners.push( |
|
|
// Next/Previous buttons. |
|
|
{ |
|
|
node: this.currentStepNode, |
|
|
args: ['click', '[data-role="next"]', $.proxy(this.next, this)] |
|
|
}, { |
|
|
node: this.currentStepNode, |
|
|
args: ['click', '[data-role="previous"]', $.proxy(this.previous, this)] |
|
|
}, |
|
|
|
|
|
// Close and end tour buttons. |
|
|
{ |
|
|
node: this.currentStepNode, |
|
|
args: ['click', '[data-role="end"]', $.proxy(this.endTour, this)] |
|
|
}, |
|
|
|
|
|
// Keypresses. |
|
|
{ |
|
|
node: $('body'), |
|
|
args: ['keydown', $.proxy(this.handleKeyDown, this)] |
|
|
}); |
|
|
// Next/Previous buttons. |
|
|
{ |
|
|
node: this.currentStepNode, |
|
|
args: ['click', '[data-role="next"]', $.proxy(this.next, this)] |
|
|
}, { |
|
|
node: this.currentStepNode, |
|
|
args: ['click', '[data-role="previous"]', $.proxy(this.previous, this)] |
|
|
}, |
|
|
|
|
|
// Close and end tour buttons. |
|
|
{ |
|
|
node: this.currentStepNode, |
|
|
args: ['click', '[data-role="end"]', $.proxy(this.endTour, this)] |
|
|
}, |
|
|
|
|
|
// Click backdrop and hide tour. |
|
|
{ |
|
|
node: $('[data-flexitour="backdrop"]'), |
|
|
args: ['click', $.proxy(this.hide, this)] |
|
|
}, |
|
|
|
|
|
// Click out and hide tour without backdrop. |
|
|
{ |
|
|
node: $('body'), |
|
|
args: ['click', $.proxy(function (e) { |
|
|
// Handle click in or click out tour content, |
|
|
// if click out, hide tour. |
|
|
if (!this.currentStepNode.is(e.target) && $(e.target).closest('[data-role="flexitour-step"]').length === 0) { |
|
|
this.hide(); |
|
|
}}, this)] |
|
|
}, |
|
|
|
|
|
// Keypresses. |
|
|
{ |
|
|
node: $('body'), |
|
|
args: ['keydown', $.proxy(this.handleKeyDown, this)] |
|
|
}); |
|
|
|
|
|
if (stepConfig.moveOnClick) { |
|
|
var targetNode = this.getStepTarget(stepConfig); |
|
|
@@ -904,7 +921,7 @@ Tour.prototype.announceStep = function (stepConfig) { |
|
|
* @param {EventFacade} e |
|
|
*/ |
|
|
Tour.prototype.handleKeyDown = function (e) { |
|
|
var tabbableSelector = 'a[href], link[href], [draggable=true], [contenteditable=true], :input:enabled, [tabindex], button'; |
|
|
var tabbableSelector = 'a[href], link[href], [draggable=true], [contenteditable=true], :input:enabled, [tabindex], button:enabled'; |
|
|
switch (e.keyCode) { |
|
|
case 27: |
|
|
this.endTour(); |
|
|
@@ -923,8 +940,17 @@ Tour.prototype.handleKeyDown = function (e) { |
|
|
var activeElement = $(document.activeElement); |
|
|
var stepTarget = this.getStepTarget(this.currentStepConfig); |
|
|
var tabbableNodes = $(tabbableSelector); |
|
|
var dialogContainer = $('span[data-flexitour="container"]'); |
|
|
var currentIndex = void 0; |
|
|
tabbableNodes.filter(function (index, element) { |
|
|
// Filter out element which is not belong to target section or dialogue. |
|
|
if (stepTarget) { |
|
|
tabbableNodes = tabbableNodes.filter(function (index, element) { |
|
|
return stepTarget != null && (stepTarget.has(element).length || dialogContainer.has(element).length || stepTarget.is(element) || dialogContainer.is(element)); |
|
|
}); |
|
|
} |
|
|
|
|
|
// Find index of focusing element. |
|
|
tabbableNodes.each(function (index, element) { |
|
|
if (activeElement.is(element)) { |
|
|
currentIndex = index; |
|
|
return false; |
|
|
@@ -934,7 +960,7 @@ Tour.prototype.handleKeyDown = function (e) { |
|
|
var nextIndex = void 0; |
|
|
var nextNode = void 0; |
|
|
var focusRelevant = void 0; |
|
|
if (currentIndex) { |
|
|
if (currentIndex != void 0) { |
|
|
var direction = 1; |
|
|
if (e.shiftKey) { |
|
|
direction = -1; |
|
|
@@ -1090,6 +1116,16 @@ Tour.prototype.hide = function (transition) { |
|
|
$(this).remove(); |
|
|
}); |
|
|
|
|
|
// Remove aria-describedby and tabindex attributes. |
|
|
if (this.currentStepNode && this.currentStepNode.length) { |
|
|
var stepId = this.currentStepNode.attr('id'); |
|
|
if (stepId) { |
|
|
var currentStepElement = '[aria-describedby="' + stepId + '-body"]'; |
|
|
$(currentStepElement).removeAttr('tabindex'); |
|
|
$(currentStepElement).removeAttr('aria-describedby'); |
|
|
} |
|
|
} |
|
|
|
|
|
// Reset the listeners. |
|
|
this.resetStepListeners(); |
|
|
|
|
|
|