ngx-resizable-ex
Version:
A Resizable Split-Pane Layout for Angular6+
304 lines (290 loc) • 14.9 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
typeof define === 'function' && define.amd ? define('ngx-resizable-ex', ['exports', '@angular/core', '@angular/common'], factory) :
(global = global || self, factory(global['ngx-resizable-ex'] = {}, global.ng.core, global.ng.common));
}(this, function (exports, core, common) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __decorate(decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
}
function __metadata(metadataKey, metadataValue) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
}
var NgxResizableService = /** @class */ (function () {
function NgxResizableService() {
}
NgxResizableService.ngInjectableDef = core.defineInjectable({ factory: function NgxResizableService_Factory() { return new NgxResizableService(); }, token: NgxResizableService, providedIn: "root" });
NgxResizableService = __decorate([
core.Injectable({
providedIn: 'root'
}),
__metadata("design:paramtypes", [])
], NgxResizableService);
return NgxResizableService;
}());
function getWindow() {
return window;
}
var NgxResizeableWindowRef = /** @class */ (function () {
function NgxResizeableWindowRef() {
}
Object.defineProperty(NgxResizeableWindowRef.prototype, "nativeWindow", {
get: function () {
return getWindow();
},
enumerable: true,
configurable: true
});
NgxResizeableWindowRef.ngInjectableDef = core.defineInjectable({ factory: function NgxResizeableWindowRef_Factory() { return new NgxResizeableWindowRef(); }, token: NgxResizeableWindowRef, providedIn: "root" });
NgxResizeableWindowRef = __decorate([
core.Injectable({
providedIn: 'root'
})
], NgxResizeableWindowRef);
return NgxResizeableWindowRef;
}());
var ɵ0 = window;
var ResizableComponent = /** @class */ (function () {
function ResizableComponent(regionElement, windowRef) {
this.regionElement = regionElement;
this.windowRef = windowRef;
this.resizable = true;
this.noTransition = false;
this.rFlex = false;
this.resizeStart = new core.EventEmitter();
this.resizing = new core.EventEmitter();
this.resizeEnd = new core.EventEmitter();
this.vx = 1;
this.vy = 1;
this.info = {};
this.nativeElement = this.regionElement.nativeElement;
}
ResizableComponent.prototype.ngOnInit = function () {
if (!this.rFlex) {
this.resizable = false;
} // Added to permit use of component for all cells
this.flexBasis = 'flexBasis' in this.nativeElement.style ? 'flexBasis' :
'webkitFlexBasis' in this.nativeElement.style ? 'webkitFlexBasis' :
'msFlexPreferredSize' in this.nativeElement.style ? 'msFlexPreferredSize' : 'flexBasis';
};
ResizableComponent.prototype.ngAfterViewInit = function () {
this.style = this.windowRef.nativeWindow.getComputedStyle(this.nativeElement);
};
ResizableComponent.prototype.updateInfo = function (e) {
this.info['width'] = false;
this.info['height'] = false;
if (this.axis === 'x') {
this.info['width'] = parseInt(this.nativeElement.style[this.rFlex ? this.flexBasis : 'width'], 10);
}
else {
this.info['height'] = parseInt(this.nativeElement.style[this.rFlex ? this.flexBasis : 'height'], 10);
}
this.info['id'] = this.nativeElement.id;
this.info['evt'] = e;
};
ResizableComponent.prototype.dragStart = function (e, direction) {
var mouseEvent = e.originalEvent;
this.dragDir = direction;
this.axis = (this.dragDir === 'left' || this.dragDir === 'right') ? 'x' : 'y';
this.start = (this.axis === 'x' ? mouseEvent.clientX : mouseEvent.clientY);
this.w = parseInt(this.style.getPropertyValue('width'), 10);
this.h = parseInt(this.style.getPropertyValue('height'), 10);
this.resizeStart.emit({ info: this.info });
// prevent transition while dragging
this.noTransition = true;
};
ResizableComponent.prototype.dragEnd = function (e) {
var mouseEvent = e.originalEvent;
this.updateInfo(mouseEvent);
this.resizeEnd.emit({ info: this.info });
this.noTransition = false;
};
ResizableComponent.prototype.dragging = function (e) {
var mouseEvent = e.originalEvent;
var offset = (this.axis === 'x') ? this.start - mouseEvent.clientX : this.start - mouseEvent.clientY;
var operand = 1;
switch (this.dragDir) {
case 'top':
operand = -1;
/* falls through */
case 'bottom':
var height = (this.h - offset * this.vy * operand) + 'px';
if (this.rFlex) {
this.flexBasis = height;
}
else {
this.height = height;
}
break;
case 'left':
operand = -1;
/* falls through */
case 'right':
var width = (this.w - offset * this.vx * operand) + 'px';
if (this.rFlex) {
this.flexBasis = width;
}
else {
this.width = width;
}
break;
}
this.updateInfo(mouseEvent);
this.resizing.emit({ info: this.info });
};
__decorate([
core.HostBinding('class.resizable'),
__metadata("design:type", Object)
], ResizableComponent.prototype, "resizable", void 0);
__decorate([
core.HostBinding('class.no-transition'),
__metadata("design:type", Object)
], ResizableComponent.prototype, "noTransition", void 0);
__decorate([
core.HostBinding('style.width'),
__metadata("design:type", Object)
], ResizableComponent.prototype, "width", void 0);
__decorate([
core.HostBinding('style.height'),
__metadata("design:type", Object)
], ResizableComponent.prototype, "height", void 0);
__decorate([
core.HostBinding('style.flex-basis'),
__metadata("design:type", Object)
], ResizableComponent.prototype, "flexBasis", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], ResizableComponent.prototype, "directions", void 0);
__decorate([
core.Input(),
__metadata("design:type", Object)
], ResizableComponent.prototype, "rFlex", void 0);
__decorate([
core.Output(),
__metadata("design:type", Object)
], ResizableComponent.prototype, "resizeStart", void 0);
__decorate([
core.Output(),
__metadata("design:type", Object)
], ResizableComponent.prototype, "resizing", void 0);
__decorate([
core.Output(),
__metadata("design:type", Object)
], ResizableComponent.prototype, "resizeEnd", void 0);
ResizableComponent = __decorate([
core.Component({
selector: 'rsz-layout',
template: "<ng-content></ng-content>\n\n<div *ngFor='let direction of directions'\n [class]=\"'rg-' + direction\"\n rszDragHandle\n (DragStart)=\"dragStart($event, direction);\"\n (DragEnd)=\"dragEnd($event)\"\n (Drag)=\"dragging($event)\">\n <span></span>\n</div>",
providers: [{ provide: 'Window', useValue: ɵ0 }],
encapsulation: core.ViewEncapsulation.None,
styles: [".content{display:flex;flex-flow:column nowrap}.row{flex:1;display:flex;flex-flow:row nowrap}.row.resizable{flex:0 0 360px}.cell{box-sizing:border-box;background:#fff;border:4px solid #f0f0f0;flex:1;min-height:60px}.cell.resizable{flex:0 0 360px}.resizable{position:relative}.resizable.no-transition{transition:none!important}.rg-none{display:none}.rg-bottom,.rg-left,.rg-right,.rg-top{display:block;width:8px;height:8px;line-height:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:0 0;position:absolute;z-index:1}.rg-bottom span,.rg-left span,.rg-right span,.rg-top span{position:absolute;box-sizing:border-box;display:block;border:1px solid #ccc}.rg-left span,.rg-right span{border-width:0 1px;top:50%;margin:-10px 0 0 2px;height:20px;width:4px}.rg-bottom span,.rg-top span{border-width:1px 0;left:50%;margin:2px 0 0 -10px;width:20px;height:4px}.rg-top{cursor:row-resize;width:100%;top:0;left:0;margin-top:-4px}.rg-right{cursor:col-resize;height:100%;right:0;top:0;margin-right:-8px}.rg-bottom{cursor:row-resize;width:100%;bottom:0;left:0;margin-bottom:-4px}.rg-left{cursor:col-resize;height:100%;left:0;top:0;margin-left:-8px}.content.cols{flex-flow:row nowrap}.content.cols .row{flex-flow:column nowrap}.content.cols .cell{min-width:60px}.content.cols .rg-top{margin-top:-8px}.content.cols .rg-right{margin-right:-4px}.content.cols .rg-bottom{margin-bottom:-8px}.content.cols .rg-left{margin-left:-4px}"]
}),
__metadata("design:paramtypes", [core.ElementRef, NgxResizeableWindowRef])
], ResizableComponent);
return ResizableComponent;
}());
var DragDirective = /** @class */ (function () {
function DragDirective() {
this.DragStart = new core.EventEmitter();
this.Drag = new core.EventEmitter();
this.DragEnd = new core.EventEmitter();
this.dragging = false;
}
DragDirective.prototype.onMousedown = function (event) {
if (event.which === 1) {
this.dragging = true;
this.DragStart.emit({ originalEvent: event });
}
};
DragDirective.prototype.onMouseup = function (event) {
if (this.dragging) {
this.DragEnd.emit({ originalEvent: event });
}
this.dragging = false;
};
DragDirective.prototype.onMousemove = function (event) {
if (this.dragging) {
this.Drag.emit({ originalEvent: event });
}
};
__decorate([
core.Output(),
__metadata("design:type", Object)
], DragDirective.prototype, "DragStart", void 0);
__decorate([
core.Output(),
__metadata("design:type", Object)
], DragDirective.prototype, "Drag", void 0);
__decorate([
core.Output(),
__metadata("design:type", Object)
], DragDirective.prototype, "DragEnd", void 0);
__decorate([
core.HostListener('mousedown', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], DragDirective.prototype, "onMousedown", null);
__decorate([
core.HostListener('document:mouseup', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], DragDirective.prototype, "onMouseup", null);
__decorate([
core.HostListener('document:mousemove', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [MouseEvent]),
__metadata("design:returntype", void 0)
], DragDirective.prototype, "onMousemove", null);
DragDirective = __decorate([
core.Directive({
selector: '[rszDragHandle]'
})
], DragDirective);
return DragDirective;
}());
var NgxResizableModule = /** @class */ (function () {
function NgxResizableModule() {
}
NgxResizableModule = __decorate([
core.NgModule({
imports: [
common.CommonModule
],
declarations: [
ResizableComponent,
DragDirective
],
exports: [
ResizableComponent,
DragDirective
]
})
], NgxResizableModule);
return NgxResizableModule;
}());
exports.NgxResizableModule = NgxResizableModule;
exports.NgxResizableService = NgxResizableService;
exports.ResizableComponent = ResizableComponent;
exports.ɵ0 = ɵ0;
exports.ɵa = NgxResizeableWindowRef;
exports.ɵb = DragDirective;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ngx-resizable-ex.umd.js.map