From 8fa46d52571ade8408475a7b27c69b010931877c Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Wed, 18 May 2016 21:46:13 +0300
Subject: [PATCH] Add the ability to close lightbox clicking out of main div.

---
 src/uxbox/ui/lightbox.cljs | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/uxbox/ui/lightbox.cljs b/src/uxbox/ui/lightbox.cljs
index 66f28ce80..5af848c83 100644
--- a/src/uxbox/ui/lightbox.cljs
+++ b/src/uxbox/ui/lightbox.cljs
@@ -6,6 +6,7 @@
             [uxbox.data.lightbox :as udl]
             [uxbox.ui.mixins :as mx]
             [uxbox.ui.keyboard :as k]
+            [uxbox.util.dom :as dom]
             [goog.events :as events])
   (:import goog.events.EventType))
 
@@ -21,9 +22,17 @@
 (defmethod render-lightbox :default [_] nil)
 
 (defn- on-esc-clicked
-  [e]
-  (when (k/esc? e)
-    (udl/close!)))
+  [event]
+  (when (k/esc? event)
+    (udl/close!)
+    (dom/stop-propagation event)))
+
+(defn- on-out-clicked
+  [own event]
+  (let [parent (mx/get-ref-dom own "parent")
+        current (dom/get-target event)]
+    (when (dom/equals? parent current)
+      (udl/close!))))
 
 (defn- lightbox-will-mount
   [own]
@@ -46,7 +55,9 @@
   (let [data (rum/react lightbox-l)]
     (html
      [:div.lightbox
-      {:class (when (nil? data) "hide")}
+      {:class (when (nil? data) "hide")
+       :ref "parent"
+       :on-click (partial on-out-clicked own)}
       (render-lightbox data)])))
 
 (def lightbox