Skip to content
Browse files

documents and provides example for forms

  • Loading branch information...
1 parent 76c4c3a commit 0bbeba7f280fcc81889df4b50f00c89274b2b817 @slagyr slagyr committed Jan 14, 2014
View
40 example/example.css
@@ -1,4 +1,28 @@
/* --------------------------------------
+* Styles soley for the purpose of this example
+* -------------------------------------- */
+
+body {
+ font-family: sans-serif "Helvetica";
+}
+
+.example {
+ border: 1px solid gray;
+ padding: 10px;
+ margin-bottom: 10px;
+}
+
+.example h2 {
+ margin-top: 5px;
+ font-family: "Courier New", Courier, monospace;
+}
+
+label {
+ display: block;
+ margin-top: 5px;
+}
+
+/* --------------------------------------
* Autocomplete Field Styles
* -------------------------------------- */
.autocomplete-dropdown {
@@ -33,6 +57,20 @@
}
/* --------------------------------------
+* Forms Styles
+* -------------------------------------- */
+
+p.field-errors {
+ margin: 0;
+ padding: 0;
+ color: #E03725;
+}
+
+.field-error {
+ border: 1px solid #E03725;
+}
+
+/* --------------------------------------
* Modal Styles
* -------------------------------------- */
@@ -99,4 +137,4 @@
max-height: 85%;
overflow-y: auto;
padding: 1em;
-}
+}
View
2 example/project.clj
@@ -3,7 +3,7 @@
:license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"}
- :dependencies [[com.8thlight/filament "1.1.3"]
+ :dependencies [[com.8thlight/filament "1.1.4"]
[com.8thlight/hiccup "1.1.1"]
[org.clojure/clojure "1.5.1"]]
View
7 example/src/cljs/example/autocomplete_demo.cljs
@@ -13,9 +13,12 @@
"indigo"
"violet"])
-(def dom [:form {:action "/fooey" :autocomplete "off"}
+(def dom [:div.example
+ [:h2 "com.eighthlight.filament.autocomplete-field"]
+ [:p "The field below will auto complete the colors of the rainbow (red, orange, yellow, green, blue, indigo, violet)."]
+ [:form {:action "/fooey" :autocomplete "off"}
[:label {:for "autocomplete-field"} "Autocomplete:"]
- [:input#autocomplete-field {:type "text"}]])
+ [:input#autocomplete-field {:type "text"}]]])
(defn autocomplete-on-select [[name value]]
(dom/set-value! (dom/by-id "autocomplete-field") value))
View
44 example/src/cljs/example/forms_demo.cljs
@@ -0,0 +1,44 @@
+(ns example.forms-demo
+ (:require-macros [hiccup.core :as h])
+ (:require [clojure.string :as string]
+ [com.eighthlight.filament.forms :as forms]
+ [com.eighthlight.filament.util :as util]
+ [domina :as dom]
+ [hiccup.core]))
+
+(def dom [:div.example
+ [:h2 "com.eighthlight.filament.forms"]
+ [:p "Click on the buttons below to see how their corresponding functions behave on the following form."]
+ [:button#form-data "Demonstrate form-date"]
+ [:button#show-errors "Demonstrate display-errors"]
+ [:button#clear-errors "Demonstrate teardown-errors"]
+ [:form#forms-demo-form {:action "/fooey" :autocomplete "off"}
+ [:div
+ [:label {:for "field1"} "Field 1:"]
+ [:input#field1 {:name "field1" :type "text" :value "1"}]]
+ [:div
+ [:label {:for "field2"} "Field 2:"]
+ [:select#field2 {:name "field2"}
+ [:option "Yes"]
+ [:option "No"]
+ [:option "Maybe"]]]
+ [:div
+ [:label {:for "field3"} "Field 3:"]
+ [:textarea#field3 {:name "field3"} "Some content"]]]])
+
+(defn show-form-data []
+ (js/alert (pr-str (forms/form-data (dom/by-id "forms-demo-form")))))
+
+(def model-with-errors {:errors {:field1 ["has one error"]
+ :field2 ["first error" "second error"]
+ :field3 ["last error"]}})
+(defn display-errors []
+ (forms/display-errors model-with-errors))
+
+(defn demo-forms []
+ (dom/append! (.-body js/document) (h/html dom))
+ (util/override-click! (dom/by-id "form-data") show-form-data)
+ (util/override-click! (dom/by-id "show-errors") display-errors)
+ (util/override-click! (dom/by-id "clear-errors") forms/teardown-errors)
+ )
+
View
2 example/src/cljs/example/main.cljs
@@ -1,7 +1,9 @@
(ns example.main
(:require [example.autocomplete-demo :refer [demo-autocomplete]]
+ [example.forms-demo :refer [demo-forms]]
[example.modal-demo :refer [demo-modal]]))
(defn ^:export init []
(demo-autocomplete)
+ (demo-forms)
(demo-modal))
View
7 example/src/cljs/example/modal_demo.cljs
@@ -5,6 +5,11 @@
[domina :as dom]
[hiccup.core]))
+(def dom [:div.example
+ [:h2 "com.eighthlight.filament.modal"]
+ [:p "Clicking on the button will open a modal. Try it!"]
+ [:button {:id "click-me"} "Click me!"]])
+
(def modal (modal/create-modal "modal"))
(defn show-modal []
@@ -15,5 +20,5 @@
(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!"]]))
+ (dom/append! (.-body js/document) (h/html dom))
(arm-button))
View
2 project.clj
@@ -1,4 +1,4 @@
-(defproject com.8thlight/filament "1.1.3"
+(defproject com.8thlight/filament "1.1.4"
:description "Rich client utilities"
:url "http://github.com/8thlight/filament"
:license {:name "Eclipse Public License"

0 comments on commit 0bbeba7

Please sign in to comment.
Something went wrong with that request. Please try again.