documents modal and adds example

example/example.css

@@ -1,3 +1,6 @@
+/* --------------------------------------
+*    Autocomplete Field Styles
+*  -------------------------------------- */
 .autocomplete-dropdown {
     background-color: white;
     border: 1px solid #25a8e0;
@@ -27,4 +30,73 @@
 .autocomplete-dropdown .highlighted {
     background-color: #25a8e0;
     color: white;
-}
+}
+
+/* --------------------------------------
+*    Modal Styles
+*  -------------------------------------- */
+
+.modal-backdrop {
+    position: fixed;
+    overflow-y: auto;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9000;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 10px;
+}
+
+.modal {
+    outline: none;
+    aria-hidden: true;
+    z-index: 9001;
+    overflow: visible;
+    max-width: 800px;
+    width: 90%;
+    margin: 100px auto 0 auto;
+    background-color: #ffffff;
+
+    /*IE6-7*/
+    -webkit-border-radius: 6px;
+    -moz-border-radius: 6px;
+    border-radius: 6px;
+    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+    -webkit-background-clip: padding-box;
+    -moz-background-clip: padding-box;
+    background-clip: padding-box;
+}
+
+.modal-header {
+    padding: 1em 1em 0;
+}
+
+.modal-header button {
+  float: right;
+  font-size: 1.2em;
+  font-weight: 600;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  border: none;
+  cursor: pointer;
+  color: #333;
+}
+
+.modal-header h3 {
+    width: 95%;
+    display: inline-block;
+}
+
+.modal-body {
+    clear: both;
+    max-height: 85%;
+    overflow-y: auto;
+    padding: 1em;
+}

example/src/cljs/example/main.cljs

@@ -1,5 +1,7 @@
 (ns example.main
-  (:require [example.autocomplete-demo :refer [demo-autocomplete]]))
+  (:require [example.autocomplete-demo :refer [demo-autocomplete]]
+            [example.modal-demo :refer [demo-modal]]))
 
 (defn ^:export init []
-  (demo-autocomplete))
+  (demo-autocomplete)
+  (demo-modal))

example/src/cljs/example/modal_demo.cljs

@@ -0,0 +1,19 @@
+(ns example.modal-demo
+  (:require-macros [hiccup.core :as h])
+  (:require [com.eighthlight.filament.modal :as modal]
+            [com.eighthlight.filament.util :as util]
+            [domina :as dom]
+            [hiccup.core]))
+
+(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/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 [:p [:button {:id "click-me"} "Click me!"]]))
+  (arm-button))

src/cljs/com/eighthlight/filament/modal.cljs

@@ -3,11 +3,11 @@
   (:require [com.eighthlight.filament.util :as util]
             [com.eighthlight.filament.fx :as fx]
             [domina :as dom]
-            [domina.css :as css]
             [domina.events :as event]
             [hiccup.core]))
 
 (defn modal-view
+  "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
@@ -18,61 +18,86 @@
        [:h3]]
       [:div {:class (str class "-body")}]]]))
 
-(defn title-node [modal] (css/sel modal "h3"))
+(defn modal-node [modal] (first (dom/children modal)))
+(defn header-node [modal] (first (dom/children (modal-node modal))))
+(defn title-node [modal] (second (dom/children (header-node modal))))
+(defn close-button [modal] (first (dom/children (header-node modal))))
+(defn body [modal] (second (dom/children (modal-node modal))))
 
-(defn show! [modal]
+(defn show!
+  "Attaches the modal to the DOM and makes it visible."
+  [modal]
   (dom/set-style! modal :opacity 0)
-  (dom/append! (css/sel "body") modal)
+  (dom/append! (.-body js/document) modal)
   (fx/show! modal)
   (.focus modal)
   (fx/fade-in modal
               :duration 100
               :on-end (fn [e] (dom/set-style! modal :opacity 100))))
 
-(defn hide! [modal]
+(defn hide!
+  "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))))
 
-(defn set-title! [modal title]
+(defn set-title!
+  "Populates the title of the modal."
+  [modal title]
   (dom/set-text! (title-node modal) title))
 
-(defn title [modal]
+(defn title
+  "Returns the title of the modal."
+  [modal]
   (dom/text (title-node modal)))
 
-(defn set-content! [modal content]
-  (dom/set-html! (css/sel modal ".modal-body") content))
+(defn set-content!
+   "Populates the body of the modal."
+  [modal content]
+  (dom/set-html! (body modal) content))
 
-(defn body [modal]
-  (css/sel modal ".modal-body"))
-
-(defn populate! [modal {:keys [title content]}]
+(defn populate!
+  "Populates the modal. The second parameter should be map containing:
+    :title - a title for the modal
+    :content - the main content of the modal"
+  [modal {:keys [title content]}]
   (set-title! modal title)
   (set-content! modal content))
 
-(defn clear! [modal]
+(defn clear!
+  "Clears out any content that is currently in the modal dom."
+  [modal]
   (populate! modal {:title "" :content ""}))
 
-(defn process-keyup [modal e]
+(defn- process-keyup [modal e]
   (when (and (util/ESC? e)
           (not= "SELECT" (.-tagName (event/target e))))
     (hide! modal)))
 
-(defn bind-listeners [modal class]
+(defn- bind-listeners [modal class]
   (event/listen! modal :keyup (partial process-keyup modal))
-  (event/listen! modal :click (fn [e] (hide! modal)))
-  (event/listen!
-    (css/sel modal (str "." (str class "-close-button")))
-    :click (fn [e] (hide! modal)))
-  (let [modal-node (css/sel modal (str "." class))]
-    (event/listen! modal-node :click (fn [e] (event/stop-propagation e)))))
+  (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 %)))
 
 (defn create-modal
+  "Returns a datached modal DOM element with no content.  This is typically used to create the modal at a high level
+  that can be reused. See populate!, show!, and hide! for usage.
+  The id parameter is added to the root DOM element so that it can be retreived easily.
+  The optional class parameter will be prefixed onto all classes applied to the elements. Defaults to 'modal'.
+
+  CSS: Presuming the default 'modal' class, the following selectors should be styled:
+    .modal-backdrop - covers the page and provide background for the foreground div
+    .modal - centered window for modal content
+    .modal-header - div at the top of the modal
+    .modal-header button - close button
+    .modal-header h3 - header/title for the modal
+    .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)
-;      (hide! modal)
       modal)))