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