-
-
Notifications
You must be signed in to change notification settings - Fork 149
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #572 from mkszepp/update-readme
Add info about `grid` direction into readme and minimal fixes
- Loading branch information
Showing
1 changed file
with
19 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,13 @@ | ||
# ember-sortable | ||
|
||
[![npm version](https://badge.fury.io/js/ember-sortable.svg)](http://badge.fury.io/js/ember-sortable) | ||
[![Build Status](https://github.com/adopted-ember-addons/ember-sortable/workflows/build/badge.svg?branch=master)](https://github.com/adopted-ember-addons/ember-sortable/actions?query=branch%3Amaster+workflow%3A%22build%22) | ||
[![Build Status](https://github.com/adopted-ember-addons/ember-sortable/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/adopted-ember-addons/ember-sortable/actions?query=branch%3Amaster) | ||
[![Downloads Weekly](https://img.shields.io/npm/dw/ember-sortable)](http://badge.fury.io/js/ember-sortable) | ||
[![Ember Observer Score](http://emberobserver.com/badges/ember-sortable.svg)](http://emberobserver.com/addons/ember-sortable) | ||
[![Code Climate](https://codeclimate.com/github/jgwhite/ember-sortable/badges/gpa.svg)](https://codeclimate.com/github/jgwhite/ember-sortable) | ||
|
||
Sortable UI primitives for Ember. | ||
|
||
![ember-sortable in action](/demo.gif) | ||
|
||
[Check out the demo](https://ember-sortable.netlify.app/) | ||
|
||
## Requirements | ||
|
@@ -82,18 +80,22 @@ The modifier version does not support `groupModel`, use the currying of `action` | |
|
||
### Changing sort direction | ||
|
||
To change sort direction, define `direction` on `sortable-group` (default is `y`): | ||
To change sort direction, define `direction` on `sortable-group` | ||
Possible values are: | ||
- `y` (default): allowes to move items up/down | ||
- `x`: allowes to move items left/right | ||
- `grid`: items can be moved in all directions inside a group | ||
|
||
```hbs | ||
<ol {{sortable-group direction="x" onChange=(action "reorderItems")}> | ||
<ol {{sortable-group direction="x" onChange=this.reorderItems}}> | ||
``` | ||
|
||
### Changing spacing between currently dragged element and the rest of the group | ||
|
||
When user starts to drag element, other elements jump back. Works both for the `x` and `y` direction option. | ||
When user starts to drag element, other elements jump back. Works for all direction option. | ||
|
||
In `y` case: elements above current one jump up, and elements below current one - jump down. | ||
In `x` case: elements before current one jump to the left, and elements after current one - jump to the right. | ||
In `x` / `grid` case: elements before current one jump to the left, and elements after current one - jump to the right. | ||
|
||
To change this property, define `spacing` on `sortable-item` (default is `0`): | ||
|
||
|
@@ -135,7 +137,7 @@ The classes look like this: | |
<li class="sortable-item is-activated">...</li> | ||
``` | ||
|
||
In our [example app.css](tests/dummy/app/styles/app.css) we apply a | ||
In our [example app.css](docs/app/styles/app.css) we apply a | ||
transition of `.125s` in the default case: | ||
|
||
```css | ||
|
@@ -174,7 +176,7 @@ removed. Use this class to add a visual indicator that the item is selected and | |
### Drag Actions | ||
|
||
The `onDragStart` and `onDragStop` actions are available for the | ||
`sortable-item`s. You can provide an action name to listen to these actions to | ||
`sortable-item`s. You can provide an action to listen to these actions to | ||
be notified when an item is being dragged or not. | ||
|
||
When the action is called, the item's model will be provided as the only | ||
|
@@ -402,24 +404,30 @@ For modifiers, please read this [migration guide](/MIGRATION_GUIDE_MODIFIERS.md) | |
|
||
## Developing | ||
|
||
### Requirement | ||
|
||
You need to install nodejs and [pnpm](https://pnpm.io/installation). | ||
The specific versions you need, you can find [here](package.json#L19-L22) | ||
|
||
### Setup | ||
|
||
```sh | ||
$ git clone [email protected]:adopted-ember-addons/ember-sortable | ||
$ cd ember-sortable | ||
$ ember install | ||
$ pnpm install | ||
``` | ||
|
||
### Dev Server | ||
|
||
```sh | ||
$ cd test-app | ||
$ ember serve | ||
``` | ||
|
||
### Running Tests | ||
|
||
```sh | ||
$ npm test | ||
$ pnpm run test | ||
``` | ||
|
||
### Publishing Demo | ||
|