Persist page grid options.

src/uxbox/data/pages.cljs

@@ -149,11 +149,12 @@
 ;; that does not sends the heavyweiht `:data` attribute
 ;; and only serves for update other page data.
 
-(defrecord UpdatePageMetadata [id name width height layout]
+(defrecord UpdatePageMetadata [id name width height layout options]
   rs/UpdateEvent
   (-apply-update [_ state]
     (letfn [(updater [page]
               (merge page
+                     (when options {:options options})
                      (when width {:width width})
                      (when height {:height height})
                      (when name {:name name})))]

src/uxbox/ui/settings/profile.cljs

@@ -2,8 +2,8 @@
 ;; License, v. 2.0. If a copy of the MPL was not distributed with this
 ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
 ;;
-;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
-;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.ui.settings.profile
   (:require [sablono.core :as html :refer-macros [html]]

src/uxbox/ui/workspace/settings.cljs

@@ -2,51 +2,100 @@
 ;; License, v. 2.0. If a copy of the MPL was not distributed with this
 ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
 ;;
-;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
-;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.ui.workspace.settings
   (:require [sablono.core :as html :refer-macros [html]]
+            [lentes.core :as l]
+            [rum.core :as rum]
+            [uxbox.rstore :as rs]
+            [uxbox.data.pages :as udp]
             [uxbox.ui.icons :as i]
             [uxbox.ui.mixins :as mx]
-            [uxbox.util.dom :as dom]
-            [uxbox.ui.lightbox :as lightbox]))
+            [uxbox.ui.lightbox :as lightbox]
+            [uxbox.ui.colorpicker :as uucp]
+            [uxbox.ui.workspace.base :as wb]
+            [uxbox.util.dom :as dom]))
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; Component
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; --- Lentes
+
+(def page-metadata-l
+  (-> (l/key :metadata)
+      (l/focus-atom wb/page-l)))
+
+;; --- Form Component
+
+(defn- settings-form-render
+  [own]
+  (let [local (:rum/local own)
+        page (rum/react wb/page-l)
+        opts (merge (:options page)
+                    (deref local))]
+    (letfn [(on-field-change [field event]
+              (let [value (dom/event->value event)]
+                (swap! local assoc field value)))
+            (on-color-change [color]
+              (swap! local assoc :grid/color color))
+            (on-align-change [event]
+              (let [checked? (-> (dom/get-target event)
+                                 (dom/checked?))]
+                (swap! local assoc :grid/align checked?)))
+            (on-submit [event]
+              (let [page (assoc page :options opts)]
+                (rs/emit! (udp/update-page-metadata page))
+                (lightbox/close!)))]
+      (html
+       [:form {:on-submit on-submit}
+        [:span.lightbox-label "Grid size"]
+        [:div.project-size
+         [:input#grid-x.input-text
+          {:placeholder "X px"
+           :type "number"
+           :value (:grid/x-axis opts "2")
+           :on-change (partial on-field-change :grid/x-axis)
+           :min 1 ;;TODO check this value
+           :max 100}]
+         [:input#grid-y.input-text
+          {:placeholder "Y px"
+           :type "number"
+           :value (:grid/y-axis opts "2")
+           :on-change (partial on-field-change :grid/y-axis)
+           :min 1
+           :max 100}]]
+        [:span.lightbox-label "Grid color"]
+        [:div.color-picker-default
+         (uucp/colorpicker
+          :value (:grid/color opts "#0000ff")
+          :on-change on-color-change)]
+        [:span.lightbox-label "Grid magnet option"]
+        [:div.input-checkbox.check-primary
+         [:input
+          {:type "checkbox"
+           :on-change on-align-change
+           :checked (:grid/align opts)
+           :id "magnet"
+           :value "Yes"}]
+         [:label {:for "magnet"} "Activate magnet"]]
+        [:input.btn-primary
+         {:type "submit"
+          :value "Save"}]]))))
+
+(def settings-form
+  (mx/component
+   {:render settings-form-render
+    :name "settings-form"
+    :mixins [(mx/local) rum/reactive mx/static]}))
 
 (defn- settings-dialog-render
   [own]
   (html
    [:div.lightbox-body.settings
     [:h3 "Grid settings"]
-    [:form {:on-submit (constantly nil)}
-      [:span.lightbox-label "Grid size"]
-      [:div.project-size
-       [:input#grid-x.input-text
-        {:placeholder "X px"
-         :type "number"
-         :min 0 ;;TODO check this value
-         :max 666666 ;;TODO check this value
-         }]
-       [:input#grid-y.input-text
-        {:placeholder "Y px"
-         :type "number"
-         :min 0 ;;TODO check this value
-         :max 666666 ;;TODO check this value
-         }]]
-      [:span.lightbox-label "Grid color"]
-       [:span "COLOR PICKER HERE!"]
-      [:span.lightbox-label "Grid magnet option"]
-      [:div.input-checkbox.check-primary
-       [:input {:type "checkbox" :id "magnet" :value "Yes"}]
-       [:label {:for "magnet"} "Activate magnet"]]
-      [:input.btn-primary {:type "submit" :value "Save"}]
-        ]
+    (settings-form)
     [:a.close {:href "#"
-              :on-click #(do (dom/prevent-default %)
-                             (lightbox/close!))} i/close]]))
+               :on-click #(do (dom/prevent-default %)
+                              (lightbox/close!))} i/close]]))
 
 (def settings-dialog
   (mx/component

src/uxbox/util/dom.cljs

@@ -8,6 +8,22 @@
 (ns uxbox.util.dom
   (:require [goog.dom :as dom]))
 
+;; --- Deprecated methods
+
+(defn event->inner-text
+  [e]
+  (.-innerText (.-target e)))
+
+(defn event->value
+  [e]
+  (.-value (.-target e)))
+
+(defn event->target
+  [e]
+  (.-target e))
+
+;; --- New methods
+
 (defn get-element-by-class
   ([classname]
    (dom/getElementByClass classname))
@@ -24,14 +40,18 @@
   (when e
     (.preventDefault e)))
 
-(defn event->inner-text
-  [e]
-  (.-innerText (.-target e)))
+(defn get-target
+  "Extract the target from event instance."
+  [event]
+  (.-target event))
 
-(defn event->value
-  [e]
-  (.-value (.-target e)))
+(defn get-value
+  "Extract the value from dom node."
+  [node]
+  (.-value node))
 
-(defn event->target
-  [e]
-  (.-target e))
+(defn checked?
+  "Check if the node that reprsents a radio
+  or checkbox is checked or not."
+  [node]
+  (.-checked node))