search

themyth92 / ngx-lightbox

Lightbox2 use with angular >= 5
MIT License
115 stars 70 forks source link

Add possibility to define parent element for lightboxes #81

Closed Hobart2967 closed 3 years ago

Hobart2967 commented 3 years ago

Background information

We want to use ngx-lightbox in combination with web components. These web components are being hosted with isolated JS and CSS, meaning that the outside host does not know anything about the ngx-lightbox and it's styling/logic when rendering the custom HTML element.

This requires the need to define the shadow dom root element as parent element when hosting the lightbox element. Only then the web component can ensure that it also applies the lightbox styling, because it would otherwise need to apply the styles to the body element, which is against the isolated styles rule.

Pull request details

I hope I could explain this scenario well enough to make you understand the core changes:

  1. Changes in src/lightbox-config.service.ts
    • Added a new property containerElementResolver used by the LightBoxService to determine the parent element. Default is "document.body", as it was before, to not break projects relying on older releases.
  2. Changes in src/lightbox.service.ts
    • Changed window.document usage to @Inject(DOCUMENT) import in the constructor. This ensures your framework will work in @angular/universal and avoids global objects usage, which is a bad practice.
    • Change document.querySelector('body') to use the new property of the LightBoxConfigService.
  3. Other Changes:
    • Changed window.document usage everywhere to @Inject(DOCUMENT) import in the constructor. This ensures your framework will work in @angular/universal and avoids global objects usage, which is a bad practice.
    • All other changes are related to unit tests and linting, as they were broken in master and our internal policy requires them to work.

Timing

As this is required for a release of our products, we would love to see the merge as soon as possible <3.

themyth92 commented 3 years ago

Hey @Hobart2967 , thank you so much. My question is how to use this ? Is it an option from lightbox ? Could u help me to update README if possible. Tks :)

Hobart2967 commented 3 years ago

Hi @themyth92,

thank you for merging this, sure I will! I'll create a new PR for that then :)