diff --git a/README.md b/README.md
index ec2d14e..8c50fa0 100644
--- a/README.md
+++ b/README.md
@@ -86,9 +86,7 @@ Status:
- General DOM (Window, Screen, Document, Location, Navigator) - DONE
- Base Elements (HTML Elements)
- Canvas - HTML 5 Canvas bindings
- - SVG - HTML SVG vector graphics
- Multimedia - HTML 5 Audio and Video
- - Styles - CSS Style blocks
- CLOG higher level containers and GUI widgets - to do
diff --git a/clog-base.lisp b/clog-base.lisp
index 005fa8d..11752f9 100644
--- a/clog-base.lisp
+++ b/clog-base.lisp
@@ -19,7 +19,10 @@
:initarg :connection-id)
(html-id
:reader html-id
- :initarg :html-id))
+ :initarg :html-id)
+ (connection-data-mutex
+ :reader connection-data-mutex
+ :initform (bordeaux-threads:make-lock)))
(:documentation "CLOG objects (clog-obj) encapsulate the connection between
lisp and the HTML DOM element."))
@@ -37,6 +40,13 @@ lisp and the HTML DOM element."))
(defgeneric html-id (clog-obj)
(:documentation "Reader for html-id slot. (Private)"))
+;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; connection-data-mutex ;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defgeneric connection-data-mutex (clog-obj)
+ (:documentation "Preader for connection-data thread lock. (Private)"))
+
;;;;;;;;;;;;;;;;;;;
;; make-clog-obj ;;
;;;;;;;;;;;;;;;;;;;
@@ -161,8 +171,8 @@ result. (Private)"))
(list
:x (parse-integer (nth 0 f) :junk-allowed t)
:y (parse-integer (nth 1 f) :junk-allowed t)
- :screen-y (parse-integer (nth 2 f) :junk-allowed t)
- :screen-x (parse-integer (nth 3 f) :junk-allowed t)
+ :screen-x (parse-integer (nth 2 f) :junk-allowed t)
+ :screen-y (parse-integer (nth 3 f) :junk-allowed t)
:which-button (parse-integer (nth 4 f) :junk-allowed t)
:alt-key (js-true-p (nth 5 f))
:ctrl-key (js-true-p (nth 6 f))
@@ -313,9 +323,16 @@ are stored in this string based hash in the format of:
(:documentation "Set connection-data the item-name in hash."))
(defmethod set-connection-data-item ((obj clog-obj) item-name value)
- (setf (gethash item-name (connection-data obj)) value))
+ (bordeaux-threads:with-lock-held ((connection-data-mutex obj))
+ (setf (gethash item-name (connection-data obj)) value)))
(defsetf connection-data-item set-connection-data-item)
+(defgeneric remove-connection-data-item (clog-obj item-name)
+ (:documentation "Remove from connection-data the item-name in hash."))
+
+(defmethod remove-connection-data-item ((obj clog-obj) item-name)
+ (bordeaux-threads:with-lock-held ((connection-data-mutex obj))
+ (remhash item-name (connection-data obj))))
;;;;;;;;;;;;;;;;;;;
;; set-on-resize ;;
diff --git a/clog-element-common.lisp b/clog-element-common.lisp
index 3015ff5..e1f43d6 100644
--- a/clog-element-common.lisp
+++ b/clog-element-common.lisp
@@ -431,12 +431,12 @@ CLOG-OBJ"))
;; create-span ;;
;;;;;;;;;;;;;;;;;
-(defgeneric create-span (clog-obj &key content auto-place)
- (:documentation "Create a new CLOG-Span as child of CLOG-OBJ with :CONTENT
-(default \"\") and if :AUTO-PLACE (default t) place-inside-bottom-of
+(defgeneric create-span (clog-obj content &key auto-place)
+ (:documentation "Create a new CLOG-Span as child of CLOG-OBJ with CONTENT
+and if :AUTO-PLACE (default t) place-inside-bottom-of
CLOG-OBJ"))
-(defmethod create-span ((obj clog-obj) &key (content "") (auto-place t))
+(defmethod create-span ((obj clog-obj) content &key (auto-place t))
(create-child obj (format nil "~A" (escape-string content))
:clog-type 'clog-span :auto-place auto-place))
diff --git a/clog-element.lisp b/clog-element.lisp
index 7a7c59c..ea83c78 100644
--- a/clog-element.lisp
+++ b/clog-element.lisp
@@ -456,7 +456,7 @@ spell checking if Editable is also true."))
in pixels. It does not include the margin or padding."))
(defmethod client-left ((obj clog-element))
- (property obj "clientLeft"))
+ (parse-integer (property obj "clientLeft")))
;;;;;;;;;;;;;;;;
;; client-top ;;
@@ -467,7 +467,7 @@ in pixels. It does not include the margin or padding."))
in pixels. It does not include the margin or padding."))
(defmethod client-top ((obj clog-element))
- (property obj "clientTop"))
+ (parse-integer (property obj "clientTop")))
;;;;;;;;;;;;;;;;;;
;; client-width ;;
@@ -479,7 +479,7 @@ CSS width + CSS padding - width of vertical scrollbar (if present)
Does not include the border or margin."))
(defmethod client-width ((obj clog-element))
- (property obj "clientWidth"))
+ (parse-integer (property obj "clientWidth")))
;;;;;;;;;;;;;;;;;;;
;; client-height ;;
@@ -491,7 +491,7 @@ CSS height + CSS padding - height of horizontal scrollbar (if present)
Does not include the border or margin."))
(defmethod client-height ((obj clog-element))
- (property obj "clientHeight"))
+ (parse-integer (property obj "clientHeight")))
;;;;;;;;;;;;;;;;;
;; offset-left ;;
@@ -582,7 +582,7 @@ content has been scrolled upward."))
of an element or the width of the element itself, whichever is greater."))
(defmethod scroll-width ((obj clog-element))
- (property obj "scrollWidth"))
+ (parse-integer (property obj "scrollWidth")))
;;;;;;;;;;;;;;;;;;;
;; scroll-height ;;
@@ -593,7 +593,7 @@ of an element or the width of the element itself, whichever is greater."))
content not visible on the screen due to overflow."))
(defmethod scroll-height ((obj clog-element))
- (property obj "scrollHeight"))
+ (parse-integer (property obj "scrollHeight")))
;;;;;;;;;;;;;;
;; html-tag ;;
@@ -847,7 +847,7 @@ top and bottom are interpreted.
parent in the DOM."))
(defmethod position-top ((obj clog-element))
- (jquery-query obj "position().top"))
+ (parse-integer (jquery-query obj "position().top")))
;;;;;;;;;;;;;;;;;;;
;; position-left ;;
@@ -858,7 +858,7 @@ parent in the DOM."))
parent in the DOM."))
(defmethod position-left ((obj clog-element))
- (jquery-query obj "position().left"))
+ (parse-integer (jquery-query obj "position().left")))
;;;;;;;;;;;;;;;;
;; offset-top ;;
@@ -868,7 +868,7 @@ parent in the DOM."))
(:documentation "Position in pixels from top relative to the document."))
(defmethod offset-top ((obj clog-element))
- (jquery-query obj "offset().top"))
+ (parse-integer (jquery-query obj "offset().top")))
;;;;;;;;;;;;;;;;;
;; offset-left ;;
@@ -878,7 +878,7 @@ parent in the DOM."))
(:documentation "Position in pixels from left relative to the document."))
(defmethod offset-left ((obj clog-element))
- (jquery-query obj "offset().left"))
+ (parse-integer (jquery-query obj "offset().left")))
;;;;;;;;;;
;; left ;;
@@ -1070,7 +1070,7 @@ parent in the DOM."))
;; For reference:
;; | Margin | Border | Padding | Scroll | [Element] | Scroll | Padding ...
;;
-;; Height and Width of Element are in part of clog-base
+;; Height and Width of Element are in clog-base
;; All the following have the advantage of the CSS related size properties
;; in that the results are always pixels and numeric.
diff --git a/clog.asd b/clog.asd
index f95b647..0bce800 100644
--- a/clog.asd
+++ b/clog.asd
@@ -5,7 +5,7 @@
:author "David Botton "
:license "BSD"
- :version "0.0.2"
+ :version "0.0.3"
:serial t
:depends-on (#:clack #:websocket-driver #:alexandria #:hunchentoot #:cl-ppcre
#:bordeaux-threads #:trivial-open-browser
@@ -18,6 +18,7 @@
(:file "clog-base")
(:file "clog-element")
(:file "clog-element-common")
+ (:file "clog-form")
(:file "clog-window")
(:file "clog-document")
(:file "clog-location")
diff --git a/clog.lisp b/clog.lisp
index e87965c..3ee11d8 100644
--- a/clog.lisp
+++ b/clog.lisp
@@ -32,6 +32,7 @@ application."
(@clog-obj section)
(@clog-element section)
(@clog-element-common section)
+ (@clog-form section)
(@clog-body section)
(@clog-window section)
(@clog-document section)
@@ -65,9 +66,10 @@ application."
(blur generic-function)
"CLOG-Obj - Low Level"
- (connection-data generic-function)
- (connection-data-item generic-function)
- (validp generic-function)
+ (connection-data generic-function)
+ (connection-data-item generic-function)
+ (remove-connection-data-item generic-function)
+ (validp generic-function)
"CLOG-Obj - Event Handling"
(set-on-resize generic-function)
@@ -285,6 +287,11 @@ application."
(clog-span class)
(create-span generic-function))
+(defsection @clog-form (:title "CLOG Form Objects")
+ "CLOG-Form - Class for organizing Form Elements in to a From"
+ (clog-form class)
+ (create-form generic-function))
+
(defsection @clog-body (:title "CLOG Body Objects")
"CLOG-Body - CLOG Body Objects"
(clog-body class)
diff --git a/test/test-clog.lisp b/test/test-clog.lisp
index a48a39b..b4e9fc7 100644
--- a/test/test-clog.lisp
+++ b/test/test-clog.lisp
@@ -47,7 +47,7 @@
(create-div win :content "Hello World! p")
(create-div win :content "Hello World! div")
(create-br win)
- (create-span win :content "Hello World! span")
+ (create-span win "Hello World! span")
(create-hr win)
(create-a win :link "http://www.google.com" :content "Link" :target "new")
(setf (title (html-document win)) "CLOG Test App")
diff --git a/tutorial/08-tutorial.lisp b/tutorial/08-tutorial.lisp
index f8fd5d7..4ed83f2 100644
--- a/tutorial/08-tutorial.lisp
+++ b/tutorial/08-tutorial.lisp
@@ -40,14 +40,12 @@
(set-on-mouse-leave obj 'on-mouse-leave)))))
(defun on-mouse-move (obj data)
- (let* ((app (connection-data-item obj "app-data"))
- (x (getf data ':screen-x))
- (y (getf data ':screen-y))
- (new-x (- x (drag-x app)))
- (new-y (- y (drag-y app))))
+ (let* ((app (connection-data-item obj "app-data"))
+ (x (getf data ':screen-x))
+ (y (getf data ':screen-y)))
- (setf (top obj) (format nil "~Apx" new-y))
- (setf (left obj) (format nil "~Apx" new-x)))))
+ (setf (top obj) (format nil "~Apx" (- y (drag-y app))))
+ (setf (left obj) (format nil "~Apx" (- x (drag-x app)))))))
(defun on-mouse-leave (obj)
(let ((app (connection-data-item obj "app-data")))
@@ -68,8 +66,12 @@
(let* ((div1 (create-div body))
(div2 (create-div div1))
- (div3 (create-div div2)))
+ (div3 (create-div div2))
+ (dir (create-div div1 :content "Click and drag the boxes")))
+ (setf (positioning dir) :absolute)
+ (setf (bottom dir) 0)
+
(set-border div1 :medium :solid :blue)
(set-border div2 :thin :dotted :red)
(set-border div3 :thick :dashed :green)
@@ -91,7 +93,8 @@
(set-on-mouse-down div2 'on-mouse-down)
(setf (positioning div3) :absolute)
- (set-on-mouse-down div3 'on-mouse-down)))
+ (set-on-mouse-down div3 'on-mouse-down)
+ (create-span div3 "Hello world!")))
(defun start-tutorial ()
"Start turtorial."
diff --git a/tutorial/README.md b/tutorial/README.md
index fedefa6..9d757af 100644
--- a/tutorial/README.md
+++ b/tutorial/README.md
@@ -40,3 +40,4 @@ Tutorial Summary
- 05-tutorial.lisp - Using connection-data-item
- 06-tutorial.lisp - Tasking and events
- 07-tutorial.lisp - My first CLOG video game (and handling disconnects)
+- 08-tutorial.lisp - Mice Love Containers