ng2-bootstrap
Version:
Native Angular Bootstrap Components
176 lines • 7.84 kB
JavaScript
import { Component, Input, Output, EventEmitter, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { DraggableItemService } from './draggable-item.service';
/* tslint:disable */
/* tslint:enable */
export var SortableComponent = (function () {
function SortableComponent(transfer) {
var _this = this;
/** class name for items wrapper */
this.wrapperClass = '';
/** style object for items wrapper */
this.wrapperStyle = {};
/** class name for item */
this.itemClass = '';
/** style object for item */
this.itemStyle = {};
/** class name for active item */
this.itemActiveClass = '';
/** style object for active item */
this.itemActiveStyle = {};
/** class name for placeholder */
this.placeholderClass = '';
/** style object for placeholder */
this.placeholderStyle = {};
/** placeholder item which will be shown if collection is empty */
this.placeholderItem = '';
/** fired on array change (reordering, insert, remove), same as <code>ngModelChange</code>.
* Returns new items collection as a payload.
*/
this.onChange = new EventEmitter();
this.showPlaceholder = false;
this.activeItem = -1;
this.onTouched = Function.prototype;
this.onChanged = Function.prototype;
this.transfer = transfer;
this.currentZoneIndex = SortableComponent.globalZoneIndex++;
this.transfer.onCaptureItem()
.subscribe(function (item) { return _this.onDrop(item); });
}
Object.defineProperty(SortableComponent.prototype, "items", {
get: function () {
return this._items;
},
set: function (value) {
this._items = value;
var out = this.items.map(function (x) { return x.initData; });
this.onChanged(out);
this.onChange.emit(out);
},
enumerable: true,
configurable: true
});
SortableComponent.prototype.onItemDragstart = function (event, item, i) {
this.initDragstartEvent(event);
this.onTouched();
this.transfer.dragStart({
event: event,
item: item,
i: i,
initialIndex: i,
lastZoneIndex: this.currentZoneIndex,
overZoneIndex: this.currentZoneIndex
});
};
SortableComponent.prototype.onItemDragover = function (event, i) {
if (!this.transfer.getItem()) {
return;
}
event.preventDefault();
var dragItem = this.transfer.captureItem(this.currentZoneIndex, this.items.length);
var newArray = [];
if (!this.items.length) {
newArray = [dragItem.item];
}
else if (dragItem.i > i) {
newArray = this.items.slice(0, i).concat([
dragItem.item
], this.items.slice(i, dragItem.i), this.items.slice(dragItem.i + 1));
}
else {
newArray = this.items.slice(0, dragItem.i).concat(this.items.slice(dragItem.i + 1, i + 1), [
dragItem.item
], this.items.slice(i + 1));
}
this.items = newArray;
dragItem.i = i;
this.activeItem = i;
this.updatePlaceholderState();
};
SortableComponent.prototype.cancelEvent = function (event) {
if (!this.transfer.getItem() || !event) {
return;
}
event.preventDefault();
};
SortableComponent.prototype.onDrop = function (item) {
if (item &&
item.overZoneIndex !== this.currentZoneIndex &&
item.lastZoneIndex === this.currentZoneIndex) {
this.items = this.items.filter(function (x, i) { return i !== item.i; });
this.updatePlaceholderState();
}
this.resetActiveItem(undefined);
};
SortableComponent.prototype.resetActiveItem = function (event) {
this.cancelEvent(event);
this.activeItem = -1;
};
SortableComponent.prototype.registerOnChange = function (callback) {
this.onChanged = callback;
};
SortableComponent.prototype.registerOnTouched = function (callback) {
this.onTouched = callback;
};
SortableComponent.prototype.writeValue = function (value) {
var _this = this;
if (value) {
this.items = value.map(function (x, i) { return ({
id: i,
initData: x,
value: _this.fieldName ? x[_this.fieldName] : x
}); });
}
else {
this.items = [];
}
this.updatePlaceholderState();
};
SortableComponent.prototype.updatePlaceholderState = function () {
this.showPlaceholder = !this._items.length;
};
SortableComponent.prototype.getItemStyle = function (isActive) {
return isActive
? Object.assign({}, this.itemStyle, this.itemActiveStyle)
: this.itemStyle;
};
SortableComponent.prototype.initDragstartEvent = function (event) {
// it is necessary for mozilla
// data type should be 'Text' instead of 'text/plain' to keep compatibility
// with IE
event.dataTransfer.setData('Text', 'placeholder');
};
SortableComponent.globalZoneIndex = 0;
SortableComponent.decorators = [
{ type: Component, args: [{
selector: 'bs-sortable',
exportAs: 'bs-sortable',
template: "\n<div\n [ngClass]=\"wrapperClass\"\n [ngStyle]=\"wrapperStyle\"\n [ngStyle]=\"wrapperStyle\"\n (dragover)=\"cancelEvent($event)\"\n (dragenter)=\"cancelEvent($event)\"\n (drop)=\"resetActiveItem($event)\"\n (mouseleave)=\"resetActiveItem($event)\">\n <div\n *ngIf=\"showPlaceholder\"\n [ngClass]=\"placeholderClass\"\n [ngStyle]=\"placeholderStyle\"\n (dragover)=\"onItemDragover($event, 0)\"\n (dragenter)=\"cancelEvent($event)\"\n >{{placeholderItem}}</div>\n <div\n *ngFor=\"let item of items; let i=index;\"\n [ngClass]=\"[ itemClass, i === activeItem ? itemActiveClass : '' ]\"\n [ngStyle]=\"getItemStyle(i === activeItem)\"\n draggable=\"true\"\n (dragstart)=\"onItemDragstart($event, item, i)\"\n (dragend)=\"resetActiveItem($event)\"\n (dragover)=\"onItemDragover($event, i)\"\n (dragenter)=\"cancelEvent($event)\"\n ><template [ngTemplateOutlet]=\"itemTemplate || defItemTemplate\"\n [ngOutletContext]=\"{item:item, index: i}\"></template></div>\n</div>\n\n<template #defItemTemplate let-item=\"item\">{{item.value}}</template> \n",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(function () { return SortableComponent; }),
multi: true
}],
},] },
];
/** @nocollapse */
SortableComponent.ctorParameters = function () { return [
{ type: DraggableItemService, },
]; };
SortableComponent.propDecorators = {
'fieldName': [{ type: Input },],
'wrapperClass': [{ type: Input },],
'wrapperStyle': [{ type: Input },],
'itemClass': [{ type: Input },],
'itemStyle': [{ type: Input },],
'itemActiveClass': [{ type: Input },],
'itemActiveStyle': [{ type: Input },],
'placeholderClass': [{ type: Input },],
'placeholderStyle': [{ type: Input },],
'placeholderItem': [{ type: Input },],
'itemTemplate': [{ type: Input },],
'onChange': [{ type: Output },],
};
return SortableComponent;
}());
//# sourceMappingURL=sortable.component.js.map