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

(layout/common/quick-chat) 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:16 +03:00
parent 39ad558455
commit 4a5f641c1c
1 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/app/layout/common/quick-chat/quick-chat.component.ts
View File

@ -1,4 +1,5 @@
import { Component, ElementRef, HostBinding, HostListener, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
import { AfterViewInit, Component, ElementRef, HostBinding, HostListener, Inject, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
import { Subject, takeUntil } from 'rxjs';
import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
@ -11,13 +12,14 @@ import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
encapsulation: ViewEncapsulation.None,
exportAs : 'quickChat'
})
export class QuickChatComponent implements OnInit, OnDestroy
export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
{
@ViewChild('messageInput') messageInput: ElementRef;
chat: Chat;
chats: Chat[];
opened: boolean = false;
selectedChat: Chat;
private _mutationObserver: MutationObserver;
private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
private _overlay: HTMLElement;
private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -26,6 +28,7 @@ export class QuickChatComponent implements OnInit, OnDestroy
* Constructor
*/
constructor(
@Inject(DOCUMENT) private _document: Document,
private _elementRef: ElementRef,
private _renderer2: Renderer2,
private _ngZone: NgZone,
@ -103,11 +106,48 @@ export class QuickChatComponent implements OnInit, OnDestroy
});
}
/**
* After view init
*/
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']
});
}
/**
* On destroy
*/
ngOnDestroy(): void
{
// Disconnect the mutation observer
this._mutationObserver.disconnect();
// Unsubscribe from all subscriptions
this._unsubscribeAll.next(null);
this._unsubscribeAll.complete();