Add interaction to new sitemap markup.

src/uxbox/data/projects.cljs

@@ -60,34 +60,32 @@
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (defn create-page
-  [{:keys [name width height project] :as data}]
+  [{:keys [name width height project layout] :as data}]
-  (sc/validate! +page-schema+ data)
+  (sc/validate! +create-page-schema+ data)
   (reify
     rs/UpdateEvent
     (-apply-update [_ state]
       (let [page {:id (random-uuid)
                   :project project
                   :created (time/now :unix)
+                  :layout layout
                   :shapes []
                   :name name
                   :width width
                   :height height}]
-        (assoc-page state page)))
+        (stpr/assoc-page state page)))))
 
-    IPrintWithWriter
+(defn update-page
-    (-pr-writer [mv writer _]
+  [{:keys [id name width height layout] :as data}]
-      (-write writer "#<event:u.s.p/create-page>"))))
+  (sc/validate! +create-page-schema+ data)
-
-(defn update-page-name
-  [pageid name]
   (reify
     rs/UpdateEvent
     (-apply-update [_ state]
-      (update-in state [:pages-by-id pageid] assoc :name name))
+      (let [page (merge (get-in state [:pages-by-id id])
-
+                        (when width {:width width})
-    IPrintWithWriter
+                        (when height {:height height})
-    (-pr-writer [mv writer _]
+                        (when name {:name name}))]
-      (-write writer "#<event:u.s.p/update-page-name>"))))
+        (assoc-in state [:pages-by-id id] page)))))
 
 (defn delete-page
   [pageid]
@@ -97,11 +95,7 @@
       (let [shapeids (get-in state [:pages-by-id pageid :shapes])]
         (as-> state $
           (update $ :shapes-by-id without-keys shapeids)
-          (update $ :pages-by-id dissoc pageid))))
+          (update $ :pages-by-id dissoc pageid))))))
-
-    IPrintWithWriter
-    (-pr-writer [mv writer _]
-      (-write writer "#<event:u.s.p/edit-page>"))))
 
 (defn create-project
   [{:keys [name width height layout] :as data}]
@@ -112,31 +106,22 @@
       (-apply-update [_ state]
         (let [proj {:id uuid
                     :name name
-                    :width width
+                    :created (time/now :unix)}]
-                    :created (time/now :unix)
+          (stpr/assoc-project state proj)))
-                    :height height}]
-          (assoc-project state proj)))
 
       rs/EffectEvent
       (-apply-effect [_ state]
         (rs/emit! (create-page {:name "Page 1"
+                                :layout layout
                                 :width width
                                 :height height
-                                :project uuid})))
+                                :project uuid}))))))
-      IPrintWithWriter
-      (-pr-writer [mv writer _]
-        (-write writer "#<event:u.s.p/create-project>")))))
-
 (defn delete-project
   [proj]
   (reify
     rs/UpdateEvent
     (-apply-update [_ state]
-      (dissoc-project state proj))
+      (stpr/dissoc-project state proj))))
-
-    IPrintWithWriter
-    (-pr-writer [mv writer _]
-      (-write writer "#<event:u.s.p/delete-project>"))))
 
 (defn go-to
   "A shortcut event that redirects the user to the
@@ -150,10 +135,8 @@
        (if pageid
          (rs/emit! (r/navigate :workspace/page {:project-uuid projectid
                                                 :page-uuid pageid}))
-         (let [pages (project-pages state projectid)
+         (let [pages (stpr/project-pages state projectid)
                pageid (:id (first pages))]
+           (println "selected" pageid "projectid" projectid)
            (rs/emit! (r/navigate :workspace/page {:project-uuid projectid
-                                                  :page-uuid pageid})))))
+                                                  :page-uuid pageid}))))))))
-     IPrintWithWriter
-     (-pr-writer [mv writer _]
-       (-write writer "#<event:u.s.p/go-to")))))

src/uxbox/ui/workspace/sidebar/sitemap.cljs

@@ -2,26 +2,59 @@
   (:require [sablono.core :as html :refer-macros [html]]
             [rum.core :as rum]
             [cats.labs.lens :as l]
+            [cuerdas.core :as str]
             [uxbox.locales :refer (tr)]
             [uxbox.router :as r]
             [uxbox.rstore :as rs]
             [uxbox.state :as st]
             [uxbox.shapes :as shapes]
             [uxbox.library :as library]
-            [uxbox.util.data :refer (read-string)]
+            [uxbox.data.projects :as dp]
             [uxbox.data.workspace :as dw]
+            [uxbox.ui.dashboard.projects :refer (+layouts+)]
             [uxbox.ui.workspace.base :as wb]
             [uxbox.ui.icons :as i]
             [uxbox.ui.mixins :as mx]
+            [uxbox.ui.lightbox :as lightbox]
+            [uxbox.util.data :refer (read-string parse-int)]
             [uxbox.util.dom :as dom]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Component
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
+(defn page-item-render
+  [own page total active?]
+  (let [deletable? (> total 1)
+        navigate #(rs/emit! (dp/go-to (:project page) (:id page)))
+        edit #(lightbox/open! :page-form {:page page})
+        delete (fn [e]
+                 (dom/prevent-default e)
+                 (dom/stop-propagation e)
+                 (rs/emit! (dp/delete-page (:id page))
+                           (dp/go-to (:project page))))]
+    (html
+     [:li {:class (when active? "selected")
+           :on-click navigate}
+      [:div.page-icon i/page]
+      [:span (:name page)]
+      [:div.page-actions
+       [:a {:on-click edit} i/pencil]
+       (if deletable?
+         [:a {:on-click delete} i/trash])]])))
+
+(def ^:const page-item
+  (mx/component
+   {:render page-item-render
+    :name "page-item"
+    :mixins [(mx/local) mx/static rum/reactive]}))
+
 (defn sitemap-toolbox-render
-  [open-toolboxes]
+  [own]
-  (let [workspace (rum/react wb/workspace-l)
+  (let [project (rum/react wb/project-l)
+        pages (rum/react wb/pages-l)
+        current (rum/react wb/page-l)
+        create #(lightbox/open! :page-form {:page {:project (:id project)}})
         close #(rs/emit! (dw/toggle-flag :sitemap))]
     (html
      [:div.sitemap.tool-window
@@ -31,20 +64,120 @@
        [:div.tool-window-close {:on-click close} i/close]]
       [:div.tool-window-content
        [:div.project-title
-        [:span "Project name"]
+        [:span (:name project)]
-        [:div.add-page i/close]]
+        [:div.add-page {:on-click create} i/close]]
        [:ul.element-list
-        (for [i (range 10)]
+        (for [page pages
-          [:li {:key i :class (when (= i 2) "selected")}
+              :let [active? (= (:id page) (:id current))]]
-           [:div.page-icon i/page]
+          (-> (page-item page (count pages) active?)
-           [:span (str "Page " i)]
+              (rum/with-key (:id page))))]]])))
-           [:div.page-actions
-            [:a i/pencil]
-            [:a i/trash]]])
-        ]]])))
 
 (def ^:static sitemap-toolbox
   (mx/component
    {:render sitemap-toolbox-render
     :name "sitemap-toolbox"
     :mixins [mx/static rum/reactive]}))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; Lightbox
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(def ^:const +page-defaults+
+  {:width 1920
+   :height 1080
+   :layout :desktop})
+
+(defn- layout-input
+  [local page id]
+  (let [layout (get +layouts+ id)
+        size (select-keys layout [:width :height])
+        change #(swap! local merge {:layout id} size)]
+    (html
+     [:div
+      [:input {:type "radio"
+               :key id :id id
+               :name "project-layout"
+               :value (:id layout)
+               :checked (= id (:layout page))
+               :on-change change}]
+      [:label {:value (:id layout) :for id} (:name layout)]])))
+
+(defn- page-form-lightbox-render
+  [own local page]
+  (let [edition? (:id page)
+        page (merge page @local)
+        ;; {:keys [name width height] :or {name ""} :as page} (merge page @local)
+        valid? (and (not (str/empty? (str/trim (:name page ""))))
+                    (pos? (:width page))
+                    (pos? (:height page)))]
+    (letfn [(update-size [field e]
+              (let [value (dom/event->value e)
+                    value (parse-int value)]
+                (swap! local assoc field value)))
+            (update-name [e]
+              (let [value (dom/event->value e)]
+                (swap! local assoc :name value)))
+            (toggle-sizes []
+              (swap! local assoc
+                     :width (:height page)
+                     :height (:width page)))
+            (cancel [e]
+              (dom/prevent-default e)
+              (lightbox/close!))
+            (persist [e]
+              (dom/prevent-default e)
+              (lightbox/close!)
+              (if edition?
+                (rs/emit! (dp/update-page page))
+                (rs/emit! (dp/create-page page))))]
+      (html
+       [:div.lightbox-body
+        (if edition?
+          [:h3 "Edit page"]
+          [:h3 "New page"])
+        [:form
+         [:input#project-name.input-text
+          {:placeholder "Page name"
+           :type "text"
+           :value (:name page "")
+           :auto-focus true
+           :on-change update-name}]
+         [:div.project-size
+          [:input#project-witdh.input-text
+           {:placeholder "Width"
+            :type "number"
+            :min 0
+            :max 4000
+            :value (:width page)
+            :on-change #(update-size :width %)}]
+          [:a.toggle-layout {:on-click toggle-sizes} i/toggle]
+          [:input#project-height.input-text
+           {:placeholder "Height"
+            :type "number"
+            :min 0
+            :max 4000
+            :value (:height page)
+            :on-change #(update-size :height %)}]]
+
+         [:div.input-radio.radio-primary
+          (layout-input local page :mobile)
+          (layout-input local page :tablet)
+          (layout-input local page :notebook)
+          (layout-input local page :desktop)]
+
+         (when valid?
+           [:input#project-btn.btn-primary
+            {:value "Go go go!"
+             :on-click persist
+             :type "button"}])]
+        [:a.close {:on-click cancel} i/close]]))))
+
+(def page-form-lightbox
+  (mx/component
+   {:render #(page-form-lightbox-render %1 (:rum/local %1) %2)
+    :name "page-form-lightbox"
+    :mixins [(mx/local)]}))
+
+(defmethod lightbox/render-lightbox :page-form
+  [{:keys [page]}]
+  (page-form-lightbox page))