26-tutorial.lisp

;;;; In this tutorial we are going to use clog-web for a website.
;;;; It is possible, for many ideal, to only use CLOG when needed
;;;; for app oriented interactions. I find that I enjoy building
;;;; websites as apps and that is what CLOG-WEB is meant to help with.
;;;; This entire site could have been done in html and just adding
;;;; the boot.js file and then connecting to those form elements or
;;;; other areas desired to bring to life the page. CLOG is
;;;; completely flexible in how you choose to use it.


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

(in-package :clog-tut-26)

(defun on-new-window (body)
  (clog-web-initialize body)
  (setf (title (html-document body)) "Tutorial 26")
  ;; Install a menu
  (let* ((menu  (create-web-menu-bar body))
         (icon  (create-web-menu-icon menu :on-click (lambda (obj)
                                                       (declare (ignore obj))
                                                       (setf (hash (location body)) "rung2"))))
         (item1 (create-web-menu-item menu :content  "item1"
                                           :on-click (lambda (obj)
                                                       (declare (ignore obj))
                                                       (setf (hash (location body)) "rung2"))))
         (item2 (create-web-menu-item menu :content  "item2"
                                           :on-click (lambda (obj)
                                                       (declare (ignore obj))
                                                       (setf (hash (location body)) "rung2"))))
         (item3 (create-web-menu-item menu :content  "item3"
                                           :on-click (lambda (obj)
                                                       (declare (ignore obj))
                                                       (setf (hash (location body)) "rung2"))))
         (about (create-web-menu-item menu :content  "About"
                                           :on-click (lambda (obj)
                                                       (declare (ignore obj))
                                                       (setf (hash (location body)) "rung2")))))
    (declare (ignore icon))
    (full-row-on-mobile item1)
    (full-row-on-mobile item2)
    (full-row-on-mobile item3)
    (add-class about "w3-right"))
  ;; rung-1
  (let* ((first-rung (create-web-compositor body :html-id "rung1"))
         (image      (create-img first-rung :url-src "/img/windmills.jpg"
                                            :class "w3-sepia"))
         (clog-txt   (create-div first-rung :content "CLOG<br><u>The omnificient gui</u><br>
                                                      desktop<br>web<br>mobile"
                                            :class   "w3-text-white w3-xlarge")))
    (setf (cursor clog-txt) :pointer)
    (set-on-click clog-txt (lambda (obj)
                             (declare (ignore obj))
                             (setf (display first-rung) :none)
                             (setf (hash (location body)) "rung2")))
    (setf (box-width image) "100%")
    (setf (text-shadow clog-txt) "2px 2px black")
    (composite-top-left clog-txt :padding-class :padding-64))
  ;; rung-2
  (let* ((second-rung (create-web-auto-row body :html-id "rung2"))
         (image-cell  (create-web-auto-column second-rung))
         (image       (create-img image-cell :url-src "/img/flower-clogs.jpg"))
         (text-cell   (create-web-auto-column second-rung :class "w3-cell-top")))
    (hide-on-small-screens image-cell)
    (setf (background-color text-cell) (rgb 199 188 160))
    (setf (box-width image-cell) "40%")
    (setf (box-width image) "100%")
    (clog-web-form text-cell
                   "<H2>Find out more about CLOG:</H2>"
                   '(("CLOG for" :clog-for :select (("Desktop" "desktop" :selected)
                                                    ("Web"     "web")
                                                    ("Mobile"  "mobile")
                                                    ("iot"     "iot")))
                      ("Name"   :name)
                      ("E-mail" :email))
                   (lambda (data)
                     (if (equal (cadr (assoc :email data)) "")
                         (clog-web-alert second-rung "Missing E-Mail"
                                         "Please fill out E-mail" :time-out 2)
                         (progn
                           (setf (display second-rung) :none)
                           (setf (hash (location body)) "rung3")
                           (setf (inner-html (attach-as-child body "rung3-answer"))
                                 (format nil "<br><br>Thank you ~A<br>Your information will
                                                NOT be sent shortly.(DEMO)"
                                         (cadr (assoc :name data)))))))))
  ;; rung-3
  (let* ((third-rung (create-web-compositor body :html-id "rung3"))
         (image      (create-img third-rung :url-src "/img/yellow-clogs.jpg"))
         (txt        (create-div third-rung :html-id "rung3-answer"
                                            :class   "w3-text-white w3-xlarge")))
    (setf (text-shadow txt) "2px 2px black")
    (composite-right txt :padding-class :padding-64)
    (setf (box-width image) "100%")))

(defun start-tutorial ()
  "Start turtorial."
  ;; We would probably set :host to my IP and :port 80 here if running a live site
  (initialize 'on-new-window)
  ;; In real life, if we openning a browser here it would likely be
  ;; to a page with a monitor of system etc. since it is local.
  (open-browser))