Skip to content

Commit 5d5e381

Browse files
tsovtsov
authored
Merge pull request #432 from bahung1221/issue-418
Update outdated parts of documentation
2 parents 03012df + 7aa68d8 commit 5d5e381

File tree

12 files changed

+260
-65
lines changed

12 files changed

+260
-65
lines changed

‎CONTRIBUTING.md

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,12 @@ appreciated and encouraged.
55

66
## Table of contents
77

8-
1. [Code of Conduct](code-of-conduct)
9-
2. [How to contribute](how-to-contribute)
10-
1. [Creating issues](creating-issues)
11-
2. [Opening pull requests](opening-pull-requests)
12-
3. [JS Docblocks](js-docblocks)
13-
4. [How to run locally](how-to-run-locally)
14-
3. [Additional information](additional-information)
8+
1. [Code of Conduct](#code-of-conduct)
9+
2. [How to contribute](#how-to-contribute)
10+
1. [Creating issues](#creating-issues)
11+
2. [Opening pull requests](#opening-pull-requests)
12+
3. [JS Docblocks](#js-docblocks)
13+
4. [How to run locally](#how-to-run-locally)
1514

1615
## Code of Conduct
1716

‎src/Draggable/README.md

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,36 @@
11
## Draggable
22

3-
### Import
3+
### Usage
44

5+
- ES6:
56
```js
67
import { Draggable } from '@shopify/draggable';
7-
```
8+
// Or
9+
// import Draggable from '@shopify/draggable/lib/draggable';
810

9-
```js
10-
import Draggable from '@shopify/draggable/lib/draggable';
11+
const draggable = new Draggable(document.querySelectorAll('ul'), {
12+
draggable: 'li'
13+
});
1114
```
1215

16+
- Browser (All Bundle):
1317
```html
1418
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
19+
<script>
20+
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
21+
draggable: 'li'
22+
});
23+
</script>
1524
```
1625

26+
- Browser (Standalone):
1727
```html
1828
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script>
29+
<script>
30+
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
31+
draggable: 'li'
32+
});
33+
</script>
1934
```
2035

2136
### API

‎src/Droppable/README.md

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,40 @@ Droppable fires two events on top of the draggable events: `droppable:dropped` a
55
Droppable elements must begin in an occupied dropzone (see below, [Classes](#classes) and example),
66
so they may returned if the drag is canceled or returned.
77

8-
### Import
8+
### Usage
99

10+
- ES6:
1011
```js
1112
import { Droppable } from '@shopify/draggable';
12-
```
13+
// Or
14+
// import Droppable from '@shopify/draggable/lib/droppable';
1315

14-
```js
15-
import Droppable from '@shopify/draggable/lib/droppable';
16+
const droppable = new Droppable(document.querySelectorAll('.container'), {
17+
draggable: '.item',
18+
dropzone: '.dropzone'
19+
});
1620
```
1721

22+
- Browser (All Bundle):
1823
```html
1924
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
25+
<script>
26+
const droppable = new Draggable.Droppable(document.querySelectorAll('.container'), {
27+
draggable: '.item',
28+
dropzone: '.dropzone'
29+
});
30+
</script>
2031
```
2132

33+
- Browser (Standalone):
2234
```html
2335
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/droppable.js"></script>
36+
<script>
37+
const droppable = new Droppable.default(document.querySelectorAll('.container'), {
38+
draggable: '.item',
39+
dropzone: '.dropzone'
40+
});
41+
</script>
2442
```
2543

2644
### API

‎src/Plugins/Collidable/README.md

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,45 @@ the mirror movement for you. These currently only work with `Sortable`, `Swappab
55

66
This plugin is not included by default, so make sure to import it before using.
77

8-
### Import
8+
### Usage
99

10+
- ES6:
1011
```js
11-
import { Plugins } from '@shopify/draggable';
12-
```
13-
14-
```js
15-
import Collidable from '@shopify/draggable/lib/plugins/collidable';
12+
import { Draggable, Plugins } from "@shopify/draggable";
13+
// Or
14+
// import Draggable from '@shopify/draggable/lib/draggable';
15+
// import Collidable from '@shopify/draggable/lib/plugins/collidable';
16+
17+
const draggable = new Draggable(document.querySelectorAll("ul"), {
18+
draggable: "li",
19+
collidables: ".other-list",
20+
plugins: [Plugins.Collidable], // Or [Collidable]
21+
});
1622
```
1723

24+
- Browser (All bundle):
1825
```html
19-
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins.js"></script>
26+
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
27+
<script>
28+
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
29+
draggable: 'li',
30+
collidables: '.other-list',
31+
plugins: [Draggable.Plugins.Collidable]
32+
});
33+
</script>
2034
```
2135

36+
- Browser (Standalone):
2237
```html
38+
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script>
2339
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins/collidable.js"></script>
40+
<script>
41+
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
42+
draggable: 'li',
43+
collidables: '.other-list',
44+
plugins: [Collidable.default]
45+
});
46+
</script>
2447
```
2548

2649
### Options

‎src/Plugins/ResizeMirror/README.md

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,42 @@ This plugin is not included in the default Draggable bundle, so you'll need to i
1111

1212
> **Example of `ResizeMirror` in action.** Custom transitions are applied via CSS _(not provided by the plugin)_ – [Grid Layout Example](https://shopify.github.io/draggable/examples/grid-layout.html)
1313
14-
### Import
14+
### Usage
1515

16+
- ES6:
1617
```js
17-
import { Plugins } from '@shopify/draggable';
18-
```
18+
import { Draggable, Plugins } from "@shopify/draggable";
19+
// Or
20+
// import Draggable from '@shopify/draggable/lib/draggable';
21+
// import ResizeMirror from '@shopify/draggable/lib/plugins/resize-mirror';
1922

20-
```js
21-
import ResizeMirror from '@shopify/draggable/lib/plugins/resize-mirror';
23+
const draggable = new Draggable(document.querySelectorAll('ul'), {
24+
draggable: 'li',
25+
plugins: [Plugins.ResizeMirror] // Or [ResizeMirror]
26+
});
2227
```
2328

29+
- Browser (All bundle):
2430
```html
25-
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins.js"></script>
31+
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
32+
<script>
33+
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
34+
draggable: 'li',
35+
plugins: [Draggable.Plugins.ResizeMirror]
36+
});
37+
</script>
2638
```
2739

40+
- Browser (Standalone):
2841
```html
42+
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script>
2943
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins/resize-mirror.js"></script>
44+
<script>
45+
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
46+
draggable: 'li',
47+
plugins: [ResizeMirror.default]
48+
});
49+
</script>
3050
```
3151

3252
### API

‎src/Plugins/Snappable/README.md

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,43 @@ It also sets the `'source:placed'` class for potential drop animations.
55

66
This plugin is not included by default, so make sure to import it before using.
77

8-
### Import
8+
### Usage
99

10+
- ES6:
1011
```js
11-
import { Plugins } from '@shopify/draggable';
12-
```
12+
import { Draggable, Plugins } from "@shopify/draggable";
13+
// Or
14+
// import Draggable from '@shopify/draggable/lib/draggable';
15+
// import Snappable from '@shopify/draggable/lib/plugins/snappable';
1316

14-
```js
15-
import Snappable from '@shopify/draggable/lib/plugins/snappable';
17+
18+
const draggable = new Draggable(document.querySelectorAll('ul'), {
19+
draggable: 'li',
20+
plugins: [Plugins.Snappable] // Or [Snappable]
21+
});
1622
```
1723

24+
- Browser (All bundle):
1825
```html
19-
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins.js"></script>
26+
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
27+
<script>
28+
const draggable = new Draggable.Draggable(document.querySelectorAll('ul'), {
29+
draggable: 'li',
30+
plugins: [Draggable.Plugins.Snappable]
31+
});
32+
</script>
2033
```
2134

35+
- Browser (Standalone):
2236
```html
37+
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.js"></script>
2338
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins/snappable.js"></script>
39+
<script>
40+
const draggable = new Draggable.default(document.querySelectorAll('ul'), {
41+
draggable: 'li',
42+
plugins: [Snappable.default]
43+
});
44+
</script>
2445
```
2546

2647
### Options

‎src/Plugins/SortAnimation/README.md

Lines changed: 38 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,22 +10,54 @@ This plugin is not included by default, so make sure to import it before using.
1010

1111
**NOTE**: Don't use this plugin with [SwapAnimation](https://github.com/Shopify/draggable/tree/master/src/Plugins/SwapAnimation) plugin to avoid conflict.
1212

13-
### Import
13+
### Usage
1414

15+
- ES6:
1516
```js
16-
import { Plugins } from '@shopify/draggable';
17-
```
17+
import { Sortable, Plugins } from "@shopify/draggable";
18+
// Or
19+
// import Sortable from '@shopify/draggable/lib/sortable';
20+
// import SortAnimation from '@shopify/draggable/lib/plugins/sort-animation';
1821

19-
```js
20-
import SortAnimation from '@shopify/draggable/lib/plugins/sort-animation';
22+
const sortable = new Sortable(document.querySelectorAll('ul'), {
23+
draggable: 'li',
24+
sortAnimation: {
25+
duration: 200,
26+
easingFunction: 'ease-in-out',
27+
},
28+
plugins: [Plugins.SortAnimation] // Or [SortAnimation]
29+
});
2130
```
2231

32+
- Browser (All plugins bundle):
2333
```html
24-
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins.js"></script>
34+
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
35+
<script>
36+
const sortable = new Draggable.Sortable(document.querySelectorAll('ul'), {
37+
draggable: 'li',
38+
sortAnimation: {
39+
duration: 200,
40+
easingFunction: 'ease-in-out',
41+
},
42+
plugins: [Draggable.Plugins.SortAnimation]
43+
});
44+
</script>
2545
```
2646

47+
- Browser (Standalone):
2748
```html
49+
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/sortable.js"></script>
2850
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins/sort-animation.js"></script>
51+
<script>
52+
const sortable = new Sortable.default(document.querySelectorAll('ul'), {
53+
draggable: 'li',
54+
sortAnimation: {
55+
duration: 200,
56+
easingFunction: 'ease-in-out',
57+
},
58+
plugins: [SortAnimation.default]
59+
});
60+
</script>
2961
```
3062

3163
### API

‎src/Plugins/SwapAnimation/README.md

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,58 @@ the easing function of the animation.
66

77
This plugin is not included by default, so make sure to import it before using.
88

9-
### Import
9+
### Usage
1010

11+
- ES6:
1112
```js
12-
import { Plugins } from '@shopify/draggable';
13-
```
13+
import { Sortable, Plugins } from "@shopify/draggable";
14+
// Or
15+
// import Sortable from '@shopify/draggable/lib/sortable';
16+
// import SwapAnimation from '@shopify/draggable/lib/plugins/swap-animation';
1417

15-
```js
16-
import SwapAnimation from '@shopify/draggable/lib/plugins/swap-animation';
18+
19+
const sortable = new Sortable(document.querySelectorAll('ul'), {
20+
draggable: 'li',
21+
swapAnimation: {
22+
duration: 200,
23+
easingFunction: 'ease-in-out',
24+
horizontal: true
25+
},
26+
plugins: [Plugins.SwapAnimation] // Or [SwapAnimation]
27+
});
1728
```
1829

30+
- Browser (All plugins bundle):
1931
```html
20-
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins.js"></script>
32+
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
33+
<script>
34+
const sortable = new Draggable.Sortable(document.querySelectorAll('ul'), {
35+
draggable: 'li',
36+
swapAnimation: {
37+
duration: 200,
38+
easingFunction: 'ease-in-out',
39+
horizontal: true
40+
},
41+
plugins: [Draggable.Plugins.SwapAnimation]
42+
});
43+
</script>
2144
```
2245

46+
- Browser (Standalone):
2347
```html
48+
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/sortable.js"></script>
2449
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/plugins/swap-animation.js"></script>
50+
<script>
51+
const sortable = new Sortable.default(document.querySelectorAll('ul'), {
52+
draggable: 'li',
53+
swapAnimation: {
54+
duration: 200,
55+
easingFunction: 'ease-in-out',
56+
horizontal: true
57+
},
58+
plugins: [SwapAnimation.default]
59+
});
60+
</script>
2561
```
2662

2763
### API

0 commit comments

Comments
 (0)