mirrors/clog
1
Fork 0
mirror of https://github.com/rabbibotton/clog.git synced 2025-12-06 02:30:42 -08:00
Code Issues Projects Releases Wiki Activity

Text Areas

Browse source
This commit is contained in:
David Botton 2021-01-12 22:38:15 -05:00
parent dce481e3e5
commit 6f4bd84904
4 changed files with 186 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

120
clog-form.lisp
View file

@ -44,7 +44,7 @@ action."))
;; form-element-count ;; ;; form-element-count ;;
;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;
(defgeneric form-element-count (clog-formt) (defgeneric form-element-count (clog-form)
(:documentation "Get form element count.")) (:documentation "Get form element count."))
(defmethod form-element-count ((obj clog-form)) (defmethod form-element-count ((obj clog-form))
@ -141,16 +141,16 @@ elements."))
:file :hidden :image :month :number :password :radio :range :file :hidden :image :month :number :password :radio :range
:reset :search :submit :tel :text :time :url :week)) :reset :search :submit :tel :text :time :url :week))
(defgeneric create-form-element (clog-form element-type &key name value label) (defgeneric create-form-element (clog-obj element-type &key name value label)
(:documentation "Create a new clog-form-element as child of CLOG-FORM. (:documentation "Create a new clog-form-element as child of CLOG-OBJ.
clog-form-elements are always placed with in the CLOG-FORM in the DOM")) It is importamt tjat clog-form-elements are a child or descendant of a
clog-form in the DOM"))
(defmethod create-form-element ((obj clog-form) element-type (defmethod create-form-element ((obj clog-obj) element-type
&key (name nil) (value "") (label nil)) &key (name nil) (value "") (label nil))
(let ((element (create-child (let ((element (create-child
obj (format nil "<input type='~A' form='~A' value='~A' ~A/>" obj (format nil "<input type='~A' value='~A' ~A/>"
(escape-string element-type) (escape-string element-type)
(html-id obj)
value value
(if name (if name
(format nil "name='~A'" name) (format nil "name='~A'" name)
@ -448,10 +448,10 @@ have this set true. Autofocus on element when form loaded. "))
;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;
(defgeneric create-label (clog-form &key content label-for) (defgeneric create-label (clog-obj &key content label-for)
(:documentation "Create a new clog-label as child of CLOG-FORM.")) (:documentation "Create a new clog-label as child of CLOG-OBJ."))
(defmethod create-label ((obj clog-form) &key (content "") (label-for nil)) (defmethod create-label ((obj clog-obj) &key (content "") (label-for nil))
(create-child obj (format nil "<label for='~A'>~A</label>" (create-child obj (format nil "<label for='~A'>~A</label>"
(if label-for (if label-for
(html-id label-for) (html-id label-for)
@ -481,7 +481,7 @@ have this set true. Autofocus on element when form loaded. "))
;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;
(defgeneric create-data-list (clog-obj) (defgeneric create-data-list (clog-obj)
(:documentation "Create a new clog-data-list as child of CLOG-FORM.")) (:documentation "Create a new clog-data-list as child of CLOG-OBJ."))
(defmethod create-data-list ((obj clog-obj)) (defmethod create-data-list ((obj clog-obj))
(create-child obj "<datalist />" :clog-type 'clog-data-list :auto-place t)) (create-child obj "<datalist />" :clog-type 'clog-data-list :auto-place t))
@ -497,3 +497,101 @@ have this set true. Autofocus on element when form loaded. "))
(create-child obj (format nil "<option value='~A'>" (escape-string value)) (create-child obj (format nil "<option value='~A'>" (escape-string value))
:clog-type 'clog-element :auto-place t)) :clog-type 'clog-element :auto-place t))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Implementation - clog-text-area
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defclass clog-text-area (clog-form-element)()
(:documentation "CLOG Form Element Text-Area Object"));
;;;;;;;;;;;;;;;;;;;;;;
;; create-text-area ;;
;;;;;;;;;;;;;;;;;;;;;;
(defgeneric create-text-area (clog-obj &key columns rows name value label)
(:documentation "Create a new clog-text-area as child of CLOG-OBJ."))
(defmethod create-text-area ((obj clog-obj)
&key (columns 20)
(rows 2)
(name "")
(value "")
(label nil))
(let ((element
(create-child obj
(format nil "<textarea name='~A' cols='~A' rows='~A'>~A</textarea>"
name columns rows (escape-string value))
:clog-type 'clog-text-area :auto-place t)))
(when label
(label-for label element))
element))
;;;;;;;;;;;;;;;
;; word-wrap ;;
;;;;;;;;;;;;;;;
(defgeneric word-wrap (clog-text-area)
(:documentation "Get/Setf form element word-wrap."))
(defmethod word-wrap ((obj clog-text-area))
(property obj "wrap"))
(defgeneric set-word-wrap (clog-text-area value)
(:documentation "Set word-wrap WORD-WRAP for CLOG-TEXT-AREA"))
(defmethod set-word-wrap ((obj clog-text-area) value)
(setf (property obj "wrap") value))
(defsetf word-wrap set-word-wrap)
;;;;;;;;;;;;;;;
;; word-wrap ;;
;;;;;;;;;;;;;;;
(defgeneric word-wrap (clog-text-area)
(:documentation "Get/Setf form element word-wrap."))
(defmethod word-wrap ((obj clog-text-area))
(property obj "wrap"))
(defgeneric set-word-wrap (clog-text-area value)
(:documentation "Set word-wrap WORD-WRAP for CLOG-TEXT-AREA"))
(defmethod set-word-wrap ((obj clog-text-area) value)
(setf (property obj "wrap") value))
(defsetf word-wrap set-word-wrap)
;;;;;;;;;;;;;
;; columns ;;
;;;;;;;;;;;;;
(defgeneric columns (clog-text-area)
(:documentation "Get/Setf form element columns."))
(defmethod columns ((obj clog-text-area))
(property obj "cols"))
(defgeneric set-columns (clog-text-area value)
(:documentation "Set columns COLUMNS for CLOG-TEXT-AREA"))
(defmethod set-columns ((obj clog-text-area) value)
(setf (property obj "cols") value))
(defsetf columns set-columns)
;;;;;;;;;;
;; rows ;;
;;;;;;;;;;
(defgeneric rows (clog-text-area)
(:documentation "Get/Setf form element rows."))
(defmethod rows ((obj clog-text-area))
(property obj "rows"))
(defgeneric set-rows (clog-text-area value)
(:documentation "Set rows ROWS for CLOG-TEXT-AREA"))
(defmethod set-rows ((obj clog-text-area) value)
(setf (property obj "rows") value))
(defsetf rows set-rows)

9
clog.lisp
View file

@ -331,7 +331,14 @@ application."
"CLOG-Data-List - Class for CLOG Option Data Lists" "CLOG-Data-List - Class for CLOG Option Data Lists"
(clog-data-list class) (clog-data-list class)
(create-data-list generic-function) (create-data-list generic-function)
(add-option generic-function)) (add-option generic-function)
"CLOG-Text-Area - Class for CLOG Text Areas"
(clog-text-area class)
(create-text-area generic-function)
(word-wrap generic-function)
(columns generic-function)
(rows generic-function))
(defsection @clog-body (:title "CLOG Body Objects") (defsection @clog-body (:title "CLOG Body Objects")
"CLOG-Body - CLOG Body Objects" "CLOG-Body - CLOG Body Objects"

57
doc/clog-manual.html
View file

@ -1880,7 +1880,7 @@ action.</p></li>
<p><a id='x-28CLOG-3AFORM-ELEMENT-COUNT-20GENERIC-FUNCTION-29'></a></p> <p><a id='x-28CLOG-3AFORM-ELEMENT-COUNT-20GENERIC-FUNCTION-29'></a></p>
<ul> <ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AFORM-ELEMENT-COUNT-20GENERIC-FUNCTION-29" >FORM-ELEMENT-COUNT</a></span></span> <span class="locative-args">CLOG-FORMT</span></span></p> <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AFORM-ELEMENT-COUNT-20GENERIC-FUNCTION-29" >FORM-ELEMENT-COUNT</a></span></span> <span class="locative-args">CLOG-FORM</span></span></p>
<p>Get form element count.</p></li> <p>Get form element count.</p></li>
</ul> </ul>
@ -1942,10 +1942,11 @@ elements.</p></li>
<p><a id='x-28CLOG-3ACREATE-FORM-ELEMENT-20GENERIC-FUNCTION-29'></a></p> <p><a id='x-28CLOG-3ACREATE-FORM-ELEMENT-20GENERIC-FUNCTION-29'></a></p>
<ul> <ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-FORM-ELEMENT-20GENERIC-FUNCTION-29" >CREATE-FORM-ELEMENT</a></span></span> <span class="locative-args">CLOG-FORM ELEMENT-TYPE &amp;KEY NAME VALUE LABEL</span></span></p> <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-FORM-ELEMENT-20GENERIC-FUNCTION-29" >CREATE-FORM-ELEMENT</a></span></span> <span class="locative-args">CLOG-OBJ ELEMENT-TYPE &amp;KEY NAME VALUE LABEL</span></span></p>
<p>Create a new clog-form-element as child of <code>CLOG-FORM</code>. <p>Create a new clog-form-element as child of <code>CLOG-OBJ</code>.
clog-form-elements are always placed with in the <code>CLOG-FORM</code> in the DOM</p></li> It is importamt tjat clog-form-elements are a child or descendant of a
clog-form in the DOM</p></li>
</ul> </ul>
<p><a id='x-28CLOG-3AAUTOCOMPLETE-20GENERIC-FUNCTION-29'></a></p> <p><a id='x-28CLOG-3AAUTOCOMPLETE-20GENERIC-FUNCTION-29'></a></p>
@ -2102,9 +2103,9 @@ This works since Input type will fall back to a text input.</p></li>
<p><a id='x-28CLOG-3ACREATE-LABEL-20GENERIC-FUNCTION-29'></a></p> <p><a id='x-28CLOG-3ACREATE-LABEL-20GENERIC-FUNCTION-29'></a></p>
<ul> <ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-LABEL-20GENERIC-FUNCTION-29" >CREATE-LABEL</a></span></span> <span class="locative-args">CLOG-FORM &amp;KEY CONTENT LABEL-FOR</span></span></p> <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-LABEL-20GENERIC-FUNCTION-29" >CREATE-LABEL</a></span></span> <span class="locative-args">CLOG-OBJ &amp;KEY CONTENT LABEL-FOR</span></span></p>
<p>Create a new clog-label as child of <code>CLOG-FORM</code>.</p></li> <p>Create a new clog-label as child of <code>CLOG-OBJ</code>.</p></li>
</ul> </ul>
<p><a id='x-28CLOG-3ALABEL-FOR-20GENERIC-FUNCTION-29'></a></p> <p><a id='x-28CLOG-3ALABEL-FOR-20GENERIC-FUNCTION-29'></a></p>
@ -2130,7 +2131,7 @@ This works since Input type will fall back to a text input.</p></li>
<ul> <ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-DATA-LIST-20GENERIC-FUNCTION-29" >CREATE-DATA-LIST</a></span></span> <span class="locative-args">CLOG-OBJ</span></span></p> <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-DATA-LIST-20GENERIC-FUNCTION-29" >CREATE-DATA-LIST</a></span></span> <span class="locative-args">CLOG-OBJ</span></span></p>
<p>Create a new clog-data-list as child of <a href="#x-28CLOG-3ACLOG-FORM-20CLASS-29" title="(CLOG:CLOG-FORM CLASS)"><code>CLOG-FORM</code></a>.</p></li> <p>Create a new clog-data-list as child of <code>CLOG-OBJ</code>.</p></li>
</ul> </ul>
<p><a id='x-28CLOG-3AADD-OPTION-20GENERIC-FUNCTION-29'></a></p> <p><a id='x-28CLOG-3AADD-OPTION-20GENERIC-FUNCTION-29'></a></p>
@ -2141,6 +2142,48 @@ This works since Input type will fall back to a text input.</p></li>
<p>Add option <code>VALUE</code> to data-list.</p></li> <p>Add option <code>VALUE</code> to data-list.</p></li>
</ul> </ul>
<p>CLOG-Text-Area - Class for <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Text Areas</p>
<p><a id='x-28CLOG-3ACLOG-TEXT-AREA-20CLASS-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[class]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLOG-TEXT-AREA-20CLASS-29" >CLOG-TEXT-AREA</a></span></span> <span class="locative-args"><a href="#x-28CLOG-3ACLOG-FORM-ELEMENT-20CLASS-29" title="(CLOG:CLOG-FORM-ELEMENT CLASS)">CLOG-FORM-ELEMENT</a></span></span></p>
<p><a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Form Element Text-Area Object</p></li>
</ul>
<p><a id='x-28CLOG-3ACREATE-TEXT-AREA-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-TEXT-AREA-20GENERIC-FUNCTION-29" >CREATE-TEXT-AREA</a></span></span> <span class="locative-args">CLOG-OBJ &amp;KEY COLUMNS ROWS NAME VALUE LABEL</span></span></p>
<p>Create a new clog-text-area as child of <code>CLOG-OBJ</code>.</p></li>
</ul>
<p><a id='x-28CLOG-3AWORD-WRAP-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AWORD-WRAP-20GENERIC-FUNCTION-29" >WORD-WRAP</a></span></span> <span class="locative-args">CLOG-TEXT-AREA</span></span></p>
<p>Get/Setf form element word-wrap.</p></li>
</ul>
<p><a id='x-28CLOG-3ACOLUMNS-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACOLUMNS-20GENERIC-FUNCTION-29" >COLUMNS</a></span></span> <span class="locative-args">CLOG-TEXT-AREA</span></span></p>
<p>Get/Setf form element columns.</p></li>
</ul>
<p><a id='x-28CLOG-3AROWS-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AROWS-20GENERIC-FUNCTION-29" >ROWS</a></span></span> <span class="locative-args">CLOG-TEXT-AREA</span></span></p>
<p>Get/Setf form element rows.</p></li>
</ul>
<p><a id='x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29'></a></p> <p><a id='x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29'></a></p>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">&#8634;</a></span></span></p>

23
tutorial/09-tutorial.lisp
View file

@ -6,6 +6,7 @@
(defun on-new-window (body) (defun on-new-window (body)
(let* (last-tab (let* (last-tab
dl
;; Note: Since the there is no need to use the tmp objects ;; Note: Since the there is no need to use the tmp objects
;; we reuse the same symbol name (tmp) even though the ;; we reuse the same symbol name (tmp) even though the
;; compiler can mark those for garbage collection early ;; compiler can mark those for garbage collection early
@ -18,10 +19,10 @@
(t3 (create-button body :content "Tab3")) (t3 (create-button body :content "Tab3"))
(tmp (create-br body)) (tmp (create-br body))
(p1 (create-div body)) (p1 (create-div body))
(p2 (create-div body :content "Panel2 - Type here")) (p2 (create-div body))
(p3 (create-div body :content "Panel3 - Type here")) (p3 (create-div body :content "Panel3 - Type here"))
;; Create from for panel 1 ;; Create form for panel 1
(f1 (create-form p1)) (f1 (create-form p1))
(tmp (create-label f1 :content "Fill in blank:")) (tmp (create-label f1 :content "Fill in blank:"))
(fe1 (create-form-element f1 :text :label tmp)) (fe1 (create-form-element f1 :text :label tmp))
@ -32,7 +33,14 @@
(tmp (create-br f1)) (tmp (create-br f1))
(tmp (create-form-element f1 :submit :value "OK")) (tmp (create-form-element f1 :submit :value "OK"))
(tmp (create-form-element f1 :reset :value "Start Again")) (tmp (create-form-element f1 :reset :value "Start Again"))
(dl))
;; 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))
(tmp (create-form-element f2 :submit :value "OK"))
(tmp (create-form-element f2 :reset :value "Start Again")))
;; Panel 1 contents ;; Panel 1 contents
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@ -77,7 +85,14 @@
;; Panel 2 contents ;; Panel 2 contents
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(setf (editablep p2) t) (setf (vertical-align ta1) :top)
(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)))))
;; Panel 3 contents ;; Panel 3 contents
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;