Tweak clock demo

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]))])))

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)]))

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)

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"}}

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; */
 }