From b8ffbb8dd297ec6a9a1199ea93c719ba97c02e6a Mon Sep 17 00:00:00 2001 From: Dan Holmsand Date: Sat, 22 Feb 2014 17:24:22 +0100 Subject: [PATCH] Tweak clock demo --- demo/reagentdemo/common.cljs | 8 +-- demo/reagentdemo/news/binaryclock.cljs | 70 +++++++++----------------- demo/reagentdemo/news/clockpost.cljs | 54 +++++++++++++++++--- demo/reagentdemo/syntax.cljs | 3 +- site/demo.css | 27 +++++----- 5 files changed, 94 insertions(+), 68 deletions(-) diff --git a/demo/reagentdemo/common.cljs b/demo/reagentdemo/common.cljs index b529f57..77f2cd2 100644 --- a/demo/reagentdemo/common.cljs +++ b/demo/reagentdemo/common.cljs @@ -34,7 +34,7 @@ (defn src-for [funmap defs] [:pre (-> funmap (src-for-names defs) syntaxify)]) -(defn demo-component [{:keys [comp src complete]}] +(defn demo-component [{:keys [comp src complete no-heading]}] (let [showing (atom true)] (fn [] [:div @@ -45,7 +45,8 @@ (swap! showing not) false)} (if @showing "hide" "show")] - [:h3.demo-heading "Example "] + (when-not no-heading + [:h3.demo-heading "Example "]) (when @showing (if-not complete [:div.simple-demo [comp]] @@ -53,6 +54,7 @@ (if @showing (if src [:div.demo-source.clearfix - [:h3.demo-heading "Source"] + (when-not no-heading + [:h3.demo-heading "Source"]) src] [:div.clearfix]))]))) diff --git a/demo/reagentdemo/news/binaryclock.cljs b/demo/reagentdemo/news/binaryclock.cljs index 3c4070a..42fa6d2 100644 --- a/demo/reagentdemo/news/binaryclock.cljs +++ b/demo/reagentdemo/news/binaryclock.cljs @@ -1,70 +1,50 @@ (ns reagentdemo.news.binaryclock - (:require [reagent.core :as r :refer [atom]] - [reagent.debug :refer-macros [dbg println]])) + (:require [reagent.core :as r :refer [atom]])) (defn cell [n bit] - [:div.clock.cell {:class (if (bit-test n bit) - 'light - 'dark)}]) + [:div.clock-cell {:class (if (bit-test n bit) + "light" + "dark")}]) (defn column [n] - [:div.clock.col + [:div.clock-col [cell n 3] [cell n 2] [cell n 1] [cell n 0] - [:div.clock.cell n]]) + [:div.clock-cell n]]) (defn column-pair [n] - [:div.clock.colpair + [:div.clock-pair [column (quot n 10)] [column (mod n 10)]]) -(defn legend [& numbers] - (into [:div.clock.col.legend] - (map (partial vector :div.clock.cell) numbers))) +(defn legend [& items] + (into [:div.clock-col.clock-legend] + (map (partial vector :div.clock-cell) + items))) -(defn clock [time show-ms toggle-ms] - [:div.clock.main {:on-click toggle-ms - :class (when show-ms 'wide)} +(defn clock [date show-100s toggle-100s] + [:div.clock-main {:on-click toggle-100s + :class (when show-100s "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) + [column-pair (.getHours date)] + [column-pair (.getMinutes date)] + [column-pair (.getSeconds date)] + (when show-100s + [column-pair (-> (.getMilliseconds date) (quot 10))])]) -(def clock-state (atom {:show-ms false - :time (js/Date.)})) +(def clock-state (atom {:time (js/Date.) + :show-100s false})) (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 + (let [{:keys [time show-100s]} @clock-state] + (if show-100s (r/next-tick update-time) (js/setTimeout update-time 333)) - [clock-with-timing time show-ms - #(swap! clock-state update-in [:show-ms] not)])) + [clock time show-100s + #(swap! clock-state update-in [:show-100s] not)])) diff --git a/demo/reagentdemo/news/clockpost.cljs b/demo/reagentdemo/news/clockpost.cljs index efd8305..beb6b60 100644 --- a/demo/reagentdemo/news/clockpost.cljs +++ b/demo/reagentdemo/news/clockpost.cljs @@ -6,29 +6,71 @@ [reagentdemo.common :as common :refer [demo-component]] [reagentdemo.news.binaryclock :as binaryclock])) -(def funmap (-> ::this get-source common/fun-map)) +(def funmap (-> "reagentdemo/news/binaryclock.cljs" + get-source common/fun-map)) (def src-for (partial common/src-for funmap)) +(defn fn-src [& parts] + [demo-component {:src (src-for (vec parts)) + :no-heading true}]) (defn main [{:keys [summary]}] (let [head "Binary clock"] [:div.reagent-demo [:h1 [link {:href main} head]] - [title (str "Reagent 0.4.0: " head)] + [title head] [:div.demo-text - [:h2 "Binary clock"] + (when-not summary + [:div + ;; [demo-component {:comp binaryclock/main}] + [binaryclock/main] + [:p [:strong "Click to toggle 1/100th seconds."]]]) - [:p "x"] + [:h2 "A simple binary clock in Reagent"] + + [:p "some text"] (if summary [link {:href main :class 'news-read-more} "Read more"] [:div.demo-text - [:p "x"] - [demo-component {:comp binaryclock/main}]])]])) + [:p "We start with the basics: The clock is built out of + cells, that are light or dark if the bit they correspond to + is set."] + + [fn-src :cell] + + [:p "Cells are combined into columns of four bits, with a + decimal digit at the bottom."] + + [fn-src :column] + + [:p "Columns are in turn combined into pairs:"] + + [fn-src :column-pair] + + [:p "We'll also need the legend on the left side:"] + + [fn-src :legend] + + [:p "We combine these element into a component that shows the + legend, hours, minutes and seconds; and optionally 1/100 + seconds. It also responds to clicks."] + + [fn-src :clock] + + [:p "We also need to keep track of the time, and of the + detail shown, in a Reagent atom. And a function to update the + time."] + + [fn-src :clock-state :update-time] + + [:p "And finally we use the clock component like this:"] + + [fn-src :main]])]])) (swap! page-map assoc "news/binary-clock.html" main) diff --git a/demo/reagentdemo/syntax.cljs b/demo/reagentdemo/syntax.cljs index 6a8ddd0..0376db1 100644 --- a/demo/reagentdemo/syntax.cljs +++ b/demo/reagentdemo/syntax.cljs @@ -9,7 +9,8 @@ "filter" "vals" "count" "complement" "identity" "dotimes" "update-in" "sorted-map" "inc" "dec" "false" "true" "not" "=" "partial" "first" "second" "rest" "list" "conj" - "drop" "when-let" "if-let" "add-watch"}) + "drop" "when-let" "if-let" "add-watch" "mod" "quot" + "bit-test" "vector"}) (def styles {:comment {:style {:color "gray" :font-style "italic"}} diff --git a/site/demo.css b/site/demo.css index 670dffa..4cd17e8 100644 --- a/site/demo.css +++ b/site/demo.css @@ -188,43 +188,44 @@ ul.nav > li.brand > a { /* Binary clock */ -.clock.main { +.clock-main { background: #333; color: #cdcdcd; - padding-top: 20px; + padding-top: 55px; padding-left: 20px; float: left; font-size: 28px; line-height: 34px; width: 620px; + cursor: pointer; } -.clock.main.wide { - width: 800px; +.clock-main.wide { + width: 790px; } -.clock.cell { +.clock-cell { width: 55px; height: 55px; text-align: center; margin: 0 20px 20px 0; } -.clock.cell.dark { +.clock-cell.dark { background-color: #454545; } -.clock.cell.light { +.clock-cell.light { background-color: #eee; } -.clock.col { +.clock-col { margin: 0; float: left; } -.clock.legend>.cell { - margin-top: "10px" +.clock-legend > .clock-cell { + margin-top: 10px; } -.clock.colpair { +.clock-pair { margin: 0; float: left; } -.clock.colpair:not(:last-child) { +.clock-pair:not(:last-child) { margin-right: 20px; - border-right 1px solid #454545; + /* border-right: 1px solid #454545; */ }