0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-14 16:51:18 -05:00

Add interaction to new sitemap markup.

This commit is contained in:
Andrey Antukh 2016-02-21 20:32:27 +02:00
parent 6f23272c63
commit a2af628a14
2 changed files with 167 additions and 51 deletions

View file

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

View file

@ -2,26 +2,59 @@
(:require [sablono.core :as html :refer-macros [html]] (:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum] [rum.core :as rum]
[cats.labs.lens :as l] [cats.labs.lens :as l]
[cuerdas.core :as str]
[uxbox.locales :refer (tr)] [uxbox.locales :refer (tr)]
[uxbox.router :as r] [uxbox.router :as r]
[uxbox.rstore :as rs] [uxbox.rstore :as rs]
[uxbox.state :as st] [uxbox.state :as st]
[uxbox.shapes :as shapes] [uxbox.shapes :as shapes]
[uxbox.library :as library] [uxbox.library :as library]
[uxbox.util.data :refer (read-string)] [uxbox.data.projects :as dp]
[uxbox.data.workspace :as dw] [uxbox.data.workspace :as dw]
[uxbox.ui.dashboard.projects :refer (+layouts+)]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.lightbox :as lightbox]
[uxbox.util.data :refer (read-string parse-int)]
[uxbox.util.dom :as dom])) [uxbox.util.dom :as dom]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Component ;; 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 (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))] close #(rs/emit! (dw/toggle-flag :sitemap))]
(html (html
[:div.sitemap.tool-window [:div.sitemap.tool-window
@ -31,20 +64,120 @@
[:div.tool-window-close {:on-click close} i/close]] [:div.tool-window-close {:on-click close} i/close]]
[:div.tool-window-content [:div.tool-window-content
[:div.project-title [: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 [: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 (def ^:static sitemap-toolbox
(mx/component (mx/component
{:render sitemap-toolbox-render {:render sitemap-toolbox-render
:name "sitemap-toolbox" :name "sitemap-toolbox"
:mixins [mx/static rum/reactive]})) :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))