mirrors/clog
1
Fork 0
mirror of https://github.com/rabbibotton/clog.git synced 2025-12-06 10:40:45 -08:00
Code Issues Projects Releases Wiki Activity

Additions to tutorial 8

Browse source
This commit is contained in:
David Botton 2021-01-11 01:50:32 -05:00
parent 5d41a2131a
commit 893a140e01
9 changed files with 62 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -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

25
clog-base.lisp
View file

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

8
clog-element-common.lisp
View file

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

22
clog-element.lisp
View file

@ -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
View file

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

13
clog.lisp
View file

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

2
test/test-clog.lisp
View file

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

21
tutorial/08-tutorial.lisp
View file

@ -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 "<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."

1
tutorial/README.md
View file

@ -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