diff --git a/demo/reagentdemo/news.cljs b/demo/reagentdemo/news.cljs index 0391073..e7e63df 100644 --- a/demo/reagentdemo/news.cljs +++ b/demo/reagentdemo/news.cljs @@ -5,10 +5,12 @@ [reagentdemo.common :as common :refer [demo-component]] [reagentdemo.news.anyargs :as anyargs] [reagentdemo.news.async :as async] - [reagentdemo.news.undodemo :as undodemo])) + [reagentdemo.news.undodemo :as undodemo] + [reagentdemo.news.clockpost :as clock])) (defn main [] [:div + [clock/main {:summary true}] [anyargs/main {:summary true}] [async/main {:summary true}] [undodemo/main {:summary true}]]) diff --git a/demo/reagentdemo/news/binaryclock.cljs b/demo/reagentdemo/news/binaryclock.cljs new file mode 100644 index 0000000..3c4070a --- /dev/null +++ b/demo/reagentdemo/news/binaryclock.cljs @@ -0,0 +1,70 @@ +(ns reagentdemo.news.binaryclock + (:require [reagent.core :as r :refer [atom]] + [reagent.debug :refer-macros [dbg println]])) + +(defn cell [n bit] + [:div.clock.cell {:class (if (bit-test n bit) + 'light + 'dark)}]) + +(defn column [n] + [:div.clock.col + [cell n 3] + [cell n 2] + [cell n 1] + [cell n 0] + [:div.clock.cell n]]) + +(defn column-pair [n] + [:div.clock.colpair + [column (quot n 10)] + [column (mod n 10)]]) + +(defn legend [& numbers] + (into [:div.clock.col.legend] + (map (partial vector :div.clock.cell) numbers))) + +(defn clock [time show-ms toggle-ms] + [:div.clock.main {:on-click toggle-ms + :class (when show-ms 'wide)} + [legend 8 4 2 1] + [column-pair (.getHours time)] + [column-pair (.getMinutes time)] + [column-pair (.getSeconds time)] + (if show-ms + [column-pair (-> (.getMilliseconds time) + (quot 10))])]) + +(def clock-state (atom {:show-ms false + :time (js/Date.)})) + +(defn update-time [] + (swap! clock-state assoc :time (js/Date.))) + +(defn now [] + (.now js/Date)) + +(defn timing-wrapper [f] + (let [start-time (atom nil) + render-time (atom nil) + start #(reset! start-time (now)) + stop #(reset! render-time (- (now) @start-time)) + timed-f (with-meta f + {:component-will-mount start + :component-will-update start + :component-did-mount stop + :component-did-update stop})] + (fn [& args] + [:div + [:p [:em "render time: " @render-time "ms"]] + (into [timed-f] args)]))) + +(def clock-with-timing (timing-wrapper clock)) + +(defn main [] + (let [{:keys [show-ms time]} @clock-state] + (if show-ms + (r/next-tick update-time) + (js/setTimeout update-time 333)) + [clock-with-timing time show-ms + #(swap! clock-state update-in [:show-ms] not)])) diff --git a/demo/reagentdemo/news/clockpost.cljs b/demo/reagentdemo/news/clockpost.cljs new file mode 100644 index 0000000..efd8305 --- /dev/null +++ b/demo/reagentdemo/news/clockpost.cljs @@ -0,0 +1,34 @@ +(ns reagentdemo.news.clockpost + (:require [reagent.core :as r :refer [atom]] + [reagent.debug :refer-macros [dbg println]] + [reagentdemo.syntax :refer-macros [get-source]] + [reagentdemo.page :refer [title link page-map]] + [reagentdemo.common :as common :refer [demo-component]] + [reagentdemo.news.binaryclock :as binaryclock])) + +(def funmap (-> ::this get-source common/fun-map)) +(def src-for (partial common/src-for funmap)) + + +(defn main [{:keys [summary]}] + (let [head "Binary clock"] + + [:div.reagent-demo + [:h1 [link {:href main} head]] + [title (str "Reagent 0.4.0: " head)] + [:div.demo-text + + [:h2 "Binary clock"] + + [:p "x"] + + (if summary + [link {:href main + :class 'news-read-more} "Read more"] + [:div.demo-text + [:p "x"] + + [demo-component {:comp binaryclock/main}]])]])) + +(swap! page-map assoc + "news/binary-clock.html" main) diff --git a/site/demo.css b/site/demo.css index 7a2c7ca..670dffa 100644 --- a/site/demo.css +++ b/site/demo.css @@ -184,4 +184,47 @@ ul.nav > li.brand > a { .color-samples { clear: both; padding-top: 0.5em; -} \ No newline at end of file +} + +/* Binary clock */ + +.clock.main { + background: #333; + color: #cdcdcd; + padding-top: 20px; + padding-left: 20px; + float: left; + font-size: 28px; + line-height: 34px; + width: 620px; +} +.clock.main.wide { + width: 800px; +} +.clock.cell { + width: 55px; + height: 55px; + text-align: center; + margin: 0 20px 20px 0; +} +.clock.cell.dark { + background-color: #454545; +} +.clock.cell.light { + background-color: #eee; +} +.clock.col { + margin: 0; + float: left; +} +.clock.legend>.cell { + margin-top: "10px" +} +.clock.colpair { + margin: 0; + float: left; +} +.clock.colpair:not(:last-child) { + margin-right: 20px; + border-right 1px solid #454545; +}