fixed regression related to auto-place

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))

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))
+			     :html-id html-id
-	 (closer (attach-as-child body (format nil "~A-close" 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)
+    (set-on-click
-			   (destroy win)))
+     (attach-as-child obj (format nil "~A-close" html-id))
+     (lambda (obj)
+       (destroy win)))
     (when time-out
       (sleep time-out)
       (destroy win))))

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
+"  <div class='w3-panel ~A w3-animate-right w3-display-container'>~
+   <span id='~A-closer' class='w3-button w3-large w3-display-topright'>&times;</span>~
+   <h3>~A</h3>~
+   <p>~A</p>~
+</div>"
+                              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))))

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)