mirrors/clog
1
Fork 0
mirror of https://github.com/rabbibotton/clog.git synced 2025-12-07 11:10:18 -08:00
Code Issues Projects Releases Wiki Activity

Style blocks

Browse source
This commit is contained in:
David Botton 2021-03-18 12:53:15 -04:00
parent 59e53980af
commit aeec52b6f2
6 changed files with 240 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -47,7 +47,7 @@ programming logic, events and decisions are done on the server
which can be local, or remote over the web. which can be local, or remote over the web.
CLOG is developed on an M1 MacBook with ECL, it is tested fairly CLOG is developed on an M1 MacBook with ECL, it is tested fairly
regulary with SCBL on Linux, Windows and Intel MacBook. It should regulary with SBCL on Linux, Windows and an Intel MacBook. It should
in theory work on any system Quicklisp and CLACK will load on to. in theory work on any system Quicklisp and CLACK will load on to.
CLOG is in Quicklisp, but because I am still adding code daily, CLOG is in Quicklisp, but because I am still adding code daily,

2
clog.asd
View file

@ -1,3 +1,4 @@
;;;; clog.asd ;;;; clog.asd
(asdf:defsystem #:clog (asdf:defsystem #:clog
@ -18,6 +19,7 @@
(:file "clog-base") (:file "clog-base")
(:file "clog-element") (:file "clog-element")
(:file "clog-element-common") (:file "clog-element-common")
(:file "clog-style")
(:file "clog-canvas") (:file "clog-canvas")
(:file "clog-form") (:file "clog-form")
(:file "clog-multimedia") (:file "clog-multimedia")

183
doc/clog-manual.html
View file

@ -42,18 +42,19 @@
<li><a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG Objects">6 CLOG Objects</a></li> <li><a href="#x-28CLOG-3A-40CLOG-OBJ-20MGL-PAX-3ASECTION-29" title="CLOG Objects">6 CLOG Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">7 CLOG Elements</a></li> <li><a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">7 CLOG Elements</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29" title="Common CLOG Elements">8 Common CLOG Elements</a></li> <li><a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29" title="Common CLOG Elements">8 Common CLOG Elements</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">9 CLOG Form Objects</a></li> <li><a href="#x-28CLOG-3A-40CLOG-STYLE-BLOCK-20MGL-PAX-3ASECTION-29" title="CLOG Style Blocks">9 CLOG Style Blocks</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">10 CLOG Canvas Objects</a></li> <li><a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">10 CLOG Form Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-MULTIMEDIA-20MGL-PAX-3ASECTION-29" title="CLOG Multimedia Objects">11 CLOG Multimedia Objects</a></li> <li><a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">11 CLOG Canvas Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-GUI-20MGL-PAX-3ASECTION-29" title="CLOG GUI Objects">12 CLOG GUI Objects</a></li> <li><a href="#x-28CLOG-3A-40CLOG-MULTIMEDIA-20MGL-PAX-3ASECTION-29" title="CLOG Multimedia Objects">12 CLOG Multimedia Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-WEB-20MGL-PAX-3ASECTION-29" title="CLOG Web Objects">13 CLOG Web Objects</a></li> <li><a href="#x-28CLOG-3A-40CLOG-GUI-20MGL-PAX-3ASECTION-29" title="CLOG GUI Objects">13 CLOG GUI Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">14 CLOG Body Objects</a></li> <li><a href="#x-28CLOG-3A-40CLOG-WEB-20MGL-PAX-3ASECTION-29" title="CLOG Web Objects">14 CLOG Web Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">15 CLOG Window Objects</a></li> <li><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">15 CLOG Body Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">16 CLOG Document Objects</a></li> <li><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">16 CLOG Window Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">17 CLOG Location Objects</a></li> <li><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">17 CLOG Document Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">18 CLOG Navigator Objects</a></li> <li><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">18 CLOG Location Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-HELPERS-20MGL-PAX-3ASECTION-29" title="CLOG Helper Functions">19 CLOG Helper Functions</a></li> <li><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">19 CLOG Navigator Objects</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29" title="CLOG Framework internals and extensions">20 CLOG Framework internals and extensions</a></li> <li><a href="#x-28CLOG-3A-40CLOG-HELPERS-20MGL-PAX-3ASECTION-29" title="CLOG Helper Functions">20 CLOG Helper Functions</a></li>
<li><a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29" title="CLOG Framework internals and extensions">21 CLOG Framework internals and extensions</a></li>
</ul> </ul>
<h6>[in package CLOG]</h6> <h6>[in package CLOG]</h6>
@ -2445,7 +2446,7 @@ to no actual <code>HTML</code> elemen.</p></li>
<p><a id='x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29'></a></p> <p><a id='x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29'></a></p>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29" title="Common CLOG Elements">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-20MGL-PAX-3ASECTION-29" title="CLOG Elements">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-STYLE-BLOCK-20MGL-PAX-3ASECTION-29" title="CLOG Style Blocks">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29" title="Common CLOG Elements">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29">8 Common CLOG Elements</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29">8 Common CLOG Elements</a></h2>
@ -3148,11 +3149,50 @@ and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OB
and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OBJ</code></p></li> and if <code>:AUTO-PLACE</code> (default t) place-inside-bottom-of <code>CLOG-OBJ</code></p></li>
</ul> </ul>
<p><a id='x-28CLOG-3A-40CLOG-STYLE-BLOCK-20MGL-PAX-3ASECTION-29'></a></p>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29" title="Common CLOG Elements">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-STYLE-BLOCK-20MGL-PAX-3ASECTION-29" title="CLOG Style Blocks">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-STYLE-BLOCK-20MGL-PAX-3ASECTION-29">9 CLOG Style Blocks</a></h2>
<p>CLOG-Style-Block - <code>CLOG</code> Style Blocks</p>
<p><a id='x-28CLOG-3ACLOG-STYLE-BLOCK-20CLASS-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[class]</span> <span class="reference-object"><a href="#x-28CLOG-3ACLOG-STYLE-BLOCK-20CLASS-29" >CLOG-STYLE-BLOCK</a></span></span> <span class="locative-args"><a href="#x-28CLOG-3ACLOG-ELEMENT-20CLASS-29" title="(CLOG:CLOG-ELEMENT CLASS)">CLOG-ELEMENT</a></span></span></p>
<p><code>CLOG</code> style-blocks for applying css styles.</p></li>
</ul>
<p><a id='x-28CLOG-3ACREATE-STYLE-BLOCK-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3ACREATE-STYLE-BLOCK-20GENERIC-FUNCTION-29" >CREATE-STYLE-BLOCK</a></span></span> <span class="locative-args">CLOG-OBJ &amp;KEY CONTENT MEDIA HTML-ID AUTO-PLACE</span></span></p>
<p>Ideally style blocks should be created in the (head body)
clog-element but can be placed anywhere on a document and are applied as found
in the document. Although they are not 'scoped'. Media is a css media query
defaulting to all. To load CSS style sheets from files see <a href="#x-28CLOG-3ALOAD-CSS-20GENERIC-FUNCTION-29" title="(CLOG:LOAD-CSS GENERIC-FUNCTION)"><code>LOAD-CSS</code></a> in
clog-document. The add-style method can be used or can directly use the
<a href="#x-28CLOG-3ATEXT-20GENERIC-FUNCTION-29" title="(CLOG:TEXT GENERIC-FUNCTION)"><code>TEXT</code></a> method to access blocks content.</p></li>
</ul>
<p><a id='x-28CLOG-3AADD-STYLE-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-3AADD-STYLE-20GENERIC-FUNCTION-29" >ADD-STYLE</a></span></span> <span class="locative-args">CLOG-STYLE-BLOCK SELECTOR-TYPE SELECTOR STYLE-ALIST</span></span></p>
<p>Add to style-block an alist of css styles to affect
selector. For example:
(add-style :element &quot;a&quot; ((text-decoration none)))</p></li>
</ul>
<p><a id='x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29'></a></p> <p><a id='x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29'></a></p>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-ELEMENT-COMMON-20MGL-PAX-3ASECTION-29" title="Common CLOG Elements">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-STYLE-BLOCK-20MGL-PAX-3ASECTION-29" title="CLOG Style Blocks">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29">9 CLOG Form Objects</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29">10 CLOG Form Objects</a></h2>
<p>CLOG-Form-Data</p> <p>CLOG-Form-Data</p>
@ -3747,7 +3787,7 @@ optionally fill in with contents of data-list.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-MULTIMEDIA-20MGL-PAX-3ASECTION-29" title="CLOG Multimedia Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-FORM-20MGL-PAX-3ASECTION-29" title="CLOG Form Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-MULTIMEDIA-20MGL-PAX-3ASECTION-29" title="CLOG Multimedia Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29">10 CLOG Canvas Objects</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29">11 CLOG Canvas Objects</a></h2>
<p>CLOG-Canvas - Class for <code>CLOG</code> canvas objects</p> <p>CLOG-Canvas - Class for <code>CLOG</code> canvas objects</p>
@ -4095,7 +4135,7 @@ https://developer.mozilla.org/en-US/docs/Web/CSS/font</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-GUI-20MGL-PAX-3ASECTION-29" title="CLOG GUI Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-MULTIMEDIA-20MGL-PAX-3ASECTION-29" title="CLOG Multimedia Objects">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-CANVAS-20MGL-PAX-3ASECTION-29" title="CLOG Canvas Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-GUI-20MGL-PAX-3ASECTION-29" title="CLOG GUI Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-MULTIMEDIA-20MGL-PAX-3ASECTION-29" title="CLOG Multimedia Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-MULTIMEDIA-20MGL-PAX-3ASECTION-29">11 CLOG Multimedia Objects</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-MULTIMEDIA-20MGL-PAX-3ASECTION-29">12 CLOG Multimedia Objects</a></h2>
<p>CLOG-Multimedia - Base Class for <code>CLOG</code> multimedia objects</p> <p>CLOG-Multimedia - Base Class for <code>CLOG</code> multimedia objects</p>
@ -4498,7 +4538,7 @@ is nil unbind the event.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-MULTIMEDIA-20MGL-PAX-3ASECTION-29" title="CLOG Multimedia Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-WEB-20MGL-PAX-3ASECTION-29" title="CLOG Web Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-GUI-20MGL-PAX-3ASECTION-29" title="CLOG GUI Objects">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-MULTIMEDIA-20MGL-PAX-3ASECTION-29" title="CLOG Multimedia Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-WEB-20MGL-PAX-3ASECTION-29" title="CLOG Web Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-GUI-20MGL-PAX-3ASECTION-29" title="CLOG GUI Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-GUI-20MGL-PAX-3ASECTION-29">12 CLOG GUI Objects</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-GUI-20MGL-PAX-3ASECTION-29">13 CLOG GUI Objects</a></h2>
<h6>[in package CLOG-GUI]</h6> <h6>[in package CLOG-GUI]</h6>
@ -4509,7 +4549,8 @@ is nil unbind the event.</p></li>
<ul> <ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[function]</span> <span class="reference-object"><a href="#x-28CLOG-GUI-3ACLOG-GUI-INITIALIZE-20FUNCTION-29" >CLOG-GUI-INITIALIZE</a></span></span> <span class="locative-args">CLOG-BODY &amp;KEY (W3-CSS-URL &quot;/css/w3.css&quot;) (JQUERY-UI-CSS &quot;/css/jquery-ui.css&quot;) (JQUERY-UI &quot;/js/jquery-ui.js&quot;)</span></span></p> <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[function]</span> <span class="reference-object"><a href="#x-28CLOG-GUI-3ACLOG-GUI-INITIALIZE-20FUNCTION-29" >CLOG-GUI-INITIALIZE</a></span></span> <span class="locative-args">CLOG-BODY &amp;KEY (W3-CSS-URL &quot;/css/w3.css&quot;) (JQUERY-UI-CSS &quot;/css/jquery-ui.css&quot;) (JQUERY-UI &quot;/js/jquery-ui.js&quot;)</span></span></p>
<p>Initializes clog-gui and installs a clog-gui object on connection.</p></li> <p>Initializes clog-gui and installs a clog-gui object on connection.
If <code>W3-CSS-URL</code> has not been loaded before is installed unless is nil.</p></li>
</ul> </ul>
<p><code>CLOG-GUI</code> - Menus</p> <p><code>CLOG-GUI</code> - Menus</p>
@ -4950,7 +4991,7 @@ machine, upon close <code>ON-FILE-NAME</code> called with filename or nil if fai
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-GUI-20MGL-PAX-3ASECTION-29" title="CLOG GUI Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-WEB-20MGL-PAX-3ASECTION-29" title="CLOG Web Objects">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-GUI-20MGL-PAX-3ASECTION-29" title="CLOG GUI Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-WEB-20MGL-PAX-3ASECTION-29" title="CLOG Web Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-WEB-20MGL-PAX-3ASECTION-29">13 CLOG Web Objects</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-WEB-20MGL-PAX-3ASECTION-29">14 CLOG Web Objects</a></h2>
<h6>[in package CLOG-WEB]</h6> <h6>[in package CLOG-WEB]</h6>
@ -4961,7 +5002,8 @@ machine, upon close <code>ON-FILE-NAME</code> called with filename or nil if fai
<ul> <ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[function]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3ACLOG-WEB-INITIALIZE-20FUNCTION-29" >CLOG-WEB-INITIALIZE</a></span></span> <span class="locative-args">CLOG-BODY &amp;KEY (W3-CSS-URL &quot;/css/w3.css&quot;)</span></span></p> <li><p><span class=reference-bullet><span class=reference><span class="locative-type">[function]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3ACLOG-WEB-INITIALIZE-20FUNCTION-29" >CLOG-WEB-INITIALIZE</a></span></span> <span class="locative-args">CLOG-BODY &amp;KEY (W3-CSS-URL &quot;/css/w3.css&quot;)</span></span></p>
<p>Initializes clog-web and installs a clog-web object on connection.</p></li> <p>Initializes clog-web and installs a clog-web object on connection.
If <code>W3-CSS-URL</code> has not been loaded before is installed unless is nil.</p></li>
</ul> </ul>
<p><a id='x-28CLOG-WEB-3ASET-MAXIMUM-PAGE-WIDTH-IN-PIXELS-20FUNCTION-29'></a></p> <p><a id='x-28CLOG-WEB-3ASET-MAXIMUM-PAGE-WIDTH-IN-PIXELS-20FUNCTION-29'></a></p>
@ -5351,6 +5393,91 @@ screen size smaller then 601 pixels DP</p></li>
<p>Hide element on screens smaller then 993 pixels DP</p></li> <p>Hide element on screens smaller then 993 pixels DP</p></li>
</ul> </ul>
<p><code>CLOG-WEB</code> - Menus</p>
<p><a id='x-28CLOG-WEB-3ACLOG-WEB-MENU-BAR-20CLASS-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[class]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3ACLOG-WEB-MENU-BAR-20CLASS-29" >CLOG-WEB-MENU-BAR</a></span></span> <span class="locative-args"><a href="#x-28CLOG-3ACLOG-DIV-20CLASS-29" title="(CLOG:CLOG-DIV CLASS)">CLOG-DIV</a></span></span></p>
<p>Menu bar</p></li>
</ul>
<p><a id='x-28CLOG-WEB-3ACREATE-WEB-MENU-BAR-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3ACREATE-WEB-MENU-BAR-20GENERIC-FUNCTION-29" >CREATE-WEB-MENU-BAR</a></span></span> <span class="locative-args">CLOG-OBJ &amp;KEY CLASS HTML-ID</span></span></p>
<p>Attached a menu bar to a <code>CLOG-OBJ</code> in general a
clog-body.</p></li>
</ul>
<p><a id='x-28CLOG-WEB-3AWEB-MENU-BAR-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3AWEB-MENU-BAR-20GENERIC-FUNCTION-29" >WEB-MENU-BAR</a></span></span> <span class="locative-args">CLOG-OBJ</span></span></p>
<p>Get/setf window web-menu-bar. This is set buy
create-web-menu-bar.</p></li>
</ul>
<p><a id='x-28CLOG-WEB-3AWEB-MENU-BAR-HEIGHT-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3AWEB-MENU-BAR-HEIGHT-20GENERIC-FUNCTION-29" >WEB-MENU-BAR-HEIGHT</a></span></span> <span class="locative-args">CLOG-OBJ</span></span></p>
<p>Get web-menu-bar height</p></li>
</ul>
<p><a id='x-28CLOG-WEB-3ACLOG-WEB-MENU-DROP-DOWN-20CLASS-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[class]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3ACLOG-WEB-MENU-DROP-DOWN-20CLASS-29" >CLOG-WEB-MENU-DROP-DOWN</a></span></span> <span class="locative-args"><a href="#x-28CLOG-3ACLOG-DIV-20CLASS-29" title="(CLOG:CLOG-DIV CLASS)">CLOG-DIV</a></span></span></p>
<p>Drop down menu</p></li>
</ul>
<p><a id='x-28CLOG-WEB-3ACREATE-WEB-MENU-DROP-DOWN-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3ACREATE-WEB-MENU-DROP-DOWN-20GENERIC-FUNCTION-29" >CREATE-WEB-MENU-DROP-DOWN</a></span></span> <span class="locative-args">CLOG-WEB-MENU-BAR &amp;KEY CONTENT CLASS HTML-ID</span></span></p>
<p>Attached a menu bar drop-down to a <code>CLOG-WEB-MENU-BAR</code></p></li>
</ul>
<p><a id='x-28CLOG-WEB-3ACLOG-WEB-MENU-ITEM-20CLASS-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[class]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3ACLOG-WEB-MENU-ITEM-20CLASS-29" >CLOG-WEB-MENU-ITEM</a></span></span> <span class="locative-args"><a href="#x-28CLOG-3ACLOG-SPAN-20CLASS-29" title="(CLOG:CLOG-SPAN CLASS)">CLOG-SPAN</a></span></span></p>
<p>Menu item</p></li>
</ul>
<p><a id='x-28CLOG-WEB-3ACREATE-WEB-MENU-ITEM-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3ACREATE-WEB-MENU-ITEM-20GENERIC-FUNCTION-29" >CREATE-WEB-MENU-ITEM</a></span></span> <span class="locative-args">CLOG-WEB-MENU-DROP-DOWN &amp;KEY CONTENT ON-CLICK CLASS HTML-ID</span></span></p>
<p>Attached a menu item to a <code>CLOG-WEB-MENU-DROP-DOWN</code></p></li>
</ul>
<p><a id='x-28CLOG-WEB-3ACREATE-WEB-MENU-FULL-SCREEN-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3ACREATE-WEB-MENU-FULL-SCREEN-20GENERIC-FUNCTION-29" >CREATE-WEB-MENU-FULL-SCREEN</a></span></span> <span class="locative-args">CLOG-WEB-MENU-BAR &amp;KEY HTML-ID</span></span></p>
<p>Add as last item in menu bar to allow for a full screen
icon ⤢ and full screen mode.</p></li>
</ul>
<p><a id='x-28CLOG-WEB-3ACREATE-WEB-MENU-ICON-20GENERIC-FUNCTION-29'></a></p>
<ul>
<li><p><span class=reference-bullet><span class=reference><span class="locative-type">[generic-function]</span> <span class="reference-object"><a href="#x-28CLOG-WEB-3ACREATE-WEB-MENU-ICON-20GENERIC-FUNCTION-29" >CREATE-WEB-MENU-ICON</a></span></span> <span class="locative-args">CLOG-WEB-MENU-BAR &amp;KEY IMAGE-URL ON-CLICK CLASS HTML-ID</span></span></p>
<p>Add icon as menu bar item.</p></li>
</ul>
<p><code>CLOG-WEB</code> - Interactions</p> <p><code>CLOG-WEB</code> - Interactions</p>
<p><a id='x-28CLOG-WEB-3ACLOG-WEB-ALERT-20FUNCTION-29'></a></p> <p><a id='x-28CLOG-WEB-3ACLOG-WEB-ALERT-20FUNCTION-29'></a></p>
@ -5395,7 +5522,7 @@ if confirmed or nil if canceled. <code>CANCEL-TEXT</code> is only displayed if m
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-WEB-20MGL-PAX-3ASECTION-29" title="CLOG Web Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-WEB-20MGL-PAX-3ASECTION-29" title="CLOG Web Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29">14 CLOG Body Objects</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29">15 CLOG Body Objects</a></h2>
<p>CLOG-Body - <code>CLOG</code> Body Objects</p> <p>CLOG-Body - <code>CLOG</code> Body Objects</p>
@ -5455,7 +5582,7 @@ or global objects.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-BODY-20MGL-PAX-3ASECTION-29" title="CLOG Body Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29">15 CLOG Window Objects</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29">16 CLOG Window Objects</a></h2>
<p>CLOG-Window - <code>CLOG</code> Window Objects</p> <p>CLOG-Window - <code>CLOG</code> Window Objects</p>
@ -5807,7 +5934,7 @@ on-storage event is fired for changes to :local storage keys.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-WINDOW-20MGL-PAX-3ASECTION-29" title="CLOG Window Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29">16 CLOG Document Objects</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29">17 CLOG Document Objects</a></h2>
<p>CLOG-Document - <code>CLOG</code> Document Objects</p> <p>CLOG-Document - <code>CLOG</code> Document Objects</p>
@ -5960,7 +6087,7 @@ If <code>ON-FULL-SCREEN-CHANGE-HANDLER</code> is nil unbind the event.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-DOCUMENT-20MGL-PAX-3ASECTION-29" title="CLOG Document Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29">17 CLOG Location Objects</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29">18 CLOG Location Objects</a></h2>
<p>Clog-Location - <code>CLOG</code> Location Objects</p> <p>Clog-Location - <code>CLOG</code> Location Objects</p>
@ -6076,7 +6203,7 @@ If <code>ON-FULL-SCREEN-CHANGE-HANDLER</code> is nil unbind the event.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-HELPERS-20MGL-PAX-3ASECTION-29" title="CLOG Helper Functions">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-LOCATION-20MGL-PAX-3ASECTION-29" title="CLOG Location Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-HELPERS-20MGL-PAX-3ASECTION-29" title="CLOG Helper Functions">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29">18 CLOG Navigator Objects</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29">19 CLOG Navigator Objects</a></h2>
<p>CLOG-Navigator - <code>CLOG</code> Navigator Objects</p> <p>CLOG-Navigator - <code>CLOG</code> Navigator Objects</p>
@ -6126,7 +6253,7 @@ If <code>ON-FULL-SCREEN-CHANGE-HANDLER</code> is nil unbind the event.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29" title="CLOG Framework internals and extensions">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-HELPERS-20MGL-PAX-3ASECTION-29" title="CLOG Helper Functions">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-NAVIGATOR-20MGL-PAX-3ASECTION-29" title="CLOG Navigator Objects">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29" title="CLOG Framework internals and extensions">&#8594;</a> <a href="#x-28CLOG-3A-40CLOG-HELPERS-20MGL-PAX-3ASECTION-29" title="CLOG Helper Functions">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-HELPERS-20MGL-PAX-3ASECTION-29">19 CLOG Helper Functions</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-HELPERS-20MGL-PAX-3ASECTION-29">20 CLOG Helper Functions</a></h2>
<p>Tutorial and demo helpers</p> <p>Tutorial and demo helpers</p>
@ -6217,7 +6344,7 @@ clog-user:<em>body</em> to last window openned to /repl.</p></li>
<p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-HELPERS-20MGL-PAX-3ASECTION-29" title="CLOG Helper Functions">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29" title="CLOG Framework internals and extensions">&#8634;</a></span></span></p> <p><span class="outer-navigation"><span class="navigation"> <a href="#x-28CLOG-3A-40CLOG-HELPERS-20MGL-PAX-3ASECTION-29" title="CLOG Helper Functions">&#8592;</a> <a href="#x-28CLOG-3A-40CLOG-MANUAL-20MGL-PAX-3ASECTION-29" title="The CLOG manual">&#8593;</a> <a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29" title="CLOG Framework internals and extensions">&#8634;</a></span></span></p>
<h2><a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29">20 CLOG Framework internals and extensions</a></h2> <h2><a href="#x-28CLOG-3A-40CLOG-INTERNALS-20MGL-PAX-3ASECTION-29">21 CLOG Framework internals and extensions</a></h2>
<p><em>* Introduction to Internals *</em></p> <p><em>* Introduction to Internals *</em></p>

71
source/clog-style.lisp Normal file
View file

@ -0,0 +1,71 @@
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;;;; CLOG - The Common Lisp Omnificent GUI ;;;;
;;;; (c) 2020-2021 David Botton ;;;;
;;;; License BSD 3 Clause ;;;;
;;;; ;;;;
;;;; clog-style.lisp ;;;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(cl:in-package :clog)
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;; Implementation - clog-style-block
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defclass clog-style-block (clog-element)()
(:documentation "CLOG style-blocks for applying css styles."))
;;;;;;;;;;;;;;;;;;;;;;;;
;; create-style-block ;;
;;;;;;;;;;;;;;;;;;;;;;;;
(defgeneric create-style-block (clog-obj
&key content media html-id auto-place)
(:documentation "Ideally style blocks should be created in the (head body)
clog-element but can be placed anywhere on a document and are applied as found
in the document. Although they are not 'scoped'. Media is a css media query
defaulting to all. To load CSS style sheets from files see LOAD-CSS in
clog-document. The add-style method can be used or can directly use the
TEXT method to access blocks content."))
(defmethod create-style-block ((obj clog-obj)
&key
(content "")
(media "all")
(html-id nil) (auto-place t))
(create-child obj (format nil "<style media='~A'>~A</style>"
(escape-string media)
(escape-string content))
:clog-type 'clog-style-block
:html-id html-id
:auto-place auto-place))
;;;;;;;;;;;;;;;
;; add-style ;;
;;;;;;;;;;;;;;;
(deftype selector-type () '(member :element :id :class))
(defgeneric add-style (clog-style-block selector-type selector style-alist)
(:documentation "Add to style-block an alist of css styles to affect
selector. For example:
(add-style :element \"a\" ((text-decoration none)))"))
(defmethod add-style ((obj clog-style-block) selector-type selector style-alist)
(let ((old-text (text obj)))
(setf (text obj) (format nil "~A ~A~A\{~{~A~}\}"
(if old-text
old-text
"")
(cond ((eq selector-type :id) "#")
((eq selector-type :element) "")
((eq selector-type :class) ".")
(t ""))
selector
(mapcar (lambda (s)
(format nil "~A:~A;"
(car s)
(cadr s)))
style-alist)))))

7
source/clog.lisp
View file

@ -35,6 +35,7 @@ embedded in a native template application.)"
(@clog-obj section) (@clog-obj section)
(@clog-element section) (@clog-element section)
(@clog-element-common section) (@clog-element-common section)
(@clog-style-block section)
(@clog-form section) (@clog-form section)
(@clog-canvas section) (@clog-canvas section)
(@clog-multimedia section) (@clog-multimedia section)
@ -459,6 +460,12 @@ embedded in a native template application.)"
(clog-table-column-group-item class) (clog-table-column-group-item class)
(create-table-column-group-item generic-function)) (create-table-column-group-item generic-function))
(defsection @clog-style-block (:title "CLOG Style Blocks")
"CLOG-Style-Block - CLOG Style Blocks"
(clog-style-block class)
(create-style-block generic-function)
(add-style generic-function))
(defsection @clog-form (:title "CLOG Form Objects") (defsection @clog-form (:title "CLOG Form Objects")
"CLOG-Form-Data" "CLOG-Form-Data"
(form-get-data generic-function) (form-get-data generic-function)

4
tutorial/12-tutorial.lisp
View file

@ -24,6 +24,10 @@
(in-package :clog-user) (in-package :clog-user)
(defun on-main (body) (defun on-main (body)
(let ((sb (create-style-block body)))
(add-style sb :element "a" '(("color" :orange)
("text-decoration" :none)))
(add-style sb :element "a:hover" '(("background-color" :gray))))
(create-div body :content (create-div body :content
"We are in on-main<br><br> "We are in on-main<br><br>
<h1>Pick a link</h1> <h1>Pick a link</h1>