From a2af628a141d2c599cd0bda6d4d3abf68cb64cea Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Sun, 21 Feb 2016 20:32:27 +0200 Subject: [PATCH] Add interaction to new sitemap markup. --- src/uxbox/data/projects.cljs | 59 +++----- src/uxbox/ui/workspace/sidebar/sitemap.cljs | 159 ++++++++++++++++++-- 2 files changed, 167 insertions(+), 51 deletions(-) diff --git a/src/uxbox/data/projects.cljs b/src/uxbox/data/projects.cljs index 3bf6db35e6..8e4731a8e8 100644 --- a/src/uxbox/data/projects.cljs +++ b/src/uxbox/data/projects.cljs @@ -60,34 +60,32 @@ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defn create-page - [{:keys [name width height project] :as data}] - (sc/validate! +page-schema+ data) + [{:keys [name width height project layout] :as 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 - (-pr-writer [mv writer _] - (-write writer "#")))) - -(defn update-page-name - [pageid name] +(defn update-page + [{:keys [id name width height layout] :as data}] + (sc/validate! +create-page-schema+ data) (reify rs/UpdateEvent (-apply-update [_ state] - (update-in state [:pages-by-id pageid] assoc :name name)) - - IPrintWithWriter - (-pr-writer [mv writer _] - (-write writer "#")))) + (let [page (merge (get-in state [:pages-by-id id]) + (when width {:width width}) + (when height {:height height}) + (when name {:name 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)))) - - IPrintWithWriter - (-pr-writer [mv writer _] - (-write writer "#")))) + (update $ :pages-by-id dissoc pageid)))))) (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) - :height height}] - (assoc-project state proj))) + :created (time/now :unix)}] + (stpr/assoc-project state proj))) rs/EffectEvent (-apply-effect [_ state] (rs/emit! (create-page {:name "Page 1" + :layout layout :width width :height height - :project uuid}))) - IPrintWithWriter - (-pr-writer [mv writer _] - (-write writer "#"))))) - + :project uuid})))))) (defn delete-project [proj] (reify rs/UpdateEvent (-apply-update [_ state] - (dissoc-project state proj)) - - IPrintWithWriter - (-pr-writer [mv writer _] - (-write writer "#")))) + (stpr/dissoc-project state proj)))) (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}))))) - IPrintWithWriter - (-pr-writer [mv writer _] - (-write writer "# 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] - (let [workspace (rum/react wb/workspace-l) + [own] + (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"] - [:div.add-page i/close]] + [:span (:name project)] + [:div.add-page {:on-click create} i/close]] [:ul.element-list - (for [i (range 10)] - [:li {:key i :class (when (= i 2) "selected")} - [:div.page-icon i/page] - [:span (str "Page " i)] - [:div.page-actions - [:a i/pencil] - [:a i/trash]]]) - ]]]))) + (for [page pages + :let [active? (= (:id page) (:id current))]] + (-> (page-item page (count pages) active?) + (rum/with-key (:id page))))]]]))) (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))