Use non-trivial selector for horizontal example

Author: jvanbruegge

README.md

@@ -12,13 +12,6 @@ NPM: https://www.npmjs.com/package/cyclejs-sortable
 You can check out live versions of the [examples](./examples/) here:
 - [simple](./examples/simple/src/index.ts): https://cyclejs-community.github.io/cyclejs-sortable/examples/simple/
 - [horizontal](./examples/horizontal/src/index.ts): https://cyclejs-community.github.io/cyclejs-sortable/examples/horizontal/
-- [parentSelector](./examples/parentSelector/src/index.ts): https://cyclejs-community.github.io/cyclejs-sortable/examples/parentSelector/
-- [updateEvent](./examples/updateEvent/src/index.ts): https://cyclejs-community.github.io/cyclejs-sortable/examples/updateEvent/
-
-## Required Polyfills
-The code uses a few ES6 features, so you might need an es6 polyfill like `babel-polyfill`
-
-The use the `updateOrder Event` in IE you have to add a CustomEvent constructor polyfill like https://www.npmjs.com/package/custom-event
 
 ## Installation
 
@@ -28,16 +21,20 @@ The use the `updateOrder Event` in IE you have to add a CustomEvent constructor
 For more information see the [examples](https://github.com/SuperManitu/cyclejs-sortable/tree/master/examples)
 
 ```
-function main(sources)
+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'])
-        ]))
-        .compose(makeSortable(sources.DOM))
+        ]));
     }
 }
 ```

examples/horizontal/src/index.ts

@@ -13,14 +13,14 @@ import {
 
 import { makeSortable } from '../../../src/makeSortable';
 
-type Sources = {
+interface Sources {
     DOM: DOMSource;
-};
+}
 
-type Sinks = {
+interface Sinks {
     DOM?: Observable<VNode>;
-    sortable?: Observable<boolean>;
-};
+    drag?: Observable<boolean>;
+}
 
 function userSelectDriver(sort$): void {
     sort$.addListener({
@@ -40,11 +40,11 @@ function userSelectDriver(sort$): void {
 
 function main(sources: Sources): Sinks {
     const sinks = makeSortable(Child, {
-        itemSelector: '.li'
+        itemSelector: 'ul > li'
     })(sources);
 
     return {
-        ...sinks,
+        drag: sinks.drag,
         DOM: sinks.DOM.map(dom =>
             div([h3('Horizontal too!'), p('this is running with RxJS'), dom])
         )
@@ -53,13 +53,13 @@ function main(sources: Sources): Sinks {
 
 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'])
+        ul([
+            li(['Option 1']),
+            li(['Option 2']),
+            li(['Option 3']),
+            li(['Option 4']),
+            li(['Option 5']),
+            li(['Option 6'])
         ])
     );
 
@@ -70,5 +70,5 @@ function Child({ DOM }: Sources): Sinks {
 
 run(main, {
     DOM: makeDOMDriver('#app'),
-    sortable: userSelectDriver
+    drag: userSelectDriver
 });

src/makeSortable.ts

@@ -96,7 +96,7 @@ export function makeSortable(
         return {
             ...sinks,
             DOM: adapt(vdom$),
-            sortable: adapt(dragInProgress$)
+            drag: adapt(dragInProgress$)
         };
     };
 }