ember-sortable 4.0.3 → 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +13 -7
- package/addon-main.js +2 -0
- package/dist/_app_/modifiers/sortable-group.js +1 -0
- package/dist/_app_/modifiers/sortable-handle.js +1 -0
- package/dist/_app_/modifiers/sortable-item.js +1 -0
- package/dist/_app_/services/ember-sortable-internal-state.js +1 -0
- package/dist/_rollupPluginBabelHelpers-839d0adb.js +63 -0
- package/dist/_rollupPluginBabelHelpers-839d0adb.js.map +1 -0
- package/{addon → dist}/modifiers/sortable-group.js +44 -111
- package/dist/modifiers/sortable-group.js.map +1 -0
- package/{addon → dist}/modifiers/sortable-handle.js +9 -3
- package/dist/modifiers/sortable-handle.js.map +1 -0
- package/{addon → dist}/modifiers/sortable-item.js +69 -151
- package/dist/modifiers/sortable-item.js.map +1 -0
- package/{addon/services/ember-sortable.js → dist/services/ember-sortable-internal-state.js} +22 -21
- package/dist/services/ember-sortable-internal-state.js.map +1 -0
- package/{addon → dist}/system/scroll-container.js +8 -7
- package/dist/system/scroll-container.js.map +1 -0
- package/{addon → dist}/system/scroll-parent.js +9 -7
- package/dist/system/scroll-parent.js.map +1 -0
- package/{addon-test-support → dist/test-support}/helpers/drag.js +13 -21
- package/dist/test-support/helpers/drag.js.map +1 -0
- package/{addon-test-support → dist/test-support}/helpers/reorder.js +11 -6
- package/dist/test-support/helpers/reorder.js.map +1 -0
- package/dist/test-support/index.js +5 -0
- package/dist/test-support/index.js.map +1 -0
- package/dist/test-support/utils/keyboard.js +33 -0
- package/dist/test-support/utils/keyboard.js.map +1 -0
- package/{addon-test-support → dist/test-support}/utils/offset.js +5 -3
- package/dist/test-support/utils/offset.js.map +1 -0
- package/dist/utils/constant.js +12 -0
- package/dist/utils/constant.js.map +1 -0
- package/{addon → dist}/utils/coordinate.js +5 -4
- package/dist/utils/coordinate.js.map +1 -0
- package/{addon → dist}/utils/css-calculation.js +5 -3
- package/dist/utils/css-calculation.js.map +1 -0
- package/{addon → dist}/utils/defaults.js +24 -12
- package/dist/utils/defaults.js.map +1 -0
- package/dist/utils/keyboard.js +33 -0
- package/dist/utils/keyboard.js.map +1 -0
- package/package.json +45 -65
- package/.huskyrc +0 -5
- package/CHANGELOG.md +0 -755
- package/CODE_OF_CONDUCT.md +0 -6
- package/MIGRATION_GUIDE_MODIFIERS.md +0 -95
- package/MIGRATION_GUIDE_V2.md +0 -120
- package/Makefile +0 -24
- package/RELEASE.md +0 -60
- package/V2_MIGRATION_RFC.md +0 -1100
- package/addon/utils/constant.js +0 -9
- package/addon/utils/keyboard.js +0 -32
- package/addon-test-support/helpers/index.js +0 -4
- package/addon-test-support/utils/keyboard.js +0 -32
- package/app/modifiers/sortable-group.js +0 -1
- package/app/modifiers/sortable-handle.js +0 -1
- package/app/modifiers/sortable-item.js +0 -1
- package/app/services/ember-sortable-internal-state.js +0 -1
- package/config/environment.js +0 -5
- package/demo.gif +0 -0
- package/index.js +0 -5
package/README.md
CHANGED
|
@@ -14,7 +14,13 @@ Sortable UI primitives for Ember.
|
|
|
14
14
|
|
|
15
15
|
## Requirements
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
| Ember Sortable | Ember | Node |
|
|
18
|
+
|----------------|-------|------|
|
|
19
|
+
| 3.0.0 | 3.24+ | 12+ |
|
|
20
|
+
| 4.0.0 | 3.24+ | 14+ |
|
|
21
|
+
| 5.0.0 | 3.28+ | n/a[^1] |
|
|
22
|
+
|
|
23
|
+
[^1]: Node is not relevant for v2 addons. As of v5.0.0, ember-sortable is a v2 addon. V2 addons don't have to be for browser-only contexts, but ember-sortable is -- so node is not relevant anymore. This is different from v1 addons, which are not browser libraries, but node programs that happen emit browser code to the consuming app at app-build time.
|
|
18
24
|
|
|
19
25
|
## Installation
|
|
20
26
|
|
|
@@ -339,20 +345,20 @@ and returns a `string` constructed from the `config`.
|
|
|
339
345
|
- [`reorder`][reorder]: Reorders elements to the specified state.
|
|
340
346
|
- [`keyboard`][keyboard]: Keycode constants for quick.
|
|
341
347
|
|
|
342
|
-
[drag]: addon
|
|
343
|
-
[reorder]: addon
|
|
344
|
-
[keyboard]: addon
|
|
348
|
+
[drag]: addon/src/test-support/helpers/drag.js
|
|
349
|
+
[reorder]: addon/src/test-support/helpers/reorder.js
|
|
350
|
+
[keyboard]: addon/src/test-support/utils/kebyoard.js
|
|
345
351
|
|
|
346
352
|
To include them in your application, you can import them:
|
|
347
353
|
|
|
348
354
|
```js
|
|
349
|
-
import {
|
|
350
|
-
|
|
355
|
+
import {
|
|
356
|
+
drag, reorder,
|
|
351
357
|
ENTER_KEY_CODE,
|
|
352
358
|
SPACE_KEY_CODE,
|
|
353
359
|
ESCAPE_KEY_CODE,
|
|
354
360
|
ARROW_KEY_CODES,
|
|
355
|
-
} from 'ember-sortable/test-support
|
|
361
|
+
} from 'ember-sortable/test-support';
|
|
356
362
|
```
|
|
357
363
|
|
|
358
364
|
### Examples
|
package/addon-main.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "ember-sortable/modifiers/sortable-group";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "ember-sortable/modifiers/sortable-handle";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "ember-sortable/modifiers/sortable-item";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from "ember-sortable/services/ember-sortable-internal-state";
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
function _toPrimitive(t, r) {
|
|
2
|
+
if ("object" != typeof t || !t) return t;
|
|
3
|
+
var e = t[Symbol.toPrimitive];
|
|
4
|
+
if (void 0 !== e) {
|
|
5
|
+
var i = e.call(t, r || "default");
|
|
6
|
+
if ("object" != typeof i) return i;
|
|
7
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
8
|
+
}
|
|
9
|
+
return ("string" === r ? String : Number)(t);
|
|
10
|
+
}
|
|
11
|
+
function _toPropertyKey(t) {
|
|
12
|
+
var i = _toPrimitive(t, "string");
|
|
13
|
+
return "symbol" == typeof i ? i : String(i);
|
|
14
|
+
}
|
|
15
|
+
function _defineProperty(obj, key, value) {
|
|
16
|
+
key = _toPropertyKey(key);
|
|
17
|
+
if (key in obj) {
|
|
18
|
+
Object.defineProperty(obj, key, {
|
|
19
|
+
value: value,
|
|
20
|
+
enumerable: true,
|
|
21
|
+
configurable: true,
|
|
22
|
+
writable: true
|
|
23
|
+
});
|
|
24
|
+
} else {
|
|
25
|
+
obj[key] = value;
|
|
26
|
+
}
|
|
27
|
+
return obj;
|
|
28
|
+
}
|
|
29
|
+
function _initializerDefineProperty(target, property, descriptor, context) {
|
|
30
|
+
if (!descriptor) return;
|
|
31
|
+
Object.defineProperty(target, property, {
|
|
32
|
+
enumerable: descriptor.enumerable,
|
|
33
|
+
configurable: descriptor.configurable,
|
|
34
|
+
writable: descriptor.writable,
|
|
35
|
+
value: descriptor.initializer ? descriptor.initializer.call(context) : void 0
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
|
|
39
|
+
var desc = {};
|
|
40
|
+
Object.keys(descriptor).forEach(function (key) {
|
|
41
|
+
desc[key] = descriptor[key];
|
|
42
|
+
});
|
|
43
|
+
desc.enumerable = !!desc.enumerable;
|
|
44
|
+
desc.configurable = !!desc.configurable;
|
|
45
|
+
if ('value' in desc || desc.initializer) {
|
|
46
|
+
desc.writable = true;
|
|
47
|
+
}
|
|
48
|
+
desc = decorators.slice().reverse().reduce(function (desc, decorator) {
|
|
49
|
+
return decorator(target, property, desc) || desc;
|
|
50
|
+
}, desc);
|
|
51
|
+
if (context && desc.initializer !== void 0) {
|
|
52
|
+
desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
|
|
53
|
+
desc.initializer = undefined;
|
|
54
|
+
}
|
|
55
|
+
if (desc.initializer === void 0) {
|
|
56
|
+
Object.defineProperty(target, property, desc);
|
|
57
|
+
desc = null;
|
|
58
|
+
}
|
|
59
|
+
return desc;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
export { _applyDecoratedDescriptor as _, _defineProperty as a, _initializerDefineProperty as b };
|
|
63
|
+
//# sourceMappingURL=_rollupPluginBabelHelpers-839d0adb.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_rollupPluginBabelHelpers-839d0adb.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,22 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
/* eslint-disable ember/no-incorrect-calls-with-inline-anonymous-functions */
|
|
1
|
+
import { _ as _applyDecoratedDescriptor, a as _defineProperty, b as _initializerDefineProperty } from '../_rollupPluginBabelHelpers-839d0adb.js';
|
|
3
2
|
import Modifier from 'ember-modifier';
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
} from '../utils/keyboard';
|
|
14
|
-
import { ANNOUNCEMENT_ACTION_TYPES } from '../utils/constant';
|
|
15
|
-
import { defaultA11yAnnouncementConfig } from '../utils/defaults';
|
|
16
|
-
import { next, schedule, scheduleOnce, later } from '@ember/runloop';
|
|
17
|
-
import { inject as service } from '@ember/service';
|
|
18
|
-
import { registerDestructor, isDestroyed } from '@ember/destroyable';
|
|
19
|
-
|
|
3
|
+
import { computed, action, set } from '@ember/object';
|
|
4
|
+
import { isEnterKey, isSpaceKey, isDownArrowKey, isUpArrowKey, isLeftArrowKey, isRightArrowKey, isEscapeKey } from '../utils/keyboard.js';
|
|
5
|
+
import { ANNOUNCEMENT_ACTION_TYPES } from '../utils/constant.js';
|
|
6
|
+
import { defaultA11yAnnouncementConfig } from '../utils/defaults.js';
|
|
7
|
+
import { scheduleOnce, later, schedule, next } from '@ember/runloop';
|
|
8
|
+
import { inject } from '@ember/service';
|
|
9
|
+
import { isDestroyed, registerDestructor } from '@ember/destroyable';
|
|
10
|
+
|
|
11
|
+
var _dec, _dec2, _class, _descriptor;
|
|
20
12
|
const NO_MODEL = {};
|
|
21
13
|
|
|
22
14
|
/**
|
|
@@ -39,21 +31,7 @@ const NO_MODEL = {};
|
|
|
39
31
|
* {{/each}}
|
|
40
32
|
* </ol>
|
|
41
33
|
*/
|
|
42
|
-
|
|
43
|
-
/** Primary keyboard utils */
|
|
44
|
-
// Tracks the currently selected item
|
|
45
|
-
_selectedItem = null;
|
|
46
|
-
// Tracks the current move
|
|
47
|
-
move = null;
|
|
48
|
-
moves = [];
|
|
49
|
-
|
|
50
|
-
// Tracks the status of keyboard reorder mode
|
|
51
|
-
isKeyboardReorderModeEnabled = false;
|
|
52
|
-
|
|
53
|
-
isKeyDownEnabled = false;
|
|
54
|
-
|
|
55
|
-
// Tracks if we're still performing a programmatic focus.
|
|
56
|
-
isRetainingFocus = false;
|
|
34
|
+
let SortableGroupModifier = (_dec = inject('ember-sortable-internal-state'), _dec2 = computed('direction', 'sortedItems'), (_class = class SortableGroupModifier extends Modifier {
|
|
57
35
|
/** End of keyboard utils */
|
|
58
36
|
|
|
59
37
|
get disabled() {
|
|
@@ -91,11 +69,9 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
91
69
|
get a11yAnnouncementConfig() {
|
|
92
70
|
return this.named.a11yAnnouncementConfig || defaultA11yAnnouncementConfig;
|
|
93
71
|
}
|
|
94
|
-
|
|
95
72
|
get itemVisualClass() {
|
|
96
73
|
return this.named.itemVisualClass || 'is-activated';
|
|
97
74
|
}
|
|
98
|
-
|
|
99
75
|
get a11yItemName() {
|
|
100
76
|
return this.named.a11yItemName || 'item';
|
|
101
77
|
}
|
|
@@ -108,7 +84,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
108
84
|
*
|
|
109
85
|
* @param {Event} event a DOM event.
|
|
110
86
|
*/
|
|
111
|
-
@action
|
|
112
87
|
focusOut() {
|
|
113
88
|
if (!this.isRetainingFocus && !this._isElementWithinHandle(document.activeElement)) {
|
|
114
89
|
this.cancelKeyboardSelection();
|
|
@@ -124,7 +99,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
124
99
|
*
|
|
125
100
|
* @param {Event} event a DOM event
|
|
126
101
|
*/
|
|
127
|
-
@action
|
|
128
102
|
keyDown(event) {
|
|
129
103
|
if (!this.isKeyDownEnabled) {
|
|
130
104
|
return;
|
|
@@ -133,15 +107,12 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
133
107
|
// Note: If handle is specified, we need to target the keyDown on the handle
|
|
134
108
|
const isKeyboardReorderModeEnabled = this.isKeyboardReorderModeEnabled;
|
|
135
109
|
const _selectedItem = this._selectedItem;
|
|
136
|
-
|
|
137
110
|
if (!isKeyboardReorderModeEnabled && (isEnterKey(event) || isSpaceKey(event))) {
|
|
138
111
|
this._prepareKeyboardReorderMode();
|
|
139
112
|
this._announceAction(ANNOUNCEMENT_ACTION_TYPES.ACTIVATE);
|
|
140
113
|
this._updateItemVisualIndicators(_selectedItem, true);
|
|
141
114
|
this._updateHandleVisualIndicators(_selectedItem, true);
|
|
142
|
-
|
|
143
115
|
this.isRetainingFocus = true;
|
|
144
|
-
|
|
145
116
|
scheduleOnce('render', () => {
|
|
146
117
|
this.element.focus();
|
|
147
118
|
this.isRetainingFocus = false;
|
|
@@ -151,7 +122,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
151
122
|
event.preventDefault();
|
|
152
123
|
return;
|
|
153
124
|
}
|
|
154
|
-
|
|
155
125
|
if (isKeyboardReorderModeEnabled) {
|
|
156
126
|
this._handleKeyboardReorder(event);
|
|
157
127
|
event.preventDefault();
|
|
@@ -207,7 +177,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
207
177
|
_handleKeyboardReorder(event) {
|
|
208
178
|
const direction = this.direction;
|
|
209
179
|
const selectedItem = this._selectedItem;
|
|
210
|
-
|
|
211
180
|
if (direction === 'y' && isDownArrowKey(event)) {
|
|
212
181
|
this.moveItem(selectedItem, 1);
|
|
213
182
|
} else if (direction === 'y' && isUpArrowKey(event)) {
|
|
@@ -221,7 +190,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
221
190
|
const itemElement = selectedItem.element;
|
|
222
191
|
this._announceAction(ANNOUNCEMENT_ACTION_TYPES.CONFIRM);
|
|
223
192
|
this.confirmKeyboardSelection();
|
|
224
|
-
|
|
225
193
|
this.isRetainingFocus = true;
|
|
226
194
|
scheduleOnce('render', () => this._focusItem(itemElement));
|
|
227
195
|
} else if (isEscapeKey(event)) {
|
|
@@ -229,7 +197,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
229
197
|
const _selectedItemElement = selectedItem.element;
|
|
230
198
|
this._announceAction(ANNOUNCEMENT_ACTION_TYPES.CANCEL);
|
|
231
199
|
this.cancelKeyboardSelection();
|
|
232
|
-
|
|
233
200
|
this.isRetainingFocus = true;
|
|
234
201
|
scheduleOnce('render', () => {
|
|
235
202
|
const moves = this.moves;
|
|
@@ -254,7 +221,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
254
221
|
moveItem(item, delta) {
|
|
255
222
|
const sortedItems = this.sortedItems;
|
|
256
223
|
const moves = this.moves;
|
|
257
|
-
|
|
258
224
|
const sortedIndex = sortedItems.indexOf(item);
|
|
259
225
|
const newSortedIndex = sortedIndex + delta;
|
|
260
226
|
|
|
@@ -267,7 +233,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
267
233
|
scheduleOnce('render', () => {
|
|
268
234
|
this._move(sortedIndex, newSortedIndex);
|
|
269
235
|
this._updateHandleVisualIndicators(item, true);
|
|
270
|
-
|
|
271
236
|
moves.push([sortedIndex, newSortedIndex]);
|
|
272
237
|
});
|
|
273
238
|
}
|
|
@@ -279,7 +244,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
279
244
|
* 3. Tears down the application container, so we are not focus locked within the application.
|
|
280
245
|
* 4. Resets the current selected item.
|
|
281
246
|
*/
|
|
282
|
-
@action
|
|
283
247
|
cancelKeyboardSelection() {
|
|
284
248
|
const _selectedItem = this._selectedItem;
|
|
285
249
|
this._disableKeyboardReorderMode();
|
|
@@ -324,24 +288,20 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
324
288
|
_announceAction(type, delta = null) {
|
|
325
289
|
const a11yAnnouncementConfig = this.a11yAnnouncementConfig;
|
|
326
290
|
const a11yItemName = this.a11yItemName;
|
|
327
|
-
|
|
328
291
|
if (!a11yItemName || !(type in a11yAnnouncementConfig)) {
|
|
329
292
|
return;
|
|
330
293
|
}
|
|
331
|
-
|
|
332
294
|
const sortedItems = this.sortedItems;
|
|
333
295
|
const _selectedItem = this._selectedItem;
|
|
334
296
|
const index = sortedItems.indexOf(_selectedItem);
|
|
335
297
|
const announcer = this.announcer;
|
|
336
|
-
|
|
337
298
|
const config = {
|
|
338
299
|
a11yItemName,
|
|
339
300
|
index: index,
|
|
340
301
|
maxLength: sortedItems.length,
|
|
341
302
|
direction: this.direction,
|
|
342
|
-
delta
|
|
303
|
+
delta
|
|
343
304
|
};
|
|
344
|
-
|
|
345
305
|
const message = a11yAnnouncementConfig[type](config);
|
|
346
306
|
announcer.textContent = message;
|
|
347
307
|
|
|
@@ -366,11 +326,9 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
366
326
|
*/
|
|
367
327
|
_updateItemVisualIndicators(item, isActive) {
|
|
368
328
|
const itemVisualClass = this.itemVisualClass;
|
|
369
|
-
|
|
370
329
|
if (!itemVisualClass || !item) {
|
|
371
330
|
return;
|
|
372
331
|
}
|
|
373
|
-
|
|
374
332
|
if (isActive) {
|
|
375
333
|
item.element.classList.add(itemVisualClass);
|
|
376
334
|
} else {
|
|
@@ -386,30 +344,24 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
386
344
|
*/
|
|
387
345
|
_updateHandleVisualIndicators(item, isUpdate) {
|
|
388
346
|
const handleVisualClass = this.handleVisualClass;
|
|
389
|
-
|
|
390
347
|
if (handleVisualClass === NO_MODEL || !item) {
|
|
391
348
|
return;
|
|
392
349
|
}
|
|
393
|
-
|
|
394
350
|
const sortedItems = this.sortedItems;
|
|
395
351
|
const direction = this.direction;
|
|
396
352
|
const index = sortedItems.indexOf(item);
|
|
397
353
|
const handle = item.element.querySelector('[data-sortable-handle');
|
|
398
354
|
const visualHandle = handle ? handle : item.element;
|
|
399
355
|
const visualKeys = direction === 'y' ? ['UP', 'DOWN'] : ['LEFT', 'RIGHT'];
|
|
400
|
-
|
|
401
|
-
visualKeys.forEach((visualKey) => {
|
|
356
|
+
visualKeys.forEach(visualKey => {
|
|
402
357
|
visualHandle.classList.remove(handleVisualClass[visualKey]);
|
|
403
358
|
});
|
|
404
|
-
|
|
405
359
|
if (!isUpdate) {
|
|
406
360
|
return;
|
|
407
361
|
}
|
|
408
|
-
|
|
409
362
|
if (index > 0) {
|
|
410
363
|
visualHandle.classList.add(handleVisualClass[visualKeys[0]]);
|
|
411
364
|
}
|
|
412
|
-
|
|
413
365
|
if (index < sortedItems.length - 1) {
|
|
414
366
|
visualHandle.classList.add(handleVisualClass[visualKeys[1]]);
|
|
415
367
|
}
|
|
@@ -459,7 +411,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
459
411
|
this.element.removeAttribute('role');
|
|
460
412
|
this.element.removeAttribute('tabIndex');
|
|
461
413
|
}
|
|
462
|
-
|
|
463
414
|
_prepareKeyboardReorderMode() {
|
|
464
415
|
this._enableKeyboardReorderMode();
|
|
465
416
|
this._setupA11yApplicationContainer();
|
|
@@ -488,10 +439,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
488
439
|
get onChange() {
|
|
489
440
|
return this.named.onChange;
|
|
490
441
|
}
|
|
491
|
-
|
|
492
|
-
@service('ember-sortable-internal-state')
|
|
493
|
-
sortableService;
|
|
494
|
-
|
|
495
442
|
/**
|
|
496
443
|
* This is the group name used to keep groups separate if there are more than one on the screen at a time.
|
|
497
444
|
* If no group is assigned a default is used
|
|
@@ -505,8 +452,7 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
505
452
|
|
|
506
453
|
/**
|
|
507
454
|
This is an array of SortableItemModifiers
|
|
508
|
-
|
|
509
|
-
@property items
|
|
455
|
+
@property items
|
|
510
456
|
@type SortableItemModifier[]
|
|
511
457
|
*/
|
|
512
458
|
get items() {
|
|
@@ -521,7 +467,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
521
467
|
*
|
|
522
468
|
* @type {Element}
|
|
523
469
|
*/
|
|
524
|
-
announcer = null;
|
|
525
470
|
|
|
526
471
|
/**
|
|
527
472
|
Position for the first item.
|
|
@@ -529,11 +474,9 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
529
474
|
@property firstItemPosition
|
|
530
475
|
@type Number
|
|
531
476
|
*/
|
|
532
|
-
@computed('direction', 'sortedItems')
|
|
533
477
|
get firstItemPosition() {
|
|
534
478
|
const direction = this.direction;
|
|
535
479
|
const sortedItems = this.sortedItems;
|
|
536
|
-
|
|
537
480
|
return sortedItems[0][`${direction}`] - sortedItems[0].spacing;
|
|
538
481
|
}
|
|
539
482
|
|
|
@@ -550,7 +493,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
550
493
|
/**
|
|
551
494
|
* Enables keyboard navigation
|
|
552
495
|
*/
|
|
553
|
-
@action
|
|
554
496
|
activateKeyDown(selectedItem) {
|
|
555
497
|
this._selectedItem = selectedItem;
|
|
556
498
|
this.isKeyDownEnabled = true;
|
|
@@ -562,7 +504,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
562
504
|
* elements that aren't meant to invoke keyboard navigation
|
|
563
505
|
* by ignoring them.
|
|
564
506
|
*/
|
|
565
|
-
@action
|
|
566
507
|
deactivateKeyDown() {
|
|
567
508
|
this.isKeyDownEnabled = false;
|
|
568
509
|
}
|
|
@@ -572,7 +513,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
572
513
|
@method registerGroup
|
|
573
514
|
@param {SortableGroupModifier} group
|
|
574
515
|
*/
|
|
575
|
-
@action
|
|
576
516
|
registerGroup(group) {
|
|
577
517
|
this._group = group;
|
|
578
518
|
}
|
|
@@ -582,7 +522,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
582
522
|
@method deregisterGroup
|
|
583
523
|
@param {SortableGroupModifier} group
|
|
584
524
|
*/
|
|
585
|
-
@action
|
|
586
525
|
deregisterGroup(group) {
|
|
587
526
|
if (this._group === group) {
|
|
588
527
|
this._group = null;
|
|
@@ -595,7 +534,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
595
534
|
we don’t incur expensive re-layouts.
|
|
596
535
|
@method _prepare
|
|
597
536
|
*/
|
|
598
|
-
@action
|
|
599
537
|
prepare() {
|
|
600
538
|
this._firstItemPosition = this.firstItemPosition;
|
|
601
539
|
}
|
|
@@ -604,7 +542,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
604
542
|
Update item positions (relatively to the first element position).
|
|
605
543
|
@method update
|
|
606
544
|
*/
|
|
607
|
-
@action
|
|
608
545
|
update() {
|
|
609
546
|
let sortedItems = this.sortedItems;
|
|
610
547
|
// Position of the first element
|
|
@@ -614,11 +551,9 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
614
551
|
if (position === undefined) {
|
|
615
552
|
position = this.firstItemPosition;
|
|
616
553
|
}
|
|
617
|
-
|
|
618
|
-
sortedItems.forEach((item) => {
|
|
554
|
+
sortedItems.forEach(item => {
|
|
619
555
|
let dimension;
|
|
620
556
|
let direction = this.direction;
|
|
621
|
-
|
|
622
557
|
if (!isDestroyed(item) && !item.isDragging) {
|
|
623
558
|
set(item, direction, position);
|
|
624
559
|
}
|
|
@@ -627,14 +562,12 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
627
562
|
if (item.isBusy) {
|
|
628
563
|
position += item.spacing * 2;
|
|
629
564
|
}
|
|
630
|
-
|
|
631
565
|
if (direction === 'x') {
|
|
632
566
|
dimension = 'width';
|
|
633
567
|
}
|
|
634
568
|
if (direction === 'y') {
|
|
635
569
|
dimension = 'height';
|
|
636
570
|
}
|
|
637
|
-
|
|
638
571
|
position += item[dimension];
|
|
639
572
|
});
|
|
640
573
|
}
|
|
@@ -642,23 +575,18 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
642
575
|
/**
|
|
643
576
|
@method _commit
|
|
644
577
|
*/
|
|
645
|
-
@action
|
|
646
578
|
commit() {
|
|
647
579
|
const items = this.sortedItems;
|
|
648
|
-
const itemModels = items.map(
|
|
649
|
-
const draggedItem = items.find(
|
|
580
|
+
const itemModels = items.map(item => item.model);
|
|
581
|
+
const draggedItem = items.find(item => item.wasDropped);
|
|
650
582
|
let draggedModel;
|
|
651
|
-
|
|
652
583
|
if (draggedItem) {
|
|
653
584
|
draggedItem.wasDropped = false; // Reset
|
|
654
585
|
draggedModel = draggedItem.model;
|
|
655
586
|
}
|
|
656
|
-
|
|
657
587
|
this._updateItems();
|
|
658
588
|
this._onChange(itemModels, draggedModel);
|
|
659
589
|
}
|
|
660
|
-
|
|
661
|
-
@action
|
|
662
590
|
_onChange(itemModels, draggedModel) {
|
|
663
591
|
if (this.onChange) {
|
|
664
592
|
this.onChange(itemModels, draggedModel);
|
|
@@ -671,25 +599,19 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
671
599
|
*/
|
|
672
600
|
_updateItems() {
|
|
673
601
|
const items = this.sortedItems;
|
|
674
|
-
|
|
675
602
|
delete this._firstItemPosition;
|
|
676
|
-
|
|
677
603
|
schedule('render', () => {
|
|
678
|
-
items.forEach(
|
|
604
|
+
items.forEach(item => item.freeze());
|
|
679
605
|
});
|
|
680
|
-
|
|
681
606
|
schedule('afterRender', () => {
|
|
682
|
-
items.forEach(
|
|
607
|
+
items.forEach(item => item.reset());
|
|
683
608
|
});
|
|
684
|
-
|
|
685
609
|
next(() => {
|
|
686
610
|
schedule('render', () => {
|
|
687
|
-
items.forEach(
|
|
611
|
+
items.forEach(item => item.thaw());
|
|
688
612
|
});
|
|
689
613
|
});
|
|
690
614
|
}
|
|
691
|
-
|
|
692
|
-
@action
|
|
693
615
|
_createAnnouncer() {
|
|
694
616
|
const announcer = document.createElement('span');
|
|
695
617
|
announcer.setAttribute('aria-live', 'polite');
|
|
@@ -703,43 +625,51 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
703
625
|
this.element.addEventListener('keydown', this.keyDown);
|
|
704
626
|
this.element.addEventListener('focusout', this.focusOut);
|
|
705
627
|
}
|
|
706
|
-
|
|
707
628
|
removeEventListener() {
|
|
708
629
|
this.element.removeEventListener('keydown', this.keyDown);
|
|
709
630
|
this.element.removeEventListener('focusout', this.focusOut);
|
|
710
631
|
}
|
|
711
|
-
|
|
712
|
-
element;
|
|
713
|
-
didSetup = false;
|
|
714
|
-
|
|
715
632
|
constructor(owner, args) {
|
|
716
633
|
super(owner, args);
|
|
634
|
+
/** Primary keyboard utils */
|
|
635
|
+
// Tracks the currently selected item
|
|
636
|
+
_defineProperty(this, "_selectedItem", null);
|
|
637
|
+
// Tracks the current move
|
|
638
|
+
_defineProperty(this, "move", null);
|
|
639
|
+
_defineProperty(this, "moves", []);
|
|
640
|
+
// Tracks the status of keyboard reorder mode
|
|
641
|
+
_defineProperty(this, "isKeyboardReorderModeEnabled", false);
|
|
642
|
+
_defineProperty(this, "isKeyDownEnabled", false);
|
|
643
|
+
// Tracks if we're still performing a programmatic focus.
|
|
644
|
+
_defineProperty(this, "isRetainingFocus", false);
|
|
645
|
+
_initializerDefineProperty(this, "sortableService", _descriptor, this);
|
|
646
|
+
_defineProperty(this, "announcer", null);
|
|
647
|
+
_defineProperty(this, "element", void 0);
|
|
648
|
+
_defineProperty(this, "didSetup", false);
|
|
717
649
|
registerDestructor(this, cleanup);
|
|
718
650
|
}
|
|
719
|
-
|
|
720
651
|
modify(element, _positional, named) {
|
|
721
652
|
this.element = element;
|
|
722
653
|
this.named = named;
|
|
723
|
-
|
|
724
654
|
this.removeEventListener();
|
|
725
|
-
|
|
726
655
|
if (!this.didSetup) {
|
|
727
656
|
this._groupDef = this.sortableService.fetchGroup(this.groupName);
|
|
728
657
|
this.announcer = this._createAnnouncer();
|
|
729
658
|
this.element.insertAdjacentElement('afterend', this.announcer);
|
|
730
659
|
this.sortableService.registerGroup(this.groupName, this);
|
|
731
|
-
|
|
732
660
|
this.didSetup = true;
|
|
733
661
|
}
|
|
734
|
-
|
|
735
662
|
if (this.disabled) {
|
|
736
663
|
return;
|
|
737
664
|
}
|
|
738
|
-
|
|
739
665
|
this.addEventListener();
|
|
740
666
|
}
|
|
741
|
-
}
|
|
742
|
-
|
|
667
|
+
}, (_applyDecoratedDescriptor(_class.prototype, "focusOut", [action], Object.getOwnPropertyDescriptor(_class.prototype, "focusOut"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "keyDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "keyDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "cancelKeyboardSelection", [action], Object.getOwnPropertyDescriptor(_class.prototype, "cancelKeyboardSelection"), _class.prototype), _descriptor = _applyDecoratedDescriptor(_class.prototype, "sortableService", [_dec], {
|
|
668
|
+
configurable: true,
|
|
669
|
+
enumerable: true,
|
|
670
|
+
writable: true,
|
|
671
|
+
initializer: null
|
|
672
|
+
}), _applyDecoratedDescriptor(_class.prototype, "firstItemPosition", [_dec2], Object.getOwnPropertyDescriptor(_class.prototype, "firstItemPosition"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "activateKeyDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "activateKeyDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "deactivateKeyDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "deactivateKeyDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "registerGroup", [action], Object.getOwnPropertyDescriptor(_class.prototype, "registerGroup"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "deregisterGroup", [action], Object.getOwnPropertyDescriptor(_class.prototype, "deregisterGroup"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "prepare", [action], Object.getOwnPropertyDescriptor(_class.prototype, "prepare"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "update", [action], Object.getOwnPropertyDescriptor(_class.prototype, "update"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "commit", [action], Object.getOwnPropertyDescriptor(_class.prototype, "commit"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "_onChange", [action], Object.getOwnPropertyDescriptor(_class.prototype, "_onChange"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "_createAnnouncer", [action], Object.getOwnPropertyDescriptor(_class.prototype, "_createAnnouncer"), _class.prototype)), _class));
|
|
743
673
|
/**
|
|
744
674
|
*
|
|
745
675
|
* @param {SortableGroupModifier} instance
|
|
@@ -752,3 +682,6 @@ function cleanup(instance) {
|
|
|
752
682
|
instance.removeEventListener();
|
|
753
683
|
instance.sortableService.deregisterGroup(instance.groupName, instance);
|
|
754
684
|
}
|
|
685
|
+
|
|
686
|
+
export { SortableGroupModifier as default };
|
|
687
|
+
//# sourceMappingURL=sortable-group.js.map
|