diff --git a/source/clog-element.lisp b/source/clog-element.lisp index 00c155b..a5f986f 100644 --- a/source/clog-element.lisp +++ b/source/clog-element.lisp @@ -87,7 +87,8 @@ CLOG-OBJ. If HTML-ID is nil one will be generated.")) (defgeneric attach-as-child (clog-obj html-id &key clog-type) (:documentation "Create a new CLOG-Element or sub-type of CLOG-TYPE and -attach an existing element with HTML-ID. The HTML-ID must be unique.")) +attach an existing element with HTML-ID. The HTML-ID must be unique and +must be in DOM, ie placed or auto-placed.")) (defmethod attach-as-child ((obj clog-obj) html-id &key (clog-type 'clog-element)) diff --git a/source/clog-gui.lisp b/source/clog-gui.lisp index 76c3486..f8955cf 100644 --- a/source/clog-gui.lisp +++ b/source/clog-gui.lisp @@ -1245,13 +1245,15 @@ is placed in DOM at top of html body instead of bottom of html body." html-id title content) - :auto-place nil)) - (closer (attach-as-child body (format nil "~A-close" html-id)))) + :html-id html-id + :auto-place nil))) (if place-top (place-inside-top-of body win) (place-inside-bottom-of body win)) - (set-on-click closer (lambda (obj) - (destroy win))) + (set-on-click + (attach-as-child obj (format nil "~A-close" html-id)) + (lambda (obj) + (destroy win))) (when time-out (sleep time-out) (destroy win)))) diff --git a/source/clog-web.lisp b/source/clog-web.lisp index 0c9bd93..b8f67f0 100644 --- a/source/clog-web.lisp +++ b/source/clog-web.lisp @@ -76,7 +76,10 @@ (full-row-on-mobile generic-function) (hide-on-small-screens generic-function) (hide-on-medium-screens generic-function) - (hide-on-large-screens generic-function)) + (hide-on-large-screens generic-function) + + "CLOG-WEB - Interactions" + (clog-web-alert function)) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Implementation - clog-web - CLOG Web page abstraction @@ -624,3 +627,40 @@ propetery will be set to nil on creation.")) (setf (visiblep div) t)) (change-class div 'clog-web-container))) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Implementation - clog-web Interactions +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + + +(defun clog-web-alert (obj title content &key + (color-class "w3-red") + (time-out nil) + (place-top nil) + (html-id nil)) + "Create an alert toast with option :TIME-OUT. If place-top is t then alert +is placed in DOM at top of obj instead of bottom of obj." + (unless html-id + (setf html-id (clog-connection:generate-id))) + (let* ((panel (create-child obj + (format nil +"
~ + ×~ +

~A

~ +

~A

~ +
" + color-class + html-id + title + content) + :html-id html-id + :auto-place nil))) + (if place-top + (place-inside-top-of obj panel) + (place-inside-bottom-of obj panel)) + (set-on-click + (attach-as-child obj (format nil "~A-closer" html-id)) + (lambda (obj) + (destroy panel))) + (when time-out + (sleep time-out) + (destroy panel)))) diff --git a/tutorial/25-tutorial.lisp b/tutorial/25-tutorial.lisp index b66cdc5..2b613ea 100644 --- a/tutorial/25-tutorial.lisp +++ b/tutorial/25-tutorial.lisp @@ -17,7 +17,7 @@ ;;;; --------------------------------------------------------- (defpackage #:clog-user - (:use #:cl #:clog #:clog-web #:clog-gui) + (:use #:cl #:clog #:clog-web) (:export start-tutorial)) (in-package :clog-user) @@ -30,7 +30,7 @@ (results-section (create-web-content body :class "w3-monospace"))) ;; Setup command section (let* ((form (create-form command-section)) - (command (create-form-element form :text + (command (create-form-element form :text :class "w3-input w3-border" :label (create-label form :content "Enter Command: "))) (button (create-form-element form :submit))) @@ -50,7 +50,7 @@ (setf (scroll-top results-section) (scroll-height results-section))) (error (c) - (alert-toast body "Error" c :time-out 2 :place-top t))) + (clog-web-alert command-section "Error" c :time-out 5))) (setf (value command) "")))) (setf (overflow results-section) :scroll) (set-border results-section :thin :solid :black)