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

Add sidebar mobile toggle. Add activeSidebarItem in layout service and handle it in sidebar. Add isActive in menuItem. Make some improvents in slider-tabs

This commit is contained in:
Konstantinos Triantafyllou 2023-02-15 11:53:25 +02:00
parent ee71b895bf
commit f53370213a
9 changed files with 322 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ import {
PLATFORM_ID, PLATFORM_ID,
ViewChild ViewChild
} from "@angular/core"; } from "@angular/core";
import {LayoutService} from "../sidebar/layout.service"; import {LayoutService, SidebarItem} from "../sidebar/layout.service";
declare var UIkit; declare var UIkit;
declare var ResizeObserver; declare var ResizeObserver;
@ -31,18 +31,14 @@ declare var ResizeObserver;
[attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')"> [attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''"> <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''">
<div class="header"> <ng-content select="[header]"></ng-content>
<ng-content select="[header]"></ng-content>
</div>
</div> </div>
</div> </div>
</div> </div>
<div id="page_content_actions" #actions class="uk-blur-background" [class.uk-border-bottom]="border && isStickyActive"> <div id="page_content_actions" #actions class="uk-blur-background" [class.uk-border-bottom]="border && isStickyActive">
<div class="uk-container uk-container-large"> <div class="uk-container uk-container-large">
<div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''"> <div [ngClass]="!isMobile?'uk-padding-small uk-padding-remove-vertical uk-padding-remove-right':''">
<div class="actions"> <ng-content select="[actions]"></ng-content>
<ng-content select="[actions]"></ng-content>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -69,15 +65,15 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
public offset: number; public offset: number;
public shouldSticky: boolean = true; public shouldSticky: boolean = true;
public isMobile: boolean = false; public isMobile: boolean = false;
public isStickyActive: boolean = false;
public footer_height: number = 0;
@ViewChild('header') header: ElementRef; @ViewChild('header') header: ElementRef;
@ViewChild('actions') actions: ElementRef; @ViewChild('actions') actions: ElementRef;
public footer_height: number = 0;
@ViewChild("sticky_footer") sticky_footer: ElementRef; @ViewChild("sticky_footer") sticky_footer: ElementRef;
private sticky = { private sticky = {
header: null, header: null,
footer: null footer: null
} }
public isStickyActive: boolean = false;
subscriptions = []; subscriptions = [];
constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef, constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef,
@ -85,12 +81,12 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
} }
ngOnInit() { ngOnInit() {
if (typeof document !== "undefined") {
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
this.stickyBugWorkaround();
}
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => { this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
this.isMobile = isMobile; this.isMobile = isMobile;
if (typeof document !== "undefined") {
this.offset = this.isMobile?0:Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
this.stickyBugWorkaround();
}
this.cdr.detectChanges(); this.cdr.detectChanges();
})); }));
} }
@ -104,7 +100,6 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
this.observeStickyFooter(); this.observeStickyFooter();
if (this.shouldSticky && typeof document !== 'undefined') { if (this.shouldSticky && typeof document !== 'undefined') {
this.sticky.header = UIkit.sticky((this.headerSticky ? this.header.nativeElement : this.actions.nativeElement), { this.sticky.header = UIkit.sticky((this.headerSticky ? this.header.nativeElement : this.actions.nativeElement), {
media: '@m',
offset: this.offset offset: this.offset
}); });
this.subscriptions.push(UIkit.util.on(document, 'active', '#' + this.sticky.header.$el.id, () => { this.subscriptions.push(UIkit.util.on(document, 'active', '#' + this.sticky.header.$el.id, () => {

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

@ -1,37 +1,44 @@
import {Injectable} from "@angular/core"; import {Injectable} from "@angular/core";
import {BehaviorSubject, Observable, Subscriber} from "rxjs"; import {BehaviorSubject, Observable, Subscriber} from "rxjs";
import {ActivationStart, Router} from "@angular/router"; import {ActivationStart, Router} from "@angular/router";
import {Icon} from "../../../sharedComponents/menu";
declare var ResizeObserver; declare var ResizeObserver;
export interface SidebarItem {
icon?: Icon,
name: string,
subItem?: SidebarItem
}
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class LayoutService { export class LayoutService {
public static HEADER_HEIGHT = '65px'; public static HEADER_HEIGHT = '65px';
private deviceBreakpoint: number; private deviceBreakpoint: number;
/** /**
* Set this to true when sidebar items are ready. * Set this to true when sidebar items are ready.
*/ */
private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); private openSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/** /**
* Set this to true when sidebar is hovered, otherwise false. * Set this to true when sidebar is hovered, otherwise false.
*/ */
private hoverSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); private hoverSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/** /**
* Add hasSidebar: false on data of route config, if sidebar is not needed. * Add hasSidebar: false on data of route config, if sidebar is not needed.
*/ */
private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); private hasSidebarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/** /**
* Add hasHeader: false on data of route config, if header is not needed. * Add hasHeader: false on data of route config, if header is not needed.
*/ */
private hasHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); private hasHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/** /**
* Add hasAdminMenu: true on data of route config, if global sidebar should be used. * Add hasAdminMenu: true on data of route config, if global sidebar should be used.
*/ */
@ -52,13 +59,13 @@ export class LayoutService {
/** /**
* Add hasQuickContact: false on data of route config, if the quick-contact fixed button is not needed. * Add hasQuickContact: false on data of route config, if the quick-contact fixed button is not needed.
*/ */
private hasQuickContactSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true); private hasQuickContactSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
/** /**
* Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match. * Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match.
*/ */
private activeMenuItemSubject: BehaviorSubject<string> = new BehaviorSubject<string>(""); private activeMenuItemSubject: BehaviorSubject<string> = new BehaviorSubject<string>("");
/** /**
* Change to true will replace your Nav Header with the replaceHeader of your object. * Change to true will replace your Nav Header with the replaceHeader of your object.
* Be sure that replaceHeader exists. * Be sure that replaceHeader exists.
@ -66,37 +73,39 @@ export class LayoutService {
private replaceHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); private replaceHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/** Check if the current device is mobile or tablet */ /** Check if the current device is mobile or tablet */
private isMobileSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false); private isMobileSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
/** Active sidebar Item*/
private activeSidebarItemSubject: BehaviorSubject<SidebarItem> = new BehaviorSubject<SidebarItem>(null);
private subscriptions: any[] = []; private subscriptions: any[] = [];
ngOnDestroy() { ngOnDestroy() {
this.clearSubscriptions(); this.clearSubscriptions();
} }
clearSubscriptions() { clearSubscriptions() {
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) { if (subscription instanceof Subscriber) {
subscription.unsubscribe(); subscription.unsubscribe();
} else if(subscription instanceof ResizeObserver) { } else if (subscription instanceof ResizeObserver) {
subscription.disconnect(); subscription.disconnect();
} }
}) })
} }
setObserver() { setObserver() {
if(typeof ResizeObserver !== "undefined" && typeof document !== "undefined") { if (typeof ResizeObserver !== "undefined" && typeof document !== "undefined") {
this.deviceBreakpoint = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--uk-breakpoint-m').replace('px', '')) + 1; this.deviceBreakpoint = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--uk-breakpoint-m').replace('px', '')) + 1;
let resizeObs = new ResizeObserver(entries => { let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
this.isMobileSubject.next(entry.target.clientWidth < this.deviceBreakpoint); this.isMobileSubject.next(entry.target.clientWidth < this.deviceBreakpoint);
}) });
}); });
this.subscriptions.push(resizeObs); this.subscriptions.push(resizeObs);
resizeObs.observe(document.documentElement); resizeObs.observe(document.documentElement);
} }
} }
constructor(private router: Router) { constructor(private router: Router) {
if(typeof window !== 'undefined') { if (typeof window !== 'undefined') {
this.isMobileSubject.next(window.innerWidth < this.deviceBreakpoint); this.isMobileSubject.next(window.innerWidth < this.deviceBreakpoint);
} }
this.subscriptions.push(this.router.events.subscribe(event => { this.subscriptions.push(this.router.events.subscribe(event => {
@ -112,12 +121,12 @@ export class LayoutService {
if (data['hasHeader'] !== undefined && if (data['hasHeader'] !== undefined &&
data['hasHeader'] === false) { data['hasHeader'] === false) {
this.setHasHeader(false); this.setHasHeader(false);
if(typeof document !== "undefined") { if (typeof document !== "undefined") {
document.documentElement.style.setProperty('--header-height', '0'); document.documentElement.style.setProperty('--header-height', '0');
} }
} else { } else {
this.setHasHeader(true); this.setHasHeader(true);
if(typeof document !== "undefined") { if (typeof document !== "undefined") {
document.documentElement.style.setProperty('--header-height', LayoutService.HEADER_HEIGHT); document.documentElement.style.setProperty('--header-height', LayoutService.HEADER_HEIGHT);
} }
} }
@ -145,7 +154,7 @@ export class LayoutService {
} else { } else {
this.setSmallScreen(false); this.setSmallScreen(false);
} }
if (data['hasQuickContact'] !== undefined && if (data['hasQuickContact'] !== undefined &&
data['hasQuickContact'] === false) { data['hasQuickContact'] === false) {
this.setHasQuickContact(false); this.setHasQuickContact(false);
} else { } else {
@ -169,78 +178,82 @@ export class LayoutService {
get open(): boolean { get open(): boolean {
return this.openSubject.getValue(); return this.openSubject.getValue();
} }
setOpen(value: boolean) { setOpen(value: boolean) {
this.openSubject.next(value); this.openSubject.next(value);
} }
get hover(): boolean { get hover(): boolean {
return this.hoverSubject.getValue(); return this.hoverSubject.getValue();
} }
setHover(value: boolean) { setHover(value: boolean) {
this.hoverSubject.next(value); this.hoverSubject.next(value);
} }
get hasAnySidebar(): boolean {
return this.hasSidebarSubject.getValue() || this.hasInternalSidebarSubject.getValue() || this.hasAdminMenuSubject.getValue();
}
get hasSidebar(): Observable<boolean> { get hasSidebar(): Observable<boolean> {
return this.hasSidebarSubject.asObservable(); return this.hasSidebarSubject.asObservable();
} }
setHasSidebar(value: boolean) { setHasSidebar(value: boolean) {
this.hasSidebarSubject.next(value); this.hasSidebarSubject.next(value);
} }
get hasHeader(): Observable<boolean> { get hasHeader(): Observable<boolean> {
return this.hasHeaderSubject.asObservable(); return this.hasHeaderSubject.asObservable();
} }
setHasHeader(value: boolean) { setHasHeader(value: boolean) {
this.hasHeaderSubject.next(value); this.hasHeaderSubject.next(value);
} }
get hasAdminMenu(): Observable<boolean> { get hasAdminMenu(): Observable<boolean> {
return this.hasAdminMenuSubject.asObservable(); return this.hasAdminMenuSubject.asObservable();
} }
setHasAdminMenu(value: boolean) { setHasAdminMenu(value: boolean) {
this.hasAdminMenuSubject.next(value); this.hasAdminMenuSubject.next(value);
} }
get hasInternalSidebar(): Observable<boolean> { get hasInternalSidebar(): Observable<boolean> {
return this.hasInternalSidebarSubject.asObservable(); return this.hasInternalSidebarSubject.asObservable();
} }
setHasInternalSidebar(value: boolean) { setHasInternalSidebar(value: boolean) {
this.hasInternalSidebarSubject.next(value); this.hasInternalSidebarSubject.next(value);
} }
get isFrontPage(): Observable<boolean> { get isFrontPage(): Observable<boolean> {
return this.isFrontPageSubject.asObservable(); return this.isFrontPageSubject.asObservable();
} }
setFrontPage(value: boolean) { setFrontPage(value: boolean) {
this.isFrontPageSubject.next(value); this.isFrontPageSubject.next(value);
} }
get replaceHeader(): Observable<boolean> { get replaceHeader(): Observable<boolean> {
return this.replaceHeaderSubject.asObservable(); return this.replaceHeaderSubject.asObservable();
} }
get replaceHeaderValue(): boolean { get replaceHeaderValue(): boolean {
return this.replaceHeaderSubject.getValue(); return this.replaceHeaderSubject.getValue();
} }
setReplaceHeader(value: boolean) { setReplaceHeader(value: boolean) {
this.replaceHeaderSubject.next(value); this.replaceHeaderSubject.next(value);
} }
/** /**
* @deprecated * @deprecated
* */ * */
get isSmallScreen(): boolean { get isSmallScreen(): boolean {
return this.isSmallScreenSubject.getValue(); return this.isSmallScreenSubject.getValue();
} }
/** /**
* @deprecated * @deprecated
* */ * */
@ -248,13 +261,13 @@ export class LayoutService {
this.isSmallScreenSubject.next(value); this.isSmallScreenSubject.next(value);
} }
get hasQuickContact(): Observable<boolean> { get hasQuickContact(): Observable<boolean> {
return this.hasQuickContactSubject.asObservable(); return this.hasQuickContactSubject.asObservable();
} }
setHasQuickContact(value: boolean) { setHasQuickContact(value: boolean) {
this.hasQuickContactSubject.next(value); this.hasQuickContactSubject.next(value);
} }
get activeMenuItem(): string { get activeMenuItem(): string {
return this.activeMenuItemSubject.getValue(); return this.activeMenuItemSubject.getValue();
@ -263,12 +276,20 @@ export class LayoutService {
setActiveMenuItem(value: string) { setActiveMenuItem(value: string) {
this.activeMenuItemSubject.next(value); this.activeMenuItemSubject.next(value);
} }
get isMobile(): Observable<boolean> { get isMobile(): Observable<boolean> {
return this.isMobileSubject.asObservable(); return this.isMobileSubject.asObservable();
} }
get isMobileValue(): boolean { get isMobileValue(): boolean {
return this.isMobileSubject.getValue(); return this.isMobileSubject.getValue();
} }
get activeSidebarItem(): Observable<SidebarItem> {
return this.activeSidebarItemSubject.asObservable();
}
setActiveSidebarItem(value: SidebarItem) {
this.activeSidebarItemSubject.next(value);
}
} }

99
dashboard/sharedComponents/sidebar/sideBar.component.html
View File

@ -1,46 +1,59 @@
<aside id="sidebar_main"> <aside id="sidebar_main" class="uk-visible@m">
<div sidebar-content> <div sidebar-content>
<div *ngIf="items.length > 0" class="menu_section mobile uk-margin-large-top" style="min-height: 30vh"> <ng-container *ngTemplateOutlet="menu; context: {mobile: false}"></ng-container>
<ul #nav class="uk-list uk-nav uk-nav-default uk-nav-parent-icon" uk-nav="duration: 400">
<ng-template ngFor [ngForOf]="items" let-item>
<li [class.uk-active]="isTheActiveMenuItem(item)"
[class.uk-parent]="item.items.length > 0">
<a [routerLink]="getItemRoute(item)" [title]="item.title"
[queryParams]="item.route?item.params:null" [queryParamsHandling]="item.route?queryParamsHandling:null" class="uk-flex uk-flex-middle">
<div *ngIf="item.icon && (item.icon.svg || item.icon.name)" class="uk-width-auto">
<icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" ratio="0.9" [svg]="item.icon.svg" [flex]="true"></icon>
</div>
<span [class.hide-on-close]="item.icon" class="uk-width-expand@l uk-text-truncate uk-margin-small-left">{{item.title}}</span>
</a>
<ul *ngIf="item.items?.length > 0 && (isBrowser || isTheActiveMenuItem(item))" class="uk-nav-sub">
<li *ngFor="let subItem of item.items"
[class.uk-active]="isTheActiveMenuItem(item, subItem)">
<a [routerLink]="subItem.route?subItem.route:null" [queryParams]="subItem.route?subItem.params:null"
[queryParamsHandling]="subItem.route?queryParamsHandling:null" [title]="subItem.title">
<span class="uk-text-truncate">{{subItem.title}}</span></a>
</li>
</ul>
</li>
</ng-template>
</ul>
</div>
<ng-template [ngIf]="specialMenuItem">
<div class="menu_section uk-margin-xlarge-top">
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
[queryParamsHandling]="queryParamsHandling">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="specialMenuItem.icon" class="uk-width-auto">
<icon class="menu-icon" [customClass]="specialMenuItem.icon.class" [name]="specialMenuItem.icon.name" ratio="1.2" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
</div>
<span class="uk-width-expand uk-text-truncate uk-margin-small-left"
[class.hide-on-close]="specialMenuItem.icon">{{specialMenuItem.title}}</span>
</div>
</a>
</li>
</ul>
</div>
</ng-template>
</div> </div>
</aside> </aside>
<div class="uk-hidden@m">
<div id="sidebar_offcanvas" #sidebar_offcanvas [attr.uk-offcanvas]="'overlay: true'">
<div class="uk-offcanvas-bar uk-padding-remove-horizontal">
<button class="uk-offcanvas-close uk-icon uk-close">
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
</button>
<ng-container *ngTemplateOutlet="menu; context: {mobile: true}"></ng-container>
</div>
</div>
</div>
<ng-template #menu let-mobile=mobile>
<div *ngIf="items.length > 0" class="menu_section uk-margin-large-top" [class.mobile]="mobile" style="min-height: 30vh">
<ul #nav class="uk-list uk-nav uk-nav-parent-icon"
[class.uk-nav-default]="!mobile" [class.uk-nav-primary]="mobile" uk-nav="duration: 400">
<ng-template ngFor [ngForOf]="items" let-item>
<li [class.uk-active]="item.isActive"
[class.uk-parent]="item.items.length > 0">
<a [routerLink]="getItemRoute(item)" [title]="item.title" (click)="item.items.length === 0?closeOffcanvas():null"
[queryParams]="item.route?item.params:null" [queryParamsHandling]="item.route?queryParamsHandling:null" class="uk-flex uk-flex-middle">
<div *ngIf="item.icon && (item.icon.svg || item.icon.name)" class="uk-width-auto">
<icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" ratio="0.9" [svg]="item.icon.svg" [flex]="true"></icon>
</div>
<span [class.hide-on-close]="item.icon" class="uk-width-expand@l uk-text-truncate uk-margin-small-left">{{item.title}}</span>
</a>
<ul *ngIf="item.items?.length > 0 && (isBrowser || item.isActive)" class="uk-nav-sub">
<li *ngFor="let subItem of item.items"
[class.uk-active]="subItem.isActive">
<a [routerLink]="subItem.route?subItem.route:null" [title]="subItem.title" (click)="closeOffcanvas()"
[queryParams]="subItem.route?subItem.params:null" [queryParamsHandling]="subItem.route?queryParamsHandling:null">
<span class="uk-text-truncate">{{subItem.title}}</span></a>
</li>
</ul>
</li>
</ng-template>
</ul>
</div>
<div *ngIf="specialMenuItem" class="menu_section uk-margin-xlarge-top" [class.mobile]="mobile" >
<ul class="uk-list uk-nav uk-nav-default" uk-nav>
<li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
<a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
(click)="closeOffcanvas()"
[queryParamsHandling]="queryParamsHandling">
<div class="uk-flex uk-flex-middle uk-flex-center">
<div *ngIf="specialMenuItem.icon" class="uk-width-auto">
<icon class="menu-icon" [customClass]="specialMenuItem.icon.class" [name]="specialMenuItem.icon.name" ratio="1.2" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
</div>
<span class="uk-width-expand uk-text-truncate uk-margin-small-left"
[class.hide-on-close]="specialMenuItem.icon">{{specialMenuItem.title}}</span>
</div>
</a>
</li>
</ul>
</div>
</ng-template>

103
dashboard/sharedComponents/sidebar/sideBar.component.ts
View File

@ -1,9 +1,20 @@
import {AfterViewInit, Component, ElementRef, Inject, Input, PLATFORM_ID, ViewChild} from '@angular/core'; import {
AfterViewInit, ChangeDetectorRef,
Component,
ElementRef,
Inject,
Input, OnChanges,
OnDestroy,
OnInit,
PLATFORM_ID, SimpleChanges,
ViewChild
} from '@angular/core';
import {MenuItem} from "../../../sharedComponents/menu"; import {MenuItem} from "../../../sharedComponents/menu";
import {ActivatedRoute, Router} from "@angular/router"; import {ActivatedRoute, NavigationEnd, Router} from "@angular/router";
import {DomSanitizer} from "@angular/platform-browser"; import {DomSanitizer} from "@angular/platform-browser";
import {properties} from "../../../../../environments/environment"; import {properties} from "../../../../../environments/environment";
import {LayoutService} from "./layout.service"; import {LayoutService} from "./layout.service";
import {Subscription} from "rxjs";
declare var UIkit; declare var UIkit;
@ -11,19 +22,31 @@ declare var UIkit;
selector: 'dashboard-sidebar', selector: 'dashboard-sidebar',
templateUrl: 'sideBar.component.html' templateUrl: 'sideBar.component.html'
}) })
export class SideBarComponent implements AfterViewInit { export class SideBarComponent implements OnInit, AfterViewInit, OnDestroy, OnChanges {
@Input() items: MenuItem[] = []; @Input() items: MenuItem[] = [];
@Input() activeItem: string = ''; @Input() activeItem: string = '';
@Input() activeSubItem: string = ''; @Input() activeSubItem: string = '';
@Input() specialMenuItem: MenuItem = null; @Input() specialMenuItem: MenuItem = null;
@Input() queryParamsHandling; @Input() queryParamsHandling;
@ViewChild("nav") nav: ElementRef @ViewChild("nav") nav: ElementRef;
@ViewChild("sidebar_offcanvas") sidebar_offcanvas: ElementRef;
public properties = properties; public properties = properties;
private subscriptions: any[] = [];
constructor(private route: ActivatedRoute, private router: Router, constructor(private route: ActivatedRoute, private router: Router,
private sanitizer: DomSanitizer, private layoutService: LayoutService, private sanitizer: DomSanitizer, private layoutService: LayoutService,
@Inject(PLATFORM_ID) private platformId) {} private cdr: ChangeDetectorRef, @Inject(PLATFORM_ID) private platformId) {
this.subscriptions.push(this.router.events.subscribe(event => {
if(event instanceof NavigationEnd && (!this.activeItem && !this.activeSubItem)) {
this.setActiveMenuItem();
}
}));
}
ngOnInit() {
this.setActiveMenuItem();
}
ngAfterViewInit() { ngAfterViewInit() {
if(this.nav && typeof UIkit !== "undefined") { if(this.nav && typeof UIkit !== "undefined") {
setTimeout(() => { setTimeout(() => {
@ -33,6 +56,21 @@ export class SideBarComponent implements AfterViewInit {
}); });
} }
} }
ngOnChanges(changes: SimpleChanges) {
if(changes.activeItem || changes.activeSubItem || changes.items) {
this.setActiveMenuItem();
}
}
ngOnDestroy() {
this.layoutService.setActiveSidebarItem(null);
this.subscriptions.forEach(subscription => {
if(subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
get isBrowser() { get isBrowser() {
return this.platformId === 'browser'; return this.platformId === 'browser';
@ -46,7 +84,7 @@ export class SideBarComponent implements AfterViewInit {
} }
get activeIndex(): number { get activeIndex(): number {
return this.items?this.items.findIndex(item => this.isTheActiveMenuItem(item)):0; return this.items?this.items.findIndex(item => item.isActive):0;
} }
getItemRoute(item: MenuItem) { getItemRoute(item: MenuItem) {
@ -57,8 +95,43 @@ export class SideBarComponent implements AfterViewInit {
return item.route?item.route:null; return item.route?item.route:null;
} }
} }
setActiveMenuItem() {
this.items.forEach(item => {
item.isActive = this.isTheActiveMenuItem(item);
if(item.isActive) {
if(item.items.length > 0) {
item.items.forEach(subItem => {
subItem.isActive = this.isTheActiveMenuItem(item, subItem);
if(subItem.isActive) {
this.layoutService.setActiveSidebarItem({
name: item.title,
icon: item.icon,
subItem: {
name: subItem.title
}
});
}
});
} else {
this.layoutService.setActiveSidebarItem({
name: item.title,
icon: item.icon
});
}
} else {
item.items.forEach(subItem => {
subItem.isActive = false;
});
}
});
if(!this.items.find(item => item.isActive)) {
this.layoutService.setActiveSidebarItem(null);
}
this.cdr.detectChanges();
}
isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean { private isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean {
if (this.activeItem || this.activeSubItem) { if (this.activeItem || this.activeSubItem) {
return (!subItem && this.activeItem === item._id) || return (!subItem && this.activeItem === item._id) ||
(subItem && this.activeItem === item._id && this.activeSubItem === subItem._id); (subItem && this.activeItem === item._id && this.activeSubItem === subItem._id);
@ -74,15 +147,13 @@ export class SideBarComponent implements AfterViewInit {
return (menuItemURL == this.router.url.split('?')[0]) return (menuItemURL == this.router.url.split('?')[0])
} }
satinizeHTML(html) {
return this.sanitizer.bypassSecurityTrustHtml(html);
}
public get isSmallScreen() {
return this.layoutService.isSmallScreen;
}
public get open() { public get open() {
return this.layoutService.open; return this.layoutService.open;
} }
public closeOffcanvas() {
if(this.sidebar_offcanvas) {
UIkit.offcanvas(this.sidebar_offcanvas.nativeElement).hide();
}
}
} }

42
dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.component.ts Normal file
View File

@ -0,0 +1,42 @@
import {Component, OnDestroy, OnInit} from "@angular/core";
import {LayoutService, SidebarItem} from "../layout.service";
import {Subscription} from "rxjs";
@Component({
selector: 'sidebar-mobile-toggle',
template: `
<a *ngIf="activeSidebarItem" href="#sidebar_offcanvas" class="sidebar_mobile_toggle uk-link-reset uk-width-2-3 uk-flex uk-flex-middle" uk-toggle>
<div *ngIf="activeSidebarItem.icon && (activeSidebarItem.icon.svg || activeSidebarItem.icon.name)" class="uk-width-auto">
<icon class="menu-icon" [customClass]="activeSidebarItem.icon.class" [name]="activeSidebarItem.icon.name" ratio="0.9" [svg]="activeSidebarItem.icon.svg" [flex]="true"></icon>
</div>
<span class="uk-width-expand uk-text-truncate uk-margin-small-left uk-text-bolder">
{{activeSidebarItem.name}}
<span *ngIf="activeSidebarItem.subItem">- {{activeSidebarItem.subItem.name}}</span>
</span>
<div class="uk-width-auto uk-margin-small-left">
<icon name="arrow_drop_down" ratio="1.5" [flex]="true"></icon>
</div>
</a>
`
})
export class SidebarMobileToggleComponent implements OnInit, OnDestroy {
public activeSidebarItem: SidebarItem;
private subscriptions: any[] = [];
constructor(private layoutService: LayoutService) {
}
ngOnInit() {
this.subscriptions.push(this.layoutService.activeSidebarItem.subscribe(activeSidebarItem => {
this.activeSidebarItem = activeSidebarItem;
}));
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if(subscription instanceof Subscription) {
subscription.unsubscribe();
}
});
}
}

11
dashboard/sharedComponents/sidebar/sidebar-mobile-toggle/sidebar-mobile-toggle.module.ts Normal file
View File

@ -0,0 +1,11 @@
import {NgModule} from "@angular/core";
import {CommonModule} from "@angular/common";
import {SidebarMobileToggleComponent} from "./sidebar-mobile-toggle.component";
import {IconsModule} from "../../../../utils/icons/icons.module";
@NgModule({
imports: [CommonModule, IconsModule],
declarations: [SidebarMobileToggleComponent],
exports: [SidebarMobileToggleComponent]
})
export class SidebarMobileToggleModule {}

33
sharedComponents/menu.ts
View File

@ -3,10 +3,11 @@ export interface Icon {
svg?: string, svg?: string,
class?: string class?: string
} }
export class MenuItem { export class MenuItem {
_id: string = ""; // for root menu in order to close the dropdown when clicked _id: string = ""; // for root menu in order to close the dropdown when clicked
title: string = ""; title: string = "";
type: string = "internal"; type: string = "internal";
url: string = ""; // external url url: string = ""; // external url
route: string = ""; // internal url - using angular routing and components route: string = ""; // internal url - using angular routing and components
routeActive: string = ""; // route to check if it is active routeActive: string = ""; // route to check if it is active
@ -19,7 +20,8 @@ export class MenuItem {
icon: Icon; icon: Icon;
open: boolean; open: boolean;
customClass: string = null; customClass: string = null;
isFeatured: boolean; isFeatured: boolean;
isActive: boolean;
target: string = "_blank"; target: string = "_blank";
constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[],
@ -43,12 +45,12 @@ export class MenuItem {
this.isFeatured = isFeatured; this.isFeatured = isFeatured;
} }
public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string=""): boolean { public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string = ""): boolean {
if(menu.route && menu.route.length > 0 && MenuItem.isTheActiveMenuItem(menu, currentRoute, activeMenuItem)) { if (menu.route && menu.route.length > 0 && MenuItem.isTheActiveMenuItem(menu, currentRoute, activeMenuItem)) {
return true; return true;
} else if(menu.items.length > 0) { } else if (menu.items.length > 0) {
for(let menuItem of menu.items) { for (let menuItem of menu.items) {
if(MenuItem.isTheActiveMenuItem(menuItem, currentRoute, activeMenuItem)) { if (MenuItem.isTheActiveMenuItem(menuItem, currentRoute, activeMenuItem)) {
return true; return true;
} }
} }
@ -67,22 +69,23 @@ export class MenuItem {
} }
export class MenuItemExtended extends MenuItem { export class MenuItemExtended extends MenuItem {
isOpen: boolean = false; isOpen: boolean = false;
parentItemId: string; parentItemId: string;
} }
export class Menu { export class Menu {
portalPid: string; portalPid: string;
isFeaturedMenuEnabled: boolean; isFeaturedMenuEnabled: boolean;
isMenuEnabled: boolean; isMenuEnabled: boolean;
featuredAlignment: MenuAlignment; featuredAlignment: MenuAlignment;
featuredMenuItems: MenuItemExtended[] = []; featuredMenuItems: MenuItemExtended[] = [];
menuItems: MenuItemExtended[] = []; menuItems: MenuItemExtended[] = [];
} }
export class SideMenuItem extends MenuItem { export class SideMenuItem extends MenuItem {
ukIcon: string = ''; ukIcon: string = '';
} }
export enum MenuAlignment {LEFT="LEFT", CENTER="CENTER", RIGHT="RIGHT"} export enum MenuAlignment {LEFT = "LEFT", CENTER = "CENTER", RIGHT = "RIGHT"}

6
sharedComponents/navigationBar.component.html
View File

@ -24,7 +24,7 @@
<button class="uk-offcanvas-close uk-icon uk-close"> <button class="uk-offcanvas-close uk-icon uk-close">
<icon name="close" ratio="1.5" visuallyHidden="close menu"></icon> <icon name="close" ratio="1.5" visuallyHidden="close menu"></icon>
</button> </button>
<ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-top uk-nav-parent-icon" uk-nav> <ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-large-top uk-nav-parent-icon" uk-nav>
<ng-container *ngIf="!onlyTop"> <ng-container *ngIf="!onlyTop">
<li *ngIf="showHomeMenuItem && currentRoute.route !== '/'"> <li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
<a routerLink="/" (click)="closeCanvas(canvas)">Home</a> <a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
@ -314,7 +314,7 @@
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)" <img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl" [src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
[alt]="activeHeader.title"> [alt]="activeHeader.title">
<div *ngIf="activeHeader.logoInfo && !mobile" [innerHTML]="activeHeader.logoInfo"></div> <div *ngIf="activeHeader.logoInfo" class="uk-visible@l" [innerHTML]="activeHeader.logoInfo"></div>
<ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)"> <ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
<p class="uk-margin-remove">{{activeHeader.title}}</p> <p class="uk-margin-remove">{{activeHeader.title}}</p>
@ -326,7 +326,7 @@
<img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)" <img *ngIf="(mobile && activeHeader.logoSmallUrl) || (!mobile && activeHeader.logoUrl)"
[src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl" [src]="!mobile?activeHeader.logoUrl:activeHeader.logoSmallUrl"
[alt]="activeHeader.title"> [alt]="activeHeader.title">
<div *ngIf="activeHeader.logoInfo && !mobile" [innerHTML]="activeHeader.logoInfo"></div> <div *ngIf="activeHeader.logoInfo" class="uk-visible@l" [innerHTML]="activeHeader.logoInfo"></div>
<ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)"> <ng-container *ngIf="(mobile && !activeHeader.logoSmallUrl) || (!mobile && !activeHeader.logoUrl)">
<div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title"> <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="activeHeader.title">
<p class="uk-margin-remove">{{activeHeader.title}}</p> <p class="uk-margin-remove">{{activeHeader.title}}</p>

48
sharedComponents/tabs/slider-tabs.component.ts
View File

@ -27,30 +27,32 @@ declare var UIkit;
[attr.uk-switcher]="type === 'static'?('connect:' + connect):null" [attr.uk-switcher]="type === 'static'?('connect:' + connect):null"
[ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass"> [ngClass]="'uk-flex-' + flexPosition + ' ' + tabsClass">
<ng-container *ngIf="type === 'static'"> <ng-container *ngIf="type === 'static'">
<li *ngFor="let tab of leftTabs" class="uk-text-capitalize"> <li *ngFor="let tab of leftTabs" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block">
<a>{{tab.title}}</a> <a>{{tab.title}}</a>
</li> </li>
<li *ngFor="let tab of rightTabs; let i=index;" <li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''" class="uk-text-capitalize uk-text-truncate uk-display-block">
class="uk-text-capitalize">
<a [ngClass]="tab.customClass">{{tab.title}}</a> <a [ngClass]="tab.customClass">{{tab.title}}</a>
</li> </li>
</ng-container> </ng-container>
<ng-container *ngIf="type === 'dynamic'"> <ng-container *ngIf="type === 'dynamic'">
<li *ngFor="let tab of leftTabs" [class.uk-active]="tab.active" class="uk-text-capitalize"> <li *ngFor="let tab of leftTabs; let i=index;" [class.uk-active]="tab.active" style="max-width: 50%">
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass">{{tab.title}}</a> <a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
(click)="showActive(i)"
class="uk-text-capitalize uk-text-truncate uk-display-block">{{tab.title}}</a>
</li> </li>
<li *ngFor="let tab of rightTabs; let i=index;" [class.uk-active]="tab.active" <li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" [class.uk-active]="tab.active"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''">
class="uk-text-capitalize"> <a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass"
<a [routerLink]="tab.routerLink" [queryParams]="tab.queryParams" [ngClass]="tab.customClass">{{tab.title}}</a> (click)="showActive(i)"
class="uk-text-capitalize uk-text-truncate uk-display-block">{{tab.title}}</a>
</li> </li>
</ng-container> </ng-container>
<ng-container *ngIf="type === 'scrollable'"> <ng-container *ngIf="type === 'scrollable'">
<li *ngFor="let tab of leftTabs" class="uk-text-capitalize" [class.uk-active]="tab.active"> <li *ngFor="let tab of leftTabs" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block" [class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a> <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
</li> </li>
<li *ngFor="let tab of rightTabs; let i=index;" class="uk-text-capitalize" <li *ngFor="let tab of rightTabs; let i=index;" style="max-width: 50%" class="uk-text-capitalize uk-text-truncate uk-display-block"
[ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''" [ngClass]="i === 0?'uk-flex-1 uk-flex uk-flex-right':''"
[class.uk-active]="tab.active"> [class.uk-active]="tab.active">
<a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a> <a routerLink="./" [fragment]="tab.id" queryParamsHandling="merge" [ngClass]="tab.customClass">{{tab.title}}</a>
@ -109,6 +111,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
@ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>; @ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>;
@ViewChild('sliderElement') sliderElement: ElementRef; @ViewChild('sliderElement') sliderElement: ElementRef;
@ViewChild('tabsElement') tabsElement: ElementRef; @ViewChild('tabsElement') tabsElement: ElementRef;
private slider;
/** /**
* Notify regarding new active element * Notify regarding new active element
* */ * */
@ -127,23 +130,25 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
if (typeof document !== 'undefined' && this.tabs.length > 0) { if (typeof document !== 'undefined' && this.tabs.length > 0) {
setTimeout(() => { setTimeout(() => {
if (this.position === 'horizontal') { if (this.position === 'horizontal') {
let slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true}); this.slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true});
slider.clsActive = 'uk-slider-active'; this.slider.clsActive = 'uk-slider-active';
slider.updateActiveClasses(); this.slider.updateActiveClasses();
slider.slides.forEach((item, index) => { this.slider.slides.forEach((item, index) => {
if(!this.tabs.get(index).active) { if(!this.tabs.get(index).active) {
item.classList.remove('uk-active'); item.classList.remove('uk-active');
} }
}); });
console.log(slider);
if (this.type === 'static') { if (this.type === 'static') {
let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect}); let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
tabs.show(this.activeIndex); tabs.show(this.activeIndex);
if (this.connect.includes('#')) { if (this.connect.includes('#')) {
this.scrollToStart(); this.scrollToStart();
} }
} else if(this.type =='dynamic') {
this.activeIndex = this.tabs.toArray().findIndex(tab => tab.active);
this.slider.show(this.activeIndex);
} else if (this.type === 'scrollable') { } else if (this.type === 'scrollable') {
this.scrollable(slider); this.scrollable(this.slider);
} }
} else { } else {
this.scrollable(); this.scrollable();
@ -198,6 +203,13 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
} }
}); });
} }
public showActive(index) {
this.activeIndex = index;
if(this.slider) {
this.slider.show(this.activeIndex);
}
}
private activeFragment(fragment, slider) { private activeFragment(fragment, slider) {
let index = 0; let index = 0;