ng-zorro-antd-mobile
Version:
An enterprise-class mobile UI components based on Ant Design and Angular
335 lines (330 loc) • 15.5 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, Input, Output, HostBinding, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class DrawerComponent {
get docked() {
return this._docked;
}
set docked(v) {
this._docked = v;
this.dockedCls = v;
}
get open() {
return this._open;
}
set open(v) {
this._open = v;
this.openCls = v;
}
set position(v) {
this._position = v;
this.right = false;
this.left = false;
this.top = false;
this.bottom = false;
switch (v) {
case 'right':
this.right = true;
break;
case 'left':
this.left = true;
break;
case 'top':
this.top = true;
break;
case 'bottom':
this.bottom = true;
break;
}
}
constructor(_el) {
this._el = _el;
this.prefixCls = 'am-drawer';
this.sidebarStyleFinal = {};
this.contentStyleFinal = {};
this.overlayStyleFinal = {};
this.sidebarWidth = 0;
this.sidebarHeight = 0;
this.sidebarTop = 0;
this.dragHandleTop = 0;
this.touchIdentifier = null;
this.touchStartX = null;
this.touchStartY = null;
this.touchCurrentX = null;
this.touchCurrentY = null;
this.touchSupported = typeof window === 'object' && 'ontouchstart' in window;
this._docked = false;
this._open = false;
this._position = 'left';
this.sidebarStyle = {};
this.contentStyle = {};
this.overlayStyle = {};
this.dragHandleStyle = {};
this.transitions = true;
this.touch = true;
this.enableDragHandle = false;
this.dragToggleDistance = 30;
this.onOpenChange = new EventEmitter();
this.am = true;
this.left = this._position === 'left';
this.right = this._position === 'right';
this.top = this._position == 'top';
this.bottom = this._position == 'bottom';
this.dockedCls = this._docked;
this.openCls = this._open;
}
onOverlayClicked() {
if (this._open) {
this.onOpenChange.emit(true);
}
}
isTouching() {
return this.touchIdentifier !== null;
}
onTouchStart(event) {
const touch = event.changedTouches[0];
this.touchIdentifier = touch.identifier;
this.touchStartX = touch.clientX;
this.touchStartY = touch.clientY;
this.touchCurrentX = touch.clientX;
this.touchCurrentY = touch.clientY;
}
onTouchMove(ev) {
for (let ind = 0; ind < ev.changedTouches.length; ind++) {
if (ev.changedTouches[ind].identifier === this.touchIdentifier) {
this.touchCurrentX = ev.changedTouches[ind].clientX;
this.touchCurrentY = ev.changedTouches[ind].clientY;
break;
}
}
this.update();
}
onTouchEnd() {
const touchWidth = this.touchSidebarWidth();
if (!this._open && touchWidth > this.dragToggleDistance) {
this.onOpenChange.emit(!this._open);
}
const touchHeight = this.touchSidebarHeight();
if (!this._open && touchHeight > this.dragToggleDistance) {
this.onOpenChange.emit(!this._open);
}
this.touchIdentifier = null;
this.touchStartX = null;
this.touchStartY = null;
this.touchCurrentX = null;
this.touchCurrentY = null;
this.update();
}
saveSidebarSize() {
const sidebar = this._el.nativeElement.querySelector('#sidebar');
const dragHandle = this._el.nativeElement.querySelector('#dragHandle');
const width = sidebar.offsetWidth;
const height = sidebar.offsetHeight;
const sidebarTop = this.getOffset(sidebar).top;
const dragHandleTop = this.getOffset(dragHandle).top;
if (width !== this.sidebarWidth) {
this.sidebarWidth = width;
}
if (height !== this.sidebarHeight) {
this.sidebarHeight = height;
}
if (sidebarTop !== this.sidebarTop) {
this.sidebarTop = sidebarTop;
}
if (dragHandleTop !== this.dragHandleTop) {
this.dragHandleTop = dragHandleTop;
}
}
touchSidebarWidth() {
if (this._position === 'right') {
return Math.min(window.innerWidth - this.touchCurrentX, this.sidebarWidth);
}
if (this._position === 'left') {
return Math.min(this.touchCurrentX, this.sidebarWidth);
}
}
touchSidebarHeight() {
if (this._position === 'bottom') {
return Math.min(this._el.nativeElement.offsetHeight - this.touchCurrentY + this._el.nativeElement.offsetTop, this.sidebarHeight);
}
if (this._position === 'top') {
return Math.min(this.touchCurrentY - this.dragHandleTop, this.sidebarHeight);
}
}
renderStyle({ sidebarStyle, isTouching, overlayStyle, contentStyle }) {
if (this._position === 'right' || this._position === 'left') {
sidebarStyle.transform = `translateX(0%)`;
sidebarStyle.WebkitTransform = `translateX(0%)`;
if (isTouching) {
const percentage = this.touchSidebarWidth() / this.sidebarWidth;
// slide open to what we dragged
if (this._position === 'right') {
sidebarStyle.transform = `translateX(${(1 - percentage) * 100}%)`;
sidebarStyle.WebkitTransform = `translateX(${(1 - percentage) * 100}%)`;
}
if (this._position === 'left') {
sidebarStyle.transform = `translateX(-${(1 - percentage) * 100}%)`;
sidebarStyle.WebkitTransform = `translateX(-${(1 - percentage) * 100}%)`;
}
overlayStyle.opacity = percentage;
overlayStyle.visibility = 'visible';
}
if (contentStyle) {
contentStyle[this._position] = `${this.sidebarWidth}px`;
}
}
if (this._position === 'top' || this._position === 'bottom') {
sidebarStyle.transform = `translateY(0%)`;
sidebarStyle.WebkitTransform = `translateY(0%)`;
if (isTouching) {
const percentage = this.touchSidebarHeight() / this.sidebarHeight;
if (this._position === 'bottom') {
sidebarStyle.transform = `translateY(${(1 - percentage) * 100}%)`;
sidebarStyle.WebkitTransform = `translateY(${(1 - percentage) * 100}%)`;
}
if (this._position === 'top') {
sidebarStyle.transform = `translateY(-${(1 - percentage) * 100}%)`;
sidebarStyle.WebkitTransform = `translateY(-${(1 - percentage) * 100}%)`;
}
overlayStyle.opacity = percentage;
overlayStyle.visibility = 'visible';
}
if (contentStyle) {
contentStyle[this._position] = `${this.sidebarHeight}px`;
}
}
}
update() {
const sidebarStyle = { ...this.sidebarStyle };
const contentStyle = { ...this.contentStyle };
const overlayStyle = { ...this.overlayStyle };
if (this.isTouching()) {
this.renderStyle({
sidebarStyle: sidebarStyle,
isTouching: true,
contentStyle: undefined,
overlayStyle: overlayStyle
});
}
else if (this._docked) {
this.dockedCls = true;
this.renderStyle({
sidebarStyle: sidebarStyle,
isTouching: undefined,
contentStyle: contentStyle,
overlayStyle: undefined
});
}
else if (this._open) {
this.openCls = true;
this.renderStyle({
sidebarStyle: sidebarStyle,
isTouching: undefined,
contentStyle: undefined,
overlayStyle: undefined
});
overlayStyle.opacity = 1;
overlayStyle.visibility = 'visible';
}
if (this.isTouching() || !this.transitions) {
sidebarStyle.transition = 'none';
sidebarStyle.WebkitTransition = 'none';
contentStyle.transition = 'none';
overlayStyle.transition = 'none';
}
this.sidebarStyleFinal = sidebarStyle;
this.contentStyleFinal = contentStyle;
this.overlayStyleFinal = overlayStyle;
}
getOffset(ele) {
let el = ele;
let _x = 0;
let _y = 0;
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
_x += el.offsetLeft - el.scrollLeft;
_y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: _y, left: _x };
}
ngAfterViewChecked() {
if (!this.isTouching()) {
this.saveSidebarSize();
}
}
ngOnChanges() {
this.update();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DrawerComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: DrawerComponent, selector: "Drawer, nzm-drawer", inputs: { sidebar: "sidebar", sidebarStyle: "sidebarStyle", contentStyle: "contentStyle", overlayStyle: "overlayStyle", dragHandleStyle: "dragHandleStyle", transitions: "transitions", touch: "touch", enableDragHandle: "enableDragHandle", dragToggleDistance: "dragToggleDistance", docked: "docked", open: "open", position: "position" }, outputs: { onOpenChange: "onOpenChange" }, host: { properties: { "class.am-drawer": "this.am", "class.am-drawer-left": "this.left", "class.am-drawer-right": "this.right", "class.am-drawer-top": "this.top", "class.am-drawer-bottom": "this.bottom", "class.am-drawer-docked": "this.dockedCls", "class.am-drawer-open": "this.openCls" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"am-drawer-sidebar\" [ngStyle]=\"sidebarStyleFinal\" id=\"sidebar\">\n <ng-template [ngTemplateOutlet]=\"sidebar\"></ng-template>\n</div>\n<div\n role=\"presentation\"\n class=\"{{ prefixCls }}-overlay\"\n ref=\"overlay\"\n [ngStyle]=\"overlayStyleFinal\"\n (click)=\"onOverlayClicked()\"\n></div>\n<div class=\"{{ prefixCls }}-content\" [ngStyle]=\"contentStyleFinal\" ref=\"content\">\n <div\n *ngIf=\"touch && touchSupported && !open && !docked && enableDragHandle\"\n id=\"dragHandle\"\n class=\"{{ prefixCls }}-draghandle\"\n [ngStyle]=\"dragHandleStyle\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd()\"\n (touchcancle)=\"onTouchEnd()\"\n ></div>\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DrawerComponent, decorators: [{
type: Component,
args: [{ selector: 'Drawer, nzm-drawer', encapsulation: ViewEncapsulation.None, template: "<div class=\"am-drawer-sidebar\" [ngStyle]=\"sidebarStyleFinal\" id=\"sidebar\">\n <ng-template [ngTemplateOutlet]=\"sidebar\"></ng-template>\n</div>\n<div\n role=\"presentation\"\n class=\"{{ prefixCls }}-overlay\"\n ref=\"overlay\"\n [ngStyle]=\"overlayStyleFinal\"\n (click)=\"onOverlayClicked()\"\n></div>\n<div class=\"{{ prefixCls }}-content\" [ngStyle]=\"contentStyleFinal\" ref=\"content\">\n <div\n *ngIf=\"touch && touchSupported && !open && !docked && enableDragHandle\"\n id=\"dragHandle\"\n class=\"{{ prefixCls }}-draghandle\"\n [ngStyle]=\"dragHandleStyle\"\n (touchstart)=\"onTouchStart($event)\"\n (touchmove)=\"onTouchMove($event)\"\n (touchend)=\"onTouchEnd()\"\n (touchcancle)=\"onTouchEnd()\"\n ></div>\n <ng-content></ng-content>\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { sidebar: [{
type: Input
}], sidebarStyle: [{
type: Input
}], contentStyle: [{
type: Input
}], overlayStyle: [{
type: Input
}], dragHandleStyle: [{
type: Input
}], transitions: [{
type: Input
}], touch: [{
type: Input
}], enableDragHandle: [{
type: Input
}], dragToggleDistance: [{
type: Input
}], docked: [{
type: Input
}], open: [{
type: Input
}], position: [{
type: Input
}], onOpenChange: [{
type: Output
}], am: [{
type: HostBinding,
args: ['class.am-drawer']
}], left: [{
type: HostBinding,
args: ['class.am-drawer-left']
}], right: [{
type: HostBinding,
args: ['class.am-drawer-right']
}], top: [{
type: HostBinding,
args: ['class.am-drawer-top']
}], bottom: [{
type: HostBinding,
args: ['class.am-drawer-bottom']
}], dockedCls: [{
type: HostBinding,
args: ['class.am-drawer-docked']
}], openCls: [{
type: HostBinding,
args: ['class.am-drawer-open']
}] } });
class DrawerModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DrawerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.0.8", ngImport: i0, type: DrawerModule, declarations: [DrawerComponent], imports: [CommonModule], exports: [DrawerComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DrawerModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: DrawerModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule],
declarations: [DrawerComponent],
exports: [DrawerComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DrawerComponent, DrawerModule };
//# sourceMappingURL=ng-zorro-antd-mobile-drawer.mjs.map