Update examples for new DOMUser API #73

cyclejs · Feb 11, 2015 · 51fb635 · 51fb635
1 parent df6a5db
commit 51fb635
Show file tree

Hide file tree

Showing 10 changed files with 157 additions and 101 deletions.
diff --git a/rx-run/examples/custom-element/custom-element.js b/rx-run/examples/custom-element/custom-element.js
diff --git a/rx-run/examples/custom-element/.jshintrc → ...nthetic-examples/custom-element/.jshintrc b/rx-run/examples/custom-element/.jshintrc → ...nthetic-examples/custom-element/.jshintrc
diff --git a/rx-run/examples/synthetic-examples/custom-element/custom-element.js b/rx-run/examples/synthetic-examples/custom-element/custom-element.js
@@ -0,0 +1,92 @@
+var h = Cycle.h;
+var Rx = Cycle.Rx;
+
+Cycle.registerCustomElement('ticker', function (element, Properties) {
+  var TickerModel = Cycle.createModel(function (Properties, Intent) {
+    return {
+      color$: Properties.get('color$')
+        .takeUntil(Intent.get('stop$'))
+        .merge(Intent.get('stop$').map(function () { return '#FF0000'; })),
+      x$: Rx.Observable.interval(50).takeUntil(Intent.get('stop$')),
+      y$: Rx.Observable.interval(100).takeUntil(Intent.get('stop$'))
+    };
+  });
+
+  var TickerView = Cycle.createView(function (Model) {
+    return {
+      vtree$: Rx.Observable.combineLatest(
+        Model.get('color$'),
+        Model.get('x$'),
+        Model.get('y$'),
+        function (color, x, y) {
+          return h('div.ticker', {
+            style: {'color': color, 'background-color': '#ECECEC'}
+          }, [
+            h('h4', 'x' + x + ' ' + color),
+            h('h1', 'Y' + y + ' ' + color),
+            h('button.remove-btn', {onclick: 'removeClick$'}, 'Remove')
+          ]);
+        }
+      )
+    };
+  });
+
+  var TickerUser = Cycle.createDOMUser(element);
+
+  var TickerIntent = Cycle.createIntent(function (User) {
+    var removeClicks$ = User.event$('.remove-btn', 'click');
+    return {
+      stop$: removeClicks$.map(function () { return 'stop'; }),
+      remove$: removeClicks$.map(function () { return 'remove'; }).delay(500)
+    };
+  });
+
+  TickerUser
+  .inject(TickerView)
+  .inject(TickerModel)
+  .inject(Properties, TickerIntent)
+  [1].inject(TickerUser);
+
+  return {
+    remove$: TickerIntent.get('remove$')
+  };
+});
+
+var Model = Cycle.createModel(function (Intent) {
+  function makeRandomColor() {
+    var hexColor = Math.floor(Math.random() * 16777215).toString(16);
+    while (hexColor.length < 6) {
+      hexColor = '0' + hexColor;
+    }
+    hexColor = '#' + hexColor;
+    return hexColor;
+  }
+
+  return {
+    color$: Rx.Observable.interval(1000)
+      .map(makeRandomColor)
+      .startWith('#000000'),
+    tickerExists$: Rx.Observable.just(true)
+      .merge(Intent.get('removeTicker$').map(function () { return false; }))
+  };
+});
+
+var View = Cycle.createView(function (Model) {
+  return {
+    vtree$: Rx.Observable.combineLatest(Model.get('color$'), Model.get('tickerExists$'),
+      function (color, tickerExists) {
+        return h('div#the-view', [
+          tickerExists ? h('ticker.ticker', {color: color}) : null
+        ]);
+      }
+    )
+  };
+});
+
+var User = Cycle.createDOMUser('.js-container');
+
+var Intent = Cycle.createIntent(function (User) {
+  return {removeTicker$: User.event$('.ticker', 'remove')};
+});
+
+User.inject(View).inject(Model).inject(Intent).inject(User);
diff --git a/rx-run/examples/custom-element/index.html → ...thetic-examples/custom-element/index.html b/rx-run/examples/custom-element/index.html → ...thetic-examples/custom-element/index.html
@@ -8,7 +8,7 @@
   </head>
   <body>
     <div class="js-container"></div>
-    <script src="../../dist/cycle.js"></script>
-    <script src="./custom-element.js"></script>
+    <script src="../../../dist/cycle.js"></script>
+    <script src="custom-element.js"></script>
   </body>
 </html>
diff --git a/rx-run/examples/simple/.jshintrc → ...thetic-examples/redirected-view/.jshintrc b/rx-run/examples/simple/.jshintrc → ...thetic-examples/redirected-view/.jshintrc
diff --git a/rx-run/examples/synthetic-examples/redirected-view/example.js b/rx-run/examples/synthetic-examples/redirected-view/example.js
@@ -0,0 +1,39 @@
+var HelloModel = Cycle.createModel(function (Intent) {
+  return {name$: Intent.get('changeName$').startWith('')};
+});
+
+var HelloView = Cycle.createView(function (Model) {
+  return {
+    vtree$: Model.get('name$')
+      .map(function (name) {
+        return Cycle.h('div', {}, [
+          Cycle.h('label', 'Name:'),
+          Cycle.h('input.myinput', {attributes: {type: 'text'}}),
+          Cycle.h('hr'),
+          Cycle.h('h1', 'Hello ' + name)
+        ]);
+      })
+  };
+});
+
+var ProxyView = Cycle.createView(function (View) {
+  return {
+    vtree$: View.get('vtree$')
+  };
+});
+
+var HelloUser = Cycle.createDOMUser('.js-container');
+
+var HelloIntent = Cycle.createIntent(function (User) {
+  return {
+    changeName$: User.event$('.myinput', 'input')
+      .map(function (ev) { return ev.target.value; })
+  };
+});
+
+HelloUser
+.inject(ProxyView)
+.inject(HelloView)
+.inject(HelloModel)
+.inject(HelloIntent)
+.inject(HelloUser);
diff --git a/rx-run/examples/synthetic-examples/redirected-view/index.html b/rx-run/examples/synthetic-examples/redirected-view/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+  <meta name="description" content="Hello World Cycle Example"/>
+  <title>Hello World Cycle Example</title>
+</head>
+<body>
+    <div class="js-container"></div>
+    <script src="../../../dist/cycle.js"></script>
+    <script src="./example.js"></script>
+</body>
+</html>
diff --git a/rx-run/examples/synthetic-examples/simple/.jshintrc b/rx-run/examples/synthetic-examples/simple/.jshintrc
@@ -0,0 +1,3 @@
+{
+  "globals": ["Cycle"]
+}
diff --git a/rx-run/examples/simple/index.html → ...ples/synthetic-examples/simple/index.html b/rx-run/examples/simple/index.html → ...ples/synthetic-examples/simple/index.html
@@ -9,7 +9,7 @@
   <body>
     <div class="js-container1"></div>
     <div class="js-container2"></div>
-    <script src="../../dist/cycle.js"></script>
-    <script src="./simple.js"></script>
+    <script src="../../../dist/cycle.js"></script>
+    <script src="simple.js"></script>
   </body>
 </html>
diff --git a/rx-run/examples/simple/simple.js → ...mples/synthetic-examples/simple/simple.js b/rx-run/examples/simple/simple.js → ...mples/synthetic-examples/simple/simple.js
@@ -33,10 +33,10 @@ var FooIntent = Cycle.createIntent(function (User) {
   };
 });
 
-//var BarModel = FooModel.clone();
-//var BarView = FooView.clone();
-//var BarUser = Cycle.createDOMUser('.js-container2');
-//var BarIntent = FooIntent.clone();
+var BarModel = FooModel.clone();
+var BarView = FooView.clone();
+var BarUser = Cycle.createDOMUser('.js-container2');
+var BarIntent = FooIntent.clone();
 
 FooUser.inject(FooView).inject(FooModel).inject(FooIntent).inject(FooUser);
-//BarUser.inject(BarView).inject(BarModel).inject(BarIntent).inject(BarUser);
+BarUser.inject(BarView).inject(BarModel).inject(BarIntent).inject(BarUser);