component transitions

transition.cljs

(ns utils.transition
  (:require-macros [cljs.core.async.macros :refer [go go-loop]])
  (:require [cljs.core.async :as async :refer [<! put! chan sub timeout]]
            [plumbing.core :refer [update map-vals] :refer-macros [defnk fnk fn->]]
            [bardo.ease :as ease]
            [bardo.interpolate :as intrpl]
            [cljs-time.core :as t]
            [cljs-time.coerce :as tc]
            [om.core :as om :include-macros true]
            [om-tools.core :refer-macros [defcomponentk]]
            [sablono.core :as html :refer-macros [html]]))

(defcomponentk component-interpolator
  [data
   owner
   [:opts
    component
    {interpolator (fnk [{prev nil} next] ;; views are (partial contructor data)
                    (fn [t]
                      (next)))}
    {changed? not=}
    {duration 1000}
    {ease (ease/ease :linear)}]]
  (init-state [_]
              {:start (t/now)
               :interpolate (interpolator {:next (partial component data)})})
  (will-receive-props [_ next-props]
                      (let [prev-props (om/get-props owner)]
                        (when (changed? prev-props next-props)
                          (om/set-state! owner :start (t/now))
                          (->> {:next (partial component next-props)
                                :prev (partial component prev-props)}
                               interpolator
                               (om/set-state! owner :interpolate)))))
  (render-state [_ {:keys [start interpolate]}]
                (let [t (- (tc/to-long (t/now)) (tc/to-long start))]
                  (when (< t duration)
                    (go
                      (<! (timeout 0))
                      (om/refresh! owner)))
                  (interpolate (ease (/ t duration))))))

(defnk fade-pages [{prev nil} next]
  (let [opacity (intrpl/interpolate {:prev 1
                                     :next 0}
                                    {:prev 0
                                     :next 1})]
    (fn [t]
      (let [opacity (map-vals (ease/clamp identity) (opacity t))]
        (html
         [:div.full
          (when prev
            [:div.full.fixed.top.left
             {:style {:opacity (:prev opacity)}}
             (prev)])
          [:div.full.fixed.top.left
           {:style {:opacity (:next opacity)}}
           (next)]])))))