Permalink
Browse files

improvements to modal event handling

  • Loading branch information...
1 parent 2051d83 commit 9a5a9afa2272798074d35925d1d8313624371a64 @slagyr slagyr committed Feb 20, 2014
Showing with 42 additions and 24 deletions.
  1. +9 −0 CHANGES.md
  2. +11 −2 example/src/cljs/example/modal_demo.cljs
  3. +1 −1 project.clj
  4. +21 −21 src/cljs/com/eighthlight/filament/modal.cljs
View
@@ -1,3 +1,12 @@
+# 1.2.2
+
+* relaxes mouse event capture on modal so that popups (file pickers, date pickers, etc) work as expected
+* better handling of esc key-up when inside input elements in modals
+
+# 1.2.1
+
+* adds flash message fns
+
# 1.2.0
* adds flash
@@ -10,15 +10,24 @@
[:p "Clicking on the button will open a modal. Try it!"]
[:button {:id "click-me"} "Click me!"]])
+(def modal-content [:div
+ [:p "This is how you generate a modal using Filament."]
+ [:p "The following inputs should popup their pickers. When the popups are open, pressing exscape should not close the modal."]
+ [:input {:type "file" :name "file"}][:br]
+ [:input {:type "date" :name "date"}][:br]
+ [:input {:type "text" :name "text"}][:br]
+ [:select {:name "select"} [:option "One"][:option "Two"][:option "Three"]][:br]
+ [:textarea {:name "textarea"}]])
+
(def modal (modal/create-modal "modal"))
(defn show-modal []
- (modal/populate! modal {:title "Modal" :content "This is how you generate a modal using Filament."})
+ (modal/populate! modal {:title "Modal" :content (h/html modal-content)})
(modal/show! modal))
(defn arm-button []
(util/override-click! (dom/by-id "click-me") show-modal))
(defn demo-modal []
(dom/append! (.-body js/document) (h/html dom))
- (arm-button))
+ (arm-button))
View
@@ -1,4 +1,4 @@
-(defproject com.8thlight/filament "1.2.1"
+(defproject com.8thlight/filament "1.2.2"
:description "Rich client utilities"
:url "http://github.com/8thlight/filament"
:license {:name "Eclipse Public License"
@@ -10,13 +10,13 @@
"Returns a hiccup data structure representing the modal DOM."
([id] (modal-view id "modal"))
([id class]
- [:div {:tabindex "0" :id id :class (str class "-backdrop")} ; tabindex is necessary to grant focus
- [:div {:class class}
- [:div {:class (str class "-header")}
- [:button {:type "button" :class (str class "-close-button")}
- "✕"]
- [:h3]]
- [:div {:class (str class "-body")}]]]))
+ [:div {:tabindex "0" :id id :class (str class "-backdrop")} ; tabindex is necessary to grant focus
+ [:div {:class class}
+ [:div {:class (str class "-header")}
+ [:button {:type "button" :class (str class "-close-button")}
+ "✕"]
+ [:h3]]
+ [:div {:class (str class "-body")}]]]))
(defn modal-node [modal] (first (dom/children modal)))
(defn header-node [modal] (first (dom/children (modal-node modal))))
@@ -39,10 +39,10 @@
"Hides the modal and dataches it from the DOM."
[modal]
(fx/fade-out modal
- :duration 100
- :on-finish #(do
- (dom/detach! modal)
- (fx/hide! modal))))
+ :duration 100
+ :on-finish #(do
+ (dom/detach! modal)
+ (fx/hide! modal))))
(defn set-title!
"Populates the title of the modal."
@@ -55,7 +55,7 @@
(dom/text (title-node modal)))
(defn set-content!
- "Populates the body of the modal."
+ "Populates the body of the modal."
[modal content]
(dom/set-html! (body modal) content))
@@ -73,15 +73,15 @@
(populate! modal {:title "" :content ""}))
(defn- process-keyup [modal e]
- (when (and (util/ESC? e)
- (not= "SELECT" (.-tagName (event/target e))))
- (hide! modal)))
+ (when (util/ESC? e)
+ (if (#{"SELECT" "INPUT" "TEXTAREA"} (.-tagName (event/target e)))
+ (fx/focus! modal)
+ (hide! modal))))
(defn- bind-listeners [modal class]
(event/listen! modal :keyup (partial process-keyup modal))
- (util/override-click! modal (fn [e] (hide! modal)))
- (util/override-click! (close-button modal) (fn [e] (hide! modal)))
- (util/override-click! (modal-node modal) #(event/stop-propagation %)))
+ (event/listen! modal :click (fn [e] (when (= modal (event/target e)) (hide! modal))))
+ (util/override-click! (close-button modal) (fn [e] (hide! modal))))
(defn create-modal
"Returns a datached modal DOM element with no content. This is typically used to create the modal at a high level
@@ -98,6 +98,6 @@
.modal-body - container for the modal content"
([id] (create-modal id "modal"))
([id class]
- (let [modal (dom/single-node (h/html (modal-view id class)))]
- (bind-listeners modal class)
- modal)))
+ (let [modal (dom/single-node (h/html (modal-view id class)))]
+ (bind-listeners modal class)
+ modal)))

0 comments on commit 9a5a9af

Please sign in to comment.