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

src/uxbox/data/lightbox.cljs

@@ -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)))

src/uxbox/data/workspace.cljs

@@ -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]]

src/uxbox/ui/confirm.cljs

@@ -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))

src/uxbox/ui/dashboard/colors.cljs

@@ -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))

src/uxbox/ui/dashboard/elements.cljs

@@ -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))

src/uxbox/ui/dashboard/icons.cljs

@@ -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))

src/uxbox/ui/dashboard/projects.cljs

@@ -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))

src/uxbox/ui/lightbox.cljs

@@ -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))
 
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; --- Lentes
-;; State Management
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defonce +current+ (atom nil))
+(def ^:const ^:private lightbox-l
+  (-> (l/key :lightbox)
+      (l/focus-atom st/state)))
 
-(defn open!
+;; --- Lightbox (Component)
-  ([kind]
-   (open! kind nil))
-  ([kind params]
-   (reset! +current+ (merge {:name kind} params))))
-
-(defn close!
-  []
-  (reset! +current+ nil))
-
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-;; UI
-;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
 (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 own))
-    (events/unlistenByKey key)
+  (dissoc own ::key))
-    (dissoc own ::eventkey)))
 
 (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")}
+     [:div.lightbox
-      (render-lightbox params)])))
+      {: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]}))

src/uxbox/ui/users.cljs

@@ -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")}

src/uxbox/ui/workspace/clipboard.cljs

@@ -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.ui.lightbox :as lbx]
-            [uxbox.data.workspace :as udw]
             [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))

src/uxbox/ui/workspace/header.cljs

@@ -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

src/uxbox/ui/workspace/settings.cljs

@@ -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))

src/uxbox/ui/workspace/shortcuts.cljs

@@ -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))

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

@@ -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))