Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (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)]])))))
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement