Refactor and create CLOG-Element

This commit is contained in:
David Botton 2020-12-30 22:05:34 -05:00
parent 39ff5175ef
commit b5e551fd6e
6 changed files with 310 additions and 248 deletions

View file

@ -23,9 +23,17 @@
(:documentation "CLOG objects (clog-obj) encapsulate the connection between
lisp and the HTML DOM element."))
;;;;;;;;;;;;;;;;;;;
;; connection-id ;;
;;;;;;;;;;;;;;;;;;;
(defgeneric connection-id (clog-obj)
(:documentation "Reader for connection-id slot. (Private)"))
;;;;;;;;;;;;;
;; html-id ;;
;;;;;;;;;;;;;
(defgeneric html-id (clog-obj)
(:documentation "Reader for html-id slot. (Private)"))
@ -214,40 +222,6 @@ result. (Private)"))
(jquery-execute obj (format nil "prop('~A','~A')" property-name (escape-string value))))
(defsetf property set-property)
;;;;;;;;;;;
;; style ;;
;;;;;;;;;;;
(defgeneric style (clog-obj style-name)
(:documentation "Get/Setf css style."))
(defmethod style ((obj clog-obj) style-name)
(jquery-query obj (format nil "css('~A')" style-name)))
(defgeneric set-style (clog-obj style-name value)
(:documentation "Set css style."))
(defmethod set-style ((obj clog-obj) style-name value)
(jquery-execute obj (format nil "css('~A','~A')" style-name (escape-string value))))
(defsetf style set-style)
;;;;;;;;;;;;;;;
;; attribute ;;
;;;;;;;;;;;;;;;
(defgeneric attribute (clog-obj attribute-name)
(:documentation "Get/Setf html tag attribute. (eg. src on img tag)"))
(defmethod attribute ((obj clog-obj) attribute-name)
(jquery-query obj (format nil "attr('~A')" attribute-name)))
(defgeneric set-attribute (clog-obj attribute-name value)
(:documentation "Set html tag attribute."))
(defmethod set-attribute ((obj clog-obj) attribute-name value)
(jquery-execute obj (format nil "attr('~A','~A')" attribute-name (escape-string value))))
(defsetf attribute set-attribute)
;;;;;;;;;;;;
;; height ;;
;;;;;;;;;;;;
@ -302,33 +276,6 @@ result. (Private)"))
(defmethod focus ((obj clog-obj))
(jquery-execute obj "blur()"))
;;;;;;;;;;;;;;;;;;
;; create-child ;;
;;;;;;;;;;;;;;;;;;
(defgeneric create-child (clog-obj html &key auto-place)
(:documentation "Create a new CLOG-OBJ from HTML element as child of OBJ and if :AUTO-PLACE (default t)
place-inside-bottom-of OBJ"))
(defmethod create-child ((obj clog-obj) html &key (auto-place t))
(let ((child (create-with-html (connection-id obj) html)))
(if auto-place
(place-inside-bottom-of obj child)
child)))
;;;;;;;;;;;;;;;;;;;;;
;; attach-as-child ;;
;;;;;;;;;;;;;;;;;;;;;
(defgeneric attach-as-child (clog-obj html-id)
(:documentation "Create a new CLOG-OBJ and attach an existing element with HTML-ID. The
HTML-ID must be unique."))
(defmethod attach-as-child ((obj clog-obj) html-id)
(cc:execute (connection-id obj) (format nil "clog['~A']=$('#~A')" html-id html-id))
(make-clog-obj (connection-id obj) html-id))
;;;;;;;;;;;;
;; validp ;;
;;;;;;;;;;;;
@ -352,50 +299,6 @@ are stored in this string based hash in the format of:
(defmethod connection-data ((obj clog-obj))
(cc:get-connection-data (connection-id obj)))
;;;;;;;;;;;;;;;;;
;; place-after ;;
;;;;;;;;;;;;;;;;;
(defgeneric place-after (clog-obj next-obj)
(:documentation "Places NEXT-OBJ after CLOG-OBJ in DOM"))
(defmethod place-after ((obj clog-obj) next-obj)
(jquery-execute obj (format nil "after(~A)" (script-id next-obj)))
next-obj)
;;;;;;;;;;;;;;;;;;
;; place-before ;;
;;;;;;;;;;;;;;;;;;
(defgeneric place-before (clog-obj next-obj)
(:documentation "Places NEXT-OBJ before CLOG-OBJ in DOM"))
(defmethod place-before ((obj clog-obj) next-obj)
(jquery-execute obj (format nil "before(~A)" (script-id next-obj)))
next-obj)
;;;;;;;;;;;;;;;;;;;;;;;;;
;; place-inside-top-of ;;
;;;;;;;;;;;;;;;;;;;;;;;;;
(defgeneric place-inside-top-of (clog-obj next-obj)
(:documentation "Places NEXT-OBJ inside top of CLOG-OBJ in DOM"))
(defmethod place-inside-top-of ((obj clog-obj) next-obj)
(jquery-execute obj (format nil "prepend(~A)" (script-id next-obj)))
next-obj)
;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; place-inside-bottom-of ;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defgeneric place-inside-bottom-of (clog-obj next-obj)
(:documentation "Places NEXT-OBJ inside bottom of CLOG-OBJ in DOM"))
(defmethod place-inside-bottom-of ((obj clog-obj) next-obj)
(jquery-execute obj (format nil "append(~A)" (script-id next-obj)))
next-obj)
;;;;;;;;;;;;;;;;;;;
;; set-on-resize ;;
;;;;;;;;;;;;;;;;;;;
@ -442,7 +345,7 @@ is nil unbind the event."))
(funcall on-blur)))))
;;;;;;;;;;;;;;;;;;;
;; Set-on-change ;;
;; set-on-change ;;
;;;;;;;;;;;;;;;;;;;
(defgeneric set-on-change (clog-obj on-change-handler)
@ -492,7 +395,8 @@ If ON-FOCUS-OUT-HANDLER is nil unbind the event."))
(defgeneric set-on-reset (clog-obj on-reset-handler)
(:documentation "Set the ON-RESET-HANDLER for CLOG-OBJ. If ON-RESET-HANDLER
is nil unbind the event."))
is nil unbind the event. This event is activated by using reset on a form. If
this even is bound, you must call the form reset manually."))
(defmethod set-on-reset ((obj clog-obj) on-reset-handler)
(let ((on-reset on-reset-handler))
@ -522,7 +426,8 @@ is nil unbind the event."))
(defgeneric set-on-select (clog-obj on-select-handler)
(:documentation "Set the ON-SELECT-HANDLER for CLOG-OBJ. If ON-SELECT-HANDLER
is nil unbind the event."))
is nil unbind the event. This event is activated by using submit on a form. If
this even is bound, you must call the form submit manually."))
(defmethod set-on-select ((obj clog-obj) on-select-handler)
(let ((on-select on-select-handler))
@ -853,35 +758,3 @@ is nil unbind the event."))
(lambda (data)
(declare (ignore data))
(funcall on-paste)))))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Implementation - CLOG Low Level
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;;;;;;;;;;
;; attach ;;
;;;;;;;;;;;;
(defun attach (connection-id html-id)
"Create a new clog-obj and attach an existing element with HTML-ID on
CONNECTION-ID to it and then return it. The HTML-ID must be unique. (private)"
(cc:execute connection-id (format nil "clog['~A']=$('#~A')" html-id html-id))
(make-clog-obj connection-id html-id))
;;;;;;;;;;;;;;;;;;;;;;
;; create-with-html ;;
;;;;;;;;;;;;;;;;;;;;;;
(defun create-with-html (connection-id html)
"Create a new clog-obj and attach it to HTML on CONNECTION-ID. There must be
a single outer block that will be set to an internal id. The returned clog-obj
requires placement or will not be visible, ie. place-after, etc. (private)"
(let ((web-id (cc:generate-id)))
(cc:execute
connection-id
(format nil "clog['~A']=$(\"~A\"); clog['~A'].first().prop('id','~A')"
web-id html web-id web-id))
(make-clog-obj connection-id web-id)))

156
clog-element.lisp Normal file
View file

@ -0,0 +1,156 @@
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;; CLOG - The Common Lisp Omnificent GUI ;;;;
;;;; (c) 2020-2021 David Botton ;;;;
;;;; License BSD 3 Clause ;;;;
;;;; ;;;;
;;;; clog-element.lisp ;;;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(cl:in-package :clog)
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Implementation - clog-element
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defclass clog-element (clog-obj)()
(:documentation "CLOG Element Objects is the base class for all html
element objects."))
;;;;;;;;;;;;;;;;;;;;;;;
;; make-clog-element ;;
;;;;;;;;;;;;;;;;;;;;;;;
(defun make-clog-element (connection-id html-id)
"Construct a new clog-element. (Private)"
(make-instance 'clog-element :connection-id connection-id :html-id html-id))
;;;;;;;;;;;;;;;;;;;;;;
;; create-with-html ;;
;;;;;;;;;;;;;;;;;;;;;;
(defun create-with-html (connection-id html)
"Create a new clog-element and attach it to HTML on CONNECTION-ID. There must be
a single outer block that will be set to an internal id. The returned CLOG-Element
requires placement or will not be visible, ie. place-after, etc. (private)"
(let ((web-id (cc:generate-id)))
(cc:execute
connection-id
(format nil "clog['~A']=$(\"~A\"); clog['~A'].first().prop('id','~A')"
web-id html web-id web-id))
(make-clog-element connection-id web-id)))
;;;;;;;;;;;;
;; attach ;;
;;;;;;;;;;;;
(defun attach (connection-id html-id)
"Create a new clog-obj and attach an existing element with HTML-ID on
CONNECTION-ID to it and then return it. The HTML-ID must be unique. (private)"
(cc:execute connection-id (format nil "clog['~A']=$('#~A')" html-id html-id))
(make-clog-element connection-id html-id))
;;;;;;;;;;;;;;;;;;
;; create-child ;;
;;;;;;;;;;;;;;;;;;
(defgeneric create-child (clog-obj html &key auto-place)
(:documentation "Create a new CLOG-Element from HTML as child of CLOG-OBJ
and if :AUTO-PLACE (default t) place-inside-bottom-of CLOG-OBJ"))
(defmethod create-child ((obj clog-obj) html &key (auto-place t))
(let ((child (create-with-html (connection-id obj) html)))
(if auto-place
(place-inside-bottom-of obj child)
child)))
;;;;;;;;;;;;;;;;;;;;;
;; attach-as-child ;;
;;;;;;;;;;;;;;;;;;;;;
(defgeneric attach-as-child (clog-obj html-id)
(:documentation "Create a new CLOG-Element and attach an existing element with HTML-ID. The
HTML-ID must be unique."))
(defmethod attach-as-child ((obj clog-obj) html-id)
(cc:execute (connection-id obj) (format nil "clog['~A']=$('#~A')" html-id html-id))
(make-clog-element (connection-id obj) html-id))
;;;;;;;;;;;
;; style ;;
;;;;;;;;;;;
(defgeneric style (clog-element style-name)
(:documentation "Get/Setf css style."))
(defmethod style ((obj clog-element) style-name)
(jquery-query obj (format nil "css('~A')" style-name)))
(defgeneric set-style (clog-element style-name value)
(:documentation "Set css style."))
(defmethod set-style ((obj clog-element) style-name value)
(jquery-execute obj (format nil "css('~A','~A')" style-name (escape-string value))))
(defsetf style set-style)
;;;;;;;;;;;;;;;
;; attribute ;;
;;;;;;;;;;;;;;;
(defgeneric attribute (clog-element attribute-name)
(:documentation "Get/Setf html tag attribute. (eg. src on img tag)"))
(defmethod attribute ((obj clog-element) attribute-name)
(jquery-query obj (format nil "attr('~A')" attribute-name)))
(defgeneric set-attribute (clog-element attribute-name value)
(:documentation "Set html tag attribute."))
(defmethod set-attribute ((obj clog-element) attribute-name value)
(jquery-execute obj (format nil "attr('~A','~A')" attribute-name (escape-string value))))
(defsetf attribute set-attribute)
;;;;;;;;;;;;;;;;;
;; place-after ;;
;;;;;;;;;;;;;;;;;
(defgeneric place-after (clog-element next-obj)
(:documentation "Places NEXT-OBJ after CLOG-ELEMENT in DOM"))
(defmethod place-after ((obj clog-element) next-obj)
(jquery-execute obj (format nil "after(~A)" (script-id next-obj)))
next-obj)
;;;;;;;;;;;;;;;;;;
;; place-before ;;
;;;;;;;;;;;;;;;;;;
(defgeneric place-before (clog-element next-obj)
(:documentation "Places NEXT-OBJ before CLOG-ELEMENT in DOM"))
(defmethod place-before ((obj clog-element) next-obj)
(jquery-execute obj (format nil "before(~A)" (script-id next-obj)))
next-obj)
;;;;;;;;;;;;;;;;;;;;;;;;;
;; place-inside-top-of ;;
;;;;;;;;;;;;;;;;;;;;;;;;;
(defgeneric place-inside-top-of (clog-element next-obj)
(:documentation "Places NEXT-OBJ inside top of CLOG-ELEMENT in DOM"))
(defmethod place-inside-top-of ((obj clog-element) next-obj)
(jquery-execute obj (format nil "prepend(~A)" (script-id next-obj)))
next-obj)
;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; place-inside-bottom-of ;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defgeneric place-inside-bottom-of (clog-element next-obj)
(:documentation "Places NEXT-OBJ inside bottom of CLOG-ELEMENT in DOM"))
(defmethod place-inside-bottom-of ((obj clog-element) next-obj)
(jquery-execute obj (format nil "append(~A)" (script-id next-obj)))
next-obj)

View file

@ -24,14 +24,14 @@
"Construct a new clog-navigator. (Private)"
(make-instance 'clog-navigator :connection-id connection-id :html-id "navigator"))
;;;;;;;;;;;;;;;;;;;;
;; cookie-enabled ;;
;;;;;;;;;;;;;;;;;;;;
;;;;;;;;;;;;;;;;;;;;;;
;; cookie-enabled-p ;;
;;;;;;;;;;;;;;;;;;;;;;
(defgeneric cookie-enabled (clog-navigator)
(defgeneric cookie-enabled-p (clog-navigator)
(:documentation "Get if cookie enabled."))
(defmethod cookie-enabled ((obj clog-navigator))
(defmethod cookie-enabled-p ((obj clog-navigator))
(js-true-p (query obj "cookieEnabled")))
;;;;;;;;;;;;;;

View file

@ -5,7 +5,7 @@
:author "David Botton <david@botton.com>"
:license "BSD"
:version "0.0.1"
:version "0.0.2"
:serial t
:depends-on (#:clack #:websocket-driver #:alexandria #:hunchentoot #:cl-ppcre
#:bordeaux-threads #:trivial-open-browser
@ -16,6 +16,7 @@
(:file "clog-system")
(:file "clog-utilities")
(:file "clog-base")
(:file "clog-element")
(:file "clog-window")
(:file "clog-document")
(:file "clog-location")

View file

@ -30,6 +30,7 @@ application."
(@clog-system section)
(@clog-utilities section)
(@clog-obj section)
(@clog-element section)
(@clog-body section)
(@clog-window section)
(@clog-document section)
@ -54,8 +55,6 @@ application."
"CLOG-Obj - General Properties"
(property generic-function)
(style generic-function)
(attribute generic-function)
"CLOG-Obj - General Methods"
(height generic-function)
@ -63,15 +62,7 @@ application."
(focus generic-function)
(blur generic-function)
"CLOG-Obj - Placement"
(place-after generic-function)
(place-before generic-function)
(place-inside-top-of generic-function)
(place-inside-bottom-of generic-function)
"CLOG-Obj - Low Level"
(create-child generic-function)
(attach-as-child generic-function)
(connection-data generic-function)
(validp generic-function)
@ -109,6 +100,24 @@ application."
(set-on-paste generic-function))
;; need to add drag and drop events
(defsection @clog-element (:title "CLOG Elements")
"CLOG-Element - Base class for CLOG Elements"
(clog-element class)
"CLOG-Element - Low Level Creation"
(create-child generic-function)
(attach-as-child generic-function)
"CLOG-Element - General Properties"
(style generic-function)
(attribute generic-function)
"CLOG-Element - Placement"
(place-after generic-function)
(place-before generic-function)
(place-inside-top-of generic-function)
(place-inside-bottom-of generic-function))
(defsection @clog-body (:title "CLOG Body Objects")
"CLOG-Body - CLOG Body Objects"
(clog-body class)
@ -165,7 +174,6 @@ application."
(resize-by generic-function)
(resize-to generic-function))
(defsection @clog-document (:title "CLOG Document Objects")
"CLOG-Document - CLOG Document Objects"
(clog-document class)
@ -191,12 +199,11 @@ application."
(clog-navigator class)
"CLOG-Navigator - Properties"
(cookie-enabled generic-function)
(language generic-function)
(user-agent generic-function)
(vendor generic-function))
(cookie-enabled-p generic-function)
(language generic-function)
(user-agent generic-function)
(vendor generic-function))
(defsection @clog-location (:title "CLOG Location Objects")
"CLOG-Location - CLOG Location Objects"
(clog-location class)

View file

@ -38,11 +38,12 @@
<li><a href="#x-28CLOG-3A-40CLOG-SYSTEM-20MGL-PAX-3ASECTION-29" title="CLOG System">2 CLOG System</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-UTILITIES-20MGL-PAX-3ASECTION-29" title="CLOG Utilities">3 CLOG Utilities</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG Objects">4 CLOG Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">5 CLOG Body Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">6 CLOG Window Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">7 CLOG Document Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">8 CLOG Location Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">9 CLOG Navigator Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">5 CLOG Elements</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">6 CLOG Body Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">7 CLOG Window Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">8 CLOG Document Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">9 CLOG Location Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">10 CLOG Navigator Objects</a></li>
</ul>
<h6>[in package CLOG]</h6>
@ -60,7 +61,7 @@ application.</p>
<h2><a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29">1 clog ASDF System Details</a></h2>
<ul>
<li>Version: 0.0.1</li>
<li>Version: 0.0.2</li>
<li>Description: The Common Lisp Omnificent GUI</li>
<li>Licence: BSD</li>
<li>Author: David Botton <a href="m&#x61;&#105;l&#x74;&#111;:&#x64;&#97;v&#x69;&#100;@&#x62;&#111;t&#x74;&#111;n&#x2E;&#99;o&#x6D;">m&#x61;&#105;l&#x74;&#111;:&#x64;&#97;v&#x69;&#100;@&#x62;&#111;t&#x74;&#111;n&#x2E;&#99;o&#x6D;</a></li>
@ -134,7 +135,7 @@ located at <code>STATIC-ROOT</code>.</p></li>
<p><a id='x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29'></a></p>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-UTILITIES-20MGL-PAX-3ASECTION-29" title="CLOG Utilities">&#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-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG Objects">&#8634;</a></span></span></p>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-UTILITIES-20MGL-PAX-3ASECTION-29" title="CLOG Utilities">&#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-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29">4 CLOG Objects</a></h2>
@ -159,22 +160,6 @@ lisp and the <code>HTML</code> DOM element.</p></li>
<p>Get/Setf html property. (eg. draggable)</p></li>
</ul>
<p><a id='x-28CLOG-3ASTYLE-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-3ASTYLE-20GENERIC-FUNCTION-29" >STYLE</a></span></span> <span class="locative-args">CLOG-OBJ STYLE-NAME</span></span></p>
<p>Get/Setf css style.</p></li>
</ul>
<p><a id='x-28CLOG-3AATTRIBUTE-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-3AATTRIBUTE-20GENERIC-FUNCTION-29" >ATTRIBUTE</a></span></span> <span class="locative-args">CLOG-OBJ ATTRIBUTE-NAME</span></span></p>
<p>Get/Setf html tag attribute. (eg. src on img tag)</p></li>
</ul>
<p>CLOG-Obj - General Methods</p>
<p><a id='x-28CLOG-3AHEIGHT-20GENERIC-FUNCTION-29'></a></p>
@ -209,60 +194,8 @@ lisp and the <code>HTML</code> DOM element.</p></li>
<p>Remove focus from <code>CLOG-OBJ</code></p></li>
</ul>
<p>CLOG-Obj - Placement</p>
<p><a id='x-28CLOG-3APLACE-AFTER-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-3APLACE-AFTER-20GENERIC-FUNCTION-29" >PLACE-AFTER</a></span></span> <span class="locative-args">CLOG-OBJ NEXT-OBJ</span></span></p>
<p>Places <code>NEXT-OBJ</code> after <code>CLOG-OBJ</code> in DOM</p></li>
</ul>
<p><a id='x-28CLOG-3APLACE-BEFORE-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-3APLACE-BEFORE-20GENERIC-FUNCTION-29" >PLACE-BEFORE</a></span></span> <span class="locative-args">CLOG-OBJ NEXT-OBJ</span></span></p>
<p>Places <code>NEXT-OBJ</code> before <code>CLOG-OBJ</code> in DOM</p></li>
</ul>
<p><a id='x-28CLOG-3APLACE-INSIDE-TOP-OF-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-3APLACE-INSIDE-TOP-OF-20GENERIC-FUNCTION-29" >PLACE-INSIDE-TOP-OF</a></span></span> <span class="locative-args">CLOG-OBJ NEXT-OBJ</span></span></p>
<p>Places <code>NEXT-OBJ</code> inside top of <code>CLOG-OBJ</code> in DOM</p></li>
</ul>
<p><a id='x-28CLOG-3APLACE-INSIDE-BOTTOM-OF-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-3APLACE-INSIDE-BOTTOM-OF-20GENERIC-FUNCTION-29" >PLACE-INSIDE-BOTTOM-OF</a></span></span> <span class="locative-args">CLOG-OBJ NEXT-OBJ</span></span></p>
<p>Places <code>NEXT-OBJ</code> inside bottom of <code>CLOG-OBJ</code> in DOM</p></li>
</ul>
<p>CLOG-Obj - Low Level</p>
<p><a id='x-28CLOG-3ACREATE-CHILD-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-CHILD-20GENERIC-FUNCTION-29" >CREATE-CHILD</a></span></span> <span class="locative-args">CLOG-OBJ HTML &amp;KEY AUTO-PLACE</span></span></p>
<p>Create a new <code>CLOG-OBJ</code> from <code>HTML</code> element as child of <code>OBJ</code> and if <code>:AUTO-PLACE</code> (default t)
place-inside-bottom-of <code>OBJ</code></p></li>
</ul>
<p><a id='x-28CLOG-3AATTACH-AS-CHILD-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-3AATTACH-AS-CHILD-20GENERIC-FUNCTION-29" >ATTACH-AS-CHILD</a></span></span> <span class="locative-args">CLOG-OBJ HTML-ID</span></span></p>
<p>Create a new <code>CLOG-OBJ</code> and attach an existing element with <code>HTML-ID</code>. The
<code>HTML-ID</code> must be unique.</p></li>
</ul>
<p><a id='x-28CLOG-3ACONNECTION-DATA-20GENERIC-FUNCTION-29'></a></p>
<ul>
@ -344,7 +277,8 @@ If <code>ON-FOCUS-OUT-HANDLER</code> is nil unbind the event.</p></li>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASET-ON-RESET-20GENERIC-FUNCTION-29" >SET-ON-RESET</a></span></span> <span class="locative-args">CLOG-OBJ ON-RESET-HANDLER</span></span></p>
<p>Set the <code>ON-RESET-HANDLER</code> for <code>CLOG-OBJ</code>. If <code>ON-RESET-HANDLER</code>
is nil unbind the event.</p></li>
is nil unbind the event. This event is activated by using reset on a form. If
this even is bound, you must call the form reset manually.</p></li>
</ul>
<p><a id='x-28CLOG-3ASET-ON-SEARCH-20GENERIC-FUNCTION-29'></a></p>
@ -362,7 +296,8 @@ is nil unbind the event.</p></li>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASET-ON-SELECT-20GENERIC-FUNCTION-29" >SET-ON-SELECT</a></span></span> <span class="locative-args">CLOG-OBJ ON-SELECT-HANDLER</span></span></p>
<p>Set the <code>ON-SELECT-HANDLER</code> for <code>CLOG-OBJ</code>. If <code>ON-SELECT-HANDLER</code>
is nil unbind the event.</p></li>
is nil unbind the event. This event is activated by using submit on a form. If
this even is bound, you must call the form submit manually.</p></li>
</ul>
<p><a id='x-28CLOG-3ASET-ON-SUBMIT-20GENERIC-FUNCTION-29'></a></p>
@ -380,7 +315,8 @@ is nil unbind the event.</p></li>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ASET-ON-SELECT-20GENERIC-FUNCTION-29" >SET-ON-SELECT</a></span></span> <span class="locative-args">CLOG-OBJ ON-SELECT-HANDLER</span></span></p>
<p>Set the <code>ON-SELECT-HANDLER</code> for <code>CLOG-OBJ</code>. If <code>ON-SELECT-HANDLER</code>
is nil unbind the event.</p></li>
is nil unbind the event. This event is activated by using submit on a form. If
this even is bound, you must call the form submit manually.</p></li>
</ul>
<p><a id='x-28CLOG-3ASET-ON-CONTEXT-MENU-20GENERIC-FUNCTION-29'></a></p>
@ -570,11 +506,100 @@ is nil unbind the event.</p></li>
is nil unbind the event.</p></li>
</ul>
<p><a id='x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29'></a></p>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG 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-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29">5 CLOG Elements</a></h2>
<p>CLOG-Element - Base class for <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Elements</p>
<p><a id='x-28CLOG-3ACLOG-ELEMENT-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-ELEMENT-20CLASS-29" >CLOG-ELEMENT</a></span></span> <span class="locative-args"><a href="#x-28CLOG-3ACLOG-OBJ-20CLASS-29" title="(CLOG:CLOG-OBJ CLASS)">CLOG-OBJ</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> Element Objects is the base class for all html
element objects.</p></li>
</ul>
<p>CLOG-Element - Low Level Creation</p>
<p><a id='x-28CLOG-3ACREATE-CHILD-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-CHILD-20GENERIC-FUNCTION-29" >CREATE-CHILD</a></span></span> <span class="locative-args">CLOG-OBJ HTML &amp;KEY AUTO-PLACE</span></span></p>
<p>Create a new CLOG-Element from <code>HTML</code> as child of <code>CLOG-OBJ</code>
and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OBJ</code></p></li>
</ul>
<p><a id='x-28CLOG-3AATTACH-AS-CHILD-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-3AATTACH-AS-CHILD-20GENERIC-FUNCTION-29" >ATTACH-AS-CHILD</a></span></span> <span class="locative-args">CLOG-OBJ HTML-ID</span></span></p>
<p>Create a new CLOG-Element and attach an existing element with <code>HTML-ID</code>. The
<code>HTML-ID</code> must be unique.</p></li>
</ul>
<p>CLOG-Element - General Properties</p>
<p><a id='x-28CLOG-3ASTYLE-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-3ASTYLE-20GENERIC-FUNCTION-29" >STYLE</a></span></span> <span class="locative-args">CLOG-ELEMENT STYLE-NAME</span></span></p>
<p>Get/Setf css style.</p></li>
</ul>
<p><a id='x-28CLOG-3AATTRIBUTE-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-3AATTRIBUTE-20GENERIC-FUNCTION-29" >ATTRIBUTE</a></span></span> <span class="locative-args">CLOG-ELEMENT ATTRIBUTE-NAME</span></span></p>
<p>Get/Setf html tag attribute. (eg. src on img tag)</p></li>
</ul>
<p>CLOG-Element - Placement</p>
<p><a id='x-28CLOG-3APLACE-AFTER-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-3APLACE-AFTER-20GENERIC-FUNCTION-29" >PLACE-AFTER</a></span></span> <span class="locative-args">CLOG-ELEMENT NEXT-OBJ</span></span></p>
<p>Places <code>NEXT-OBJ</code> after <code>CLOG-ELEMENT</code> in DOM</p></li>
</ul>
<p><a id='x-28CLOG-3APLACE-BEFORE-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-3APLACE-BEFORE-20GENERIC-FUNCTION-29" >PLACE-BEFORE</a></span></span> <span class="locative-args">CLOG-ELEMENT NEXT-OBJ</span></span></p>
<p>Places <code>NEXT-OBJ</code> before <code>CLOG-ELEMENT</code> in DOM</p></li>
</ul>
<p><a id='x-28CLOG-3APLACE-INSIDE-TOP-OF-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-3APLACE-INSIDE-TOP-OF-20GENERIC-FUNCTION-29" >PLACE-INSIDE-TOP-OF</a></span></span> <span class="locative-args">CLOG-ELEMENT NEXT-OBJ</span></span></p>
<p>Places <code>NEXT-OBJ</code> inside top of <code>CLOG-ELEMENT</code> in DOM</p></li>
</ul>
<p><a id='x-28CLOG-3APLACE-INSIDE-BOTTOM-OF-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-3APLACE-INSIDE-BOTTOM-OF-20GENERIC-FUNCTION-29" >PLACE-INSIDE-BOTTOM-OF</a></span></span> <span class="locative-args">CLOG-ELEMENT NEXT-OBJ</span></span></p>
<p>Places <code>NEXT-OBJ</code> inside bottom of <code>CLOG-ELEMENT</code> in DOM</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-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG 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-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">&#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>
<h2><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29">5 CLOG Body Objects</a></h2>
<h2><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29">6 CLOG Body Objects</a></h2>
<p>CLOG-Body - <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Body Objects</p>
@ -624,7 +649,7 @@ is nil unbind the event.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body 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-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29">6 CLOG Window Objects</a></h2>
<h2><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29">7 CLOG Window Objects</a></h2>
<p>CLOG-Window - <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Window Objects</p>
@ -943,7 +968,7 @@ is nil unbind the event.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window 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-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29">7 CLOG Document Objects</a></h2>
<h2><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29">8 CLOG Document Objects</a></h2>
<p>CLOG-Document - <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Document Objects</p>
@ -1077,7 +1102,7 @@ is nil unbind the event.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document 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-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29">8 CLOG Location Objects</a></h2>
<h2><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29">9 CLOG Location Objects</a></h2>
<p>CLOG-Location - <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Location Objects</p>
@ -1193,7 +1218,7 @@ is nil unbind the event.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location 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-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29">9 CLOG Navigator Objects</a></h2>
<h2><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29">10 CLOG Navigator Objects</a></h2>
<p>CLOG-Navigator - <a href="#x-28-22clog-22-20ASDF-2FSYSTEM-3ASYSTEM-29" title="(\&quot;clog\&quot; ASDF/SYSTEM:SYSTEM)"><code>CLOG</code></a> Navigator Objects</p>
@ -1207,10 +1232,10 @@ is nil unbind the event.</p></li>
<p>CLOG-Navigator - Properties</p>
<p><a id='x-28CLOG-3ACOOKIE-ENABLED-20GENERIC-FUNCTION-29'></a></p>
<p><a id='x-28CLOG-3ACOOKIE-ENABLED-P-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-3ACOOKIE-ENABLED-20GENERIC-FUNCTION-29" >COOKIE-ENABLED</a></span></span> <span class="locative-args">CLOG-NAVIGATOR</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-3ACOOKIE-ENABLED-P-20GENERIC-FUNCTION-29" >COOKIE-ENABLED-P</a></span></span> <span class="locative-args">CLOG-NAVIGATOR</span></span></p>
<p>Get if cookie enabled.</p></li>
</ul>