Skip to content

Commit c4295a3

Browse files
lvegeranolvegerano
authored
Merge pull request #16 from SortableJS/managed-list
[REFACTOR] Use a managed list to keep track of changes and Glimmer in sync
2 parents 52b809c + 8e5f738 commit c4295a3

32 files changed

+4768
-618
lines changed

‎.eslintrc.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ module.exports = {
3939
'addon/**',
4040
'addon-test-support/**',
4141
'app/**',
42-
'tests/dummy/app/**'
42+
'tests/dummy/app/**',
4343
],
4444
parserOptions: {
4545
sourceType: 'script'

‎.travis.yml

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
language: node_js
22
node_js:
3-
# we recommend testing addons with the same minimum supported node version as Ember CLI
4-
# so that your addon works for all apps
5-
- "8"
6-
7-
sudo: false
8-
dist: trusty
3+
# Node 10.3+ includes npm@6 which has good "npm ci" command
4+
- "10.9"
95

106
addons:
117
chrome: stable
8+
apt:
9+
packages:
10+
- libgconf-2-4
1211

1312
cache:
13+
npm: true
1414
directories:
15-
- $HOME/.npm
15+
- $HOME/.cache
1616

1717
env:
1818
global:
@@ -35,14 +35,17 @@ jobs:
3535
- stage: "Tests"
3636
name: "Tests"
3737
script:
38-
- npm run lint:hbs
39-
- npm run lint:js
38+
# - npm run lint:hbs
39+
# - npm run lint:js
4040
- npm test
41+
- npm start &
42+
- wait-on http://localhost:4200
43+
- cypress run
4144

4245
- stage: "Additional Tests"
4346
name: "Floating Dependencies"
4447
install:
45-
- npm install --no-package-lock
48+
- npm ci
4649
script:
4750
- npm test
4851

‎README.md

Lines changed: 80 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -5,82 +5,111 @@ ember-sortablejs
55

66
This addon allows you to use drag and drop in your ember application using [SortableJS/Sortable](https://github.com/SortableJS/Sortable)
77

8-
98
Compatibility
109
------------------------------------------------------------------------------
1110

1211
* Ember.js v3.13 or above
1312
* Ember CLI v3.13 or above
14-
* Node.js v8 or above
15-
13+
* Node.js v10 or above
1614

1715
Installation
1816
------------------------------------------------------------------------------
19-
17+
> **NOTE**: The beta version is out. Please give me a hand and test it out.
2018
```
21-
ember install ember-sortablejs
19+
ember install ember-sortablejs@beta
2220
```
2321

22+
This addon has a peer dependency on `sortablejs` that will be installed with the addon
23+
24+
Still to do
25+
------------------------------------------------------------------------------
26+
Refer to the upcoming [project](https://github.com/SortableJS/ember-sortablejs/projects/2)
27+
28+
Library support
29+
------------------------------------------------------------------------------
30+
Currently supported:
31+
- [x] Drag from one list to another
32+
- [x] Sort
33+
- [x] Clone
34+
- [ ] Swap
35+
- [ ] Multi Drag
36+
- [ ] Nested List
2437

2538
Usage
2639
------------------------------------------------------------------------------
2740

28-
```html
41+
```hbs
2942
<SortableJs
43+
@items={{array "one" "two" "three" "four" "five"}}
3044
@options={{hash animation=150 ghostClass="ghost-class" group="shared-list"}}
31-
@onChoose={{fn this.onChoose}}
32-
@onUnchoose={{fn this.onUnchoose}}
33-
@onStart={{fn this.onStart}}
34-
@onEnd={{fn this.onEnd}}
35-
@onAdd={{fn this.onAdd}}
36-
@onUpdate={{fn this.onUpdate}}
37-
@onRemove={{fn this.onRemove}}
38-
@onMove={{fn this.onMove}}
39-
@onClone={{fn this.onClone}}
40-
@onChange={{fn this.onChange}}
41-
as |sortable|
45+
@onStart={{this.onStart}}
46+
@onEnd={{this.onEnd}}
47+
as |list|
4248
>
43-
<div class="list-group-item bg-yellow">Item 1</div>
44-
<div class="list-group-item bg-yellow">Item 2</div>
45-
<div class="list-group-item bg-yellow">Item 3</div>
46-
<div class="list-group-item bg-yellow">Item 4</div>
47-
<div class="list-group-item bg-yellow">Item 5</div>
49+
{{#each list as |item|}}
50+
<div class="list-group-item bg-yellow">{{item.value}}</div>
51+
{{/each}}
4852
</SortableJs>
4953
```
5054

55+
How it works
56+
------------------------------------------------------------------------------
57+
SortableJs works by manipulating the DOM directly this is very compatible with
58+
the Glimmer VM. To mitigate this we need tu use SortableJs as a middle and use
59+
the events it emits to update state and prevent the DOM manipulation the lib does.
60+
61+
This is accomplished by maintaining an internal list. This list is a copy of the
62+
array supplied via `@items`. The events `onStart`, `onEnd`, `onUpdate`, `onAdd`,
63+
`onRemove` are intercepted to prevent DOM manipulation and maintaining the internal
64+
list.
65+
66+
I you have ideas on how to approach this better. Please open an issue 😄
67+
68+
Caveats
69+
------------------------------------------------------------------------------
70+
- Not all SortableJS plugins work... yet.
71+
- While you could bypass `@items` I highly discourage since the library manipulates the DOM directly.
72+
5173
Options
5274
------------------------------------------------------------------------------
5375
The addon supports all the options that sortable accepts, see: https://github.com/SortableJS/Sortable#options
5476

55-
The events:
56-
- `onChoose`
57-
- `onUnchoose`
58-
- `onStart`
59-
- `onEnd`
60-
- `onAdd`
61-
- `onUpdate`
62-
- `onSort`
63-
- `onRemove`
64-
- `onMove`
65-
- `onClone`
66-
- `onChange`
67-
- `scrollFn`
68-
- `setData`
69-
- `onFilter`
70-
- `onSpill`
71-
72-
Should be in the component signature as closure actions.
73-
All actions get the events as described in the SortableJS docs as well as the sortable instance.
74-
```js
75-
onChoose(evt, sortable) {...}
76-
```
77+
Component API
78+
------------------------------------------------------------------------------
79+
|arg|type|description|
80+
|:---|:---:|:---|
81+
| `@items` | Array | A list of the items to be managed by the addon |
82+
| `@options` | Object | A hash options supported by SortableJs|
83+
| `@tag` | String | The element to be used to render the list (default: "div")|
84+
| `@onChoose` | Function | (SortablejsEvent) => {...} |
85+
| `@onUnchoose` | Function | (SortablejsEvent) => {...} |
86+
| `@onStart` | Function | (SortablejsEvent) => {...} |
87+
| `@onEnd` | Function | (SortablejsEvent, cancelDnD) => {...} |
88+
| `@onAdd` | Function | (SortablejsEvent) => {...} |
89+
| `@onUpdate` | Function | (SortablejsEvent) => {...} |
90+
| `@onSort` | Function | (SortablejsEvent) => {...} |
91+
| `@onRemove` | Function | (SortablejsEvent) => {...} |
92+
| `@onMove` | Function | (SortablejsMoveEvent) => {...} |
93+
| `@onClone` | Function | (SortablejsEvent) => {...} |
94+
| `@onChange` | Function | (SortablejsEvent) => {...} |
95+
| `@scrollFn` | Function | (SortablejsEvent) => {...} |
96+
| `@setData` | Function | (SortablejsEvent) => {...} |
97+
| `@onFilter` | Function | (SortablejsEvent) => {...} |
98+
| `@onSpill` | Function | (SortablejsEvent) => {...} |
99+
100+
`SortablejsEvent` - A [`CustomEvent`](https://github.com/SortableJS/Sortable#event-object-demo) provided by SortableJS
101+
102+
`SortablejsMoveEvent` - A [`CustomEvent`](https://github.com/SortableJS/Sortable#move-event-object) provided by SortableJS
103+
104+
`cancelDnD` - A callback provided by the ember addon to basically undo you last drag and drop or sort;
105+
77106
Migrating from 1.x
78107
------------------------------------------------------------------------------
79108
- `onSetData` is no longer suported. Rename argument to `setData`.
80109
- `<SortableJs>` no longer expects a wrapped list. Instead the addon itself will act as the sortable list container.
81110

82111
v1
83-
```html
112+
```hbs
84113
<SortableJs
85114
@options={{hash animation=150 ghostClass="ghost-class" group="shared-list"}}
86115
>
@@ -95,16 +124,16 @@ v1
95124
```
96125

97126
v2
98-
```html
127+
```hbs
99128
<SortableJs
100129
class="list-group"
130+
@items={{array "Item 1" "Item 2" "Item 3" "Item 4" "Item 5"}}
101131
@options={{hash animation=150 ghostClass="ghost-class" group="shared-list"}}
132+
as |list|
102133
>
103-
<div class="list-group-item">Item 1</div>
104-
<div class="list-group-item">Item 2</div>
105-
<div class="list-group-item">Item 3</div>
106-
<div class="list-group-item">Item 4</div>
107-
<div class="list-group-item">Item 5</div>
134+
{{#each list as |item|}}
135+
<div class="list-group-item">Item 1</div>
136+
{{/each}}
108137
</SortableJs>
109138
```
110139
License

‎addon/components/sortable-js.hbs

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1-
<div
2-
class="ember-sortable-js"
3-
{{did-insert this.didInsert}}
4-
{{did-update this.setOptions @options}}
5-
...attributes
6-
>
7-
{{yield this.sortable}}
8-
</div>
1+
{{#let (element this.element) as |Element|}}
2+
<Element
3+
class="ember-sortable-js"
4+
{{did-insert this.didInsert}}
5+
{{did-update this.setList @items}}
6+
{{did-update this.setOptions @options}}
7+
...attributes
8+
>
9+
{{yield this.mappedList}}
10+
</Element>
11+
{{/let}}

0 commit comments

Comments
 (0)