Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 30 additions & 20 deletions src/js/tour.js
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,10 @@ export class Tour extends Evented {
}
}

isActive() {
return Shepherd.activeTour === this;
}

/**
* Go to the next step in the tour
* If we are at the end, call `complete`
Expand Down Expand Up @@ -218,30 +222,25 @@ export class Tour extends Evented {
* @param {Boolean} forward True if we are going forward, false if backward
*/
show(key = 0, forward = true) {
if (this.currentStep) {
this.currentStep.hide();
}

this._setupActiveTour();

const step = isString(key) ? this.getById(key) : this.steps[key];

if (!step) {
return;
}
if (step) {
this._updateStateBeforeShow();

const shouldSkipStep = isFunction(step.options.showOn) && !step.options.showOn();
// If `showOn` returns false, we want to skip the step, otherwise, show the step like normal
if (shouldSkipStep) {
this._skipStep(step, forward);
} else {
this.trigger('show', {
step,
previous: this.currentStep
});
const shouldSkipStep = isFunction(step.options.showOn) && !step.options.showOn();

this.currentStep = step;
step.show();
// If `showOn` returns false, we want to skip the step, otherwise, show the step like normal
if (shouldSkipStep) {
this._skipStep(step, forward);
} else {
this.trigger('show', {
step,
previous: this.currentStep
});

this.currentStep = step;
step.show();
}
}
}

Expand All @@ -252,6 +251,7 @@ export class Tour extends Evented {
this.trigger('start');

this.currentStep = null;
this._setupActiveTour();
this.next();
}

Expand Down Expand Up @@ -281,6 +281,16 @@ export class Tour extends Evented {
_setTooltipDefaults() {
tippy.setDefaults(tooltipDefaults);
}

_updateStateBeforeShow() {
if (this.currentStep) {
this.currentStep.hide();
}

if (!this.isActive) {
this._setupActiveTour();
}
}
}

export { Shepherd };
53 changes: 27 additions & 26 deletions src/js/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,26 @@ import { isString, isObjectLike, isUndefined, zipObject } from 'lodash';
import tippy from 'tippy.js';
import { missingTippy } from './utils/error-messages';

const centeredStylePopperModifier = {
computeStyle: {
enabled: true,
fn(data) {
data.styles = Object.assign({}, data.styles, {
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
});

return data;
}
}
};

// Used to compose settings for tippyOptions.popperOptions (https://atomiks.github.io/tippyjs/#popper-options-option)
const defaultPopperOptions = {
positionFixed: true
};

/**
* TODO rewrite the way items are being added to use more performant documentFragment code
* @param html
Expand Down Expand Up @@ -135,16 +155,11 @@ function _makeAttachedTippyOptions(attachToOptions) {
...this.options.tippyOptions
};

// Build the proper settings for tippyOptions.popperOptions (https://atomiks.github.io/tippyjs/#popper-options-option)
const popperOptsToMerge = {
positionFixed: true
};

if (this.options.tippyOptions && this.options.tippyOptions.popperOptions) {
Object.assign(popperOptsToMerge, this.options.tippyOptions.popperOptions);
Object.assign(defaultPopperOptions, this.options.tippyOptions.popperOptions);
}

resultingTippyOptions.popperOptions = popperOptsToMerge;
resultingTippyOptions.popperOptions = defaultPopperOptions;

return resultingTippyOptions;
}
Expand All @@ -164,32 +179,18 @@ function _makeCenteredTippy() {
...this.options.tippyOptions
};

const popperOptsToMerge = {
positionFixed: true
};

tippyOptions.arrow = false;
tippyOptions.popperOptions = tippyOptions.popperOptions || {};

const finalPopperOptions = Object.assign(
{},
popperOptsToMerge,
defaultPopperOptions,
tippyOptions.popperOptions,
{
modifiers: Object.assign({
computeStyle: {
enabled: true,
fn(data) {
data.styles = Object.assign({}, data.styles, {
left: '50%',
top: '50%',
transform: 'translate(-50%, -50%)'
});

return data;
}
}
}, tippyOptions.popperOptions.modifiers)
modifiers: Object.assign(
{ centeredStylePopperModifier },
tippyOptions.popperOptions.modifiers
)
}
);

Expand Down
12 changes: 11 additions & 1 deletion test/unit/test.step.js
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ describe('Tour | Step', () => {
});

describe('setupElements()', () => {
it('calls destroy if element is already set', () => {
it('calls destroy on the step if the content element is already set', () => {
const step = new Step();
let destroyCalled = false;
step.el = document.createElement('a');
Expand All @@ -365,6 +365,16 @@ describe('Tour | Step', () => {
assert.isOk(destroyCalled, 'setupElements method called destroy with element set');
});

it('calls destroy on the tooltip if it already exists', () => {
const step = new Step();
let destroyCalled = false;
step.tooltip = {
destroy() { destroyCalled = true; }
};
step.setupElements();
assert.equal(destroyCalled, true, 'setupElements method called destroy on the existing tooltip');
});

it('calls bindAdvance() if advanceOn passed', () => {
const step = new Step({
next: () => true
Expand Down