MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add a workaround for sticky update bug on sidebar toggle

This commit is contained in:
Konstantinos Triantafyllou 2023-01-25 14:41:53 +02:00
parent 9f4be4b29b
commit 70e0d02227
3 changed files with 85 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -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: `
<div id="page_content">
<div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer class="uk-tile-default uk-blur-background"
[attr.uk-sticky]="'bottom: true'" [attr.offset]="footer_offset">
<div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer
class="uk-tile-default uk-blur-background">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical">
<ng-content select="[sticky_footer]"></ng-content>
@ -27,7 +28,6 @@ declare var ResizeObserver;
</div>
</div>
<div id="page_content_header" #header class="uk-blur-background"
[attr.uk-sticky]="(headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset"
[attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
@ -37,8 +37,7 @@ declare var ResizeObserver;
</div>
</div>
</div>
<div id="page_content_actions" #actions class="uk-blur-background"
[attr.uk-sticky]="(!headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset">
<div id="page_content_actions" #actions class="uk-blur-background">
<div class="uk-container uk-container-large">
<div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
<div class="actions">
@ -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;

6
dashboard/sharedComponents/sidebar/layout.service.ts
View File

@ -160,7 +160,11 @@ export class LayoutService {
}));
this.setObserver();
}
get isOpen(): Observable<boolean> {
return this.openSubject.asObservable();
}
get open(): boolean {
return this.openSubject.getValue();
}

2
dashboard/sharedComponents/sidebar/sidebar-content.component.ts
View File

@ -1,4 +1,4 @@
import {Component, HostListener} from "@angular/core";
import {Component} from "@angular/core";
import {LayoutService} from "./layout.service";
@Component({