Skip to content

Commit

Permalink
DEVS
Browse files Browse the repository at this point in the history 
* Add flip attribute for best continuity
* Update readme
* Prepare changelog
  • Loading branch information
@tonysamperi
tonysamperi committed Nov 5, 2023
1 parent 409ef38 commit 86fa67f
Show file tree
Hide file tree
Showing 7 changed files with 459 additions and 207 deletions.
78 changes: 37 additions & 41 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
ngx-popperjs is an angular wrapper for the [FloatingUI](https://floating-ui.com/) library (v ^1.5.3).

## VERY IMPORTANT READ THIS
I'm moving this to the top because it appears that people don't get to reading it in the **contribute** section.
FOR THIS LIBRARY **PLEASE USE ISSUES ONLY FOR BUG REPORTING**. DON'T OPEN ISSUES SUCH AS "I need upgrade for Angular 1745646456" especially if Angular 1745646456 was released a few days ago.
I **guarantee** that I manage the updates **AS SOON AS POSSIBLE**. But as you understand this is not a paying job, so you can't get Angular 1745646456 the day it gets released.
**ISSUES NOT RESPECTING THIS WILL BE DELETED IMMEDIATELY WITHOUT ANY RESPONSE**.
Thank you.
With v17 ngx-popperjs **won't get any updates**. That's because from v17 it's not actually using popper.js anymore.

I developed ngx-float-ui and released v17 at the same time of this.
My suggestion is to migrate to that one. In 6 months from the release, this version will be marked as **deprecated**.
Since the new library isn't affected by the "Chrome 110 bug" I would suggest to migrate earlier versions as well.
If you open an issue on ngx-float-ui asking for a certain version (or search for an open issue for that version and leave a thumb), I will publish earlier versions as well.

## NOW USING FLOATING UI - UPGRADING TO V17
## NOW USING FLOATING UI - UPGRADING TO v17
If you used previous versions of ngx-popperjs, you'll now that it wrapped popper.js initially.
Since Floating UI is the future version of Popper.js and since latest happenings with recent Chrome updates breaking ngx-popperjs, I decided to move to the newer technology.

Expand All @@ -23,16 +23,11 @@ Well on a graphic perspective, none. You will be able to use the v17 without cha
The only deprecation is in the `NgxPopperjsOptions` which now doesn't provide the **modifiers**.
The reason is that **you can't now pass modifiers** like you did in Popper.js.
It didn't seem like a huge change, since in this library modifiers should be mostly (but let me know with an issue) for preventing the popper flipping.
Maybe if we see that it can be useful we can pass an override for the `middleware`.

Now by default, **popovers won't flip**. You will have to pass `popperPreventOverflow` as attribute (coerced so the empty attribute will suffice) to make the popovers flip.
I simply added a new attribute, `popperFlip`, that you can set to false, in order to prevent the flipping (default `true`).

I will be publishing the new ngx-floating-ui (still contending for the name on npm) along this one.
The goal is gradually moving everybody to ngx-floating-ui. So I will probably publish both for this and the next major (18), then deprecate this package in favor of the new one.

Clearly switching to the new package will require some work, cause I can't have a library called "ngx-floating-ui" and then modules called "NgxPopperjs".
It will be worth it though cause there's much more potential in Floating UI, and we will be able to include new features, such as combobox or dialog as shown on their website.

Check NgxPopperjs official [page](https://tonysamperi.github.io/ngx-popperjs) to be updated!
Check NgxPopperjs official [page](https://tonysamperi.github.io/ngx-popperjs) to stay up to date!

### Premise

Expand Down Expand Up @@ -180,33 +175,34 @@ body {

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) | click | 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 |
| 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) | click | 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 |
| 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 |
| popperFlip | boolean | true | Enable or disable the flipping |


9. Override defaults:
Expand Down
3 changes: 3 additions & 0 deletions changelog.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
#17.0.0
* Update for Angular 17! 🎉

#16.0.6
* The final fix of the "Chrome 115.0.5790.102 bug" reverting the original behaviour
* Refine tests
Expand Down
22 changes: 11 additions & 11 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-popperjs-repo",
"version": "17.0.0-rc.2",
"version": "17.0.0-rc.3",
"build": 0,
"license": "MIT",
"description": "ngx-popperjs is an Angular wrapper for @popperjs",
Expand Down Expand Up @@ -46,13 +46,13 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^17.0.0-next.8",
"@angular/common": "^17.0.0-next.8",
"@angular/compiler": "^17.0.0-next.8",
"@angular/core": "^17.0.0-next.8",
"@angular/forms": "^17.0.0-next.8",
"@angular/platform-browser": "^17.0.0-next.8",
"@angular/platform-browser-dynamic": "^17.0.0-next.8",
"@angular/animations": "^17.0.0-rc.2",
"@angular/common": "^17.0.0-rc.2",
"@angular/compiler": "^17.0.0-rc.2",
"@angular/core": "^17.0.0-rc.2",
"@angular/forms": "^17.0.0-rc.2",
"@angular/platform-browser": "^17.0.0-rc.2",
"@angular/platform-browser-dynamic": "^17.0.0-rc.2",
"@angular/ssr": "^17.0.0-next.0",
"@floating-ui/dom": "^1.5.3",
"rxjs": "^7.4.0",
Expand All @@ -61,11 +61,11 @@
"zone.js": "^0.14.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.0.0-next.9",
"@angular-devkit/build-angular": "^17.0.0-rc.3",
"@angular-devkit/build-ng-packagr": "^0.1002.0",
"@angular/cli": "^17.0.0-next.9",
"@angular/compiler-cli": "^17.0.0-next.8",
"@angular/language-service": "^17.0.0-next.8",
"@angular/compiler-cli": "^17.0.0-rc.2",
"@angular/language-service": "^17.0.0-rc.2",
"@types/jasmine": "^3.3.8",
"@types/jasminewd2": "^2.0.3",
"@types/node": "^18.13.0",
Expand Down
9 changes: 8 additions & 1 deletion ...ts/ngx-popperjs/src/lib/components/ngx-popperjs-content/ngx-popperjs-content.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,12 +176,19 @@ export class NgxPopperjsContentComponent implements OnDestroy {
const arrowLen = arrowElement.offsetWidth;
// Get half the arrow box's hypotenuse length
const floatingOffset = Math.sqrt(2 * arrowLen ** 2) / 2;
const boundaryMiddleware = [];
if (this.popperOptions.flip) {
boundaryMiddleware.push(flip());
}
if (this.popperOptions.preventOverflow) {
boundaryMiddleware.push(shift({limiter: limitShift()}));
}
const popperOptions: Partial<ComputePositionConfig> = {
placement: this.popperOptions.placement,
strategy: this.popperOptions.positionFixed ? "fixed" : "absolute",
middleware: [
offset(floatingOffset),
...(this.popperOptions.preventOverflow ? [flip(), shift({limiter: limitShift()})] : [shift({limiter: limitShift()})]),
...boundaryMiddleware,
arrow({
element: arrowElement,
padding: 4
Expand Down
33 changes: 22 additions & 11 deletions projects/ngx-popperjs/src/lib/directives/ngx-popperjs/ngx-popperjs.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,35 +84,45 @@ export class NgxPopperjsDirective implements OnInit, OnDestroy {
return this._content;
}

@Input("popperFlip")
set flip(newValue: boolean) {
this._flip = NgxPopperjsUtils.coerceBooleanProperty(newValue);
this._checkExisting("preventOverflow", this._preventOverflow);
}

get flip(): boolean {
return this._flip;
}


@Input("popperPlacement")
set placement(newValue: NgxPopperjsPlacements) {
this._popperPlacement = newValue;
this._placement = newValue;
this._checkExisting("placement", newValue);
}

get placement(): NgxPopperjsPlacements {

return this._popperPlacement;
return this._placement;
}


@Input("popperPreventOverflow")
set preventOverflow(newValue: boolean) {
this._popperPreventOverflow = NgxPopperjsUtils.coerceBooleanProperty(newValue);
this._checkExisting("preventOverflow", this._popperPreventOverflow);
this._preventOverflow = NgxPopperjsUtils.coerceBooleanProperty(newValue);
this._checkExisting("preventOverflow", this._preventOverflow);
}

get preventOverflow(): boolean {
return this._popperPreventOverflow;
return this._preventOverflow;
}

@Input()
set popperApplyArrowClass(newValue: string) {
if (newValue === this._popperApplyArrowClass) {
if (newValue === this._applyArrowClass) {
return;
}
this._popperApplyArrowClass = newValue;
this._applyArrowClass = newValue;
if (this._popperContent) {
this._popperContent.popperOptions.applyArrowClass = newValue;
if (!this._shown) {
Expand All @@ -123,7 +133,7 @@ export class NgxPopperjsDirective implements OnInit, OnDestroy {
}

get popperApplyArrowClass(): string {
return this._popperApplyArrowClass;
return this._applyArrowClass;
}

@Input("popperDisabled")
Expand Down Expand Up @@ -198,18 +208,19 @@ export class NgxPopperjsDirective implements OnInit, OnDestroy {
@Input("popperTimeoutAfterShow")
timeoutAfterShow: number = 0;

protected _applyArrowClass: string;
protected _applyClass: string;
protected _content: string | NgxPopperjsContentComponent;
protected _destroy$: Subject<void> = new Subject<void>();
protected _disabled: boolean;
protected _flip: boolean = !0;
protected _globalEventListenersCtrl$: Subject<void> = new Subject<void>();
protected _hideOnClickOutside: boolean = true;
protected _popperApplyArrowClass: string;
protected _placement: NgxPopperjsPlacements;
protected _popperContent: NgxPopperjsContentComponent;
protected _popperContentClass = NgxPopperjsContentComponent;
protected _popperContentRef: ComponentRef<NgxPopperjsContentComponent>;
protected _popperPlacement: NgxPopperjsPlacements;
protected _popperPreventOverflow: boolean;
protected _preventOverflow: boolean = !0;
protected _scheduledHideTimeoutCtrl$: Subject<void> = new Subject<void>();
protected _scheduledShowTimeoutCtrl$: Subject<void> = new Subject<void>();
protected _shown: boolean = false;
Expand Down
1 change: 1 addition & 0 deletions projects/ngx-popperjs/src/lib/models/ngx-popperjs-options.model.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export interface NgxPopperjsOptions {
boundariesElement?: string;
disableAnimation?: boolean;
disableDefaultStyling?: boolean;
flip?: boolean;
hideOnClickOutside?: boolean;
hideOnMouseLeave?: boolean;
hideOnScroll?: boolean;
Expand Down
Loading

0 comments on commit 86fa67f

Please sign in to comment.