Remove object-assign-deep, refactor setting popper options #516
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| const addHasTitleClass = (step) => { | ||
| return { addHasTitleClass: _createClassModifier(`${step.classPrefix}shepherd-has-title`) }; | ||
| }; | ||
|
|
||
| /** | ||
| * Create a popper modifier for adding the passed className to the popper | ||
| * @param {string} className The class to add to the popper | ||
| * @return {{fn(*): *, enabled: boolean}|*} | ||
| * @private | ||
| */ | ||
| function _createClassModifier(className) { | ||
| return { | ||
| enabled: true, | ||
| fn(data) { | ||
| data.instance.popper.classList.add(className); | ||
| return data; | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| function _getCenteredStylePopperModifier(styles) { | ||
| return { | ||
| computeStyle: { | ||
| enabled: true, | ||
| fn(data) { | ||
| data.styles = Object.assign({}, data.styles, { | ||
| left: '50%', | ||
| top: '50%', | ||
| transform: 'translate(-50%, -50%)' | ||
| }); | ||
|
|
||
| return data; | ||
| } | ||
| }, | ||
| addShepherdClass: _createClassModifier(styles.shepherd.trim()) | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * Used to compose settings for tippyOptions.popperOptions (https://atomiks.github.io/tippyjs/#popper-options-option) | ||
| * @private | ||
| */ | ||
| function _getDefaultPopperOptions(styles) { | ||
| return { | ||
| positionFixed: true, | ||
| modifiers: { | ||
| addShepherdClass: _createClassModifier(styles.shepherd.trim()) | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| /** | ||
| * Generates the hash of options that will be passed to `Tippy` instances | ||
| * target an element in the DOM. | ||
| * | ||
| * @param {Object} attachToOptions The local `attachTo` options | ||
| * @param {Step} step The step instance | ||
| * @return {Object} The final tippy options object | ||
| */ | ||
| export function makeAttachedTippyOptions(attachToOptions, step) { | ||
| let { popperOptions, tippyOptions } = _makeCommonTippyOptions(step); | ||
|
|
||
| tippyOptions.flipOnUpdate = true; | ||
| tippyOptions.placement = attachToOptions.on || 'right'; | ||
|
|
||
| if (step.options.tippyOptions && step.options.tippyOptions.popperOptions) { | ||
| popperOptions = { | ||
| ...popperOptions, | ||
| ...step.options.tippyOptions.popperOptions | ||
| }; | ||
| } | ||
|
|
||
| tippyOptions.popperOptions = popperOptions; | ||
|
|
||
| return tippyOptions; | ||
| } | ||
|
|
||
| /** | ||
| * Generates the hash of options for a tooltip that doesn't have a | ||
| * target element in the DOM -- and thus is positioned in the center | ||
| * of the view | ||
| * | ||
| * @param {Step} step The step instance | ||
| * @return {Object} The final tippy options object | ||
| */ | ||
| export function makeCenteredTippy(step) { | ||
| const centeredStylePopperModifier = _getCenteredStylePopperModifier(step.styles); | ||
| let { popperOptions, tippyOptions } = _makeCommonTippyOptions(step); | ||
|
|
||
| tippyOptions.placement = 'top'; | ||
| tippyOptions.arrow = false; | ||
| tippyOptions.popperOptions = tippyOptions.popperOptions || {}; | ||
|
|
||
| popperOptions.modifiers = { | ||
| ...popperOptions.modifiers, | ||
| ...centeredStylePopperModifier, | ||
| ...tippyOptions.popperOptions.modifiers | ||
| }; | ||
|
|
||
| popperOptions = { | ||
| ...popperOptions, | ||
| ...tippyOptions.popperOptions | ||
|
There was a problem hiding this comment. if tippyOptions.popperOptions has modifiers they will override the tippy modifiers, which was the issue in the first place. |
||
| }; | ||
|
|
||
| tippyOptions.popperOptions = popperOptions; | ||
|
|
||
| return tippyOptions; | ||
| } | ||
|
|
||
| function _makeCommonTippyOptions(step) { | ||
| const popperOptions = _getDefaultPopperOptions(step.styles); | ||
|
|
||
| const tippyOptions = { | ||
| content: step.el, | ||
| ...step.options.tippyOptions | ||
| }; | ||
|
|
||
| if (step.options.title) { | ||
| popperOptions.modifiers = { | ||
| ...popperOptions.modifiers, | ||
| ...addHasTitleClass(step) | ||
| }; | ||
| } | ||
|
|
||
| return { popperOptions, tippyOptions }; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { makeAttachedTippyOptions } from '../../../src/js/utils/tippy-popper-options'; | ||
|
|
||
| describe('Tippy/Popper Options Utils', function() { | ||
| describe('makeAttachedTippyOptions()', function() { | ||
| it('passing tippyOptions.popperOptions sets nested values', function() { | ||
| const stepOptions = | ||
| { | ||
| options: { | ||
| tippyOptions: { | ||
| popperOptions: { | ||
| modifiers: { | ||
| foo: 'bar', | ||
| preventOverflow: { | ||
| escapeWithReference: true | ||
| } | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| styles: { | ||
| shepherd: ' shepherd' | ||
| } | ||
| }; | ||
|
|
||
| const attachToOpts = { | ||
| on: 'top' | ||
| }; | ||
|
|
||
| const tippyOptions = makeAttachedTippyOptions(attachToOpts, stepOptions); | ||
| expect(tippyOptions.popperOptions.modifiers.foo).toBe('bar'); | ||
|
There was a problem hiding this comment. The issue was that if you have custom modifiers, shepherd poper modifiers get removed. |
||
| expect(tippyOptions.popperOptions.modifiers.preventOverflow.escapeWithReference).toBe(true); | ||
| }); | ||
| }); | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
if step.options.tippyOptions.popperOptions has modifiers they will override the tippy modifiers, which was the issue in the first place.
please look at my original Pull request that solves the issue.