27-tutorial.lisp

;; This tutorial demonstrates the panel box layout method

(defpackage #:clog-tut-27
  (:use #:cl #:clog)
  (:export start-tutorial))

(in-package :clog-tut-27)

(defun on-new-window (body)
  (let* ((console (create-panel-box-layout body :left-width 200 :right-width 0))
	 (head    (create-div (top-panel console) :content "Image Viewer"))
	 (lbox    (create-select (left-panel console)))
	 (viewer  (create-img (center-panel console)))
	 (footer  (create-div (bottom-panel console)
			      :content "(c) 2021 David Botton - BSD 3 Lic.")))
    (declare (ignore footer))
    ;; Setup Top
    (setf (background-color (top-panel console)) :teal)
    (center-children (top-panel console))
    (setf (color head) :white)
    ;; Setup viewer
    (setf (width viewer) "100%")
    ;; Setup File List
    (setf (background-color (left-panel console)) :grey)
    (setf (positioning lbox) :absolute)
    (setf (size lbox) 2) ;; A size above 1 needed to get listbox
    (set-geometry lbox :left 0 :top 0 :bottom 0 :width 200)
    (add-select-options lbox '("kiarash-mansouri-fzoSNcxqtp8-unsplash.jpg"
			       "windmills.jpg"
			       "yellow-clogs.jpg"
			       "clogicon.png"))
    (set-on-change lbox (lambda (obj)
			  (declare (ignore obj))
			  (setf (url-src viewer) (format nil "/img/~A"
							 (value lbox)))))
    ;; Setup Bottom
    (center-children (bottom-panel console) :horizontal nil)))

(defun start-tutorial ()
  (initialize 'on-new-window)
  (open-browser))