Tutorial 21

clog-element.lisp

@@ -312,7 +312,8 @@ not relevant not just visually and will _also_ remove it from layout similar to
 setting display (None)."))
 
 (defmethod hiddenp ((obj clog-element))
-  (js-true-p (attribute obj "hidden")))
+  (unless (equalp (attribute obj "hidden") "undefined")
+    t))
 
 (defgeneric set-hiddenp (clog-element value)
   (:documentation "Set hiddenp VALUE for CLOG-ELEMENT"))
@@ -2124,11 +2125,10 @@ CLOG-ELEMENT."))
 (defgeneric first-child (clog-element)
   (:documentation "Traverse to first child element. If Child does not have an
 html id than Element_Type will have an ID of undefined and therefore attached
-to no actual HTML elemen."))
+to no actual HTML element."))
 
 (defmethod first-child ((obj clog-element))
-  (attach-as-child
-   obj (jquery-execute obj (format nil "children().first().attr('id');"))))
+  (attach-as-child obj (jquery-query obj "children().first().prop('id');")))
 
 ;;;;;;;;;;;;;;;;;;
 ;; next-sibling ;;
@@ -2140,7 +2140,7 @@ html id than Element_Type will have an ID of undefined and therefore attached
 to no actual HTML elemen."))
 
 (defmethod next-sibling ((obj clog-element))
-  (attach-as-child obj (jquery-execute obj (format nil "next().attr('id');"))))
+  (attach-as-child obj (jquery-query obj "next().prop('id');")))
 
 ;;;;;;;;;;;;;;;;;;;;;;
 ;; previous-sibling ;;
@@ -2152,4 +2152,4 @@ html id than Element_Type will have an ID of undefined and therefore attached
 to no actual HTML elemen."))
 
 (defmethod previous-sibling ((obj clog-element))
-  (attach-as-child obj (jquery-execute obj (format nil "previous().attr('id');"))))
+  (attach-as-child obj (jquery-query obj "previous().prop('id');")))

tutorial/21-tutorial.lisp

@@ -0,0 +1,58 @@
+;;;; It this tutorial we will create a Common Lisp CLOG version of the
+;;;; plugin from the previous two tutorials.
+
+;;; First we will create a package for our component
+(defpackage #:clog-drop-list
+  (:use #:cl #:clog)
+  (:export clog-drop-list
+	   create-drop-list
+	   drop-root))
+
+(in-package :clog-drop-list)
+
+(defclass clog-drop-list (clog-unordered-list)
+  ((drop-root :accessor drop-root))
+  (:documentation "CLOG Drop List object - a collapsable list component"))
+
+(defgeneric drop-root (clog-drop-list)
+  (:documentation "Accessor for the drop list root, create clog-list-items
+on the drop-root."))
+  
+(defgeneric create-drop-list (clog-obj &key content class html-id auto-place)
+  (:documentation "Create a toggler with CONTENT as the top of tree."))
+
+(defmethod create-drop-list ((obj clog-obj) &key (content "")
+					      (class nil)
+			                      (html-id nil)
+					      (auto-place t))
+  (let* ((new-obj (create-unordered-list obj :class class
+					     :html-id html-id
+					     :auto-place auto-place))
+	 (header  (create-list-item new-obj :content content)))    
+    (change-class new-obj 'clog-drop-list)
+    (setf (drop-root new-obj) (create-unordered-list header))
+    (set-on-click header
+		  (lambda (obj)
+		    (if (hiddenp (drop-root new-obj))
+			(setf (hiddenp (drop-root new-obj)) nil)
+			(setf (hiddenp (drop-root new-obj)) t))))
+    new-obj))
+
+(defpackage #:clog-user
+  (:use #:cl #:clog)
+  (:export start-tutorial))
+
+(in-package :clog-user)
+
+(defun on-new-window (body)
+  (let* ((drop-list  (clog-drop-list:create-drop-list body :content "Top of tree"))
+	 (item (create-list-item (clog-drop-list:drop-root drop-list) :content "Item 1"))
+	 (item (create-list-item (clog-drop-list:drop-root drop-list) :content "Item 2"))
+	 (item (create-list-item (clog-drop-list:drop-root drop-list) :content "Item 3"))
+	 (item (create-list-item (clog-drop-list:drop-root drop-list) :content "Item 4"))))
+  (run body))
+
+(defun start-tutorial ()
+  "Start turtorial."
+  (initialize #'on-new-window)
+  (open-browser))