-
-
Notifications
You must be signed in to change notification settings - Fork 645
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove object-assign-deep, refactor setting popper options (#516)
* remove object-assign-deep dependency * (fix) remove object-assign-deep dependency * (fix) lint * Tweak popperOptions setting
- Loading branch information
1 parent
5e6a98d
commit b28444c
Showing
8 changed files
with
172 additions
and
137 deletions.
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 | ||
| }; | ||
|
|
||
| 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'); | ||
| 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