Fix horizontal reordering

Author: jvanbruegge

examples/horizontal/src/index.ts

@@ -1,42 +1,74 @@
 import { Observable } from 'rxjs';
 import { run } from '@cycle/rxjs-run';
-import { ul, li, div, h3, p, makeDOMDriver, DOMSource, VNode } from '@cycle/dom';
+import {
+    ul,
+    li,
+    div,
+    h3,
+    p,
+    makeDOMDriver,
+    DOMSource,
+    VNode
+} from '@cycle/dom';
 
 import { makeSortable } from '../../../src/makeSortable';
 
 type Sources = {
-    DOM : DOMSource;
+    DOM: DOMSource;
 };
 
 type Sinks = {
-    DOM : Observable<VNode>;
+    DOM?: Observable<VNode>;
+    sortable?: Observable<boolean>;
 };
 
-function main({ DOM } : Sources) : Sinks
-{
-    const vdom$ : Observable<VNode> = Observable.of(
-        div([
-            h3('Horizontal too!'),
-            p('this is running with RxJS'),
-            ul('.ul', [
-                li('.li', '', ['Option 1']),
-                li('.li', '', ['Option 2']),
-                li('.li', '', ['Option 3']),
-                li('.li', '', ['Option 4']),
-                li('.li', '', ['Option 5']),
-                li('.li', '', ['Option 6']),
-            ])
+function userSelectDriver(sort$): void {
+    sort$.addListener({
+        next(b) {
+            if (b) {
+                document.body.setAttribute(
+                    'style',
+                    '-webkit-user-select: none; -moz-user-select: none;' +
+                        ' -ms-user-select: none; user-select: none;'
+                );
+            } else {
+                document.body.removeAttribute('style');
+            }
+        }
+    });
+}
+
+function main(sources: Sources): Sinks {
+    const sinks = makeSortable(Child, {
+        itemSelector: '.li'
+    })(sources);
+
+    return {
+        ...sinks,
+        DOM: sinks.DOM.map(dom =>
+            div([h3('Horizontal too!'), p('this is running with RxJS'), dom])
+        )
+    };
+}
+
+function Child({ DOM }: Sources): Sinks {
+    const vdom$: Observable<VNode> = Observable.of(
+        ul('.ul', [
+            li('.li', '', ['Option 1']),
+            li('.li', '', ['Option 2']),
+            li('.li', '', ['Option 3']),
+            li('.li', '', ['Option 4']),
+            li('.li', '', ['Option 5']),
+            li('.li', '', ['Option 6'])
         ])
-    )
-    .let(makeSortable<Observable<VNode>>(DOM, {
-        parentSelector: '.ul'
-    }));
+    );
 
     return {
         DOM: vdom$
     };
 }
 
 run(main, {
-    DOM: makeDOMDriver('#app')
+    DOM: makeDOMDriver('#app'),
+    sortable: userSelectDriver
 });

examples/parentSelector/css/main.css

@@ -12,26 +12,22 @@ type Sinks = {
     DOM: Stream<VNode>;
 };
 
-function main({ DOM }: Sources): Sinks {
-    const vdom$: Stream<VNode> = xs
-        .of(
-            ul('.ul', [
-                li('.li', '', [
-                    'You have to hold for 500ms to start reordering'
-                ]),
-                li('.li', '', ['Option 2']),
-                li('.li', '', ['Option 3']),
-                li('.li', '', ['Option 4']),
-                li('.li', '', ['Option 5']),
-                li('.li', '', ['Option 6'])
-            ])
-        )
-        .compose(
-            makeSortable<Stream<VNode>>(DOM, {
-                ghostClass: '.ghost',
-                selectionDelay: 500
-            })
-        );
+const main = makeSortable(Child, {
+    itemSelector: '.li',
+    selectionDelay: 500
+});
+
+function Child({ DOM }: Sources): Sinks {
+    const vdom$: Stream<VNode> = xs.of(
+        ul('.ul', [
+            li('.li', '', ['You have to hold for 500ms to start reordering']),
+            li('.li', '', ['Option 2']),
+            li('.li', '', ['Option 3']),
+            li('.li', '', ['Option 4']),
+            li('.li', '', ['Option 5']),
+            li('.li', '', ['Option 6'])
+        ])
+    );
 
     return {
         DOM: vdom$