grid additions

source/clog-connection.lisp

@@ -83,10 +83,10 @@ script."
   (apply #'make-hash-table :synchronized t args)
   #-(or sbcl ecl mezzano) (apply #'make-hash-table args))
 
-(defvar *verbose-output* nil "Verbose server output (default false)")
+(defvar *verbose-output* nil "Verbose server output (default nil)")
-(defvar *browser-gc-on-ping* nil "Run a browser-gc on every ping")
+(defvar *browser-gc-on-ping* nil "Run a browser-gc on every ping (default nil)")
-(defvar *break-on-error* t   "Allow invoking debugger (default true)")
+(defvar *break-on-error* t   "Allow invoking debugger (default t)")
-(defvar *disable-clog-debugging* nil "When true turns off debug hooks")
+(defvar *disable-clog-debugging* nil "When true turns off debug hooks (default nil)")
 
 (defvar *on-connect-handler* nil "New connection event handler.")
 

source/clog-element.lisp

@@ -846,7 +846,7 @@ elements wrap around it."))
 ;;;;;;;;;;;;;
 
 (deftype display-type () '(member :none :block :inline :inline-block :flex
-                           :grid :inline-grid))
+                           :grid :inline-grid :contents))
 
 (defgeneric display (clog-element)
   (:documentation "Get/Setf display. Display sets the CSS Display property that
@@ -889,9 +889,14 @@ handles how elements are treated by the browser layout engine.
                    :space-around  ( -   -   - )
                    :space-evenly  ( - - - )
 
+    For info on using grids see:
+    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
+
     grid         - Turn this item in to a grid container block level. The grid
                    properties to adjust for container are:
 
+                      Tip - 1 1 1 1 = repeat(4,1fr) also minmax()
+                      
                       grid-template-columns
                       grid-template-rows
                       grid-template-areas
@@ -907,10 +912,15 @@ handles how elements are treated by the browser layout engine.
 
                     The properties to adjust for grid items is:
 
+                      Tip - 1 / 4 means from 1 to 4
+
+                      grid-column
                       grid-column-start
                       grid-column-end
+                      grid-row
                       grid-row-start
                       grid-row-end
+                      grid-area
                       align-self
                       justify-self
 
@@ -1127,6 +1137,26 @@ flex-basis (default :auto = use width or height) for CLOG-ELEMENT"))
 (defmethod (setf grid-auto-flow) (value (obj clog-element))
   (setf (style obj "grid-auto-flow") value))
 
+;;;;;;;;;;;;;;;
+;; grid-area ;;
+;;;;;;;;;;;;;;;
+
+(defgeneric grid-area (clog-element)
+  (:documentation "Get/Setf grid-area named or as
+grid-row-start / grid-column-start / grid-row-end / grid-column-end
+
+e.g. 1 / 1 / 4 / 2"))
+
+(defmethod grid-area ((obj clog-element))
+  (style obj "grid-area"))
+
+(defgeneric (setf grid-area) (value clog-element)
+  (:documentation "Set grid-area VALUE for CLOG-ELEMENT"))
+
+(defmethod (setf grid-area) (value (obj clog-element))
+  (setf (style obj "grid-area") value))
+
+
 ;;;;;;;;;;;;;;;;;
 ;; grid-column ;;
 ;;;;;;;;;;;;;;;;;
@@ -1991,6 +2021,12 @@ auto | w h | % = cover of parent | contain"))
 (defmethod border ((obj clog-element))
   (style obj "border"))
 
+(defgeneric (setf border) (value clog-element)
+  (:documentation "Set border VALUE for CLOG-ELEMENT"))
+
+(defmethod (setf border) (value (obj clog-element))
+  (setf (style obj "border") value))
+
 ;;;;;;;;;;;;;;;;
 ;; set-border ;;
 ;;;;;;;;;;;;;;;;

source/clog-panel.lisp

@@ -152,14 +152,14 @@ nil. Resizable only works if overflow is set to :SCROLL"))
   (:documentation "Create a panel of WIDTH and HEIGHT with :relative
 positioning to envelope PANEL. This allows any type of clog-panel (including
 those created by CLOG Builder, to be positioned within :flex layouts or
-otherwise treat the panel as an inline object."))
+otherwise treat the panel as an inline object. Returns envelope-panel"))
 
 (defmethod envelope-panel ((obj clog-element) (panel clog-element)
                            width height &key (units :px))
-  (place-inside-top-of
+  (let ((e (create-div obj :style (format nil "position:relative;width:~A~A;height:~A~A"
-    (create-div obj :style (format nil "position:relative;width:~A~A;height:~A~A"
+                                          width units height units))))
-                                   width units height units))
+    (place-inside-top-of e panel)
-    panel))
+    e))
 
 ;;;;;;;;;;;;;;;;;;;;;
 ;; center-children ;;

source/clog-window.lisp

@@ -76,14 +76,9 @@ no redirection of browser takes place. REWRITE-URL must be same domain."))
 ;; inner-height ;;
 ;;;;;;;;;;;;;;;;;;
 
-(defgeneric inner-height (clog-window)
-  (:documentation "Get/Setf inner height of browser window."))
-
 (defmethod inner-height ((obj clog-window))
   (js-to-integer (query obj "innerHeight")))
 
-(defgeneric (setf inner-height) (value clog-window))
-
 (defmethod (setf inner-height) (value (obj clog-window))
   (execute obj (format nil "innerHeight='~A'" (escape-string value)))
   value)
@@ -92,14 +87,9 @@ no redirection of browser takes place. REWRITE-URL must be same domain."))
 ;; inner-width ;;
 ;;;;;;;;;;;;;;;;;
 
-(defgeneric inner-width (clog-window)
-  (:documentation "Get/Setf inner width of browser window."))
-
 (defmethod inner-width ((obj clog-window))
   (js-to-integer (query obj "innerWidth")))
 
-(defgeneric (setf inner-width) (value clog-window))
-
 (defmethod (setf inner-width) (value (obj clog-window))
   (execute obj (format nil "innerWidth='~A'" (escape-string value)))
   value)
@@ -108,14 +98,9 @@ no redirection of browser takes place. REWRITE-URL must be same domain."))
 ;; outer-height ;;
 ;;;;;;;;;;;;;;;;;;
 
-(defgeneric outer-height (clog-window)
-  (:documentation "Get/Setf outer height of browser window."))
-
 (defmethod outer-height ((obj clog-window))
   (js-to-integer (query obj "outerHeight")))
 
-(defgeneric (setf outer-height) (value clog-window))
-
 (defmethod (setf outer-height) (value (obj clog-window))
   (execute obj (format nil "outerHeight='~A'" (escape-string value)))
   value)
@@ -124,14 +109,9 @@ no redirection of browser takes place. REWRITE-URL must be same domain."))
 ;; outer-width ;;
 ;;;;;;;;;;;;;;;;;
 
-(defgeneric outer-width (clog-window)
-  (:documentation "Get/Setf outer width of browser window."))
-
 (defmethod outer-width ((obj clog-window))
   (js-to-integer (query obj "outerWidth")))
 
-(defgeneric (setf outer-width) (value clog-window))
-
 (defmethod (setf outer-width) (value (obj clog-window))
   (execute obj (format nil "outerWidth='~A'" (escape-string value)))
   value)
@@ -172,14 +152,9 @@ no redirection of browser takes place. REWRITE-URL must be same domain."))
 ;; top ;;
 ;;;;;;;;;
 
-(defgeneric top (clog-window)
-  (:documentation "Get/Setf browser y postion."))
-
 (defmethod top ((obj clog-window))
   (js-to-integer (query obj "screenY")))
 
-(defgeneric (setf top) (value clog-window))
-
 (defmethod (setf top) (value (obj clog-window))
   (execute obj (format nil "screenY='~A'" (escape-string value)))
   value)
@@ -188,14 +163,9 @@ no redirection of browser takes place. REWRITE-URL must be same domain."))
 ;; left ;;
 ;;;;;;;;;;
 
-(defgeneric left (clog-window)
-  (:documentation "Get/Setf browser x position."))
-
 (defmethod left ((obj clog-window))
   (js-to-integer (query obj "screenX")))
 
-(defgeneric (setf left) (value clog-window))
-
 (defmethod (setf left) (value (obj clog-window))
   (execute obj (format nil "screenX='~A'" (escape-string value)))
   value)

source/clog.lisp

@@ -295,6 +295,7 @@ embedded in a native template application.)"
   (grid-row                   generic-function)
   (grid-row-start             generic-function)
   (grid-row-end               generic-function)
+  (grid-area                  generic-function)
   (align-items-type           type)
   (align-items                generic-function)
   (align-self-type            type)

tools/preferences.lisp.sample

@@ -83,8 +83,15 @@
 (setf *editor-delay-on-eval-form* 30)
 (setf *editor-delay-on-eval-file* 60)
 
-;; Disable clog gui debugging
+;; Server Settings
+;; When true turns off debug hooks
 (setf clog-connection:*disable-clog-debugging* nil)
+;; Verbose server output
+(setf clog-connection:*verbose-output* nil)
+;; Run a browser-gc on every ping
+(setf clog-connection:*browser-gc-on-ping* nil)
+;; Allow invoking debugger
+(setf clog-connection:*break-on-error* t)
 
 ;; CLOG Builder REPL
 (setf *clog-repl-use-console* t)