ngx-sort
Version:
An angular 4 and above component for sorting list supporting drag and drop sort.
82 lines • 5.79 kB
JavaScript
import { Component, Input, Output, ContentChild, EventEmitter, TemplateRef } from '@angular/core';
var NgxSortableComponent = /** @class */ (function () {
function NgxSortableComponent() {
this.active = true;
this.listStyle = {
height: '250px',
width: '300px',
dropZoneHeight: '50px'
};
this.listSorted = new EventEmitter();
this.draggedIndex = -1;
this.onDragOverIndex = -1;
console.log('Intializing...');
}
NgxSortableComponent.prototype.selectItem = function (item) {
this.selectedItem = item;
};
NgxSortableComponent.prototype.moveUp = function () {
var index = this.items.indexOf(this.selectedItem);
if (index === 0) {
return;
}
this.swapElements(index, index - 1);
this.listSorted.emit(this.items);
};
NgxSortableComponent.prototype.moveDown = function () {
var index = this.items.indexOf(this.selectedItem);
if (index === this.items.length - 1) {
return;
}
this.swapElements(index, index + 1);
this.listSorted.emit(this.items);
};
NgxSortableComponent.prototype.onDrop = function ($event, index) {
// index is of the element on which the item is dropped
this.handleDrop(index);
};
NgxSortableComponent.prototype.allowDrop = function ($event, index) {
// index is of the item on which the item is currently hovered
this.onDragOverIndex = index;
$event.preventDefault();
};
NgxSortableComponent.prototype.onDragStart = function ($event, index) {
if (!this.active) {
$event.preventDefault();
}
this.draggedIndex = index;
};
NgxSortableComponent.prototype.handleDrop = function (droppedIndex) {
var item = this.items[this.draggedIndex];
this.items.splice(this.draggedIndex, 1);
this.items.splice(droppedIndex, 0, item);
this.draggedIndex = -1;
this.onDragOverIndex = -1;
this.listSorted.emit(this.items);
};
NgxSortableComponent.prototype.swapElements = function (oldIndex, newIndex) {
var temp = this.items[oldIndex];
this.items[oldIndex] = this.items[newIndex];
this.items[newIndex] = temp;
};
NgxSortableComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-sortable',
template: "\n <div class=\"sortable-container\" [style.width]='listStyle.width'>\n <div class=\"sortable-header\">\n <label class=\"sortable-name\">{{name}}</label>\n <div class=\"sortable-buttons\" *ngIf=\"active\">\n <button (click)=\"moveUp()\" [disabled]=\"!selectedItem\" title=\"Move Up\">⇧</button>\n <button (click)=\"moveDown()\" [disabled]=\"!selectedItem\" title=\"Move Down\">⇩</button>\n </div>\n </div>\n <ul class=\"sortable-list\" [style.height]='listStyle.height'>\n <li [draggable]=\"active\" (click)=\"selectItem(item)\" *ngFor=\"let item of items; let i = index;\" [ngClass]=\"{'active': item == selectedItem}\"\n (drop)=\"onDrop($event, i)\" (dragover)=\"allowDrop($event,i)\" (dragstart)=\"onDragStart($event, i)\">\n <div class=\"drop-zone\" [style.height]=\"listStyle.dropZoneHeight\" *ngIf=\"onDragOverIndex == i\">\n </div>\n <ng-template ngFor [ngForOf]=\"[item]\" [ngForTemplate]=\"itemTemplate\">\n </ng-template>\n </li>\n </ul>\n </div>\n ",
styles: ["\n .sortable-container{width:100%;border:1px solid #d9d9d9;border-radius:3px}.sortable-container .sortable-header{width:auto;padding:5px;background:lightgray;border-bottom:1px solid #d9d9d9;height:30px;background-image:linear-gradient(#f6f7f9 0%, #ebedf0 100%);box-sizing:content-box;color:black}.sortable-container .sortable-header .sortable-name{vertical-align:middle;font-size:25px}.sortable-container .sortable-header .sortable-buttons{float:right;height:100%;box-sizing:border-box}.sortable-container .sortable-header .sortable-buttons button{height:30px;width:30px;vertical-align:middle;display:inline-block;box-sizing:border-box;margin-left:5px;border:1px solid #2399e5;color:#FFFFFF;background:#2399e5;-webkit-transition:background-color .2s;-moz-transition:background-color .2s;transition:background-color .2s;border-radius:5px;outline:none}.sortable-container .sortable-header .sortable-buttons button:disabled{cursor:not-allowed}.sortable-container .sortable-header .sortable-buttons button:active,.sortable-container .sortable-header .sortable-buttons button:hover{border:1px solid #156090;background:#186ba0;color:#ffffff}.sortable-container .sortable-header .sortable-buttons button:active:enabled,.sortable-container .sortable-header .sortable-buttons button:hover:enabled{cursor:pointer}.sortable-container .sortable-list{list-style-type:none;margin:0;padding:0px;overflow:auto}.sortable-container .sortable-list .drop-zone{height:30px;background:rgba(225,219,250,0.5);opacity:0.5px;border:2px dotted #e1dbfa}.sortable-container .sortable-list .active{background:#3f94e9 !important;color:white}\n "]
},] },
];
/** @nocollapse */
NgxSortableComponent.ctorParameters = function () { return []; };
NgxSortableComponent.propDecorators = {
'active': [{ type: Input },],
'items': [{ type: Input },],
'name': [{ type: Input },],
'listStyle': [{ type: Input },],
'listSorted': [{ type: Output },],
'itemTemplate': [{ type: ContentChild, args: [TemplateRef,] },],
};
return NgxSortableComponent;
}());
export { NgxSortableComponent };
//# sourceMappingURL=ngx-sortable.component.js.map