first commit
This commit is contained in:
Kola92
212
src/app/layouts/auth-layout/auth-layout.component.ts
Normal file
212
src/app/layouts/auth-layout/auth-layout.component.ts
Normal file
@@ -0,0 +1,212 @@
|
||||
import { Component, OnInit, OnDestroy } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { ROUTES } from '../../components/sidebar/sidebar.component';
|
||||
import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
|
||||
|
||||
@Component({
|
||||
selector: 'app-auth-layout',
|
||||
templateUrl: './auth-layout.component.html',
|
||||
styleUrls: ['./auth-layout.component.scss']
|
||||
})
|
||||
export class AuthLayoutComponent implements OnInit, OnDestroy {
|
||||
public menuItems: any[];
|
||||
test: Date = new Date();
|
||||
closeResult: string;
|
||||
public sidebarColor: string = "red";
|
||||
public isCollapsed = true;
|
||||
mobile_menu_visible: any = 0;
|
||||
private toggleButton: any;
|
||||
private sidebarVisible: boolean;
|
||||
|
||||
constructor(private router: Router, private modalService: NgbModal) { }
|
||||
|
||||
changeSidebarColor(color){
|
||||
var sidebar = document.getElementsByClassName('sidebar')[0];
|
||||
var mainPanel = document.getElementsByClassName('main-panel')[0];
|
||||
|
||||
this.sidebarColor = color;
|
||||
|
||||
if(sidebar != undefined){
|
||||
sidebar.setAttribute('data',color);
|
||||
}
|
||||
if(mainPanel != undefined){
|
||||
mainPanel.setAttribute('data',color);
|
||||
}
|
||||
}
|
||||
changeDashboardColor(color){
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
if (body && color === 'white-content') {
|
||||
body.classList.add(color);
|
||||
}
|
||||
else if(body.classList.contains('white-content')) {
|
||||
body.classList.remove('white-content');
|
||||
}
|
||||
}
|
||||
// function that adds color white/transparent to the navbar on resize (this is for the collapse)
|
||||
updateColor = () => {
|
||||
var navbar = document.getElementsByClassName('navbar')[0];
|
||||
if (window.innerWidth < 993 && !this.isCollapsed) {
|
||||
navbar.classList.add('bg-white');
|
||||
navbar.classList.remove('navbar-transparent');
|
||||
} else {
|
||||
navbar.classList.remove('bg-white');
|
||||
navbar.classList.add('navbar-transparent');
|
||||
}
|
||||
};
|
||||
ngOnInit() {
|
||||
var navbar = document.getElementsByClassName('navbar')[0];
|
||||
|
||||
window.addEventListener("resize", this.updateColor);
|
||||
this.toggleButton = navbar.getElementsByClassName("navbar-toggler")[0];
|
||||
this.router.events.subscribe(event => {
|
||||
this.sidebarClose();
|
||||
var $layer: any = document.getElementsByClassName("close-layer")[0];
|
||||
if ($layer) {
|
||||
$layer.remove();
|
||||
this.mobile_menu_visible = 0;
|
||||
}
|
||||
});
|
||||
this.menuItems = ROUTES.filter(menuItem => menuItem);
|
||||
// on this page, we need on the body tag the classes .rtl and .menu-on-right
|
||||
document.body.classList.add("rtl", "menu-on-right");
|
||||
// we also need the rtl bootstrap
|
||||
// so we add it dynamically to the head
|
||||
let head = document.head;
|
||||
let link = document.createElement("link");
|
||||
link.type = "text/css";
|
||||
link.rel = "stylesheet";
|
||||
link.id = "rtl-id";
|
||||
link.href =
|
||||
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css";
|
||||
head.appendChild(link);
|
||||
|
||||
}
|
||||
ngOnDestroy() {
|
||||
// when we exit this page, we need to delete the classes .rtl and .menu-on-right
|
||||
// from the body tag
|
||||
document.body.classList.remove("rtl", "menu-on-right");
|
||||
// we also need to delete the rtl bootstrap, so it does not break the other pages
|
||||
// that do not make use of rtl
|
||||
document.getElementById("rtl-id").remove();
|
||||
}
|
||||
collapse() {
|
||||
this.isCollapsed = !this.isCollapsed;
|
||||
const navbar = document.getElementsByTagName("nav")[0];
|
||||
if (!this.isCollapsed) {
|
||||
navbar.classList.remove("navbar-transparent");
|
||||
navbar.classList.add("bg-white");
|
||||
} else {
|
||||
navbar.classList.add("navbar-transparent");
|
||||
navbar.classList.remove("bg-white");
|
||||
}
|
||||
}
|
||||
|
||||
sidebarOpen() {
|
||||
const toggleButton = this.toggleButton;
|
||||
const mainPanel = <HTMLElement>(
|
||||
document.getElementsByClassName("main-panel")[0]
|
||||
);
|
||||
const html = document.getElementsByTagName("html")[0];
|
||||
if (window.innerWidth < 991) {
|
||||
mainPanel.style.position = "fixed";
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
toggleButton.classList.add("toggled");
|
||||
}, 500);
|
||||
|
||||
html.classList.add("nav-open");
|
||||
|
||||
this.sidebarVisible = true;
|
||||
}
|
||||
sidebarClose() {
|
||||
const html = document.getElementsByTagName("html")[0];
|
||||
this.toggleButton.classList.remove("toggled");
|
||||
const mainPanel = <HTMLElement>(
|
||||
document.getElementsByClassName("main-panel")[0]
|
||||
);
|
||||
|
||||
if (window.innerWidth < 991) {
|
||||
setTimeout(function() {
|
||||
mainPanel.style.position = "";
|
||||
}, 500);
|
||||
}
|
||||
this.sidebarVisible = false;
|
||||
html.classList.remove("nav-open");
|
||||
}
|
||||
sidebarToggle() {
|
||||
// const toggleButton = this.toggleButton;
|
||||
// const html = document.getElementsByTagName('html')[0];
|
||||
var $toggle = document.getElementsByClassName("navbar-toggler")[0];
|
||||
|
||||
if (this.sidebarVisible === false) {
|
||||
this.sidebarOpen();
|
||||
} else {
|
||||
this.sidebarClose();
|
||||
}
|
||||
const html = document.getElementsByTagName("html")[0];
|
||||
|
||||
if (this.mobile_menu_visible == 1) {
|
||||
// $('html').removeClass('nav-open');
|
||||
html.classList.remove("nav-open");
|
||||
if ($layer) {
|
||||
$layer.remove();
|
||||
}
|
||||
setTimeout(function() {
|
||||
$toggle.classList.remove("toggled");
|
||||
}, 400);
|
||||
|
||||
this.mobile_menu_visible = 0;
|
||||
} else {
|
||||
setTimeout(function() {
|
||||
$toggle.classList.add("toggled");
|
||||
}, 430);
|
||||
|
||||
var $layer = document.createElement("div");
|
||||
$layer.setAttribute("class", "close-layer");
|
||||
|
||||
if (html.querySelectorAll(".main-panel")) {
|
||||
document.getElementsByClassName("main-panel")[0].appendChild($layer);
|
||||
} else if (html.classList.contains("off-canvas-sidebar")) {
|
||||
document
|
||||
.getElementsByClassName("wrapper-full-page")[0]
|
||||
.appendChild($layer);
|
||||
}
|
||||
|
||||
setTimeout(function() {
|
||||
$layer.classList.add("visible");
|
||||
}, 100);
|
||||
|
||||
$layer.onclick = function() {
|
||||
//asign a function
|
||||
html.classList.remove("nav-open");
|
||||
this.mobile_menu_visible = 0;
|
||||
$layer.classList.remove("visible");
|
||||
setTimeout(function() {
|
||||
$layer.remove();
|
||||
$toggle.classList.remove("toggled");
|
||||
}, 400);
|
||||
}.bind(this);
|
||||
|
||||
html.classList.add("nav-open");
|
||||
this.mobile_menu_visible = 1;
|
||||
}
|
||||
}
|
||||
open(content) {
|
||||
this.modalService.open(content, {windowClass: 'modal-search'}).result.then((result) => {
|
||||
this.closeResult = `Closed with: ${result}`;
|
||||
}, (reason) => {
|
||||
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
|
||||
});
|
||||
}
|
||||
|
||||
private getDismissReason(reason: any): string {
|
||||
if (reason === ModalDismissReasons.ESC) {
|
||||
return 'by pressing ESC';
|
||||
} else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
|
||||
return 'by clicking on a backdrop';
|
||||
} else {
|
||||
return `with: ${reason}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user