new file mode 100644

@@ -0,0 +1,4 @@

+/.boot

+/target

+/.nrepl-port

+/.repl-history

new file mode 100644

@@ -0,0 +1,42 @@

+# history_app

+

+A [Hoplon][3] project designed to...well, that part is up to you.

+

+## Dependencies

+

+- java 1.7+

+- [boot][1]

+

+## Usage

+### Development

+1. Start the `dev` task. In a terminal run:

+    ```bash

+    $ boot dev

+    ```

+    This will give you a  Hoplon development setup with:

+    - auto compilation on file changes

+    - audible warning for compilation success or failures

+    - auto reload the html page on changes

+    - Clojurescript REPL

+

+2. Go to [http://localhost:8000][2] in your browser. You should see "Hello, Hoplon!".

+

+3. If you edit and save a file, the task will recompile the code and reload the

+   browser to show the updated version.

+

+### Production

+1. Run the `prod` task. In a terminal run:

+    ```bash

+    $ boot prod

+    ```

+

+2. The compiled files will be on the `target/` directory. This will use

+   advanced compilation and prerender the html.

+

+## License

+

+Copyright © 2016, **Your Name Goes Here**

+

+[1]: http://boot-clj.com

+[2]: http://localhost:8000

+[3]: http://hoplon.io

new file mode 100644

@@ -0,0 +1,25 @@

+* {

+    box-sizing: border-box;

+}

+

+body {

+    margin: 0;

+    padding: 0;

+}

+

+h2 {

+    color: blue;

+    width: 100%;

+    text-align: center;

+    margin: 2em;

+}

+

+#container {

+    width: 100vw;

+    height: 100vh;

+    border: thin solid black;

+}

+

+#line {

+    height: 3em;

+}

new file mode 100644

@@ -0,0 +1,4 @@

+#https://github.com/boot-clj/boot

+BOOT_CLOJURE_VERSION=1.8.0

+BOOT_VERSION=2.6.0

+BOOT_EMIT_TARGET=no

new file mode 100644

@@ -0,0 +1,45 @@

+(set-env!

+  :dependencies '[[adzerk/boot-cljs          "1.7.228-2"]

+                  [adzerk/boot-reload        "0.4.13"]

+                  [secretary "1.2.3"]

+                  [com.cemerick/url "0.1.1"]

+                  [funcool/cuerdas "2.0.1"]

+                  [hoplon/hoplon             "6.0.0-alpha17"]

+                  [org.clojure/clojure       "1.8.0"]

+                  [org.clojure/clojurescript "1.9.293"]

+                  [tailrecursion/boot-jetty  "0.1.3"]

+                  [adzerk/boot-cljs-repl     "0.3.3"]

+                  [com.cemerick/piggieback   "0.2.1"  :scope "test"]

+                  [weasel                    "0.7.0"  :scope "test"]

+                  [org.clojure/tools.nrepl   "0.2.12" :scope "test"]

+                  ]

+

+  :source-paths #{"src"}

+  :asset-paths  #{"assets"})

+

+(require

+  '[adzerk.boot-cljs         :refer [cljs]]

+  '[adzerk.boot-cljs-repl    :refer [cljs-repl-env start-repl]]

+  '[adzerk.boot-reload       :refer [reload]]

+  '[hoplon.boot-hoplon       :refer [hoplon prerender]]

+  '[tailrecursion.boot-jetty :refer [serve]])

+

+(deftask dev

+  "Build history_app for local development."

+  []

+  (comp

+    (watch)

+    (speak)

+    (hoplon)

+    (reload)

+    (cljs-repl-env)

+    (cljs)

+    (serve :port 8123)))

+

+(deftask prod

+  "Build history_app for production deployment."

+  []

+  (comp

+    (hoplon)

+    (cljs :optimizations :advanced)

+    (target :dir #{"target"})))

new file mode 100644

@@ -0,0 +1,38 @@

+(ns app.route

+  (:require [clojure.string]

+            [javelin.core :as j]

+            [hoplon.core :as h]

+            [cuerdas.core]

+            [cemerick.url]

+            [secretary.core]))

+

+(def r (h/route-cell))

+

+(def path

+  (j/cell= (-> r

+               (cuerdas.core/strip-prefix "#")

+               (cuerdas.core/strip-prefix "/")

+               (#(str "/" %))

+               (#(do (print "The url is: " %)

+                     %)))))

+

+

+(defn generate-route

+  ([path] (generate-route path nil))

+  ([path query]

+   {:pre [(sequential? path) (or (nil? query) (map? query))]}

+   (str "#/"

+        (clojure.string/join "/" path)

+        (if query

+          (str "?"

+               (cemerick.url/map->query query))))))

+

+(defn set-route!

+  "Set the URL hash to work fo the given route."

+  ([route]

+   (if (string? route)

+     (set! (.-hash (.-location js/window))

+           route)

+     (set-route! (generate-route route))))

+  ([path query]

+   (set-route! (generate-route path query))))

new file mode 100644

@@ -0,0 +1,140 @@

+(page "index.html"

+  (:require [cuerdas.core :as str]

+            [hoplon.svg :as svg]

+            [clojure.pprint :refer [cl-format]]))

+

+(defc state

+  {:elapsed-time 0

+   :total-time 300

+   :date-range [1776 2076]

+   :selected-date 1926

+   :topics ["American History" "European History"]})

+

+(defn fraction-to-date [fraction start-date end-date]

+  (.floor js/Math

+          (+ start-date

+             (* fraction

+                (- end-date

+                   start-date)))))

+

+

+(defc= start-date (get-in state [:date-range 0]))

+(defc= end-date (get-in state [:date-range 1]))

+(defc= date-range (- end-date start-date))

+

+(defc hovering nil)

+(defc hovered-fraction 0)

+(defc= hovered-date

+  (fraction-to-date hovered-fraction start-date end-date))

+(defc= hovered-date-as-fraction

+  (/ (- hovered-date start-date)

+     date-range))

+

+(defc= selected-date

+  (:selected-date state)

+  (partial swap! state assoc-in [:selected-date]))

+

+(defc= selected-fraction (/ (- selected-date

+                               start-date)

+                            date-range))

+

+(defc= topics

+  (:topics state))

+

+(defc= elapsed-time

+  (:elapsed-time state)

+  (partial swap! state assoc-in [:elapsed-time]))

+

+;;; Update total-time with the _difference_ between current and desired;

+(defc= total-time

+  (:total-time state)

+  (partial swap! state update-in [:total-time] +))

+

+(defc= remaining-time

+  (- total-time elapsed-time))

+

+(defc= time-percentage

+  (* 100 (/ elapsed-time total-time)))

+

+(defn num-to-time [num]

+  (cl-format nil "~2d:~2,'0d" (quot num 60) (mod num 60)))

+

+(defelem time-display [_ _ _]

+  (div (div :class "remaining-time" :style "display: inline-block; margin: 0 1em;"

+            (cell= (str "Remaining Time: " (num-to-time remaining-time))))

+       (div :class "elapsed-time" :style "display: inline-block; margin: 0 1em;"

+            (cell= (str "Time Spent:" (num-to-time elapsed-time))))))

+

+(defelem progress-bar [_ _ _]

+  (div {:style (cell= (str "background: hsl(" (- 117 (* 115 (/ time-percentage 100))) ", 75%, 50%); "

+                           "height: 0.2em; position: fixed;top:0;left:0;width: "

+                           (.floor js/Math (+ 1 (/ (* 99 time-percentage) 100))) "vw;"))}))

+

+(defmethod do! :viewBox

+    [elem _ value]

+    (if (= false value)

+        (.removeAttribute elem "viewBox")

+        (.setAttribute elem "viewBox" value)))

+

+(defmethod do! :preserveAspectRatio

+    [elem _ value]

+    (if (= false value)

+        (.removeAttribute elem "preserveAspectRatio")

+        (.setAttribute elem "preserveAspectRatio" value)))

+

+(definterval elapsed-update-interval-id 1000

+  (swap! elapsed-time inc))

+

+(cell= (print "The state is:" state))

+

+(html

+ (head

+  (link :href "app.css" :rel "stylesheet")

+  (style "#line { width: 100%; display: block;}"))

+ 

+ (body

+  (progress-bar)

+  (div :id "container"

+       (h1 "You're bad at history")

+       (time-display)

+       (h2 "When did World War 1 start?")

+       (div :class "timeline"

+            :style "position: relative;"

+            (svg/svg :id "line" :height "20"

+                     :click #(this-as this

+                               (let* [bbox-width (.-width (.getBBox this))

+                                      bbox-left (.-x (.getBBox this))

+                                      click-x (.-offsetX %)]

+                                 (reset! selected-date

+                                         (fraction-to-date

+                                          (/ (- click-x bbox-left)

+                                             bbox-width)

+                                          @start-date

+                                          @end-date))))

+                     :mousemove #(this-as this

+                                   (reset! hovering true)

+                                   (let* [bbox-width (.-width (.getBBox this))

+                                          bbox-left (.-x (.getBBox this))

+                                          click-x (.-offsetX %)]

+                                     (reset! hovered-fraction

+                                             (/ (- click-x bbox-left)

+                                                bbox-width))))

+                     (svg/line :x1 "0" :y1 "12" :x2 "100%" :y2 "12" :stroke "blue")

+                     (when-tpl hovering

+                       (let [hovered-percentage (cell= (cl-format nil "~d%" (* 100 hovered-date-as-fraction)))]

+                         (svg/g (svg/circle :id "date-cursor"

+                                            {:cx hovered-percentage}

+                                            :cy "12" :r "10" :fill "transparent" :stroke-width 2 :stroke "red")

+                                (svg/text :id "cursor-text" {:x hovered-percentage} :y "32" :dx "-0.75em"

+                                          hovered-date ))))

+                     (svg/circle :id "date-sel" {:cx (cell= (str (* 100 selected-fraction) "%"))}

+                                 :cy "12" :r "9" :fill "#88f")

+                     (svg/text :id "cursor-text" {:x (cell= (cl-format nil "~d%" (* 100 selected-fraction)))} :y "32" :dx "-0.75em"

+                                          selected-date))

+            

+            (div :style "position: absolute; display:inline-block; margin-top: 1em;left: 0%" 1776)

+            (div :style "position: absolute; display:inline-block; margin-top: 1em; left: 33%" 1876)

+            (div :style "position: absolute; display:inline-block; margin-top: 1em; right: 33%" 1976)

+            (div :style "position: absolute; display:inline-block; margin-top: 1em; right: 0%" 2076)

+

+            ))))