From dfcae45096371dfe3b12b0f6a4b62570d19bfc35 Mon Sep 17 00:00:00 2001 From: Dmytro Krekota Date: Sat, 19 Jan 2019 18:33:02 +0200 Subject: [PATCH] 105 Add the option popperPreventOverflowEnabled --- README.md | 58 +++++++++++++++++++++-------------------- src/popper-content.ts | 7 +++++ src/popper-directive.ts | 6 ++++- src/popper-model.ts | 1 + 4 files changed, 43 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 1e37948..19529fd 100644 --- a/README.md +++ b/README.md @@ -169,33 +169,34 @@ SystemJS 8. Attributes map: - | Option | Type | Default | Description | - |:------------------- |:---------------- |:--------- | :------------------------------------------------------------------------------------------------------ | - | popperDisableAnimation | boolean | false | Disable the default animation on show/hide | - | popperDisableStyle | boolean | false | Disable the default styling | - | popperDisabled | boolean | false | Disable the popper, ignore all events | - | popperDelay | number | 0 | Delay time until popper it shown | - | popperTimeout | number | 0 | Set delay before the popper is hidden | - | popperTimeoutAfterShow | number | 0 | Set a time on which the popper will be hidden after it is shown | - | popperPlacement | Placement(string) | auto | The placement to show the popper relative to the reference element | - | popperTarget | HtmlElement | auto | Specify a different reference element other the the one hosting the directive | - | popperBoundaries | string(selector) | undefined | Specify a selector to serve as the boundaries of the element | - | popperShowOnStart | boolean | false | Popper default to show | - | popperTrigger | Trigger(string) | hover | Trigger/Event on which to show/hide the popper | - | popperPositionFixed | boolean | false | Set the popper element to use position: fixed | - | popperAppendTo | string | undefined | append The popper-content element to a given selector, if multiple will apply to first | - | popperHideOnClickOutside | boolean | true | Popper will hide on a click outside | - | popperHideOnScroll | boolean | false | Popper will hide on scroll | - | popperHideOnMouseLeave | boolean | false | Popper will hide on mouse leave | - | popperModifiers | popperModifier | undefined | popper.js custom modifiers hock | - | popperApplyClass | string | undefined | list of comma separated class to apply on ngpx__container | - | popperStyles | Object | undefined | Apply the styles object, aligned with ngStyles | - | popperApplyArrowClass | string | undefined | list of comma separated class to apply on ngpx__arrow | - | popperOnShown | EventEmitter<> | $event | Event handler when popper is shown | - | popperOnHidden | EventEmitter<> | $event | Event handler when popper is hidden | - | popperOnUpdate | EventEmitter<> | $event | Event handler when popper is updated | - | popperAriaDescribeBy | string | undefined | Define value for aria-describeby attribute | - | popperAriaRole | string | popper | Define value for aria-role attribute | + | Option | Type | Default | Description | + |:----------------------- |:---------------- |:--------- | :------------------------------------------------------------------------------------------------------ | + | popperDisableAnimation | boolean | false | Disable the default animation on show/hide | + | popperDisableStyle | boolean | false | Disable the default styling | + | popperDisabled | boolean | false | Disable the popper, ignore all events | + | popperDelay | number | 0 | Delay time until popper it shown | + | popperTimeout | number | 0 | Set delay before the popper is hidden | + | popperTimeoutAfterShow | number | 0 | Set a time on which the popper will be hidden after it is shown | + | popperPlacement | Placement(string) | auto | The placement to show the popper relative to the reference element | + | popperTarget | HtmlElement | auto | Specify a different reference element other the the one hosting the directive | + | popperBoundaries | string(selector) | undefined | Specify a selector to serve as the boundaries of the element | + | popperShowOnStart | boolean | false | Popper default to show | + | popperTrigger | Trigger(string) | hover | Trigger/Event on which to show/hide the popper | + | popperPositionFixed | boolean | false | Set the popper element to use position: fixed | + | popperAppendTo | string | undefined | append The popper-content element to a given selector, if multiple will apply to first | + | popperPreventOverflow | boolean | undefined | Prevent the popper from being positioned outside the boundary | + | popperHideOnClickOutside | boolean | true | Popper will hide on a click outside | + | popperHideOnScroll | boolean | false | Popper will hide on scroll | + | popperHideOnMouseLeave | boolean | false | Popper will hide on mouse leave | + | popperModifiers | popperModifier | undefined | popper.js custom modifiers hock | + | popperApplyClass | string | undefined | list of comma separated class to apply on ngpx__container | + | popperStyles | Object | undefined | Apply the styles object, aligned with ngStyles | + | popperApplyArrowClass | string | undefined | list of comma separated class to apply on ngpx__arrow | + | popperOnShown | EventEmitter<> | $event | Event handler when popper is shown | + | popperOnHidden | EventEmitter<> | $event | Event handler when popper is hidden | + | popperOnUpdate | EventEmitter<> | $event | Event handler when popper is updated | + | popperAriaDescribeBy | string | undefined | Define value for aria-describeby attribute | + | popperAriaRole | string | popper | Define value for aria-role attribute | @@ -234,7 +235,8 @@ NgModule({ | applyArrowClass | string | undefined | | ariaDescribeBy | string | undefined | | ariaRole | string | undefined | - | appendTo | string | undefined | + | appendTo | string | undefined | + | preventOverflow | boolean | undefined | 10. popperPlacement: diff --git a/src/popper-content.ts b/src/popper-content.ts index ec0646c..07d1e9a 100644 --- a/src/popper-content.ts +++ b/src/popper-content.ts @@ -304,6 +304,13 @@ export class PopperContent implements OnDestroy { if (popperOptions.modifiers && boundariesElement) { popperOptions.modifiers.preventOverflow = {boundariesElement}; } + if (popperOptions.modifiers && this.popperOptions.preventOverflow !== undefined) { + popperOptions.modifiers.preventOverflow = popperOptions.modifiers.preventOverflow || {}; + popperOptions.modifiers.preventOverflow.enabled = this.popperOptions.preventOverflow; + if (!popperOptions.modifiers.preventOverflow.enabled) { + popperOptions.modifiers.hide = {enabled: false}; + } + } this.determineArrowColor(); popperOptions.modifiers = Object.assign(popperOptions.modifiers, this.popperOptions.popperModifiers); diff --git a/src/popper-directive.ts b/src/popper-directive.ts index 9531a6c..bf4c70e 100644 --- a/src/popper-directive.ts +++ b/src/popper-directive.ts @@ -122,6 +122,9 @@ export class PopperController implements OnInit, OnDestroy, OnChanges { @Input('popperAppendTo') appendTo: string; + @Input('popperPreventOverflow') + preventOverflow: boolean; + @Output() popperOnShown: EventEmitter = new EventEmitter(); @@ -384,7 +387,8 @@ export class PopperController implements OnInit, OnDestroy, OnChanges { applyArrowClass: this.applyArrowClass, hideOnMouseLeave: this.hideOnMouseLeave, styles: this.styles, - appendTo: this.appendTo + appendTo: this.appendTo, + preventOverflow: this.preventOverflow, }); popperRef.onUpdate = this.onPopperUpdate.bind(this); this.subscriptions.push(popperRef.onHidden.subscribe(this.hide.bind(this))); diff --git a/src/popper-model.ts b/src/popper-model.ts index dd4b843..fad7a9e 100644 --- a/src/popper-model.ts +++ b/src/popper-model.ts @@ -65,4 +65,5 @@ export interface PopperContentOptions { applyArrowClass?: string; styles?: Object; appendTo?: string; + preventOverflow?: boolean; } \ No newline at end of file