sidebars

README.md

@@ -50,9 +50,10 @@ CLOG is developed on an M1 MacBook with ECL, it is tested fairly
 regulary with SCBL on Linux, Windows and Intel MacBook. It should
 in theory work on any system Quicklisp and CLACK will load on to.
 
-CLOG will be in Quicklisp in the next update, but because I am still 
+CLOG is in Quicklisp, but because I am still adding code daily,
-adding code daily, it is currently preferable to clone the github repo
+it is currently preferable to clone the github repo into your
-into your ~/common-lisp directory:
+~/common-lisp directory (or other quicklisp/asdf findable
+directory):
 
 ```
 cd ~/common-lisp

source/clog-web.lisp

@@ -31,6 +31,14 @@
   (create-web-panel        generic-function)
   (clog-web-content        class)
   (create-web-content      generic-function)
+  (clog-web-code           class)
+  (create-web-code         generic-function)
+  (clog-web-main           class)
+  (create-web-main         generic-function)
+  (clog-web-sidebar        class)
+  (create-web-sidebar      generic-function)
+  (clog-web-sidebar-item   class)
+  (create-web-sidebar-item generic-function)
   
   "CLOG-WEB - Auto Layout System"
   (clog-web-auto-row      class)
@@ -140,7 +148,7 @@ screen size smaller then 601 pixels DP"))
 ;; Panel              -  Notes, Quote boxes, Notifications
 ;; Display-Container  -  Image text overlays
 ;; Code               -  Code blocks
-;; Side-Bar           -  Sidebar to main content, optional collapsable
+;; Sidebar            -  Sidebar to main content, optional collapsable
 ;; Main               -  Mark main contact when using a side-bar
 
 ;;;;;;;;;;;;;;;;;;;;;;
@@ -193,6 +201,100 @@ to nil on creation."))
       (setf (visiblep div) t))
     (change-class div 'clog-web-content)))
 
+;;;;;;;;;;;;;;;;;;;;;
+;; create-web-code ;;
+;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-web-code (clog-div)()
+  (:documentation "Code for web code"))
+
+(defgeneric create-web-code (clog-obj &key content
+					   hidden class html-id)
+  (:documentation "Create a clog-web-code. Code content container.
+If hidden is t then then the visiblep propetery will be set
+to nil on creation."))
+
+(defmethod create-web-code ((obj clog-obj) &key (content "")
+		 				(hidden nil)
+						(class nil)
+						(html-id nil))
+  (let ((div (create-div obj :content content
+			     :hidden t :class class :html-id html-id)))
+    (add-class div "w3-code")
+    (unless hidden
+      (setf (visiblep div) t))
+    (change-class div 'clog-web-code)))
+
+;;;;;;;;;;;;;;;;;;;;;
+;; create-web-main ;;
+;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-web-main (clog-div)()
+  (:documentation "Main for web content"))
+
+(defgeneric create-web-main (clog-obj &key content hidden class html-id)
+  (:documentation "Create a clog-web-main. Container for main content when
+using a collapsable sidebar  or other whole page shifting technique.
+If hidden is t then then the visiblep propetery will be set to nil on
+creation."))
+
+(defmethod create-web-main ((obj clog-obj) &key (content "")
+		 				  (hidden nil)
+						  (class nil)
+						  (html-id nil))
+  (let ((div (create-div obj :content content
+			     :hidden t :class class :html-id html-id)))
+    (add-class div "w3-main")
+    (unless hidden
+      (setf (visiblep div) t))
+    (change-class div 'clog-web-main)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;
+;; create-web-sidebar ;;
+;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-web-sidebar (clog-div)()
+  (:documentation "Sidebar for web content"))
+
+(defgeneric create-web-sidebar (clog-obj &key content hidden class html-id)
+  (:documentation "Create a clog-web-sidebar. Container for sidebar content.
+If hidden is t then then the visiblep propetery will be set to nil on
+creation."))
+
+(defmethod create-web-sidebar ((obj clog-obj) &key (content "")
+		 				  (hidden nil)
+						  (class nil)
+						  (html-id nil))
+  (let ((div (create-div obj :content content
+			     :hidden t :class class :html-id html-id)))
+    (add-class div "w3-sidebar w3-bar-block")
+    (unless hidden
+      (setf (visiblep div) t))
+    (change-class div 'clog-web-sidebar)))
+
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+;; create-web-sidebar-item ;;
+;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
+
+(defclass clog-web-sidebar-item (clog-button)()
+  (:documentation "Sidebar-Item for web content"))
+
+(defgeneric create-web-sidebar-item (clog-obj &key content hidden class html-id)
+  (:documentation "Create a clog-web-sidebar-item. A sidebar menu bar item.
+If hidden is t then then the visiblep propetery will be set to nil on
+creation."))
+
+(defmethod create-web-sidebar-item ((obj clog-obj) &key (content "")
+		 				  (hidden nil)
+						  (class nil)
+						  (html-id nil))
+  (let ((item (create-button obj :content content
+				 :hidden t :class class :html-id html-id)))
+    (add-class item "w3-bar-item w3-button")
+    (unless hidden
+      (setf (visiblep item) t))
+    (change-class item 'clog-web-sidebar-item)))
+
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Implementation - Auto Layout
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

tutorial/24-tutorial.lisp

@@ -10,29 +10,57 @@
 (defun on-new-window (body)
   (clog-web-initialize body)
   (setf (title (html-document body)) "Tutorial 24")
-  (create-web-panel body :content "<h3>Note:</h3><p>This is a Panel</p>" :class "w3-yellow")
+  (let ((side (create-web-sidebar body :class "w3-animate-left w3-card"))
-  (create-section (create-web-content body :class "w3-teal")
+	(main (create-web-main body)))
+    ;; Setup sidebar:
+    (setf (display side) :none)
+    (set-on-click (create-web-sidebar-item side :content "Close &times;"
+						:class "w3-teal")
+		  (lambda (obj)
+		    (setf (display side) :none)))
+    (set-on-click (create-web-sidebar-item side :content "Google")
+		  (lambda (obj)
+		    (setf (url (location body)) "http://google.com")))
+    (create-web-sidebar-item side :content "item 2")
+    (create-web-sidebar-item side :content "item 3")
+    ;; Setup main content:
+    ;;
+    ;; Button to open sidebar
+    (set-on-click (create-button main :content "&#9776;" :class "w3-button")
+		  (lambda (obj)
+		    (setf (display side) :block)))
+    ;; Panels
+    (create-web-panel main :content "<h3>Note:</h3><p>This is a Panel</p>" :class "w3-yellow")
+    (create-section (create-web-content main :class "w3-teal")
 		    :p :content "This is come content. I am centered and set to a maximum-width.")
+    ;; Using containers and the 12 column grid
     ;; These containers not in a row and no setting for how main grid columns so are stacked
-  (create-web-container body :content "Container 1" :class "w3-border")
+    (create-web-container main :content "Container 1" :class "w3-border")
-  (create-web-container body :content "Container 2" :class "w3-border")
+    (create-web-container main :content "Container 2" :class "w3-border")
-  (create-web-container body :content "Container 3" :class "w3-border")
+    (create-web-container main :content "Container 3" :class "w3-border")
-  ;; These are in a row and each is a third for the 12 grid columns
+    ;; These are in a row and each is a third of the 12 column grid
-  (let ((row (create-web-row body)))
+    (let ((row (create-web-row main)))
       (create-web-container row :content "Container 1" :column-size :third :class "w3-border")
       (create-web-container row :content "Container 2" :column-size :third :class "w3-border")
       (create-web-container row :content "Container 3" :column-size :third :class "w3-border"))
     ;; As before with padding added between columns and some color
-  (let ((row (create-web-row body :padding t)))
+    (let ((row (create-web-row main :padding t)))
       (create-web-container row :content "Container 1" :column-size :third :class "w3-border w3-red")
       (create-web-container row :content "Container 2" :column-size :third :class "w3-border w3-orange")
       (create-web-container row :content "Container 3" :column-size :third :class "w3-border w3-blue"))
-  (let ((row (create-web-auto-row body)))
+    ;; Using the auto layout that adjusts for content sizes automaticly
+    (let ((row (create-web-auto-row main)))
       (create-web-auto-column row :content "Container 1<br>Container 1<br>Container 1"
 				  :vertical-align :middle :class "w3-border")
       (create-web-auto-column row :content "Container 2" :vertical-align :top :class "w3-border")
       (create-web-auto-column row :content "Container 3" :vertical-align :bottom :class "w3-border"))
-  (run body))
+    ;; A "code" block
+    (create-web-code main :content
+		     "(defun start-tutorial ()<br>
+                      \"Start turtorial.\"<br>
+                      (initialize #'on-new-window)<br>
+                      (open-browser))")
+    (run body)))
 
 (defun start-tutorial ()
   "Start turtorial."