1
+ 'use strict' ;
2
+
3
+ var _typeof = typeof Symbol === "function" && typeof Symbol . iterator === "symbol" ? function ( obj ) { return typeof obj ; } : function ( obj ) { return obj && typeof Symbol === "function" && obj . constructor === Symbol && obj !== Symbol . prototype ? "symbol" : typeof obj ; } ;
4
+
5
+ ( function ( ) {
6
+ "use strict" ;
7
+
8
+ function buildDraggable ( Sortable ) {
9
+ function removeNode ( node ) {
10
+ node . parentElement . removeChild ( node ) ;
11
+ }
12
+
13
+ function insertNodeAt ( fatherNode , node , position ) {
14
+ if ( position < fatherNode . children . length ) {
15
+ fatherNode . insertBefore ( node , fatherNode . children [ position ] ) ;
16
+ } else {
17
+ fatherNode . appendChild ( node ) ;
18
+ }
19
+ }
20
+
21
+ function computeVmIndex ( vnodes , element ) {
22
+ return vnodes . map ( function ( elt ) {
23
+ return elt . elm ;
24
+ } ) . indexOf ( element ) ;
25
+ }
26
+
27
+ function updatePosition ( collection , oldIndex , newIndex ) {
28
+ if ( collection ) {
29
+ collection . splice ( newIndex , 0 , collection . splice ( oldIndex , 1 ) [ 0 ] ) ;
30
+ }
31
+ }
32
+
33
+ function _computeIndexes ( slots , children ) {
34
+ return Array . prototype . map . call ( children , function ( elt ) {
35
+ return computeVmIndex ( slots , elt ) ;
36
+ } ) ;
37
+ }
38
+
39
+ function merge ( target , source ) {
40
+ var output = Object ( target ) ;
41
+ for ( var nextKey in source ) {
42
+ if ( source . hasOwnProperty ( nextKey ) ) {
43
+ output [ nextKey ] = source [ nextKey ] ;
44
+ }
45
+ }
46
+ return output ;
47
+ }
48
+
49
+ function emit ( evtName , evtData ) {
50
+ this . $emit ( evtName . toLowerCase ( ) , evtData ) ;
51
+ }
52
+
53
+ function delegateAndEmit ( evtName ) {
54
+ var _this = this ;
55
+
56
+ return function ( evtData ) {
57
+ _this [ 'onDrag' + evtName ] ( evtData ) ;
58
+ emit . call ( _this , evtName , evtData ) ;
59
+ } ;
60
+ }
61
+
62
+ var props = {
63
+ options : Object ,
64
+ list : {
65
+ type : Array ,
66
+ required : false ,
67
+ default : null
68
+ }
69
+ } ;
70
+
71
+ var draggableComponent = {
72
+ props : props ,
73
+
74
+ render : function render ( h ) {
75
+ return h ( 'div' , null , this . $slots . default ) ;
76
+ } ,
77
+ mounted : function mounted ( ) {
78
+ var _this2 = this ;
79
+
80
+ var optionsAdded = { } ;
81
+ [ 'Start' , 'Add' , 'Remove' , 'Update' , 'End' ] . forEach ( function ( elt ) {
82
+ optionsAdded [ 'on' + elt ] = delegateAndEmit . call ( _this2 , elt ) ;
83
+ } ) ;
84
+
85
+ [ 'Choose' , 'Sort' , 'Filter' , 'Move' , 'Clone' ] . forEach ( function ( elt ) {
86
+ optionsAdded [ 'on' + elt ] = emit . bind ( _this2 , elt ) ;
87
+ } ) ;
88
+
89
+ var options = merge ( this . options , optionsAdded ) ;
90
+ this . _sortable = new Sortable ( this . $el , options ) ;
91
+ this . computeIndexes ( ) ;
92
+ } ,
93
+ beforeDestroy : function beforeDestroy ( ) {
94
+ this . _sortable . destroy ( ) ;
95
+ } ,
96
+ updated : function updated ( ) {
97
+ this . computeIndexes ( ) ;
98
+ } ,
99
+
100
+
101
+ methods : {
102
+ computeIndexes : function computeIndexes ( ) {
103
+ var _this3 = this ;
104
+
105
+ this . $nextTick ( function ( ) {
106
+ _this3 . visibleIndexes = _computeIndexes ( _this3 . $slots . default , _this3 . $el . children ) ;
107
+ } ) ;
108
+ } ,
109
+ onDragStart : function onDragStart ( evt ) {
110
+ if ( ! this . list ) {
111
+ return ;
112
+ }
113
+ var currentIndex = computeVmIndex ( this . $slots . default , evt . item ) ;
114
+ var element = this . list [ currentIndex ] ;
115
+ this . context = {
116
+ currentIndex : currentIndex ,
117
+ element : element
118
+ } ;
119
+ evt . item . _underlying_vm_ = element ;
120
+ } ,
121
+ onDragAdd : function onDragAdd ( evt ) {
122
+ var element = evt . item . _underlying_vm_ ;
123
+ if ( ! this . list || element === undefined ) {
124
+ return ;
125
+ }
126
+ removeNode ( evt . item ) ;
127
+ var indexes = this . visibleIndexes ;
128
+ var domNewIndex = evt . newIndex ;
129
+ var numberIndexes = indexes . length ;
130
+ var newIndex = domNewIndex > numberIndexes - 1 ? numberIndexes : indexes [ domNewIndex ] ;
131
+ this . list . splice ( newIndex , 0 , element ) ;
132
+ this . computeIndexes ( ) ;
133
+ } ,
134
+ onDragRemove : function onDragRemove ( evt ) {
135
+ if ( ! this . list ) {
136
+ return ;
137
+ }
138
+ insertNodeAt ( this . $el , evt . item , evt . oldIndex ) ;
139
+ var isCloning = ! ! evt . clone ;
140
+ if ( isCloning ) {
141
+ removeNode ( evt . clone ) ;
142
+ return ;
143
+ }
144
+ var oldIndex = this . context . currentIndex ;
145
+ this . list . splice ( oldIndex , 1 ) ;
146
+ } ,
147
+ onDragUpdate : function onDragUpdate ( evt ) {
148
+ if ( ! this . list ) {
149
+ return ;
150
+ }
151
+ removeNode ( evt . item ) ;
152
+ insertNodeAt ( evt . from , evt . item , evt . oldIndex ) ;
153
+ var oldIndexVM = this . context . currentIndex ;
154
+ var newIndexVM = this . visibleIndexes [ evt . newIndex ] ;
155
+ updatePosition ( this . list , oldIndexVM , newIndexVM ) ;
156
+ } ,
157
+ onDragEnd : function onDragEnd ( evt ) {
158
+ this . computeIndexes ( ) ;
159
+ }
160
+ }
161
+ } ;
162
+
163
+ return draggableComponent ;
164
+ }
165
+
166
+ if ( typeof exports == "object" ) {
167
+ var Sortable = require ( "sortablejs" )
168
+ module . exports = buildDraggable ( Sortable )
169
+ } else if ( typeof define == "function" && define . amd ) {
170
+ define ( [ 'Sortable' ] , function ( Sortable ) { return buildDraggable ( Sortable ) ; } ) ;
171
+ } else if ( window && ( window . Vue ) && ( window . Sortable ) ) {
172
+ var draggable = buildDraggable ( window . Sortable )
173
+ Vue . component ( 'draggable' , draggable )
174
+ }
175
+ } ) ( ) ;
0 commit comments