|
| 1 | +import { |
| 2 | + AfterViewInit, |
| 3 | + Directive, |
| 4 | + ElementRef, |
| 5 | + EventEmitter, |
| 6 | + Input, |
| 7 | + OnChanges, |
| 8 | + OnDestroy, |
| 9 | + OnInit, |
| 10 | + Output, |
| 11 | + SimpleChange |
| 12 | +} from '@angular/core'; |
| 13 | +import { dragula, DragulaService } from 'ng2-dragula'; |
| 14 | + |
| 15 | +@Directive({ |
| 16 | + selector: 'ngx-datatable[dragulaName]' |
| 17 | +}) |
| 18 | +export class DataTableDragulaDirective implements AfterViewInit, OnChanges, OnDestroy, OnInit { |
| 19 | + @Input() public dragulaName: string; |
| 20 | + @Input() public dragulaModel: any; |
| 21 | + @Input() public dragulaClassSelector: string = 'null'; |
| 22 | + @Output() public dragulaDrop: EventEmitter<any> = new EventEmitter<any>(); |
| 23 | + @Output() public dragulaDrag: EventEmitter<any> = new EventEmitter<any>(); |
| 24 | + |
| 25 | + subscriptionDrag: any = null; |
| 26 | + subscriptionDrop: any = null; |
| 27 | + |
| 28 | + protected container: any; |
| 29 | + private drake: any; |
| 30 | + private el: ElementRef; |
| 31 | + private dragulaService: DragulaService; |
| 32 | + |
| 33 | + public constructor(el: ElementRef, dragulaService: DragulaService) { |
| 34 | + this.el = el; |
| 35 | + this.dragulaService = dragulaService; |
| 36 | + } |
| 37 | + |
| 38 | + ngOnInit() { |
| 39 | + } |
| 40 | + |
| 41 | + ngAfterViewInit() { |
| 42 | + if (this.el) { |
| 43 | + let container = this.el; |
| 44 | + |
| 45 | + // Check for the row's parent node: datatable-scroller |
| 46 | + // This is what you want to bind Dragula to, in order to drag sort |
| 47 | + if (container.nativeElement.querySelector('datatable-scroller')) { |
| 48 | + let rowParent = container.nativeElement.querySelector('datatable-scroller'); |
| 49 | + |
| 50 | + // Check if this Dragula already exists |
| 51 | + if (!this.dragulaService.find(this.dragulaName)) { |
| 52 | + |
| 53 | + // Must assign the new rowParent as the container you want to pass to Dragula |
| 54 | + this.container = rowParent; |
| 55 | + this.initializeDragula(); |
| 56 | + } |
| 57 | + } |
| 58 | + } |
| 59 | + } |
| 60 | + |
| 61 | + ngOnChanges(changes: { dragulaModel?: SimpleChange }): void { |
| 62 | + |
| 63 | + // Must update model on any changes |
| 64 | + // Otherwise it will fall out of sync with the 'dragulaModel' |
| 65 | + if (changes && changes.dragulaModel) { |
| 66 | + if (this.drake) { |
| 67 | + if (this.drake.models) { |
| 68 | + let modelIndex = this.drake.models.indexOf(changes.dragulaModel.previousValue); |
| 69 | + this.drake.models.splice(modelIndex, 1, changes.dragulaModel.currentValue); |
| 70 | + } else { |
| 71 | + this.drake.models = [changes.dragulaModel.currentValue]; |
| 72 | + } |
| 73 | + } |
| 74 | + } |
| 75 | + } |
| 76 | + |
| 77 | + ngOnDestroy() { |
| 78 | + |
| 79 | + // Clear this Dragula always |
| 80 | + // comment out if you want to keep it |
| 81 | + if (this.dragulaService.find(this.dragulaName)) { |
| 82 | + this.dragulaService.destroy(this.dragulaName); |
| 83 | + } |
| 84 | + |
| 85 | + // Clear DRAG and DROP subscription to prevent duplicates |
| 86 | + if (this.subscriptionDrag) { |
| 87 | + this.subscriptionDrag.unsubscribe(); |
| 88 | + this.subscriptionDrag = null; |
| 89 | + } |
| 90 | + if (this.subscriptionDrop) { |
| 91 | + this.subscriptionDrop.unsubscribe(); |
| 92 | + this.subscriptionDrop = null; |
| 93 | + } |
| 94 | + } |
| 95 | + |
| 96 | + protected initializeDragula() { |
| 97 | + // console.log('initialized'); |
| 98 | + // Create new Dragula container |
| 99 | + let bag = this.dragulaService.find(this.dragulaName); |
| 100 | + if (bag) { |
| 101 | + this.drake = bag.drake; |
| 102 | + this.checkModel(); |
| 103 | + this.drake.containers.push(this.container); |
| 104 | + } else { |
| 105 | + |
| 106 | + // Check if dragulaClassSelector was specified |
| 107 | + // *true: |
| 108 | + // - the dragulaClassSelector string will be used to match the class of the element clicked |
| 109 | + // - the element with the matching class name will be used to drag the row |
| 110 | + // *false: |
| 111 | + // - no class selector will be used |
| 112 | + // - the whole row will default back to being draggable |
| 113 | + if (this.dragulaClassSelector !== 'null') { |
| 114 | + let classSelector = this.dragulaClassSelector; |
| 115 | + let options = { |
| 116 | + moves: function(el: any, container: any, handle: any) { |
| 117 | + return handle.className === classSelector; |
| 118 | + } |
| 119 | + }; |
| 120 | + this.drake = dragula([this.container], options); |
| 121 | + } else { |
| 122 | + this.drake = dragula([this.container]); |
| 123 | + } |
| 124 | + this.checkModel(); |
| 125 | + this.dragulaService.add(this.dragulaName, this.drake); |
| 126 | + } |
| 127 | + |
| 128 | + // Set DRAG and DROP subscriptions and callbacks |
| 129 | + this.subscriptionDrag = this.dragulaService.drag.subscribe((value: any) => { |
| 130 | + this.drag(value.slice(1)); |
| 131 | + }); |
| 132 | + this.subscriptionDrop = this.dragulaService.drop.subscribe((value: any) => { |
| 133 | + const [bagName, el, target, source] = value; |
| 134 | + |
| 135 | + this.onDropModel(value.slice(1)); |
| 136 | + }); |
| 137 | + } |
| 138 | + |
| 139 | + private checkModel() { |
| 140 | + if (this.dragulaModel) { |
| 141 | + if (this.drake.models) { |
| 142 | + this.drake.models.push(this.dragulaModel); |
| 143 | + } else { |
| 144 | + this.drake.models = [this.dragulaModel]; |
| 145 | + } |
| 146 | + } |
| 147 | + } |
| 148 | + |
| 149 | + private drag(args: any) { |
| 150 | + let [e, el] = args; |
| 151 | + // Todo: not implemented |
| 152 | + } |
| 153 | + |
| 154 | + private onDropModel(args: any) { |
| 155 | + let [el, target, source] = args; |
| 156 | + |
| 157 | + // Added emitter on any DROP action |
| 158 | + // console.log('EMITTER', args); |
| 159 | + this.dragulaDrop.emit(this.dragulaModel); |
| 160 | + } |
| 161 | +} |
0 commit comments