test.cljs

gistfile1.clj

(ns repl.test
  (:require [clojure.browser.repl :as repl]
            [clojure.string :as s]
            [goog.dom :as dom]
            [goog.fx.dom :as fx]))

(repl/connect "http://localhost:9000/repl")

(def j js/jQuery)

(defn init []
  (let [div (dom/createDom "div" (.strobj {"id" "foo"}))
        text (dom/createTextNode "Hello, world!")
        body (aget (dom/getElementsByTagNameAndClass "body") 0)]
    (dom/appendChild div text)
    (dom/appendChild body div)))

(defn fadein [el]
  (let [anim (fx/Fade. el 0 1 1000)]
    (. anim (play))))

(defn capitalize [s]
  (let [c (aget s 0)]
   (str (. c (toUpperCase)) (. s (substring 1 (.length s))))))

(defn camelcase [s]
  (let [[f & r] (. (name s) (split "-"))]
   (apply str f (map #(capitalize %) r))))

(defmulti parse (fn [p v] p))

(defmethod parse :width [_ v] (str v "px"))
(defmethod parse :height [_ v] (str v "px"))
(defmethod parse :top [_ v] (str v "px"))
(defmethod parse :left [_ v] (str v "px"))
(defmethod parse :padding [_ v] (->> v (map #(str % "px")) (s/join " ")))
(defmethod parse :default [_ v] v)

(defn set-styles! [el styles]
  (doseq [[k v] styles]
    (aset (.style el) (camelcase k) (parse k v))))

(defn to-seq [css-decl]
  (let [->seq (fn ->seq* [css-decl n]
                 (if (= (.length css-decl) n)
                   nil
                    (cons (aget css-decl n)
                          (->seq* css-decl (inc n)))))]
    (->seq css-decl 0)))

(defn styles [el]
  (into {} (for [p (to-seq (.style el))]
             [(keyword p) (aget (.style el) p)])))

(init)

(def foo (dom/getElement "foo"))

(comment
  ;; hmm we have to eval the ns form first before we can just eval the following
  (fadein foo)
  (set-styles! foo {:color "white"
                    :background-color "red"
                    :font-family "sans-serif"
                    :padding []
                    :width 200
                    :height 200})

  (set-styles! foo {:display "block"
                    :padding [0 20 0]})

  (styles foo)
  )