test.cljs

(ns virtual.test
  (:require-macros [reagent.ratom :refer [reaction]])
  (:require
    [css.units :as units]
    [css.core :as css]
    [dollar.bill :as $ :refer [$]]
    [cljs.pprint :as pprint]
    [fast.style]
    [reagent.core :as r]))

(defn ratom? [v] (instance? reagent.ratom/RAtom v))

(defn preparse [v]
  (cond (integer? v) (str v "px")
        (keyword? v) (clj->js v)
        (number? v)  (str v)
        (vector? v) (mapv preparse v)
        :else v))

(defn parse [v]
  (let [res 
    (cond (string? v) (fast.style/parse-css-value v)
          (vector? v) (mapv parse v)
          :else [v])]
    (if (or (sequential? res)(array? res))
        (case (count res) 0 nil 1 (first res) (vec res))
        res)))

(defn virtual-css [data] 
  (zipmap (keys data) (map (comp parse preparse) (vals data))))

(defn render-css-block [rule m]
  (str "\n" rule " {\n" 
      (apply str (mapcat (fn [[k v]] 
        (interleave ["" (clj->js k) (str v)] ["  " ":" ";\n"])) m)) "}"))




($/append (first ($ "head")) ($ "<div id='virtual'></div>"))

(def vdata (r/atom (virtual-css 
  {:window-width 1280 
   :divider-width "0.5em"})))

(def r1 (reaction (units/* (:window-width @vdata) 0.25)))



(defn shelfs []
  [:style (render-css-block 
    ".shelf.left"  
    {:top (:menu-height @vdata) 
     :width @r1 })])

(defn handles []
  [:style (render-css-block 
    ".shelf.left .handle" 
    {:left @r1 
     :width (:divider-width @vdata)})])

(defn workspace []
  [:style (render-css-block 
    "#workspace"
    {:left (units/+ @r1 (:divider-width @vdata))})])

(defn interface []
  [:div [shelfs][handles][workspace]])

(r/render-component interface (first ($ "#virtual")))

(swap! vdata update-in [:divider-width] #(units/- % 5))
(swap! vdata update-in [:window-width] #(units/+ % 100))

hybrid om/next reagent UI