style

clog-system.lisp

@@ -93,3 +93,11 @@ function. If BOOT-FILE is nil path is removed."
   (clrhash *url-to-on-new-window*)
   (setf *clog-running* nil)
   (cc:shutdown-clog))
+
+;;;;;;;;;;;;;;;;
+;; debug-mode ;;
+;;;;;;;;;;;;;;;;
+
+(defun debug-mode (obj)
+  "Turn on browser console debugging for OBJ's connection."
+  (cc:debug-mode (connection-id obj)))

clog.lisp

@@ -51,7 +51,8 @@ embedded in a native template application.)"
   "CLOG Startup and Shutdown"
   (initialize        function)
   (set-on-new-window function)
-  (shutdown          function))
+  (shutdown          function)
+  (debug-mode        function))
 
 (defsection @clog-utilities (:title "CLOG Utilities")
   "CLOG utilities"

tutorial/09-tutorial.lisp

@@ -11,7 +11,7 @@
 	 ;;       compiler can mark those for garbage collection early
 	 ;;       this not an issue as the element is created already
 	 ;;       in the browser window.
-	 
+	 ;;
 	 ;; Create tabs and panels
 	 (t1  (create-button body :content "Tab1"))
 	 (t2  (create-button body :content "Tab2"))
@@ -20,7 +20,6 @@
 	 (p1  (create-div body))
 	 (p2  (create-div body))
 	 (p3  (create-div body :content "Panel3 - Type here"))
-
 	 ;; Create form for panel 1
 	 (f1  (create-form p1))
 	 (fe1 (create-form-element f1 :text
@@ -31,7 +30,6 @@
 	 (tmp (create-br f1))
 	 (tmp (create-form-element f1 :submit :value "OK"))
 	 (tmp (create-form-element f1 :reset :value "Start Again"))
-
 	 ;; Create for for panel 2
 	 (f2  (create-form p2))
 	 (fs2 (create-fieldset f2 :legend "Stuff"))
@@ -49,8 +47,7 @@
 	 (tmp (create-label fs2 :content "There" :label-for ck2))
 	 (tmp (create-br fs2))	 
 	 (sl1 (create-select fs2 :label (create-label fs2 :content "Pick one:")))
-	 (sl2 (create-select fs2 :label (create-label fs2 :content "Pick one:")))
+	 (sl2 (create-select fs2 :label (create-label fs2 :content "Pick one:")))	 
-	 
 	 (sl3 (create-select fs2 :multiple t
 			     :label (create-label fs2 :content "Pick some:")))
 	 (o1  (create-option sl3 :content "one"))
@@ -61,50 +58,41 @@
 	 (o5  (create-option og1 :content "five"))
 	 (tmp (create-form-element f2 :submit :value "OK"))
 	 (tmp (create-form-element f2 :reset :value "Start Again")))
-
-    ;; Panel 1 contents
     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-    
+    ;; Panel 1 contents
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;    
     (setf (place-holder fe1) "type here..")
     (setf (requiredp fe1) t)
-    (setf (size fe1) 60)
+    (setf (size fe1) 60)    
-
     (make-data-list fe1 '("Cool Title"
 			  "Not So Cool Title"
-			  "Why Not, Another Title"))
+			  "Why Not, Another Title"))    
-    
     (make-data-list fe2 '("#ffffff"
 			  "#ff0000"
 			  "#00ff00"
 			  "#0000ff"
-			  "#ff00ff"))
+			  "#ff00ff"))    
-    
     (set-on-submit f1
 		   (lambda (obj)
 		     (setf (title (html-document body)) (value fe1))
 		     (setf (background-color p1) (value fe2))
 		     (setf (hiddenp f1) t)
 		     (create-span p1 :content
-				  "<br><b>Your form has been submitted</b>")))
+				  "<br><b>Your form has been submitted</b>")))    
-    
     (setf (width p1) "100%")
     (setf (width p2) "100%")
-    (setf (width p3) "100%")
+    (setf (width p3) "100%")    
-    
     (setf (height p1) 400)
     (setf (height p2) 400)
     (setf (height p3) 400)
-
     (set-border p1 :thin :solid :black)
     (set-border p2 :thin :solid :black)
     (set-border p3 :thin :solid :black)
-
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
     ;; Panel 2 contents
     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
     (setf (vertical-align ta1) :top)
     (disable-resize ta1)
-
     (setf (vertical-align sl1) :top)
     (setf (vertical-align sl2) :top)
     (setf (vertical-align sl3) :top)
@@ -114,13 +102,11 @@
 			      "three"
 			      "four"
 			      "five"))
-
     (add-select-options sl2 '("one"
 			      "two"
 			      "three"
 			      "four"
 			      "five"))
-
     (set-on-change sl3 (lambda (obj)
 			 (when (selectedp o5)
 			   (alert (window body) "Selected 5"))))
@@ -134,31 +120,25 @@
 			       (value sl1)
 			       (value sl2)
 			       (selectedp o2)))))
-
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
     ;; Panel 3 contents
     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
     (setf (editablep p3) t)
-
+    ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
     ;; Tab functionality
     ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-
     (flet ((select-tab (obj)
 	     (setf (hiddenp p1) t)
 	     (setf (hiddenp p2) t)
 	     (setf (hiddenp p3) t)
-
 	     (setf (background-color t1) :lightgrey)
 	     (setf (background-color t2) :lightgrey)
-	     (setf (background-color t3) :lightgrey)
+	     (setf (background-color t3) :lightgrey)	     
-	     
 	     (setf (background-color last-tab) :lightblue)
 	     (setf (hiddenp obj) nil)
 	     (focus obj)))
-
       (setf last-tab t1)
-      (select-tab p1)
+      (select-tab p1)      
-      
       (set-on-click t1 (lambda (obj)
 			 (setf last-tab obj)
 			 (select-tab p1)))
@@ -172,6 +152,5 @@
 
 (defun start-tutorial ()
   "Start turtorial."
-
   (initialize #'on-new-window)
   (open-browser))

tutorial/10-tutorial.lisp

@@ -7,26 +7,20 @@
 (defun on-new-window (body)
   (let* ((canvas (create-canvas body :width 600 :height 400))
 	 (cx     (create-context2d canvas)))
-
+    (set-border canvas :thin :solid :black)    
-    (set-border canvas :thin :solid :black)
-    
     (fill-style cx :green)
     (fill-rect cx 10 10 150 100)
-
     (fill-style cx :blue)
     (font-style cx "bold 24px serif")
     (fill-text cx "Hello World" 10 150)
-
     (fill-style cx :red)
     (begin-path cx)
     (ellipse cx 200 200 50 7 0.78 0 6.29)
     (path-stroke cx)
     (path-fill cx)
-    
     (run body)))
 
 (defun start-tutorial ()
   "Start turtorial."
-
   (initialize #'on-new-window)
   (open-browser))

tutorial/11-tutorial.lisp

@@ -1,32 +1,31 @@
-;; Creating code GUIs from scratch is great, but in the real world often design
+;;; Creating code GUIs from scratch is great, but in the real world often design
-;; is left to artists and code is left to engineers. CLOG is an amazign solution
+;;; is left to artists and code is left to engineers. CLOG is an amazign solution
-;; for that model of app development. Any existing web page can be come a CLOG
+;;; for that model of app development. Any existing web page can be come a CLOG
-;; app by simply adding the following two lines to an existing HTML file:
+;;; app by simply adding the following two lines to an existing HTML file:
-;;
+;;;
-;;      <script src="/js/jquery.min.js" type="text/javascript"></script>
+;;;      <script src="/js/jquery.min.js" type="text/javascript"></script>
-;;      <script src="/js/boot.js" type="text/javascript"></script>
+;;;      <script src="/js/boot.js" type="text/javascript"></script>
-;;
+;;;
-;; The first line adds jquery which CLOG uses to enhance browser compatability.
+;;; The first line adds jquery which CLOG uses to enhance browser compatability.
-;; The second line add the "boot" file.
+;;; The second line add the "boot" file.
-;;
+;;;
-;; For this tutorial we  generated the clog/static-files/tutorial/tut-11.html
+;;; For this tutorial we  generated the clog/static-files/tutorial/tut-11.html
-;; by using the form generator at https://bootsnipp.com/forms?version=3
+;;; by using the form generator at https://bootsnipp.com/forms?version=3
-;; then used the the template from https://getbootstrap.com/docs/3.3/
+;;; then used the the template from https://getbootstrap.com/docs/3.3/
-;; and added CLOG's boot.js script line. It was neccesary to add an id to the
+;;; and added CLOG's boot.js script line. It was neccesary to add an id to the
-;; form (id='form1') as the generator did not add one.
+;;; form (id='form1') as the generator did not add one.
-;;
+;;;
-;;  - We set a blank on-submit to overide the behavior in the bootstrap
+;;;  - We set a blank on-submit to overide the behavior in the bootstrap
-;;          buttons to submit the from HTML style.
+;;;          buttons to submit the from HTML style.
-;;  - We are going to attach to the "Good Button" an on-click handler
+;;;  - We are going to attach to the "Good Button" an on-click handler
-;;          to handle getting the values
+;;;          to handle getting the values
-;;  - We attach to each control in the on-click handler that we want
+;;;  - We attach to each control in the on-click handler that we want
-;;          value for and query them
+;;;          value for and query them
-;;  - We attach an on-click handler that resets the form to the
+;;;  - We attach an on-click handler that resets the form to the
-;;          "Scary Button"
+;;;          "Scary Button"
-;;
+;;;
-;;  - We go in the browser to the file
+;;;  - We go in the browser to the file
-;;               "http://127.0.0.1:8080/tutorial/tut-11.html"
+;;;               "http://127.0.0.1:8080/tutorial/tut-11.html"
-
 
 (defpackage #:clog-user
   (:use #:cl #:clog)
@@ -35,22 +34,19 @@
 (in-package :clog-user)
 
 (defun on-new-window (body)
-  (clog-connection:debug-mode (clog::connection-id body))
+  ;; This will turn on debug output in the browser console.
-    
+  (debug-mode body)
+  ;; Setup form
   (let* ((form         (attach-as-child body "form1" :clog-type 'clog-form))
 	 (good-button  (attach-as-child body "button1id"))
 	 (scary-button (attach-as-child body "button2id")))
-
     (flet ((on-click-good (obj)
 	     (let ((alert-div (create-div body)))
-
 	       (place-before form alert-div)
 	       (setf (hiddenp form) t)
-
 	       ;; Bootstrap specific markup
 	       (setf (css-class-name alert-div) "alert alert-success")
 	       (setf (attribute alert-div "role") "alert")
-
 	       ;; We collect the data from the hidden form elements
 	       ;; using radio-value and name-value (for other types if
 	       ;; input other than radio buttons) or we could bind each
@@ -62,20 +58,15 @@
                            <pre>textinput value : ~A</pre><br>"
 			     (radio-value form "radios")
 			     (name-value form "textinput")))))
-
 	   (on-click-scary (obj)
 	     (reset form)))
-
     ;; We need to overide the boostrap default to submit the form html style
     (set-on-submit form (lambda (obj)()))
-
     (set-on-click good-button #'on-click-good)
     (set-on-click scary-button #'on-click-scary))
-  
     (run body)))
 
 (defun start-tutorial ()
   "Start turtorial."
-
   (initialize #'on-new-window)
   (open-browser :url "http://127.0.0.1:8080/tutorial/tut-11.html"))

tutorial/12-tutorial.lisp

@@ -1,21 +1,21 @@
-;; CLOG is an excellent choice for websites as well as GUI's for applications.
+;;; CLOG is an excellent choice for websites as well as GUI's for applications.
-;; The first 10 tutorials focused on a single "page" application. For GUIs
+;;; The first 10 tutorials focused on a single "page" application. For GUIs
-;; that works well and combining you CLOG app embedded in an native app that
+;;; that works well and combining you CLOG app embedded in an native app that
-;; provides a web control on desktop or mobile works well. CLOG apps of course
+;;; provides a web control on desktop or mobile works well. CLOG apps of course
-;; are web apps right out of the box. However CLOG is also more then capable
+;;; are web apps right out of the box. However CLOG is also more then capable
-;; of handling things in a more traditional website manor.
+;;; of handling things in a more traditional website manor.
-;;
+;;;
-;; In the last tutorial it was demonstrated that one can take any HTML file
+;;; In the last tutorial it was demonstrated that one can take any HTML file
-;; add the boot.js file to it and then it becomes a dynamic interactive
+;;; add the boot.js file to it and then it becomes a dynamic interactive
-;; clog app. An entire site could be laid out using .html files and where
+;;; clog app. An entire site could be laid out using .html files and where
-;; desired a full dynamic page can be created by copying the boot.html file
+;;; desired a full dynamic page can be created by copying the boot.html file
-;; or some styled html template etc. (Look in the demos -coming soon- for
+;;; or some styled html template etc. (Look in the demos -coming soon- for
-;; examples using templates like bootstrap with CLOG, etc).
+;;; examples using templates like bootstrap with CLOG, etc).
-;;
+;;;
-;; Here we demonstrate CLOG's routing to dynamic pages. Static pages are
+;;; Here we demonstrate CLOG's routing to dynamic pages. Static pages are
-;; placed in the directory set on initialization.
+;;; placed in the directory set on initialization.
-;;
+;;;
-;; See START-TUTORIAL below.
+;;; See START-TUTORIAL below.
 
 (defpackage #:clog-user
   (:use #:cl #:clog)
@@ -24,7 +24,6 @@
 (in-package :clog-user)
 
 (defun on-main (body)
-
   (create-div body :content
      "We are in on-main<br><br>
       <h1>Pick a link</h1>
@@ -36,20 +35,15 @@
         <li><a href='/tutorial/tut-11.html'>/tutorial/tut-11.html</a> - an html file using boot.js
         <li><a href='/tutorial/regular-file.html'>'/tutorial/regular-file.html</a> - a regular html file
      </ul>")
-  
   (run body))
 
 (defun on-page1 (body)
-
   (create-div body :content "You are in on-page1")
-  
   (run body))
 
 (defun on-page2 (body)
-
   (create-div body :content "You are in on-page2")
   (log-console (window body) "A message in the browser's log")
-  
   (run body))
 
 (defun on-default (body)
@@ -61,68 +55,51 @@
 	 (run body))))
 
 (defun on-tutorial11 (body)
-  (clog-connection:debug-mode (clog::connection-id body))
-    
   (let* ((form         (attach-as-child body "form1" :clog-type 'clog-form))
 	 (good-button  (attach-as-child body "button1id"))
 	 (scary-button (attach-as-child body "button2id")))
-
     (flet ((on-click-good (obj)
 	     (let ((alert-div (create-div body)))
-
 	       (place-before form alert-div)
 	       (setf (hiddenp form) t)
-
 	       ;; Bootstrap specific markup
 	       (setf (css-class-name alert-div) "alert alert-success")
 	       (setf (attribute alert-div "role") "alert")
-	       
 	       (setf (inner-html alert-div)
 		     (format nil "<pre>radios value : ~A</pre><br>
                            <pre>textinput value : ~A</pre><br>"
 			     (radio-value form "radios")
 			     (name-value form "textinput")))))
-
 	   (on-click-scary (obj)
 	     (reset form)))
-
     ;; We need to overide the boostrap default to submit the form html style
     (set-on-submit form (lambda (obj)()))
-
     (set-on-click good-button #'on-click-good)
     (set-on-click scary-button #'on-click-scary))
-  
     (run body)))
 
 (defun start-tutorial ()
   "Start turtorial."
-
   (initialize #'on-main)
-
   ;; Navigating to http://127.0.0.1:8080/page1 executes on-page1
   (set-on-new-window #'on-page1 :path "/page1")
-
   ;; Navigating to http://127.0.0.1:8080/page1.html executes on-page1
   ;; There is no .html file - it is just a route to CLOG handler
   ;; but the user thinks it is like any other html file.
   (set-on-new-window #'on-page1 :path "/page1.html")
-
   ;; Here we add another page, page2. But uses a boot file that turns
   ;; on debugging to the browser console of communications with the
   ;; server.
   (set-on-new-window #'on-page2 :path "/page2" :boot-file "/debug.html")
-
   ;; Here we add another page, page3. But this time we use the html file
   ;; from tutorial 11 and make it the boot-file and excute the same code
   ;; in (on-tutorial11) as in tutorial 11.
   (set-on-new-window #'on-tutorial11 :path "/page3"
 				     :boot-file "/tutorial/tut-11.html")
-
   ;; Setting a "default" path says that any use of an included boot.js
   ;; file will route to this function, in this case #'on-default
   ;; that will determine if this is coming from the path used in tutorial
   ;; 11 - "http://127.0.0.1:8080/tutorial/tut-11.html" and if does
   ;; use on-tutorial11 and if not say "No Dice!"
   (set-on-new-window #'on-default :path "default")
-  
   (open-browser))

tutorial/13-tutorial.lisp

@@ -6,7 +6,6 @@
 
 (defun start-tutorial ()
   "Start turtorial."
-
   (format t "Tutorial 13 is a how to on building your own clog appliction.~%~
              Copy the directory - ~A~%~
              to your ~~/common-lisp directory or other asdf / quicklisp~%~

tutorial/13-tutorial/hello-clog/hello-clog.lisp

@@ -6,10 +6,8 @@
 
 (defun on-new-window (body)
   (create-div body :content "Hello World!")
-  
   (run body))
 
 (defun start-app ()
-
   (initialize #'on-new-window :static-root #P"www/")
   (open-browser))

tutorial/14-tutorial.lisp

@@ -10,13 +10,11 @@
 		  (setf (storage-element (window body) :local "my-local-key")
 			(get-universal-time))
 		  (reload (location body))))
-  
   (set-on-click (create-button body :content "Set Session Key")
 		(lambda (obj)
 		  (setf (storage-element (window body) :session "my-session-key")
 			(get-universal-time))
 		  (reload (location body))))
-
   (set-on-storage (window body)
 		  (lambda (obj data)
 		    (create-div body :content
@@ -24,8 +22,6 @@
 				    (getf data ':key)
 				    (getf data ':old-value)
 				    (getf data ':value)))))
-				     
-  
   (create-div body :content (format nil
        "<H1>Local Storage vs Session Storage</H1>
 <p width=500>
@@ -46,11 +42,9 @@ Changes made to a local key will fire an event and print below:<br>"
        (storage-element (window body) :local "my-local-key")
        "my-session-key"
        (storage-element (window body) :session "my-session-key")))
-  
   (run body))
 
 (defun start-tutorial ()
   "Start turtorial."
-
   (initialize #'on-new-window)
   (open-browser))

tutorial/15-tutorial.lisp

@@ -5,7 +5,6 @@
 (in-package :clog-user)
 
 (defun on-new-window (body)
-
   (let* ((vid (create-video body :source "https://www.w3schools.com/html/mov_bbb.mp4"))
 	 (tmp (create-br body))
 	 (vpl (create-button body :content ">"))
@@ -18,19 +17,15 @@
 	 (ast (create-button body :content "||"))
 	 (alc (create-form-element body :input))
 	 (tmp (create-hr body)))
-
     (set-on-click vpl (lambda (obj)(play-media vid)))
     (set-on-click apl (lambda (obj)(play-media aud)))
     (set-on-click vst (lambda (obj)(pause-media vid)))
     (set-on-click ast (lambda (obj)(pause-media aud)))
-
     (set-on-time-update vid (lambda (obj)(setf (value vlc) (media-position vid))))
     (set-on-time-update aud (lambda (obj)(setf (value alc) (media-position aud))))
-    
   (run body)))
 
 (defun start-tutorial ()
   "Start turtorial."
-
   (initialize #'on-new-window)
   (open-browser))

tutorial/16-tutorial.lisp

@@ -4,8 +4,8 @@
 
 (in-package :clog-user)
 
-;; In previous tutorials we attached to an html file using bootstrap. For this tutorial we
+;;; In previous tutorials we attached to an html file using bootstrap. For this tutorial we
-;; are going to create a bootstrap 4.0 page just using CLOG.
+;;; are going to create a bootstrap 4.0 page just using CLOG.
 
 (defun on-index (body)
   (load-css (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css")
@@ -13,46 +13,42 @@
   ;; the generic boot.html
   (load-script (html-document body) "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js")
   (load-script (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js")
-
+  ;; Root page setup
   (setf (title (html-document body)) "Hello Boostrap")
-  
   (let* ((nav   (create-section body :nav :class "nav"))
+	 ;; Nav Bar
 	 (l1    (create-a nav :content "link1" :class "nav-link"))
 	 (l2    (create-a nav :content "link2" :class "nav-link"))
 	 (l3    (create-a nav :content "link3" :class "nav-link"))
 	 (l4    (create-a nav :content "link3" :class "nav-link" :link "/page2"))
-
+	 ;; Jumbotron message
 	 (jumbo (create-div body :class "jumbotron text-center"))
 	 (jname (create-section jumbo :h1 :content "My First Bootstrap Page"))
 	 (tmp   (create-p jumbo :content "Resize this responsive page to see the effect!"))
-
+	 ;; Container for three colomns pf text
 	 (container (create-div body :class "container"))
 	 (row       (create-div container :class "row"))
-
+	 ;; Column 1
 	 (col1 (create-div row :class "col-sm-4"))
 	 (tmp  (create-section col1 :h3 :content "Column 1"))
 	 (tmp  (create-p col1 :content "Lorem ipsum dolor.."))
-	 
+	 ;; Column 2
 	 (col2 (create-div row :class "col-sm-4"))
 	 (tmp  (create-section col2 :h3 :content "Column 2"))
 	 (tmp  (create-p col2 :content "Lorem ipsum dolor.."))
-
+	 ;; Column 3
 	 (col3 (create-div row :class "col-sm-4"))
 	 (tmp  (create-section col3 :h3 :content "Column 3"))
 	 (tmp  (create-p col3 :content "Lorem ipsum dolor..")))
-
+    (set-on-click l1 (lambda (obj)(alert (window body) "Clicked link1")))    
-    (set-on-click l1 (lambda (obj)(alert (window body) "Clicked link1")))
-    
     (set-on-click l2 (lambda (obj)
 		       (let* ((alert (create-div body :class "alert alert-warning alert-dismissible fade show"))
 			      (tmp   (create-phrase alert :strong :content "Wow! You clicked link 2"))
 			      (btn   (create-button alert :class "close" :content "<span>&times;</span>")))
 			 (setf (attribute alert "role") "alert")
 			 (setf (attribute btn "data-dismiss") "alert")
-			 (place-after nav alert))))
+			 (place-after nav alert))))    
-    
+    (set-on-click l3 (lambda (obj)(setf (color jname) (rgb 128 128 0)))))    
-    (set-on-click l3 (lambda (obj)(setf (color jname) (rgb 128 128 0)))))
-    
   (run body))
 
 (defun on-page2 (body)
@@ -60,23 +56,21 @@
   (load-css (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css")
   (load-script (html-document body) "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js")
   (load-script (html-document body) "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js")
-
+  ;; Setup page2
   (setf (title (html-document body)) "Hello Boostrap - page2")
-
   (let* ((nav   (create-section body :nav :class "nav"))
+	 ;; Nav Bar
 	 (l1    (create-a nav :content "link1" :class "nav-link"))
 	 (l2    (create-a nav :content "link2" :class "nav-link"))
 	 (l3    (create-a nav :content "link3" :class "nav-link"))
 	 (l4    (create-a nav :content "page1" :class "nav-link" :link "/"))
-
+	 ;; Jumbotron
 	 (jumbo (create-div body :class "jumbotron text-center"))
 	 (jname (create-section jumbo :h1 :content "You found Page2"))))
-
   (run body))
 
 (defun start-tutorial ()
   "Start turtorial."
-
   (initialize #'on-index)
   (set-on-new-window #'on-page2 :path "/page2")
   (open-browser))

tutorial/17-tutorial.lisp

@@ -4,20 +4,20 @@
 
 (in-package :clog-user)
 
-;; In this tutorial we will use a CSS only alternative to bootsrap -
+;;; In this tutorial we will use a CSS only alternative to bootsrap -
-;;   https://www.w3schools.com/w3css/default.asp
+;;;   https://www.w3schools.com/w3css/default.asp
 
 (defun on-index (body)
+  ;; Load css files
   (load-css (html-document body) "https://www.w3schools.com/w3css/4/w3.css")
   (load-css (html-document body) "https://www.w3schools.com/lib/w3-theme-teal.css")
+  ;; Setup page
   (setf (title (html-document body)) "Hello W3.CSS")
-  
   (let* ((header (create-section body :header :class "w3-container w3-card w3-theme"))
 	 (tmp    (create-section header :h1 :content "Explore Forms"))
-
+	 ;; Main area of page
 	 (data-area (create-div body :class "w3-container"))
 	 (tmp (create-hr data-area))
-	 
 	 ;; This is a traditional "post" form that will submit data
 	 ;; to a server.
 	 (fcontainer (create-div data-area :class "w3-container"))
@@ -28,9 +28,7 @@
 					  (create-label form1 :content "Enter name:")))
 	 (fsubmit    (create-form-element form1 :submit))
 	 (tmp        (create-br fcontainer))
-
 	 (tmp (create-hr data-area))
-
 	 ;; This is a traditional "get" form that will submit data
 	 ;; to a server.
 	 (fcontainer (create-div data-area :class "w3-container"))
@@ -41,9 +39,7 @@
 					  (create-label form2 :content "Enter name:")))
 	 (fsubmit    (create-form-element form2 :submit))
 	 (tmp        (create-br fcontainer))
-
 	 (tmp (create-hr data-area))
-
 	 ;; This is a CLOG style form, instead of submitting data
 	 ;; to another page it is dealt with in place.
 	 (fcontainer (create-div data-area :class "w3-container"))
@@ -54,21 +50,18 @@
 					  (create-label form3 :content "Enter name:")))
 	 (fsubmit3   (create-form-element form3 :submit))
 	 (tmp        (create-br fcontainer))
-
 	 (tmp (create-hr data-area))
-	 
 	 (footer (create-section body :footer :class "w3-container w3-theme"))
 	 (tmp    (create-section footer :p :content "(c) All's well that ends well")))
 
     (set-on-click fsubmit3
-		  (lambda (obj)
+      (lambda (obj)
-		    (setf (hiddenp data-area) t)
+	(setf (hiddenp data-area) t)
-		    (place-before footer
+	(place-before footer
-				  (create-div body
+		      (create-div body
-				    :content (format nil "yourname3 = using NAME-VALUE ~A or VALUE ~A"
+		         :content (format nil "yourname3 = using NAME-VALUE ~A or VALUE ~A"
-						     (name-value form3 "yourname3")
+					  (name-value form3 "yourname3")
-						     (value finput3)))))))
+					  (value finput3)))))))
-  
   (run body))
 
 (defun on-page2 (body)
@@ -87,7 +80,6 @@
 
 (defun start-tutorial ()
   "Start turtorial."
-
   (initialize #'on-index)
   (set-on-new-window #'on-page2 :path "/page2")
   (set-on-new-window #'on-page3 :path "/page3")

tutorial/18-tutorial.lisp

@@ -10,53 +10,49 @@
 	 (object  (create-div target1))
 	 (msg     (create-div body
 		    :content "Drag green box to other yellow box")))
-
+    ;; Instructions
     (setf (positioning msg) :fixed)
     (setf (top msg) "125px")
-    
+    ;; Box 1
     (setf (positioning target1) :fixed)
     (setf (top target1) "10px")
     (setf (left target1) "10px")
     (setf (width target1) "100px")
     (setf (height target1) "100px")
     (setf (background-color target1) :yellow)
-    
+    ;; Box 2
     (setf (positioning target2) :fixed)
     (setf (top target2) "10px")
     (setf (left target2) "140px")
     (setf (width target2) "100px")
     (setf (height target2) "100px")
     (setf (background-color target2) :yellow)
-    
+    ;; Box to Drag
     (setf (positioning object) :absolute)
     (setf (top object) "10px")
     (setf (left object) "10px")
     (setf (width object) "50px")
     (setf (height object) "50px")
     (setf (background-color object) :green)
-
     ;; To allow for drag and drop requires:
     ;;
     ;; 1 object is draggable
     (setf (draggablep object) t)
     ;; 2 the on-drag-start event is set
     (set-on-drag-start object (lambda (obj)()) :drag-data "some data")
-
     ;; 4 the target on-drag-over event is sett
     (set-on-drag-over target1 (lambda (obj)()))
     ;; 5 the target on-drop event is set
     (set-on-drop target1 (lambda (obj data)
 			   (place-inside-bottom-of target1 object)))
-    
+    ;; Set up other box 1 also as targer for returning drag box
     (set-on-drag-over target2 (lambda (obj)()))
     (set-on-drop target2 (lambda (obj data)
 			   (print (getf data :drag-data))
 			   (place-inside-bottom-of target2 object)))
-    
   (run body)))
 
 (defun start-tutorial ()
   "Start turtorial."
-
   (initialize #'on-new-window)
   (open-browser))

tutorial/19-tutorial.lisp

@@ -4,16 +4,15 @@
 
 (in-package :clog-user)
 
-;; In this tutorial we will see how to easily use a JavaScript
+;;; In this tutorial we will see how to easily use a JavaScript
-;; component. In the static-files directory there is a simple
+;;; component. In the static-files directory there is a simple
-;; JavaScript component (clog/static-files/tutorial/jslists) to create
+;;; JavaScript component (clog/static-files/tutorial/jslists) to create
-;; collapsable trees that we will use for this tutorial.
+;;; collapsable trees that we will use for this tutorial.
 
 (defun on-new-window (body)
   ;; First we need to load jslists' JavaScript file and css
   (load-css (html-document body) "/tutorial/jslists/jsLists.css")
-  (load-script (html-document body) "/tutorial/jslists/jsLists.js")
+  (load-script (html-document body) "/tutorial/jslists/jsLists.js")	    
-	    
   ;; Second we need to build an example list. jsLists uses an ordered
   ;; or unordered list for it's data.
   (let* ((list-top   (create-unordered-list body))
@@ -23,13 +22,11 @@
 	 (item       (create-list-item list-b :content "Item 2"))
 	 (item       (create-list-item list-b :content "Item 3"))
 	 (item       (create-list-item list-b :content "Item 4")))
-
     (js-execute body (format nil "JSLists.applyToList('~A', 'ALL');"
 			     (html-id list-top))))
   (run body))
 
 (defun start-tutorial ()
   "Start turtorial."
-
   (initialize #'on-new-window)
   (open-browser))