ap-angular-sortablejs
Version:
SortableJS for Angular 2+
141 lines • 5.95 kB
JavaScript
import { Directive, ElementRef, Input, NgZone } from '@angular/core';
import { SortablejsService } from './sortablejs.service';
import { SortablejsModule } from './sortablejs.module';
import * as Sortable from 'sortablejs/Sortable.min';
var SortablejsDirective = (function () {
function SortablejsDirective(sortablejsService, element, zone) {
this.sortablejsService = sortablejsService;
this.element = element;
this.zone = zone;
this.runInsideAngular = false;
}
SortablejsDirective.prototype.ngOnInit = function () {
var _this = this;
if (this.runInsideAngular) {
this._sortable = new Sortable(this.element.nativeElement, this.options);
}
else {
this.zone.runOutsideAngular(function () {
_this._sortable = new Sortable(_this.element.nativeElement, _this.options);
});
}
};
SortablejsDirective.prototype.ngOnChanges = function (changes) {
var _this = this;
var optionsChange = changes['inputOptions'];
if (optionsChange && !optionsChange.isFirstChange()) {
var previousOptions_1 = optionsChange.previousValue;
var currentOptions_1 = optionsChange.currentValue;
Object.keys(currentOptions_1).forEach(function (optionName) {
if (currentOptions_1[optionName] !== previousOptions_1[optionName]) {
// use low-level option setter
_this._sortable.option(optionName, currentOptions_1[optionName]);
}
});
}
};
SortablejsDirective.prototype.ngOnDestroy = function () {
this._sortable.destroy();
};
Object.defineProperty(SortablejsDirective.prototype, "options", {
get: function () {
return Object.assign({}, SortablejsModule._globalOptions, this.inputOptions, this.overridenOptions);
},
enumerable: true,
configurable: true
});
SortablejsDirective.prototype.proxyEvent = function (eventName, event) {
if (this.inputOptions && this.inputOptions[eventName]) {
this.inputOptions[eventName](event);
}
};
Object.defineProperty(SortablejsDirective.prototype, "bindingEnabled", {
// returns whether the items are currently set
get: function () {
return !!this.items;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortablejsDirective.prototype, "isItemsFormArray", {
// we need this to identify that the input is a FormArray
// we don't want to have a dependency on @angular/forms just for that
get: function () {
// just checking for random FormArray methods not available on a standard array
return !!this.items.at && !!this.items.insert && !!this.items.reset;
},
enumerable: true,
configurable: true
});
Object.defineProperty(SortablejsDirective.prototype, "overridenOptions", {
get: function () {
var _this = this;
// always intercept standard events but act only in case items are set (bindingEnabled)
// allows to forget about tracking this.items changes
return {
onAdd: function (event) {
if (_this.bindingEnabled) {
_this.sortablejsService.onremove = function (item) {
if (_this.isItemsFormArray) {
_this.items.insert(event.newIndex, item);
}
else {
_this.items.splice(event.newIndex, 0, item);
}
};
}
_this.proxyEvent('onAdd', event);
},
onRemove: function (event) {
if (_this.bindingEnabled) {
var item = void 0;
if (_this.isItemsFormArray) {
item = _this.items.at(event.oldIndex);
_this.items.removeAt(event.oldIndex);
}
else {
item = _this.items.splice(event.oldIndex, 1)[0];
}
_this.sortablejsService.onremove(item);
_this.sortablejsService.onremove = null;
}
_this.proxyEvent('onRemove', event);
},
onUpdate: function (event) {
if (_this.bindingEnabled) {
if (_this.isItemsFormArray) {
var relocated = _this.items.at(event.oldIndex);
_this.items.removeAt(event.oldIndex);
_this.items.insert(event.newIndex, relocated);
}
else {
_this.items.splice(event.newIndex, 0, _this.items.splice(event.oldIndex, 1)[0]);
}
}
_this.proxyEvent('onUpdate', event);
}
};
},
enumerable: true,
configurable: true
});
return SortablejsDirective;
}());
export { SortablejsDirective };
SortablejsDirective.decorators = [
{ type: Directive, args: [{
selector: '[sortablejs]'
},] },
];
/** @nocollapse */
SortablejsDirective.ctorParameters = function () { return [
{ type: SortablejsService, },
{ type: ElementRef, },
{ type: NgZone, },
]; };
SortablejsDirective.propDecorators = {
'items': [{ type: Input, args: ['sortablejs',] },],
'inputOptions': [{ type: Input, args: ['sortablejsOptions',] },],
'runInsideAngular': [{ type: Input },],
};
//# sourceMappingURL=sortablejs.directive.js.map