Skip to content

Commit

Permalink
Merge pull request #106 from dmytro-krekota/master
Browse files Browse the repository at this point in the history 
105 Add the option popperPreventOverflowEnabled
  • Loading branch information
@MrFrankel
MrFrankel authored Jan 20, 2019
2 parents 7f9ec34 + dfcae45 commit 91fa7f8
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 29 deletions.
58 changes: 30 additions & 28 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |



Expand Down Expand Up @@ -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:

Expand Down
7 changes: 7 additions & 0 deletions src/popper-content.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
6 changes: 5 additions & 1 deletion src/popper-directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,9 @@ export class PopperController implements OnInit, OnDestroy, OnChanges {
@Input('popperAppendTo')
appendTo: string;

@Input('popperPreventOverflow')
preventOverflow: boolean;

@Output()
popperOnShown: EventEmitter<PopperController> = new EventEmitter<PopperController>();

Expand Down Expand Up @@ -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)));
Expand Down
1 change: 1 addition & 0 deletions src/popper-model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,4 +65,5 @@ export interface PopperContentOptions {
applyArrowClass?: string;
styles?: Object;
appendTo?: string;
preventOverflow?: boolean;
}

0 comments on commit 91fa7f8

Please sign in to comment.