shemesh / angular-popout-window Goto Github PK

Describe the bug

FontFaceSet's that come from an @font-face rule cant be added to the Popout Windows FontFaceSet thus leaving the page blank and bailing out of the execution process (? unconfirmed)

To Reproduce

Open the Demo with Firefox 112.0 and try to pop-out the window, it stays blank and doesnt show anything. The bug described above is observed in the same frame where the main Application resides when the popout-window has opened.

Expected behavior

It should show the component that is inside the popout-window tag.

Priority

This Problem only is observed on Firefox and should be resolved as fast as possible imho.

Screenshots/Video

Lines that cause this error:
https://github.com/Shemesh/angular-popout-window/blob/master/projects/popout-window/src/lib/popout-window.component.ts#L102-L104

Possible fix:

One way would be to create an opt-out on copying fonts from the main document to the popout document.
This could be done through creating a .forRoot(...) function with the said opt-out in the module, or to check if the currently iterated Font Face is a @font-face rule. The latter i already checked and i havent found any properties which could provide this information to check against. So we would be stuck with the first Option to create an opt-out.
I think wrapping the lines mentioned above in a try/catch block (and showing a warning on failure) would be enough to fix this current behaviour.

Desktop

• OS: Windows 11
• Browser: Firefox 112.0 (64 Bit)
• Version: 4.0.0

Do you want to create a PR for this?

Yes

Additional context

This happens only on Firefox, Chrome seems to have no problem with that behaviour whatsoever.

I also found the exact problem for this on w3c issues page: w3c/csswg-drafts#5707

After migrating to the version 2.0.0, the popout window displays no content.
The browsers tested are:

1. Version 87.0.4280.88 (Official Build) (x86_64) on macOS 11.0.1
2. Version 14.0.1 (16610.2.11.51.8) on macOS 11.0.1
3. Version 87.0.4280.88 (Official Build) (64 bit) on Windows 10

Version 1.3.0 was working fine with same set ups.

Not only on my app that this behavior is present, but also the online demo is showing the same behavior as well.

Hello,

I have followed a dozen different guides on how to use Angular Portals to take information from my main page and display it in a pop up tab or new window. There have been different ways of accomplishing this with CDK portals taking html and pushing it to new tab, or creating the component dynamically and displaying it on a new tab. While many of the solutions push dynamic data to a new tab or window successfully, they all suffered from the same issue displaying anything with dynamic bindings, such as a menu, where the drop down will appear on the main/parent window, and not on the pop up.

I've altered a simple example below showing how a mat-menu's on click event will trigger the display on the parent/host tab. This same issue affects the angular-popout-window module. Please see this issue below:

https://stackblitz.com/edit/angular-portal-issue-parent-receiving-events

As to my use case and why I need this:

My project requirement dictates a user will select from a list of items in the main page, and upon clicking, a new tab/page opens that allows them to alter and edit the object in a complex component. Without closing the new tab, the user should be able to return to the main app's window and select more items from the list and have multiple tabs/webpages open so they can edit many of these items at once. Data changes will flow back to the parent page and may update the other open tabs.

I have already created this complex component and it works if I re-bootstrap the app in the new tab every time, then url route to the component, and display the component natively without portals. The issue, however, is it causes a long delay on the bootstrap process and re-logging in the user (which takes about ~5-10 seconds), and causes issues with web sessions on our server. I want to avoid all those issues using portals or dynamically pushing the component with this angular-popout-window module. I believe if I can receive help with the simple issue displayed here, the same fix might solve all my other binding issues in our complex component.

Thank you.

Hi,
I want to catch close event when pressing X icon on pop-out window, is it possible?

When I try to install on angular 14.2.12 project --force is required.

npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/core
npm ERR! @angular/core@"14.2.12" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"^10.0.0" from [email protected]
npm ERR! node_modules/angular-popout-window
npm ERR! angular-popout-window@"^4.0.0" from the root project

Is there any way with which we can load JS files to the child window just like CSS?

Hi,

dock and undock works fine for me, It is unable to load my assets/images in child window.

In the child window the styles related tailwindcss are not loading in iMac Safari

Doing the line:
import { PopoutWindowModule } from 'angular-popout-window';

kicks an error saying popout-window.component.ts:28:18 - error Generic type 'Component Declaration' requires 7 type argument(s).

I'm following along with your usage here: https://www.npmjs.com/package/angular-popout-window?activeTab=readme
And I don't see this declaration being talked about here. Just says import and add to the to the @NgModule. Is there something that I am doing wrong here, or is there an issue with the package?

Any help would be greatly appreciated. Thanks

Getting above error in Angular 13.