mirror of
https://github.com/penpot/penpot.git
synced 2026-05-27 19:03:39 +00:00
70 lines
1.8 KiB
Clojure
70 lines
1.8 KiB
Clojure
(ns uxbox.main.ui.lightbox
|
|
(:require [sablono.core :as html :refer-macros [html]]
|
|
[rum.core :as rum]
|
|
[lentes.core :as l]
|
|
[uxbox.main.store :as st]
|
|
[uxbox.main.data.lightbox :as udl]
|
|
[uxbox.util.mixins :as mx :include-macros true]
|
|
[uxbox.main.ui.keyboard :as k]
|
|
[uxbox.util.dom :as dom]
|
|
[uxbox.util.data :refer (classnames)]
|
|
[goog.events :as events])
|
|
(:import goog.events.EventType))
|
|
|
|
;; --- Lentes
|
|
|
|
(def ^:private lightbox-ref
|
|
(-> (l/key :lightbox)
|
|
(l/derive st/state)))
|
|
|
|
;; --- Lightbox (Component)
|
|
|
|
(defmulti render-lightbox :name)
|
|
(defmethod render-lightbox :default [_] nil)
|
|
|
|
(defn- on-esc-clicked
|
|
[event]
|
|
(when (k/esc? event)
|
|
(udl/close!)
|
|
(dom/stop-propagation event)))
|
|
|
|
(defn- on-out-clicked
|
|
[own event]
|
|
(let [parent (mx/ref-node own "parent")
|
|
current (dom/get-target event)]
|
|
(when (dom/equals? parent current)
|
|
(udl/close!))))
|
|
|
|
(defn- lightbox-will-mount
|
|
[own]
|
|
(let [key (events/listen js/document
|
|
EventType.KEYDOWN
|
|
on-esc-clicked)]
|
|
(assoc own ::key key)))
|
|
|
|
(defn- lightbox-will-umount
|
|
[own]
|
|
(events/unlistenByKey (::key own))
|
|
(dissoc own ::key))
|
|
|
|
(defn- lightbox-render
|
|
[own]
|
|
(let [data (mx/react lightbox-ref)
|
|
classes (classnames
|
|
:hide (nil? data)
|
|
:transparent (:transparent? data))]
|
|
(html
|
|
[:div.lightbox
|
|
{:class classes
|
|
:ref "parent"
|
|
:on-click (partial on-out-clicked own)}
|
|
(render-lightbox data)])))
|
|
|
|
(def lightbox
|
|
(mx/component
|
|
{:name "lightbox"
|
|
:render lightbox-render
|
|
:will-mount lightbox-will-mount
|
|
:will-unmount lightbox-will-umount
|
|
:mixins [mx/reactive]}))
|