cyclejs-community / cyclejs-sortable

Makes all children of a selected component sortable

cyclejs-sortable

Makes all children of a selected component sortable

Github Repo: https://github.com/cyclejs-community/cyclejs-sortable

Full documentation: https://cyclejs-community.github.io/cyclejs-sortable/

NPM: https://www.npmjs.com/package/cyclejs-sortable

Examples

You can check out live versions of the examples here:

• simple: https://cyclejs-community.github.io/cyclejs-sortable/examples/simple/
• horizontal: https://cyclejs-community.github.io/cyclejs-sortable/examples/horizontal/

Installation

npm install --save cyclejs-sortable

Basic Usage

For more information see the examples

const main = isolate(
    makeSortable(Component, { itemSelector: 'div > div' }),
    'myScope'
);

function Component(sources)
{
    return {
        DOM: xs.of(div([
            div(['one']),
            div(['two']),
            div(['three']),
            div(['four'])
        ]));
    }
}

cyclejs-sortable's Issues

restrictMovementArea didn't seem to work

If you take the example in cyclejs/examples/http-search-github, I tried to add this library by including this line:

  // Convert the stream of HTTP responses to virtual DOM elements.
  const vtree$ = sources.HTTP.select('github')
    .flatten()
    .map(res => res.body.items)
    .startWith([])
    .map(results =>
      div([
        label('.label', 'Search:'),
        input('.field', {attrs: {type: 'text'}}),
        hr(),
        ul('.search-results', results.map(result =>
          li('.search-result', [
            a({attrs: {href: result.html_url}}, result.name)
          ])
        ))
      ])
-   );
+   ).compose(makeSortable(sources.DOM, { restrictMovementArea: '.search-results' }));

Apparently it added .x-sortable-item to all of the elements under the div. I would expect only li elements under ul.search-results would get the .x-sortable-item.

package.json "main" broken

"main": "makeSortable.js" should be "main": "build/makeSortable.js" I believe. Otherwise, import {makeSortable} from 'cyclejs-sortable' won't work as the bundler can't find cyclejs-sortable

Empty collection causes crash when handle not configured in options

In V2.2.2, if there are no children in the parent element to start and no handle option configured the lib crashes since it can't find a child from which to extract the child class...

Link to hosted working examples

Would it be possible to host some examples for users to play with?

Thanks! Looking forward to to trying this library

Olly

Allow for multiple stream libraries

I have to use adapt, but I'm not completely sure if xs.fromObservable just works with all stream libs or if I have to do something else for the incoming stream

Maybe @staltz can help here?

Add Update event on mouseup

Fingure out how to notify the user of makeSortable that the order changed.
Ideas:

• Dispatch custom event on element
• Add callback to options

Bug when moving an item too quickly

This works because I did it slowly:

This doesn't because I moved it quickly:

PS: overall I'm loving the idea of this library and the prospect of making any UI easily sortable with one line of code. I just think it needs some polishing first.

Touch support

Hi there, do you have any plans to support touch devices? Thanks!

Losing mouseleave when mouse leaves viewport

I tested in Firefox desktop and if I drag and the mouse goes out of the viewport (e.g. if it goes near the address bar) then my mouseleave isn't computed anymore and it's stuck with dragging.