/
sortableConnector.js
70 lines (59 loc) · 2.52 KB
/
sortableConnector.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Sortable, MultiDrag } from 'sortablejs';
Sortable.mount(new MultiDrag());
window.Vaadin.Flow.sortableConnector = {
initLazy: function (customConfig, c, layout) {
// Check whether the connector was already initialized
if (c.$connector) {
return;
}
c.$connector = {
//// functions
setOption : function(optionName, optionValue) {
this.sortable.options[optionName] = optionValue;
},
clearClone : function() {
this.clonedElements.forEach(clone => {
if (clone.parentNode) {
clone.parentNode.removeChild(clone);
}
});
this.clonedElements = [];
}
};
c.$connector.sortable = Sortable.create(layout, customConfig);
c.$connector.clonedElements = [];
c.$connector.sortable.options.onEnd = function (/**Event*/evt) {
let oldIndexes = [evt.oldIndex];
let newIndexes = [evt.newIndex];
if (evt.newIndicies && evt.oldIndicies && evt.newIndicies.length > 0) {
newIndexes = evt.newIndicies.map(newIndex => newIndex.index);
oldIndexes = evt.oldIndicies.map(oldIndex => oldIndex.index);
}
if (evt.to === evt.from) {
c.$server.onReorderListener(oldIndexes, newIndexes);
} else {
const clone = (evt.pullMode === 'clone');
evt.from.parentElement.$server.onRemoveListener(oldIndexes, clone);
evt.to.parentElement.$server.onAddListener(newIndexes, clone);
if (clone) {
// store the clone(s) generated by the client-side
// and delete later (to avoid the element to disappear/reappear)
if (evt.clone) {
c.$connector.clonedElements = [evt.clone];
} else {
c.$connector.clonedElements = [...evt.clones];
}
}
}
}
c.$connector.sortable.options.onChoose = function (/**Event*/evt) {
c.dispatchEvent(new CustomEvent('on-choose'));
}
c.$connector.sortable.options.onUnchoose = function (/**Event*/evt) {
c.dispatchEvent(new CustomEvent('on-unchoose'));
}
c.$connector.sortable.options.onChange = function (/**Event*/evt) {
c.dispatchEvent(new CustomEvent('on-change'));
}
}
}