mirror of
https://github.com/rabbibotton/clog.git
synced 2025-12-07 11:10:18 -08:00
Last form elements
This commit is contained in:
David Botton
parent
dea7bd02d9
commit
46f08d9e53
4 changed files with 268 additions and 20 deletions
|
|
@ -214,7 +214,8 @@ an existing element with HTML-ID. The HTML-ID must be unique."))
|
|||
|
||||
(defgeneric advisory-title (clog-element)
|
||||
(:documentation "Get/Setf advisory title of Element, usually
|
||||
used for body and image maps."))
|
||||
used for body and image maps but creates in forms and many
|
||||
elements a tool tip."))
|
||||
|
||||
(defmethod advisory-title ((obj clog-element))
|
||||
(property obj "title"))
|
||||
|
|
|
|||
197
clog-form.lisp
197
clog-form.lisp
|
|
@ -143,17 +143,19 @@ elements."))
|
|||
|
||||
(defgeneric create-form-element (clog-obj element-type &key name value label)
|
||||
(:documentation "Create a new clog-form-element as child of CLOG-OBJ.
|
||||
It is importamt tjat clog-form-elements are a child or descendant of a
|
||||
clog-form in the DOM"))
|
||||
It is importamt that clog-form-elements are a child or descendant of a
|
||||
clog-form in the DOM. The radio ELEMENT-TYPE groups by NAME."))
|
||||
|
||||
(defmethod create-form-element ((obj clog-obj) element-type
|
||||
&key (name nil) (value "") (label nil))
|
||||
&key (name nil) (value nil) (label nil))
|
||||
(let ((element (create-child
|
||||
obj (format nil "<input type='~A' value='~A' ~A/>"
|
||||
obj (format nil "<input type='~A'~A~A/>"
|
||||
(escape-string element-type)
|
||||
value
|
||||
(if value
|
||||
(format nil " value='~A'" value)
|
||||
"")
|
||||
(if name
|
||||
(format nil "name='~A'" name)
|
||||
(format nil " name='~A'" name)
|
||||
""))
|
||||
:clog-type 'clog-form-element :auto-place t)))
|
||||
(when label
|
||||
|
|
@ -415,6 +417,40 @@ have this set true. Autofocus on element when form loaded. "))
|
|||
(setf (property obj "size") value))
|
||||
(defsetf size set-size)
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;
|
||||
;; minimum-length ;;
|
||||
;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric minimum-length (clog-form-element)
|
||||
(:documentation "Get/Setf form element minimum-length."))
|
||||
|
||||
(defmethod minimum-length ((obj clog-form-element))
|
||||
(property obj "minlength"))
|
||||
|
||||
(defgeneric set-minimum-length (clog-form-element value)
|
||||
(:documentation "Set minimum-length VALUE for CLOG-FORM-ELEMENT"))
|
||||
|
||||
(defmethod set-minimum-length ((obj clog-form-element) value)
|
||||
(setf (property obj "minlength") value))
|
||||
(defsetf minimum-length set-minimum-length)
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;
|
||||
;; maximum-length ;;
|
||||
;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric maximum-length (clog-form-element)
|
||||
(:documentation "Get/Setf form element maximum-length."))
|
||||
|
||||
(defmethod maximum-length ((obj clog-form-element))
|
||||
(property obj "maxlength"))
|
||||
|
||||
(defgeneric set-maximum-length (clog-form-element value)
|
||||
(:documentation "Set maximum-length VALUE for CLOG-FORM-ELEMENT"))
|
||||
|
||||
(defmethod set-maximum-length ((obj clog-form-element) value)
|
||||
(setf (property obj "maxlength") value))
|
||||
(defsetf maximum-length set-maximum-length)
|
||||
|
||||
;;;;;;;;;;;;
|
||||
;; select ;;
|
||||
;;;;;;;;;;;;
|
||||
|
|
@ -569,6 +605,29 @@ virtual keyboards."))
|
|||
(defmethod label-for ((obj clog-label) element)
|
||||
(setf (attribute obj "for") element))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Implementation - clog-fieldset
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defclass clog-fieldset (clog-element)()
|
||||
(:documentation "CLOG Form Element Fieldset Object"));
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;
|
||||
;; create-fieldset ;;
|
||||
;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
|
||||
(defgeneric create-fieldset (clog-obj &key legend)
|
||||
(:documentation "Create a new clog-fieldset as child of CLOG-OBJ."))
|
||||
|
||||
(defmethod create-fieldset ((obj clog-obj) &key (legend nil))
|
||||
(create-child obj (format nil "<fieldset>~A</fieldset>"
|
||||
(if legend
|
||||
(format nil "<legend>~A</legend>" legend)
|
||||
""))
|
||||
:clog-type 'clog-fieldset :auto-place t))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Implementation - clog-data-list
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -719,3 +778,129 @@ optionally fill in with contents of data-list."))
|
|||
|
||||
(defmethod disable-resize ((obj clog-text-area))
|
||||
(setf (resizable obj) :none))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Implementation - clog-select
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defclass clog-select (clog-form-element)()
|
||||
(:documentation "CLOG Form Element Select Options Object"));
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;
|
||||
;; create-select ;;
|
||||
;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric create-select (clog-obj &key name multiple label)
|
||||
(:documentation "Create a new clog-select as child of CLOG-OBJ."))
|
||||
|
||||
(defmethod create-select ((obj clog-obj) &key (name nil) (multiple nil) (label nil))
|
||||
(let ((element (create-child
|
||||
obj (format nil "<select~A~A/>"
|
||||
(if multiple
|
||||
" multiple"
|
||||
"")
|
||||
(if name
|
||||
(format nil " name='~A'" name)
|
||||
""))
|
||||
:clog-type 'clog-select :auto-place t)))
|
||||
(when label
|
||||
(label-for label element))
|
||||
element))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; add-select-option ;;
|
||||
;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric add-select-option (clog-select value content)
|
||||
(:documentation "Add option VALUE to select."))
|
||||
|
||||
(defmethod add-select-option ((obj clog-select) value content)
|
||||
(create-child obj (format nil "<option value='~A'>~A</option>"
|
||||
(escape-string value)
|
||||
(escape-string content))
|
||||
:clog-type 'clog-element :auto-place t))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; add-select-options ;;
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric add-select-options (clog-select select)
|
||||
(:documentation "Add group of options to select."))
|
||||
|
||||
(defmethod add-select-options ((obj clog-select) select)
|
||||
(dolist (value select)
|
||||
(add-select-option obj value value)))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Implementation - clog-option
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defclass clog-option (clog-form-element)()
|
||||
(:documentation "CLOG Form Element Option for CLOG Select Object"));
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;
|
||||
;; create-option ;;
|
||||
;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric create-option (clog-obj &key content value selected disabled)
|
||||
(:documentation "Create a new clog-option as child of CLOG-OBJ."))
|
||||
|
||||
(defmethod create-option ((obj clog-obj) &key
|
||||
(content "")
|
||||
(value nil)
|
||||
(selected nil)
|
||||
(disabled nil))
|
||||
(create-child obj (format nil "<option~A~A~A>~A</option>"
|
||||
(if selected
|
||||
" selected"
|
||||
"")
|
||||
(if disabled
|
||||
" disabled"
|
||||
"")
|
||||
(if value
|
||||
(format nil " value='~A'" name)
|
||||
"")
|
||||
content)
|
||||
:clog-type 'clog-option :auto-place t))
|
||||
|
||||
;;;;;;;;;;;;;;;
|
||||
;; selectedp ;;
|
||||
;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric selectedp (clog-form-element)
|
||||
(:documentation "Get/Setf form element selectedp."))
|
||||
|
||||
(defmethod selectedp ((obj clog-form-element))
|
||||
(js-true-p (property obj "selected")))
|
||||
|
||||
(defgeneric set-selectedp (clog-form-element value)
|
||||
(:documentation "Set selectedp VALUE for CLOG-FORM-ELEMENT"))
|
||||
|
||||
(defmethod set-selectedp ((obj clog-form-element) value)
|
||||
(setf (property obj "selected") (p-true-js value)))
|
||||
(defsetf selectedp set-selectedp)
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Implementation - clog-optgroup
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defclass clog-optgroup (clog-form-element)()
|
||||
(:documentation "CLOG Form Element Optgroup for CLOG Select Object"));
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;
|
||||
;; create-optgroup ;;
|
||||
;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defgeneric create-optgroup (clog-obj &key content disabled)
|
||||
(:documentation "Create a new clog-optgroup as child of CLOG-OBJ."))
|
||||
|
||||
(defmethod create-optgroup ((obj clog-obj) &key
|
||||
(content "")
|
||||
(disabled nil))
|
||||
(create-child obj (format nil "<optgroup label='~A'~A/>"
|
||||
content
|
||||
(if disabled
|
||||
" disabled"
|
||||
""))
|
||||
:clog-type 'clog-optgroup :auto-place t))
|
||||
|
|
|
|||
17
clog.lisp
17
clog.lisp
|
|
@ -330,12 +330,29 @@ application."
|
|||
(input-mode generic-function)
|
||||
(set-data-list generic-function)
|
||||
(make-data-list generic-function)
|
||||
(minimum-length generic-function)
|
||||
(maximum-length generic-function)
|
||||
|
||||
"CLOG-Label - Class for CLOG Labels"
|
||||
(clog-label class)
|
||||
(create-label generic-function)
|
||||
(label-for generic-function)
|
||||
|
||||
"CLOG-Fieldset - Class for CLOG Fieldsets"
|
||||
(clog-fieldset class)
|
||||
(create-fieldset generic-function)
|
||||
|
||||
"CLOG-Select - Class for CLOG Selects"
|
||||
(clog-select class)
|
||||
(create-select generic-function)
|
||||
(clog-option class)
|
||||
(create-option generic-function)
|
||||
(clog-optgroup class)
|
||||
(create-optgroup generic-function)
|
||||
(selectedp generic-function)
|
||||
(add-select-option generic-function)
|
||||
(add-select-options generic-function)
|
||||
|
||||
"CLOG-Data-List - Class for CLOG Option Data Lists"
|
||||
(clog-data-list class)
|
||||
(create-data-list generic-function)
|
||||
|
|
|
|||
|
|
@ -23,20 +23,42 @@
|
|||
|
||||
;; Create form for panel 1
|
||||
(f1 (create-form p1))
|
||||
(tmp (create-label f1 :content "Fill in blank:"))
|
||||
(fe1 (create-form-element f1 :text :label tmp))
|
||||
(fe1 (create-form-element f1 :text
|
||||
:label (create-label f1 :content "Fill in blank:")))
|
||||
(tmp (create-br f1))
|
||||
(tmp (create-label f1 :content "Pick a color:"))
|
||||
(fe2 (create-form-element f1 :color :value "#ffffff" :label tmp))
|
||||
(fe2 (create-form-element f1 :color :value "#ffffff"
|
||||
:label (create-label f1 :content "Pick a color:")))
|
||||
(tmp (create-br f1))
|
||||
(tmp (create-form-element f1 :submit :value "OK"))
|
||||
(tmp (create-form-element f1 :reset :value "Start Again"))
|
||||
|
||||
;; Create for for panel 2
|
||||
(f2 (create-form p2))
|
||||
(tmp (create-label f2 :content "Please type here:"))
|
||||
(ta1 (create-text-area f2 :columns 60 :rows 8 :label tmp))
|
||||
(tmp (create-br f2))
|
||||
(fs2 (create-fieldset f2 :legend "Stuff"))
|
||||
(tmp (create-label fs2 :content "Please type here:"))
|
||||
(ta1 (create-text-area fs2 :columns 60 :rows 8 :label tmp))
|
||||
(tmp (create-br fs2))
|
||||
(rd1 (create-form-element fs2 :radio :name "rd"))
|
||||
(tmp (create-label fs2 :content "To Be" :label-for rd1))
|
||||
(rd2 (create-form-element fs2 :radio :name "rd"))
|
||||
(tmp (create-label fs2 :content "No to Be" :label-for rd2))
|
||||
(tmp (create-br fs2))
|
||||
(ck1 (create-form-element fs2 :checkbox :name "ck"))
|
||||
(tmp (create-label fs2 :content "Here" :label-for ck1))
|
||||
(ck2 (create-form-element fs2 :checkbox :name "ck"))
|
||||
(tmp (create-label fs2 :content "There" :label-for ck2))
|
||||
(tmp (create-br fs2))
|
||||
(sl1 (create-select fs2 :label (create-label fs2 :content "Pick one:")))
|
||||
(sl2 (create-select fs2 :label (create-label fs2 :content "Pick one:")))
|
||||
|
||||
(sl3 (create-select fs2 :multiple t
|
||||
:label (create-label fs2 :content "Pick some:")))
|
||||
(o1 (create-option sl3 :content "one"))
|
||||
(o2 (create-option sl3 :content "two"))
|
||||
(o3 (create-option sl3 :content "three"))
|
||||
(og1 (create-optgroup sl3 :content "These are a group"))
|
||||
(o4 (create-option og1 :content "four"))
|
||||
(o5 (create-option og1 :content "five"))
|
||||
(tmp (create-form-element f2 :submit :value "OK"))
|
||||
(tmp (create-form-element f2 :reset :value "Start Again")))
|
||||
|
||||
|
|
@ -49,7 +71,7 @@
|
|||
|
||||
(make-data-list fe1 '("Cool Title"
|
||||
"Not So Cool Title"
|
||||
"Why Not Another Title"))
|
||||
"Why Not, Another Title"))
|
||||
|
||||
(make-data-list fe2 '("#ffffff"
|
||||
"#ff0000"
|
||||
|
|
@ -82,12 +104,35 @@
|
|||
(setf (vertical-align ta1) :top)
|
||||
(disable-resize ta1)
|
||||
|
||||
(setf (vertical-align sl1) :top)
|
||||
(setf (vertical-align sl2) :top)
|
||||
(setf (vertical-align sl3) :top)
|
||||
(setf (size sl1) 3)
|
||||
(add-select-options sl1 '("one"
|
||||
"two"
|
||||
"three"
|
||||
"four"
|
||||
"five"))
|
||||
|
||||
(add-select-options sl2 '("one"
|
||||
"two"
|
||||
"three"
|
||||
"four"
|
||||
"five"))
|
||||
|
||||
(set-on-change sl3 (lambda (obj)
|
||||
(when (selectedp o5)
|
||||
(alert (window body) "Selected 5"))))
|
||||
(set-on-submit f2
|
||||
(lambda (obj)
|
||||
(setf (hiddenp f2) t)
|
||||
(create-span p2
|
||||
(format nil "<br><b>Your form has been submitted:</b><br>~A"
|
||||
(value ta1)))))
|
||||
(format nil "<br><b>Your form has been submitted:</b>
|
||||
<br>~A<hr>1 - ~A<br>2 - ~A<br>3 - ~A"
|
||||
(value ta1)
|
||||
(value sl1)
|
||||
(value sl2)
|
||||
(selectedp o2)))))
|
||||
|
||||
;; Panel 3 contents
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue