mirror of
https://github.com/moodle/moodle.git
synced 2025-04-21 00:12:56 +02:00
MDL-71931 tool_usertours: Emit real events on step/tour transitions
This commit is contained in:
Andrew Nicols
parent
61e03fe208
commit
a953a29616
2
admin/tool/usertours/amd/build/events.min.js
vendored
Normal file
2
admin/tool/usertours/amd/build/events.min.js
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
define ("tool_usertours/events",["exports"],function(a){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.eventTypes=void 0;a.eventTypes={stepRender:"tool_usertours/stepRender",stepRendered:"tool_usertours/stepRendered",tourStart:"tool_usertours/tourStart",tourStarted:"tool_usertours/tourStarted",tourEnd:"tool_usertours/tourEnd",tourEnded:"tool_usertours/tourEnded",stepHide:"tool_usertours/stepHide",stepHidden:"tool_usertours/stepHidden"}});
|
||||
//# sourceMappingURL=events.min.js.map
|
||||
1
admin/tool/usertours/amd/build/events.min.js.map
Normal file
1
admin/tool/usertours/amd/build/events.min.js.map
Normal file
File diff suppressed because one or more lines are too long
2
admin/tool/usertours/amd/build/tour.min.js
vendored
2
admin/tool/usertours/amd/build/tour.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,2 +1,2 @@
|
||||
function _typeof(a){"@babel/helpers - typeof";if("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator){_typeof=function(a){return typeof a}}else{_typeof=function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a}}return _typeof(a)}define ("tool_usertours/usertours",["exports","./tour","core/templates","core/log","core/notification","./repository","core/pending"],function(a,b,c,d,e,f,g){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.resetTourState=a.init=void 0;b=j(b);c=j(c);d=j(d);e=j(e);f=i(f);g=j(g);var m="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:{};function h(){if("function"!=typeof WeakMap)return null;var a=new WeakMap;h=function(){return a};return a}function i(a){if(a&&a.__esModule){return a}if(null===a||"object"!==_typeof(a)&&"function"!=typeof a){return{default:a}}var b=h();if(b&&b.has(a)){return b.get(a)}var c={},d=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var e in a){if(Object.prototype.hasOwnProperty.call(a,e)){var f=d?Object.getOwnPropertyDescriptor(a,e):null;if(f&&(f.get||f.set)){Object.defineProperty(c,e,f)}else{c[e]=a[e]}}}c.default=a;if(b){b.set(a,c)}return c}function j(a){return a&&a.__esModule?a:{default:a}}function k(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function l(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){k(h,d,e,f,g,"next",a)}function g(a){k(h,d,e,f,g,"throw",a)}f(void 0)})}}var n=null,o=null,p=function(a,b){return a.find(function(a){return b.some(function(b){if(b&&b.filterMatches){return b.filterMatches(a)}return!0})})},q=function(){var a=l(regeneratorRuntime.mark(function a(b,c){var d,e,f,g;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:d=[];c.forEach(function(a){d.push("function"==typeof m.define&&m.define.amd?new Promise(function(b,c){m.require(["tool_usertours/filter_".concat(a)],b,c)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&m.require&&"component"===m.require.loader?Promise.resolve(require(("tool_usertours/filter_".concat(a)))):Promise.resolve(m["tool_usertours/filter_".concat(a)]))});a.next=4;return Promise.all(d);case 4:e=a.sent;f=p(b,e);if(f){a.next=8;break}return a.abrupt("return");case 8:o=f.tourId;g=f.startTour;if("undefined"==typeof g){g=!0}if(g){r(o)}t();document.querySelector("body").addEventListener("click",function(a){var b=a.target.closest("[data-action=\"tool_usertours/resetpagetour\"]");if(b){a.preventDefault();x(o)}});case 14:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}();a.init=q;var r=function(){var a=l(regeneratorRuntime.mark(function a(b){var d,h,i,j;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:d=new g.default("admin_usertour_fetchTour:".concat(b));a.prev=1;a.next=4;return f.fetchTour(b);case 4:h=a.sent;if(!h.hasOwnProperty("tourconfig")){d.resolve()}a.next=8;return c.default.renderForPromise("tool_usertours/tourstep",h.tourconfig);case 8:i=a.sent;j=i.html;u(b,j,h.tourconfig);d.resolve();a.next=18;break;case 14:a.prev=14;a.t0=a["catch"](1);d.resolve();e.default.exception(a.t0);case 18:case"end":return a.stop();}}},a,null,[[1,14]])}));return function(){return a.apply(this,arguments)}}(),s=function(){var a=document.querySelector(".tool_usertours-resettourcontainer");if(a){return a}a=document.querySelector(".logininfo");if(a){return a}a=document.querySelector("footer");if(a){return a}return document.body},t=function(){var a=new g.default("admin_usertour_addResetLink");c.default.render("tool_usertours/resettour",{}).then(function(a,b){c.default.appendNodeContents(s(),a,b)}).catch().then(a.resolve).catch()},u=function(a,c,d){if(n){d.onEnd=null;n.endTour();n=null}d.eventHandlers={afterEnd:[w],afterRender:[v]};d.tourName=d.name;delete d.name;d.template=c;d.steps=d.steps.map(function(a){if("undefined"!=typeof a.element){a.target=a.element;delete a.element}if("undefined"!=typeof a.reflex){a.moveOnClick=!!a.reflex;delete a.reflex}if("undefined"!=typeof a.content){a.body=a.content;delete a.content}return a});n=new b.default(d);return n.startTour()},v=function(a){var b=a.detail.tour,c=b.getStepConfig(b.getCurrentStepNumber());f.markStepShown(c.stepid,o,c.getCurrentStepNumber()).catch(d.default.error)},w=function(a){var b=a.detail.tour,c=b.getStepConfig(b.getCurrentStepNumber());f.markTourComplete(c.stepid,o,c.getCurrentStepNumber()).catch(d.default.error)},x=function(a){return f.resetTourState(a).then(function(a){if(a.startTour){r(a.startTour)}}).catch(e.default.exception)};a.resetTourState=x});
|
||||
function _typeof(a){"@babel/helpers - typeof";if("function"==typeof Symbol&&"symbol"==typeof Symbol.iterator){_typeof=function(a){return typeof a}}else{_typeof=function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a}}return _typeof(a)}define ("tool_usertours/usertours",["exports","./tour","core/templates","core/log","core/notification","./repository","core/pending","./events"],function(a,b,c,d,e,f,g,h){"use strict";Object.defineProperty(a,"__esModule",{value:!0});a.resetTourState=a.init=void 0;b=k(b);c=k(c);d=k(d);e=k(e);f=j(f);g=k(g);var n="undefined"!=typeof window?window:"undefined"!=typeof self?self:"undefined"!=typeof global?global:{};function i(){if("function"!=typeof WeakMap)return null;var a=new WeakMap;i=function(){return a};return a}function j(a){if(a&&a.__esModule){return a}if(null===a||"object"!==_typeof(a)&&"function"!=typeof a){return{default:a}}var b=i();if(b&&b.has(a)){return b.get(a)}var c={},d=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var e in a){if(Object.prototype.hasOwnProperty.call(a,e)){var f=d?Object.getOwnPropertyDescriptor(a,e):null;if(f&&(f.get||f.set)){Object.defineProperty(c,e,f)}else{c[e]=a[e]}}}c.default=a;if(b){b.set(a,c)}return c}function k(a){return a&&a.__esModule?a:{default:a}}function l(a,b,c,d,e,f,g){try{var h=a[f](g),i=h.value}catch(a){c(a);return}if(h.done){b(i)}else{Promise.resolve(i).then(d,e)}}function m(a){return function(){var b=this,c=arguments;return new Promise(function(d,e){var h=a.apply(b,c);function f(a){l(h,d,e,f,g,"next",a)}function g(a){l(h,d,e,f,g,"throw",a)}f(void 0)})}}var o=null,p=null,q=function(a,b){return a.find(function(a){return b.some(function(b){if(b&&b.filterMatches){return b.filterMatches(a)}return!0})})},r=function(){var a=m(regeneratorRuntime.mark(function a(b,c){var d,e,f,g;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:d=[];c.forEach(function(a){d.push("function"==typeof n.define&&n.define.amd?new Promise(function(b,c){n.require(["tool_usertours/filter_".concat(a)],b,c)}):"undefined"!=typeof module&&module.exports&&"undefined"!=typeof require||"undefined"!=typeof module&&module.component&&n.require&&"component"===n.require.loader?Promise.resolve(require(("tool_usertours/filter_".concat(a)))):Promise.resolve(n["tool_usertours/filter_".concat(a)]))});a.next=4;return Promise.all(d);case 4:e=a.sent;f=q(b,e);if(f){a.next=8;break}return a.abrupt("return");case 8:p=f.tourId;g=f.startTour;if("undefined"==typeof g){g=!0}if(g){s(p)}u();document.querySelector("body").addEventListener("click",function(a){var b=a.target.closest("[data-action=\"tool_usertours/resetpagetour\"]");if(b){a.preventDefault();y(p)}});case 14:case"end":return a.stop();}}},a)}));return function(){return a.apply(this,arguments)}}();a.init=r;var s=function(){var a=m(regeneratorRuntime.mark(function a(b){var d,h,i,j;return regeneratorRuntime.wrap(function(a){while(1){switch(a.prev=a.next){case 0:d=new g.default("admin_usertour_fetchTour:".concat(b));a.prev=1;a.next=4;return f.fetchTour(b);case 4:h=a.sent;if(!h.hasOwnProperty("tourconfig")){d.resolve()}a.next=8;return c.default.renderForPromise("tool_usertours/tourstep",h.tourconfig);case 8:i=a.sent;j=i.html;v(b,j,h.tourconfig);d.resolve();a.next=18;break;case 14:a.prev=14;a.t0=a["catch"](1);d.resolve();e.default.exception(a.t0);case 18:case"end":return a.stop();}}},a,null,[[1,14]])}));return function(){return a.apply(this,arguments)}}(),t=function(){var a=document.querySelector(".tool_usertours-resettourcontainer");if(a){return a}a=document.querySelector(".logininfo");if(a){return a}a=document.querySelector("footer");if(a){return a}return document.body},u=function(){var a=new g.default("admin_usertour_addResetLink");c.default.render("tool_usertours/resettour",{}).then(function(a,b){c.default.appendNodeContents(t(),a,b)}).catch().then(a.resolve).catch()},v=function(a,c,d){if(o&&o.tourRunning){o.endTour();o=null}document.addEventListener(h.eventTypes.tourEnded,x);document.addEventListener(h.eventTypes.stepRenderer,w);d.tourName=d.name;delete d.name;d.template=c;d.steps=d.steps.map(function(a){if("undefined"!=typeof a.element){a.target=a.element;delete a.element}if("undefined"!=typeof a.reflex){a.moveOnClick=!!a.reflex;delete a.reflex}if("undefined"!=typeof a.content){a.body=a.content;delete a.content}return a});o=new b.default(d);return o.startTour()},w=function(a){var b=a.detail.tour,c=b.getStepConfig(b.getCurrentStepNumber());f.markStepShown(c.stepid,p,b.getCurrentStepNumber()).catch(d.default.error)},x=function(a){document.removeEventListener(h.eventTypes.tourEnded,x);document.removeEventListener(h.eventTypes.stepRenderer,w);var b=a.detail.tour,c=b.getStepConfig(b.getCurrentStepNumber());f.markTourComplete(c.stepid,p,b.getCurrentStepNumber()).catch(d.default.error)},y=function(a){return f.resetTourState(a).then(function(a){if(a.startTour){s(a.startTour)}}).catch(e.default.exception)};a.resetTourState=y});
|
||||
//# sourceMappingURL=usertours.min.js.map
|
||||
|
||||
File diff suppressed because one or more lines are too long
136
admin/tool/usertours/amd/src/events.js
Normal file
136
admin/tool/usertours/amd/src/events.js
Normal file
@ -0,0 +1,136 @@
|
||||
// This file is part of Moodle - http://moodle.org/
|
||||
//
|
||||
// Moodle is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// Moodle is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU General Public License
|
||||
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
/**
|
||||
* Javascript events for the `tool_usertours` subsystem.
|
||||
*
|
||||
* @module tool_usertours/events
|
||||
* @copyright 2021 Andrew Lyons <andrew@nicols.co.uk>
|
||||
* @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
|
||||
*
|
||||
* @example <caption>Example of listening to a step rendering event and cancelling it.</caption>
|
||||
* import {eventTypes as userTourEvents} from 'tool_usertours/events';
|
||||
*
|
||||
* document.addEventListener(userTourEvents.stepRender, e => {
|
||||
* console.log(e.detail.tour); // The Tour instance
|
||||
* e.preventDefault();
|
||||
* });
|
||||
*/
|
||||
|
||||
/**
|
||||
* Events for the component.
|
||||
*
|
||||
* @constant
|
||||
* @property {String} eventTypes.stepRender See {@link event:tool_usertours/stepRender}
|
||||
* @property {String} eventTypes.stepRendered See {@link event:tool_usertours/stepRendered}
|
||||
* @property {String} eventTypes.tourStart See {@link event:tool_usertours/tourStart}
|
||||
* @property {String} eventTypes.tourStarted See {@link event:tool_usertours/tourStarted}
|
||||
* @property {String} eventTypes.tourEnd See {@link event:tool_usertours/tourEnd}
|
||||
* @property {String} eventTypes.tourEnded See {@link event:tool_usertours/tourEnded}
|
||||
* @property {String} eventTypes.stepHide See {@link event:tool_usertours/stepHide}
|
||||
* @property {String} eventTypes.stepHidden See {@link event:tool_usertours/stepHidden}
|
||||
*/
|
||||
export const eventTypes = {
|
||||
/**
|
||||
* An event triggered before a user tour step is rendered.
|
||||
*
|
||||
* This event is cancellable.
|
||||
*
|
||||
* @event tool_usertours/stepRender
|
||||
* @type {CustomEvent}
|
||||
* @property {object} detail
|
||||
* @property {tool_usertours/tour} detail.tour
|
||||
* @property {object} detail.stepConfig
|
||||
*/
|
||||
stepRender: 'tool_usertours/stepRender',
|
||||
|
||||
/**
|
||||
* An event triggered after a user tour step has been rendered.
|
||||
*
|
||||
* @event tool_usertours/stepRendered
|
||||
* @type {CustomEvent}
|
||||
* @property {object} detail
|
||||
* @property {tool_usertours/tour} detail.tour
|
||||
* @property {object} detail.stepConfig
|
||||
*/
|
||||
stepRendered: 'tool_usertours/stepRendered',
|
||||
|
||||
/**
|
||||
* An event triggered before a user tour starts.
|
||||
*
|
||||
* This event is cancellable.
|
||||
*
|
||||
* @event tool_usertours/tourStart
|
||||
* @type {CustomEvent}
|
||||
* @property {object} detail
|
||||
* @property {tool_usertours/tour} detail.tour
|
||||
* @property {Number} detail.startAt
|
||||
*/
|
||||
tourStart: 'tool_usertours/tourStart',
|
||||
|
||||
/**
|
||||
* An event triggered after a user tour has started.
|
||||
*
|
||||
* @event tool_usertours/tourStarted
|
||||
* @property {object} detail
|
||||
* @property {tool_usertours/tour} detail.tour
|
||||
* @type {CustomEvent}
|
||||
*/
|
||||
tourStarted: 'tool_usertours/tourStarted',
|
||||
|
||||
/**
|
||||
* An event triggered before a tour ends.
|
||||
*
|
||||
* This event is cancellable.
|
||||
*
|
||||
* @event tool_usertours/tourEnd
|
||||
* @property {object} detail
|
||||
* @property {tool_usertours/tour} detail.tour
|
||||
* @type {CustomEvent}
|
||||
*/
|
||||
tourEnd: 'tool_usertours/tourEnd',
|
||||
|
||||
/**
|
||||
* An event triggered after a tour has ended.
|
||||
*
|
||||
* @event tool_usertours/tourEnded
|
||||
* @property {object} detail
|
||||
* @property {tool_usertours/tour} detail.tour
|
||||
* @type {CustomEvent}
|
||||
*/
|
||||
tourEnded: 'tool_usertours/tourEnded',
|
||||
|
||||
/**
|
||||
* An event triggered before a step is hidden.
|
||||
*
|
||||
* This event is cancellable.
|
||||
*
|
||||
* @event tool_usertours/stepHide
|
||||
* @property {object} detail
|
||||
* @property {tool_usertours/tour} detail.tour
|
||||
* @type {CustomEvent}
|
||||
*/
|
||||
stepHide: 'tool_usertours/stepHide',
|
||||
|
||||
/**
|
||||
* An event triggered after a step has been hidden.
|
||||
*
|
||||
* @event tool_usertours/stepHidden
|
||||
* @property {object} detail
|
||||
* @property {tool_usertours/tour} detail.tour
|
||||
* @type {CustomEvent}
|
||||
*/
|
||||
stepHidden: 'tool_usertours/stepHidden',
|
||||
};
|
||||
@ -14,7 +14,7 @@
|
||||
// along with Moodle. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
/**
|
||||
* Manage user tours in Moodle.
|
||||
* A user tour.
|
||||
*
|
||||
* @module tool_usertours/tour
|
||||
* @copyright 2018 Andrew Nicols <andrew@nicols.co.uk>
|
||||
@ -24,13 +24,18 @@
|
||||
import $ from 'jquery';
|
||||
import * as Aria from 'core/aria';
|
||||
import Popper from 'core/popper';
|
||||
import {dispatchEvent} from 'core/event_dispatcher';
|
||||
import {eventTypes} from './events';
|
||||
|
||||
/**
|
||||
* A Tour.
|
||||
* A user tour.
|
||||
*
|
||||
* @class
|
||||
* @class tool_usertours/tour
|
||||
* @property {boolean} tourRunning Whether the tour is currently running.
|
||||
*/
|
||||
export default class Tour {
|
||||
const Tour = class {
|
||||
tourRunning = false;
|
||||
|
||||
/**
|
||||
* @param {object} config The configuration object.
|
||||
*/
|
||||
@ -215,7 +220,7 @@ export default class Tour {
|
||||
* Retrieve the current step number.
|
||||
*
|
||||
* @method getCurrentStepNumber
|
||||
* @return {Integer} The current step number
|
||||
* @return {Number} The current step number
|
||||
*/
|
||||
getCurrentStepNumber() {
|
||||
return parseInt(this.currentStepNumber, 10);
|
||||
@ -225,7 +230,7 @@ export default class Tour {
|
||||
* Store the current step number.
|
||||
*
|
||||
* @method setCurrentStepNumber
|
||||
* @param {Integer} stepNumber The current step number
|
||||
* @param {Number} stepNumber The current step number
|
||||
* @chainable
|
||||
*/
|
||||
setCurrentStepNumber(stepNumber) {
|
||||
@ -245,8 +250,8 @@ export default class Tour {
|
||||
* Get the next step number after the currently displayed step.
|
||||
*
|
||||
* @method getNextStepNumber
|
||||
* @param {Integer} stepNumber The current step number
|
||||
* @return {Integer} The next step number to display
|
||||
* @param {Number} stepNumber The current step number
|
||||
* @return {Number} The next step number to display
|
||||
*/
|
||||
getNextStepNumber(stepNumber) {
|
||||
if (typeof stepNumber === 'undefined') {
|
||||
@ -269,8 +274,8 @@ export default class Tour {
|
||||
* Get the previous step number before the currently displayed step.
|
||||
*
|
||||
* @method getPreviousStepNumber
|
||||
* @param {Integer} stepNumber The current step number
|
||||
* @return {Integer} The previous step number to display
|
||||
* @param {Number} stepNumber The current step number
|
||||
* @return {Number} The previous step number to display
|
||||
*/
|
||||
getPreviousStepNumber(stepNumber) {
|
||||
if (typeof stepNumber === 'undefined') {
|
||||
@ -293,7 +298,7 @@ export default class Tour {
|
||||
* Is the step the final step number?
|
||||
*
|
||||
* @method isLastStep
|
||||
* @param {Integer} stepNumber Step number to test
|
||||
* @param {Number} stepNumber Step number to test
|
||||
* @return {Boolean} Whether the step is the final step
|
||||
*/
|
||||
isLastStep(stepNumber) {
|
||||
@ -306,7 +311,7 @@ export default class Tour {
|
||||
* Is the step the first step number?
|
||||
*
|
||||
* @method isFirstStep
|
||||
* @param {Integer} stepNumber Step number to test
|
||||
* @param {Number} stepNumber Step number to test
|
||||
* @return {Boolean} Whether the step is the first step
|
||||
*/
|
||||
isFirstStep(stepNumber) {
|
||||
@ -395,10 +400,14 @@ export default class Tour {
|
||||
* Go to the specified step in the tour.
|
||||
*
|
||||
* @method gotoStep
|
||||
* @param {Integer} stepNumber The step number to display
|
||||
* @param {Integer} direction Next or previous step
|
||||
* @param {Number} stepNumber The step number to display
|
||||
* @param {Number} direction Next or previous step
|
||||
* @chainable
|
||||
* @return {Object} this.
|
||||
* @fires tool_usertours/stepRender
|
||||
* @fires tool_usertours/stepRendered
|
||||
* @fires tool_usertours/stepHide
|
||||
* @fires tool_usertours/stepHidden
|
||||
*/
|
||||
gotoStep(stepNumber, direction) {
|
||||
if (stepNumber < 0) {
|
||||
@ -430,9 +439,11 @@ export default class Tour {
|
||||
|
||||
this.hide();
|
||||
|
||||
this.fireEventHandlers('beforeRender', stepConfig);
|
||||
this.renderStep(stepConfig);
|
||||
this.fireEventHandlers('afterRender', stepConfig);
|
||||
const stepRenderEvent = this.dispatchEvent(eventTypes.stepRender, {stepConfig}, true);
|
||||
if (!stepRenderEvent.defaultPrevented) {
|
||||
this.renderStep(stepConfig);
|
||||
this.dispatchEvent(eventTypes.stepRendered, {stepConfig});
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
@ -441,7 +452,7 @@ export default class Tour {
|
||||
* Fetch the normalised step configuration for the specified step number.
|
||||
*
|
||||
* @method getStepConfig
|
||||
* @param {Integer} stepNumber The step number to fetch configuration for
|
||||
* @param {Number} stepNumber The step number to fetch configuration for
|
||||
* @return {Object} The step configuration
|
||||
*/
|
||||
getStepConfig(stepNumber) {
|
||||
@ -513,21 +524,23 @@ export default class Tour {
|
||||
/**
|
||||
* Fire any event handlers for the specified event.
|
||||
*
|
||||
* @param {String} eventName The name of the event to handle
|
||||
* @param {Object} data Any data to pass to the event
|
||||
* @chainable
|
||||
* @return {Object} this.
|
||||
* @param {String} eventName The name of the event
|
||||
* @param {Object} [detail={}] Any additional details to pass into the eveent
|
||||
* @param {Boolean} [cancelable=false] Whether preventDefault() can be called
|
||||
* @returns {CustomEvent}
|
||||
*/
|
||||
fireEventHandlers(eventName, data) {
|
||||
if (typeof this.eventHandlers[eventName] === 'undefined') {
|
||||
return this;
|
||||
}
|
||||
|
||||
this.eventHandlers[eventName].forEach(function(thisEvent) {
|
||||
thisEvent.call(this, data);
|
||||
}, this);
|
||||
|
||||
return this;
|
||||
dispatchEvent(
|
||||
eventName,
|
||||
detail = {},
|
||||
cancelable = false
|
||||
) {
|
||||
return dispatchEvent(eventName, {
|
||||
// Add the tour to the detail.
|
||||
tour: this,
|
||||
...detail,
|
||||
}, document, {
|
||||
cancelable,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -968,9 +981,11 @@ export default class Tour {
|
||||
* Start the current tour.
|
||||
*
|
||||
* @method startTour
|
||||
* @param {Integer} startAt Which step number to start at. If not specified, starts at the last point.
|
||||
* @param {Number} startAt Which step number to start at. If not specified, starts at the last point.
|
||||
* @chainable
|
||||
* @return {Object} this.
|
||||
* @fires tool_usertours/tourStart
|
||||
* @fires tool_usertours/tourStarted
|
||||
*/
|
||||
startTour(startAt) {
|
||||
if (this.storage && typeof startAt === 'undefined') {
|
||||
@ -987,9 +1002,12 @@ export default class Tour {
|
||||
startAt = this.getCurrentStepNumber();
|
||||
}
|
||||
|
||||
this.fireEventHandlers('beforeStart', startAt);
|
||||
this.gotoStep(startAt);
|
||||
this.fireEventHandlers('afterStart', startAt);
|
||||
const tourStartEvent = this.dispatchEvent(eventTypes.tourStart, {startAt}, true);
|
||||
if (!tourStartEvent.defaultPrevented) {
|
||||
this.gotoStep(startAt);
|
||||
this.tourRunning = true;
|
||||
this.dispatchEvent(eventTypes.tourStarted, {startAt});
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
@ -1011,9 +1029,14 @@ export default class Tour {
|
||||
* @method endTour
|
||||
* @chainable
|
||||
* @return {Object} this.
|
||||
* @fires tool_usertours/tourEnd
|
||||
* @fires tool_usertours/tourEnded
|
||||
*/
|
||||
endTour() {
|
||||
this.fireEventHandlers('beforeEnd');
|
||||
const tourEndEvent = this.dispatchEvent(eventTypes.tourEnd, {}, true);
|
||||
if (tourEndEvent.defaultPrevented) {
|
||||
return this;
|
||||
}
|
||||
|
||||
if (this.currentStepConfig) {
|
||||
let previousTarget = this.getStepTarget(this.currentStepConfig);
|
||||
@ -1027,7 +1050,8 @@ export default class Tour {
|
||||
|
||||
this.hide(true);
|
||||
|
||||
this.fireEventHandlers('afterEnd');
|
||||
this.tourRunning = false;
|
||||
this.dispatchEvent(eventTypes.tourEnded);
|
||||
|
||||
return this;
|
||||
}
|
||||
@ -1039,9 +1063,14 @@ export default class Tour {
|
||||
* @param {Bool} transition Animate the visibility change
|
||||
* @chainable
|
||||
* @return {Object} this.
|
||||
* @fires tool_usertours/stepHide
|
||||
* @fires tool_usertours/stepHidden
|
||||
*/
|
||||
hide(transition) {
|
||||
this.fireEventHandlers('beforeHide');
|
||||
const stepHideEvent = this.dispatchEvent(eventTypes.stepHide, {}, true);
|
||||
if (stepHideEvent.defaultPrevented) {
|
||||
return this;
|
||||
}
|
||||
|
||||
if (this.currentStepNode && this.currentStepNode.length) {
|
||||
this.currentStepNode.hide();
|
||||
@ -1098,7 +1127,7 @@ export default class Tour {
|
||||
|
||||
this.accessibilityHide();
|
||||
|
||||
this.fireEventHandlers('afterHide');
|
||||
this.dispatchEvent(eventTypes.stepHidden);
|
||||
|
||||
this.currentStepNode = null;
|
||||
this.currentStepPopper = null;
|
||||
@ -1533,4 +1562,6 @@ export default class Tour {
|
||||
showFunction($(node));
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default Tour;
|
||||
|
||||
@ -10,6 +10,7 @@ import log from 'core/log';
|
||||
import notification from 'core/notification';
|
||||
import * as tourRepository from './repository';
|
||||
import Pending from 'core/pending';
|
||||
import {eventTypes} from './events';
|
||||
|
||||
let currentTour = null;
|
||||
let tourId = null;
|
||||
@ -151,17 +152,14 @@ const addResetLink = () => {
|
||||
* @return {Object}
|
||||
*/
|
||||
const startBootstrapTour = (tourId, template, tourConfig) => {
|
||||
if (currentTour) {
|
||||
// End the current tour, but disable end tour handler.
|
||||
tourConfig.onEnd = null;
|
||||
if (currentTour && currentTour.tourRunning) {
|
||||
// End the current tour.
|
||||
currentTour.endTour();
|
||||
currentTour = null;
|
||||
}
|
||||
|
||||
tourConfig.eventHandlers = {
|
||||
afterEnd: [markTourComplete],
|
||||
afterRender: [markStepShown],
|
||||
};
|
||||
document.addEventListener(eventTypes.tourEnded, markTourComplete);
|
||||
document.addEventListener(eventTypes.stepRenderer, markStepShown);
|
||||
|
||||
// Sort out the tour name.
|
||||
tourConfig.tourName = tourConfig.name;
|
||||
@ -206,7 +204,7 @@ const markStepShown = e => {
|
||||
tourRepository.markStepShown(
|
||||
stepConfig.stepid,
|
||||
tourId,
|
||||
stepConfig.getCurrentStepNumber()
|
||||
tour.getCurrentStepNumber()
|
||||
).catch(log.error);
|
||||
};
|
||||
|
||||
@ -218,12 +216,15 @@ const markStepShown = e => {
|
||||
* @listens tool_usertours/stepRendered
|
||||
*/
|
||||
const markTourComplete = e => {
|
||||
document.removeEventListener(eventTypes.tourEnded, markTourComplete);
|
||||
document.removeEventListener(eventTypes.stepRenderer, markStepShown);
|
||||
|
||||
const tour = e.detail.tour;
|
||||
const stepConfig = tour.getStepConfig(tour.getCurrentStepNumber());
|
||||
tourRepository.markTourComplete(
|
||||
stepConfig.stepid,
|
||||
tourId,
|
||||
stepConfig.getCurrentStepNumber()
|
||||
tour.getCurrentStepNumber()
|
||||
).catch(log.error);
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user