purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2024-10-30 01:08:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

(FuseVerticalNavigation) Fixed: Firefox doesn't like having sticky positioned elements inside a fixed positioned parent. This fix implements a mutation observer for '.cdk-global-scrollblock'.

Browse Source
This commit is contained in:
Sercan Yemen 2022-09-06 11:49:05 +03:00
parent 404c4f5c07
commit 39ad558455
1 changed files with 35 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/@fuse/components/navigation/vertical/vertical.component.ts
View File

@ -1,5 +1,6 @@
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core'; import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations'; import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
import { DOCUMENT } from '@angular/common';
import { NavigationEnd, Router } from '@angular/router'; import { NavigationEnd, Router } from '@angular/router';
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay'; import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs'; import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
@ -51,6 +52,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
private readonly _handleAsideOverlayClick: any; private readonly _handleAsideOverlayClick: any;
private readonly _handleOverlayClick: any; private readonly _handleOverlayClick: any;
private _hovered: boolean = false; private _hovered: boolean = false;
private _mutationObserver: MutationObserver;
private _overlay: HTMLElement; private _overlay: HTMLElement;
private _player: AnimationPlayer; private _player: AnimationPlayer;
private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block(); private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
@ -64,6 +66,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
constructor( constructor(
private _animationBuilder: AnimationBuilder, private _animationBuilder: AnimationBuilder,
private _changeDetectorRef: ChangeDetectorRef, private _changeDetectorRef: ChangeDetectorRef,
@Inject(DOCUMENT) private _document: Document,
private _elementRef: ElementRef, private _elementRef: ElementRef,
private _renderer2: Renderer2, private _renderer2: Renderer2,
private _router: Router, private _router: Router,
@ -330,6 +333,34 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
*/ */
ngAfterViewInit(): void ngAfterViewInit(): void
{ {
// Fix for Firefox.
//
// Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent,
// adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
// This fixes the problem by reading the 'top' value from the html element and adding it as a
// 'marginTop' to the navigation itself.
this._mutationObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
const mutationTarget = mutation.target as HTMLElement;
if ( mutation.attributeName === 'class' )
{
if ( mutationTarget.classList.contains('cdk-global-scrollblock') )
{
const top = parseInt(mutationTarget.style.top, 10);
this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`);
}
else
{
this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null);
}
}
});
});
this._mutationObserver.observe(this._document.documentElement, {
attributes : true,
attributeFilter: ['class']
});
setTimeout(() => { setTimeout(() => {
// Return if 'navigation content' element does not exist // Return if 'navigation content' element does not exist
@ -375,6 +406,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
*/ */
ngOnDestroy(): void ngOnDestroy(): void
{ {
// Disconnect the mutation observer
this._mutationObserver.disconnect();
// Forcefully close the navigation and aside in case they are opened // Forcefully close the navigation and aside in case they are opened
this.close(); this.close();
this.closeAside(); this.closeAside();