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

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, () => {

View File

@ -1,9 +1,16 @@
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'
}) })
@ -52,7 +59,7 @@ 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.
*/ */
@ -66,6 +73,8 @@ 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() {
@ -76,19 +85,19 @@ export class LayoutService {
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);
@ -96,7 +105,7 @@ export class LayoutService {
} }
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 {
@ -182,6 +191,10 @@ export class LayoutService {
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();
} }
@ -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();
@ -271,4 +284,12 @@ export class LayoutService {
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);
}
} }

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>

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,18 +22,30 @@ 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") {
@ -34,6 +57,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) {
@ -58,7 +96,42 @@ export class SideBarComponent implements AfterViewInit {
} }
} }
isTheActiveMenuItem(item: MenuItem, subItem: MenuItem = null): boolean { 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();
}
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();
}
}
} }

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();
}
});
}
}

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 {}

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"}

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>

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();
@ -199,6 +204,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;
if (fragment) { if (fragment) {