diff --git a/clog-base.lisp b/clog-base.lisp index 11752f9..db03f30 100644 --- a/clog-base.lisp +++ b/clog-base.lisp @@ -283,7 +283,7 @@ result. (Private)")) (defgeneric blur (clog-obj) (:documentation "Remove focus from CLOG-OBJ")) -(defmethod focus ((obj clog-obj)) +(defmethod blur ((obj clog-obj)) (jquery-execute obj "blur()")) ;;;;;;;;;;;; diff --git a/clog-element.lisp b/clog-element.lisp index ea83c78..75f6f06 100644 --- a/clog-element.lisp +++ b/clog-element.lisp @@ -255,7 +255,7 @@ content editable, even non-form types in most browsers.")) (defmethod set-editablep ((obj clog-element) value) (setf (property obj "contentEditable") (p-true-js value))) -(defsetf editablep set-editable) +(defsetf editablep set-editablep) ;;;;;;;;;;;;;;;; ;; draggablep ;; @@ -294,7 +294,9 @@ setting display (None).")) (:documentation "Set hiddenp VALUE for CLOG-ELEMENT")) (defmethod set-hiddenp ((obj clog-element) value) - (setf (property obj "hidden") (p-true-js value))) + (if value + (setf (property obj "hidden") t) + (jquery-execute obj "removeAttr('hidden')"))) (defsetf hiddenp set-hiddenp) ;;;;;;;;;;;;;; diff --git a/tutorial/09-tutorial.lisp b/tutorial/09-tutorial.lisp new file mode 100644 index 0000000..09e3428 --- /dev/null +++ b/tutorial/09-tutorial.lisp @@ -0,0 +1,53 @@ +(defpackage #:clog-user + (:use #:cl #:clog) + (:export start-tutorial)) + +(in-package :clog-user) + +(defun on-new-window (body) + (let* ((t1 (create-button body :content "Tab1")) + (t2 (create-button body :content "Tab2")) + (t3 (create-button body :content "Tab3")) + (p1 (create-div body :content "Panel1 - Type here")) + (p2 (create-div body :content "Panel2 - Type here")) + (p3 (create-div body :content "Panel3 - Type here"))) + + (place-after t3 (create-br body)) + + (setf (width p1) 600) + (setf (width p2) 600) + (setf (width p3) 600) + + (setf (height p1) 300) + (setf (height p2) 300) + (setf (height p3) 300) + + (set-border p1 :thin :solid :black) + (set-border p2 :thin :solid :black) + (set-border p3 :thin :solid :black) + + (setf (editablep p1) t) + (setf (editablep p2) t) + (setf (editablep p3) t) + + (flet ((select-tab (obj) + (setf (hiddenp p1) t) + (setf (hiddenp p2) t) + (setf (hiddenp p3) t) + (setf (hiddenp obj) nil) + (focus obj))) + + (select-tab p1) + + (set-on-click t1 (lambda (obj) + (select-tab p1))) + (set-on-click t2 (lambda (obj) + (select-tab p2))) + (set-on-click t3 (lambda (obj) + (select-tab p3)))))) + +(defun start-tutorial () + "Start turtorial." + + (initialize #'on-new-window) + (open-browser)) diff --git a/tutorial/README.md b/tutorial/README.md index 9d757af..ead4ecb 100644 --- a/tutorial/README.md +++ b/tutorial/README.md @@ -41,3 +41,4 @@ Tutorial Summary - 06-tutorial.lisp - Tasking and events - 07-tutorial.lisp - My first CLOG video game (and handling disconnects) - 08-tutorial.lisp - Mice Love Containers +- 09-tutorial.lisp - Tabs and hidden pannels