Add basic color picker impl.

frontend/uxbox/ui/colorpicker.cljs

@@ -0,0 +1,60 @@
+(ns uxbox.ui.colorpicker
+  (:require [sablono.core :as html :refer-macros [html]]
+            [rum.core :as rum]
+            [cats.labs.lens :as l]
+            [goog.events :as events]
+            [uxbox.ui.mixins :as mx]
+            [uxbox.ui.util :as util])
+  (:import goog.events.EventType))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Color Picker
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defn on-click-handler
+  [e own callback]
+  (let [canvas (util/get-ref-dom own "colorpicker")
+        context (.getContext canvas "2d")
+        brect (.getBoundingClientRect canvas)
+        ox (.-left brect)
+        oy (.-top brect)
+        x (- (.-pageX e) ox)
+        y (- (.-pageY e) oy)
+        image (.getImageData context x y 1 1)
+        r (aget (.-data image) 0)
+        g (aget (.-data image) 1)
+        b (aget (.-data image) 2)]
+    (callback {:hex (util/rgb->hex [r g b])
+               :rgb [r g b]})))
+
+(defn colorpicker-render
+  [own callback]
+  (html
+   [:canvas
+    {:width "400"
+     :height "300"
+     :on-click #(on-click-handler % own callback)
+     :id "colorpicker"
+     :ref "colorpicker"}]))
+
+(defn colorpicker-did-mount
+  [own]
+  (let [canvas (util/get-ref-dom own "colorpicker")
+        context (.getContext canvas "2d")
+        img (js/Image.)]
+    (set! (.-src img) "/images/colorspecrum-400x300.png")
+    (let [key (events/listen img EventType.LOAD #(.drawImage context img 0 0))]
+      (assoc own ::key key))))
+
+(defn colorpicker-will-unmout
+  [own]
+  (let [key (::key own)]
+    (events/unlistenByKey key)))
+
+(def ^:static colorpicker
+  (util/component
+   {:render colorpicker-render
+    :did-mount colorpicker-did-mount
+    :will-unmout colorpicker-will-unmout
+    :name "colorpicker"
+    :mixins [mx/static]}))

frontend/uxbox/ui/dashboard/colors.cljs

@@ -8,6 +8,7 @@
             [uxbox.ui.dashboard.builtins :as builtins]
             [uxbox.ui.icons :as i]
             [uxbox.ui.lightbox :as lightbox]
+            [uxbox.ui.colorpicker :refer (colorpicker)]
             [uxbox.ui.dom :as dom]
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.util :as util]))
@@ -230,7 +231,12 @@
             {:placeholder "RGB"
             :type "text"}]]
         [:input#project-btn.btn-primary {:value "+ Add color" :type "submit"}]]
-      [:a.close {:href "#"
+
+     (colorpicker (fn [{:keys [rgb hex]}]
+                    (println "HEX:" hex)
+                    (println "RGB:" rgb)))
+
+     [:a.close {:href "#"
                 :on-click #(do (dom/prevent-default %)
                                (lightbox/close!))}
       i/close]]))

frontend/uxbox/ui/util.cljs

@@ -46,13 +46,13 @@
 ;; Color Conversion
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defn hex-to-rgb
+(defn hex->rgb
   [^string data]
   (some->> (re-find #"^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$" data)
            (rest)
            (mapv #(js/parseInt % 16))))
 
-(defn rgb-to-hex
+(defn rgb->hex
   [[r g b]]
   (letfn [(to-hex [c]
             (let [hexdata (.toString c 16)]