From 7c503eaa437e563d03f72b579cd2bcfffcc73b78 Mon Sep 17 00:00:00 2001 From: David Botton Date: Thu, 31 Dec 2020 21:57:50 -0500 Subject: [PATCH] Start on fleshing out clog-element --- clog-element.lisp | 176 +++++++++++++++++++++++++++++++++++++++---- clog.lisp | 25 ++++-- doc/clog-manual.html | 117 ++++++++++++++++++++++++---- 3 files changed, 287 insertions(+), 31 deletions(-) diff --git a/clog-element.lisp b/clog-element.lisp index 7209b4b..b33603b 100644 --- a/clog-element.lisp +++ b/clog-element.lisp @@ -32,7 +32,8 @@ element objects.")) (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)" +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))) (cc:execute connection-id @@ -114,10 +115,10 @@ HTML-ID must be unique.")) ;; place-after ;; ;;;;;;;;;;;;;;;;; -(defgeneric place-after (clog-element next-obj) - (:documentation "Places NEXT-OBJ after CLOG-ELEMENT in DOM")) +(defgeneric place-after (clog-obj next-obj) + (: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))) next-obj) @@ -125,10 +126,10 @@ HTML-ID must be unique.")) ;; place-before ;; ;;;;;;;;;;;;;;;;;; -(defgeneric place-before (clog-element next-obj) - (:documentation "Places NEXT-OBJ before CLOG-ELEMENT in DOM")) +(defgeneric place-before (clog-obj next-obj) + (: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))) next-obj) @@ -136,10 +137,10 @@ HTML-ID must be unique.")) ;; place-inside-top-of ;; ;;;;;;;;;;;;;;;;;;;;;;;;; -(defgeneric place-inside-top-of (clog-element next-obj) - (:documentation "Places NEXT-OBJ inside top of CLOG-ELEMENT in DOM")) +(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-element) next-obj) +(defmethod place-inside-top-of ((obj clog-obj) next-obj) (jquery-execute obj (format nil "prepend(~A)" (script-id next-obj))) next-obj) @@ -147,10 +148,159 @@ HTML-ID must be unique.")) ;; place-inside-bottom-of ;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;; -(defgeneric place-inside-bottom-of (clog-element next-obj) - (:documentation "Places NEXT-OBJ inside bottom of CLOG-ELEMENT in DOM")) +(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-element) next-obj) +(defmethod place-inside-bottom-of ((obj clog-obj) next-obj) (jquery-execute obj (format nil "append(~A)" (script-id 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) + diff --git a/clog.lisp b/clog.lisp index 5f13642..6235d4a 100644 --- a/clog.lisp +++ b/clog.lisp @@ -108,15 +108,30 @@ application." (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)) + (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") "CLOG-Body - CLOG Body Objects" diff --git a/doc/clog-manual.html b/doc/clog-manual.html index 8da5383..81eabb5 100644 --- a/doc/clog-manual.html +++ b/doc/clog-manual.html @@ -543,6 +543,40 @@ and if :AUTO-PLACE (default t) place-inside-bottom-of CLOG-OB HTML-ID must be unique.

+

CLOG-Element - Placement

+ +

+ + + +

+ + + +

+ + + +

+ + +

CLOG-Element - General Properties

@@ -561,38 +595,95 @@ and if :AUTO-PLACE (default t) place-inside-bottom-of CLOG-OB

Get/Setf html tag attribute. (eg. src on img tag)

-

CLOG-Element - Placement

+

CLOG-Element - Properties

-

+

    -

  • [generic-function] PLACE-AFTER CLOG-ELEMENT NEXT-OBJ

    +

  • [generic-function] ACCESS-KEY CLOG-ELEMENT

    -

    Places NEXT-OBJ after CLOG-ELEMENT in DOM

    • +

    Get/Setf access-key.

-

+

    -

  • [generic-function] PLACE-BEFORE CLOG-ELEMENT NEXT-OBJ

    +

  • [generic-function] ADVISORY-TITLE CLOG-ELEMENT

    -

    Places NEXT-OBJ before CLOG-ELEMENT in DOM

    • +

    Get/Setf advisory-title.

-

+

    -

  • [generic-function] PLACE-INSIDE-TOP-OF CLOG-ELEMENT NEXT-OBJ

    +

  • [generic-function] CLASS-NAME CLOG-ELEMENT

    -

    Places NEXT-OBJ inside top of CLOG-ELEMENT in DOM

    • +

    Get/Setf class-name.

-

+

    -

  • [generic-function] PLACE-INSIDE-BOTTOM-OF CLOG-ELEMENT NEXT-OBJ

    +

  • [generic-function] EDITABLEP CLOG-ELEMENT

    -

    Places NEXT-OBJ inside bottom of CLOG-ELEMENT in DOM

    • +

    Get/Setf editable.

    +
+ +

+ + + +

+ +
    +

  • [generic-function] BOX-SIZING CLOG-ELEMENT

    + +

    Get/Setf box-sizing.

    • +
+ +

+ + + +

+ +
    +

  • [generic-function] CLEAR-SIDE CLOG-ELEMENT

    + +

    Get/Setf clear-side.

    • +
+ +

+ + + +

+ +
    +

  • [generic-function] FLOAT-WRAP CLOG-ELEMENT

    + +

    Get/Setf for element float left or right and other +elements wrap around it.

    • +
+ +

+ + + +

+ +
    +

  • [generic-function] DISPLAY CLOG-ELEMENT

    + +

    Get/Setf display.