om blend example

build.boot

@@ -5,12 +5,14 @@
  :url "http://github.com/pleasetrythisathome/bardo"
  :dependencies (concat (->>
                         '[[adzerk/boot-cljs "0.0-2371-27"]
-                         [adzerk/boot-cljs-repl "0.1.6"]
-                         [adzerk/boot-reload "0.1.8"]
-                         [deraen/boot-cljx "0.1.0"]
-                         [pandeiro/boot-http "0.2.0"]
-                         [com.cemerick/double-check "0.6.1"]
-                         [org.clojure/tools.namespace "0.2.7"]]
+                          [adzerk/boot-cljs-repl "0.1.6"]
+                          [adzerk/boot-reload "0.1.8"]
+                          [deraen/boot-cljx "0.1.0"]
+                          [pandeiro/boot-http "0.2.0"]
+                          [com.cemerick/double-check "0.6.1"]
+                          [org.clojure/tools.namespace "0.2.7"]
+                          [om "0.8.0-beta3"]
+                          [sablono "0.2.22" :exclusions [com.facebook/react]]]
                         (mapv #(conj % :scope "test")))
                        '[[org.clojure/clojure "1.7.0-alpha4"]
                          [org.clojure/clojurescript "0.0-2411"]
@@ -41,7 +43,7 @@
         (cljs-repl)
         (cljs :output-to "main.js"
               :optimizations :none
-              :unified true
+              ;;:unified true
               :source-map true
               :pretty-print true)
         (reload :port 3449)))

examples/om.cljs

@@ -0,0 +1,84 @@
+(ns bardo.examples.om
+  (:require-macros [cljs.core.async.macros :refer [go]])
+  (:require [bardo.ease :refer [wrap ease shift clamp]]
+            [bardo.interpolate :refer [interpolate into-lazy-seq mix blend chain pipeline]]
+            [bardo.transition :refer [transition]]
+            [om.core :as om :include-macros true]
+            [sablono.core :as html :refer-macros [html]]
+            [cljs.core.async :as async :refer [<! timeout]]
+
+            [adzerk.boot-reload.client :as reload]))
+
+(enable-console-print!)
+
+(defonce app-state {:pos {:x 0
+                          :y 0}})
+
+(defn now []
+  (.getTime (js/Date.)))
+
+(defn mover
+  [{:keys [x y]} owner {:keys [speed]
+                        :or {speed 2000}}]
+  (reify
+    om/IInitState
+    (init-state [_]
+      {:intrpl (interpolate {:x x :y y} {:x x :y y})
+       :start (now)})
+    om/IWillReceiveProps
+    (will-receive-props [_ {:keys [x y]}]
+      (let [{:keys [intrpl start]} (om/get-state owner)
+            t (/ (- (now) start) speed)
+            [px py] ((juxt :x :y) (om/get-props owner))
+            intrpl (if (< t 1)
+                     (-> intrpl
+                         (shift 0 1 t 1)
+                         (mix (interpolate (intrpl t) {:x x :y y})))
+                     (interpolate {:x px :y py}
+                                  {:x x :y y}))]
+        (om/set-state! owner :intrpl intrpl)
+        (om/set-state! owner :start (now))))
+    om/IRenderState
+    (render-state [_ {:keys [x y intrpl start]}]
+      (let [t (/ (- (now) start) speed)]
+        (when (< t 1)
+          (let [{:keys [x y]} (intrpl t)]
+            (go
+              (om/set-state! owner :x x)
+              (om/set-state! owner :y y)))))
+      (html
+       [:div
+        {:style {:position "fixed"
+                 :top y
+                 :left x
+                 :border "1px solid #ddd"
+                 :padding "5px"}}
+        [:div
+         "Location"]
+        [:div
+         (str "x: " (int x))]
+        [:div
+         (str "y: " (int y))]]))))
+
+(defn app-view
+  [data owner]
+  (reify
+    om/IRender
+    (render [this]
+      (html
+       [:div
+        {:on-click (fn [e]
+                     (om/update! data :pos {:x (.-pageX e)
+                                            :y (.-pageY e)}))
+         :style {:position "fixed"
+                 :width "100%"
+                 :height "100%"}}
+        "Click anywhere, click repeated in different corners to curve"
+        (om/build mover (:pos data))]))))
+
+(defn mount []
+  (om/root app-view app-state
+           {:target (. js/document (getElementById "root"))}))
+
+(mount)
+(reload/connect "ws://localhost:3449" {:on-jsload mount})

resources/index.html

@@ -1,6 +1,15 @@
 <!doctype html>
 <html>
+  <head>
+    <style>
+      body {margin: 0px}
+    </style>
+  </head>
   <body>
+    <div id="root"></div>
+    <script src="http://fb.me/react-0.11.2.js"></script>
+    <script src="out/goog/base.js" type="text/javascript"></script>
     <script type="text/javascript" src="main.js"></script>
+    <script type="text/javascript">goog.require("bardo.examples.om");</script>
   </body>
 </html>