diff options
author | Johann-S <johann.servoire@gmail.com> | 2019-08-18 22:15:21 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-08-27 16:32:25 +0300 |
commit | 7652d326e42b471bd3c934debfaf956fa4c67465 (patch) | |
tree | 3d1d841179739e3035afcafaee1f63112d6b798c | |
parent | 6381c63fb1c81d87b38327a56c0d471d20cbd1aa (diff) |
Backport #29251
allow to pass popper.js configuration for tooltip/popover and dropdown
-rw-r--r-- | bundlesize.config.json | 2 | ||||
-rw-r--r-- | js/src/dropdown.js | 27 | ||||
-rw-r--r-- | js/src/tooltip.js | 63 | ||||
-rw-r--r-- | js/tests/unit/dropdown.js | 26 | ||||
-rw-r--r-- | js/tests/unit/tooltip.js | 17 | ||||
-rw-r--r-- | site/docs/4.3/components/dropdowns.md | 6 | ||||
-rw-r--r-- | site/docs/4.3/components/popovers.md | 6 | ||||
-rw-r--r-- | site/docs/4.3/components/tooltips.md | 6 |
8 files changed, 113 insertions, 40 deletions
diff --git a/bundlesize.config.json b/bundlesize.config.json index b923dfb12e..8c33e3abb7 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -30,7 +30,7 @@ }, { "path": "./dist/js/bootstrap.bundle.min.js", - "maxSize": "22 kB" + "maxSize": "22.25 kB" }, { "path": "./dist/js/bootstrap.js", diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 1121a9819e..c064c3461a 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -71,19 +71,21 @@ const AttachmentMap = { } const Default = { - offset : 0, - flip : true, - boundary : 'scrollParent', - reference : 'toggle', - display : 'dynamic' + offset : 0, + flip : true, + boundary : 'scrollParent', + reference : 'toggle', + display : 'dynamic', + popperConfig : null } const DefaultType = { - offset : '(number|string|function)', - flip : 'boolean', - boundary : '(string|element)', - reference : '(string|element)', - display : 'string' + offset : '(number|string|function)', + flip : 'boolean', + boundary : '(string|element)', + reference : '(string|element)', + display : 'string', + popperConfig : '(null|object)' } /** @@ -359,7 +361,10 @@ class Dropdown { } } - return popperConfig + return { + ...popperConfig, + ...this._config.popperConfig + } } // Static diff --git a/js/src/tooltip.js b/js/src/tooltip.js index b200656658..3bd495033e 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -43,7 +43,8 @@ const DefaultType = { boundary : '(string|element)', sanitize : 'boolean', sanitizeFn : '(null|function)', - whiteList : 'object' + whiteList : 'object', + popperConfig : '(null|object)' } const AttachmentMap = { @@ -71,7 +72,8 @@ const Default = { boundary : 'scrollParent', sanitize : true, sanitizeFn : null, - whiteList : DefaultWhitelist + whiteList : DefaultWhitelist, + popperConfig : null } const HoverState = { @@ -119,10 +121,6 @@ const Trigger = { class Tooltip { constructor(element, config) { - /** - * Check for Popper dependency - * Popper - https://popper.js.org - */ if (typeof Popper === 'undefined') { throw new TypeError('Bootstrap\'s tooltips require Popper.js (https://popper.js.org/)') } @@ -236,7 +234,7 @@ class Tooltip { this._timeout = null this._hoverState = null this._activeTrigger = null - if (this._popper !== null) { + if (this._popper) { this._popper.destroy() } @@ -293,27 +291,7 @@ class Tooltip { $(this.element).trigger(this.constructor.Event.INSERTED) - this._popper = new Popper(this.element, tip, { - placement: attachment, - modifiers: { - offset: this._getOffset(), - flip: { - behavior: this.config.fallbackPlacement - }, - arrow: { - element: Selector.ARROW - }, - preventOverflow: { - boundariesElement: this.config.boundary - } - }, - onCreate: (data) => { - if (data.originalPlacement !== data.placement) { - this._handlePopperPlacementChange(data) - } - }, - onUpdate: (data) => this._handlePopperPlacementChange(data) - }) + this._popper = new Popper(this.element, tip, this._getPopperConfig(attachment)) $(tip).addClass(ClassName.SHOW) @@ -468,6 +446,35 @@ class Tooltip { // Private + _getPopperConfig(attachment) { + const defaultBsConfig = { + placement: attachment, + modifiers: { + offset: this._getOffset(), + flip: { + behavior: this.config.fallbackPlacement + }, + arrow: { + element: Selector.ARROW + }, + preventOverflow: { + boundariesElement: this.config.boundary + } + }, + onCreate: (data) => { + if (data.originalPlacement !== data.placement) { + this._handlePopperPlacementChange(data) + } + }, + onUpdate: (data) => this._handlePopperPlacementChange(data) + } + + return { + ...defaultBsConfig, + ...this.config.popperConfig + } + } + _getOffset() { const offset = {} diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index 346b1a2e5a..85ebc0ed25 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -1480,4 +1480,30 @@ $(function () { assert.strictEqual(offset.offset, myOffset) assert.ok(typeof offset.fn === 'undefined') }) + + QUnit.test('should allow to pass config to popper.js with `popperConfig`', function (assert) { + assert.expect(1) + + var dropdownHTML = + '<div class="dropdown">' + + ' <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + ' <div class="dropdown-menu">' + + ' <a class="dropdown-item" href="#">Another link</a>' + + ' </div>' + + '</div>' + + var $dropdown = $(dropdownHTML) + .appendTo('#qunit-fixture') + .find('[data-toggle="dropdown"]') + .bootstrapDropdown({ + popperConfig: { + placement: 'left' + } + }) + + var dropdown = $dropdown.data('bs.dropdown') + var popperConfig = dropdown._getPopperConfig() + + assert.strictEqual(popperConfig.placement, 'left') + }) }) diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index e66450fb85..2149a68916 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -1266,4 +1266,21 @@ $(function () { assert.strictEqual(tooltip.config.sanitize, true) }) + + QUnit.test('should allow to pass config to popper.js with `popperConfig`', function (assert) { + assert.expect(1) + + var $trigger = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>') + .appendTo('#qunit-fixture') + .bootstrapTooltip({ + popperConfig: { + placement: 'left' + } + }) + + var tooltip = $trigger.data('bs.tooltip') + var popperConfig = tooltip._getPopperConfig('top') + + assert.strictEqual(popperConfig.placement, 'left') + }) }) diff --git a/site/docs/4.3/components/dropdowns.md b/site/docs/4.3/components/dropdowns.md index 417d9f5eab..736e581650 100644 --- a/site/docs/4.3/components/dropdowns.md +++ b/site/docs/4.3/components/dropdowns.md @@ -875,6 +875,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap <td>'dynamic'</td> <td>By default, we use Popper.js for dynamic positioning. Disable this with <code>static</code>.</td> </tr> + <tr> + <td>popperConfig</td> + <td>null | object</td> + <td>null</td> + <td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/popper-documentation.html#Popper.Defaults">Popper.js's configuration</a></td> + </tr> </tbody> </table> diff --git a/site/docs/4.3/components/popovers.md b/site/docs/4.3/components/popovers.md index e48768c8c0..44d2a321bc 100644 --- a/site/docs/4.3/components/popovers.md +++ b/site/docs/4.3/components/popovers.md @@ -284,6 +284,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti <td>null</td> <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td> </tr> + <tr> + <td>popperConfig</td> + <td>null | object</td> + <td>null</td> + <td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/popper-documentation.html#Popper.Defaults">Popper.js's configuration</a></td> + </tr> </tbody> </table> diff --git a/site/docs/4.3/components/tooltips.md b/site/docs/4.3/components/tooltips.md index c58a7c00cf..692819fa38 100644 --- a/site/docs/4.3/components/tooltips.md +++ b/site/docs/4.3/components/tooltips.md @@ -276,6 +276,12 @@ Note that for security reasons the `sanitize`, `sanitizeFn` and `whiteList` opti <td>null</td> <td>Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.</td> </tr> + <tr> + <td>popperConfig</td> + <td>null | object</td> + <td>null</td> + <td>To change Bootstrap's default Popper.js config, see <a href="https://popper.js.org/popper-documentation.html#Popper.Defaults">Popper.js's configuration</a></td> + </tr> </tbody> </table> |