Advertisement
Guest User

Untitled

a guest
Jan 26th, 2015
172
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.29 KB | None | 0 0
  1. (ns utils.transition
  2. (:require-macros [cljs.core.async.macros :refer [go go-loop]])
  3. (:require [cljs.core.async :as async :refer [<! put! chan sub timeout]]
  4. [plumbing.core :refer [update map-vals] :refer-macros [defnk fnk fn->]]
  5. [bardo.ease :as ease]
  6. [bardo.interpolate :as intrpl]
  7. [cljs-time.core :as t]
  8. [cljs-time.coerce :as tc]
  9. [om.core :as om :include-macros true]
  10. [om-tools.core :refer-macros [defcomponentk]]
  11. [sablono.core :as html :refer-macros [html]]))
  12.  
  13. (defcomponentk component-interpolator
  14. [data
  15. owner
  16. [:opts
  17. component
  18. {interpolator (fnk [{prev nil} next] ;; views are (partial contructor data)
  19. (fn [t]
  20. (next)))}
  21. {changed? not=}
  22. {duration 1000}
  23. {ease (ease/ease :linear)}]]
  24. (init-state [_]
  25. {:start (t/now)
  26. :interpolate (interpolator {:next (partial component data)})})
  27. (will-receive-props [_ next-props]
  28. (let [prev-props (om/get-props owner)]
  29. (when (changed? prev-props next-props)
  30. (om/set-state! owner :start (t/now))
  31. (->> {:next (partial component next-props)
  32. :prev (partial component prev-props)}
  33. interpolator
  34. (om/set-state! owner :interpolate)))))
  35. (render-state [_ {:keys [start interpolate]}]
  36. (let [t (- (tc/to-long (t/now)) (tc/to-long start))]
  37. (when (< t duration)
  38. (go
  39. (<! (timeout 0))
  40. (om/refresh! owner)))
  41. (interpolate (ease (/ t duration))))))
  42.  
  43. (defnk fade-pages [{prev nil} next]
  44. (let [opacity (intrpl/interpolate {:prev 1
  45. :next 0}
  46. {:prev 0
  47. :next 1})]
  48. (fn [t]
  49. (let [opacity (map-vals (ease/clamp identity) (opacity t))]
  50. (html
  51. [:div.full
  52. (when prev
  53. [:div.full.fixed.top.left
  54. {:style {:opacity (:prev opacity)}}
  55. (prev)])
  56. [:div.full.fixed.top.left
  57. {:style {:opacity (:next opacity)}}
  58. (next)]])))))
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement