ember-sortable 4.0.2 → 5.0.0
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-7ae2993d.js +63 -0
- package/dist/_rollupPluginBabelHelpers-7ae2993d.js.map +1 -0
- package/{addon → dist}/modifiers/sortable-group.js +41 -104
- 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 +72 -149
- package/dist/modifiers/sortable-item.js.map +1 -0
- package/{addon/services/ember-sortable.js → dist/services/ember-sortable-internal-state.js} +11 -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 +56 -60
- package/.huskyrc +0 -5
- package/CHANGELOG.md +0 -734
- 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 -26
- 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 _defineProperty(obj, key, value) {
|
|
2
|
+
key = _toPropertyKey(key);
|
|
3
|
+
if (key in obj) {
|
|
4
|
+
Object.defineProperty(obj, key, {
|
|
5
|
+
value: value,
|
|
6
|
+
enumerable: true,
|
|
7
|
+
configurable: true,
|
|
8
|
+
writable: true
|
|
9
|
+
});
|
|
10
|
+
} else {
|
|
11
|
+
obj[key] = value;
|
|
12
|
+
}
|
|
13
|
+
return obj;
|
|
14
|
+
}
|
|
15
|
+
function _toPrimitive(input, hint) {
|
|
16
|
+
if (typeof input !== "object" || input === null) return input;
|
|
17
|
+
var prim = input[Symbol.toPrimitive];
|
|
18
|
+
if (prim !== undefined) {
|
|
19
|
+
var res = prim.call(input, hint || "default");
|
|
20
|
+
if (typeof res !== "object") return res;
|
|
21
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
22
|
+
}
|
|
23
|
+
return (hint === "string" ? String : Number)(input);
|
|
24
|
+
}
|
|
25
|
+
function _toPropertyKey(arg) {
|
|
26
|
+
var key = _toPrimitive(arg, "string");
|
|
27
|
+
return typeof key === "symbol" ? key : String(key);
|
|
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-7ae2993d.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_rollupPluginBabelHelpers-7ae2993d.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-7ae2993d.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,16 @@ const NO_MODEL = {};
|
|
|
39
31
|
* {{/each}}
|
|
40
32
|
* </ol>
|
|
41
33
|
*/
|
|
42
|
-
|
|
34
|
+
let SortableGroupModifier = (_dec = inject('ember-sortable-internal-state'), _dec2 = computed('direction', 'sortedItems'), (_class = class SortableGroupModifier extends Modifier {
|
|
43
35
|
/** Primary keyboard utils */
|
|
44
36
|
// Tracks the currently selected item
|
|
45
|
-
|
|
37
|
+
|
|
46
38
|
// Tracks the current move
|
|
47
|
-
move = null;
|
|
48
|
-
moves = [];
|
|
49
39
|
|
|
50
40
|
// Tracks the status of keyboard reorder mode
|
|
51
|
-
isKeyboardReorderModeEnabled = false;
|
|
52
|
-
|
|
53
|
-
isKeyDownEnabled = false;
|
|
54
41
|
|
|
55
42
|
// Tracks if we're still performing a programmatic focus.
|
|
56
|
-
|
|
43
|
+
|
|
57
44
|
/** End of keyboard utils */
|
|
58
45
|
|
|
59
46
|
get disabled() {
|
|
@@ -91,11 +78,9 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
91
78
|
get a11yAnnouncementConfig() {
|
|
92
79
|
return this.named.a11yAnnouncementConfig || defaultA11yAnnouncementConfig;
|
|
93
80
|
}
|
|
94
|
-
|
|
95
81
|
get itemVisualClass() {
|
|
96
82
|
return this.named.itemVisualClass || 'is-activated';
|
|
97
83
|
}
|
|
98
|
-
|
|
99
84
|
get a11yItemName() {
|
|
100
85
|
return this.named.a11yItemName || 'item';
|
|
101
86
|
}
|
|
@@ -108,7 +93,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
108
93
|
*
|
|
109
94
|
* @param {Event} event a DOM event.
|
|
110
95
|
*/
|
|
111
|
-
@action
|
|
112
96
|
focusOut() {
|
|
113
97
|
if (!this.isRetainingFocus && !this._isElementWithinHandle(document.activeElement)) {
|
|
114
98
|
this.cancelKeyboardSelection();
|
|
@@ -124,7 +108,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
124
108
|
*
|
|
125
109
|
* @param {Event} event a DOM event
|
|
126
110
|
*/
|
|
127
|
-
@action
|
|
128
111
|
keyDown(event) {
|
|
129
112
|
if (!this.isKeyDownEnabled) {
|
|
130
113
|
return;
|
|
@@ -133,15 +116,12 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
133
116
|
// Note: If handle is specified, we need to target the keyDown on the handle
|
|
134
117
|
const isKeyboardReorderModeEnabled = this.isKeyboardReorderModeEnabled;
|
|
135
118
|
const _selectedItem = this._selectedItem;
|
|
136
|
-
|
|
137
119
|
if (!isKeyboardReorderModeEnabled && (isEnterKey(event) || isSpaceKey(event))) {
|
|
138
120
|
this._prepareKeyboardReorderMode();
|
|
139
121
|
this._announceAction(ANNOUNCEMENT_ACTION_TYPES.ACTIVATE);
|
|
140
122
|
this._updateItemVisualIndicators(_selectedItem, true);
|
|
141
123
|
this._updateHandleVisualIndicators(_selectedItem, true);
|
|
142
|
-
|
|
143
124
|
this.isRetainingFocus = true;
|
|
144
|
-
|
|
145
125
|
scheduleOnce('render', () => {
|
|
146
126
|
this.element.focus();
|
|
147
127
|
this.isRetainingFocus = false;
|
|
@@ -151,7 +131,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
151
131
|
event.preventDefault();
|
|
152
132
|
return;
|
|
153
133
|
}
|
|
154
|
-
|
|
155
134
|
if (isKeyboardReorderModeEnabled) {
|
|
156
135
|
this._handleKeyboardReorder(event);
|
|
157
136
|
event.preventDefault();
|
|
@@ -207,7 +186,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
207
186
|
_handleKeyboardReorder(event) {
|
|
208
187
|
const direction = this.direction;
|
|
209
188
|
const selectedItem = this._selectedItem;
|
|
210
|
-
|
|
211
189
|
if (direction === 'y' && isDownArrowKey(event)) {
|
|
212
190
|
this.moveItem(selectedItem, 1);
|
|
213
191
|
} else if (direction === 'y' && isUpArrowKey(event)) {
|
|
@@ -221,7 +199,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
221
199
|
const itemElement = selectedItem.element;
|
|
222
200
|
this._announceAction(ANNOUNCEMENT_ACTION_TYPES.CONFIRM);
|
|
223
201
|
this.confirmKeyboardSelection();
|
|
224
|
-
|
|
225
202
|
this.isRetainingFocus = true;
|
|
226
203
|
scheduleOnce('render', () => this._focusItem(itemElement));
|
|
227
204
|
} else if (isEscapeKey(event)) {
|
|
@@ -229,7 +206,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
229
206
|
const _selectedItemElement = selectedItem.element;
|
|
230
207
|
this._announceAction(ANNOUNCEMENT_ACTION_TYPES.CANCEL);
|
|
231
208
|
this.cancelKeyboardSelection();
|
|
232
|
-
|
|
233
209
|
this.isRetainingFocus = true;
|
|
234
210
|
scheduleOnce('render', () => {
|
|
235
211
|
const moves = this.moves;
|
|
@@ -254,7 +230,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
254
230
|
moveItem(item, delta) {
|
|
255
231
|
const sortedItems = this.sortedItems;
|
|
256
232
|
const moves = this.moves;
|
|
257
|
-
|
|
258
233
|
const sortedIndex = sortedItems.indexOf(item);
|
|
259
234
|
const newSortedIndex = sortedIndex + delta;
|
|
260
235
|
|
|
@@ -267,7 +242,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
267
242
|
scheduleOnce('render', () => {
|
|
268
243
|
this._move(sortedIndex, newSortedIndex);
|
|
269
244
|
this._updateHandleVisualIndicators(item, true);
|
|
270
|
-
|
|
271
245
|
moves.push([sortedIndex, newSortedIndex]);
|
|
272
246
|
});
|
|
273
247
|
}
|
|
@@ -279,7 +253,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
279
253
|
* 3. Tears down the application container, so we are not focus locked within the application.
|
|
280
254
|
* 4. Resets the current selected item.
|
|
281
255
|
*/
|
|
282
|
-
@action
|
|
283
256
|
cancelKeyboardSelection() {
|
|
284
257
|
const _selectedItem = this._selectedItem;
|
|
285
258
|
this._disableKeyboardReorderMode();
|
|
@@ -324,24 +297,20 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
324
297
|
_announceAction(type, delta = null) {
|
|
325
298
|
const a11yAnnouncementConfig = this.a11yAnnouncementConfig;
|
|
326
299
|
const a11yItemName = this.a11yItemName;
|
|
327
|
-
|
|
328
300
|
if (!a11yItemName || !(type in a11yAnnouncementConfig)) {
|
|
329
301
|
return;
|
|
330
302
|
}
|
|
331
|
-
|
|
332
303
|
const sortedItems = this.sortedItems;
|
|
333
304
|
const _selectedItem = this._selectedItem;
|
|
334
305
|
const index = sortedItems.indexOf(_selectedItem);
|
|
335
306
|
const announcer = this.announcer;
|
|
336
|
-
|
|
337
307
|
const config = {
|
|
338
308
|
a11yItemName,
|
|
339
309
|
index: index,
|
|
340
310
|
maxLength: sortedItems.length,
|
|
341
311
|
direction: this.direction,
|
|
342
|
-
delta
|
|
312
|
+
delta
|
|
343
313
|
};
|
|
344
|
-
|
|
345
314
|
const message = a11yAnnouncementConfig[type](config);
|
|
346
315
|
announcer.textContent = message;
|
|
347
316
|
|
|
@@ -366,11 +335,9 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
366
335
|
*/
|
|
367
336
|
_updateItemVisualIndicators(item, isActive) {
|
|
368
337
|
const itemVisualClass = this.itemVisualClass;
|
|
369
|
-
|
|
370
338
|
if (!itemVisualClass || !item) {
|
|
371
339
|
return;
|
|
372
340
|
}
|
|
373
|
-
|
|
374
341
|
if (isActive) {
|
|
375
342
|
item.element.classList.add(itemVisualClass);
|
|
376
343
|
} else {
|
|
@@ -386,30 +353,24 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
386
353
|
*/
|
|
387
354
|
_updateHandleVisualIndicators(item, isUpdate) {
|
|
388
355
|
const handleVisualClass = this.handleVisualClass;
|
|
389
|
-
|
|
390
356
|
if (handleVisualClass === NO_MODEL || !item) {
|
|
391
357
|
return;
|
|
392
358
|
}
|
|
393
|
-
|
|
394
359
|
const sortedItems = this.sortedItems;
|
|
395
360
|
const direction = this.direction;
|
|
396
361
|
const index = sortedItems.indexOf(item);
|
|
397
362
|
const handle = item.element.querySelector('[data-sortable-handle');
|
|
398
363
|
const visualHandle = handle ? handle : item.element;
|
|
399
364
|
const visualKeys = direction === 'y' ? ['UP', 'DOWN'] : ['LEFT', 'RIGHT'];
|
|
400
|
-
|
|
401
|
-
visualKeys.forEach((visualKey) => {
|
|
365
|
+
visualKeys.forEach(visualKey => {
|
|
402
366
|
visualHandle.classList.remove(handleVisualClass[visualKey]);
|
|
403
367
|
});
|
|
404
|
-
|
|
405
368
|
if (!isUpdate) {
|
|
406
369
|
return;
|
|
407
370
|
}
|
|
408
|
-
|
|
409
371
|
if (index > 0) {
|
|
410
372
|
visualHandle.classList.add(handleVisualClass[visualKeys[0]]);
|
|
411
373
|
}
|
|
412
|
-
|
|
413
374
|
if (index < sortedItems.length - 1) {
|
|
414
375
|
visualHandle.classList.add(handleVisualClass[visualKeys[1]]);
|
|
415
376
|
}
|
|
@@ -459,7 +420,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
459
420
|
this.element.removeAttribute('role');
|
|
460
421
|
this.element.removeAttribute('tabIndex');
|
|
461
422
|
}
|
|
462
|
-
|
|
463
423
|
_prepareKeyboardReorderMode() {
|
|
464
424
|
this._enableKeyboardReorderMode();
|
|
465
425
|
this._setupA11yApplicationContainer();
|
|
@@ -488,10 +448,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
488
448
|
get onChange() {
|
|
489
449
|
return this.named.onChange;
|
|
490
450
|
}
|
|
491
|
-
|
|
492
|
-
@service('ember-sortable-internal-state')
|
|
493
|
-
sortableService;
|
|
494
|
-
|
|
495
451
|
/**
|
|
496
452
|
* This is the group name used to keep groups separate if there are more than one on the screen at a time.
|
|
497
453
|
* If no group is assigned a default is used
|
|
@@ -505,8 +461,7 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
505
461
|
|
|
506
462
|
/**
|
|
507
463
|
This is an array of SortableItemModifiers
|
|
508
|
-
|
|
509
|
-
@property items
|
|
464
|
+
@property items
|
|
510
465
|
@type SortableItemModifier[]
|
|
511
466
|
*/
|
|
512
467
|
get items() {
|
|
@@ -521,7 +476,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
521
476
|
*
|
|
522
477
|
* @type {Element}
|
|
523
478
|
*/
|
|
524
|
-
announcer = null;
|
|
525
479
|
|
|
526
480
|
/**
|
|
527
481
|
Position for the first item.
|
|
@@ -529,11 +483,9 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
529
483
|
@property firstItemPosition
|
|
530
484
|
@type Number
|
|
531
485
|
*/
|
|
532
|
-
@computed('direction', 'sortedItems')
|
|
533
486
|
get firstItemPosition() {
|
|
534
487
|
const direction = this.direction;
|
|
535
488
|
const sortedItems = this.sortedItems;
|
|
536
|
-
|
|
537
489
|
return sortedItems[0][`${direction}`] - sortedItems[0].spacing;
|
|
538
490
|
}
|
|
539
491
|
|
|
@@ -550,7 +502,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
550
502
|
/**
|
|
551
503
|
* Enables keyboard navigation
|
|
552
504
|
*/
|
|
553
|
-
@action
|
|
554
505
|
activateKeyDown(selectedItem) {
|
|
555
506
|
this._selectedItem = selectedItem;
|
|
556
507
|
this.isKeyDownEnabled = true;
|
|
@@ -562,7 +513,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
562
513
|
* elements that aren't meant to invoke keyboard navigation
|
|
563
514
|
* by ignoring them.
|
|
564
515
|
*/
|
|
565
|
-
@action
|
|
566
516
|
deactivateKeyDown() {
|
|
567
517
|
this.isKeyDownEnabled = false;
|
|
568
518
|
}
|
|
@@ -572,7 +522,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
572
522
|
@method registerGroup
|
|
573
523
|
@param {SortableGroupModifier} group
|
|
574
524
|
*/
|
|
575
|
-
@action
|
|
576
525
|
registerGroup(group) {
|
|
577
526
|
this._group = group;
|
|
578
527
|
}
|
|
@@ -582,7 +531,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
582
531
|
@method deregisterGroup
|
|
583
532
|
@param {SortableGroupModifier} group
|
|
584
533
|
*/
|
|
585
|
-
@action
|
|
586
534
|
deregisterGroup(group) {
|
|
587
535
|
if (this._group === group) {
|
|
588
536
|
this._group = null;
|
|
@@ -595,7 +543,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
595
543
|
we don’t incur expensive re-layouts.
|
|
596
544
|
@method _prepare
|
|
597
545
|
*/
|
|
598
|
-
@action
|
|
599
546
|
prepare() {
|
|
600
547
|
this._firstItemPosition = this.firstItemPosition;
|
|
601
548
|
}
|
|
@@ -604,7 +551,6 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
604
551
|
Update item positions (relatively to the first element position).
|
|
605
552
|
@method update
|
|
606
553
|
*/
|
|
607
|
-
@action
|
|
608
554
|
update() {
|
|
609
555
|
let sortedItems = this.sortedItems;
|
|
610
556
|
// Position of the first element
|
|
@@ -614,11 +560,9 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
614
560
|
if (position === undefined) {
|
|
615
561
|
position = this.firstItemPosition;
|
|
616
562
|
}
|
|
617
|
-
|
|
618
|
-
sortedItems.forEach((item) => {
|
|
563
|
+
sortedItems.forEach(item => {
|
|
619
564
|
let dimension;
|
|
620
565
|
let direction = this.direction;
|
|
621
|
-
|
|
622
566
|
if (!isDestroyed(item) && !item.isDragging) {
|
|
623
567
|
set(item, direction, position);
|
|
624
568
|
}
|
|
@@ -627,14 +571,12 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
627
571
|
if (item.isBusy) {
|
|
628
572
|
position += item.spacing * 2;
|
|
629
573
|
}
|
|
630
|
-
|
|
631
574
|
if (direction === 'x') {
|
|
632
575
|
dimension = 'width';
|
|
633
576
|
}
|
|
634
577
|
if (direction === 'y') {
|
|
635
578
|
dimension = 'height';
|
|
636
579
|
}
|
|
637
|
-
|
|
638
580
|
position += item[dimension];
|
|
639
581
|
});
|
|
640
582
|
}
|
|
@@ -642,23 +584,18 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
642
584
|
/**
|
|
643
585
|
@method _commit
|
|
644
586
|
*/
|
|
645
|
-
@action
|
|
646
587
|
commit() {
|
|
647
588
|
const items = this.sortedItems;
|
|
648
|
-
const itemModels = items.map(
|
|
649
|
-
const draggedItem = items.find(
|
|
589
|
+
const itemModels = items.map(item => item.model);
|
|
590
|
+
const draggedItem = items.find(item => item.wasDropped);
|
|
650
591
|
let draggedModel;
|
|
651
|
-
|
|
652
592
|
if (draggedItem) {
|
|
653
593
|
draggedItem.wasDropped = false; // Reset
|
|
654
594
|
draggedModel = draggedItem.model;
|
|
655
595
|
}
|
|
656
|
-
|
|
657
596
|
this._updateItems();
|
|
658
597
|
this._onChange(itemModels, draggedModel);
|
|
659
598
|
}
|
|
660
|
-
|
|
661
|
-
@action
|
|
662
599
|
_onChange(itemModels, draggedModel) {
|
|
663
600
|
if (this.onChange) {
|
|
664
601
|
this.onChange(itemModels, draggedModel);
|
|
@@ -671,25 +608,19 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
671
608
|
*/
|
|
672
609
|
_updateItems() {
|
|
673
610
|
const items = this.sortedItems;
|
|
674
|
-
|
|
675
611
|
delete this._firstItemPosition;
|
|
676
|
-
|
|
677
612
|
schedule('render', () => {
|
|
678
|
-
items.forEach(
|
|
613
|
+
items.forEach(item => item.freeze());
|
|
679
614
|
});
|
|
680
|
-
|
|
681
615
|
schedule('afterRender', () => {
|
|
682
|
-
items.forEach(
|
|
616
|
+
items.forEach(item => item.reset());
|
|
683
617
|
});
|
|
684
|
-
|
|
685
618
|
next(() => {
|
|
686
619
|
schedule('render', () => {
|
|
687
|
-
items.forEach(
|
|
620
|
+
items.forEach(item => item.thaw());
|
|
688
621
|
});
|
|
689
622
|
});
|
|
690
623
|
}
|
|
691
|
-
|
|
692
|
-
@action
|
|
693
624
|
_createAnnouncer() {
|
|
694
625
|
const announcer = document.createElement('span');
|
|
695
626
|
announcer.setAttribute('aria-live', 'polite');
|
|
@@ -703,43 +634,46 @@ export default class SortableGroupModifier extends Modifier {
|
|
|
703
634
|
this.element.addEventListener('keydown', this.keyDown);
|
|
704
635
|
this.element.addEventListener('focusout', this.focusOut);
|
|
705
636
|
}
|
|
706
|
-
|
|
707
637
|
removeEventListener() {
|
|
708
638
|
this.element.removeEventListener('keydown', this.keyDown);
|
|
709
639
|
this.element.removeEventListener('focusout', this.focusOut);
|
|
710
640
|
}
|
|
711
|
-
|
|
712
|
-
element;
|
|
713
|
-
didSetup = false;
|
|
714
|
-
|
|
715
641
|
constructor(owner, args) {
|
|
716
642
|
super(owner, args);
|
|
643
|
+
_defineProperty(this, "_selectedItem", null);
|
|
644
|
+
_defineProperty(this, "move", null);
|
|
645
|
+
_defineProperty(this, "moves", []);
|
|
646
|
+
_defineProperty(this, "isKeyboardReorderModeEnabled", false);
|
|
647
|
+
_defineProperty(this, "isKeyDownEnabled", false);
|
|
648
|
+
_defineProperty(this, "isRetainingFocus", false);
|
|
649
|
+
_initializerDefineProperty(this, "sortableService", _descriptor, this);
|
|
650
|
+
_defineProperty(this, "announcer", null);
|
|
651
|
+
_defineProperty(this, "element", void 0);
|
|
652
|
+
_defineProperty(this, "didSetup", false);
|
|
717
653
|
registerDestructor(this, cleanup);
|
|
718
654
|
}
|
|
719
|
-
|
|
720
655
|
modify(element, _positional, named) {
|
|
721
656
|
this.element = element;
|
|
722
657
|
this.named = named;
|
|
723
|
-
|
|
724
658
|
this.removeEventListener();
|
|
725
|
-
|
|
726
659
|
if (!this.didSetup) {
|
|
727
660
|
this._groupDef = this.sortableService.fetchGroup(this.groupName);
|
|
728
661
|
this.announcer = this._createAnnouncer();
|
|
729
662
|
this.element.insertAdjacentElement('afterend', this.announcer);
|
|
730
663
|
this.sortableService.registerGroup(this.groupName, this);
|
|
731
|
-
|
|
732
664
|
this.didSetup = true;
|
|
733
665
|
}
|
|
734
|
-
|
|
735
666
|
if (this.disabled) {
|
|
736
667
|
return;
|
|
737
668
|
}
|
|
738
|
-
|
|
739
669
|
this.addEventListener();
|
|
740
670
|
}
|
|
741
|
-
}
|
|
742
|
-
|
|
671
|
+
}, (_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], {
|
|
672
|
+
configurable: true,
|
|
673
|
+
enumerable: true,
|
|
674
|
+
writable: true,
|
|
675
|
+
initializer: null
|
|
676
|
+
}), _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
677
|
/**
|
|
744
678
|
*
|
|
745
679
|
* @param {SortableGroupModifier} instance
|
|
@@ -752,3 +686,6 @@ function cleanup(instance) {
|
|
|
752
686
|
instance.removeEventListener();
|
|
753
687
|
instance.sortableService.deregisterGroup(instance.groupName, instance);
|
|
754
688
|
}
|
|
689
|
+
|
|
690
|
+
export { SortableGroupModifier as default };
|
|
691
|
+
//# sourceMappingURL=sortable-group.js.map
|