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;">
  Current Size: <span id="elementSize">Loading...</span>
</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)))))))

[reimpl]: http://hhutch.github.io/cljs-closure-demos/ “Reimplementation of the Google Closure Demos in Clojurescript” class=external style=“border: solid black 1px;”