Start on fleshing out clog-element

This commit is contained in:
David Botton 2020-12-31 21:57:50 -05:00
parent b5e551fd6e
commit 7c503eaa43
3 changed files with 287 additions and 31 deletions

View file

@ -32,7 +32,8 @@ element objects."))
(defun create-with-html (connection-id html) (defun create-with-html (connection-id html)
"Create a new clog-element and attach it to HTML on CONNECTION-ID. There must be "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 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)" requires placement or will not be visible, ie. place-after, etc. as it exists in
the javascript clog[] but is not in the DOM. (private)"
(let ((web-id (cc:generate-id))) (let ((web-id (cc:generate-id)))
(cc:execute (cc:execute
connection-id connection-id
@ -114,10 +115,10 @@ HTML-ID must be unique."))
;; place-after ;; ;; place-after ;;
;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;
(defgeneric place-after (clog-element next-obj) (defgeneric place-after (clog-obj next-obj)
(:documentation "Places NEXT-OBJ after CLOG-ELEMENT in DOM")) (:documentation "Places NEXT-OBJ after CLOG-OBJ in DOM"))
(defmethod place-after ((obj clog-element) next-obj) (defmethod place-after ((obj clog-obj) next-obj)
(jquery-execute obj (format nil "after(~A)" (script-id next-obj))) (jquery-execute obj (format nil "after(~A)" (script-id next-obj)))
next-obj) next-obj)
@ -125,10 +126,10 @@ HTML-ID must be unique."))
;; place-before ;; ;; place-before ;;
;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;
(defgeneric place-before (clog-element next-obj) (defgeneric place-before (clog-obj next-obj)
(:documentation "Places NEXT-OBJ before CLOG-ELEMENT in DOM")) (:documentation "Places NEXT-OBJ before CLOG-OBJ in DOM"))
(defmethod place-before ((obj clog-element) next-obj) (defmethod place-before ((obj clog-obj) next-obj)
(jquery-execute obj (format nil "before(~A)" (script-id next-obj))) (jquery-execute obj (format nil "before(~A)" (script-id next-obj)))
next-obj) next-obj)
@ -136,10 +137,10 @@ HTML-ID must be unique."))
;; place-inside-top-of ;; ;; place-inside-top-of ;;
;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;
(defgeneric place-inside-top-of (clog-element next-obj) (defgeneric place-inside-top-of (clog-obj next-obj)
(:documentation "Places NEXT-OBJ inside top of CLOG-ELEMENT in DOM")) (:documentation "Places NEXT-OBJ inside top of CLOG-OBJ in DOM"))
(defmethod place-inside-top-of ((obj clog-element) next-obj) (defmethod place-inside-top-of ((obj clog-obj) next-obj)
(jquery-execute obj (format nil "prepend(~A)" (script-id next-obj))) (jquery-execute obj (format nil "prepend(~A)" (script-id next-obj)))
next-obj) next-obj)
@ -147,10 +148,159 @@ HTML-ID must be unique."))
;; place-inside-bottom-of ;; ;; place-inside-bottom-of ;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defgeneric place-inside-bottom-of (clog-element next-obj) (defgeneric place-inside-bottom-of (clog-obj next-obj)
(:documentation "Places NEXT-OBJ inside bottom of CLOG-ELEMENT in DOM")) (:documentation "Places NEXT-OBJ inside bottom of CLOG-OBJ in DOM"))
(defmethod place-inside-bottom-of ((obj clog-element) next-obj) (defmethod place-inside-bottom-of ((obj clog-obj) next-obj)
(jquery-execute obj (format nil "append(~A)" (script-id next-obj))) (jquery-execute obj (format nil "append(~A)" (script-id next-obj)))
next-obj) next-obj)
;;;;;;;;;;;;;;;;
;; access-key ;;
;;;;;;;;;;;;;;;;
(defgeneric access-key (clog-element)
(:documentation "Get/Setf access-key."))
(defmethod access-key ((obj clog-element))
(property obj "accessKey"))
(defgeneric set-access-key (clog-element value)
(:documentation "Set access-key VALUE for CLOG-ELEMENT"))
(defmethod set-access-key ((obj clog-element) value)
(setf (property obj "accessKey") value))
(defsetf access-key set-access-key)
;;;;;;;;;;;;;;;;;;;;
;; advisory-title ;;
;;;;;;;;;;;;;;;;;;;;
(defgeneric advisory-title (clog-element)
(:documentation "Get/Setf advisory-title."))
(defmethod advisory-title ((obj clog-element))
(property obj "title"))
(defgeneric set-advisory-title (clog-element value)
(:documentation "Set advisory-title VALUE for CLOG-ELEMENT"))
(defmethod set-advisory-title ((obj clog-element) value)
(setf (property obj "title") value))
(defsetf advisory-title set-advisory-title)
;;;;;;;;;;;;;;;;
;; class-name ;;
;;;;;;;;;;;;;;;;
(defgeneric class-name (clog-element)
(:documentation "Get/Setf class-name."))
(defmethod class-name ((obj clog-element))
(property obj "className"))
(defgeneric set-class-name (clog-element value)
(:documentation "Set class-name VALUE for CLOG-ELEMENT"))
(defmethod set-class-name ((obj clog-element) value)
(setf (property obj "className") value))
(defsetf class-name set-class-name)
;;;;;;;;;;;;;;;
;; editablep ;;
;;;;;;;;;;;;;;;
(defgeneric editablep (clog-element)
(:documentation "Get/Setf editable."))
(defmethod editablep ((obj clog-element))
(js-true-p (property obj "isContentEditable")))
(defgeneric set-editablep (clog-element value)
(:documentation "Set editable VALUE for CLOG-ELEMENT"))
(defmethod set-editablep ((obj clog-element) value)
(if value
(setf (property obj "contentEditable") "true")
(setf (property obj "contentEditable") "false")))
(defsetf editablep set-editable)
;;;;;;;;;;;;;;;;
;; box-sizing ;;
;;;;;;;;;;;;;;;;
(deftype box-sizing-type () '(member :content-box :border-box))
(defgeneric box-sizing (clog-element)
(:documentation "Get/Setf box-sizing."))
(defmethod box-sizing ((obj clog-element))
(style obj "box-sizing"))
(defgeneric set-box-sizing (clog-element value)
(:documentation "Set box-sizing VALUE for CLOG-ELEMENT"))
(defmethod set-box-sizing ((obj clog-element) value)
(setf (style obj "box-sizing") (string value)))
(defsetf box-sizing set-box-sizing)
;;;;;;;;;;;;;;;;
;; clear-side ;;
;;;;;;;;;;;;;;;;
(deftype clear-side-type ()
'(member :none :left :right :both :inline-start :inline-end))
(defgeneric clear-side (clog-element)
(:documentation "Get/Setf clear-side."))
(defmethod clear-side ((obj clog-element))
(style obj "clear"))
(defgeneric set-clear-side (clog-element value)
(:documentation "Set clear-side VALUE for CLOG-ELEMENT"))
(defmethod set-clear-side ((obj clog-element) value)
(setf (style obj "clear") (string value)))
(defsetf clear-side set-clear-side)
;;;;;;;;;;;;;;;;
;; float-wrap ;;
;;;;;;;;;;;;;;;;
(deftype float-wrap-type ()
'(member :none :left :right :inline-start :inline-end))
(defgeneric float-wrap (clog-element)
(:documentation "Get/Setf for element float left or right and other
elements wrap around it."))
(defmethod float-wrap ((obj clog-element))
(style obj "float"))
(defgeneric set-float-wrap (clog-element value)
(:documentation "Set float-wrap VALUE for CLOG-ELEMENT"))
(defmethod set-float-wrap ((obj clog-element) value)
(setf (style obj "float") (string value)))
(defsetf float-wrap set-float-wrap)
;;;;;;;;;;;;;
;; display ;;
;;;;;;;;;;;;;
(deftype display-type () '(member :none :block :inline :inline-block :flex))
(defgeneric display (clog-element)
(:documentation "Get/Setf display."))
(defmethod display ((obj clog-element))
(style obj "display"))
(defgeneric set-display (clog-element value)
(:documentation "Set display VALUE for CLOG-ELEMENT"))
(defmethod set-display ((obj clog-element) value)
(setf (style obj "display") (string value)))
(defsetf display set-display)

View file

@ -108,15 +108,30 @@ application."
(create-child generic-function) (create-child generic-function)
(attach-as-child generic-function) (attach-as-child generic-function)
"CLOG-Element - General Properties"
(style generic-function)
(attribute generic-function)
"CLOG-Element - Placement" "CLOG-Element - Placement"
(place-after generic-function) (place-after generic-function)
(place-before generic-function) (place-before generic-function)
(place-inside-top-of generic-function) (place-inside-top-of generic-function)
(place-inside-bottom-of generic-function)) (place-inside-bottom-of generic-function)
"CLOG-Element - General Properties"
(style generic-function)
(attribute generic-function)
"CLOG-Element - Properties"
(access-key generic-function)
(advisory-title generic-function)
(class-name generic-function)
(editablep generic-function)
(box-sizing-type type)
(box-sizing generic-function)
(clear-side-type type)
(clear-side generic-function)
(float-wrap-type type)
(float-wrap generic-function)
(display-type type)
(display 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"

View file

@ -543,6 +543,40 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
<code>HTML-ID</code> must be unique.</p></li> <code>HTML-ID</code> must be unique.</p></li>
</ul> </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-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-Element - General Properties</p> <p>CLOG-Element - General Properties</p>
<p><a id='x-28CLOG-3ASTYLE-20GENERIC-FUNCTION-29'></a></p> <p><a id='x-28CLOG-3ASTYLE-20GENERIC-FUNCTION-29'></a></p>
@ -561,38 +595,95 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
<p>Get/Setf html tag attribute. (eg. src on img tag)</p></li> <p>Get/Setf html tag attribute. (eg. src on img tag)</p></li>
</ul> </ul>
<p>CLOG-Element - Placement</p> <p>CLOG-Element - Properties</p>
<p><a id='x-28CLOG-3APLACE-AFTER-20GENERIC-FUNCTION-29'></a></p> <p><a id='x-28CLOG-3AACCESS-KEY-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-3APLACE-AFTER-20GENERIC-FUNCTION-29" >PLACE-AFTER</a></span></span> <span class="locative-args">CLOG-ELEMENT NEXT-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-3AACCESS-KEY-20GENERIC-FUNCTION-29" >ACCESS-KEY</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
<p>Places <code>NEXT-OBJ</code> after <code>CLOG-ELEMENT</code> in DOM</p></li> <p>Get/Setf access-key.</p></li>
</ul> </ul>
<p><a id='x-28CLOG-3APLACE-BEFORE-20GENERIC-FUNCTION-29'></a></p> <p><a id='x-28CLOG-3AADVISORY-TITLE-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-3APLACE-BEFORE-20GENERIC-FUNCTION-29" >PLACE-BEFORE</a></span></span> <span class="locative-args">CLOG-ELEMENT NEXT-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-3AADVISORY-TITLE-20GENERIC-FUNCTION-29" >ADVISORY-TITLE</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
<p>Places <code>NEXT-OBJ</code> before <code>CLOG-ELEMENT</code> in DOM</p></li> <p>Get/Setf advisory-title.</p></li>
</ul> </ul>
<p><a id='x-28CLOG-3APLACE-INSIDE-TOP-OF-20GENERIC-FUNCTION-29'></a></p> <p><a id='x-28CLASS-NAME-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-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> <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLASS-NAME-20GENERIC-FUNCTION-29" >CLASS-NAME</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
<p>Places <code>NEXT-OBJ</code> inside top of <code>CLOG-ELEMENT</code> in DOM</p></li> <p>Get/Setf class-name.</p></li>
</ul> </ul>
<p><a id='x-28CLOG-3APLACE-INSIDE-BOTTOM-OF-20GENERIC-FUNCTION-29'></a></p> <p><a id='x-28CLOG-3AEDITABLEP-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-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> <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AEDITABLEP-20GENERIC-FUNCTION-29" >EDITABLEP</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
<p>Places <code>NEXT-OBJ</code> inside bottom of <code>CLOG-ELEMENT</code> in DOM</p></li> <p>Get/Setf editable.</p></li>
</ul>
<p><a id='x-28CLOG-3ABOX-SIZING-TYPE-20-28TYPE-29-29'></a></p>
<ul>
<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3ABOX-SIZING-TYPE-20-28TYPE-29-29" >BOX-SIZING-TYPE</a></span></span></span></li>
</ul>
<p><a id='x-28CLOG-3ABOX-SIZING-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-3ABOX-SIZING-20GENERIC-FUNCTION-29" >BOX-SIZING</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
<p>Get/Setf box-sizing.</p></li>
</ul>
<p><a id='x-28CLOG-3ACLEAR-SIDE-TYPE-20-28TYPE-29-29'></a></p>
<ul>
<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLEAR-SIDE-TYPE-20-28TYPE-29-29" >CLEAR-SIDE-TYPE</a></span></span></span></li>
</ul>
<p><a id='x-28CLOG-3ACLEAR-SIDE-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-3ACLEAR-SIDE-20GENERIC-FUNCTION-29" >CLEAR-SIDE</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
<p>Get/Setf clear-side.</p></li>
</ul>
<p><a id='x-28CLOG-3AFLOAT-WRAP-TYPE-20-28TYPE-29-29'></a></p>
<ul>
<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3AFLOAT-WRAP-TYPE-20-28TYPE-29-29" >FLOAT-WRAP-TYPE</a></span></span></span></li>
</ul>
<p><a id='x-28CLOG-3AFLOAT-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-3AFLOAT-WRAP-20GENERIC-FUNCTION-29" >FLOAT-WRAP</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
<p>Get/Setf for element float left or right and other
elements wrap around it.</p></li>
</ul>
<p><a id='x-28CLOG-3ADISPLAY-TYPE-20-28TYPE-29-29'></a></p>
<ul>
<li><span class=reference-bullet><span class=reference><span class="locative-type">[type]</span> <span class="reference-object"><a href="#x-28CLOG-3ADISPLAY-TYPE-20-28TYPE-29-29" >DISPLAY-TYPE</a></span></span></span></li>
</ul>
<p><a id='x-28CLOG-3ADISPLAY-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-3ADISPLAY-20GENERIC-FUNCTION-29" >DISPLAY</a></span></span> <span class="locative-args">CLOG-ELEMENT</span></span></p>
<p>Get/Setf display.</p></li>
</ul> </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>