weblocks simple toast effect (common lisp web framework ui frontend)

weblocks-toast.lisp

(ql:quickload '(:weblocks :weblocks-lass :weblocks-navigation-widget :weblocks-ui :find-port))

(defpackage app-package
           (:use #:cl
                 #:weblocks-ui/form
                 #:weblocks/html)
	   (:import-from #:parenscript #:ps #:chain)
           (:import-from #:weblocks-navigation-widget  #:defroutes)
           (:import-from #:weblocks/routes #:reset-routes)
           (:import-from #:weblocks/session #:*session*)
	   (:import-from #:weblocks/dependencies #:make-dependency #:get-dependencies #:*cache-remote-dependencies-in*)

           (:import-from #:weblocks/widget
                    #:render
                    #:update
                    #:defwidget)
           (:import-from #:weblocks/actions
                    #:make-js-action)
           (:import-from #:weblocks/app
                    #:defapp))
(in-package app-package)

(defwidget toast-widget ()
  ((text :initarg :text :reader text-of :initform "")))

(defmethod weblocks/dependencies:get-dependencies ((widget toast-widget))
  (append
   (list
    (make-instance 'weblocks-lass:lass-dependency
           :type :css
           :css "#toast {
  visibility: hidden;
  min-width: 250px;
  -125px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}
#toast.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}")
    (weblocks-parenscript:make-dependency
      (setf (chain window show-toast)
        (lambda ()
        (let ((x (chain document (get-element-by-id 'toast))))
          (setf (chain x class-name) 'show)
          (set-timeout (lambda()
                 (setf (chain x class-name)
                   (chain x class-name (replace 'show ""))))
               3000))))))
   (call-next-method)))

(setf weblocks/js/jquery::*js-dependencies*
      (list (make-dependency "https://code.jquery.com/jquery-3.5.1.min.js")
          (make-dependency "src/js/jquery/jquery.js"
                           :system :weblocks)

          (make-dependency "src/js/jquery/jquery.ba-bbq.js"
                           :system :weblocks)

          (make-dependency "src/js/jquery/jquery-seq.js"
                           :system :weblocks)

          (make-dependency "src/js/jquery/progress.gif"
	    :system :weblocks)
	  #|
	  |#
	  ))

(defmethod render ((toast toast-widget))
  (with-slots (title text) toast
    (with-html
      (:h1 "TOAST")
      (:div :id "toast" text))))

(defwidget abstract-root-widget () ;;; 'global' functionality for the webpage : the ability to execute any js code & the ability to display toasts
  ((toast :initarg :toast :accessor toast-of :initform (make-instance 'toast-widget :text ""))))

(defmethod render ((w abstract-root-widget))
  (with-slots (toast) w
    (with-html
      (render toast))))

(defun toast (text)
  "can be called from any lisp code, it will show the toast in the running session"
  (with-slots (toast) (weblocks/session:get-value 'page-widget)  
    (setf (slot-value toast 'text) text)
    (update toast)
    ;; the showToast javascript function was defined in
    ;; toast widget's parenscript dependency
    (weblocks/response:send-script "showToast();")))

(defwidget mypage-widget (abstract-root-widget)
  ())

(defun make-mypage-widget ()
  (let ((widget (make-instance 'mypage-widget)))
    (if *session* ; we need this if so that we can use make-mypage-widget in the repl outside of a browser session
    (setf (weblocks/session:get-value 'page-widget) widget)
    widget)))

(defmethod render ((page mypage-widget) )
    (setf (weblocks/page:get-title) "My page title")
    (with-html
      (call-next-method) ; abstract-page-widget's render method
      (:h1 "Page Title")
      (:hr)
      ;(render other stuff)
      (:input :type "button"
       :onclick
       (when *session* ; condition needed so that we can render page in the repl when *session* is nil
         (make-js-action ; compile the lambda function into a js action
          (lambda (&key &allow-other-keys)
            (log:debug "Preparing to fire the toast")
            (toast "It works!"))))
              :value "Click me")))

(defapp my-app 
  :prefix "/"
;  :description ""
;  :autostart nil
 ; :debug t
  )

(reset-routes) ; delete all routes
(defroutes main-routes
  ("/" (make-mypage-widget))
  ;("/tasks/\\d+" (make-task-page))
  ;(t (page-not-found))
  )

(defmethod weblocks/session:init ((app my-app))
  (declare (ignorable app))
  (make-main-routes))

(weblocks/debug:on)
; (setf weblocks/variables:*invoke-debugger-on-error* t)
(setf *srv* (weblocks/server:start :port 4002 :interface "0.0.0.0"))