clog/clog-element.lisp

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;; 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. as it exists in
the javascript clog[] but is not in the DOM. (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)))

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Low Level  - clog-element
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;;;;;;;;;;;;
;; 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))

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; General Properties - clog-element
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;;;;;;;;;;;
;; 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)

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Placement  - clog-element
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;;;;;;;;;;;;;;;;;
;; 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)

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Properties - clog-element
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;;;;;;;;;;;;;;;;
;; 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)
  (setf (property obj "contentEditable") (p-true-js value)))
(defsetf editablep set-editable)

;;;;;;;;;;;;;;;;
;; draggablep ;;
;;;;;;;;;;;;;;;;

(defgeneric draggablep (clog-element)
  (:documentation "Get/Setf draggablep."))

(defmethod draggablep ((obj clog-element))
  (js-true-p (property obj "draggable")))

(defgeneric set-draggablep (clog-element value)
  (:documentation "Set draggablep VALUE for CLOG-ELEMENT"))

(defmethod set-draggablep ((obj clog-element) value)
  (setf (property obj "draggable") (p-true-js value)))
(defsetf draggablep set-draggablep)

;;;;;;;;;;;;;
;; hiddenp ;;
;;;;;;;;;;;;;

(defgeneric hiddenp (clog-element)
  (:documentation "Get/Setf hiddenp."))

(defmethod hiddenp ((obj clog-element))
  (js-true-p (property obj "hidden")))

(defgeneric set-hiddenp (clog-element value)
  (:documentation "Set hiddenp VALUE for CLOG-ELEMENT"))

(defmethod set-hiddenp ((obj clog-element) value)
  (setf (property obj "hidden") (p-true-js value)))
(defsetf hiddenp set-hiddenp)

;;;;;;;;;;;;;;;;
;; inner-html ;;
;;;;;;;;;;;;;;;;

(defgeneric inner-html (clog-element)
  (:documentation "Get/Setf inner-html."))

(defmethod inner-html ((obj clog-element))
  (jquery-query obj "html()"))

(defgeneric set-inner-html (clog-element value)
  (:documentation "Set inner-html VALUE for CLOG-ELEMENT"))

(defmethod set-inner-html ((obj clog-element) value)
  (jquery-execute obj (format nil "html('~A')" (escape-string value))))
(defsetf inner-html set-inner-html)

;;;;;;;;;;;;;;;;
;; outer-html ;;
;;;;;;;;;;;;;;;;

(defgeneric outer-html (clog-element)
  (:documentation "Get/Setf outer-html."))

(defmethod outer-html ((obj clog-element))
  (query obj "outerHTML"))

;;;;;;;;;;;;;;;;;
;; spellcheckp ;;
;;;;;;;;;;;;;;;;;

(defgeneric spellcheckp (clog-element)
  (:documentation "Get/Setf spellcheckp."))

(defmethod spellcheckp ((obj clog-element))
  (js-true-p (property obj "spellcheck")))

(defgeneric set-spellcheckp (clog-element value)
  (:documentation "Set spellcheckp VALUE for CLOG-ELEMENT"))

(defmethod set-spellcheckp ((obj clog-element) value)
  (setf (property obj "spellcheck") (p-true-js value)))
(defsetf spellcheckp set-spellcheckp)

;;;;;;;;;;;;;;;
;; tab-index ;;
;;;;;;;;;;;;;;;

(defgeneric tab-index (clog-element)
  (:documentation "Get/Setf tab-index."))

(defmethod tab-index ((obj clog-element))
  (property obj "tabIndex"))

(defgeneric set-tab-index (clog-element value)
  (:documentation "Set tab-index VALUE for CLOG-ELEMENT"))

(defmethod set-tab-index ((obj clog-element) value)
  (setf (property obj "tabIndex") value))
(defsetf tab-index set-tab-index)

;;;;;;;;;;
;; text ;;
;;;;;;;;;;

(defgeneric text (clog-element)
  (:documentation "Get/Setf text."))

(defmethod text ((obj clog-element))
  (jquery-query obj "text()"))

(defgeneric set-text (clog-element value)
  (:documentation "Set text VALUE for CLOG-ELEMENT"))

(defmethod set-text ((obj clog-element) value)
  (jquery-execute obj (format nil "text('~A')" (escape-string value))))
(defsetf text set-text)

;;;;;;;;;;;;;;;;;;;;
;; text-direction ;;
;;;;;;;;;;;;;;;;;;;;

(deftype text-direction-type () '(member :ltr :rtl))

(defgeneric text-direction (clog-element)
  (:documentation "Get/Setf text-direction."))

(defmethod text-direction ((obj clog-element))
  (property obj "dir"))

(defgeneric set-text-direction (clog-element value)
  (:documentation "Set text-direction VALUE for CLOG-ELEMENT"))

(defmethod set-text-direction ((obj clog-element) value)
  (setf (property obj "dir") value))
(defsetf text-direction set-text-direction)

;;;;;;;;;;;;;;;;;;;
;; language-code ;;
;;;;;;;;;;;;;;;;;;;

(defgeneric language-code (clog-element)
  (:documentation "Get/Setf language-code."))

(defmethod language-code ((obj clog-element))
  (property obj "lang"))

(defgeneric set-language-code (clog-element value)
  (:documentation "Set language-code VALUE for CLOG-ELEMENT"))

(defmethod set-language-code ((obj clog-element) value)
  (setf (property obj "lang") value))
(defsetf language-code set-language-code)

;;;;;;;;;;;;;;;;;
;; client-left ;;
;;;;;;;;;;;;;;;;;

(defgeneric client-left (clog-element)
  (:documentation "Get client-left."))

(defmethod client-left ((obj clog-element))
  (property obj "clientLeft"))

;;;;;;;;;;;;;;;;
;; client-top ;;
;;;;;;;;;;;;;;;;

(defgeneric client-top (clog-element)
  (:documentation "Get client-top."))

(defmethod client-top ((obj clog-element))
  (property obj "clientTop"))

;;;;;;;;;;;;;;;;;;;
;; client-bottom ;;
;;;;;;;;;;;;;;;;;;;

(defgeneric client-bottom (clog-element)
  (:documentation "Get client-bottom."))

(defmethod client-bottom ((obj clog-element))
  (property obj "clientBottom"))

;;;;;;;;;;;;;;;;;;
;; client-right ;;
;;;;;;;;;;;;;;;;;;

(defgeneric client-right (clog-element)
  (:documentation "Get client-right."))

(defmethod client-right ((obj clog-element))
  (property obj "clientRight"))

;;;;;;;;;;;;;;;;;
;; offset-left ;;
;;;;;;;;;;;;;;;;;

(defgeneric offset-left (clog-element)
  (:documentation "Get offset-left."))

(defmethod offset-left ((obj clog-element))
  (property obj "offsetLeft"))

;;;;;;;;;;;;;;;;
;; offset-top ;;
;;;;;;;;;;;;;;;;

(defgeneric offset-top (clog-element)
  (:documentation "Get offset-top."))

(defmethod offset-top ((obj clog-element))
  (property obj "offsetTop"))

;;;;;;;;;;;;;;;;;;;
;; offset-bottom ;;
;;;;;;;;;;;;;;;;;;;

(defgeneric offset-bottom (clog-element)
  (:documentation "Get offset-bottom."))

(defmethod offset-bottom ((obj clog-element))
  (property obj "offsetBottom"))

;;;;;;;;;;;;;;;;;;
;; offset-right ;;
;;;;;;;;;;;;;;;;;;

(defgeneric offset-right (clog-element)
  (:documentation "Get offset-right."))

(defmethod offset-right ((obj clog-element))
  (property obj "offsetRight"))

;;;;;;;;;;;;;;;;;
;; scroll-left ;;
;;;;;;;;;;;;;;;;;

(defgeneric scroll-left (clog-element)
  (:documentation "Get scroll-left."))

(defmethod scroll-left ((obj clog-element))
  (property obj "scrollLeft"))

(defgeneric set-scroll-left (clog-element value)
  (:documentation "Set scroll-left VALUE for CLOG-ELEMENT"))

(defmethod set-scroll-left ((obj clog-element) value)
  (setf (property obj "scrollLeft") value))
(defsetf scroll-left set-scroll-left)

;;;;;;;;;;;;;;;;
;; scroll-top ;;
;;;;;;;;;;;;;;;;

(defgeneric scroll-top (clog-element)
  (:documentation "Get scroll-top."))

(defmethod scroll-top ((obj clog-element))
  (property obj "scrollTop"))

(defgeneric set-scroll-top (clog-element value)
  (:documentation "Set scroll-top VALUE for CLOG-ELEMENT"))

(defmethod set-scroll-top ((obj clog-element) value)
  (setf (property obj "scrollTop") value))
(defsetf scroll-top set-scroll-top)

;;;;;;;;;;;;;;;;;;;
;; scroll-bottom ;;
;;;;;;;;;;;;;;;;;;;

(defgeneric scroll-bottom (clog-element)
  (:documentation "Get scroll-bottom."))

(defmethod scroll-bottom ((obj clog-element))
  (property obj "scrollBottom"))

;;;;;;;;;;;;;;;;;;
;; scroll-right ;;
;;;;;;;;;;;;;;;;;;

(defgeneric scroll-right (clog-element)
  (:documentation "Get scroll-right."))

(defmethod scroll-right ((obj clog-element))
  (property obj "scrollRight"))

;;;;;;;;;;;;;;
;; html-tag ;;
;;;;;;;;;;;;;;

(defgeneric html-tag (clog-element)
  (:documentation "Get html-tag."))

(defmethod html-tag ((obj clog-element))
  (property obj "tagName"))


;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Styles - clog-element
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;;;;;;;;;;;;;;;;
;; 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") 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") 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") 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") value))
(defsetf display set-display)

;;;;;;;;;;;;;;
;; overflow ;;
;;;;;;;;;;;;;;

(deftype overflow-type () '(member :visible :hidden :clip :scroll :auto))

(defgeneric overflow (clog-element)
  (:documentation "Get/Setf overflow."))

(defmethod overflow ((obj clog-element))
  (style obj "overflow"))

(defgeneric set-overflow (clog-element value)
  (:documentation "Set overflow VALUE for CLOG-ELEMENT"))

(defmethod set-overflow ((obj clog-element) value)
  (setf (style obj "overflow") value))
(defsetf overflow set-overflow)

;;;;;;;;;;;;;;;;
;; overflow-x ;;
;;;;;;;;;;;;;;;;

(deftype overflow-x-type () '(member :visible :hidden :clip :scroll :auto))

(defgeneric overflow-x (clog-element)
  (:documentation "Get/Setf overflow-x."))

(defmethod overflow-x ((obj clog-element))
  (style obj "overflow-x"))

(defgeneric set-overflow-x (clog-element value)
  (:documentation "Set overflow-x VALUE for CLOG-ELEMENT"))

(defmethod set-overflow-x ((obj clog-element) value)
  (setf (style obj "overflow-x") value))
(defsetf overflow-x set-overflow-x)

;;;;;;;;;;;;;;;;
;; overflow-y ;;
;;;;;;;;;;;;;;;;

(deftype overflow-y-type () '(member :visible :hidden :clip :scroll :auto))

(defgeneric overflow-y (clog-element)
  (:documentation "Get/Setf overflow-y."))

(defmethod overflow-y ((obj clog-element))
  (style obj "overflow-y"))

(defgeneric set-overflow-y (clog-element value)
  (:documentation "Set overflow-y VALUE for CLOG-ELEMENT"))

(defmethod set-overflow-y ((obj clog-element) value)
  (setf (style obj "overflow-y") value))
(defsetf overflow-y set-overflow-y)

;;;;;;;;;;;;;
;; z-index ;;
;;;;;;;;;;;;;

(defgeneric z-index (clog-element)
  (:documentation "Get/Setf z-index."))

(defmethod z-index ((obj clog-element))
  (style obj "z-index"))

(defgeneric set-z-index (clog-element value)
  (:documentation "Set z-index VALUE for CLOG-ELEMENT"))

(defmethod set-z-index ((obj clog-element) value)
  (setf (style obj "z-index") value))
(defsetf z-index set-z-index)

;;;;;;;;;;;;;;;
;; resizable ;;
;;;;;;;;;;;;;;;

(deftype resizable-type () '(member :none :both :horizontal :vertical :block :inline))

(defgeneric resizable (clog-element)
  (:documentation "Get/Setf resizable."))

(defmethod resizable ((obj clog-element))
  (style obj "resize"))

(defgeneric set-resizable (clog-element value)
  (:documentation "Set resizable VALUE for CLOG-ELEMENT"))

(defmethod set-resizable ((obj clog-element) value)
  (setf (style obj "resize") value))
(defsetf resizable set-resizable)

;;;;;;;;;;;;;;;;;
;; positioning ;;
;;;;;;;;;;;;;;;;;

(deftype positioning-type () '(member :static :relative :absolute :sticky :fixed))

(defgeneric positioning (clog-element)
  (:documentation "Get/Setf positioning."))

(defmethod positioning ((obj clog-element))
  (style obj "position"))

(defgeneric set-positioning (clog-element value)
  (:documentation "Set positioning VALUE for CLOG-ELEMENT"))

(defmethod set-positioning ((obj clog-element) value)
  (setf (style obj "position") value))
(defsetf positioning set-positioning)

;;;;;;;;;;;;;;;;;;
;; position-top ;;
;;;;;;;;;;;;;;;;;;

(defgeneric position-top (clog-element)
  (:documentation "Position from top in pixels relative to Element's
parent in the DOM."))

(defmethod position-top ((obj clog-element))
  (jquery-query obj "position().top"))

;;;;;;;;;;;;;;;;;;;
;; position-left ;;
;;;;;;;;;;;;;;;;;;;

(defgeneric position-left (clog-element)
  (:documentation "Position from left in pixels relative to Element's
parent in the DOM."))

(defmethod position-left ((obj clog-element))
  (jquery-query obj "position().left"))

;;;;;;;;;;;;;;;;
;; offset-top ;;
;;;;;;;;;;;;;;;;

(defgeneric offset-top (clog-element)
  (:documentation "Position in pixels from top relative to the document."))

(defmethod offset-top ((obj clog-element))
  (jquery-query obj "offset().top"))

;;;;;;;;;;;;;;;;;
;; offset-left ;;
;;;;;;;;;;;;;;;;;

(defgeneric offset-left (clog-element)
  (:documentation "Position in pixels from left relative to the document."))

(defmethod offset-left ((obj clog-element))
  (jquery-query obj "offset().left"))

;;;;;;;;;;
;; left ;;
;;;;;;;;;;

(defgeneric left (clog-element)
  (:documentation "Get/Setf left."))

(defmethod left ((obj clog-element))
  (style obj "left"))

(defgeneric set-left (clog-element value)
  (:documentation "Set left VALUE for CLOG-ELEMENT"))

(defmethod set-left ((obj clog-element) value)
  (setf (style obj "left") value))
(defsetf left set-left)

;;;;;;;;;;;
;; right ;;
;;;;;;;;;;;

(defgeneric right (clog-element)
  (:documentation "Get/Setf right."))

(defmethod right ((obj clog-element))
  (style obj "right"))

(defgeneric set-right (clog-element value)
  (:documentation "Set right VALUE for CLOG-ELEMENT"))

(defmethod set-right ((obj clog-element) value)
  (setf (style obj "right") value))
(defsetf right set-right)

;;;;;;;;;
;; top ;;
;;;;;;;;;

(defgeneric top (clog-element)
  (:documentation "Get/Setf top."))

(defmethod top ((obj clog-element))
  (style obj "top"))

(defgeneric set-top (clog-element value)
  (:documentation "Set top VALUE for CLOG-ELEMENT"))

(defmethod set-top ((obj clog-element) value)
  (setf (style obj "top") value))
(defsetf top set-top)

;;;;;;;;;;;;
;; bottom ;;
;;;;;;;;;;;;

(defgeneric bottom (clog-element)
  (:documentation "Get/Setf bottom."))

(defmethod bottom ((obj clog-element))
  (style obj "bottom"))

(defgeneric set-bottom (clog-element value)
  (:documentation "Set bottom VALUE for CLOG-ELEMENT"))

(defmethod set-bottom ((obj clog-element) value)
  (setf (style obj "bottom") value))
(defsetf bottom set-bottom)

;;;;;;;;;;;;;;;;
;; box-height ;;
;;;;;;;;;;;;;;;;

(defgeneric box-height (clog-element)
  (:documentation "Get/Setf box-height."))

(defmethod box-height ((obj clog-element))
  (style obj "height"))

(defgeneric set-box-height (clog-element value)
  (:documentation "Set box-height VALUE for CLOG-ELEMENT"))

(defmethod set-box-height ((obj clog-element) value)
  (setf (style obj "height") value))
(defsetf box-height set-box-height)

;;;;;;;;;;;;;;;
;; box-width ;;
;;;;;;;;;;;;;;;

(defgeneric box-width (clog-element)
  (:documentation "Get/Setf box-width."))

(defmethod box-width ((obj clog-element))
  (style obj "width"))

(defgeneric set-box-width (clog-element value)
  (:documentation "Set box-width VALUE for CLOG-ELEMENT"))

(defmethod set-box-width ((obj clog-element) value)
  (setf (style obj "width") value))
(defsetf box-width set-box-width)

;;;;;;;;;;;;;;;;;;;;
;; maximum-height ;;
;;;;;;;;;;;;;;;;;;;;

(defgeneric maximum-height (clog-element)
  (:documentation "Get/Setf maximum-height."))

(defmethod maximum-height ((obj clog-element))
  (style obj "max-height"))

(defgeneric set-maximum-height (clog-element value)
  (:documentation "Set maximum-height VALUE for CLOG-ELEMENT"))

(defmethod set-maximum-height ((obj clog-element) value)
  (setf (style obj "max-height") value))
(defsetf maximum-height set-maximum-height)

;;;;;;;;;;;;;;;;;;;
;; maximum-width ;;
;;;;;;;;;;;;;;;;;;;

(defgeneric maximum-width (clog-element)
  (:documentation "Get/Setf maximum-width."))

(defmethod maximum-width ((obj clog-element))
  (style obj "max-width"))

(defgeneric set-maximum-width (clog-element value)
  (:documentation "Set maximum-width VALUE for CLOG-ELEMENT"))

(defmethod set-maximum-width ((obj clog-element) value)
  (setf (style obj "max-width") value))
(defsetf maximum-width set-maximum-width)

;;;;;;;;;;;;;;;;;;;;
;; minimum-height ;;
;;;;;;;;;;;;;;;;;;;;

(defgeneric minimum-height (clog-element)
  (:documentation "Get/Setf minimum-height."))

(defmethod minimum-height ((obj clog-element))
  (style obj "min-height"))

(defgeneric set-minimum-height (clog-element value)
  (:documentation "Set minimum-height VALUE for CLOG-ELEMENT"))

(defmethod set-minimum-height ((obj clog-element) value)
  (setf (style obj "min-height") value))
(defsetf minimum-height set-minimum-height)

;;;;;;;;;;;;;;;;;;;
;; minimum-width ;;
;;;;;;;;;;;;;;;;;;;

(defgeneric minimum-width (clog-element)
  (:documentation "Get/Setf minimum-width."))

(defmethod minimum-width ((obj clog-element))
  (style obj "min-width"))

(defgeneric set-minimum-width (clog-element value)
  (:documentation "Set minimum-width VALUE for CLOG-ELEMENT"))

(defmethod set-minimum-width ((obj clog-element) value)
  (setf (style obj "min-width") value))
(defsetf minimum-width set-minimum-width)

;;;;;;;;;;;;;;;;;;;;
;; maximum-height ;;
;;;;;;;;;;;;;;;;;;;;

(defgeneric maximum-height (clog-element)
  (:documentation "Get/Setf maximum-height."))

(defmethod maximum-height ((obj clog-element))
  (style obj "max-height"))

(defgeneric set-maximum-height (clog-element value)
  (:documentation "Set maximum-height VALUE for CLOG-ELEMENT"))

(defmethod set-maximum-height ((obj clog-element) value)
  (setf (style obj "max-height") value))
(defsetf maximum-height set-maximum-height)

;;;;;;;;;;;;;;
;; visiblep ;;
;;;;;;;;;;;;;;

(defgeneric visiblep (clog-element)
  (:documentation "Get/Setf visiblep."))

(defmethod visiblep ((obj clog-element))
  (equalp (property obj "visibility") "visible"))

(defgeneric set-visiblep (clog-element value)
  (:documentation "Set visiblep VALUE for CLOG-ELEMENT"))

(defmethod set-visiblep ((obj clog-element) value)
  (if value
      (setf (property obj "visibility") "visible")
      (setf (property obj "visibility") "hidden")))
(defsetf visiblep set-visiblep)

;;;;;;;;;;;;;;;;;;
;; inner-height ;;
;;;;;;;;;;;;;;;;;;

(defgeneric inner-height (clog-element)
  (:documentation "Get/Setf inner-height."))

(defmethod inner-height ((obj clog-element))
  (jquery-query obj "innerHeight()"))

(defgeneric set-inner-height (clog-element value)
  (:documentation "Set inner-height VALUE for CLOG-ELEMENT"))

(defmethod set-inner-height ((obj clog-element) value)
  (jquery-execute obj (format nil "innerHeight('~A')" (escape-string value))))
(defsetf inner-height set-inner-height)

;;;;;;;;;;;;;;;;;
;; inner-width ;;
;;;;;;;;;;;;;;;;;

(defgeneric inner-width (clog-element)
  (:documentation "Get/Setf inner-width."))

(defmethod inner-width ((obj clog-element))
  (jquery-query obj "innerWidth()"))

(defgeneric set-inner-width (clog-element value)
  (:documentation "Set inner-width VALUE for CLOG-ELEMENT"))

(defmethod set-inner-width ((obj clog-element) value)
  (jquery-execute obj (format nil "innerWidth('~A')" (escape-string value))))
(defsetf inner-width set-inner-width)

;;;;;;;;;;;;;;;;;;
;; outer-height ;;
;;;;;;;;;;;;;;;;;;

(defgeneric outer-height (clog-element)
  (:documentation "Get outer-height."))

(defmethod outer-height ((obj clog-element))
  (jquery-query obj "outerHeight()"))

;;;;;;;;;;;;;;;;;
;; outer-width ;;
;;;;;;;;;;;;;;;;;

(defgeneric outer-width (clog-element)
  (:documentation "Get outer-width."))

(defmethod outer-width ((obj clog-element))
  (jquery-query obj "outerWidth()"))

;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; outer-height-to-margin ;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;

(defgeneric outer-height-to-margin (clog-element)
  (:documentation "Get outer-height-to-margin."))

(defmethod outer-height-to-margin ((obj clog-element))
  (jquery-query obj "outerHeight(true)"))

;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; outer-width-to-margin ;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;

(defgeneric outer-width-to-margin (clog-element)
  (:documentation "Get outer-width-to-margin."))

(defmethod outer-width-to-margin ((obj clog-element))
  (jquery-query obj "outerWidth(true)"))

;;;;;;;;;;;
;; color ;;
;;;;;;;;;;;

(defgeneric color (clog-element)
  (:documentation "Get/Setf color."))

(defmethod color ((obj clog-element))
  (style obj "color"))

(defgeneric set-color (clog-element value)
  (:documentation "Set color VALUE for CLOG-ELEMENT"))

(defmethod set-color ((obj clog-element) value)
  (setf (style obj "color") value))
(defsetf color set-color)

;;;;;;;;;;;;;
;; opacity ;;
;;;;;;;;;;;;;

(defgeneric opacity (clog-element)
  (:documentation "Get/Setf opacity."))

(defmethod opacity ((obj clog-element))
  (style obj "opacity"))

(defgeneric set-opacity (clog-element value)
  (:documentation "Set opacity VALUE for CLOG-ELEMENT"))

(defmethod set-opacity ((obj clog-element) value)
  (setf (style obj "opacity") value))
(defsetf opacity set-opacity)

;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; background-attachment ;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;

(defgeneric background-attachment (clog-element)
  (:documentation "Get/Setf background-attachment."))

(defmethod background-attachment ((obj clog-element))
  (style obj "background-attachment"))

(defgeneric set-background-attachment (clog-element value)
  (:documentation "Set background-attachment VALUE for CLOG-ELEMENT"))

(defmethod set-background-attachment ((obj clog-element) value)
  (setf (style obj "background-attachment") value))
(defsetf background-attachment set-background-attachment)

;;;;;;;;;;;;;;;;;;;;;;
;; background-color ;;
;;;;;;;;;;;;;;;;;;;;;;

(defgeneric background-color (clog-element)
  (:documentation "Get/Setf background-color."))

(defmethod background-color ((obj clog-element))
  (style obj "background-color"))

(defgeneric set-background-color (clog-element value)
  (:documentation "Set background-color VALUE for CLOG-ELEMENT"))

(defmethod set-background-color ((obj clog-element) value)
  (setf (style obj "background-color") value))
(defsetf background-color set-background-color)

;;;;;;;;;;;;;;;;;;;;;;
;; background-image ;;
;;;;;;;;;;;;;;;;;;;;;;

(defgeneric background-image (clog-element)
  (:documentation "Get/Setf background-image url."))

(defmethod background-image ((obj clog-element))
  (style obj "background-image"))

(defgeneric set-background-image (clog-element value)
  (:documentation "Set background-image VALUE for CLOG-ELEMENT"))

(defmethod set-background-image ((obj clog-element) value)
  (if value
      (setf (style obj "background-image") (format nil "url('~A')" value))
      (setf (style obj "background-image") "none")))
(defsetf background-image set-background-image)

;;;;;;;;;;;;;;;;;;;;;;;;;
;; background-position ;;
;;;;;;;;;;;;;;;;;;;;;;;;;

(defgeneric background-position (clog-element)
  (:documentation "Get/Setf background-position."))

(defmethod background-position ((obj clog-element))
  (style obj "background-position"))

(defgeneric set-background-position (clog-element value)
  (:documentation "Set background-position VALUE for CLOG-ELEMENT"))

(defmethod set-background-position ((obj clog-element) value)
  (setf (style obj "background-position") value))
(defsetf background-position set-background-position)

;;;;;;;;;;;;;;;;;;;;;;;
;; background-origin ;;
;;;;;;;;;;;;;;;;;;;;;;;

(defgeneric background-origin (clog-element)
  (:documentation "Get/Setf background-origin."))

(defmethod background-origin ((obj clog-element))
  (style obj "background-origin"))

(defgeneric set-background-origin (clog-element value)
  (:documentation "Set background-origin VALUE for CLOG-ELEMENT"))

(defmethod set-background-origin ((obj clog-element) value)
  (setf (style obj "background-origin") value))
(defsetf background-origin set-background-origin)

;;;;;;;;;;;;;;;;;;;;;;;
;; background-repeat ;;
;;;;;;;;;;;;;;;;;;;;;;;

(defgeneric background-repeat (clog-element)
  (:documentation "Get/Setf background-repeat."))

(defmethod background-repeat ((obj clog-element))
  (style obj "background-repeat"))

(defgeneric set-background-repeat (clog-element value)
  (:documentation "Set background-repeat VALUE for CLOG-ELEMENT"))

(defmethod set-background-repeat ((obj clog-element) value)
  (setf (style obj "background-repeat") value))
(defsetf background-repeat set-background-repeat)

;;;;;;;;;;;;;;;;;;;;;
;; background-clip ;;
;;;;;;;;;;;;;;;;;;;;;

(defgeneric background-clip (clog-element)
  (:documentation "Get/Setf background-clip."))

(defmethod background-clip ((obj clog-element))
  (style obj "background-clip"))

(defgeneric set-background-clip (clog-element value)
  (:documentation "Set background-clip VALUE for CLOG-ELEMENT"))

(defmethod set-background-clip ((obj clog-element) value)
  (setf (style obj "background-clip") value))
(defsetf background-clip set-background-clip)

;;;;;;;;;;;;;;;;;;;;;
;; background-size ;;
;;;;;;;;;;;;;;;;;;;;;

(defgeneric background-size (clog-element)
  (:documentation "Get/Setf background-size."))

(defmethod background-size ((obj clog-element))
  (style obj "background-size"))

(defgeneric set-background-size (clog-element value)
  (:documentation "Set background-size VALUE for CLOG-ELEMENT"))

(defmethod set-background-size ((obj clog-element) value)
  (setf (style obj "background-size") value))
(defsetf background-size set-background-size)

;;;;;;;;;;;;
;; border ;;
;;;;;;;;;;;;

(defgeneric border (clog-element)
  (:documentation "Get/Setf border."))

(defmethod border ((obj clog-element))
  (style obj "border"))

(defgeneric set-border (clog-element value)
  (:documentation "Set border VALUE for CLOG-ELEMENT"))

(defmethod set-border ((obj clog-element) value)
  (setf (style obj "border") value))
(defsetf border set-border)

;;;;;;;;;;;;;;;;;;;
;; border-radius ;;
;;;;;;;;;;;;;;;;;;;

(defgeneric border-radius (clog-element)
  (:documentation "Get/Setf border-radius."))

(defmethod border-radius ((obj clog-element))
  (style obj "border-radius"))

(defgeneric set-border-radius (clog-element value)
  (:documentation "Set border-radius VALUE for CLOG-ELEMENT"))

(defmethod set-border-radius ((obj clog-element) value)
  (setf (style obj "border-radius") value))
(defsetf border-radius set-border-radius)

;;;;;;;;;;;;;;;;
;; box-shadow ;;
;;;;;;;;;;;;;;;;

(defgeneric box-shadow (clog-element)
  (:documentation "Get/Setf box-shadow."))

(defmethod box-shadow ((obj clog-element))
  (style obj "box-shadow"))

(defgeneric set-box-shadow (clog-element value)
  (:documentation "Set box-shadow VALUE for CLOG-ELEMENT"))

(defmethod set-box-shadow ((obj clog-element) value)
  (setf (style obj "box-shadow") value))
(defsetf box-shadow set-box-shadow)

;;;;;;;;;;;;;
;; outline ;;
;;;;;;;;;;;;;

(defgeneric outline (clog-element)
  (:documentation "Get/Setf outline."))

(defmethod border ((obj clog-element))
  (style obj "outline"))

(defgeneric set-outline (clog-element value)
  (:documentation "Set outline VALUE for CLOG-ELEMENT"))

(defmethod set-outline ((obj clog-element) value)
  (setf (style obj "outline") value))
(defsetf outline set-outline)

;;;;;;;;;;;;
;; margin ;;
;;;;;;;;;;;;

(defgeneric margin (clog-element)
  (:documentation "Get/Setf margin."))

(defmethod margin ((obj clog-element))
  (style obj "margin"))

(defgeneric set-margin (clog-element value)
  (:documentation "Set margin VALUE for CLOG-ELEMENT"))

(defmethod set-margin ((obj clog-element) value)
  (setf (style obj "margin") value))
(defsetf margin set-margin)

;;;;;;;;;;;;;
;; padding ;;
;;;;;;;;;;;;;

(defgeneric padding (clog-element)
  (:documentation "Get/Setf padding."))

(defmethod padding ((obj clog-element))
  (style obj "padding"))

(defgeneric set-padding (clog-element value)
  (:documentation "Set padding VALUE for CLOG-ELEMENT"))

(defmethod set-padding ((obj clog-element) value)
  (setf (style obj "padding") value))
(defsetf padding set-padding)

;;;;;;;;;;;;
;; cursor ;;
;;;;;;;;;;;;

(defgeneric cursor (clog-element)
  (:documentation "Get/Setf cursor."))

(defmethod cursor ((obj clog-element))
  (style obj "cursor"))

(defgeneric set-cursor (clog-element value)
  (:documentation "Set cursor VALUE for CLOG-ELEMENT"))

(defmethod set-cursor ((obj clog-element) value)
  (setf (style obj "cursor") value))
(defsetf cursor set-cursor)

;;;;;;;;;;
;; font ;;
;;;;;;;;;;

(defgeneric font (clog-element)
  (:documentation "Get/Setf font."))

(defmethod font ((obj clog-element))
  (style obj "font"))

(defgeneric set-font (clog-element value)
  (:documentation "Set font VALUE for CLOG-ELEMENT"))

(defmethod set-font ((obj clog-element) value)
  (setf (style obj "font") value))
(defsetf font set-font)

;;;;;;;;;;;;;;;;;;;;
;; vertical-align ;;
;;;;;;;;;;;;;;;;;;;;

(deftype vertical-align-type ()
  '(member :baseline :sub :super :text-top :text-bottom :middle :top :bottom))

(defgeneric vertical-align (clog-element)
  (:documentation "Get/Setf vertical-align."))

(defmethod vertical-align ((obj clog-element))
  (style obj "vertical-align"))

(defgeneric set-vertical-align (clog-element value)
  (:documentation "Set vertical-align VALUE for CLOG-ELEMENT"))

(defmethod set-vertical-align ((obj clog-element) value)
  (setf (style obj "vertical-align") value))
(defsetf vertical-align set-vertical-align)

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Methods - clog-element
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

;;;;;;;;;;;;;;;
;; add-class ;;
;;;;;;;;;;;;;;;

(defgeneric add-class (clog-element class-name)
  (:documentation "add-class."))

(defmethod add-class ((obj clog-element) class-name)
  (jquery-execute obj (format nil "addClass('~A')"
			      (escape-string class-name))))

;;;;;;;;;;;;;;;;;;
;; remove-class ;;
;;;;;;;;;;;;;;;;;;

(defgeneric remove-class (clog-element class-name)
  (:documentation "remove-class."))

(defmethod remove-class ((obj clog-element) class-name)
  (jquery-execute obj (format nil "removeClass('~A')"
			      (escape-string class-name))))

;;;;;;;;;;;;;;;;;;
;; toggle-class ;;
;;;;;;;;;;;;;;;;;;

(defgeneric toggle-class (clog-element class-name)
  (:documentation "toggle-class."))

(defmethod toggle-class ((obj clog-element) class-name)
  (jquery-execute obj (format nil "toggleClass('~A')"
			      (escape-string class-name))))

;;;;;;;;;;;;;;;;;;;;;
;; remove-from-dom ;;
;;;;;;;;;;;;;;;;;;;;;

(defgeneric remove-from-dom (clog-element)
  (:documentation "remove-from-dom."))

(defmethod remove-from-dom ((obj clog-element))
  (jquery-execute obj "remove()"))

;;;;;;;;;;;
;; click ;;
;;;;;;;;;;;

(defgeneric click (clog-element)
  (:documentation "simulate click."))

(defmethod click ((obj clog-element))
  (jquery-execute obj "click()"))

;;;;;;;;;;;;;;;;;
;; first-child ;;
;;;;;;;;;;;;;;;;;

(defgeneric first-child (clog-element)
  (:documentation "Traverse to first child element. If Child does not have an
html id than Element_Type will have an ID of undefined and therefore attached
to no actual HTML elemen."))

(defmethod first-child ((obj clog-element))
  (make-clog-element
   (connection-id obj)
   (jquery-execute obj (format nil "children().first().attr('id');"))))

;;;;;;;;;;;;;;;;;;
;; next-sibling ;;
;;;;;;;;;;;;;;;;;;

(defgeneric next-sibling (clog-element)
  (:documentation "Traverse to next sibling element. If Child does not have an
html id than Element_Type will have an ID of undefined and therefore attached
to no actual HTML elemen."))

(defmethod next-sibling ((obj clog-element))
  (make-clog-element
   (connection-id obj)
   (jquery-execute obj (format nil "next().attr('id');"))))