From 6f4bd849041de0461f6b8f2ade4026780cd03c15 Mon Sep 17 00:00:00 2001
From: David Botton <david@botton.com>
Date: Tue, 12 Jan 2021 22:38:15 -0500
Subject: [PATCH] Text Areas

---
 clog-form.lisp            | 120 ++++++++++++++++++++++++++++++++++----
 clog.lisp                 |   9 ++-
 doc/clog-manual.html      |  57 +++++++++++++++---
 tutorial/09-tutorial.lisp |  23 ++++++--
 4 files changed, 186 insertions(+), 23 deletions(-)

diff --git a/clog-form.lisp b/clog-form.lisp
index 3f9163b..d1dff6f 100644
--- a/clog-form.lisp
+++ b/clog-form.lisp
@@ -44,7 +44,7 @@ action."))
 ;; form-element-count ;;
 ;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defgeneric form-element-count (clog-formt)
+(defgeneric form-element-count (clog-form)
   (:documentation "Get form element count."))
 
 (defmethod form-element-count ((obj clog-form))
@@ -141,16 +141,16 @@ elements."))
     :file :hidden :image :month :number :password :radio :range
     :reset :search :submit :tel :text :time :url :week))
   
-(defgeneric create-form-element (clog-form element-type &key name value label)
-  (:documentation "Create a new clog-form-element as child of CLOG-FORM.
-clog-form-elements are always placed with in the CLOG-FORM in the DOM"))
+(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"))
 
-(defmethod create-form-element ((obj clog-form) element-type
+(defmethod create-form-element ((obj clog-obj) element-type
 				&key (name nil) (value "") (label nil))
   (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)
-			      (html-id obj)
 			      value
 			      (if 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)
-  (:documentation "Create a new clog-label as child of CLOG-FORM."))
+(defgeneric create-label (clog-obj &key content label-for)
+  (: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>"
 			    (if 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)
-  (: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))
   (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))
 		: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)
+
diff --git a/clog.lisp b/clog.lisp
index 9f8b152..444bc56 100644
--- a/clog.lisp
+++ b/clog.lisp
@@ -331,7 +331,14 @@ application."
   "CLOG-Data-List - Class for CLOG Option Data Lists"
   (clog-data-list   class)
   (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")
   "CLOG-Body - CLOG Body Objects"
diff --git a/doc/clog-manual.html b/doc/clog-manual.html
index 58dccc8..6aba24c 100644
--- a/doc/clog-manual.html
+++ b/doc/clog-manual.html
@@ -1880,7 +1880,7 @@ action.</p></li>
 <p><a id='x-28CLOG-3AFORM-ELEMENT-COUNT-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-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>
 </ul>
@@ -1942,10 +1942,11 @@ elements.</p></li>
 <p><a id='x-28CLOG-3ACREATE-FORM-ELEMENT-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-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>.
-clog-form-elements are always placed with in the <code>CLOG-FORM</code> in the DOM</p></li>
+<p>Create a new clog-form-element as child of <code>CLOG-OBJ</code>.
+It is importamt tjat clog-form-elements are a child or descendant of a
+clog-form  in the DOM</p></li>
 </ul>
 
 <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>
 
 <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>
 
 <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>
 <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>
 
 <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>
 </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><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>
diff --git a/tutorial/09-tutorial.lisp b/tutorial/09-tutorial.lisp
index aa9fcaf..04ef444 100644
--- a/tutorial/09-tutorial.lisp
+++ b/tutorial/09-tutorial.lisp
@@ -6,6 +6,7 @@
 
 (defun on-new-window (body)
   (let* (last-tab
+	 dl
 	 ;; Note: Since the there is no need to use the tmp objects
 	 ;;       we reuse the same symbol name (tmp) even though the
 	 ;;       compiler can mark those for garbage collection early
@@ -18,10 +19,10 @@
 	 (t3  (create-button body :content "Tab3"))
 	 (tmp (create-br 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"))
 
-	 ;; Create from for panel 1
+	 ;; 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))
@@ -32,7 +33,14 @@
 	 (tmp (create-br f1))
 	 (tmp (create-form-element f1 :submit :value "OK"))
 	 (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
     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
@@ -77,7 +85,14 @@
     ;; 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
     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;