import { Component, OnInit, Input, ContentChild, EventEmitter, Output, Renderer2, ElementRef, AfterContentInit, AfterViewInit, ViewChild, SimpleChanges, OnChanges } from '@angular/core';
import { Observable } from 'rxjs';
import { FarrisSidebarIconDirective } from './directive/sidebar-icon.directive'
import { FarrisSidebarService } from './sidebar.service';
import { FarrisSidebarTitleDirective } from './directive/sidebar-title.directive';
import { FarrisSidebarHeaderDirective } from './directive/sidebar-header.directive';
import { FarrisSidebarHcontentDirective } from './directive/sidebar-hcontent.directive';
import { FarrisSidebarToolbarDirective } from './directive/sidebar-toolbar.directive';
import { FarrisSidebarContentDirective } from './directive/sidebar-content.directive';
import { FarrisSidebarFooterDirective } from './directive/sidebar-footer.directive';
@Component({
selector: 'farris-sidebar',
template: `
`,
styleUrls: ['./sidebar.component.css'],
providers: []
})
export class FarrisSidebarComponent implements OnInit, AfterContentInit {
private el: HTMLElement;
private parentEl: HTMLElement;
@Input() showClose: boolean = false;
@Input() showHeader: boolean = true;
@Input() showEntry = true;
@Input() title = "";
@Input() showFooter: boolean = false;
//侧边栏支持class样式扩展
@Input() mainCls: string;
private _width = '350px';
/* 侧边栏大小 */
@Input()
get width() {
return this._width;
}
set width(value) {
this._width = this._resolveSize(value);
};
private _height='30%';
@Input()
set height(value){
this._height= this._resolveSize(value);
}
get height(){
return this._height;
}
/* 侧边栏显示 */
@Input() isOpen = false;
/* 侧边栏显示位置 */
@Input() showPos = 'right'
@Input() enableScroll = true;
/* 点击遮罩是否关闭侧边栏 */
@Input() maskClosable = true;
/* 是否显示遮罩 */
@Input() maskable = true;
@Input() beforeClose: () => Observable;
@Input() parentCls: string;
//展开效果
// @Input() openWay = 'float'
//是否可拖拽，有点问题（然后没这个特性）
@Input() resizeable: boolean = false;
entryTemplate: any;
//侧边栏入口区域支持自定义
@ContentChild(FarrisSidebarIconDirective) entryDirective: any;
//侧边栏header区域支持自定义
@ContentChild(FarrisSidebarHeaderDirective) headerDirective: any;
//侧边栏header标题区域支持自定义
@ContentChild(FarrisSidebarTitleDirective) headerTitleDirective: any;
//侧边栏header中间区域支持自定义
@ContentChild(FarrisSidebarHcontentDirective) headerContentDirective: any;
//侧边栏header工具栏区域支持自定义
@ContentChild(FarrisSidebarToolbarDirective) headerToolbarDirective: any;
// 侧边栏content支持自定义
@ContentChild(FarrisSidebarContentDirective) contentDirective: any;
// 侧边栏footer支持自定义
@ContentChild(FarrisSidebarFooterDirective) footerDirective: any;
@ViewChild('sidebarMain') private sidebarMainEl: ElementRef;
@Output() changeState: EventEmitter = new EventEmitter();
private canRemoveInitNoAnimateCls = true;
constructor(
private sidebarService: FarrisSidebarService,
private renderer: Renderer2,
private elementRef: ElementRef
) {
this.sidebarService.getIsOpen().subscribe(data => {
if (data === false) {
this.closeSideBar();
} else {
this.openSideBar();
}
})
this.el = this.elementRef.nativeElement;
}
ngOnInit(): void {
// const mainEl = this.el.querySelector('.f-sidebar-main');
// this.renderer.setStyle(mainEl, 'width', this._width);
}
ngAfterContentInit() {
this.entryTemplate = this.entryDirective && this.entryDirective.templateRef;
this.parentEl = this.el.parentElement;
this.renderer.addClass(this.parentEl, 'f-sidebar-parent');
if (this.parentCls) {
this.renderer.addClass(this.parentEl, this.parentCls);
}
}
/*宽高类型是 string或者number 解析宽高 尺寸 */
_resolveSize(size) {
const regex = /px|em|rem|pt|%/;
// 说明是字符串
return regex.test(size) ? `${parseInt(size, 10)}${size.match(regex)[0]}` : `${size}px`;
}
toggle() {
this.isOpen = !this.isOpen;
this.changeState.emit(this.isOpen);
if (this.isOpen === true) {
this.renderer.removeClass(this.parentEl, 'f-sidebar-parent-collapse');
this.renderer.addClass(this.parentEl, 'f-sidebar-parent-expand');
}
if (this.isOpen === false) {
this.renderer.removeClass(this.parentEl, 'f-sidebar-parent-expand');
this.renderer.addClass(this.parentEl, 'f-sidebar-parent-collapse');
}
// const prevEl = this.el.previousElementSibling;
// if(this.isOpen === true && this.openWay !== 'float'){
// this.renderer.setStyle(prevEl, `${this.showPos}`, this.width + 'px');
// this.renderer.addClass(this.parentEl, 'f-sidebar-parent-show');
// this.renderer.removeClass(this.parentEl, 'f-sidebar-parent-collapse');
// this.maskable = false;
// }
// if(this.isOpen === false && this.openWay !== 'float'){
// this.renderer.addClass(this.parentEl, 'f-sidebar-parent');
// this.renderer.addClass(this.parentEl, 'f-sidebar-parent-collapse');
// this.renderer.removeClass(this.parentEl, 'f-sidebar-parent-show');
// this.renderer.setStyle(prevEl, `${this.showPos}`, 0);
// }
// if(this.isOpen === true && this.openWay !== 'fold'){
// this.maskable = true;
// }
}
closeSideBar() {
this.removeNoneAnimateCls();
if (this.beforeClose) {
this.beforeClose().subscribe((isOpen: boolean) => {
this.isOpen = !isOpen;
})
} else {
this.isOpen = false;
}
this.renderer.removeClass(this.parentEl, 'f-sidebar-parent-expand');
this.renderer.addClass(this.parentEl, 'f-sidebar-parent-collapse');
}
closeSideBarByMask() {
if (!this.maskClosable) {
return;
}
this.closeSideBar();
}
openSideBar() {
this.removeNoneAnimateCls();
this.isOpen = true;
this.renderer.removeClass(this.parentEl, 'f-sidebar-parent-collapse');
this.renderer.addClass(this.parentEl, 'f-sidebar-parent-expand');
}
/*侧边栏初始因为动画收起时，会被看到, 移除 */
private removeNoneAnimateCls() {
if (!this.canRemoveInitNoAnimateCls) {
return;
}
if (this.sidebarMainEl) {
this.renderer.removeClass(this.sidebarMainEl.nativeElement, 'f-sidebar-slideinit');
this.canRemoveInitNoAnimateCls = false;
}
}
getStyleData(){
}
}