Additions to tutorial 8

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
 

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 2 f) :junk-allowed t)
-     :screen-x     (parse-integer (nth 3 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 ;;

clog-element-common.lisp

@@ -431,12 +431,12 @@ CLOG-OBJ"))
 ;; create-span ;;
 ;;;;;;;;;;;;;;;;;
 
-(defgeneric create-span (clog-obj &key content auto-place)
+(defgeneric create-span (clog-obj content &key auto-place)
-  (:documentation "Create a new CLOG-Span as child of CLOG-OBJ with :CONTENT
+  (:documentation "Create a new CLOG-Span as child of CLOG-OBJ with CONTENT
-(default \"\") and if :AUTO-PLACE (default t) place-inside-bottom-of
+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 "<span>~A</span>" (escape-string content))
 		:clog-type 'clog-span :auto-place auto-place))
 

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.
 

clog.asd

@@ -5,7 +5,7 @@
 
   :author "David Botton <david@botton.com>"
   :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")

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             generic-function)
-  (connection-data-item generic-function)
+  (connection-data-item        generic-function)
-  (validp               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)

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

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"))
+  (let* ((app (connection-data-item obj "app-data"))
-	 (x      (getf data ':screen-x))
+	 (x   (getf data ':screen-x))
-	 (y      (getf data ':screen-y))
+	 (y   (getf data ':screen-y)))
-	 (new-x  (- x (drag-x app)))
-	 (new-y  (- y (drag-y app))))
     
-    (setf (top obj) (format nil "~Apx" new-y))
+    (setf (top obj) (format nil "~Apx" (- y (drag-y app))))
-    (setf (left obj) (format nil "~Apx" new-x)))))
+    (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 "<b>Click and drag the boxes</b>")))
 
+    (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."

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