Scarlet Dame pleasetrythisathome
pleasetrythisathome
/ gist:9647688
Created
March 19, 2014 18:06
state animation for React.js using d3.js and some underscore.js sugar
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| animate: function(attr, targetValue, duration, ease) { | |
| var cmp = this; | |
| var interpolator; | |
| if (_.isFunction(targetValue)) { | |
| interpolator = targetValue; | |
| } else { | |
| interpolator = d3.interpolate(this.state[attr], targetValue); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var component = React.createClass({ | |
| mixins: [React.Animate], | |
| getInitialState: function() { | |
| return { | |
| width: 100 | |
| }; | |
| }, | |
| render: function() { | |
| var heightBounds = [50, 100]; | |
pleasetrythisathome
/ index.html
Last active
August 29, 2015 13:57
React port of d3 choropleth at http://bl.ocks.org/mbostock/4060606
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .counties { | |
| fill: none; | |
| } | |
| .states { | |
| fill: none; |
pleasetrythisathome
/ multi.cljs
Last active
August 29, 2015 13:58
stab at multimethods for app view
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (def app-state (atom {:section :main | |
| :sections {:admin {:id :admin | |
| :title "Admin"} | |
| :main {:id :main | |
| :title "Main"} | |
| :other {:id :other | |
| :title "Other"}}})) | |
| (defn button | |
| [{:keys [id title] :as section} owner] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (defn validator | |
| [msg fn] | |
| (letfn [(validate [& args] | |
| (apply fn args))] | |
| (with-meta validate {:msg msg}))) | |
| (defn checker | |
| [& validators] | |
| (fn [v] | |
| (clojure.core/reduce (fn [errors validator] |
pleasetrythisathome
/ form.cljs
Last active
May 7, 2016 05:45
om forms - form parent local state as cursor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (def inputs [{:korks :email} | |
| {:korks [:name :first]} | |
| {:korks [:name :last]}]) | |
| (defn form [app owner] | |
| (reify | |
| om/IInitState | |
| (init-state [this] | |
| (reduce (fn [state {:keys [korks]}] | |
| (assoc-in state korks nil)) |
pleasetrythisathome
/ go_aware.cljs
Last active
August 29, 2015 14:04
Go block component lifecycle mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (defmixin go-block-aware | |
| (init-state [this] | |
| {:chans {:mounted (async/chan)}}) | |
| (will-unmount [this] | |
| (async/close! (om/get-state owner [:chans :mounted]))) | |
| (go [owner read-chan callback] | |
| (let [mounted (om/get-state owner [:chans :mounted])] | |
| (go-loop [] | |
| (when-some [v (first (async/alts! [read-chan exit-chan]))] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (defn animation-frame | |
| "Return a channel which will close on the nth next animation frame." | |
| ([] (animation-frame 1)) | |
| ([n] (animation-frame n (async/chan 1))) | |
| ([n out] | |
| (js/window.requestAnimationFrame | |
| (fn [timestamp] | |
| (if (= n 1) | |
| (do | |
| (async/put! out timestamp) |
pleasetrythisathome
/ control_loop.clj
Last active
August 29, 2015 14:06
play, pause, kill a go-loop
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (defn control-loop | |
| "calls f on each value read from read-chan | |
| returns a control channel that can :play, :pause, and :kill the read loop" | |
| ([f read-chan] (control-loop f read-chan (chan))) | |
| ([f read-chan control] | |
| (go-loop [action :play] | |
| (let [[v c] (alts! (condp = action | |
| :play [read-chan control] | |
| :pause [control]))] | |
| (when-not (nil? v) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (ns browser | |
| (:require-macros [cljs.core.async.macros :refer [go go-loop]]) | |
| (:require [goog.events :as events] | |
| [clojure.string :as str] | |
| [cljs.core.async :refer [put! <! chan]]) | |
| (:import goog.History | |
| goog.history.Html5History | |
| goog.history.Html5History.TokenTransformer | |
| goog.history.EventType)) |
OlderNewer