mirror of
https://github.com/rabbibotton/clog.git
synced 2025-12-06 02:30:42 -08:00
Additions to tutorial 8
This commit is contained in:
David Botton
parent
5d41a2131a
commit
893a140e01
9 changed files with 62 additions and 35 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ;;
|
||||
|
|
|
|||
|
|
@ -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 "<span>~A</span>" (escape-string content))
|
||||
:clog-type 'clog-span :auto-place auto-place))
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
3
clog.asd
3
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")
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -67,6 +68,7 @@ application."
|
|||
"CLOG-Obj - Low Level"
|
||||
(connection-data generic-function)
|
||||
(connection-data-item generic-function)
|
||||
(remove-connection-data-item generic-function)
|
||||
(validp generic-function)
|
||||
|
||||
"CLOG-Obj - Event Handling"
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -42,12 +42,10 @@
|
|||
(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))))
|
||||
(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,7 +66,11 @@
|
|||
|
||||
(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)
|
||||
|
|
@ -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."
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue