From 70e0d02227b60032f34e7e839dc6aa70575a9b68 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Wed, 25 Jan 2023 14:41:53 +0200 Subject: [PATCH] Add a workaround for sticky update bug on sidebar toggle --- .../page-content/page-content.component.ts | 115 ++++++++++++------ .../sidebar/layout.service.ts | 6 +- .../sidebar/sidebar-content.component.ts | 2 +- 3 files changed, 85 insertions(+), 38 deletions(-) diff --git a/dashboard/sharedComponents/page-content/page-content.component.ts b/dashboard/sharedComponents/page-content/page-content.component.ts index 64ff4522..2642a1e4 100644 --- a/dashboard/sharedComponents/page-content/page-content.component.ts +++ b/dashboard/sharedComponents/page-content/page-content.component.ts @@ -2,14 +2,15 @@ import { AfterViewInit, ChangeDetectorRef, Component, - ElementRef, Inject, + ElementRef, + Inject, Input, OnDestroy, - OnInit, PLATFORM_ID, + OnInit, + PLATFORM_ID, ViewChild } from "@angular/core"; import {LayoutService} from "../sidebar/layout.service"; -import {Subscription} from "rxjs"; declare var UIkit; declare var ResizeObserver; @@ -18,8 +19,8 @@ declare var ResizeObserver; selector: '[page-content]', template: `
-
+
@@ -27,7 +28,6 @@ declare var ResizeObserver;
@@ -37,8 +37,7 @@ declare var ResizeObserver;
-
+
@@ -69,43 +68,49 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { public shouldSticky: boolean = true; @ViewChild('header') header: ElementRef; @ViewChild('actions') actions: ElementRef; - public footer_offset: number = 0; public footer_height: number = 0; - @ViewChild("sticky_footer") sticky_footer; + @ViewChild("sticky_footer") sticky_footer: ElementRef; + private sticky = { + header: null, + footer: null + } subscriptions = []; - + constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef, @Inject(PLATFORM_ID) private platformId) { } - + ngOnInit() { if (typeof document !== "undefined") { this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')); + this.stickyBugWorkaround(); } } - + get isBrowser() { return this.platformId === 'browser'; } - + get isStickyActive() { - if (this.header && this.actions && this.shouldSticky) { - let sticky = this.headerSticky ? this.header.nativeElement : this.actions.nativeElement; - return UIkit.sticky(sticky).isActive; - } else { - return false; - } + return this.sticky.header?.isActive; } - + ngAfterViewInit() { if (typeof document !== "undefined") { - // TODO make it smooth - // this.observeBottom(); - this.observeHeader(); this.observeStickyFooter(); + if (this.shouldSticky && typeof document !== 'undefined') { + this.sticky.header = UIkit.sticky((this.headerSticky ? this.header.nativeElement : this.actions.nativeElement), { + media: '@m', + offset: this.offset + }); + } + if (this.sticky_footer) { + let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement); + this.sticky.footer = UIkit.sticky(this.sticky_footer.nativeElement, {bottom: true, offset: footer_offset}); + } } } - + ngOnDestroy() { this.subscriptions.forEach(subscription => { if (subscription instanceof (ResizeObserver || IntersectionObserver)) { @@ -113,13 +118,48 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { } }); } - - ngAfterContentChecked() { - if (this.sticky_footer && typeof document !== 'undefined') { - this.footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement); - } + + + /** + * Workaround for sticky not update bug when sidebar is toggled. + * TODO when UIKit will be updated => remove + * + * */ + stickyBugWorkaround() { + let sidebarOffset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-width')) - + Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-mini-width')); + let transitionDelay = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-transition-delay')) * 1000; + this.subscriptions.push(this.layoutService.isOpen.subscribe(isOpen => { + if (this.sticky.header) { + if (isOpen) { + this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) - sidebarOffset + 'px'; + } else { + this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) + sidebarOffset + 'px'; + } + setTimeout(() => { + this.sticky.header.$emit(); + }, transitionDelay); + } + if (this.sticky.footer) { + if (isOpen) { + this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) - sidebarOffset + 'px'; + } else { + this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) + sidebarOffset + 'px'; + } + setTimeout(() => { + this.sticky.footer.$emit(); + }, transitionDelay); + } + this.cdr.detectChanges(); + })); } - + + /** + * @deprecated + * + * Should be smooth + * + * */ private observeBottom() { let bottom = document.getElementById('bottom'); if (bottom) { @@ -132,12 +172,15 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { bottomObs.observe(bottom); } } - + + /** + * @deprecated + * */ private observeHeader() { if (this.header) { let headerObs = new IntersectionObserver(entries => { entries.forEach(entry => { - if(entry.boundingClientRect.height > 0) { + if (entry.boundingClientRect.height > 0) { this.layoutService.setReplaceHeader(!entry.isIntersecting); } }) @@ -146,13 +189,13 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { headerObs.observe(this.header.nativeElement); } } - + private observeStickyFooter() { if (this.sticky_footer) { let resizeObs = new ResizeObserver(entries => { entries.forEach(entry => { setTimeout(() => { - this.footer_offset = this.calcStickyFooterOffset(entry.target); + this.sticky.footer.offset = this.calcStickyFooterOffset(entry.target); this.cdr.detectChanges(); }); }) @@ -161,7 +204,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { resizeObs.observe(this.sticky_footer.nativeElement); } } - + calcStickyFooterOffset(element) { this.footer_height = element.offsetHeight; return window.innerHeight - this.footer_height; diff --git a/dashboard/sharedComponents/sidebar/layout.service.ts b/dashboard/sharedComponents/sidebar/layout.service.ts index ed6e67fc..ca0e6d63 100644 --- a/dashboard/sharedComponents/sidebar/layout.service.ts +++ b/dashboard/sharedComponents/sidebar/layout.service.ts @@ -160,7 +160,11 @@ export class LayoutService { })); this.setObserver(); } - + + get isOpen(): Observable { + return this.openSubject.asObservable(); + } + get open(): boolean { return this.openSubject.getValue(); } diff --git a/dashboard/sharedComponents/sidebar/sidebar-content.component.ts b/dashboard/sharedComponents/sidebar/sidebar-content.component.ts index 130a0899..4b102e24 100644 --- a/dashboard/sharedComponents/sidebar/sidebar-content.component.ts +++ b/dashboard/sharedComponents/sidebar/sidebar-content.component.ts @@ -1,4 +1,4 @@ -import {Component, HostListener} from "@angular/core"; +import {Component} from "@angular/core"; import {LayoutService} from "./layout.service"; @Component({