https://creer-sa-boite-en-alsace.fr/admin/inc/js/mod/drag/DragItem.js

1import { DragObject } from "./DragObject.js";
2import { DragTargetZone } from "./DragTargetZone.js";
3import { DragBeginEvent } from "./event/DragBeginEvent.js";
4import { DragDeleteEvent } from "./event/DragDeleteEvent.js";
5import { DragDropEvent } from "./event/DragDropEvent.js";
6
7export class DragItem extends DragObject {
8    constructor(domElement, selector, options) {
9        super(domElement, selector, $.extend({
10            hideOnDrag: false,
11            canDelete: false,
12            filterSibling: null,
13            disableGhost: false,
14            externalDrag: false,
15            ghostElementBuilder: null,
16        }, options || {}));
17        domElement.item = this;
18
19        this.__ghostElement = null;
20        this.__dropConditions = [];
21        this.__onMouseDownCallback = null;
22
23        this.__dragging = false;
24    }
25
26    isHybrid() {
27        return this.getDomElement().targetZone instanceof DragTargetZone;
28    }
29
30    shouldHideOnDrag() {
31        return this.options().hideOnDrag;
32    }
33
34    canDelete() {
35        return this.options().canDelete;
36    }
37
38    delete() {
39        if (this.canDelete()) {
40            this.getEventTarget().dispatchEvent(new DragDeleteEvent(this));
41        }
42    }
43
44    getTargetZone() {
45        let domElement = this.getDomElement();
46        if (!domElement) return null;
47
48        let parentElement = domElement.parentElement;
49        if (!parentElement) return null;
50
51        let targetZoneElement = parentElement.closest('.drag-targetzone');
52        if (!targetZoneElement || !targetZoneElement.targetZone) return null;
53
54        if (!targetZoneElement.targetZone) return null;
55        if (targetZoneElement.targetZone.getDragService() !== this.getDragService()) return null;
56
57        return targetZoneElement.targetZone;
58    }
59
60    getTargetZoneIndex() {
61        let targetZone = this.getTargetZone();
62        if (!targetZone) return null;
63
64        let index = targetZone.getChildren().findIndex((child) => child == this);
65
66        return index > -1 ? index : null;
67    }
68
69    getDeepLevel() {
70        let level = null;
71        let targetZone = this.getTargetZone();
72
73        if (targetZone) {
74            level = 0;
75            if (targetZone.isHybrid() && targetZone.getDomElement().item) {
76                level = targetZone.getDomElement().getDeepLevel() + 1;
77            }
78        }
79
80        return level;
81    }
82
83    enable() {
84        if (this.__onMouseDownCallback) return;
85
86        this.__onMouseDownCallback = (e) => {
87            if (e.which != 1) return;
88
89            let targetElement = e.target;
90            if (_.isElementFocusable(targetElement)) {
91                return;
92            }
93
94            if (_.hasEventAction(e, 'beginDrag') || _.hasEventAction(e, 'preventDrag')) return;
95
96            _.logEventAction(e, 'beginDrag');
97

98            let cursorPos = _.eventXY(e);
99
100            this.getEventTarget().dispatchEvent(new DragBeginEvent(this, cursorPos));
101        };
102
103        if (this.getSelector()) {
104            $(this.getDomElement()).find(this.getSelector()).addClass('drag-grip');
105            $(this.getDomElement()).on('mousedown', this.getSelector(), this.__onMouseDownCallback);
106        } else {
107            $(this.getDomElement()).addClass('drag-grip');
108            $(this.getDomElement()).bind('mousedown', this.__onMouseDownCallback);
109        }
110    }
111
112    disable() {
113        if (!this.__onMouseDownCallback) return;
114
115        if (this.getSelector()) {
116            $(this.getDomElement()).find(this.getSelector()).removeClass('drag-grip');
117        } else {
118            $(this.getDomElement()).removeClass('drag-grip');
119        }
120
121        $(this.getDomElement()).off('mousedown', this.__onMouseDownCallback);
122
123        this.__onMouseDownCallback = null;
124    }
125
126    getGhostElement() {
127        if (null === this.__ghostElement) {
128            let ghostElement = _.ce('div', 'dragging-item-ghost');
129
130            if (this.canDelete()) {
131                $(ghostElement).append($(_.ce('div', 'dragging-item-ghost-trash')).append(_.ce('i', 'i-trash')));
132            }
133
134            let innerGhostElement = this._buildGhostElement();
135            $(innerGhostElement).addClass('dragging-item-ghost-inner');
136            $(ghostElement).append(innerGhostElement);
137
138            this.__ghostElement = ghostElement;
139        }
140
141        if (this.options().disableGhost) {
142            $(this.__ghostElement).hide();
143        } else {
144            $(this.__ghostElement).show();
145        }
146
147        return this.__ghostElement;
148    }
149
150    removeGhostElement() {
151        if (this.__ghostElement) {
152            $(this.__ghostElement).remove();
153            this.__ghostElement = null;
154        }
155    }
156
157    _buildGhostElement() {
158        if (this.options().ghostElementBuilder) {
159			return this.options().ghostElementBuilder();
160		}
161        return $(this.getDomElement()).clone().get(0);
162    }
163
164    isDragging() {
165        return this.__dragging;
166    }
167
168    setDragging(dragging) {
169        this.__dragging = dragging;
170
171        if (dragging) {
172            $(this.getDomElement()).addClass('dragging');
173        } else {
174            $(this.getDomElement()).removeClass('dragging');
175            $(this.getDomElement()).addClass('was-dragging');
176            $('body').addClass('dragservice-was-dragging');
177            setTimeout(
178                () => {
179                    $(this.getDomElement()).removeClass('was-dragging');
180                    $('body').removeClass('dragservice-was-dragging');
181                }
182            , 250);
183        }
184    }
185
186    /**
187     *
188     * @param {DragTargetZone} targetZone
189     * @returns {Boolean}
190     */
191    canDrop(targetZone, index) {
192        let canDrop = true;
193
194        for (let condition of this.__dropConditions) {
195            if (!condition(this, targetZone, index)) {
196                canDrop = false;
197            } else {
198                return true;
199            }
200        }
201
202        return canDrop;
203    }
204
205    addDropCondition(dropCondition) {
206        this.__dropConditions.push(dropCondition);
207    }
208
209    /**
210     *
211     * @param {DragTargetZone} targetZone
212     * @returns {Boolean}
213     */
214    drop(targetZone, index) {
215        return targetZone.receive(this, index);
216    }
217
218    /**
219     *
220     * @param {DragTargetZone} targetZone
221     */
222    _doDrop(targetZone, index, data) {
223        this.getEventTarget().dispatchEvent(new DragDropEvent(targetZone, this, index, data));
224    }
225}