From b5e551fd6eae0481c263b795451dfe1af8564cb9 Mon Sep 17 00:00:00 2001 From: David Botton Date: Wed, 30 Dec 2020 22:05:34 -0500 Subject: [PATCH] Refactor and create CLOG-Element --- clog-base.lisp | 153 +++------------------------------ clog-element.lisp | 156 ++++++++++++++++++++++++++++++++++ clog-navigator.lisp | 10 +-- clog.asd | 3 +- clog.lisp | 39 +++++---- doc/clog-manual.html | 197 ++++++++++++++++++++++++------------------- 6 files changed, 310 insertions(+), 248 deletions(-) create mode 100644 clog-element.lisp diff --git a/clog-base.lisp b/clog-base.lisp index 83e48d4..7820296 100644 --- a/clog-base.lisp +++ b/clog-base.lisp @@ -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))) - - - diff --git a/clog-element.lisp b/clog-element.lisp new file mode 100644 index 0000000..7209b4b --- /dev/null +++ b/clog-element.lisp @@ -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) + diff --git a/clog-navigator.lisp b/clog-navigator.lisp index d49a5ff..1db644a 100644 --- a/clog-navigator.lisp +++ b/clog-navigator.lisp @@ -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"))) ;;;;;;;;;;;;;; diff --git a/clog.asd b/clog.asd index b8c1cd5..2dba593 100644 --- a/clog.asd +++ b/clog.asd @@ -5,7 +5,7 @@ :author "David Botton " :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") diff --git a/clog.lisp b/clog.lisp index a1908ac..5f13642 100644 --- a/clog.lisp +++ b/clog.lisp @@ -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) diff --git a/doc/clog-manual.html b/doc/clog-manual.html index de55cbf..8da5383 100644 --- a/doc/clog-manual.html +++ b/doc/clog-manual.html @@ -38,11 +38,12 @@
  • 2 CLOG System
  • 3 CLOG Utilities
  • 4 CLOG Objects
    • -
  • 5 CLOG Body Objects
    • -
  • 6 CLOG Window Objects
    • -
  • 7 CLOG Document Objects
    • -
  • 8 CLOG Location Objects
    • -
  • 9 CLOG Navigator Objects
    • +
  • 5 CLOG Elements
    • +
  • 6 CLOG Body Objects
    • +
  • 7 CLOG Window Objects
    • +
  • 8 CLOG Document Objects
    • +
  • 9 CLOG Location Objects
    • +
  • 10 CLOG Navigator Objects
    • [in package CLOG]
    @@ -60,7 +61,7 @@ application.

    1 clog ASDF System Details

    -

    - - - -

    - - -

    CLOG-Obj - General Methods

    @@ -209,60 +194,8 @@ lisp and the HTML DOM element.

    Remove focus from CLOG-OBJ

    -

    CLOG-Obj - Placement

    - -

    - - - -

    - - - -

    - - - -

    - - -

    CLOG-Obj - Low Level

    -

    - - - -

    - - -

    @@ -362,7 +296,8 @@ is nil unbind the event.

  • [generic-function] SET-ON-SELECT CLOG-OBJ ON-SELECT-HANDLER

    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.

    @@ -380,7 +315,8 @@ is nil unbind the event.

  • [generic-function] SET-ON-SELECT CLOG-OBJ ON-SELECT-HANDLER

    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.

    @@ -570,11 +506,100 @@ is nil unbind the event.

    is nil unbind the event.

    +

    + +

    ← ↑ → ↺

    + +

    5 CLOG Elements

    + +

    CLOG-Element - Base class for CLOG Elements

    + +

    + + + +

    CLOG-Element - Low Level Creation

    + +

    + + + +

    + + + +

    CLOG-Element - General Properties

    + +

    + + + +

    + + + +

    CLOG-Element - Placement

    + +

    + + + +

    + + + +

    + + + +

    + + +

    -

    ← ↑ → ↺

    +

    ← ↑ → ↺

    -

    5 CLOG Body Objects

    +

    6 CLOG Body Objects

    CLOG-Body - CLOG Body Objects

    @@ -624,7 +649,7 @@ is nil unbind the event.

    ← ↑ → ↺

    -

    6 CLOG Window Objects

    +

    7 CLOG Window Objects

    CLOG-Window - CLOG Window Objects

    @@ -943,7 +968,7 @@ is nil unbind the event.

    ← ↑ → ↺

    -

    7 CLOG Document Objects

    +

    8 CLOG Document Objects

    CLOG-Document - CLOG Document Objects

    @@ -1077,7 +1102,7 @@ is nil unbind the event.

    ← ↑ → ↺

    -

    8 CLOG Location Objects

    +

    9 CLOG Location Objects

    CLOG-Location - CLOG Location Objects

    @@ -1193,7 +1218,7 @@ is nil unbind the event.

    ← ↑ ↺

    -

    9 CLOG Navigator Objects

    +

    10 CLOG Navigator Objects

    CLOG-Navigator - CLOG Navigator Objects

    @@ -1207,10 +1232,10 @@ is nil unbind the event.

    CLOG-Navigator - Properties

    -

    +