Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

documents modal and adds example

  • Loading branch information...
commit 7080f6f036b0dfab024fc917907912b4fc460c9c 1 parent a177f54
@slagyr slagyr authored
View
74 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;
+}
View
6 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))
View
19 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))
View
71 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)))
Please sign in to comment.
Something went wrong with that request. Please try again.