Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-06 03:51:21 -05:00
Code Issues Activity

Refactor lightbox impl approach (split business logic from UI).

Browse source
This commit is contained in:
Andrey Antukh 2016-04-16 10:44:53 +03:00
parent aaecf3e174
commit ba0627c3ad
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
14 changed files with 121 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/uxbox/data/lightbox.cljs Normal file
View file

@ -0,0 +1,46 @@
;; This Source Code Form is subject to the terms of the Mozilla Public
;; 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) 2016 Andrey Antukh <niwi@niwi.nz>
(ns uxbox.data.lightbox
(:require [promesa.core :as p]
[beicon.core :as rx]
[lentes.core :as l]
[uxbox.rstore :as rs]))
;; --- Show Lightbox
(defrecord ShowLightbox [name params]
rs/UpdateEvent
(-apply-update [_ state]
(let [data (merge {:name name} params)]
(assoc state :lightbox data))))
(defn show-lightbox
([name]
(ShowLightbox. name nil))
([name params]
(ShowLightbox. name params)))
;; --- Hide Lightbox
(defrecord HideLightbox []
rs/UpdateEvent
(-apply-update [_ state]
(dissoc state :lightbox)))
(defn hide-lightbox
[]
(HideLightbox.))
;; --- Direct Call Api
(defn open!
[& args]
(rs/emit! (apply show-lightbox args)))
(defn close!
[& args]
(rs/emit! (apply hide-lightbox args)))

4
src/uxbox/data/workspace.cljs
View file

@ -16,7 +16,7 @@
[uxbox.data.pages :as udp]
[uxbox.data.shapes :as uds]
[uxbox.data.forms :as udf]
[uxbox.ui.lightbox :as lightbox]
[uxbox.data.lightbox :as udl]
[uxbox.util.datetime :as dt]
[uxbox.util.math :as mth]
[uxbox.util.data :refer (index-of)]
@ -209,7 +209,7 @@
rs/EffectEvent
(-apply-effect [_ state]
(lightbox/close!)))
(udl/close!)))
(def submit-workspace-settings-schema
{:grid/y-axis [sc/required sc/integer [sc/in-range 2 100]]

9
src/uxbox/ui/confirm.cljs
View file

@ -7,20 +7,21 @@
(ns uxbox.ui.confirm
(:require [sablono.core :as html :refer-macros [html]]
[uxbox.data.lightbox :as udl]
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.util.dom :as dom]
[uxbox.ui.lightbox :as lightbox]))
[uxbox.ui.lightbox :as lbx]))
(defn- confirm-dialog-render
[own {:keys [on-accept on-cancel] :as ctx}]
(letfn [(accept [event]
(dom/prevent-default event)
(lightbox/close!)
(udl/close!)
(on-accept (dissoc ctx :on-accept :on-cancel)))
(cancel [event]
(dom/prevent-default event)
(lightbox/close!)
(udl/close!)
(when on-cancel
(on-cancel (dissoc ctx :on-accept :on-cancel))))]
(html
@ -41,6 +42,6 @@
:name "confirm-dialog"
:mixins []}))
(defmethod lightbox/render-lightbox :confirm
(defmethod lbx/render-lightbox :confirm
[context]
(confirm-dialog context))

9
src/uxbox/ui/dashboard/colors.cljs
View file

@ -16,9 +16,10 @@
[uxbox.schema :as sc]
[uxbox.library :as library]
[uxbox.data.dashboard :as dd]
[uxbox.data.lightbox :as udl]
[uxbox.ui.icons :as i]
[uxbox.ui.forms :as form]
[uxbox.ui.lightbox :as lightbox]
[uxbox.ui.lightbox :as lbx]
[uxbox.ui.colorpicker :refer (colorpicker)]
[uxbox.ui.mixins :as mx]
[uxbox.ui.dashboard.header :refer (header)]
@ -125,7 +126,7 @@
coll-id (:collection-id dashboard)
own? (= coll-type :own)
coll (rum/react (focus-collection coll-id))
edit-cb #(lightbox/open! :color-form {:coll coll :color %})
edit-cb #(udl/open! :color-form {:coll coll :color %})
remove-cb #(rs/emit! (dd/remove-color {:id (:id coll) :color %}))]
(when coll
(html
@ -134,7 +135,7 @@
[:div.dashboard-grid-content
(when own?
[:div.grid-item.small-item.add-project
{:on-click #(lightbox/open! :color-form {:coll coll})}
{:on-click #(udl/open! :color-form {:coll coll})}
[:span "+ New color"]])
(for [color (remove nil? (:colors coll))
:let [color-rgb (hex->rgb color)]]
@ -232,6 +233,6 @@
:mixins [(rum/local {})
mx/static]}))
(defmethod lightbox/render-lightbox :color-form
(defmethod lbx/render-lightbox :color-form
[params]
(color-lightbox params))

11
src/uxbox/ui/dashboard/elements.cljs
View file

@ -9,11 +9,12 @@
(:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum]
[uxbox.rstore :as rs]
[uxbox.data.dashboard :as dd]
[uxbox.data.lightbox :as udl]
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.ui.lightbox :as lightbox]
[uxbox.ui.lightbox :as lbx]
[uxbox.ui.library-bar :as ui.library-bar]
[uxbox.data.dashboard :as dd]
[uxbox.ui.dashboard.header :refer (header)]
[uxbox.util.dom :as dom]))
@ -41,7 +42,7 @@
(html
[:div.dashboard-grid-content
[:div.grid-item.add-project
{on-click #(lightbox/open! :new-element)}
{on-click #(udl/open! :new-element)}
[:span "+ New element"]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
@ -175,7 +176,7 @@
[:span.text "Upload file"]]]
[:a.close {:href "#"
:on-click #(do (dom/prevent-default %)
(lightbox/close!))}
(udl/close!))}
i/close]]))
(def ^:const ^:private new-element-lightbox
@ -183,6 +184,6 @@
{:render new-element-lightbox-render
:name "new-element-lightbox"}))
(defmethod lightbox/render-lightbox :new-element
(defmethod lbx/render-lightbox :new-element
[_]
(new-element-lightbox))

7
src/uxbox/ui/dashboard/icons.cljs
View file

@ -15,9 +15,10 @@
[uxbox.locales :refer (tr)]
[uxbox.library :as library]
[uxbox.data.dashboard :as dd]
[uxbox.data.lightbox :as udl]
[uxbox.ui.icons :as i]
[uxbox.ui.shapes.core :as uusc]
[uxbox.ui.lightbox :as lightbox]
[uxbox.ui.lightbox :as lbx]
[uxbox.ui.mixins :as mx]
[uxbox.ui.dashboard.header :refer (header)]
[uxbox.util.dom :as dom]))
@ -169,7 +170,7 @@
]
[:a.close {:href "#"
:on-click #(do (dom/prevent-default %)
(lightbox/close!))}
(udl/close!))}
i/close]]))
(def new-icon-lightbox
@ -177,6 +178,6 @@
{:render new-icon-lightbox-render
:name "new-icon-lightbox"}))
(defmethod lightbox/render-lightbox :new-icon
(defmethod lbx/render-lightbox :new-icon
[_]
(new-icon-lightbox))

13
src/uxbox/ui/dashboard/projects.cljs
View file

@ -17,10 +17,11 @@
[uxbox.data.dashboard :as dd]
[uxbox.data.projects :as dp]
[uxbox.data.workspace :as dw]
[uxbox.data.lightbox :as udl]
[uxbox.ui.icons :as i]
[uxbox.util.dom :as dom]
[uxbox.ui.dashboard.header :refer (header)]
[uxbox.ui.lightbox :as lightbox]
[uxbox.ui.lightbox :as lbx]
[uxbox.ui.messages :as uum]
[uxbox.ui.mixins :as mx]
[uxbox.util.datetime :as dt]))
@ -159,7 +160,7 @@
(rs/emit! (dp/delete-project project)))
(on-delete [event]
(dom/stop-propagation event)
(lightbox/open! :confirm {:on-accept delete}))]
(udl/open! :confirm {:on-accept delete}))]
(html
[:div.grid-item.project-th {:on-click on-navigate
:key (:id project)}
@ -194,7 +195,7 @@
filtering (rum/react project-filtering-l)]
(letfn [(on-click [e]
(dom/prevent-default e)
(lightbox/open! :new-project))]
(udl/open! :new-project))]
(html
[:section.dashboard-grid
[:h2 "Your projects"]
@ -324,12 +325,12 @@
:on-click #(do
(dom/prevent-default %)
(rs/emit! (dp/create-project @local))
(lightbox/close!))
(udl/close!))
:type "submit"}])]
[:a.close {:href "#"
:on-click #(do (dom/prevent-default %)
(lightbox/close!))}
(udl/close!))}
i/close]])))
(def new-project-lightbox
@ -338,6 +339,6 @@
:name "new-project-lightbox"
:mixins [(rum/local +project-defaults+)]}))
(defmethod lightbox/render-lightbox :new-project
(defmethod lbx/render-lightbox :new-project
[_]
(new-project-lightbox))

47
src/uxbox/ui/lightbox.cljs
View file

@ -1,30 +1,21 @@
(ns uxbox.ui.lightbox
(:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum]
[lentes.core :as l]
[uxbox.state :as st]
[uxbox.data.lightbox :as udl]
[uxbox.ui.mixins :as mx]
[uxbox.ui.keyboard :as k]
[goog.events :as events])
(:import goog.events.EventType))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; State Management
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; --- Lentes
(defonce +current+ (atom nil))
(def ^:const ^:private lightbox-l
(-> (l/key :lightbox)
(l/focus-atom st/state)))
(defn open!
([kind]
(open! kind nil))
([kind params]
(reset! +current+ (merge {:name kind} params))))
(defn close!
[]
(reset! +current+ nil))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; UI
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; --- Lightbox (Component)
(defmulti render-lightbox :name)
(defmethod render-lightbox :default [_] nil)
@ -32,37 +23,37 @@
(defn- on-esc-clicked
[e]
(when (k/esc? e)
(close!)))
(udl/close!)))
(defn- lightbox-will-mount
[own]
(let [key (events/listen js/document
EventType.KEYDOWN
on-esc-clicked)]
(assoc own ::eventkey key)))
(assoc own ::key key)))
(defn- lightbox-will-umount
[own]
(let [key (::eventkey own)]
(events/unlistenByKey key)
(dissoc own ::eventkey)))
(events/unlistenByKey (::key own))
(dissoc own ::key))
(defn- lightbox-transfer-state
[old-own own]
(assoc own ::eventkey (::eventkey old-own)))
(assoc own ::key (::key old-own)))
(defn- lightbox-render
[own]
(let [params (rum/react +current+)]
(let [data (rum/react lightbox-l)]
(html
[:div.lightbox {:class (when (nil? params) "hide")}
(render-lightbox params)])))
[:div.lightbox
{:class (when (nil? data) "hide")}
(render-lightbox data)])))
(def ^:static lightbox
(def lightbox
(mx/component
{:name "lightbox"
:render lightbox-render
:transfer-state lightbox-transfer-state
:will-mount lightbox-will-mount
:will-unmount lightbox-will-umount
:mixins [rum/reactive]}))
:mixins [rum/reactive mx/static]}))

4
src/uxbox/ui/users.cljs
View file

@ -6,16 +6,16 @@
[uxbox.rstore :as rs]
[uxbox.state :as s]
[uxbox.data.auth :as da]
[uxbox.data.lightbox :as udl]
[uxbox.ui.icons :as i]
[uxbox.ui.navigation :as nav]
[uxbox.ui.lightbox :as lightbox]
[uxbox.ui.mixins :as mx]))
;; --- User Menu
(defn menu-render
[own open?]
(let [open-settings-dialog #(lightbox/open! :settings)]
(let [open-settings-dialog #(udl/open! :settings)]
(html
[:ul.dropdown {:class (when-not open?
"hide")}

11
src/uxbox/ui/workspace/clipboard.cljs
View file

@ -11,10 +11,11 @@
[lentes.core :as l]
[uxbox.rstore :as rs]
[uxbox.state :as st]
[uxbox.data.lightbox :as udl]
[uxbox.data.workspace :as udw]
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.ui.lightbox :as lightbox]
[uxbox.data.workspace :as udw]
[uxbox.ui.lightbox :as lbx]
[uxbox.util.dom :as dom]
[uxbox.util.datetime :as dt]))
@ -29,7 +30,7 @@
(defn- on-paste
[item]
(rs/emit! (udw/paste-from-clipboard (:id item)))
(lightbox/close!))
(udl/close!))
(defn- clipboard-dialog-render
[own]
@ -45,7 +46,7 @@
[:span (str "Copied (" (dt/timeago (:created-at item)) ")")]])]
[:a.close {:href "#"
:on-click #(do (dom/prevent-default %)
(lightbox/close!))} i/close]])))
(udl/close!))} i/close]])))
(def clipboard-dialog
(mx/component
@ -53,6 +54,6 @@
:name "clipboard-dialog"
:mixins [mx/static rum/reactive]}))
(defmethod lightbox/render-lightbox :clipboard
(defmethod lbx/render-lightbox :clipboard
[_]
(clipboard-dialog))

4
src/uxbox/ui/workspace/header.cljs
View file

@ -13,6 +13,7 @@
[uxbox.rstore :as rs]
[uxbox.data.workspace :as dw]
[uxbox.data.history :as udh]
[uxbox.data.lightbox :as udl]
[uxbox.ui.workspace.clipboard]
[uxbox.ui.workspace.settings]
[uxbox.ui.workspace.base :as wb]
@ -20,7 +21,6 @@
[uxbox.ui.users :as ui.u]
[uxbox.ui.navigation :as nav]
[uxbox.ui.mixins :as mx]
[uxbox.ui.lightbox :as lightbox]
[uxbox.util.geom.point :as gpt]
[uxbox.util.math :as mth]))
@ -75,7 +75,7 @@
on-undo #(rs/emit! (udh/backwards-to-previous-version))
on-redo #(rs/emit! (udh/forward-to-next-version))
;; TODO: temporary
open-confirm-dialog #(lightbox/open! :confirm)]
open-confirm-dialog #(udl/open! :confirm)]
(html
[:header#workspace-bar.workspace-bar
[:div.main-icon

7
src/uxbox/ui/workspace/settings.cljs
View file

@ -15,10 +15,11 @@
[uxbox.data.pages :as udp]
[uxbox.data.forms :as udf]
[uxbox.data.workspace :as udw]
[uxbox.data.lightbox :as udl]
[uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx]
[uxbox.ui.forms :as forms]
[uxbox.ui.lightbox :as lightbox]
[uxbox.ui.lightbox :as lbx]
[uxbox.ui.colorpicker :as uucp]
[uxbox.ui.workspace.base :as wb]
[uxbox.util.dom :as dom]
@ -110,7 +111,7 @@
(settings-form)
[:a.close {:href "#"
:on-click #(do (dom/prevent-default %)
(lightbox/close!))} i/close]]))
(udl/close!))} i/close]]))
(def settings-dialog
(mx/component
@ -118,6 +119,6 @@
:name "settings-dialog"
:mixins []}))
(defmethod lightbox/render-lightbox :settings
(defmethod lbx/render-lightbox :settings
[_]
(settings-dialog))

4
src/uxbox/ui/workspace/shortcuts.cljs
View file

@ -9,7 +9,7 @@
(:require [goog.events :as events]
[beicon.core :as rx]
[uxbox.rstore :as rs]
[uxbox.ui.lightbox :as lightbox]
[uxbox.data.lightbox :as udl]
[uxbox.data.workspace :as dw]
[uxbox.data.shapes :as uds]
[uxbox.data.history :as udh])
@ -34,7 +34,7 @@
:ctrl+v #(rs/emit! (dw/paste-from-clipboard))
:ctrl+z #(rs/emit! (udh/backwards-to-previous-version))
:ctrl+shift+z #(rs/emit! (udh/forward-to-next-version))
:ctrl+shift+v #(lightbox/open! :clipboard)
:ctrl+shift+v #(udl/open! :clipboard)
:esc #(rs/emit! (uds/deselect-all))
:backspace #(rs/emit! (uds/delete-selected))
:delete #(rs/emit! (uds/delete-selected))

27
src/uxbox/ui/workspace/sidebar/sitemap.cljs
View file

@ -20,18 +20,17 @@
[uxbox.data.projects :as dp]
[uxbox.data.pages :as udp]
[uxbox.data.workspace :as dw]
[uxbox.data.lightbox :as udl]
[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.ui.lightbox :as lbx]
[uxbox.util.lens :as ul]
[uxbox.util.data :refer (read-string parse-int)]
[uxbox.util.dom :as dom]))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Lenses
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; --- Lenses
(def ^:const pages-l
(letfn [(getter [state]
@ -40,14 +39,12 @@
(as-> (ul/getter getter) $
(l/focus-atom $ st/state))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Component
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; --- Component
(defn page-item-render
[own page total active?]
(letfn [(on-edit [event]
(lightbox/open! :page-form {:page page}))
(udl/open! :page-form {:page page}))
(on-navigate [event]
(rs/emit! (dp/go-to (:project page) (:id page))))
@ -59,7 +56,7 @@
(on-delete [event]
(dom/prevent-default event)
(dom/stop-propagation event)
(lightbox/open! :confirm {:on-accept delete}))]
(udl/open! :confirm {:on-accept delete}))]
(html
[:li {:class (when active? "selected")
:on-click on-navigate}
@ -81,7 +78,7 @@
(let [project (rum/react wb/project-l)
pages (rum/react pages-l)
current (rum/react wb/page-l)
create #(lightbox/open! :page-form {:page {:project (:id project)}})
create #(udl/open! :page-form {:page {:project (:id project)}})
close #(rs/emit! (dw/toggle-flag :sitemap))]
(html
[:div.sitemap.tool-window
@ -105,9 +102,7 @@
:name "sitemap-toolbox"
:mixins [mx/static rum/reactive]}))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Lightbox
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; --- Lightbox
(def ^:const +page-defaults+
{:width 1920
@ -149,10 +144,10 @@
:height (:width page)))
(cancel [e]
(dom/prevent-default e)
(lightbox/close!))
(udl/close!))
(persist [e]
(dom/prevent-default e)
(lightbox/close!)
(udl/close!)
(if edition?
(rs/emit! (udp/update-page-metadata page))
(rs/emit! (udp/create-page page))))]
@ -204,6 +199,6 @@
:name "page-form-lightbox"
:mixins [(mx/local)]}))
(defmethod lightbox/render-lightbox :page-form
(defmethod lbx/render-lightbox :page-form
[{:keys [page]}]
(page-form-lightbox page))