2014-01-02
Experiments in ClojureScript

I tried out ClojureScript and used it to drive some experiments in this page.

#### An AnimationQueue Example

I adapted a Google Closure example from reimpl that had been ported to ClojureScript, and am using it as an example above. All it does it keep track of the dimensions of a div in the current window.

The code is partially in this current markdown page, and also in a separate animationqueue.cljs.

#### Another example in ClojureScript

I adapted a Google Closure example from reimpl that had been ported to ClojureScript, and am using it as an example below. All it does it keep track of the dimensions of a div in the current window.

The code is partially in this current markdown page, and also in a separate sizewatcher.cljs.

And here is the example running, where it keeps track of the div size as you resize the window.

Here is the HTML code for the example:

<script src="/js/blogclj.js"></script>
<div id="elementToWatch" style="max-width:50%; background-color:#009900; color:yellow;">
</div>

<script>
blogclj.setupSizeWatcher("elementToWatch", "elementToWatch");
</script>


Here is the ClojureScript code for the example, saved in file sizewatcher.cljs. Overall, it seems like pure AngularJS and Javascript could do this easier (see next example for comparison (TBD)):

(ns blogclj
(:require
[goog.dom :as dom]
[goog.events :as goog-events]
[goog.events.EventType :as event-type]
[goog.math.Size :as math-size]
[goog.style :as goog-style]
[goog.dom.ViewportSizeMonitor :as viewport-size]))

(defn ^:export setupSizeWatcher [elementToWatch elementSize]
(let [update-ui (fn [size]
(goog-style/setSize (dom/getElement elementToWatch) size)
(dom/setTextContent (dom/getElement elementSize) (. size (toString))))
vsm (goog.dom.ViewportSizeMonitor.)]
(update-ui (dom/getViewportSize))
(goog-events/listen vsm
event-type/RESIZE
(fn [e] (update-ui (. vsm (getSize)))))))