nxt-sortablejs
Version:
Angular sortablejs bindings.
250 lines (241 loc) • 10.7 kB
JavaScript
import * as i0 from '@angular/core';
import { InjectionToken, Injectable, EventEmitter, Directive, Optional, Inject, Input, Output, NgModule } from '@angular/core';
import Sortable from 'sortablejs';
/** @internal */
const GLOBALS = new InjectionToken('Global config for sortablejs');
/** @internal */
function isFormArray(target) {
// we need this to identify that the target is a FormArray
// we don't want to have a dependency on @angular/forms just for that
// just checking for random FormArray methods not available on a standard array
return !!target.at && !!target.insert && !!target.reset;
}
/** @internal */
class SortablejsBinding {
constructor(target) {
this.target = target;
}
insert(index, item) {
if (isFormArray(this.target)) {
this.target.insert(index, item);
}
else {
this.target.splice(index, 0, item);
}
}
get(index) {
return isFormArray(this.target) ? this.target.at(index) : this.target[index];
}
remove(index) {
let item;
if (isFormArray(this.target)) {
item = this.target.at(index);
this.target.removeAt(index);
}
else {
item = this.target.splice(index, 1)[0];
}
return item;
}
}
/** @internal */
class SortablejsBindings {
constructor(bindingTargets) {
this.bindings = bindingTargets.map(target => new SortablejsBinding(target));
}
injectIntoEvery(index, items) {
this.bindings.forEach((b, i) => b.insert(index, items[i]));
}
getFromEvery(index) {
return this.bindings.map(b => b.get(index));
}
extractFromEvery(index) {
return this.bindings.map(b => b.remove(index));
}
get provided() {
return !!this.bindings.length;
}
}
/** @internal */
class SortablejsService {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortablejsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortablejsService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortablejsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class SortablejsDirective {
constructor(globalConfig, service, element, zone, renderer) {
this.globalConfig = globalConfig;
this.service = service;
this.element = element;
this.zone = zone;
this.renderer = renderer;
/** Initialised a new Sortablejs instance */
this.init = new EventEmitter();
}
/** @internal */
ngAfterViewInit() {
if (Sortable?.create) { // Sortable does not exist in angular universal (SSR)
this.create();
}
}
/** @internal */
ngOnChanges(changes) {
const optionsChange = changes.config;
if (optionsChange && !optionsChange.isFirstChange()) {
const previousOptions = optionsChange.previousValue;
const currentOptions = optionsChange.currentValue;
Object.keys(currentOptions).forEach(optionName => {
if (currentOptions[optionName] !== previousOptions[optionName]) {
// use low-level option setter
this.sortableInstance?.option(optionName, this.options[optionName]);
}
});
}
}
/** @internal */
ngOnDestroy() {
if (this.sortableInstance) {
this.sortableInstance.destroy();
}
}
create() {
const container = this.sortablejsContainer ? this.element.nativeElement.querySelector(this.sortablejsContainer) : this.element.nativeElement;
setTimeout(() => {
if (typeof window != 'undefined') {
this.sortableInstance = Sortable.create(container, this.options);
this.init.emit(this.sortableInstance);
}
}, 0);
}
getBindings() {
if (!this.data) {
return new SortablejsBindings([]);
}
else if (this.data instanceof SortablejsBindings) {
return this.data;
}
else {
return new SortablejsBindings([this.data]);
}
}
get options() {
return { ...this.optionsWithoutEvents, ...this.overridenOptions };
}
get optionsWithoutEvents() {
return { ...(this.globalConfig || {}), ...(this.config || {}) };
}
proxyEvent(eventName, ...params) {
this.zone.run(() => {
if (this.optionsWithoutEvents?.[eventName]) {
this.optionsWithoutEvents[eventName](...params);
}
});
}
get isCloning() {
const groupOptions = this.sortableInstance?.options.group;
return groupOptions && (typeof groupOptions != 'string')
? groupOptions.checkPull?.(this.sortableInstance, this.sortableInstance, null, null) === 'clone'
: groupOptions === 'clone';
}
clone(item) {
// by default pass the item through, no cloning performed
return (this.cloneFunction || (subitem => subitem))(item);
}
get overridenOptions() {
// always intercept standard events but act only in case items are set (bindingEnabled)
// allows to forget about tracking this.items changes
return {
onAdd: (event) => {
this.service.transfer = (items) => {
this.getBindings().injectIntoEvery(event.newIndex, items);
this.proxyEvent('onAdd', event);
};
this.proxyEvent('onAddOriginal', event);
},
onRemove: (event) => {
const bindings = this.getBindings();
if (bindings.provided) {
if (this.isCloning) {
this.service.transfer?.(bindings.getFromEvery(event.oldIndex).map(item => this.clone(item)));
// great thanks to https://github.com/tauu
// event.item is the original item from the source list which is moved to the target list
// event.clone is a clone of the original item and will be added to source list
// If bindings are provided, adding the item dom element to the target list causes artifacts
// as it interferes with the rendering performed by the angular template.
// Therefore we remove it immediately and also move the original item back to the source list.
// (event handler may be attached to the original item and not its clone, therefore keeping
// the original dom node, circumvents side effects )
this.renderer.removeChild(event.item.parentNode, event.item);
this.renderer.insertBefore(event.clone.parentNode, event.item, event.clone);
this.renderer.removeChild(event.clone.parentNode, event.clone);
}
else {
this.service.transfer?.(bindings.extractFromEvery(event.oldIndex));
}
this.service.transfer = undefined;
}
this.proxyEvent('onRemove', event);
},
onUpdate: (event) => {
const bindings = this.getBindings();
bindings.injectIntoEvery(event.newIndex, bindings.extractFromEvery(event.oldIndex));
this.proxyEvent('onUpdate', event);
}
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortablejsDirective, deps: [{ token: GLOBALS, optional: true }, { token: SortablejsService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.6", type: SortablejsDirective, isStandalone: false, selector: "[nxtSortablejs]", inputs: { data: ["nxtSortablejs", "data"], sortablejsContainer: "sortablejsContainer", config: "config", cloneFunction: "cloneFunction" }, outputs: { init: "init" }, usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortablejsDirective, decorators: [{
type: Directive,
args: [{
selector: '[nxtSortablejs]',
standalone: false
}]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [GLOBALS]
}] }, { type: SortablejsService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { data: [{
type: Input,
args: ['nxtSortablejs']
}], sortablejsContainer: [{
type: Input
}], config: [{
type: Input
}], cloneFunction: [{
type: Input
}], init: [{
type: Output
}] } });
class SortablejsModule {
static forRoot(globalOptions) {
return {
ngModule: SortablejsModule,
providers: [
{ provide: GLOBALS, useValue: globalOptions }
]
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortablejsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: SortablejsModule, declarations: [SortablejsDirective], exports: [SortablejsDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortablejsModule }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SortablejsModule, decorators: [{
type: NgModule,
args: [{
declarations: [SortablejsDirective],
exports: [SortablejsDirective]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SortablejsDirective, SortablejsModule };
//# sourceMappingURL=nxt-sortablejs.mjs.map