→ ↺

# The CLOG manual

## Table of Contents

- 1 CLOG Getting Started
- 2 CLOG Programming Basics
- 3 CLOG Event Data
- 4 CLOG System
- 5 CLOG Utilities
- 6 CLOG Objects
- 7 CLOG Elements
- 8 Common CLOG Elements
- 9 CLOG Presentations
- 10 CLOG Data
- 11 CLOG DBI
- 12 CLOG Panels
- 13 CLOG Tree
- 14 CLOG Style Blocks
- 15 CLOG Form Objects
- 16 CLOG Canvas Objects
- 17 CLOG WebGL Objects
- 18 CLOG Multimedia Objects
- 19 CLOG Auth Objects
- 20 CLOG GUI Objects
- 21 CLOG Web Objects
- 22 CLOG Web DBI
- 23 CLOG Web Site Themes
- 24 CLOG Body Objects
- 25 CLOG Window Objects
- 26 CLOG Document Objects
- 27 CLOG Location Objects
- 28 CLOG Navigator Objects
- 29 CLOG jQuery Objects
- 30 CLOG Helper Functions
- 31 CLOG Framework internals and extensions

###### [in package CLOG]

The Common Lisp Omnificient GUI, CLOG for short, uses web technology to produce graphical user interfaces for applications locally or remotely. CLOG can take the place, or work along side, most cross platform GUI frameworks and website frameworks. The CLOG package starts up the connectivity to the browser or other websocket client (often a browser embedded in a native template application.)

← ↑ → ↺

## 1 CLOG Getting Started

CLOG - The Common Lisp Omnificent GUI

David Botton mailto:david@botton.com

License BSD 3-Clause License

The Common Lisp Omnificent GUI, CLOG for short, uses web technology to produce graphical user interfaces for applications locally or remotely. CLOG can take the place, or work alongside, most cross-platform GUI frameworks and website frameworks. The CLOG package starts up the connectivity to the browser or other websocket client (often a browser embedded in a native template application.)

STATUS: CLOG's API is mature and stable. Tools and new plugins always in the works. Check the github discussion boards for the latest.

Some potential applications for CLOG:

- Cross-platform GUIs and Reports

- Secure websites and complex interactive web applications

- Mobile software

- Massive multiplayer online games

- Monitoring software for embedded systems

- A fun way to teach programming and advanced multi-tasking parallel programming techniques. (CLOG is a parallel GUI)

- And the list goes on

The key to CLOG is the relationship it forms with a Browser window or Browser control compiled to native code. CLOG uses websockets for communications and the browser to render a GUI that maintains an active soft realtime connection. For most CLOG applications all programming logic, events and decisions are done on the server which can be local, or remote over the web.

CLOG is developed on an M1 MacBook with ECL and SBCL, it is tested fairly regulary with SBCL on Linux, Windows and Intel MacBook. It should in theory work on any system with Quicklisp and CLACK.

CLOG is in Quicklisp (ql:quickload :clog), but you may want to live on the bleeding edge and use Ultralisp or clone the github repo into your ~/common-lisp directory (or other quicklisp/asdf findable directory):

    cd ~/common-lisp
    git clone https://github.com/rabbibotton/clog.git

To load this package and work through tutorials (assuming you have Quicklisp configured.)

Note: If using portacle for Windows you will need to update Quicklisp use (ql:update-dist "quicklisp") You will also likely need to copy the sqlite3 dll from https://www.sqlite.org/download.html to portaclewinlib

1. Start emacs then M-x slime

2. In the REPL, run:

    CL-USER> (ql:quickload :clog)
    CL-USER> (clog:run-tutorial 1)

Tip for Windows WSL linux user. Install "sudo apt install xdg-utils" to install xdg-open so that run-tutorial uses the windows browser.

To see where the source, tutorial and demo files are:

    CL-USER> (clog:clog-install-dir)

You can the run the demos with:

    CL-USER> (ql:quickload :clog)
    CL-USER> (clog:run-demo 1)

The clog-db-admin tool can be run with:

    CL-USER> (ql:quickload :clog/tools)
    CL-USER> (clog-tools:clog-db-admin)

The clog-builder GUI Builder tool can be run with:

    CL-USER> (ql:quickload :clog/tools)
    CL-USER> (clog-tools:clog-builder)

You can also open a "clog-repl" window in your browser to play from the common-lisp repl:

    CL-USER> (in-package clog-user)
    CLOG-USER> (clog-repl)
    CLOG-USER> (setf (background-color *body*) "beige")
    CLOG-USER> (create-div *body* :content "Hello World!")

The clog-repl `URL` is http://127.0.0.1:8080/repl body will always refer to the last access of that `URL`.

To open a browser with the CLOG manual:

    CL-USER> (clog:open-manual)

Work your way through the tutorials. You will see how quick and easy it is to be a CLOGer. The next section also covers the basic programming concepts needed for mastering CLOG.

← ↑ → ↺

## 2 CLOG Programming Basics

- Prerequisites- You don't have to be an expert in Common Lisp but should know the basics

  - You don't need to know JavaScript

  - You don't need to know `HTML` but it helps unless someone else is doing the design work.

  - You have installed CLOG and (ql:quickload :clog) is working for you.

- Simple REPL techniques Tutorial

We first need to load CLOG

    CL-USER> (ql:quickload :clog)
    To load "clog":
      Load 1 ASDF system:
        clog
    ; Loading "clog"
    ................................................
    (:CLOG)

Next, we tell clog to start a clog-repl:

    CL-USER> (clog:clog-repl)
    Hunchentoot server is started.
    Listening on 0.0.0.0:8080.
    HTTP listening on    : 0.0.0.0:8080
    HTML Root            : ~/common-lisp/clog/static-files/
    Boot file for path / : /debug.html

    Use clog-user:*body* to access the clog-repl window.
    NIL

At this point CLOG should open a browser window to http://127.0.0.1:8008/repl

We can now enter the clog-user package and hack a way.

    CL-USER> (in-package clog-user)
    #<"CLOG-USER" package>
    CLOG-USER> (setf (background-color *body*) :red)

Something more than an empty lambda function is needed to do more. The tutorials are a good place to start with make CLOG apps in code, so here we are going to demonstrate the concepts using some REPL tricks to help developing CLOG apps in general.

(From here on, we will leave out the prompts and responses in our quotes of code.)

    (create-div *body* :content "Hello World")

If you have the browser on the screen you will see the results immediately. Try this line and you can watch it happen:

    (dotimes (n 10) (create-div *body* :content (format nil "Line ~A - Hello World" n)) (sleep .3))

We can also set and respond to events and set properties etc:

    (let ((tmp (create-button *body* :content "Click Me")))
      (set-on-click tmp (lambda (obj)(setf (hiddenp tmp) t))))

Since we already initialized CLOG let's use `SET-ON-NEW-WINDOW` to change our on-new-window handler (handler is just a made up name for a function that will handle an event).

    CLOG-USER> (set-on-new-window (lambda (body) (create-div body :content "Hello World!")))

Now any new window opened will not be using CLOG REPL but instead will execute our handler.

Important take aways to using CLOG from the REPL:

1. You will need to pass to a global from the running system whatever you want to tinker with in the live system from the REPL.

2. Any time you recompile the on-new-window handler or want to use a different one you will need to use `SET-ON-NEW-WINDOW`.

3. Similarily with all events, any time an event handler is recompiled or want to change the even hander, set-on-* function will need to be called.

← ↑ → ↺

## 3 CLOG Event Data

Some events in CLOG return in addition to the target event, event data. The data is passed in the second argument to the event handler as a property list. To retrieve the data use (getf data :property) the available properties (to use for :property) are based on the event type.

Events in clog-base

     :event-type   :mouse
     :x            x relative to the target
     :y            y relative to the target
     :screen-x     x relative to the users screen
     :screen-y     y relative to the users screen
     :which-button which mouse button clicked
     :alt-key      t or nil if alt-key held down
     :ctrl-key     t or nil if ctrl-key held down
     :shift-key    t or nil if shift-key held down
     :meta-key     t or nil if meta-key held down

     :event-type   :pointer
     :x            x relative to the target
     :y            y relative to the target
     :screen-x     x relative to the users screen
     :screen-y     y relative to the users screen
     :which-button which mouse button clicked
     :alt-key      t or nil if alt-key held down
     :ctrl-key     t or nil if ctrl-key held down
     :shift-key    t or nil if shift-key held down
     :meta-key     t or nil if meta-key held down

     :event-type     :touch
     :x              x relative to the target
     :y              y relative to the target
     :screen-x       x relative to the users screen
     :screen-y       y relative to the users screen
     :number-fingers number of fingers being used
     :alt-key        t or nil if alt-key held down
     :ctrl-key       t or nil if ctrl-key held down
     :shift-key      t or nil if shift-key held down
     :meta-key       t or nil if meta-key held down

     :event-type :keyboard
     :key        String of key pressed, with out modifiers like ctrl characters
     :key-code   The utf-16 value of :key
     :char-code  UTF-8 representation for key pressed when possible - deprecated
     :alt-key    t or nil if alt-key held down
     :ctrl-key   t or nil if ctrl-key held down
     :shift-key  t or nil if shift-key held down
     :meta-key   t or nil if meta-key held down

Events in clog-window

     :event-type :storage
     :key        local storage key that was updated (even in another window)
     :old-value  old key value
     :value      new key value

← ↑ → ↺

## 4 CLOG System

CLOG Startup and Shutdown

- [function] INITIALIZE ON-NEW-WINDOW-HANDLER &REST REST &KEY (HOST "0.0.0.0") (PORT 8080) (SERVER `:HUNCHENTOOT`) (LACK-MIDDLEWARE-LIST `NIL`) (EXTENDED-ROUTING `NIL`) (LONG-POLL-FIRST `NIL`) (BOOT-FILE "/boot.html") (BOOT-FUNCTION `NIL`) (STATIC-BOOT-HTML `NIL`) (STATIC-BOOT-JS `NIL`) (STATIC-ROOT (`MERGE-PATHNAMES` "./static-files/" (`ASDF/SYSTEM:SYSTEM-SOURCE-DIRECTORY` `:CLOG`))) (SSL `NIL`) (SSL-KEY-FILE `NIL`) (SSL-CERT-FILE `NIL`)

  Inititalize CLOG on a socket using `HOST` and `PORT` to serve `BOOT-FILE` as the default route to establish web-socket connections and static files located at `STATIC-ROOT`. The webserver used with CLACK can be chosen with `:SERVER` and middlewares prepended with `:LACK-MIDDLEWARE-LIST`, `NOT`(`0` `1`) supporting LACK.BUILDER DSL. If `EXTENDED-ROUTING` is t routes will match even if extend with additional / and additional paths. If LONG-POLLING-FIRST is t then long polling continues until the on-new-window-handler ends, if LONG-POLLING-FIRST is a number continues long polling until that number of queries to browser. LONG-POLLING-FIRST is used in webserver applications to enable crawling of your website. If CLOG was already initialized and not shut down, this function does the same as set-on-new-window (does not change the static-root). If `ON-NEW-WINDOW-HANDLER` is nil no handler is set and none is removed. `STATIC-ROOT` by default is the "directory CLOG is installed in ./static-files" If the variable clog:*overide-static-root* is set `STATIC-ROOT` will be ignored. If `BOOT-FILE` is nil no default boot-file will be set for root path, i.e. /. If static-boot-js is t then boot.js is served from the file /js/boot.js instead of the compiled version. If static-boot-html is t if boot.html is not present will use compiled version otherwise if set to nil (default) if a boot file not found returns returns a blank page, if it is set to :error will signal an error and if set to a string will display the string. boot-function if set is called with the url and the contents of boot-file and its return value replaces the contents sent to the brower, this allows adding content for search engine optimization, see tutorial 12 for an example. If port is nil or 0 a random available port number is chosen.

- [variable] *STATIC-ROOT* NIL

  Contains the static-root setting after initialization.

- [variable] *CLOG-PORT* 8080

  Port this instance of clog was started on

- [variable] *CLOG-DEBUG* NIL

  Set a debug hook that is called for every event with (event data) that must be (funcall event data).

- [function] SET-ON-NEW-WINDOW ON-NEW-WINDOW-HANDLER &KEY (PATH "/") (BOOT-FILE "/boot.html")

  Set or change the `ON-NEW-WINDOW-HANDLER` for `PATH` using BOOT_FILE. Paths should always begin with a forward slash '/'. If `PATH` is set to :default any path without another route and there is no static file matching the requested path `ON-NEW-WINDOW-HANDLER` and `BOOT-FILE` will be used. If `BOOT-FILE` is nil path is removed.

- [function] IS-RUNNING-P

- [function] SHUTDOWN

  Shutdown CLOG.

- [function] DEBUG-MODE OBJ

  Turn on browser console debugging for `OBJ`'s connection.

- [function] OPEN-BROWSER &KEY (URL (`FORMAT` `NIL` "http://127.0.0.1:~A" `*CLOG-PORT*`))

  Launch on os a web browser on local machine to `URL`. See `OPEN-WINDOW` for openning windows on remote machines.

← ↑ → ↺

## 5 CLOG Utilities

Concurrent Hash Tables

- [function] MAKE-HASH-TABLE* &REST ARGS

  Use native concurrent hash tables

Declerative Syntax Support

- [macro] WITH-CLOG-CREATE OBJ SPEC &BODY BODY

  To use the macro you remove the create- from the create functions. The clog-obj passed as the first parameter of the macro is passed as the parent obj to the declared object, after that nested levels of decleraton are used as the parent clog-obj. To bind a variable to any created clog object using :bind var. See tutorial 33 and 22 for examples. All create- symbols must be in or used by package.

CLOG ID utilities

- [function] GENERATE-ID

  Generate unique ids for use in scripts.

- [function] RANDOM-HEX-STRING

  Generate cryptographic grade random ids for use in connections.

CLOG JS utilities

- [function] JS-TRUE-P VALUE

  Return true if `VALUE` equalp the string true

- [function] P-TRUE-JS VALUE

  Return "true" if `VALUE` t

- [function] JS-ON-P VALUE

  Return true if `VALUE` equalp the string on

- [function] P-ON-JS VALUE

  Return "on" if `VALUE` t or return "off"

- [function] ESCAPE-STRING STR &KEY (NO-NIL `NIL`) (HTML `NIL`)

  Escape `STR` for sending to browser script. If no-nil is t (default is nil) if str is `NIL` returns empty string otherwise returns nil. If html is t the quotes are changed to html entities and n and r are eliminated. Escape string is used for wire readiness i.e. ability to be evaluated client side and not for security purposes or html escapes.

- [function] LF-TO-BR STR

  Change line feeds to
  .

- [function] JS-TO-INTEGER VALUE &KEY (DEFAULT 0)

  Returns two values first as an integer and second the original value

- [function] JS-TO-FLOAT VALUE &KEY (DEFAULT 0.0d0)

  Returns two values first as a float and second the original value

CLOG Color utilities

- [function] RGB RED GREEN BLUE

  Return `RGB` string, red green and blue may be 0-255

- [function] RGB-TO-HEX RGB

  Return hex #rrggbb from rgb(red,green,blue)

- [function] RGBA RED GREEN BLUE ALPHA

  Return `RGBA` string, red green and blue may be 0-255, alpha 0.0 - 1.0

- [function] HSL HUE SATURATION LIGHTNESS

  Return `HSL` string, hue 0-360, saturation and lightness 0%-100%

- [function] HSLA HUE SATURATION LIGHTNESS ALPHA

  Return `HSLA` string, hue 0-360, saturation and lightness 0%-100%, alpha 0.0 - 1.0

CLOG Unit utilities

- [function] UNIT UNIT-TYPE VALUE

  produce a string from numeric value with `UNIT-TYPE` appended.

- [function] UNIT* UNIT-TYPE VALUE

  Returns value and if no unit was specified on value unit added unless value is empty string or nil.

← ↑ → ↺

## 6 CLOG Objects

CLOG-Obj - Base class for CLOG Objects

- [class] CLOG-OBJ

  CLOG objects (clog-obj) encapsulate the connection between lisp and an `HTML` DOM element.

- [generic-function] PARENT CLOG-OBJ

  Returns the clog-obj of the obj that was used as creation parent if was set or nil. This is not per se the parent in the DOM.

CLOG-Obj - General Properties

- [generic-function] PROPERTY CLOG-OBJ PROPERTY-NAME &KEY DEFAULT-ANSWER

  Get/Setf html property.

CLOG-Obj - General Methods

- [generic-function] HEIGHT CLOG-OBJ

  Get/Setf html height in pixels.

- [generic-function] WIDTH CLOG-OBJ

  Get/Setf html width in pixels.

- [generic-function] FOCUS CLOG-OBJ

  Focus on `CLOG-OBJ`

- [generic-function] BLUR CLOG-OBJ

  Remove focus from `CLOG-OBJ`

CLOG-Obj - Low Level

- [variable] *STORE-NEW-OBJECTS* NIL

  Dynamic variable that when true every create-* or attach-* will also create a connection-data-item keyed by the html-id

- [generic-function] CONNECTION-DATA CLOG-OBJ

  Get connection-data that is associated with clog-obj's connection that will persist regardless of thread calling. The event hooks are stored in this string based hash in the format of: "html-id:event-name" => #'event-handler. clog-* keys are reserved for internal use of clog.

  The following default keys are set: "clog-body" clog-body of this connection, see `CONNECTION-BODY` "clog-path" html path used, see `CONNECTION-PATH` "clog-sync" sempaphore used for syncing events, see `CONNECTION-SYNC`

- [generic-function] CONNECTION-DATA-ITEM CLOG-OBJ ITEM-NAME

  Get/Setf item-name from connection-data.

- [generic-function] REMOVE-CONNECTION-DATA-ITEM CLOG-OBJ ITEM-NAME

  Remove item-name from connection-data.

- [generic-function] CONNECTION-BODY CLOG-OBJ

  Get connection's clog-body.

- [generic-function] CONNECTION-PATH CLOG-OBJ

  Get the `HTML` passed used to make the connection.

- [generic-function] CONNECTION-SYNC CLOG-OBJ

  Get connection's clog-sync for optional syncing events.

- [macro] WITH-SYNC-EVENT (CLOG-OBJ) &BODY BODY

  Place at start of event to serialize access to the event. All events in an application share per connection the same queue of serialized events.

- [generic-function] VALIDP CLOG-OBJ

  Returns true if connection is valid on this `CLOG-OBJ`.

- [macro] WITH-CONNECTION-CACHE (CLOG-OBJ) &BODY BODY

  Caches writes to the connection-id of `CLOG-OBJ` until flushed with `FLUSH-CONNECTION-CACHE` or a query is made.

- [function] FLUSH-CONNECTION-CACHE CLOG-OBJ

  Flush connection cache if on `CLOG-OBJ` is located on.

CLOG-Obj - Internals for Extensions and Plugins

- [generic-function] HTML-ID CLOG-OBJ

  Internal html-id of clog-obj. (Internal)

- [generic-function] SCRIPT-ID CLOG-OBJ

  Return the script id for `CLOG-OBJ` based on the html-id set during attachment. (Private)

- [generic-function] EXECUTE CLOG-OBJ METHOD

  Execute the JavaScript `METHOD` on `OBJ`. Returns `CLOG-OBJ`. see `JQUERY-EXECUTE` (Internal)

- [generic-function] QUERY CLOG-OBJ METHOD &KEY DEFAULT-ANSWER

  Execute the JavaScript query `METHOD` on `OBJ` and return result or if time out `DEFAULT-ANSWER`. see `JQUERY-QUERY` (Internal)

- [generic-function] JS-EXECUTE CLOG-OBJ SCRIPT

  Execute JavaScript `SCRIPT` on browser. `CLOG-OBJ` is used to obtain the connection the script should run on. Result is discarded, return `CLOG-OBJ`. (Internal)

- [generic-function] JS-QUERY CLOG-OBJ SCRIPT &KEY DEFAULT-ANSWER

  Execute JavaScript `SCRIPT` on browser and return result. `CLOG-OBJ` us used to obtain the connection the script should run on. (Internal)

- [generic-function] SET-ON-EVENT CLOG-OBJ EVENT-NAME HANDLER &KEY CANCEL-EVENT ONE-TIME

  Set a `HANDLER` for `EVENT-NAME` on `CLOG-OBJ`. If handler is nil unbind all event handlers. (Internal)

- [generic-function] SET-ON-EVENT-WITH-DATA CLOG-OBJ EVENT-NAME HANDLER &KEY CANCEL-EVENT ONE-TIME

  Set a `HANDLER` for `EVENT-NAME` on `CLOG-OBJ`. If handler is nil unbind all event handlers. Handler is called with a data option passed from javascript calling the jQuery custom event mechanism .trigger('event_name', data) (Internal)

CLOG-Obj - Event Handling

- [generic-function] SET-ON-RESIZE CLOG-OBJ ON-RESIZE-HANDLER

  Set the `ON-RESIZE-HANDLER` for `CLOG-OBJ`. If `ON-RESIZE-HANDLER` is nil unbind the event. In most modern browser this only works on the clog-window object

- [generic-function] SET-ON-FOCUS CLOG-OBJ ON-FOCUS-HANDLER

  Set the `ON-FOCUS-HANDLER` for `CLOG-OBJ`. If `ON-FOCUS-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-BLUR CLOG-OBJ ON-BLUR-HANDLER

  Set the `ON-BLUR-HANDLER` for `CLOG-OBJ`. If `ON-BLUR-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-CHANGE CLOG-OBJ ON-CHANGE-HANDLER

  Set the `ON-CHANGE-HANDLER` for `CLOG-OBJ`. If `ON-CHANGE-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-INPUT CLOG-OBJ ON-INPUT-HANDLER

  Set the `ON-INPUT-HANDLER` for `CLOG-OBJ`. If `ON-INPUT-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-DRAG-START CLOG-OBJ ON-DRAG-START-HANDLER &KEY DRAG-DATA DRAG-TYPE

  Set the `ON-DRAG-START-HANDLER` for `CLOG-OBJ`. If `ON-DRAG-START-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-DRAG CLOG-OBJ ON-DRAG-HANDLER

  Set the `ON-DRAG-HANDLER` for `CLOG-OBJ`. If `ON-DRAG-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-DRAG-END CLOG-OBJ ON-DRAG-END-HANDLER

  Set the `ON-DRAG-END-HANDLER` for `CLOG-OBJ`. If `ON-DRAG-END-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-DRAG-ENTER CLOG-OBJ ON-DRAG-ENTER-HANDLER

  Set the `ON-DRAG-ENTER-HANDLER` for `CLOG-OBJ`. If `ON-DRAG-ENTER-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-DRAG-LEAVE CLOG-OBJ ON-DRAG-LEAVE-HANDLER

  Set the `ON-DRAG-LEAVE-HANDLER` for `CLOG-OBJ`. If `ON-DRAG-LEAVE-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-DRAG-OVER CLOG-OBJ ON-DRAG-OVER-HANDLER

  Set the `ON-DRAG-OVER-HANDLER` for `CLOG-OBJ`. If `ON-DRAG-OVER-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-DROP CLOG-OBJ ON-DROP-HANDLER &KEY DRAG-TYPE

  Set the `ON-DROP-HANDLER` for `CLOG-OBJ`. If `ON-DROP-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-FOCUS-IN CLOG-OBJ ON-FOCUS-IN-HANDLER

  Set the `ON-FOCUS-IN-HANDLER` for `CLOG-OBJ`. If `ON-FOCUS-IN-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-FOCUS-OUT CLOG-OBJ ON-FOCUS-OUT-HANDLER

  Set the `ON-FOCUS-OUT-HANDLER` for `CLOG-OBJ`. If `ON-FOCUS-OUT-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-RESET CLOG-OBJ ON-RESET-HANDLER

  Set the `ON-RESET-HANDLER` for `CLOG-OBJ`. If `ON-RESET-HANDLER` is nil unbind the event. This event is activated by using reset on a form. If this event is bound, you must call the form reset manually.

- [generic-function] SET-ON-SEARCH CLOG-OBJ ON-SEARCH-HANDLER

  Set the `ON-SEARCH-HANDLER` for `CLOG-OBJ`. If `ON-SEARCH-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-SELECT CLOG-OBJ ON-SELECT-HANDLER

  Set the `ON-SELECT-HANDLER` for `CLOG-OBJ`. If `ON-SELECT-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-SUBMIT CLOG-OBJ ON-SUBMIT-HANDLER

  Set the `ON-SUBMIT-HANDLER` for `CLOG-OBJ`. If `ON-SUBMIT-HANDLER` is nil unbind the event. This event is activated by using submit on a form. If this event is bound, you must call the (submit clog-form) manually if wish the form action to be run. See CLOG-Form `SUBMIT` for more details.

- [generic-function] SET-ON-SELECT CLOG-OBJ ON-SELECT-HANDLER

  Set the `ON-SELECT-HANDLER` for `CLOG-OBJ`. If `ON-SELECT-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-CONTEXT-MENU CLOG-OBJ ON-CONTEXT-MENU-HANDLER &KEY ONE-TIME

  Set the `ON-CONTEXT-MENU-HANDLER` for `CLOG-OBJ`. If `ON-CONTEXT-MENU-HANDLER` is nil unbind the event. Setting on-mouse-right-click will replace this handler. If `:ONE-TIME` unbind event on right click.

- [generic-function] SET-ON-CLICK CLOG-OBJ ON-CLICK-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-CLICK-HANDLER` for `CLOG-OBJ`. If `ON-CLICK-HANDLER` is nil unbind the event. Setting this event will replace an on-mouse click if set. If `:ONE-TIME` unbind event on click.

- [generic-function] SET-ON-DOUBLE-CLICK CLOG-OBJ ON-DOUBLE-CLICK-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-DOUBLE-CLICK-HANDLER` for `CLOG-OBJ`. If `ON-DOUBLE-CLICK-HANDLER` is nil unbind the event. Setting the on-mouse-double-click event will replace this handler.

- [generic-function] SET-ON-MOUSE-CLICK CLOG-OBJ ON-MOUSE-CLICK-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-MOUSE-CLICK-HANDLER` for `CLOG-OBJ`. If `ON-MOUSE-CLICK-HANDLER` is nil unbind the event. Setting this event will replace on an on-click event.

- [generic-function] SET-ON-MOUSE-DOUBLE-CLICK CLOG-OBJ ON-MOUSE-DOUBLE-CLICK-HANDLER &KEY ONE-TIME

  Set the `ON-MOUSE-DOUBLE-CLICK-HANDLER` for `CLOG-OBJ`. If `ON-MOUSE-DOUBLE-CLICK-HANDLER` is nil unbind the event. Setting this event will replace on an on-double-click event.

- [generic-function] SET-ON-MOUSE-RIGHT-CLICK CLOG-OBJ ON-MOUSE-RIGHT-CLICK-HANDLER &KEY ONE-TIME

  Set the `ON-MOUSE-RIGHT-CLICK-HANDLER` for `CLOG-OBJ`. If `ON-MOUSE-RIGHT-CLICK-HANDLER` is nil unbind the event. Setting this event will replace on an on-context-menu event.

- [generic-function] SET-ON-MOUSE-ENTER CLOG-OBJ ON-MOUSE-ENTER-HANDLER

  Set the `ON-MOUSE-ENTER-HANDLER` for `CLOG-OBJ`. If `ON-MOUSE-ENTER-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-MOUSE-LEAVE CLOG-OBJ ON-MOUSE-LEAVE-HANDLER

  Set the `ON-MOUSE-LEAVE-HANDLER` for `CLOG-OBJ`. If `ON-MOUSE-LEAVE-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-MOUSE-OVER CLOG-OBJ ON-MOUSE-OVER-HANDLER

  Set the `ON-MOUSE-OVER-HANDLER` for `CLOG-OBJ`. If `ON-MOUSE-OVER-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-MOUSE-OUT CLOG-OBJ ON-MOUSE-OUT-HANDLER

  Set the `ON-MOUSE-OUT-HANDLER` for `CLOG-OBJ`. If `ON-MOUSE-OUT-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-MOUSE-DOWN CLOG-OBJ ON-MOUSE-DOWN-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-MOUSE-DOWN-HANDLER` for `CLOG-OBJ`. If `ON-MOUSE-DOWN-HANDLER` is nil unbind the event. If cancel-event is true event does not bubble.

- [generic-function] SET-ON-MOUSE-UP CLOG-OBJ ON-MOUSE-UP-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-MOUSE-UP-HANDLER` for `CLOG-OBJ`. If `ON-MOUSE-UP-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-MOUSE-MOVE CLOG-OBJ ON-MOUSE-MOVE-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-MOUSE-MOVE-HANDLER` for `CLOG-OBJ`. If `ON-MOUSE-MOVE-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-POINTER-ENTER CLOG-OBJ ON-POINTER-ENTER-HANDLER

  Set the `ON-POINTER-ENTER-HANDLER` for `CLOG-OBJ`. If `ON-POINTER-ENTER-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-POINTER-LEAVE CLOG-OBJ ON-POINTER-LEAVE-HANDLER

  Set the `ON-POINTER-LEAVE-HANDLER` for `CLOG-OBJ`. If `ON-POINTER-LEAVE-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-POINTER-OVER CLOG-OBJ ON-POINTER-OVER-HANDLER

  Set the `ON-POINTER-OVER-HANDLER` for `CLOG-OBJ`. If `ON-POINTER-OVER-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-POINTER-OUT CLOG-OBJ ON-POINTER-OUT-HANDLER

  Set the `ON-POINTER-OUT-HANDLER` for `CLOG-OBJ`. If `ON-POINTER-OUT-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-POINTER-DOWN CLOG-OBJ ON-POINTER-DOWN-HANDLER &KEY CAPTURE-POINTER ONE-TIME CANCEL-EVENT

  Set the `ON-POINTER-DOWN-HANDLER` for `CLOG-OBJ`. If `ON-POINTER-DOWN-HANDLER` is nil unbind the event. If cancel event is t the even does not bubble.

- [generic-function] SET-ON-POINTER-UP CLOG-OBJ ON-POINTER-UP-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-POINTER-UP-HANDLER` for `CLOG-OBJ`. If `ON-POINTER-UP-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-POINTER-CANCEL CLOG-OBJ ON-POINTER-CANCEL-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-POINTER-CANCEL-HANDLER` for `CLOG-OBJ`. If `ON-POINTER-CANCEL-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-POINTER-MOVE CLOG-OBJ ON-POINTER-MOVE-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-POINTER-MOVE-HANDLER` for `CLOG-OBJ`. If `ON-POINTER-MOVE-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-TOUCH-START CLOG-OBJ ON-TOUCH-START-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-TOUCH-START-HANDLER` for `CLOG-OBJ`. If `ON-TOUCH-START-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-TOUCH-MOVE CLOG-OBJ ON-TOUCH-MOVE-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-TOUCH-MOVE-HANDLER` for `CLOG-OBJ`. If `ON-TOUCH-MOVE-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-TOUCH-END CLOG-OBJ ON-TOUCH-END-HANDLER &KEY ONE-TIME CANCEL-EVENT

  Set the `ON-TOUCH-END-HANDLER` for `CLOG-OBJ`. If `ON-TOUCH-END-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-TOUCH-CANCEL CLOG-OBJ ON-TOUCH-CANCEL-HANDLER

  Set the `ON-TOUCH-CANCEL-HANDLER` for `CLOG-OBJ`. If `ON-TOUCH-CANCEL-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-CHARACTER CLOG-OBJ ON-CHARACTER-HANDLER &KEY ONE-TIME DISABLE-DEFAULT

  Set the `ON-CHARACTER-HANDLER` for `CLOG-OBJ`. If `ON-CHARACTER-HANDLER` is nil unbind the event. If disable-default is t default key bindings in browser will not occur. Setting this event to nil will unbind on-key-press also.

- [generic-function] SET-ON-KEY-DOWN CLOG-OBJ ON-KEY-DOWN-HANDLER &KEY ONE-TIME DISABLE-DEFAULT

  Set the `ON-KEY-DOWN-HANDLER` for `CLOG-OBJ`. If disable-default is t default key bindings in browser will not occur. If `ON-KEY-DOWN-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-KEY-UP CLOG-OBJ ON-KEY-UP-HANDLER &KEY ONE-TIME

  Set the `ON-KEY-UP-HANDLER` for `CLOG-OBJ`. If `ON-KEY-UP-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-KEY-PRESS CLOG-OBJ ON-KEY-PRESS-HANDLER &KEY ONE-TIME DISABLE-DEFAULT

  Set the `ON-KEY-PRESS-HANDLER` for `CLOG-OBJ`. If `ON-KEY-PRESS-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-COPY CLOG-OBJ ON-COPY-HANDLER

  Set the `ON-COPY-HANDLER` for `CLOG-OBJ`. If `ON-COPY-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-CUT CLOG-OBJ ON-CUT-HANDLER

  Set the `ON-CUT-HANDLER` for `CLOG-OBJ`. If `ON-CUT-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-PASTE CLOG-OBJ HANDLER

  Set the ON-PASTE-HANDLER for `CLOG-OBJ`. If ON-PASTE-HANDLER is nil unbind the event.

← ↑ → ↺

## 7 CLOG Elements

CLOG-Element - Class for CLOG Elements

- [class] CLOG-ELEMENT CLOG-OBJ

  CLOG Element Objects is the base class for all html element objects.

CLOG-Element - Low Level Creation

- [generic-function] CREATE-ELEMENT CLOG-OBJ HTML-TAG &REST ALL-ARGS &KEY CONTENT CLOG-TYPE HTML-ID AUTO-PLACE &ALLOW-OTHER-KEYS

  Create a new `CLOG-ELEMENT` as child of `CLOG-OBJ` with any possible tag and keywords.

- [generic-function] CREATE-CHILD CLOG-OBJ HTML &KEY HTML-ID AUTO-PLACE CLOG-TYPE

  Create a new `CLOG-ELEMENT` or sub-type of `CLOG-TYPE` from `HTML` as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`, you can also set auto-place to :bottom or :top. If `HTML-ID` is nil one will be generated.

- [generic-function] ATTACH-AS-CHILD CLOG-OBJ HTML-ID &KEY CLOG-TYPE NEW-ID

  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 and must be in DOM, ie placed or auto-placed. If new-id is true the `HTML-ID` after attachment is changed to one unique to this session.

CLOG-Element - DOM Placement

- [generic-function] PLACE-AFTER CLOG-OBJ NEXT-OBJ

  Places `NEXT-OBJ` after `CLOG-OBJ` in DOM

- [generic-function] PLACE-BEFORE CLOG-OBJ NEXT-OBJ

  Places `NEXT-OBJ` before `CLOG-OBJ` in DOM

- [generic-function] PLACE-INSIDE-TOP-OF CLOG-OBJ NEXT-OBJ

  Places `NEXT-OBJ` inside top of `CLOG-OBJ` in DOM

- [generic-function] PLACE-INSIDE-BOTTOM-OF CLOG-OBJ NEXT-OBJ

  Places `NEXT-OBJ` inside bottom of `CLOG-OBJ` in DOM

- [generic-function] PLACE-TEXT-INSIDE-TOP-OF CLOG-OBJ TEXT

  Places text inside top of `CLOG-OBJ` in DOM

- [generic-function] PLACE-TEXT-INSIDE-BOTTOM-OF CLOG-OBJ TEXT

  Places text inside bottom of `CLOG-OBJ` in DOM

CLOG-Element - General Properties

- [generic-function] STYLE CLOG-ELEMENT STYLE-NAME &KEY DEFAULT-ANSWER

  Get/Setf css style.

- [generic-function] SET-STYLES CLOG-ELEMENT STYLE-LIST

  Set css styles using a list of lists of name value pairs.

- [generic-function] ATTRIBUTE CLOG-ELEMENT ATTRIBUTE-NAME &KEY DEFAULT-ANSWER

  Get/Setf html tag attribute. (eg. src on img tag)

- [generic-function] REMOVE-ATTRIBUTE CLOG-ELEMENT ATTRIBUTE-NAME

  Remove html tag attribute. (eg. src on img tag)

- [generic-function] HAS-ATTRIBUTE CLOG-ELEMENT ATTRIBUTE-NAME

  Returns t if `ATTRIBUTE-NAME` exists on `CLOG-ELEMENT`

CLOG-Element - Properties

- [generic-function] ACCESS-KEY CLOG-ELEMENT

  Get/Setf access-key. Used for hot key access to element. special key + Access_Key

  The special key per browser and platform is:

      Browser              Windows     Linux          Mac
      -----------------    -------     -----          ---
      Internet Explorer     Alt         N/A           N/A
      Chrome                Alt         Alt       Control|Alt
      Firefox             Alt|Shift   Alt|Shift   Control|Alt
      Safari                Alt         N/A       Control|Alt
      Opera 15+             Alt         Alt           Alt

- [generic-function] ADVISORY-TITLE CLOG-ELEMENT

  Get/Setf advisory title of Element, usually used for body and image maps but creates in forms and many elements a tool tip.

- [generic-function] CSS-CLASS-NAME CLOG-ELEMENT

  Get/Setf css-class-name. CSS Class name, can be multiple seperated by <space>. See add-class, remove-class and toggle-class methods for adding and removing individual or groups of classes in an easier way.

- [generic-function] EDITABLEP CLOG-ELEMENT

  Get/Setf editable. This will make almost any element with content editable, even non-form types in most browsers.

- [generic-function] DRAGGABLEP CLOG-ELEMENT

  Get/Setf draggablep. In order to make an object draggable in addition to Draggable being true the on-drag-start event must be bound as well to set the drag-text. To receive a drop, you need to bind on-drop. See clog-base.lisp

- [generic-function] VISIBLEP CLOG-ELEMENT

  Get/Setf visiblep. This will cause the Element to no longer be visible but it will still take up space where it was in the layout. Use hiddenp to also remove from layout. Note: that each property, visiblep, hiddenp and display (None) all work independantly and do not reflect the actual client side visual state but the property state. To check if an object is for sure not visible would require checking all three properties.

- [generic-function] HIDDENP CLOG-ELEMENT

  Get/Setf hiddenp. The hidden property will make an element invisible, however unlike visiblep, hiddenp implies the element is semantically not relevant not just visually and will also remove it from layout similar to setting display (None).

- [generic-function] INNER-HTML CLOG-ELEMENT

  Get/Setf inner-html. This will completely replace the inner html of an element. This will remove any Elements within Element from the DOM. If those elements were created in CLOG they are still available and can be placed in the DOM again using the placement methods. However if they were created through html writes or otherwise not assigned an ID by CLOG, they are lost forever.

- [generic-function] OUTER-HTML CLOG-ELEMENT

  Get/Setf outer-html. Returns the `HTML` for Element and all its contents

- [generic-function] SPELLCHECKP CLOG-ELEMENT

  Get/Setf spellcheckp. If true Element is subject to browser spell checking if Editable is also true.

- [generic-function] TAB-INDEX CLOG-ELEMENT

  Get/Setf tab-index. If -1 not focusable. If 0 element in tab index. If >0 sets order in tab index. Normally index follows normal sequence of elements.

- [generic-function] TEXT CLOG-ELEMENT

  Get/Setf text.

  <tag>Text Content</tag> - Text content is the content contained by the tag including child tags. This should not be confused with the 'Value' of a Form Tag. Use `TEXT-VALUE` for just the text associated with <tag>. (See clog-form.lisp)

- [generic-function] TEXT-VALUE CLOG-ELEMENT

  Get/Setf the first text node of `CLOG-ELEMENT`. Unlike `TEXT` this is only the text associated with this <tag> Additionally works for forms and can get/setf the values.

- [type] TEXT-DIRECTION-TYPE

- [generic-function] TEXT-DIRECTION CLOG-ELEMENT

  Get/Setf BiDi text-direction.

- [generic-function] LANGUAGE-CODE CLOG-ELEMENT

  Get/Setf language-code.

- [generic-function] POSITION-LEFT CLOG-ELEMENT

  Position from left in pixels relative to Element's parent in the DOM.

- [generic-function] POSITION-TOP CLOG-ELEMENT

  Position from top in pixels relative to Element's parent in the DOM.

- [generic-function] CLIENT-LEFT CLOG-ELEMENT

  Get client-left. The width of the left border of an element in pixels. It does not include the margin or padding.

- [generic-function] CLIENT-TOP CLOG-ELEMENT

  Get client-top. The width of the top border of an element in pixels. It does not include the margin or padding.

- [generic-function] CLIENT-WIDTH CLOG-ELEMENT

  Get client-width. Inner width of an element in pixels. CSS width + CSS padding - width of vertical scrollbar (if present) Does not include the border or margin.

- [generic-function] CLIENT-HEIGHT CLOG-ELEMENT

  Get client-right. Inner height of an element in pixels. CSS height + CSS padding - height of horizontal scrollbar (if present) Does not include the border or margin.

- [generic-function] OFFSET-LEFT CLOG-ELEMENT

  Position in pixels from left relative to the document.

- [generic-function] OFFSET-TOP CLOG-ELEMENT

  Position in pixels from top relative to the document.

- [generic-function] OFFSET-WIDTH CLOG-ELEMENT

  Get offset-width. CSS width + CSS padding + width of vertical scrollbar (if present) + Border

- [generic-function] OFFSET-HEIGHT CLOG-ELEMENT

  Get offset-height. CSS height + CSS padding + height of horizontal scrollbar (if present) + Border

- [generic-function] SCROLL-LEFT CLOG-ELEMENT

  Get scroll-left. The number of pixels that an element's content is scrolled to the left. For RTL languages is negative.

- [generic-function] SCROLL-TOP CLOG-ELEMENT

  Get scroll-top. The number of pixels that an element's content has been scrolled upward.

- [generic-function] SCROLL-WIDTH CLOG-ELEMENT

  Get scroll-width. Either the width in pixels of the content of an element or the width of the element itself, whichever is greater.

- [generic-function] SCROLL-HEIGHT CLOG-ELEMENT

  Get scroll-height. Height of an element's content, including content not visible on the screen due to overflow.

- [generic-function] HTML-TAG CLOG-ELEMENT

  Get html-tag.

CLOG-Element - Styles

- [type] BOX-SIZING-TYPE

- [generic-function] BOX-SIZING CLOG-ELEMENT

  Get/Setf box-sizing. Affects if height and width properteries represent just the content or the border, marging, padding, scroll and conent area as a whole. The default is content-box

- [type] CLEAR-SIDE-TYPE

- [generic-function] CLEAR-SIDE CLOG-ELEMENT

  Get/Setf clear-side. When using 'float' for layout sets if the right or left side of block should be clear of any 'floated' Element.

- [type] FLOAT-WRAP-TYPE

- [generic-function] FLOAT-WRAP CLOG-ELEMENT

  Get/Setf for element float left or right and other elements wrap around it.

- [type] DISPLAY-TYPE

- [generic-function] DISPLAY CLOG-ELEMENT

  Get/Setf display. Display sets the CSS Display property that handles how elements are treated by the browser layout engine.

      Common Values:

      none         - Remove Element from layout but remain in the DOM this is
                     similar to hiddenp, but not like visiblep that makes the
                     element not visible but still take up space in layout.

      block        - Displays an element starting on a new line and stretches
                     out to the left and right as far as it can. e.g. <div> by
                     default

      inline       - Wraps with text in a paragraph. e.g. <span> by default

      inline-block - Flows with paragraph but will always fill from left to
                     right.

      flex         - Turn this item in to a flexbox container. The flexbox
                     properties for container to adjust are:

                        justify-content - how items are spaced in flexbox
                        align-content - how items spaced when wrapped
                        align-items - when placed (from start, center, from end)
                        flex-direction - flex-box left<>right or top<>bottom
                        flex-wrap - keep in one line or wrap to more

                     The properties to adjust for items in the flexbox are:

                        flex - sets the relative grow,shrink,basis
                        order - sets visual item order in flexbox
                        align-self - override flexbox's align-items for item

                     :flex-start    (---  )
                     :flex-end      (   ---)
                     :center        ( --- )
                     :space-between (-  -  -)
                     :space-around  ( -   -   - )
                     :space-evenly  ( - - - )

      grid         - Turn this item in to a grid container block level. The grid
                     properties to adjust for container are:

                        grid-template-columns
                        grid-template-rows
                        grid-template-areas
                        column-gap
                        row-gap
                        align-items
                        justify-items
                        justify-content - align the grid as a whole in container
                        align-content - align the grid as a whole in container
                        grid-auto-columns
                        grid-auto-rows
                        grid-auto-flow

                      The properties to adjust for grid items is:

                        grid-column-start
                        grid-column-end
                        grid-row-start
                        grid-row-end
                        align-self
                        justify-self

      inline-grid   - Turn this item in to a grid container inline level.

- [generic-function] ORDER CLOG-ELEMENT

  Get/Setf visual item order flexbox packing but not actual order in document or tab order etc.

- [generic-function] FLEX CLOG-ELEMENT

  Get item's flexbox relative grow, shrink, and basis

- [generic-function] SET-FLEX CLOG-ELEMENT &KEY GROW SHRINK FLEX-BASIS

  Set flex grow (default 0) shrink (default 1) and flex-basis (default :auto = use width or height) for `CLOG-ELEMENT`

- [type] FLEX-WRAP-TYPE

- [generic-function] FLEX-WRAP CLOG-ELEMENT

  Get/Setf direction of flexbox packing.

- [type] FLEX-DIRECTION-TYPE

- [generic-function] FLEX-DIRECTION CLOG-ELEMENT

  Get/Setf direction of flexbox packing.

- [generic-function] GRID-TEMPLATE-COLUMNS CLOG-ELEMENT

  Get/Setf grid-template-columns.

- [generic-function] GRID-TEMPLATE-ROWS CLOG-ELEMENT

  Get/Setf grid-template-rows.

- [generic-function] GRID-TEMPLATE-AREAS CLOG-ELEMENT

  Get/Setf grid-template-areas.

- [generic-function] COLUMN-GAP CLOG-ELEMENT

  Get/Setf column-gap.

- [generic-function] ROW-GAP CLOG-ELEMENT

  Get/Setf row-gap.

- [generic-function] GRID-AUTO-COLUMNS CLOG-ELEMENT

  Get/Setf grid-auto-columns.

- [generic-function] GRID-AUTO-ROWS CLOG-ELEMENT

  Get/Setf grid-auto-rows.

- [generic-function] GRID-AUTO-FLOW CLOG-ELEMENT

  Get/Setf grid-auto-flow.

- [generic-function] GRID-COLUMN-START CLOG-ELEMENT

  Get/Setf grid-column-start.

- [generic-function] GRID-COLUMN-END CLOG-ELEMENT

  Get/Setf grid-column-end.

- [generic-function] GRID-ROW-START CLOG-ELEMENT

  Get/Setf grid-row-start.

- [generic-function] GRID-ROW-END CLOG-ELEMENT

  Get/Setf grid-row-end.

- [type] ALIGN-ITEMS-TYPE

- [generic-function] ALIGN-ITEMS CLOG-ELEMENT

  Get/Setf align items in a flexbox/grid on column axis.

- [type] ALIGN-SELF-TYPE

- [generic-function] ALIGN-SELF CLOG-ELEMENT

  Get/Setf override align-items for this item in a flexbox/grid.

- [type] ALIGN-CONTENT-TYPE

- [generic-function] ALIGN-CONTENT CLOG-ELEMENT

  Get/Setf align content wrapped inline of a flexbox on opposite sides of each other or grid on column axis.

- [type] JUSTIFY-ITEMS-TYPE

- [generic-function] JUSTIFY-ITEMS CLOG-ELEMENT

  Get/Setf justify items in a grid on row axis.

- [type] JUSTIFY-SELF-TYPE

- [generic-function] JUSTIFY-SELF CLOG-ELEMENT

  Get/Setf override align this item in grid on row axis.

- [type] JUSTIFY-CONTENT-TYPE

- [generic-function] JUSTIFY-CONTENT CLOG-ELEMENT

  Get/Setf justify content for items inline of a flexbox or grid on row access.

- [type] OVERFLOW-TYPE

- [generic-function] OVERFLOW CLOG-ELEMENT

  Get/Setf overflow. How to handle overflow of contents of an element's box. The default is visible - no clipping.

- [type] OVERFLOW-X-TYPE

- [generic-function] OVERFLOW-X CLOG-ELEMENT

  Get/Setf overflow-x. How to handle overflow of contents of an element's box for X. The default is Visible - no clipping.

- [type] OVERFLOW-Y-TYPE

- [generic-function] OVERFLOW-Y CLOG-ELEMENT

  Get/Setf overflow-y. How to handle overflow of contents of an element's box for Y. The default is Visible - no clipping.

- [generic-function] Z-INDEX CLOG-ELEMENT

  Get/Setf z-index. Set stack order of element. Note: z-index only works on Elements with Position Type of absolute, relative and fixed.

- [type] RESIZABLE-TYPE

- [generic-function] RESIZABLE CLOG-ELEMENT

  Get/Setf resizable. If overflow is not set to visible, resizeable sets if element can be resized by user.

- [type] POSITIONING-TYPE

- [generic-function] POSITIONING CLOG-ELEMENT

  Get/Setf positioning. Determins how the properties left, right, top and bottom are interpreted.

  Static - According to document flow, position properties have no affect. Absolute - Position properties are relative to the first non-static element in the DOM before Element Fixed - Position properties are relative to browser window Relative - Position properties are relative to where the static position of the element would in the normal document flow.

- [generic-function] POSITION-TOP CLOG-ELEMENT

  Position from top in pixels relative to Element's parent in the DOM.

- [generic-function] POSITION-LEFT CLOG-ELEMENT

  Position from left in pixels relative to Element's parent in the DOM.

- [generic-function] SET-GEOMETRY CLOG-ELEMENT &KEY LEFT TOP RIGHT BOTTOM WIDTH HEIGHT UNITS

  Change the geometry `:LEFT` `:TOP` `:RIGHT` `:BOTTOM` `:WIDTH` `:HEIGHT` each optional. If any measure is missing a unit, `UNITS` (default :px) is used.

- [generic-function] LEFT CLOG-WINDOW

  Get/Setf browser x position.

- [generic-function] TOP CLOG-WINDOW

  Get/Setf browser y postion.

- [generic-function] RIGHT CLOG-ELEMENT

  Get/Setf right (defaults to use :px units).

- [generic-function] BOTTOM CLOG-ELEMENT

  Get/Setf bottom (defaults to use :px units).

- [generic-function] BOX-HEIGHT CLOG-ELEMENT

  Get/Setf box-height. Height based on box sizing.

- [generic-function] BOX-WIDTH CLOG-ELEMENT

  Get/Setf box-width. Width based on box sizing.

- [generic-function] MAXIMUM-HEIGHT CLOG-ELEMENT

  Get/Setf maximum-height.

- [generic-function] MAXIMUM-WIDTH CLOG-ELEMENT

  Get/Setf maximum-width.

- [generic-function] MINIMUM-HEIGHT CLOG-ELEMENT

  Get/Setf minimum-height.

- [generic-function] MINIMUM-WIDTH CLOG-ELEMENT

  Get/Setf minimum-width.

- [generic-function] INNER-HEIGHT CLOG-WINDOW

  Get/Setf inner height of browser window.

- [generic-function] INNER-WIDTH CLOG-WINDOW

  Get/Setf inner width of browser window.

- [generic-function] OUTER-HEIGHT CLOG-WINDOW

  Get/Setf outer height of browser window.

- [generic-function] OUTER-WIDTH CLOG-WINDOW

  Get/Setf outer width of browser window.

- [generic-function] OUTER-HEIGHT-TO-MARGIN CLOG-ELEMENT

  Get outer-height-to-margin. Includes padding and border and margin.

- [generic-function] OUTER-WIDTH-TO-MARGIN CLOG-ELEMENT

  Get outer-width-to-margin. Includes padding and border and margin.

- [generic-function] COLOR CLOG-ELEMENT

  Get/Setf color.

- [generic-function] OPACITY CLOG-ELEMENT

  Get/Setf opacity.

- [type] BACKGROUND-ATTACHMENT-TYPE

- [generic-function] BACKGROUND-ATTACHMENT CLOG-ELEMENT

  Get/Setf background-attachment.

- [generic-function] BACKGROUND-COLOR CLOG-ELEMENT

  Get/Setf background-color.

- [generic-function] BACKGROUND-IMAGE CLOG-ELEMENT

  Get/Setf background-image url. proper syntax is 'url(...)' | nil to clear

- [generic-function] BACKGROUND-POSITION CLOG-ELEMENT

  Get/Setf background-position. combination of 2 - left/right/center/top/bottom | %x %y | x y

- [type] BACKGROUND-ORIGIN-TYPE

- [generic-function] BACKGROUND-ORIGIN CLOG-ELEMENT

  Get/Setf background-origin. Background position property is relative to origin of: padding-box|border-box|content-box

- [type] BACKGROUND-REPEAT-TYPE

- [generic-function] BACKGROUND-REPEAT CLOG-ELEMENT

  Get/Setf background-repeat. repeat-x | repeat-y | ( repeat | space | round | no-repeat ) {1,2}

- [type] BACKGROUND-CLIP-TYPE

- [generic-function] BACKGROUND-CLIP CLOG-ELEMENT

  Get/Setf background-clip. If an element's background extends underneath its border box, padding box, or content box.

- [generic-function] BACKGROUND-SIZE CLOG-ELEMENT

  Get/Setf background-size. auto | w h | % = cover of parent | contain

- [type] BORDER-STYLE-TYPE

- [generic-function] BORDER CLOG-ELEMENT

  Get border.

- [generic-function] SET-BORDER CLOG-ELEMENT LINE-WIDTH BORDER-STYLE LINE-COLOR

  Set border width style and color. line-width - size or medium|thin|thick|length|initial|inherit

- [generic-function] BORDER-RADIUS CLOG-ELEMENT

  Get/Setf border-radius.

- [generic-function] BOX-SHADOW CLOG-ELEMENT

  Get/Setf box-shadow.

- [generic-function] TEXT-SHADOW CLOG-ELEMENT

  Get/Setf text-shadow.

- [type] OUTLINE-STYLE-TYPE

- [generic-function] OUTLINE CLOG-ELEMENT

  Get outline.

- [generic-function] SET-OUTLINE CLOG-ELEMENT LINE-COLOR OUTLINE-STYLE LINE-WIDTH

  Set outline line-width - size or medium|thin|thick|length|initial|inherit

- [generic-function] MARGIN CLOG-ELEMENT

  Get margin.

- [generic-function] SET-MARGIN CLOG-ELEMENT TOP RIGHT BOTTOM LEFT

  Set margins, Each can be - <length>|auto|initial|inherit

- [generic-function] SET-MARGIN-SIDE CLOG-ELEMENT SIDE VALUE

  Set margin `SIDE` (:top :right :bottom or :left), `VALUE` can be - <length>|auto|initial|inherit

- [generic-function] PADDING CLOG-ELEMENT

  Get padding.

- [generic-function] SET-PADDING CLOG-ELEMENT TOP RIGHT BOTTOM LEFT

  Set padding. Each can be - <length>|initial|inherit

- [generic-function] SET-PADDING-SIDE CLOG-ELEMENT SIDE VALUE

  Set padding `SIDE` (:top :right :bottom or :left), `VALUE` can be - <length>|auto|initial|inherit

- [generic-function] CURSOR CLOG-ELEMENT

  Get/Setf cursor. Sets the cursor to a standard type or an image if set to url(url_to_image). When using a url is best to suggest an alternate cursor, e.g. 'url(url_to_image),auto' A list of standard cursor types can be found at: http://www.w3schools.com/cssref/pr_class_cursor.asp

- [type] FONT-STYLE-TYPE

- [type] FONT-VARIANT-TYPE

- [type] SYSTEM-FONT-TYPE

- [generic-function] FONT CLOG-ELEMENT

  Get/Setf font.

- [generic-function] FONT-CSS VALUE

  Get/Setf font raw css value

- [generic-function] SET-FONT CLOG-ELEMENT FONT-STYLE FONT-VARIANT FONT-WEIGHT FONT-HEIGHT FONT-FAMILY

  Set font.

- [type] TEXT-ALIGNMENT-TYPE

- [generic-function] TEXT-ALIGNMENT CLOG-ELEMENT

  Get/Setf text-alignment.

- [type] VERTICAL-ALIGN-TYPE

- [generic-function] VERTICAL-ALIGN CLOG-ELEMENT

  Get/Setf vertical-align in table cells or if display is set to :table-cell or for labels on form elements.

CLOG-Element - Methods

- [generic-function] ADD-CLASS CLOG-ELEMENT CSS-CLASS-NAME

  add-class.

- [generic-function] REMOVE-CLASS CLOG-ELEMENT CSS-CLASS-NAME

  remove-class.

- [generic-function] TOGGLE-CLASS CLOG-ELEMENT CSS-CLASS-NAME

  toggle-class.

- [generic-function] REMOVE-FROM-DOM CLOG-ELEMENT

  Remove CLOG-Element from the DOM.

- [generic-function] REMOVE-FROM-CLOG CLOG-ELEMENT

  Remove CLOG-Element from the clog cache on browser.

- [generic-function] DESTROY CLOG-ELEMENT

  Remove CLOG-Element from the DOM on browser and clog cache on browser.

- [generic-function] CLICK CLOG-ELEMENT

  simulate click.

- [generic-function] REPLACE-ELEMENT CLOG-ELEMENT NEW-CLOG-ELEMENT

  `CLOG-ELEMENT` and its children will we removed from DOM but not destroyed and `NEW-CLOG-ELEMENT` will replace it in same location. `DESTROY` `CLOG-ELEMENT` if need to clear from browser memory. Returns `CLOG-ELEMENT`

- [generic-function] REPLACE-CHILDREN CLOG-ELEMENT NEW-CLOG-ELEMENT

  All `CLOG-ELEMENT`'s children will we removed from DOM but not destroyed and `NEW-CLOG-ELEMENT` will be placed in `CLOG-ELEMENT`. `DESTROY` `CLOG-ELEMENT` if need to clear from browser memory. Returns `CLOG-ELEMENT`

- [generic-function] SWAP-ELEMENT-BY-ID HTML-ID CLOG-ELEMENT

  Replace an existing element on page with `HTML-ID` with `CLOG-ELEMENT` and set `CLOG-ELEMENT` to html-id. Returns `CLOG-ELEMENT`

CLOG-Element - DOM Traversal Methods

- [generic-function] PARENT-ELEMENT CLOG-ELEMENT

  Return a new clog-element represeting the parent of `CLOG-ELEMENT`.

- [generic-function] FIRST-CHILD CLOG-ELEMENT

  Traverse to first child element. If Child does not have an html id than Element_Type will have an ID of undefined and therefore attached to no actual `HTML` element.

- [generic-function] PREVIOUS-SIBLING CLOG-ELEMENT

  Traverse to previous sibling element. If Child does not have an html id than Element_Type will have an ID of undefined and therefore attached to no actual `HTML` elemen.

- [generic-function] NEXT-SIBLING CLOG-ELEMENT

  Traverse to next sibling element. If Child does not have an html id than Element_Type will have an ID of undefined and therefore attached to no actual `HTML` elemen.

← ↑ → ↺

## 8 Common CLOG Elements

`CLOG-A` - Class for CLOG Anchors

- [class] CLOG-A CLOG-ELEMENT

  CLOG A, anchor, Objects.

- [generic-function] CREATE-A CLOG-OBJ &KEY LINK CONTENT TARGET STYLE HIDDEN CLASS HTML-ID AUTO-PLACE DOWNLOAD

  Create a new `CLOG-A` as child of `CLOG-OBJ` with `:LINK` and `:CONTENT` (default "") and `:TARGET` ("_self") and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`.

  Target of link, name of a frame or: _blank = new window _top = top most frame (full browser window) _parent = parent frame or window _self = current frame or window

- [generic-function] LINK CLOG-A

  Get/Setf the HREF link of the anchor.

- [generic-function] TARGET CLOG-A

  Get/Setf the link target of the anchor.

- [generic-function] DOWNLOAD CLOG-A

  Get/Setf the download name of the anchor.

`CLOG-BR` - Class for CLOG Line Breaks

- [class] CLOG-BR CLOG-ELEMENT

  CLOG BR Objects for line breaks.

- [generic-function] CREATE-BR CLOG-OBJ &KEY STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new `CLOG-BR` as child of `CLOG-OBJ` that creates a line break and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

`CLOG-BUTTON` - Class for CLOG Buttons

- [class] CLOG-BUTTON CLOG-ELEMENT

  CLOG Button Objects.

- [generic-function] CREATE-BUTTON CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Button as child of `CLOG-OBJ` with `:CONTENT` (default "") and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

- [generic-function] DISABLEDP CLOG-FORM-ELEMENT

  Get/Setf form element disabledp.

`CLOG-IMG` - Class for CLOG Images

- [class] CLOG-IMG CLOG-ELEMENT

  CLOG Img Objects.

- [generic-function] CREATE-IMG CLOG-OBJ &KEY URL-SRC ALT-TEXT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Img as child of `CLOG-OBJ` with `:URL-SRC` (default "") and `:ALT-TEXT` (default "") if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`. Use width and height properties before placing image to constrain image size.

- [generic-function] URL-SRC CLOG-FORM-ELEMENT

  Get/Setf the url-src of the img.

CLOG-Div - Class for CLOG Div Blocks

- [class] CLOG-DIV CLOG-ELEMENT

  CLOG Div Objects.

- [generic-function] CREATE-DIV CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Div as child of `CLOG-OBJ` with `:CONTENT` (default "") and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`. If hidden is true visiblep is set to nil.

CLOG-Dialog - Class for CLOG Dialog Blocks

- [class] CLOG-DIALOG CLOG-ELEMENT

  CLOG Dialog Objects.

- [generic-function] CREATE-DIALOG CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Dialog as child of `CLOG-OBJ` with `:CONTENT` (default "") and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`. If hidden is true visiblep is set to nil. Modal does not work on firefox and dialog does not work at all on IE.

- [generic-function] RETURN-VALUE CLOG-DIALOG

  Get/Setf return-value of dialog.

- [generic-function] DIALOG-OPENP CLOG-DIALOG

  Get/Setf dialog-openp. Will show dialog

- [generic-function] SHOW-DIALOG CLOG-DIALOG &KEY MODAL

  Close dialog.

- [generic-function] CLOSE-DIALOG CLOG-DIALOG

  Close dialog.

CLOG-Details - Class for CLOG Detail Blocks

- [class] CLOG-DETAILS CLOG-ELEMENT

  CLOG Details Objects.

- [generic-function] CREATE-DETAILS CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Details as child of `CLOG-OBJ` with `:CONTENT` (default "") and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`. If hidden is true visiblep is set to nil.

- [generic-function] DETAILS-OPENP CLOG-DETAILS

  Get/Setf details-openp. Will show details

CLOG-Summary - Class for CLOG Summary Blocks

- [class] CLOG-SUMMARY CLOG-ELEMENT

  CLOG Summary Objects.

- [generic-function] CREATE-SUMMARY CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Summary as child of `CLOG-OBJ` with `:CONTENT` (default "") and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`. If hidden is true visiblep is set to nil. Use inside a `CLOG-DETAILS` object for drop reveal.

`CLOG-HR` - Class for CLOG Hortizontal Rules

- [class] CLOG-HR CLOG-ELEMENT

  CLOG HR Objects for horizontal rules.

- [generic-function] CREATE-HR CLOG-OBJ &KEY HIDDEN STYLE CLASS HTML-ID AUTO-PLACE

  Create a new `CLOG-HR` as child of `CLOG-OBJ` that creates a horizontal rule (line) and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Meter - Class for CLOG Meters

- [class] CLOG-METER CLOG-ELEMENT

  CLOG Meter Objects.

- [generic-function] CREATE-METER CLOG-OBJ &KEY VALUE HIGH LOW MAXIMUM MINIMUM OPTIMUM STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Meter as child of `CLOG-OBJ` with `VALUE` (default 0) `HIGH` (default 100) `LOW` (default 0) `MAXIMUM` (default 100) `MINIMUM` (default 0) `OPTIMUM` (default 50) and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`.

- [generic-function] VALUE CLOG-FORM-ELEMENT

  Get/Setf form element value. Form element values are not accessible through the Text property but instead through the value property.

- [generic-function] HIGH CLOG-METER

  Get/Setf the high of the meter.

- [generic-function] LOW CLOG-METER

  Get/Setf the low of the meter.

- [generic-function] MINIMUM CLOG-FORM-ELEMENT

  Get/Setf form element minimum.

- [generic-function] MAXIMUM CLOG-FORM-ELEMENT

  Get/Setf form element maximum.

- [generic-function] OPTIMUM CLOG-METER

  Get/Setf the optimum of the meter.

CLOG-Progress-Bar - Class for CLOG Progress Bars

- [class] CLOG-PROGRESS-BAR CLOG-ELEMENT

  CLOG Progress-Bar Objects.

- [generic-function] CREATE-PROGRESS-BAR CLOG-OBJ &KEY VALUE MAXIMUM STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Progress-Bar as child of `CLOG-OBJ` with `VALUE` (default 0) `MAXIMUM` (default 100) and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`.

- [generic-function] VALUE CLOG-FORM-ELEMENT

  Get/Setf form element value. Form element values are not accessible through the Text property but instead through the value property.

- [generic-function] MAXIMUM CLOG-FORM-ELEMENT

  Get/Setf form element maximum.

`CLOG-P` - Class for CLOG Paragraphs

- [class] CLOG-P CLOG-ELEMENT

  CLOG P Objects.

- [generic-function] CREATE-P CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new `CLOG-P` as child of `CLOG-OBJ` with `:CONTENT` (default "") and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Span - Class for CLOG Inline Spans

- [class] CLOG-SPAN CLOG-ELEMENT

  CLOG Span Objects.

- [generic-function] CREATE-SPAN CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Span as child of `CLOG-OBJ` with `CONTENT` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`. A span is an inline element while a div is a block element (one that takes up the entire browser width).

CLOG-Section - Class for CLOG Inline Sections

- [type] SECTION-TYPE

- [class] CLOG-SECTION CLOG-ELEMENT

  CLOG Section Objects.

- [generic-function] CREATE-SECTION CLOG-OBJ SECTION &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Section of section type as child of `CLOG-OBJ` with `CONTENT` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`.

  `SECTION-TYPE` - :address :article :aside :header :main :nav :p :pre :section :blockquote :h1 :h2 :h3 :h4 :h5 :h6 :hgroup

`CLOG-P`hrase - Class for CLOG Inline Phrases

- [type] PHRASE-TYPE

- [class] CLOG-PHRASE CLOG-ELEMENT

  CLOG Phrase Objects.

- [generic-function] CREATE-PHRASE CLOG-OBJ PHRASE &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new `CLOG-P`hrase of phrase type as child of `CLOG-OBJ` with `CONTENT` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

  `PHRASE-TYPE` - :abbr :code :strong :em :dfn :samp :kbd :var :marked :del :ins :s :q :big :small :time :tt :cite :i :b :u :sub :su :center

CLOG-Ordered-List - Class for CLOG Ordered-Lists

- [class] CLOG-ORDERED-LIST CLOG-ELEMENT

  CLOG Ordered-List Objects.

- [generic-function] CREATE-ORDERED-LIST CLOG-OBJ &KEY STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Ordered-List as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

- [type] LIST-KIND-TYPE

- [generic-function] LIST-KIND CLOG-ORDERED-LIST

  Get/Setf list list-kind.

  `LIST-KIND-TYPE` - :disc :armenian :circle :cjk-ideographic :decimal :decimal-leading-zero :georgian :hebrew :hiragana :hiragana-iroha :katakana :katakana-iroha :lower-alpha :lower-greek :lower-latin :lower-roman :none :square :upper-alpha :upper-latin :upper-roman

- [type] LIST-LOCATION-TYPE

- [generic-function] LIST-LOCATION CLOG-ORDERED-LIST

  Get/Setf list list-location (:inside or :outside). Default is outside.

CLOG-Unordered-List - Class for CLOG Unordered-Lists

- [class] CLOG-UNORDERED-LIST CLOG-ELEMENT

  CLOG Unordered-List Objects.

- [generic-function] CREATE-UNORDERED-LIST CLOG-OBJ &KEY STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Unordered-List as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-List-Item - Class for CLOG List-Items

- [class] CLOG-LIST-ITEM CLOG-ELEMENT

  CLOG List-Item Objects.

- [generic-function] CREATE-LIST-ITEM CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-List-Item as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

- [generic-function] ITEM-VALUE CLOG-LIST-ITEM

  Get/Setf list item-value.

CLOG-Definition-List - Class for CLOG Definition-Lists

- [class] CLOG-DEFINITION-LIST CLOG-ELEMENT

  CLOG Definition-List Objects.

- [generic-function] CREATE-DEFINITION-LIST CLOG-OBJ &KEY STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Definition-List as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Term - Class for CLOG Terms

- [class] CLOG-TERM CLOG-ELEMENT

  CLOG Term Objects.

- [generic-function] CREATE-TERM CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Term as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Description - Class for CLOG Descriptions

- [class] CLOG-DESCRIPTION CLOG-ELEMENT

  CLOG Description Objects.

- [generic-function] CREATE-DESCRIPTION CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Description as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Table - Class for CLOG Tables

- [class] CLOG-TABLE CLOG-ELEMENT

  CLOG Table Objects.

- [generic-function] CREATE-TABLE CLOG-OBJ &KEY STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Table as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Table-Row - Class for CLOG Table-Rows

- [class] CLOG-TABLE-ROW CLOG-ELEMENT

  CLOG Table-Row Objects.

- [generic-function] CREATE-TABLE-ROW CLOG-OBJ &KEY STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Table-Row as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Table-Column - Class for CLOG Table-Columns

- [class] CLOG-TABLE-COLUMN CLOG-TABLE-ROW

  CLOG Table-Column Objects.

- [generic-function] CREATE-TABLE-COLUMN CLOG-OBJ &KEY CONTENT COLUMN-SPAN ROW-SPAN STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Table-Column as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Table-Heading - Class for CLOG Table-Headings

- [class] CLOG-TABLE-HEADING CLOG-TABLE-ROW

  CLOG Table-Heading Objects.

- [generic-function] CREATE-TABLE-HEADING CLOG-OBJ &KEY CONTENT COLUMN-SPAN ROW-SPAN STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Table-Heading as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Table-Head - Class for CLOG Table-Heads

- [class] CLOG-TABLE-HEAD CLOG-TABLE

  CLOG Table-Head Objects.

- [generic-function] CREATE-TABLE-HEAD CLOG-OBJ &KEY STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Table-Head as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Table-Body - Class for CLOG Table-Bodys

- [class] CLOG-TABLE-BODY CLOG-TABLE

  CLOG Table-Body Objects.

- [generic-function] CREATE-TABLE-BODY CLOG-OBJ &KEY STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Table-Body as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Table-Caption - Class for CLOG Table-Captions

- [class] CLOG-TABLE-CAPTION CLOG-TABLE

  CLOG Table-Caption Objects.

- [generic-function] CREATE-TABLE-CAPTION CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Table-Caption as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Table-Footer - Class for CLOG Table-Footers

- [class] CLOG-TABLE-FOOTER CLOG-TABLE

  CLOG Table-Footer Objects.

- [generic-function] CREATE-TABLE-FOOTER CLOG-OBJ &KEY STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Table-Footer as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Table-Column-Group - Class for CLOG Table-Column-Groups

- [class] CLOG-TABLE-COLUMN-GROUP CLOG-TABLE

  CLOG Table-Column-Group Objects.

- [generic-function] CREATE-TABLE-COLUMN-GROUP CLOG-OBJ &KEY STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Table-Column-Group as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

CLOG-Table-Column-Group-Item - Class for CLOG Table-Column-Group-Items

- [class] CLOG-TABLE-COLUMN-GROUP-ITEM CLOG-TABLE-COLUMN-GROUP

  CLOG Table-Column-Group-Item Objects.

- [generic-function] CREATE-TABLE-COLUMN-GROUP-ITEM CLOG-OBJ &KEY COLUMN-SPAN STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Table-Column-Group-Item as child of `CLOG-OBJ` and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`

← ↑ → ↺

## 9 CLOG Presentations

`CLOG-P`resentations - CLOG bindings to Lisp Objects

- [macro] LINK-SLOT-AND-FORM-ELEMENT OBJECT ACCESSOR CLOG-OBJ &KEY (SET-EVENT #'`SET-ON-CHANGE`) TRANSFORM-TO-LISP TRANSFORM-TO-ELEMENT

  Biderectional link slot (`ACCESSOR` `OBJECT`) <> clog-form-element (`CLOG-OBJ`)

- [macro] LINK-SLOT-AND-ELEMENT OBJECT ACCESSOR CLOG-OBJ &KEY (SET-EVENT #'`SET-ON-CHANGE`) TRANSFORM-TO-LISP TRANSFORM-TO-ELEMENT

  Biderectional link slot (`ACCESSOR` `OBJECT`) <> clog-element (`CLOG-OBJ`)

- [macro] LINK-FORM-ELEMENT-TO-SLOT CLOG-OBJ OBJECT ACCESSOR &KEY (SET-EVENT #'`SET-ON-CHANGE`) TRANSFORM

  Link changes to (value `CLOG-OBJ`) to (ACESSOR `OBJECT`) on `SET-EVENT` with `TRANSFORM`

- [macro] LINK-ELEMENT-TO-SLOT CLOG-OBJ OBJECT ACCESSOR &KEY (SET-EVENT #'`SET-ON-CHANGE`) TRANSFORM

  Link changes to (text `CLOG-OBJ`) to (ACESSOR `OBJECT`) on `SET-EVENT` with `TRANSFORM`

- [macro] LINK-ELEMENT-TO-PLACE CLOG-OBJ PROPERTY PLACE &KEY (SET-EVENT #'`SET-ON-CHANGE`) TRANSFORM

  Link changes to (`PROPERTY` `CLOG-OBJ`) to any lisp `PLACE` on `SET-EVENT` with `TRANSFORM`

- [macro] LINK-SLOT-TO-FORM-ELEMENT OBJECT ACCESSOR CLOG-OBJ &KEY TRANSFORM

  Link changes to lisp (`ACCESSOR` `OBJECT`) to (value `CLOG-OBJ`). Only one element can be bound at a time to a lisp object.

- [macro] LINK-SLOT-TO-ELEMENT OBJECT ACCESSOR CLOG-OBJ &KEY TRANSFORM

  Link changes to lisp (`ACCESSOR` `OBJECT`) to (text `CLOG-OBJ`). Only one element can be bound at a time to a lisp object.

- [macro] LINK-SLOT-TO-PLACE OBJECT ACCESSOR PLACE &KEY TRANSFORM

  Link changes to lisp (`ACCESSOR` `OBJECT`) to `PLACE`. Only one `PLACE` can be bound at a time to a lisp object.

← ↑ → ↺

## 10 CLOG Data

Load and Write to objects and CLOG-Elements

- [function] DATA-LOAD-PLIST OBJ PLIST &KEY (ROW-ID-NAME `NIL`) (UPCASE-KEY `T`)

  Load a `PLIST` in to `OBJ` where key of plist is the name of slot on `OBJ` and the value is the data to load. If slot contains a `CLOG-ELEMENT` `TEXT-VALUE` is set, if not the slot is set to the value. If key is not the name of a slot it is ignored. The key is coverted to a string and upper cased before attempting to match it to a slot if `:UPCASE-KEY` t (default). If `:ROW-ID-NAME` is set returns that fields value.

- [function] DATA-WRITE-LIST OBJ SLOT-NAME-LIST &KEY (UPCASE-KEY `T`)

  Returns a list, one value for each slot name in `SLOT-NAME-LIST`. If a slot contains a `CLOG-ELEMENT` then `TEXT-VALUE` is used to retrieve the value. Slot names may be symbols, keywords or text (and will be upcased before looking up symbol if `:UPCASE-KEY` t). All slot-names must be bound.

- [function] DATA-WRITE-PLIST OBJ SLOT-NAME-LIST &KEY (UPCASE-KEY `T`) (KEYS-AS-KEYWORDS `T`)

  Returns a plist, one member for each slot name in `SLOT-NAME-LIST`, the key is the slot name. If a slot contains a `CLOG-ELEMENT` then `TEXT-VALUE` is used to retrieve the value otherwise it is the slot-value. Slot names may be symbols, keywords, or text (and will be upcased before looking up symbol if `:UPCASE-KEY` t). If a slot-name is a cons, the first will be used as the key in the plist and the second will be the actual slot-name. All slot-names must be bound. If slot-name does not exist it is left out of returned plist. If `:KEYS-AS-KEYWORDS` t (default) then the keys will be symbols in the keyword package.

`SQL` Timestamp by Engine

- [variable] *MYSQL-TIMESTAMP* "unix_timestamp()"

  Function used by mysql to retrieve the time from the epoch

- [variable] *SQLITE-TIMESTAMP* "strftime('%s')"

  Function used by sqlite to retrieve the time from the epoch

- [variable] *POSTGRESQL-TIMESTAMP* "extract(epoch from now())"

  Function used by postgresql to retrieve the time from the epoch

`SQL` Writing Helpers

- [function] SQL-QUOTE VALUE

  Returns value single quoted if string (single quote quoted by doubling) unless is the single character '?'. If value is a list the car is returned unquoted

- [function] SQL-FIELD-LIST FIELD-LIST &KEY QUOTE-ALL FOR-INSERT

  Given list of fields returns a string for use in a `SQL` select and insert field lists. Use a cons (realname asname) to rename fields for selects, if `:FOR-INSERT` t then the realname is used. Symbols are stringified first. If `:QUOTE-ALL` t then all fields are in quotes.

- [function] SQL-VALUE-LIST VALUE-LIST

  Given list of values each passed to `SQL-QUOTE` returns a string for use in a `SQL` insert value list.

- [function] SQL-UPDATE-LIST PLIST

  Given plist of field names and values each passed to `SQL-QUOTE` and returns a string for use in a `SQL` update. if the 'key' is a cons the first 'key' used.

- [function] SQL-SELECT TABLE FIELD-LIST &KEY WHERE ORDER-BY LIMIT

  Build basic sql select statement

- [function] SQL-INSERT TABLE FIELD-LIST VALUE-LIST

  Build basic sql insert statement

- [function] SQL-INSERT* TABLE PLIST

  Build basic sql insert statement using a plist

- [function] SQL-UPDATE TABLE PLIST WHERE

  Build basic sql update statement

← ↑ → ↺

## 11 CLOG DBI

CLOG-Database - CLOG Database Connection

- [class] CLOG-DATABASE CLOG-ELEMENT

  Connection to database.

- [generic-function] CREATE-DATABASE CLOG-OBJ &KEY HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Database element, for use in CLOG-Builder. If not using builder use to connect: (dbi:connect (database-connection clog-obj) ...) or if a connection exists assign it to the database-connecton.

- [generic-function] DATABASE-CONNECTION CLOG-DATABASE

  Accessor to the database handle

- [class] CLOG-ONE-ROW CLOG-ELEMENT

  Manipulate one row of a table at a time on panel.

- [generic-function] SET-ON-FETCH CLOG-ONE-ROW ON-FETCH-HANDLER

  Set the `ON-FETCH-HANDLER` for `CLOG-ONE-ROW`. If `ON-FETCH-HANDLER` is nil unbind the event. The on-fetch event is called after the row was fetched and stored in (last-fetch clog-one-row) or nil if no row was returned, and before data-load-plist is called that will use the value of (last-fetch clog-one-row). Calculated fields, transformations to field values, etc. can be done in on-fetch as new-row will block until on-fetch returns.

- [generic-function] SET-MASTER-ONE-ROW CLOG-ONE-ROW MASTER-ONE-ROW SLOT-NAME

  Set `CLOG-ONE-ROW` to get-row setting a while-clause to follow slot-name of panel when `MASTER-ONE-ROW` calls next-row.

- [generic-function] CREATE-ONE-ROW CLOG-OBJ &KEY CLOG-DATABASE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-One-Row element. If `CLOG-OBJ` is of type-of `CLOG-DATABASE` it is used as database source unless `:CLOG-DATABASE` is set.

- [generic-function] CLOG-DATABASE CLOG-OBJ

  Access to the `CLOG-DATABASE`

- [generic-function] TABLE-NAME OBJECT

- [generic-function] WHERE-CLAUSE OBJECT

- [generic-function] ORDER-BY OBJECT

- [generic-function] LIMIT OBJECT

- [generic-function] ROW-ID-NAME OBJECT

- [generic-function] ROWID OBJECT

- [generic-function] TABLE-COLUMNS OBJECT

- [generic-function] LAST-FETCH OBJECT

- [generic-function] LAST-SQL OBJECT

- [generic-function] QUERY-ROW CLOG-ONE-ROW PANEL SQL

  Ignore query related prperties and instead execute `SQL`. row-id-name is required for updates. All `PANEL` items or custom slots on panel will be set using `DATA-LOAD-PLIST`.

- [generic-function] GET-ROW CLOG-ONE-ROW PANEL

  Get first row from a database table based on `CLOG-ONE-ROW`'s table-name using where-clause and table-columns. row-id-name is required. All `PANEL` items or custom slots on panel will be set using `DATA-LOAD-PLIST`.

- [generic-function] NEXT-ROW CLOG-ONE-ROW PANEL

  Get next row from a database table based on query made for get-row. All `PANEL` items or custom slots on panel will be set using `DATA-LOAD-PLIST`.

- [generic-function] INSERT-ROW CLOG-ONE-ROW PANEL

  Insert new row in to database table based on `CLOG-ONE-ROW`'s table-name and table-columns. `DATA-WRITE-PLIST` is used to extract data from `PANEL` items and custom slots.

- [generic-function] UPDATE-ROW CLOG-ONE-ROW PANEL

  Update row in database table based on `CLOG-ONE-ROW`'s table-name using current rowid and table-columns. row-id-name is required. All `PANEL` items or custom rows on panel will be retrieved from `PANEL` using `DATA-WRITE-PLIST`.

- [generic-function] CLEAR-ROW CLOG-ONE-ROW PANEL

  Clear current rowid and all fields in `PANEL` using `DATA-WRITE-PLIST` based on table-columns.

- [generic-function] DELETE-ROW CLOG-ONE-ROW PANEL

  Delete a row from a database table based on current rowid and then call `CLEAR-ROW`

- [class] CLOG-LOOKUP CLOG-ONE-ROW CLOG-SELECT

  CLOG Table Lookup Object

- [generic-function] CREATE-LOOKUP CLOG-OBJ &KEY NAME MULTIPLE LABEL CLASS HTML-ID CLOG-DATABASE

  Create a new clog-lookup as child of `CLOG-OBJ`.

- [generic-function] VALUE-FIELD OBJECT

- [generic-function] OPTION-FIELD OBJECT

- [class] CLOG-DB-TABLE CLOG-ONE-ROW CLOG-TABLE

  CLOG Database Table View Object

- [generic-function] CREATE-DB-TABLE CLOG-OBJ &KEY CLOG-DATABASE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new clog-db-table as child of `CLOG-OBJ`.

- [generic-function] SET-ON-HEADER CLOG-DB-TABLE ON-HEADER-HANDLER

  Set the `ON-HEADER-HANDLER` for `CLOG-DB-TABLE`. If `ON-HEADER-HANDLER` is nil unbind the event. The on-header event is called before the first row is output after the table is cleared to all adding a header information to the table.

- [generic-function] SET-ON-FOOTER CLOG-DB-TABLE ON-FOOTER-HANDLER

  Set the `ON-FOOTER-HANDLER` for `CLOG-DB-TABLE`. If `ON-FOOTER-HANDLER` is nil unbind the event. The on-footer event is called after all rows are output after the table is cleared for adding footer information to the table.

- [generic-function] SET-ON-ROW CLOG-DB-TABLE ON-ROW-HANDLER

  Set the `ON-ROW-HANDLER` for `CLOG-DB-TABLE`. If `ON-ROW-HANDLER` is nil unbind the event. The on-row event is called for each row. The row handler is passed also the clog-table-row object before the columns are added in second parameter to handler.

- [generic-function] SET-ON-COLUMN CLOG-DB-TABLE ON-COLUMN-HANDLER

  Set the `ON-COLUMN-HANDLER` for `CLOG-DB-TABLE`. If `ON-COLUMN-HANDLER` is nil unbind the event. The on-column event is called for each column as added to the current row being processsed. It is passed also the keyworld symbol name of the column and the clog-table-column object.

← ↑ → ↺

## 12 CLOG Panels

`CLOG-P`anel - CLOG Panels

- [class] CLOG-PANEL CLOG-ELEMENT

  CLOG Panel objects.

- [generic-function] CREATE-PANEL CLOG-OBJ &KEY LEFT TOP RIGHT BOTTOM WIDTH HEIGHT UNITS MARGIN-LEFT MARGIN-TOP MARGIN-RIGHT MARGIN-BOTTOM BORDER-STYLE BORDER-WIDTH BORDER-COLOR BACKGROUND-COLOR POSITIONING OVERFLOW RESIZABLE CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE DISPLAY

  Create a new `CLOG-P`anel as child of `CLOG-OBJ`. Optionally you can set the `:X`, `:Y`, `:WIDTH` and `:HEIGHT` (in `:UNITS` defulting to :px, if set to nil unit type must be provided for x,y,width and height), `BORDER-STYLE` (see `BORDER-STYLE-TYPE`), `BORDER-WIDTH`, `BORDER-COLOR`, `:POSITIONING` (default is `:FIXED` the default builder panels are `:STATIC`) (see `POSITIONING-TYPE`), `:OVERFLOW` (default is `:CLIP`) with `:CONTENT` (default "") and `:RESIZABLE` defaults to `:NONE`. Additional css styles can be set in `:STYLE` (default "") if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`. If hidden is true visiblep is set to nil. Resizable only works if overflow is set to `:SCROLL`

CLOG-Panel-Box - CLOG Panel Box

- [class] CLOG-PANEL-BOX CLOG-ELEMENT

  CLOG Panel-Box Objects.

- [generic-function] CREATE-PANEL-BOX CLOG-OBJ &KEY WIDTH HEIGHT HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Panel-Box, a div containg a `CLOG-PANEL-BOX-LAYOUT` as child of `CLOG-OBJ` with and if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`. If hidden is true visiblep is set to nil.

- [generic-function] PANEL-BOX CLOG-PANEL-BOX

  Returns the `CLOG-PANEL-BOX-LAYOUT` object contained in the `CLOG-PANEL-BOX`.

CLOG-Panel-Box-Layout

- [class] CLOG-PANEL-BOX-LAYOUT

  CLOG Panel Box Layout Objects.

- [generic-function] CENTER-CHILDREN CLOG-ELEMENT &KEY VERTICAL HORIZONTAL

  Align children of `CLOG-ELEMENT` `VERTICAL` (default t) and/or `HORIZONTAL` (default t). This will set the `DISPLAY` property of `CLOG-ELEMENT` to `:FLEX`. Note: if children of clog-element are using :absolute positioning they will not flow with flex and will not be centered. Using :relative wrapped in div with :static positioning will work. For example in CLOG Builder the panel is created in a static positioning panel, if all the contents are positioning in a div aboslute and that div is relative the expected bahvior of a centered panel will happen.

- [function] CREATE-PANEL-BOX-LAYOUT CLOG-OBJ &KEY (TOP-HEIGHT 50) (LEFT-WIDTH 50) (BOTTOM-HEIGHT 50) (RIGHT-WIDTH 50) (UNITS "px") (HTML-ID `NIL`)

  Create a five panel app layout that fills entire contents of `CLOG-OBJ`. `HTML-ID` if set is the base and top,left,right,center, bottom are added e.g. if `:HTML-ID` "myid" then the `HTML-ID` for center will be: myid-center

- [generic-function] CENTER-PANEL CLOG-PANEL-BOX-LAYOUT

  Returns the center panel of a clog-panel-box-layout object.

- [generic-function] TOP-PANEL CLOG-PANEL-BOX-LAYOUT

  Returns the top panel of a clog-panel-box-layout object.

- [generic-function] LEFT-PANEL CLOG-PANEL-BOX-LAYOUT

  Returns the left panel of a clog-panel-box-layout object.

- [generic-function] RIGHT-PANEL OBJECT

- [generic-function] BOTTOM-PANEL CLOG-PANEL-BOX-LAYOUT

  Returns the bottom panel of a clog-panel-box-layout object.

- [generic-function] FIT-LAYOUT CLOG-PANEL-BOX-LAYOUT

  Recalculate layout based on size of outer panel content

← ↑ → ↺

## 13 CLOG Tree

CLOG-Tree - CLOG Trees

- [class] CLOG-TREE CLOG-DIV

  CLOG-Tree object - a collapsible tree component

- [generic-function] CREATE-CLOG-TREE OBJ &KEY CONTENT INDENT-LEVEL NODE-HTML FILL-FUNCTION VISIBLE CLASS HTML-ID AUTO-PLACE

- [generic-function] TREE-ROOT CLOG-TREE

  Accessor for clog-tree root, create clog-tree-items on the tree-root or other clog-tree's.

- [generic-function] INDENT-LEVEL CLOG-TREE

  Accessor for clog-tree root, create clog-tree-items on the tree-root or other clog-tree's.

- [class] CLOG-TREE-ITEM CLOG-DIV

  CLOG-tree-item object - a tree list item

- [generic-function] CREATE-CLOG-TREE-ITEM OBJ &KEY CONTENT INDENT-LEVEL NODE-HTML ON-CLICK CLASS HTML-ID AUTO-PLACE

- [generic-function] TREE-ITEM CLOG-TREE-ITEM

  Accessor for clog-tree-item item.

← ↑ → ↺

## 14 CLOG Style Blocks

CLOG-Style-Block - CLOG Style Blocks

- [class] CLOG-STYLE-BLOCK CLOG-ELEMENT

  CLOG style-blocks for applying css styles.

- [generic-function] CREATE-STYLE-BLOCK CLOG-OBJ &KEY CONTENT MEDIA HTML-ID AUTO-PLACE

  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.

- [generic-function] ADD-STYLE CLOG-STYLE-BLOCK SELECTOR-TYPE SELECTOR STYLE-ALIST

  Add to style-block an alist of css styles to affect selector. For example: (add-style :element "a" '(("text-decoration" :none)))

← ↑ → ↺

## 15 CLOG Form Objects

CLOG-Form-Data

- [generic-function] FORM-GET-DATA CLOG-OBJ

  Get the form data as an a-list sent by the get method

- [generic-function] FORM-POST-DATA CLOG-OBJ

  Get the form data as an a-list sent by post method

- [generic-function] FORM-MULTIPART-DATA CLOG-OBJ

  Get the form data as an a-list sent with the multipart method used in file uploads. `DELETE-MULTIPART-DATA` must be called or will never be GC'd. File upload items will be a four part list (name stream file-name content-type).

- [generic-function] DELETE-MULTIPART-DATA CLOG-OBJ

  Delete the multipart data upload

- [function] FORM-DATA-ITEM FORM-DATA ITEM

  Return value for `ITEM` from FROM-DATA a-list

CLOG-Form - Class for organizing Form Elements in to a From

- [type] FORM-METHOD-TYPE

- [class] CLOG-FORM CLOG-ELEMENT

  CLOG Form Objecs is the base class for all html forms.

- [generic-function] CREATE-FORM CLOG-OBJ &KEY ACTION METHOD TARGET ENCODING STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new CLOG-Form as child of `CLOG-OBJ` that organizes a collection of form elements in to a single form if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`. In CLOG a form's on-submit handler should be set and the form element values handled in that handler as opposed to the `HTML` model of submitting to a new "page". If though one wishes to submit to another page can use the `:ACTION` `:METHOD` and `:TARGET` keys and either do not set an on-submit handler or call (submit `CLOG-FORM`) to perform the form action. The default `:ENCODING` is application/x-www-form-urlencoded if doing file upload use multipart/form-data

- [generic-function] FORM-ELEMENT-COUNT CLOG-FORM

  Get form element count.

- [generic-function] SUBMIT CLOG-FORM

  Submit form.

- [generic-function] RESET CLOG-FORM

  Reset form.

- [generic-function] AUTOCOMPLETEP CLOG-FORM

  Get/Setf form autocompletep.

- [generic-function] ENCODING CLOG-FORM

  Get/Setf form encoding. Comming values are: application/x-www-form-urlencoded multipart/form-data text/plain

- [generic-function] VALIDATE-ON-SUBMIT CLOG-FORM

  Get/Setf form validate-on-submit.

CLOG-Fieldset - Class for CLOG Fieldsets

- [class] CLOG-FIELDSET CLOG-ELEMENT

  CLOG Form Element Fieldset Object

- [generic-function] CREATE-FIELDSET CLOG-OBJ &KEY LEGEND HIDDEN STYLE CLASS HTML-ID AUTO-PLACE

  Create a new clog-fieldset as child of `CLOG-OBJ`.

CLOG-Legend - Class for CLOG Legends

- [class] CLOG-LEGEND CLOG-ELEMENT

  CLOG Fieldset Legend Object

- [generic-function] CREATE-LEGEND CLOG-OBJ &KEY CONTENT STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new clog-legend as child of `CLOG-OBJ`.

CLOG-Form-Element - Class for form elements

- [class] CLOG-FORM-ELEMENT CLOG-ELEMENT

  CLOG Form Element Object is the base class for all form elements.

- [type] FORM-ELEMENT-TYPE

- [generic-function] CREATE-FORM-ELEMENT CLOG-OBJ ELEMENT-TYPE &REST ARGS &KEY NAME LABEL CLASS STYLE HIDDEN HTML-ID AUTO-PLACE &ALLOW-OTHER-KEYS

  Create a new clog-form-element as child of `CLOG-OBJ`. It is importamt that clog-form-elements are a child or descendant of a clog-form in the DOM. The radio `ELEMENT-TYPE` groups by `NAME`. Additional keys will be added to the input tag as attribute/value pairs in the form attr= 'value'

- [generic-function] AUTOCOMPLETE CLOG-FORM-ELEMENT

  Get/Setf form element autocomplete.

- [generic-function] AUTOFOCUSP CLOG-FORM-ELEMENT

  Get/Setf form element autofocusp. Only one element should have this set true ever. Autofocus on element when form loaded.

- [generic-function] PLACE-HOLDER CLOG-FORM-ELEMENT

  Get/Setf form element place holder.

- [generic-function] DISABLEDP CLOG-FORM-ELEMENT

  Get/Setf form element disabledp.

- [generic-function] READ-ONLY-P CLOG-FORM-ELEMENT

  Get/Setf form element read-only-p.

- [generic-function] REQUIREDP CLOG-FORM-ELEMENT

  Get/Setf form element requiredp.

- [generic-function] MULTIPLEP CLOG-FORM-ELEMENT

  Get/Setf form element multiplep.

- [generic-function] NAME CLOG-FORM-ELEMENT

  Get/Setf form element name. Form element name, name is not the id of the element but rather how the data returned from the element will be named in the submit to a server. For example if Name is My_Field a `GET` request could look like http://localhost:8080?My_Field=xxxx

- [generic-function] DEFAULT-VALUE CLOG-FORM-ELEMENT

  Get/Setf form element default-value. If the form is reset the value will be set to default value If Value is set at time of creation it also sets it as the Default_Value

- [generic-function] VALUE CLOG-FORM-ELEMENT

  Get/Setf form element value. Form element values are not accessible through the Text property but instead through the value property.

- [generic-function] RADIO-VALUE CLOG-OBJ NAME

  Returns the value of the selected radio button in a group called `NAME`.

- [generic-function] CHECKBOX-VALUE CLOG-OBJ NAME

  Returns t or nil on the selected checkbox button.

- [generic-function] SELECT-VALUE CLOG-OBJ NAME

  Returns the value of select item called `NAME` and must be unique name on entire document.

- [generic-function] TEXTAREA-VALUE CLOG-OBJ NAME

  Returns the value of textarea item called `NAME` and must be unique name on entire document.

- [generic-function] NAME-VALUE CLOG-OBJ NAME

  Returns the value of input item called `NAME` and must be unique name on entire document.

- [generic-function] PATTERN CLOG-FORM-ELEMENT

  Get/Setf form element regular expression pattern. (see JavaScript RegExp object for specifics) Form validation pattern. validate-on-submit fields with input will validate against their pattern if set on submit. In cases where a specific input type is not supported like (date, week, etc.) Pattern can be set to ensure the expected results. This works since Input type will fall back to a text input.

- [generic-function] MINIMUM CLOG-FORM-ELEMENT

  Get/Setf form element minimum.

- [generic-function] MAXIMUM CLOG-FORM-ELEMENT

  Get/Setf form element maximum.

- [generic-function] SIZE CLOG-FORM-ELEMENT

  Get/Setf form element size.

- [generic-function] ELEMENT-STEP CLOG-FORM-ELEMENT

  Get/Setf form element step.

- [generic-function] SELECT CLOG-FORM-ELEMENT

  Select and highlight the contents of element.

- [generic-function] FILE-ACCEPT CLOG-FORM-ELEMENT

  Get/Setf form element file-accept. Only works with the File form element type. example: (setf (file-accept obj) "image/png, image/jpeg")

- [generic-function] URL-SRC CLOG-FORM-ELEMENT

  Get/Setf the url-src of the img.

- [generic-function] ALT-TEXT CLOG-FORM-ELEMENT

  Get/Setf the alt-text of the img.

- [generic-function] CHECKEDP CLOG-FORM-ELEMENT

  Get/Setf form element checkedp.

- [type] INPUT-MODE-TYPE

- [generic-function] INPUT-MODE CLOG-FORM-ELEMENT

  Get/Setf hint the input-mode of an element for virtual keyboards.

- [generic-function] SET-DATA-LIST CLOG-FORM-ELEMENT DATA-LIST

  Set the option data list to use for this element.

- [generic-function] MAKE-DATA-LIST CLOG-FORM-ELEMENT DATA

  Set the option data list to use for this element.

- [generic-function] MINIMUM-LENGTH CLOG-FORM-ELEMENT

  Get/Setf form element minimum-length.

- [generic-function] MAXIMUM-LENGTH CLOG-FORM-ELEMENT

  Get/Setf form element maximum-length.

CLOG-Label - Class for CLOG Labels

- [class] CLOG-LABEL CLOG-ELEMENT

  CLOG Form Element Label Object

- [generic-function] CREATE-LABEL CLOG-OBJ &KEY CONTENT STYLE HIDDEN LABEL-FOR CLASS HTML-ID AUTO-PLACE

  Create a new clog-label as child of `CLOG-OBJ`.

- [generic-function] LABEL-FOR CLOG-LABEL ELEMENT

  Set label is for `ELEMENT`.

CLOG-Select - Class for CLOG Selects

- [class] CLOG-SELECT CLOG-FORM-ELEMENT

  CLOG Form Element Select Options Object

- [generic-function] CREATE-SELECT CLOG-OBJ &KEY NAME MULTIPLE LABEL STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new clog-select as child of `CLOG-OBJ`. Use `SIZE` and set to greater than 1 for select to act as a listbox.

- [class] CLOG-OPTION CLOG-FORM-ELEMENT

  CLOG Form Element Option for CLOG Select Object or CLOG Data-List objects.

- [generic-function] CREATE-OPTION CLOG-OBJ &KEY CONTENT VALUE SELECTED DISABLED STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new clog-option as child of `CLOG-OBJ`.

- [class] CLOG-OPTGROUP CLOG-FORM-ELEMENT

  CLOG Form Element Optgroup for CLOG Select Object

- [generic-function] CREATE-OPTGROUP CLOG-OBJ &KEY CONTENT DISABLED STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new clog-optgroup as child of `CLOG-OBJ`.

- [generic-function] SELECTEDP CLOG-FORM-ELEMENT

  Get/Setf form element selectedp.

- [generic-function] ADD-SELECT-OPTION CLOG-SELECT VALUE CONTENT &KEY SELECTED DISABLED

  Add option `VALUE` to select.

- [generic-function] ADD-SELECT-OPTIONS CLOG-SELECT CONTENT

  Add group of options to select.

- [generic-function] ADD-SELECT-OPTGROUP CLOG-SELECT CONTENT

  Add option `VALUE` to select.

- [generic-function] SELECT-TEXT CLOG-OBJ

  Get/Setf the text of selected item.

CLOG-Data-List - Class for CLOG Option Data Lists

- [class] CLOG-DATA-LIST CLOG-ELEMENT

  CLOG Form Element Data-List Options Object

- [generic-function] CREATE-DATA-LIST CLOG-OBJ &KEY DATA-LIST HTML-ID AUTO-PLACE

  Create a new clog-data-list as child of `CLOG-OBJ` and optionally fill in with contents of data-list.

- [generic-function] ADD-OPTION CLOG-DATA-LIST VALUE

  Add option `VALUE` to data-list.

- [generic-function] ADD-OPTIONS CLOG-DATA-LIST DATA-LIST

  Add option `VALUE` to data-list.

CLOG-Text-Area - Class for CLOG Text Areas

- [class] CLOG-TEXT-AREA CLOG-FORM-ELEMENT

  CLOG Form Element Text-Area Object

- [generic-function] CREATE-TEXT-AREA CLOG-OBJ &KEY COLUMNS ROWS NAME VALUE LABEL STYLE HIDDEN CLASS HTML-ID AUTO-PLACE

  Create a new clog-text-area as child of `CLOG-OBJ`.

- [generic-function] WORD-WRAP CLOG-TEXT-AREA

  Get/Setf form element word-wrap.

- [generic-function] COLUMNS CLOG-TEXT-AREA

  Get/Setf form element columns.

- [generic-function] ROWS CLOG-TEXT-AREA

  Get/Setf form element rows.

- [generic-function] DISABLE-RESIZE CLOG-TEXT-AREA

  Disable resize of text area.

← ↑ → ↺

## 16 CLOG Canvas Objects

CLOG-Canvas - Class for CLOG canvas objects

- [class] CLOG-CANVAS CLOG-ELEMENT

  CLOG Canvas Objects.

- [generic-function] CREATE-CANVAS CLOG-OBJ &KEY WIDTH HEIGHT CLASS HIDDEN HTML-ID AUTO-PLACE

  Create a new CLOG-Canvas as child of `CLOG-OBJ` if `:AUTO-PLACE` (default t) place-inside-bottom-of `CLOG-OBJ`.

- [class] CLOG-CONTEXT2D CLOG-OBJ

- [generic-function] CREATE-CONTEXT2D CLOG-CANVAS

  Create a new CLOG-Context2d from a CLOG-Canvas

CLOG-Canvas - Properties

- [generic-function] FILL-STYLE CLOG-CONTEXT2D

  Setf/get property fill style

- [generic-function] CANVAS-FILTER CLOG-CONTEXT2D

  Setf/get filter dsl - See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter

- [generic-function] FONT-STYLE CLOG-CONTEXT2D

  Setf/get font using css font string https://developer.mozilla.org/en-US/docs/Web/CSS/font

- [generic-function] GLOBAL-ALPHA CLOG-CONTEXT2D

  Setf/get global alpha

- [generic-function] GLOBAL-COMPOSITE-OPERATION CLOG-CONTEXT2D

  Setf/get composite blend mode - https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

- [generic-function] IMAGE-SMOOTHING-ENABLED CLOG-CONTEXT2D

  Setf/get text shadow blur

- [generic-function] IMAGE-SMOOTHING-QUALITY CLOG-CONTEXT2D

  Setf/get text shadow blur

- [generic-function] LINE-CAP CLOG-CONTEXT2D

  Setf/get line cap style

- [generic-function] LINE-DASH-OFFSET CLOG-CONTEXT2D

  Setf/get miter style limit

- [generic-function] LINE-JOIN CLOG-CONTEXT2D

  Setf/get line join style

- [generic-function] LINE-WIDTH CLOG-CONTEXT2D

  Set line style width

- [generic-function] MITER-LIMIT CLOG-CONTEXT2D

  Setf/get miter style limit

- [generic-function] SHADOW-BLUR CLOG-CONTEXT2D

  Setf/get text shadow blur

- [generic-function] SHADOW-COLOR CLOG-CONTEXT2D

  Setf/get text shadow color

- [generic-function] SHADOW-OFFSET-X CLOG-CONTEXT2D

  Setf/get text shadow offset x

- [generic-function] SHADOW-OFFSET-Y CLOG-CONTEXT2D

  Setf/get text shadow offset y

- [generic-function] STROKE-STYLE CLOG-CONTEXT2D

  Setf/get text stroke style

- [type] TEXT-ALIGN-TYPE

- [generic-function] TEXT-ALIGN CLOG-CONTEXT2D

  Setf/get text alignment style

- [type] TEXT-BASELINE-TYPE

- [generic-function] TEXT-BASELINE CLOG-CONTEXT2D

  Set text baseline style

- [generic-function] TEXT-DIR CLOG-CONTEXT2D

  Setf/get text direction style

CLOG-Canvas - Methods

- [generic-function] ARC CLOG-CONTEXT2D X Y RADIUS START-ANGLE END-ANGLE &KEY ANTICLOCKWISE

  Adds a circular arc to the current path.

- [generic-function] ARC-TO CLOG-CONTEXT2D X1 Y1 X2 Y2

  Adds an arc to the current path.

- [generic-function] BEGIN-PATH CLOG-CONTEXT2D

  Starts a new path empting any previous points.

- [generic-function] BEZIER-CURVE-TO CLOG-CONTEXT2D CP1X CP1Y CP2X CP2Y X Y

  Adds a cubic Bezier curve to the current path.

- [generic-function] CLEAR-RECT CLOG-CONTEXT2D X Y WIDTH HEIGHT

  Clear rectangle to transparent black

- [generic-function] PATH-CLIP CLOG-CONTEXT2D &KEY PATH2D FILL-RULE

  Clip a path.

- [generic-function] CLOSE-PATH CLOG-CONTEXT2D

  Adds a line to start point of path.

- [generic-function] CREATE-IMAGE-DATA CLOG-CONTEXT2D WIDTH HEIGHT

  Create blank image data

- [generic-function] CREATE-CONIC-GRADIENT CLOG-CONTEXT2D START-ANGLE X Y

  Create conic gradient

- [generic-function] CREATE-LINEAR-GRADIENT CLOG-CONTEXT2D X0 Y0 X1 Y1

  Create linear gradient

- [generic-function] CREATE-RADIAL-GRADIENT CLOG-CONTEXT2D X0 Y0 R0 X1 Y1 R1

  Create radial gradient

- [generic-function] CREATE-PATTERN CLOG-CONTEXT2D CLOG-OBJ REPETITION

  Create pattern

- [generic-function] DRAW-IMAGE CLOG-CONTEXT2D CLOG-OBJ DX DY &KEY DWIDTH DHEIGHT

  Draw image at dx dy optionally dwidth and dheight

- [generic-function] DRAW-IMAGE-FROM-TO CLOG-CONTEXT2D CLOG-OBJ SX SY SWIDTH SHEIGHT DX DY DWIDTH DHEIGHT

  Draw image at sx sy swidth sheight to dx dy dwidth dheight

- [generic-function] ELLIPSE CLOG-CONTEXT2D X Y RADIUS-X RADIUS-Y ROTATION START-ANGLE END-ANGLE &KEY ANTICLOCKWISE

  Adds an elliptical arc to the current path.

- [generic-function] PATH-FILL CLOG-CONTEXT2D &KEY PATH2D FILL-RULE

  Fill a path.

- [generic-function] FILL-RECT CLOG-CONTEXT2D X Y WIDTH HEIGHT

  Fill rectangle with current fill-color

- [generic-function] FILL-TEXT CLOG-CONTEXT2D TEXT X Y &KEY MAX-WIDTH

  Fill text with current fill-color

- [generic-function] GET-IMAGE-DATA CLOG-CONTEXT2D SX SY SW SH

  Get image data from clog-context2d. Returns a `CLOG-IMAGE-DATA`

- [generic-function] GET-LINE-DASH CLOG-CONTEXT2D

  Set line style dash pattern, e.g. 10, 20

- [generic-function] GET-TRANSFORM CLOG-CONTEXT2D

  Get current transform matrix as clog-matrix

- [generic-function] IS-POINT-IN-PATH CLOG-CONTEXT2D X Y &KEY PATH2D FILL-RULE

  Returns t if point is in path or `PATH2D` if specfified

- [generic-function] IS-POINT-IN-STROKE CLOG-CONTEXT2D X Y &KEY PATH2D

  Returns t if point is in stroke or `PATH2D` if specfified

- [generic-function] LINE-TO CLOG-CONTEXT2D X Y

  Adds a line to the current path.

- [generic-function] MEASURE-TEXT CLOG-CONTEXT2D TEXT

  Measure text returns a clog-text-metrics object

- [generic-function] MOVE-TO CLOG-CONTEXT2D X Y

  Moves start point of path.

- [generic-function] PUT-IMAGE-DATA CLOG-CONTEXT2D IMAGE-DATA X Y

  Put image-data at x y

- [generic-function] PUT-IMAGE-DATA-DIRTY CLOG-CONTEXT2D IMAGE-DATA X Y DX DY DWIDTH DHEIGHT

  Put portion of image-data at x y

- [generic-function] QUADRATIC-CURVE-TO CLOG-CONTEXT2D CPX CPY X Y

  Adds a quadratic Bezier curve to the current path.

- [generic-function] RECT CLOG-CONTEXT2D X Y WIDTH HEIGHT

  Adds a rectangle to the current path.

- [generic-function] RESET-TRANSFORM CLOG-CONTEXT2D

  Restore canvas from stack

- [generic-function] CANVAS-RESTORE CLOG-CONTEXT2D

  Restore canvas from stack

- [generic-function] ROTATE CLOG-MATRIX ANGLE

  Return rotate a clog-matrix

- [generic-function] CANVAS-SAVE CLOG-CONTEXT2D

  Save canvas to stack

- [generic-function] SCALE CLOG-CONTEXT2D X Y

  Scale

- [generic-function] SET-LINE-DASH CLOG-CONTEXT2D VALUE

  Set line style dash pattern, e.g. 10, 20

- [generic-function] SET-TRANSFORM CLOG-CONTEXT2D A B C D E F G

  Set-Transform

- [generic-function] SET-TRANSFORM-WITH-MATRIX CLOG-CONTEXT2D CLOG-MATRIX

  Set-Transform-With-Matrix

- [generic-function] PATH-STROKE CLOG-CONTEXT2D &KEY PATH2D

  Stroke a path.

- [generic-function] STROKE-RECT CLOG-CONTEXT2D X Y WIDTH HEIGHT

  Fill rectangle using current stroke-style

- [generic-function] STROKE-TEXT CLOG-CONTEXT2D TEXT X Y &KEY MAX-WIDTH

  Stroke text with current stroke-style

- [generic-function] TRANSFORM CLOG-CONTEXT2D A B C D E F

  Transform

- [generic-function] TRANSLATE CLOG-CONTEXT2D X Y

  Translate

CLOG-Canvas-Gradient

- [class] CLOG-CANVAS-GRADIENT CLOG-OBJ

- [generic-function] ADD-COLOR-STOP CLOG-CANVAS-GRADIENT OFFSET COLOR

  Add a color stop

CLOG-Image-Data

- [class] CLOG-IMAGE-DATA CLOG-OBJ

- [generic-function] JSON-IMAGE-DATA CLOG-IMAGE-DATA

  Setf/get json image data

CLOG-Matrix

- [class] CLOG-MATRIX CLOG-OBJ

- [generic-function] CREATE-MATRIX CLOG-CANVAS &KEY MATRIX

  Create a new CLOG-Matrix. `MATRIX` can be json array 6 element for 2d or 16 for 3d.

- [generic-function] FLIP-X CLOG-MATRIX

  Return flip-x a clog-matrix

- [generic-function] FLIP-Y CLOG-MATRIX

  Return flip-y a clog-matrix

- [generic-function] INVERSE CLOG-MATRIX

  Return inverse a clog-matrix

- [generic-function] MULTIPLY CLOG-MATRIX BY-MATRIX

  Return multiply a clog-matrix

- [generic-function] ROTATE CLOG-MATRIX ANGLE

  Return rotate a clog-matrix

- [generic-function] SCALE-MATRIX CLOG-MATRIX SX &OPTIONAL SY SZ OX OY OZ

  Return scale a clog-matrix by sx and optionally to sy sz ox oy oz

- [generic-function] SCALE3D CLOG-MATRIX SX &OPTIONAL SY SZ OX OY OZ

  Return scale3d a clog-matrix by sx and optionally to sy sz ox oy oz

- [generic-function] TRANSLATE-MATRIX CLOG-MATRIX X Y &OPTIONAL Z

  Return translate-matrix a clog-matrix by x y and optionally z

`CLOG-P`ath2d

- [class] CLOG-PATH2D CLOG-OBJ

- [generic-function] CREATE-PATH2D CLOG-CANVAS &KEY PATH2D

  Create a new `CLOG-P`ath2d. If `CLOG-PATH2D` creates a copy.

CLOG-Text-Metrics

- [class] CLOG-TEXT-METRICS CLOG-OBJ

- [generic-function] ACTUAL-BOUNDING-BOX-LEFT CLOG-TEXT-METRICS

  Actual bounding box left

- [generic-function] ACTUAL-BOUNDING-BOX-RIGHT CLOG-TEXT-METRICS

  Actual bounding box right

- [generic-function] ACTUAL-BOUNDING-BOX-ASCENT CLOG-TEXT-METRICS

  Actual bounding box ascent

- [generic-function] ACTUAL-BOUNDING-BOX-DESCENT CLOG-TEXT-METRICS

  Actual bounding box descent

- [generic-function] FONT-BOUNDING-BOX-ASCENT CLOG-TEXT-METRICS

  Font bounding box ascent

- [generic-function] FONT-BOUNDING-BOX-DESCENT CLOG-TEXT-METRICS

  Font bounding box descent

- [generic-function] EM-HEIGHT-ASCENT CLOG-TEXT-METRICS

  'M' height ascent

- [generic-function] EM-HEIGHT-DESCENT CLOG-TEXT-METRICS

  'M' height descent

- [generic-function] HANGING-BASELINE CLOG-TEXT-METRICS

  Hanging baseline

- [generic-function] ALPHABETIC-BASELINE CLOG-TEXT-METRICS

  Alphabetic baseline

- [generic-function] IDEOGRAPHIC-BASELINE CLOG-TEXT-METRICS

  Ideographic baseline

← ↑ → ↺

## 17 CLOG WebGL Objects

###### [in package CLOG-WEBGL]

CLOG-WebGL - Class for CLOG WebGL objects

- [class] CLOG-WEBGL CLOG-OBJ

- [generic-function] CREATE-WEBGL CLOG-CANVAS &KEY CONTEXT

  Create a new CLOG-WebGL from a CLOG-Canvas. Context can be webgl (version 1) or webgl2 (default)

- [generic-function] DRAWING-BUFFER-WIDTH CLOG-WEBGL

  Drawing are of buffer width. returns float

- [generic-function] DRAWING-BUFFER-HEIGHT CLOG-WEBGL

  Drawing are of buffer height. returns float

- [generic-function] BUFFER-PARAMETER CLOG-WEBGL GLENUM-TARGET GLENUM-PNAME

  Returns information about the buffer. target: A GLenum specifying the target buffer object. Possible values:

  :ARRAY_BUFFER Buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data.

  :ELEMENT_ARRAY_BUFFER Buffer used for element indices.

  When using a WebGL 2 context, the following values are available additionally:

  :COPY_READ_BUFFER Buffer for copying from one buffer object to another.

  :COPY_WRITE_BUFFER Buffer for copying from one buffer object to another.

  :TRANSFORM_FEEDBACK_BUFFER Buffer for transform feedback operations.

  :UNIFORM_BUFFER Buffer used for storing uniform blocks.

  :PIXEL_PACK_BUFFER Buffer used for pixel transfer operations.

  :PIXEL_UNPACK_BUFFER Buffer used for pixel transfer operations.

  pname: A GLenum specifying information to query. Possible values:

  :BUFFER_SIZE Returns a GLint indicating the size of the buffer in bytes.

  :BUFFER_USAGE Returns a GLenum indicating the usage pattern of the buffer. One of the followings:

  :STATIC_DRAW :DYNAMIC_DRAW :STREAM_DRAW

  When using a WebGL 2 context, the following values are available additionally:

  :STATIC_READ :DYNAMIC_READ :STREAM_READ :STATIC_COPY :DYNAMIC_COPY :STREAM_COPY

- [generic-function] CONTEXT-ATTRIBUTES OBJ

- [generic-function] WEBGL-ERROR OBJ

- [generic-function] FRAME-BUFFER-ATTACHMENT-PARAMETER OBJ GLENUM-TARGET GLENUM-ATTACHMENT GLENUM-PNAME

- [generic-function] PARAMETER OBJ GLENUM-PNAME

- [generic-function] RENDER-BUFFER-PARAMETER OBJ GLENUM-TARGET GLENUM-PNAME

- [generic-function] TEXTURE-PARAMETER OBJ GLENUM-TARGET GLENUM-PNAME

- [generic-function] VERTEX-ATTRIBUTE CLOG-WEBGL INDEX GLENUM-PNAME

  Information about a vertex attribute at a given position. pname: A GLenum specifying the information to query. Possible values:

  :VERTEX_ATTRIB_ARRAY_BUFFER_BINDING Returns the currently bound WebGLBuffer.

  :VERTEX_ATTRIB_ARRAY_ENABLED Returns a GLboolean that is true if the vertex attribute is enabled at this index. Otherwise false.

  :VERTEX_ATTRIB_ARRAY_SIZE Returns a GLint indicating the size of an element of the vertex array.

  :VERTEX_ATTRIB_ARRAY_STRIDE Returns a GLint indicating the number of bytes between successive elements in the array. 0 means that the elements are sequential.

  :VERTEX_ATTRIB_ARRAY_TYPE Returns a GLenum representing the array type. One of

  `:BYTE` :UNSIGNED_BYTE `:SHORT`, :UNSIGNED_SHORT `:FLOAT` :VERTEX_ATTRIB_ARRAY_NORMALIZED Returns a GLboolean that is true if fixed-point data types are normalized for the vertex attribute array at the given index.

  :CURRENT_VERTEX_ATTRIB Returns a Float32Array (with 4 elements) representing the current value of the vertex attribute at the given index.

  When using a WebGL 2 context, the following values are available additionally:

  :VERTEX_ATTRIB_ARRAY_INTEGER Returns a GLboolean indicating whether an integer data type is in the vertex attribute array at the given index.

  :VERTEX_ATTRIB_ARRAY_DIVISOR Returns a GLint describing the frequency divisor used for instanced rendering.

- [generic-function] ACTIVE-TEXTURE CLOG-WEBGL GLENUM-TEXTURE

  Sets the active textcture in gl context based on :TEXTUREI where I is the texture number.

- [generic-function] BLEND-COLOR CLOG-WEBGL RED GREEN BLUE ALPHA

  Used to set the source and destination blending factors.

- [generic-function] BLEND-EQUATION CLOG-WEBGL GLENUM-MODE

  Used to set both the `RGB` blend equation and alpha blend equation to a single equation. :FUNC_ADD : source + destination (default value) :FUNC_SUBTRACT : source - destination :FUNC_REVERSE_SUBTRACT : destination - source

  When using a WebGL 2 context, the following values are available additionally:

  `:MIN` : Minimum of source and destination `:MAX` : Maximum of source and destination

- [generic-function] BLEND-EQUATION-SEPERATE CLOG-WEBGL GLENUM-MODE-RGB GLENUM-MODE-ALPHA

  Used to set both the `RGB` blend equation and alpha blend equation to a single equation. :FUNC_ADD : source + destination (default value) :FUNC_SUBTRACT : source - destination :FUNC_REVERSE_SUBTRACT : destination - source

  When using a WebGL 2 context, the following values are available additionally:

  `:MIN` : Minimum of source and destination `:MAX` : Maximum of source and destination

- [generic-function] BLEND-FUNCTION CLOG-WEBGL GLENUM-SOURCE-FACTOR GLENUM-DESTINATION-FACTOR

  Defines which function is used for blending pixel arithmetic. See - https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc

- [generic-function] BLEND-FUNCTION-SEPERATE CLOG-WEBGL GLENUM-SOURCE-FACTOR-RGB GLENUM-DESTINATION-FACTOR-RGB GLENUM-SOURCE-FACTOR-ALPHA GLENUM-DESTINATION-FACTOR-ALPHA

  Defines which function is used for blending pixel arithmetic. See - https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc

- [generic-function] CHECK-FRAME-BUFFER-STATUS CLOG-WEBGL TARGET

  Completeness status of frame buffer. Target can be: :FRAMEBUFFER Collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.

  When using a WebGL 2 context, the following values are available additionally:

  :DRAW_FRAMEBUFFER Equivalent to :FRAMEBUFFER. Used as a destination for drawing, rendering, clearing, and writing operations.

  :READ_FRAMEBUFFER Used as a source for reading operations.

- [generic-function] CLEAR-COLOR CLOG-WEBGL RED GREEN BLUE ALPHA

  Specifies the color values used when clearing color buffers with `CLEAR-WEBGL`.

- [generic-function] CLEAR-DEPTH CLOG-WEBGL DEPTH

  Specifying the depth value used when the depth buffer is cleared.

- [generic-function] CLEAR-WEBGL CLOG-WEBGL GLENUM-MASK

  Clears buffers to preset values. `GLENUM-MASK` can be: :COLOR_BUFFER_BIT :DEPTH_BUFFER_BIT :STENCIL_BUFFER_BIT

- [generic-function] CLEAR-STENCIL CLOG-WEBGL STENCIL

  Specifying the stencil index used when the stencil buffer is cleared.

- [generic-function] COLOR-MASK CLOG-WEBGL RED GREEN BLUE ALPHA

  Sets which color components to enable or to disable when drawing or rendering red green blue alpha are nil or true

- [generic-function] DEPTH-FUNCTION CLOG-WEBGL GLENUM-FUNC

  Specifies a function that compares incoming pixel depth to the current depth buffer value. `GLENUM-FUNC` can be: `:NEVER` (never pass) :LESS (pass if the incoming value is less than the depth buffer value) :EQUAL (pass if the incoming value equals the depth buffer value) :LEQUAL (pass if the incoming value is less than or equal to the depth buffer value) :GREATER (pass if the incoming value is greater than the depth buffer value) :NOTEQUAL (pass if the incoming value is not equal to the depth buffer value) :GEQUAL (pass if the incoming value is greater than or equal to the depth buffer value) `:ALWAYS` (always pass)

- [generic-function] DEPTH-MASK CLOG-WEBGL ENABLEP

  Specifying whether or not writing into the depth buffer is enabled

- [generic-function] DEPTH-RANGE CLOG-WEBGL ZNEAR ZFAR

  Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.

- [generic-function] DISABLE-CAPABILITY CLOG-WEBGL GLENUM-CAPABILITY

  Disables specific WebGL capabilities for this context. For `GLENUM-CAPABILITY` see: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/disable

- [generic-function] DISABLE-VERTEX-ATTRIBUTE-ARRAY CLOG-WEBGL ATTRIBUTE-LOCATION

  Turns the generic vertex attribute array off at a given index position.

- [generic-function] DRAW-ARRAYS CLOG-WEBGL MODE OFFSET COUNT

  Renders primitives from array data. `MODE` can be: :POINTS Draws a single dot. :LINE_STRIP Draws a straight line to the next vertex. :LINE_LOOP Draws a straight line to the next vertex, and connects the last vertex back to the first. `:LINES` Draws a line between a pair of vertices. :TRIANGLE_STRIP :TRIANGLE_FAN :TRIANGLES Draws a triangle for a group of three vertices.

- [generic-function] DRAW-ELEMENTS CLOG-WEBGL MODE COUNT TYPE OFFSET

  Renders primitives from array data. `MODE` can be: :POINTS Draws a single dot. :LINE_STRIP Draws a straight line to the next vertex. :LINE_LOOP Draws a straight line to the next vertex, and connects the last vertex back to the first. `:LINES` Draws a line between a pair of vertices. :TRIANGLE_STRIP :TRIANGLE_FAN :TRIANGLES Draws a triangle for a group of three vertices.

  `TYPE` can be: :UNSIGNED_BYTE :UNSIGNED_SHORT

- [generic-function] ENABLE-CAPABILITY CLOG-WEBGL GLENUM-CAPABILITY

  Enables specific WebGL capabilities for this context. For `GLENUM-CAPABILITY` see: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/enable

- [generic-function] ENABLE-VERTEX-ATTRIBUTE-ARRAY CLOG-WEBGL ATTRIBUTE-LOCATION

  Turns the generic vertex attribute array on at a given index position.

- [generic-function] FINISH CLOG-WEBGL

  Blocks execution until all previously called commands are finished. this needs to be written to fire an event when done to work fully with CLOG

- [generic-function] FLUSH CLOG-WEBGL

  Empties different buffer commands, causing all commands to be executed as quickly as possible

- [generic-function] FRAME-BUFFER-RENDER-BUFFER CLOG-WEBGL TARGET ATTACHMENT RENDERBUFFERTARGET CLOG-WEBGL-RENDER-BUFFER

  Attaches a clog-Render-buffer object to a clog-frame-buffer object

- [generic-function] FRAME-BUFFER-TEXTURE-2D CLOG-WEBGL TARGET ATTACHMENT TEXTARGET CLOG-FRAME-BUFFER LEVEL

  attaches a texture to a clog-frame-buffer

- [generic-function] FRONT-FACE CLOG-WEBGL GLENUM-MODE

  Specifies whether polygons are front- or back-facing by setting a winding orientation. `GLENUM-MODE` can be: :CW Clock-wise winding. :CCW Counter-clock-wise winding.

- [generic-function] GENERATE-MIPMAP CLOG-WEBGL GLENUM-TARGET

  Generates a set of mipmaps for a WebGLTexture object. `GLENUM-TARGET` can be: :TEXTURE_2D A two-dimensional texture. :TEXTURE_CUBE_MAP A cube-mapped texture. When using a WebGL 2 context, the following values are available additionally:

  :TEXTURE_3D A three-dimensional texture. :TEXTURE_2D_ARRAY A two-dimensional array texture

- [generic-function] HINT CLOG-WEBGL GLENUM-TARGET GLENUM-MODE

  Hints for certain behaviors. The interpretation of these hints depend on the implementation.

  target: Sets which behavior to be controlled. Possible values:

  :GENERATE_MIPMAP_HINT Quality of filtering when generating mipmap images with WebGLRenderingContext.generateMipmap().

  When using the OES_standard_derivatives extension:

  ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES Accuracy of the derivative calculation for the GLSL built-in functions: dFdx, dFdy, and fwidth.

  When using a WebGL 2 context, the following values are available additionally:

  :FRAGMENT_SHADER_DERIVATIVE_HINT Same as ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES

  mode: Sets the behavior. The default value is :DONT_CARE. The possible values are:

  :FASTEST : The most efficient behavior should be used. :NICEST : The most correct or the highest quality option should be used. :DONT_CARE : There is no preference for this behavior.

- [generic-function] IS-CAPABILITY-ENABLED CLOG-WEBGL GLENUM-CAPABILITY

  Return true if glenum-capability is enabled. https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/isEnabled

- [generic-function] IS-CONTEXT-LOST CLOG-WEBGL

  Return true if context was lost and needs to be re-established

- [generic-function] PIXEL-STORE-INTEGER OBJ GLENUM-PNAME VALUE

- [generic-function] POLYGON-OFFSET OBJ FACTOR UNITS

- [generic-function] RENDER-BUFFER-STORAGE OBJ GLENUM-TARGET GLENUM-INTERNAL-FORMAT WIDTH HEIGHT

- [generic-function] SAMPLE-COVERAGE OBJ VALUE INVERTP

- [generic-function] SCISSOR OBJ X Y WIDTH HEIGHT

- [generic-function] STENCIL-FUNCTION OBJ GLENUM-FUNC REF MASK

- [generic-function] STENCIL-FUNCTION-SEPERATE OBJ GLENUM-FACE GLENUM-FUNC REF MASK

- [generic-function] STENCIL-MASK OBJ MASK

- [generic-function] STENCIL-MASK-SEPERATE OBJ GLENUM-FACE MASK

- [generic-function] STENCIL-OPERATION OBJ FAIL ZFAIL ZPASS

- [generic-function] STENCIL-OPERATION-SEPERATE OBJ GLENUM-FACE FAIL ZFAIL ZPASS

- [generic-function] TEXTURE-PARAMETER-FLOAT OBJ GLENUM-TARGET GLENUM-PNAME VALUE

- [generic-function] TEXTURE-PARAMETER-INTEGER OBJ GLENUM-TARGET GLENUM-PNAME VALUE

- [generic-function] UNIFORM-MATRIX OBJ SIZE LOCATION NORMALIZE MATRIX

- [generic-function] VIEWPORT OBJ X Y WIDTH HEIGHT

- [generic-function] VERTEX-ATTRIBUTE-POINTER OBJ ATTRIBUTE-LOCATION SIZE TYPE NORMALIZE STRIDE OFFSET

- [generic-function] COMPILE-SHADER-SOURCE OBJ GLENUM-TYPE SOURCE

- [generic-function] COMPILE-WEBGL-PROGRAM OBJ VERTEX-SHADER FRAGMENT-SHADER

- [class] CLOG-WEBGL-UNIFORM CLOG-OBJ

CLOG-WebGL-Active-Info - Class for CLOG WebGL Active Info objects

- [class] CLOG-WEBGL-ACTIVE-INFO CLOG-OBJ

- [generic-function] INFO-NAME CLOG-WEBGL-ACTIVE-INFO

  Active Info Name

- [generic-function] INFO-SIZE CLOG-WEBGL-ACTIVE-INFO

  Active Info Size

- [generic-function] INFO-TYPE CLOG-WEBGL-ACTIVE-INFO

  Active Info Type

CLOG-WebGL-Shader - Class for CLOG WebGL-Shader objects

- [class] CLOG-WEBGL-SHADER CLOG-OBJ

- [generic-function] CREATE-SHADER CLOG-WEBGL GLENUM-TYPE

  Create a clog-webgl-shader for type :GLENUM. See https://github.com/KhronosGroup/WebGL/blob/main/specs/latest/2.0/webgl2.idl For :GLENUM values

- [generic-function] IS-SHADER CLOG-WEBGL-SHADER

  Return true if is valid

- [generic-function] SHADER-SOURCE CLOG-WEBGL-SHADER SOURCE

  Sets shader source code

- [generic-function] SHADER-PARAMETER CLOG-WEBGL-SHADER GLENUM-PARAM

  Returns information about the given shader. :DELETE_STATUS Returns a GLboolean indicating whether or not the shader is flagged for deletion.

  `:COMPILE_STATUS` Returns a GLboolean indicating whether or not the last shader compilation was successful.

  :SHADER_TYPE Returns a GLenum indicating whether the shader is a vertex shader (gl.VERTEX_SHADER) or fragment shader (gl.FRAGMENT_SHADER) object.

- [generic-function] SHADER-INFO-LOG CLOG-WEBGL-SHADER

  It contains warnings, debugging and compile information.

- [generic-function] COMPILE-SHADER OBJ

- [generic-function] DELETE-SHADER OBJ

CLOG-WebGL-Program - Class for CLOG WebGL-Program objects

- [class] CLOG-WEBGL-PROGRAM CLOG-OBJ

- [generic-function] CREATE-PROGRAM CLOG-WEBGL

  Create a clog-webgl-program

- [generic-function] IS-PROGRAM CLOG-WEBGL-PROGRAM

  Return true if is valid

- [generic-function] ATTACH-SHADER CLOG-WEBGL-PROGRAM CLOG-WEBGL-SHADER

  Attaches either a fragment or vertex `CLOG-WEBGL-SHADER`

- [generic-function] DETACH-SHADER CLOG-WEBGL-PROGRAM CLOG-WEBGL-SHADER

  Detaches a `CLOG-WEBGL-SHADER`

- [generic-function] BIND-ATTRIBUTE-LOCATION CLOG-WEBGL-PROGRAM INDEX NAME

  Binds a generic vertex `INDEX` to an attribute variable called `NAME`.

- [generic-function] PROGRAM-PARAMETER CLOG-WEBGL-PROGRAM GLENUM-PARAM

  Information about the given program. :DELETE_STATUS Returns a GLboolean indicating whether or not the program is flagged for deletion.

  `:LINK_STATUS` Returns a GLboolean indicating whether or not the last link operation was successful.

  :VALIDATE_STATUS Returns a GLboolean indicating whether or not the last validation operation was successful.

  :ATTACHED_SHADERS Returns a GLint indicating the number of attached shaders to a program.

  :ACTIVE_ATTRIBUTES Returns a GLint indicating the number of active attribute variables to a program.

  :ACTIVE_UNIFORMS Returns a GLint indicating the number of active uniform variables to a program.

  When using a WebGL 2 context, the following values are available additionally:

  :TRANSFORM_FEEDBACK_BUFFER_MODE Returns a GLenum indicating the buffer mode when transform feedback is active. May be :SEPARATE_ATTRIBS or :INTERLEAVED_ATTRIBS.

  :TRANSFORM_FEEDBACK_VARYINGS Returns a GLint indicating the number of varying variables to capture in transform feedback mode.

  :ACTIVE_UNIFORM_BLOCKS Returns a GLint indicating the number of uniform blocks containing active uniforms.

- [generic-function] ATTRIBUTE-LOCATION CLOG-WEBGL-PROGRAM NAME

  Returns the location of an attribute variable in clog-webgl-program

- [generic-function] UNIFORM-LOCATION CLOG-WEBGL-PROGRAM NAME

  Returns the location of an uniform variable in clog-webgl-program

- [generic-function] ACTIVE-ATTRIBUTE CLOG-WEBGL-PROGRAM INDEX

  Query about unknown attributes

- [generic-function] ACTIVE-UNIFORM CLOG-WEBGL-PROGRAM INDEX

  Query about unknown uniforms

- [generic-function] UNIFORM CLOG-WEBGL-PROGRAM LOCATION

  Returns the value of uniform at `LOCATION` in clog-webgl-program

- [generic-function] PROGRAM-INFO-LOG CLOG-WEBGL-PROGRAM

  Contains errors that occurred during failed linking or validation of WebGLProgram objects.

- [generic-function] LINK-PROGRAM OBJ

- [generic-function] USE-PROGRAM OBJ

- [generic-function] DELETE-PROGRAM OBJ

CLOG-WebGL-Buffer - Class for CLOG WebGL-Buffer objects

- [class] CLOG-WEBGL-BUFFER CLOG-OBJ

- [generic-function] CREATE-WEBGL-BUFFER CLOG-WEBGL &KEY BIND-TYPE

  Create a clog-webgl-buffer. If `BIND-TYPE` is set binds the buffer to either :ARRAY_BUFFER or :ELEMENT_ARRAY_BUFFER in WebGL2 the following added: :COPY_READ_BUFFER : Buffer for copying from one buffer object to another. :COPY_WRITE_BUFFER : Buffer for copying from one buffer object to another. :TRANSFORM_FEEDBACK_BUFFER : Buffer for transform feedback operations. :UNIFORM_BUFFER : Buffer used for storing uniform blocks. :PIXEL_PACK_BUFFER : Buffer used for pixel transfer operations. :PIXEL_UNPACK_BUFFER : Buffer used for pixel transfer operations.

- [generic-function] IS-BUFFER CLOG-WEBGL-BUFFER

  Return true if is valid

- [generic-function] BIND-BUFFER CLOG-WEBGL-BUFFER GLENUM-TARGET

  Set `BIND-TYPE` of buffer to either :ARRAY_BUFFER or :ELEMENT_ARRAY_BUFFER. WebGL2 adds: :COPY_READ_BUFFER : Buffer for copying from one buffer object to another. :COPY_WRITE_BUFFER : Buffer for copying from one buffer object to another. :TRANSFORM_FEEDBACK_BUFFER : Buffer for transform feedback operations. :UNIFORM_BUFFER : Buffer used for storing uniform blocks. :PIXEL_PACK_BUFFER : Buffer used for pixel transfer operations. :PIXEL_UNPACK_BUFFER : Buffer used for pixel transfer operations.

- [generic-function] BUFFER-DATA CLOG-WEBGL-BUFFER DATA-LIST DATA-TYPE GLENUM-USAGE

  Initializes and creates the buffer object's data store. `DATA-LIST` is a Lisp list of data elements. `DATA-TYPE` is the WebGL data type as a string "Float32Array" `GLENUM-USAGE` us a usage hint like :STATIC_DRAW

- [generic-function] BUFFER-SUB-DATA CLOG-WEBGL-BUFFER OFFSET DATA-LIST DATA-TYPE

  Initializes and creates the buffer object's data store. `OFFSET` element index offset where to start reading the buffer. `DATA-LIST` is a Lisp list of data elements. `DATA-TYPE` is the WebGL data type as a string "Float32Array"

- [generic-function] DELETE-BUFFER OBJ

CLOG-WebGL-Vertex-Array - Class for CLOG WebGL-Vertex-Array objects

- [class] CLOG-WEBGL-VERTEX-ARRAY CLOG-OBJ

- [generic-function] CREATE-VERTEX-ARRAY CLOG-WEBGL

  Create a clog-webgl-vertex-array

- [generic-function] BIND-VERTEX-ARRAY OBJ

- [generic-function] DELETE-VERTEX-ARRAY OBJ

CLOG-WebGL-Frame-Buffer - Class for CLOG WebGL-Frame-Buffer objects

- [class] CLOG-WEBGL-FRAME-BUFFER CLOG-OBJ

- [generic-function] CREATE-WEBGL-FRAME-BUFFER CLOG-WEBGL &KEY BIND-TYPE

  Create a clog-webgl-frame-buffer. If `BIND-TYPE` is set binds the frame-buffer to :FRAMEBUFFER in WebGL2 the following are added: :DRAW_FRAMEBUFFER : Used as a destination for drawing operations such as draw, clear and blit-frame-buffer. :READ_FRAMEBUFFER : Used as a source for reading operations such as readPixels and blit-frame-buffer.

- [generic-function] IS-FRAME-BUFFER CLOG-WEBGL-FRAME-BUFFER

  Return true if is valid

- [generic-function] BIND-FRAME-BUFFER CLOG-WEBGL-FRAME-BUFFER GLENUM-TARGET

  Set `BIND-TYPE` of frame-buffer to :FRAMEBUFFER in WebGL2 the following are added: :DRAW_FRAMEBUFFER : Used as a destination for drawing operations such as draw, clear and blit-frame-buffer. :READ_FRAMEBUFFER : Used as a source for reading operations such as readPixels and blit-frame-buffer

- [generic-function] DELETE-FRAME-BUFFER OBJ

CLOG-WebGL-Render-Buffer - Class for CLOG WebGL-Render-Buffer objects

- [class] CLOG-WEBGL-RENDER-BUFFER CLOG-OBJ

- [generic-function] CREATE-WEBGL-RENDER-BUFFER CLOG-WEBGL &KEY BIND-TYPE

  Create a clog-webgl-render-buffer. If `BIND-TYPE` is set binds the render-buffer to :RENDERBUFFER

- [generic-function] IS-RENDER-BUFFER CLOG-WEBGL-RENDER-BUFFER

  Return true if is valid

- [generic-function] BIND-RENDER-BUFFER CLOG-WEBGL-RENDER-BUFFER GLENUM-TARGET

  Set `BIND-TYPE` of render-buffer to :RENDERBUFFER

- [generic-function] DELETE-RENDER-BUFFER OBJ

CLOG-WebGL-Texture - Class for CLOG WebGL-Texture objects

- [class] CLOG-WEBGL-TEXTURE CLOG-OBJ

- [generic-function] CREATE-WEBGL-TEXTURE CLOG-WEBGL &KEY BIND-TYPE

  Create a clog-webgl-texture. If `BIND-TYPE` is set binds the texture to: :TEXTURE_2D : A two-dimensional texture. :TEXTURE_CUBE_MAP : A cube-mapped texture. in WebGL 2 also: :TEXTURE_3D : A three-dimensional texture. :TEXTURE_2D_ARRAY : A two-dimensional array texture.

- [generic-function] IS-TEXTURE CLOG-WEBGL-TEXTURE

  Return true if is valid

- [generic-function] BIND-TEXTURE CLOG-WEBGL-TEXTURE GLENUM-TARGET

  Set `BIND-TYPE` of texture to: :TEXTURE_2D : A two-dimensional texture. :TEXTURE_CUBE_MAP : A cube-mapped texture. in WebGL 2 also: :TEXTURE_3D : A three-dimensional texture. :TEXTURE_2D_ARRAY : A two-dimensional array texture.

- [generic-function] DELETE-TEXTURE OBJ

← ↑ → ↺

## 18 CLOG Multimedia Objects

CLOG-Multimedia - Base Class for CLOG multimedia objects

- [class] CLOG-MULTIMEDIA CLOG-ELEMENT

  CLOG Multimedia base class.

- [generic-function] LOOP-MEDIAP CLOG-MULTIMEDIA

  Get/Setf loop media property.

- [generic-function] MEDIA-DURATION CLOG-MULTIMEDIA

  Get/Setf media in seconds property.

- [generic-function] MEDIA-SOURCE CLOG-MULTIMEDIA

  Get/Setf media source/url.

- [generic-function] MEDIA-POSITION CLOG-MULTIMEDIA

  Get/Setf postion of media in seconds.

- [generic-function] MUTEDP CLOG-MULTIMEDIA

  Get/Setf muted property.

- [generic-function] PAUSEDP CLOG-MULTIMEDIA

  Get/Setf paused property.

- [generic-function] SEEKINGP CLOG-MULTIMEDIA

  Get/Setf seeking property.

- [generic-function] PLAYBACK-ENDED-P CLOG-MULTIMEDIA

  Get/Setf true of Media position has reached end of its duration.

- [generic-function] PLAYBACK-RATE CLOG-MULTIMEDIA

  Get/Setf playback rate. Common values - 1.0 normal, 0.5 half speed, -1.0 reverse

- [generic-function] READY-TO-PLAY-P CLOG-MULTIMEDIA

  Get/Setf true of Media position has reached end of its duration.

- [generic-function] MEDIA-VOLUME CLOG-MULTIMEDIA

  Get/Setf media volume, not system volume. 0.0 .. 1.0

- [generic-function] PLAY-MEDIA CLOG-MULTIMEDIA

  Play media.

- [generic-function] PAUSE-MEDIA CLOG-MULTIMEDIA

  Pause media.

- [generic-function] LOAD-MEDIA CLOG-MULTIMEDIA

  Load/Reload media.

- [generic-function] CAN-PLAY-TYPE-P CLOG-MULTIMEDIA MEDIA-TYPE

  Returns true if browser claims support of a media type. Browsers report possibility but not guarantees of being able to support a media type.

       Common values:
         video/ogg
         video/mp4
         video/webm
         audio/mpeg
         audio/ogg
         audio/mp4
         audio/mp3

       Common values, including codecs:
         video/ogg; codecs="theora, vorbis"
         video/mp4; codecs="avc1.4D401E, mp4a.40.2"
         video/webm; codecs="vp8.0, vorbis"
         audio/ogg; codecs="vorbis"
         audio/mp4; codecs="mp4a.40.5"

CLOG-Multimedia - Event Handlers

The standard event order for a normal file load is: On_Load_Start On_Duration_Change On_Loaded_Meta_Data On_Loaded_Data On_Progress On_Can_Play On_Can_Play_Though

- [generic-function] SET-ON-MEDIA-ABORT CLOG-MULTIMEDIA HANDLER

  Set the ON-MEDIA-ABORT-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-MEDIA-ERROR CLOG-MULTIMEDIA HANDLER

  Set the ON-MEDIA-ERROR-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-CAN-PLAY CLOG-MULTIMEDIA HANDLER

  Set the ON-CAN-PLAY-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-CAN-PLAY-THROUGH CLOG-MULTIMEDIA HANDLER

  Set the ON-CAN-PLAY-THROUGH-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-DURATION-CHANGE CLOG-MULTIMEDIA HANDLER

  Set the ON-DURATION-CHANGE-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-EMPTIED CLOG-MULTIMEDIA HANDLER

  Set the ON-EMPTIED-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-ENDED CLOG-MULTIMEDIA HANDLER

  Set the ON-ENDED-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-LOADED-DATA CLOG-MULTIMEDIA HANDLER

  Set the ON-LOADED-DATA-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-LOADED-META-DATA CLOG-MULTIMEDIA HANDLER

  Set the ON-LOADED-META-DATA-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-LOAD-START CLOG-MULTIMEDIA HANDLER

  Set the ON-LOAD-START-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-PLAY CLOG-MULTIMEDIA HANDLER

  Set the ON-PLAY-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-PAUSE CLOG-MULTIMEDIA HANDLER

  Set the ON-PAUSE-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-PLAYING CLOG-MULTIMEDIA HANDLER

  Set the ON-PLAYING-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-PROGRESS CLOG-MULTIMEDIA HANDLER

  Set the ON-PROGRESS-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-RATE-CHANGE CLOG-MULTIMEDIA HANDLER

  Set the ON-RATE-CHANGE-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-SEEKED CLOG-MULTIMEDIA HANDLER

  Set the ON-SEEKED-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-SEEKING CLOG-MULTIMEDIA HANDLER

  Set the ON-SEEKING-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-STALLED CLOG-MULTIMEDIA HANDLER

  Set the ON-STALLED-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-SUSPEND CLOG-MULTIMEDIA HANDLER

  Set the ON-SUSPEND-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-TIME-UPDATE CLOG-MULTIMEDIA HANDLER

  Set the ON-TIME-UPDATE-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-VOLUME-CHANGE CLOG-MULTIMEDIA HANDLER

  Set the ON-VOLUME-CHANGE-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

- [generic-function] SET-ON-WAITING CLOG-MULTIMEDIA HANDLER

  Set the ON-WAITING-HANDLER for `CLOG-MULTIMEDIA`. `HANDLER` is nil unbind the event.

Clog-Audio - Class for CLOG Audio Control

- [class] CLOG-AUDIO CLOG-MULTIMEDIA

  CLOG Audio class.

- [generic-function] CREATE-AUDIO CLOG-OBJ &KEY SOURCE CONTROLS PRELOAD AUTOPLAY AUTOLOOP MUTED HTML-ID AUTO-PLACE

  Create a CLOG Audio control

Clog-Video - Class for CLOG Video Control

- [class] CLOG-VIDEO CLOG-MULTIMEDIA

  CLOG Video class.

- [generic-function] CREATE-VIDEO CLOG-OBJ &KEY SOURCE CONTROLS PRELOAD POSTER AUTOPLAY AUTOLOOP MUTED HTML-ID AUTO-PLACE

  Create a CLOG video control

← ↑ → ↺

## 19 CLOG Auth Objects

###### [in package CLOG-AUTH]

CLOG-AUTH - Authentication

- [function] GET-AUTHENTICATION-TOKEN BODY &KEY AUTH-PATH

  Retrieve the stored authentication token

- [function] STORE-AUTHENTICATION-TOKEN BODY TOKEN

- [function] REMOVE-AUTHENTICATION-TOKEN BODY

- [function] SET-ON-AUTHENTICATION-CHANGE BODY HANDLER

CLOG-AUTH - Authorization

- [function] ADD-AUTHORIZATION ROLE-LIST ACTION-LIST

  Add to each role in `ROLE-LIST` every action in `ACTION-LIST`

- [function] IS-AUTHORIZED-P ROLE-LIST ACTION

  Given `ROLE-LIST` is action authorized. If action is nil returns t.

← ↑ → ↺

## 20 CLOG GUI Objects

###### [in package CLOG-GUI]

`CLOG-GUI` - Desktop GUI abstraction for CLOG

- [function] CLOG-GUI-INITIALIZE CLOG-BODY &KEY (BODY-LEFT-OFFSET 0) (BODY-RIGHT-OFFSET 0) (USE-CLOG-DEBUGGER `NIL`) (STANDARD-OUTPUT `NIL`) (PARENT-DESKTOP-OBJ `NIL`) (W3-CSS-URL "/css/w3.css") (JQUERY-UI-CSS "/css/jquery-ui.css") (JQUERY-UI "/js/jquery-ui.js")

  Initializes clog-gui and installs a clog-gui object on the connection body. If `W3-CSS-URL` has not been loaded before it is installed unless set to nil. clog-gui uses jQueryUI and its default css file to provide client side movement when needed, if client side movement is not used it is possible to pass nil to the initilization function for both the jquery-ui-js and jquery-ui-css options and there is no need to deliver the jQueryUI it with your application. `BODY-LEFT-OFFSET` and `BODY-RIGHT-OFFSET` limit width on maximize. parent-desktop-obj is used if this window is a popup or otherwise a slave of another clog-gui page. If use-clog-debugger then a graphical debugger is set for all events. If standard-output is set standard-output for every event is redirected to it. NOTE: use-clog-debugger should not be set for security issues on non-secure environments.

`CLOG-GUI` - Menus

- [class] CLOG-GUI-MENU-BAR CLOG-DIV

  Menu bar

- [generic-function] CREATE-GUI-MENU-BAR CLOG-OBJ &KEY CLASS HTML-ID MAIN-MENU

  Attached a menu bar to a `CLOG-OBJ` in general a clog-body. If main-menu add as main menu bar.

- [class] CLOG-GUI-MENU-DROP-DOWN CLOG-DIV

  Drop down menu

- [generic-function] CREATE-GUI-MENU-DROP-DOWN CLOG-GUI-MENU-BAR &KEY CONTENT CLASS HTML-ID

  Attached a menu bar drop-down to a `CLOG-GUI-MENU-BAR`

- [class] CLOG-GUI-MENU-ITEM CLOG-SPAN

  Menu item

- [generic-function] CREATE-GUI-MENU-ITEM CLOG-GUI-MENU-DROP-DOWN &KEY CONTENT ON-CLICK CLASS HTML-ID

  Attached a menu item to a `CLOG-GUI-MENU-DROP-DOWN`

- [generic-function] CREATE-GUI-MENU-WINDOW-SELECT CLOG-OBJ &KEY CLASS CONTENT HTML-ID

  Attaches a clog-select as a menu item that auto updates with open windows and focuses them unless is a keep-on-top window. The first menu-window-select will receive change window notices only.

- [generic-function] CREATE-GUI-MENU-FULL-SCREEN CLOG-GUI-MENU-BAR &KEY HTML-ID

  Add as last item in menu bar to allow for a full screen icon ⤢ (menu-full-screen-item default) and full screen mode.

- [generic-function] CREATE-GUI-MENU-ICON CLOG-GUI-MENU-BAR &KEY IMAGE-URL ON-CLICK CLASS HTML-ID

  Add icon as menu bar item.

`CLOG-GUI` - Window System

- [generic-function] CURRENT-WINDOW CLOG-OBJ

  Get the current selected clog-gui-window

- [generic-function] MENU-BAR CLOG-OBJ

  Get/setf window menu-bar. This is set buy create-gui-menu-bar.

- [generic-function] MENU-BAR-HEIGHT CLOG-OBJ

  Get menu-bar height

- [generic-function] WINDOW-COLLECTION CLOG-OBJ

  Get hash table of open windows

- [generic-function] WINDOW-TO-TOP-BY-TITLE CLOG-OBJ TITLE

  Bring window with `TITLE` to top and return window or nil if not found

- [generic-function] WINDOW-TO-TOP-BY-PARAM CLOG-OBJ PARAM

  Bring window with `PARAM` to top and return window or nil if not found

- [generic-function] WINDOW-BY-TITLE CLOG-OBJ TITLE

  Bring window with `TITLE` to top and return window or nil if not found

- [generic-function] WINDOW-BY-PARAM CLOG-OBJ PARAM

  Bring window with `PARAM` to top and return window or nil if not found

- [generic-function] REORIENT-ALL-WINDOWS CLOG-OBJ

  Reorient all windows. Remaximized any maximize windows and leave any normalized windows as normalized. This is called by default in on-resize, on-full-screen-change and on-orientation-change events.

- [generic-function] MAXIMIZE-ALL-WINDOWS CLOG-OBJ

  Maximize all windows

- [generic-function] NORMALIZE-ALL-WINDOWS CLOG-OBJ

  Normalize all windows

- [generic-function] SET-ON-WINDOW-CHANGE CLOG-OBJ HANDLER

  Set the on-window-change `HANDLER`. The on-window-change clog-obj received is the new window

`CLOG-GUI` - Individual Windows

- [class] CLOG-GUI-WINDOW CLOG-ELEMENT

- [generic-function] CREATE-GUI-WINDOW CLOG-OBJ &KEY TITLE CONTENT LEFT TOP WIDTH HEIGHT MAXIMIZE HIDE-TITLE-BAR DRAG-CLIENT-AREA HAS-PINNER KEEP-ON-TOP WINDOW-PARAM HIDDEN CLIENT-MOVEMENT NO-SIZER BORDER-CLASS TITLE-CLASS HTML-ID

  Create a clog-gui-window. If client-movement is t then use jquery-ui to move/resize and will not work on mobile and touch events are limitted to clicks. When client-movement is t only on-window-move is fired once at start of drag and on-window-move-done at end of drag and on-window-resize at start of resize and on-window-resize-done at end of resize. If has-pinner a toggle will appear on title bar to allow pinning the window in place, if keep-on-top t then when pinned also will keep-on-top. If had-pinned is nil and keep-on-top t then the window will be set to keep-on-top always. window-param is a general parameter for identifiying the window to use with window-to-top-by-param or window-by-param.

- [generic-function] WINDOW-TITLE CLOG-GUI-WINDOW

  Get/setf window title

- [generic-function] WINDOW-PARAM CLOG-GUI-WINDOW

  Get/setf window param

- [generic-function] WINDOW-CONTENT CLOG-GUI-WINDOW

  Get window content element.

- [generic-function] WINDOW-FOCUS CLOG-GUI-WINDOW

  Set `CLOG-GUI-WINDOW` as focused window.

- [generic-function] WINDOW-CLOSE CLOG-GUI-WINDOW

  Close `CLOG-GUI-WINDOW`. on-window-can-close is not called. `CLOG-GUI-WINDOW` is removed from DOM but still present in the CLOG cache on the browser.

- [function] WINDOW-VALID-P OBJ

  Returns t if is a valid clog-gui-window. An invalid state can occur when a popup slave desktop is closed by the OS or the window has been previously closed. If the obj exists in the internal hash of windows it is removed.

- [generic-function] WINDOW-MAXIMIZED-P CLOG-GUI-WINDOW

  Set `CLOG-GUI-WINDOW` as maximized window.

- [generic-function] WINDOW-MAXIMIZE CLOG-GUI-WINDOW &KEY FOCUS

  Set `CLOG-GUI-WINDOW` as maximized window and :focus (default t).

- [generic-function] WINDOW-NORMALIZE CLOG-GUI-WINDOW &KEY FOCUS

  Set `CLOG-GUI-WINDOW` as normalized window an :focus (default t).

- [generic-function] WINDOW-TOGGLE-MAXIMIZE CLOG-GUI-WINDOW

  Toggle `CLOG-GUI-WINDOW` as maximize window.

- [generic-function] WINDOW-TOGGLE-TITLE-BAR CLOG-GUI-WINDOW &KEY STATE

  Set `CLOG-GUI-WINDOW` title bar to visible or not (default t).

- [generic-function] WINDOW-TOGGLE-PINNED CLOG-GUI-WINDOW &KEY STATE KEEP-ON-TOP

  Toggle the pinned state of a `CLOG-GUI-WINDOW`. A pinned window cannot be moved, closed, resized, maximized or normalized. A new window is always unpinned. If keep-on-top the keep-on-top state is toggled to match the pinned state. :state forces state. Returns new state

- [generic-function] WINDOW-KEEP-ON-TOP CLOG-GUI-WINDOW &KEY STATE

  Set `CLOG-GUI-WINDOW` to stay on top based on state (default t).

- [generic-function] WINDOW-MAKE-MODAL CLOG-GUI-WINDOW

  Set `CLOG-GUI-WINDOW` to stay on top and prevent all other interactions. Use window-end-modal to undo.

- [generic-function] WINDOW-END-MODAL CLOG-GUI-WINDOW

  Set `CLOG-GUI-WINDOW` to end modal state.

- [generic-function] WINDOW-CENTER CLOG-GUI-WINDOW

  Center `CLOG-GUI-WINDOW` in browser.

`CLOG-GUI` - Individual Window Events

- [generic-function] SET-ON-WINDOW-FOCUS CLOG-GUI-WINDOW HANDLER

  Set the on-window-focus `HANDLER`

- [generic-function] SET-ON-WINDOW-BLUR CLOG-GUI-WINDOW HANDLER

  Set the on-window-blur `HANDLER`

- [generic-function] SET-ON-WINDOW-CAN-CLOSE CLOG-GUI-WINDOW HANDLER

  Set the on-window-can-close `HANDLER`

- [generic-function] SET-ON-WINDOW-CLOSE CLOG-GUI-WINDOW HANDLER

  Set the on-window-close `HANDLER`

- [generic-function] SET-ON-WINDOW-CAN-MAXIMIZE CLOG-GUI-WINDOW HANDLER

  Set the on-window-can-maximize `HANDLER`

- [generic-function] SET-ON-WINDOW-CAN-NORMALIZE CLOG-GUI-WINDOW HANDLER

  Set the on-window-can-normalize `HANDLER`

- [generic-function] SET-ON-WINDOW-CAN-MOVE CLOG-GUI-WINDOW HANDLER

  Set the on-window-can-move `HANDLER`

- [generic-function] SET-ON-WINDOW-CAN-SIZE CLOG-GUI-WINDOW HANDLER

  Set the on-window-can-size `HANDLER`

- [generic-function] SET-ON-WINDOW-MOVE CLOG-GUI-WINDOW HANDLER

  Set the on-window-move `HANDLER`

- [generic-function] SET-ON-WINDOW-SIZE CLOG-GUI-WINDOW HANDLER

  Set the on-window-size `HANDLER`

- [generic-function] SET-ON-WINDOW-MOVE-DONE CLOG-GUI-WINDOW HANDLER

  Set the on-window-move-done `HANDLER`.

- [generic-function] SET-ON-WINDOW-SIZE-DONE CLOG-GUI-WINDOW HANDLER

  Set the on-window-size-done `HANDLER`

`CLOG-GUI` - Dialog Boxes

- [function] ALERT-TOAST 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 html body instead of bottom of html body. Note, when time-out alert-toast blocks and the toast is displayed for time-out or until user closes the toast.

- [function] ALERT-DIALOG OBJ CONTENT &KEY (MODAL `T`) (TITLE "About") (TIME-OUT `NIL`) (LEFT `NIL`) (TOP `NIL`) (WIDTH 300) (HEIGHT 200) (CLIENT-MOVEMENT `NIL`) (HTML-ID `NIL`)

  Create an alert dialog box with `CONTENT` centered. If time-out alert-dialog blocks till time-out reached or OK clicked.

- [function] INPUT-DIALOG OBJ CONTENT ON-INPUT &KEY (MODAL `T`) (TIME-OUT `NIL`) (TITLE "Input") (SIZE 20) (ROWS 1) (PLACEHOLDER-VALUE "") (DEFAULT-VALUE "") (LEFT `NIL`) (TOP `NIL`) (WIDTH 300) (HEIGHT 200) (CLIENT-MOVEMENT `NIL`) (HTML-ID `NIL`)

  Create an input dialog box with `CONTENT` centered and an input box. Calls on-input with input box contents or nil if canceled. If time-out block time-out seconds for responce or cancels dialog box then returns result of on-input.

- [function] CONFIRM-DIALOG OBJ CONTENT ON-INPUT &KEY (MODAL `T`) (TITLE "Confirm") (OK-TEXT "OK") (CANCEL-TEXT "Cancel") (TIME-OUT `NIL`) (LEFT `NIL`) (TOP `NIL`) (WIDTH 300) (HEIGHT 200) (CLIENT-MOVEMENT `NIL`) (HTML-ID `NIL`)

  Create a confirmation dialog box with `CONTENT` centered. Calls on-input with t if confirmed or nil if canceled.

- [function] FORM-DIALOG OBJ CONTENT FIELDS ON-INPUT &KEY (MODAL `T`) (TITLE "Form") (OK-TEXT "OK") (CANCEL-TEXT "Cancel") (TIME-OUT `NIL`) (LEFT `NIL`) (TOP `NIL`) (WIDTH 400) (HEIGHT 500) (SIZE 40) (ROWS 4) (CLIENT-MOVEMENT `NIL`) (HTML-ID `NIL`)

  Create a form dialog box with `CONTENT` followed by `FIELDS`. `FIELDS` is a list of lists each list has:

      (1) Field description  - Used for label
      (2) Field name         - Used for (name attribute)
      (3) Field type         - Optional (defaults to :text)
      (4) Field type options - Optional

  Special field types

  Field Type Field Type Options ============= ================== :filename default dir -- NOTE: This is server side! :checkbox t if checked :radiobox a-list ((label name)) a third value can be added "checked" :select a-list ((label name)) a third value can be added "selected" :textarea value :text value (any text input types also work :email, :tel, etc. see `FORM-ELEMENT-TYPE`)

  The size of any texarea field is controled by the size and rows parameters

  Calls on-input after OK or Cancel with an a-list of field name to value if confirmed or nil if canceled. If time-out is set the result of on-input returned after either ok or cancel or time elapses.

- [function] SERVER-FILE-DIALOG OBJ TITLE INITIAL-DIR ON-FILE-NAME &KEY (MODAL `T`) (TIME-OUT `NIL`) (LEFT `NIL`) (TOP `NIL`) (WIDTH 390) (HEIGHT 425) (MAXIMIZE `NIL`) (INITIAL-FILENAME `NIL`) (CLIENT-MOVEMENT `NIL`) (HTML-ID `NIL`)

  Create a local file dialog box called `TITLE` using `INITIAL-DIR` on server machine, upon close `ON-FILE-NAME` called with filename or nil if failure. If time-out return result of on-file-name, cancels dialog if time runs out.

`CLOG-GUI` - Debugger

- [macro] WITH-CLOG-DEBUGGER (CLOG-OBJ &KEY TITLE STANDARD-OUTPUT) &BODY BODY

  body uses a clog-gui based debugger instead of the console

- [function] ONE-OF-DIALOG OBJ INTRO CHOICES &KEY (TITLE "Please choose one") (PROMPT "Choice")

  Prompt a dialog box with `TITLE` and `INTRO` using list of `CHOICES` and `PROMPT`

- [class] DIALOG-IN-STREAM TRIVIAL-GRAY-STREAMS:FUNDAMENTAL-CHARACTER-INPUT-STREAM

  dialog-in-stream and dialog-out-stream can be combined with make-two-way-stream to provide a query-io using a clog-gui instead of console)

- [class] DIALOG-OUT-STREAM TRIVIAL-GRAY-STREAMS:FUNDAMENTAL-CHARACTER-OUTPUT-STREAM

  dialog-in-stream and dialog-out-stream can be combined with make-two-way-stream to provide a query-io using a clog-gui instead of console)

`CLOG-GUI` - Look and Feel

- [variable] *MENU-BAR-CLASS* "w3-bar w3-black w3-card-4"

- [variable] *MENU-BAR-DROP-DOWN-CLASS* "w3-dropdown-content w3-bar-block w3-card-4"

- [variable] *MENU-ITEM-CLASS* "w3-bar-item w3-button"

- [variable] *MENU-WINDOW-SELECT-CLASS* "w3-bar-item w3-button"

- [variable] *MENU-FULL-SCREEN-ITEM* "⤢"

- [variable] *MENU-ICON-IMAGE-CLASS* "w3-button w3-bar-item"

- [variable] *TOP-BAR-HEIGHT* 20

  Overlap on new windows created with top set as nil

- [variable] *DEFAULT-TITLE-CLASS* "w3-black"

  Window title bar class

- [variable] *DEFAULT-BORDER-CLASS* "w3-card-4 w3-white w3-border"

  Window frame border

← ↑ → ↺

## 21 CLOG Web Objects

###### [in package CLOG-WEB]

`CLOG-WEB` - Web page abstraction for CLOG

- [function] CLOG-WEB-INITIALIZE CLOG-BODY &KEY (W3-CSS-URL "/css/w3.css")

  Initializes clog-web and installs a clog-web object on connection. If `W3-CSS-URL` has not been loaded before is installed unless is nil.

- [function] SET-MAXIMUM-PAGE-WIDTH-IN-PIXELS CLOG-BODY WIDTH

  The default width is 980 pixels.

`CLOG-WEB` - General Containers

- [class] CLOG-WEB-PANEL CLOG-DIV

  Panel for web content

- [generic-function] CREATE-WEB-PANEL CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

  Create a clog-web-panel. General container with 16px left and right padding and 16x top and bottom margin. If hidden is t then then the visiblep propetery will be set to nil on creation.

- [class] CLOG-WEB-CONTENT CLOG-DIV

  Content for web content

- [generic-function] CREATE-WEB-CONTENT CLOG-OBJ &KEY CONTENT MAXIMUM-WIDTH HIDDEN CLASS HTML-ID

  Create a clog-web-content. General container with 16px left and right padding. If hidden is t then then the visiblep propetery will be set to nil on creation.

- [class] CLOG-WEB-CODE CLOG-DIV

  Code for web code

- [generic-function] CREATE-WEB-CODE CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

  Create a clog-web-code. Code content container. If hidden is t then then the visiblep propetery will be set to nil on creation.

- [class] CLOG-WEB-MAIN CLOG-DIV

  Main for web content

- [generic-function] CREATE-WEB-MAIN CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

  Create a clog-web-main. Container for main content when using a collapsable sidebar or other whole page shifting technique. If hidden is t then then the visiblep propetery will be set to nil on creation.

- [class] CLOG-WEB-SIDEBAR CLOG-DIV

  Sidebar for web content

- [generic-function] CREATE-WEB-SIDEBAR CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

  Create a clog-web-sidebar. Container for sidebar content. sidebars are create with the display property set to :none if hidden it t and :block if nil. In general the visiblep property is used in clog, however in clog-web-sidebar the block property is needed to activate its animations if used. If using a sidebar that will take space and not collapse, make sure to set the sidebar's size and set a margin equal to the size on the main container.

- [class] CLOG-WEB-SIDEBAR-ITEM CLOG-BUTTON

  Sidebar-Item for web content

- [generic-function] CREATE-WEB-SIDEBAR-ITEM CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

  Create a clog-web-sidebar-item. A sidebar menu bar item. If hidden is t then then the visiblep propetery will be set to nil on creation.

- [class] CLOG-WEB-SIDEBAR-ITEM CLOG-BUTTON

  Sidebar-Item for web content

- [generic-function] CREATE-WEB-SIDEBAR-ITEM CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

  Create a clog-web-sidebar-item. A sidebar menu bar item. If hidden is t then then the visiblep propetery will be set to nil on creation.

- [class] CLOG-WEB-COMPOSITOR CLOG-DIV

  Compositor for compositing layers of web content

- [generic-function] CREATE-WEB-COMPOSITOR CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

  Create a clog-web-compositor. Allows compositing of content on top of other content. Content is added as children and then composit-location is called on the object of that content. If hidden is t then then the visiblep propetery will be set to nil on creation.

- [type] WEB-PADDING-CLASS-TYPE

- [generic-function] COMPOSITE-ON-HOVER CLOG-ELEMENT

  Composite `CLOG-ELEMENT` on on-hover.

- [generic-function] COMPOSITE-POSITION CLOG-ELEMENT &KEY TOP LEFT PADDING-CLASS

  Composite `CLOG-ELEMENT` to coordinate top left.

- [generic-function] COMPOSITE-TOP-MIDDLE CLOG-ELEMENT &KEY PADDING-CLASS

  Composite `CLOG-ELEMENT` on top-middle.

- [generic-function] COMPOSITE-TOP-LEFT CLOG-ELEMENT &KEY PADDING-CLASS

  Composite `CLOG-ELEMENT` on top-left.

- [generic-function] COMPOSITE-TOP-RIGHT CLOG-ELEMENT &KEY PADDING-CLASS

  Composite `CLOG-ELEMENT` on top-right.

- [generic-function] COMPOSITE-BOTTOM-MIDDLE CLOG-ELEMENT &KEY PADDING-CLASS

  Composite `CLOG-ELEMENT` on bottom-middle.

- [generic-function] COMPOSITE-BOTTOM-LEFT CLOG-ELEMENT &KEY PADDING-CLASS

  Composite `CLOG-ELEMENT` on bottom-left.

- [generic-function] COMPOSITE-BOTTOM-RIGHT CLOG-ELEMENT &KEY PADDING-CLASS

  Composite `CLOG-ELEMENT` on bottom-right.

- [generic-function] COMPOSITE-MIDDLE CLOG-ELEMENT &KEY PADDING-CLASS

  Composite `CLOG-ELEMENT` on middle.

- [generic-function] COMPOSITE-LEFT CLOG-ELEMENT &KEY PADDING-CLASS

  Composite `CLOG-ELEMENT` on left.

- [generic-function] COMPOSITE-RIGHT CLOG-ELEMENT &KEY PADDING-CLASS

  Composite `CLOG-ELEMENT` on right.

`CLOG-WEB` - Auto Layout System

- [class] CLOG-WEB-AUTO-ROW CLOG-DIV

  Content for web content

- [generic-function] CREATE-WEB-AUTO-ROW CLOG-OBJ &KEY HIDDEN CLASS HTML-ID

  Create a clog-web-auto-row. Container for auto-columns If hidden is t then then the visiblep propetery will be set to nil on creation.

- [class] CLOG-WEB-AUTO-COLUMN CLOG-DIV

  Content for web content

- [generic-function] CREATE-WEB-AUTO-COLUMN CLOG-OBJ &KEY CONTENT VERTICAL-ALIGN HIDDEN CLASS HTML-ID

  Create a clog-web-auto-column. Container for auto-columns If hidden is t then then the visiblep propetery will be set to nil on creation.

`CLOG-WEB` - 12 Column Grid Layout System

- [class] CLOG-WEB-ROW CLOG-DIV

  Row to contain columns of web content in 12 column grid

- [generic-function] CREATE-WEB-ROW CLOG-OBJ &KEY PADDING HIDDEN CLASS HTML-ID

  Create a clog-web-row. If padding is true 8px left and right padding is addded. If hidden is t then then the visiblep propetery will be set to nil on creation.

- [class] CLOG-WEB-CONTAINER CLOG-DIV

  Container cells for web content in 12 column grid

- [generic-function] CREATE-WEB-CONTAINER CLOG-OBJ &KEY CONTENT COLUMN-SIZE HIDDEN CLASS HTML-ID

  Create a clog-web-container. `COLUMN-SIZE` can be of type container-size-type when to set size displayed on medium and large screens or can use a string of "s1-12 m1-12 l1-12" s m or l followed by how many columns this container uses on small, medium or large screens. Small screens are always displayed full row. Total columns must add to 12 or one needs to be of type :w3-rest to fill space. If hidden is t then then the visiblep propetery will be set to nil on creation.

`CLOG-WEB` - Look and Feel

- [generic-function] ADD-CARD-LOOK CLOG-ELEMENT

  Change clog-element to use 2px card look

- [generic-function] ADD-HARD-CARD-LOOK CLOG-ELEMENT

  Change clog-element to use 4px card look

`CLOG-WEB` - Mobile

- [generic-function] FULL-ROW-ON-MOBILE CLOG-ELEMENT

  Change element to display:block, take up the full row, when screen size smaller then 601 pixels DP

- [generic-function] HIDE-ON-SMALL-SCREENS CLOG-ELEMENT

  Hide element on screens smaller then 601 pixels DP

- [generic-function] HIDE-ON-MEDIUM-SCREENS CLOG-ELEMENT

  Hide element on screens smaller then 993 pixels DP

- [generic-function] HIDE-ON-LARGE-SCREENS CLOG-ELEMENT

  Hide element on screens smaller then 993 pixels DP

`CLOG-WEB` - Menus

- [class] CLOG-WEB-MENU-BAR CLOG-DIV

  Menu bar

- [generic-function] CREATE-WEB-MENU-BAR CLOG-OBJ &KEY CLASS HTML-ID

  Attach a menu bar to a `CLOG-OBJ` generally a clog-body.

- [generic-function] WEB-MENU-BAR CLOG-OBJ

  Get/setf window web-menu-bar. This is set buy create-web-menu-bar.

- [generic-function] WEB-MENU-BAR-HEIGHT CLOG-OBJ

  Get web-menu-bar height

- [class] CLOG-WEB-MENU-DROP-DOWN CLOG-DIV

  Drop down menu

- [generic-function] CREATE-WEB-MENU-DROP-DOWN CLOG-WEB-MENU-BAR &KEY CONTENT CLASS HTML-ID

  Attached a menu bar drop-down to a `CLOG-WEB-MENU-BAR`

- [class] CLOG-WEB-MENU-ITEM CLOG-SPAN

  Menu item

- [generic-function] CREATE-WEB-MENU-ITEM CLOG-WEB-MENU-DROP-DOWN &KEY CONTENT LINK ON-CLICK CLASS HTML-ID

  Attached a menu item to a `CLOG-WEB-MENU-DROP-DOWN`. Use to set a link or on-click to set an on-click handler

- [generic-function] CREATE-WEB-MENU-FULL-SCREEN CLOG-WEB-MENU-BAR &KEY HTML-ID

  Add as last item in menu bar to allow for a full screen icon ⤢ and full screen mode.

- [generic-function] CREATE-WEB-MENU-ICON CLOG-WEB-MENU-BAR &KEY IMAGE-URL ON-CLICK CLASS HTML-ID

  Add icon as menu bar item.

`CLOG-WEB` - Interactions

- [function] 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`.

- [function] CLOG-WEB-FORM OBJ CONTENT FIELDS ON-INPUT &KEY (MODAL `NIL`) (OK-TEXT "OK") (CANCEL-TEXT "Cancel") (BORDER-CLASS "w3-border") (TEXT-CLASS "w3-text-black") (COLOR-CLASS "w3-black") (HTML-ID `NIL`)

  Create a form with `CONTENT` followed by `FIELDS`. `FIELDS` is a list of lists each list has:

      (1) Field description  - Used for label
      (2) Field name         - Used for (name attribute)
      (3) Field type         - Optional (defaults to :text)
      (4) Field type options - Optional

  Special field types

  Field Type Field Type Options ============= ================== :checkbox t if checked :radiobox a-list ((label name)) a third value can be added "checked" :select a-list ((label name)) a third value can be added "selected" :text value (any text input types also work :email, :tel, etc. see `FORM-ELEMENT-TYPE`)

  Calls on-input after OK or Cancel with an a-list of field name to value if confirmed or nil if canceled. `CANCEL-TEXT` is only displayed if modal is t

  If clog-web-site is being used the class class setting will be replaced with the value if set in the theme settings.

- [function] FORM-RESULT RESULT KEY

  Return the value for `KEY` from `RESULT`

`CLOG-WEB` - Websites

- [class] CLOG-WEB-SITE

  Website information

- [generic-function] CREATE-WEB-SITE CLOG-OBJ &KEY SETTINGS PROFILE ROLES THEME URL TITLE FOOTER LOGO

  Attach a clog-web-site to a `CLOG-OBJ` generally a clog-body.

- [generic-function] GET-WEB-SITE CLOG-OBJ

  Retrieve the clog-web-site object created on `CLOG-OBJ`'s connection

- [generic-function] CREATE-WEB-PAGE CLOG-OBJ PAGE PROPERTIES &KEY AUTHORIZE

  Use the clog-web-site `THEME` to create `PAGE` with `CLOG-OBJ` as parent. `PAGE` is a symbol to identify the pages purpose to the website theme. Themes are required to provide certain default pages see clog-web-themes file. If `AUTHORIZE` then `PAGE` is used also as a `CLOG-A`uth action to be checked if the current users roles have permission to `PAGE`

`CLOG-WEB-SITE` - Accessors

- [generic-function] THEME OBJECT

- [generic-function] SETTINGS OBJECT

- [generic-function] PROFILE OBJECT

- [generic-function] ROLES OBJECT

- [generic-function] URL CLOG-LOCATION

  Get/Setf full url. Setting the `URL` causes navgation to `URL`.

- [generic-function] TITLE CLOG-DOCUMENT

  Get/setf title.

- [generic-function] FOOTER OBJECT

- [generic-function] LOGO OBJECT

`CLOG-WEB` - Utilities

- [function] CLOG-WEB-ROUTES-FROM-MENU MENU

  Use a menu to setup a route for each menu item that has a third element.

- [function] CLOG-WEB-META DESCRIPTION

  Returns a boot-function for use with `CLOG:INITIALIZE` to add meta and no-script body information for search engines with `DESCRIPTION`.

- [function] BASE-URL-P BASE-URL URL-PATH

  True if url-path is based on base-url

- [function] ADJUST-FOR-BASE-URL BASE-URL URL-PATH

  If url-path is not on base-url return base-url otherwise url-path

- [function] BASE-URL-SPLIT BASE-URL URL-PATH

  Split path by / adjusting for base-url

← ↑ → ↺

## 22 CLOG Web DBI

###### [in package CLOG-WEB-DBI]

Authentication

- [function] LOGIN BODY SQL-CONNECTION USERNAME PASSWORD

  Login and set current authentication token, it does not remove token if one is present and login fails.

- [function] LOGOUT BODY

  Logout and remove current authenitcation token

- [function] GET-PROFILE OBJ SQL-CONNECTION

  Retrieve profile based on current authentication token. If there is no token or fails to match as user returns nil

- [function] SIGN-UP BODY SQL-CONNECTION &KEY (TITLE "Sign Up") (NEXT-STEP "/login")

  Setup a sign-up form and process a new sign-up

- [function] CHANGE-PASSWORD BODY SQL-CONNECTION &KEY (TITLE "Change Password") (NEXT-STEP "/")

  Setup a change password form and handle change of password

- [function] RESET-PASSWORD SQL-CONNECTION USERNAME &KEY (NEW-PASSWORD "password")

  Reset `USERNAME`'s password to `:NEW-PASSWORD`

- [function] MAKE-TOKEN

  Create a unique token used to associate a browser with a user

- [function] LOAD-CONTENT SQL-CONNECTION TABLE KEY-VALUE &KEY (KEY-COL "key") WHERE ORDER-BY

  Returns list of records found in `TABLE` where `KEY-COL` = `KEY-VALUE` and optional `WHERE` and `ORDER-BY` sql.

- [function] CREATE-BASE-TABLES SQL-CONNECTION &KEY (SQL-TIMESTAMP-FUNC `*SQLITE-TIMESTAMP*`)

  Create default tables

← ↑ → ↺

## 23 CLOG Web Site Themes

###### [in package CLOG-WEB]

Theme helpers

- [function] GET-SETTING WEBSITE KEY DEFAULT

  Return the setting for `KEY` or `DEFAULT` from website settings

- [function] GET-PROPERTY PROPERTIES KEY DEFAULT

  Return the property for `KEY` from the p-list `PROPERTIES` or `DEFAULT`

Built in themes

- [function] DEFAULT-THEME BODY PAGE PROPERTIES

  The default theme for clog-web-site. Settings available: :color-class - w3 color class for menu bars and buttons (def: w3-black) :border-class - w3 border (def: "") :text-class - w3 text color class (def: "") :signup-link - link to signup (def: /signup) :login-link - link to login (def: /login) :username-link - link when clicking on username (def: /logout) Page properties: :menu - (("Menu Name" (("Menu Item" "link")))) (def: nil) :content - (def: "")

← ↑ → ↺

## 24 CLOG Body Objects

CLOG-Body - CLOG Body Objects

- [class] CLOG-BODY CLOG-ELEMENT

  CLOG Body Object encapsulate the view in the window.

CLOG-Body - Properties

- [generic-function] RUN CLOG-BODY

  Keeps a connection thread alive to allow post user close of connection / browser.

- [generic-function] SET-HTML-ON-CLOSE CLOG-BODY HTML

  In case of connection loss to this `CLOG-BODY`, replace the browser contents with `HTML`.

- [generic-function] WINDOW CLOG-BODY

  Reader for CLOG-Window object

- [generic-function] HTML-DOCUMENT CLOG-BODY

  Reader for CLOG-Document object

- [generic-function] LOCATION CLOG-BODY

  Reader for CLOG-Location object

- [generic-function] NAVIGATOR CLOG-BODY

  Reader for CLOG-Navigator object

← ↑ → ↺

## 25 CLOG Window Objects

CLOG Popups

- [variable] *CLOG-POPUP-PATH* "/clogwin"

  Default `URL` for popup windows

- [function] ENABLE-CLOG-POPUP &KEY (PATH `*CLOG-POPUP-PATH*`) (BOOT-FILE "/boot.html")

  Enable handling of clog enabled popups

- [generic-function] OPEN-CLOG-POPUP CLOG-OBJ &KEY PATH ADD-SYNC-TO-PATH SYNC-KEY NAME SPECS WAIT-TIMEOUT

  Open a new browser window/popup in most cases a tab. Since they are controlled by clog you have full control of the new popups and are more flexible than using open-windo. Returns the clog-body and the clog-window in the same connnection as obj of the new window on the new connection or nil if failed within `:WAIT-TIMEOUT`

- [generic-function] CLOG-POPUP-OPENNED CLOG-OBJ SYNC-KEY

  Used to notify open-clog-popup the new popup window is ready used for custom clog-popup handlers.

- [generic-function] IN-CLOG-POPUP-P CLOG-OBJ

  Returns obj if clog-gui-window is a in a clog-popup window

CLOG-Window - CLOG Window Objects

- [class] CLOG-WINDOW CLOG-OBJ

  CLOG Window Objects encapsulate the window.

CLOG-Window - Properties

- [generic-function] WINDOW-NAME CLOG-WINDOW

  Get/Setf name for use by hyperlink "target" for this window.

- [generic-function] URL-REWRITE CLOG-WINDOW REWRITE-URL

  Rewrite browser history and url with `REWRITE-URL` no redirection of browser takes place. `REWRITE-URL` must be same domain.

- [generic-function] INNER-HEIGHT CLOG-WINDOW

  Get/Setf inner height of browser window.

- [generic-function] INNER-WIDTH CLOG-WINDOW

  Get/Setf inner width of browser window.

- [generic-function] OUTER-HEIGHT CLOG-WINDOW

  Get/Setf outer height of browser window.

- [generic-function] OUTER-WIDTH CLOG-WINDOW

  Get/Setf outer width of browser window.

- [generic-function] X-OFFSET CLOG-WINDOW

  Get/Setf browser window x offset from left edge.

- [generic-function] Y-OFFSET CLOG-WINDOW

  Get/Setf browser window y offset from top edge.

- [generic-function] LEFT CLOG-WINDOW

  Get/Setf browser x position.

- [generic-function] TOP CLOG-WINDOW

  Get/Setf browser y postion.

- [generic-function] PIXEL-RATIO CLOG-WINDOW

  Get device pixel ratio.

- [generic-function] SCREEN-WIDTH CLOG-WINDOW

  Get screen width.

- [generic-function] SCREEN-HEIGHT CLOG-WINDOW

  Get screen height.

- [generic-function] SCREEN-AVAILABLE-WIDTH CLOG-WINDOW

  Get available screen width.

- [generic-function] SCREEN-AVAILABLE-HEIGHT CLOG-WINDOW

  Get available screen height.

- [generic-function] SCREEN-AVAILABLE-TOP CLOG-WINDOW

  Get available screen top.

- [generic-function] SCREEN-AVAILABLE-LEFT CLOG-WINDOW

  Get available screen left.

- [generic-function] SCREEN-COLOR-DEPTH CLOG-WINDOW

  Get screen color depth.

CLOG-Window - Methods

- [generic-function] ALERT CLOG-WINDOW MESSAGE

  Launch an alert box. Note that as long as not dismissed events and messages may not be trasmitted on most browsers.

- [generic-function] LOG-CONSOLE CLOG-WINDOW MESSAGE

  Print message to browser console.

- [generic-function] LOG-ERROR CLOG-WINDOW MESSAGE

  Print error message to browser console.

- [generic-function] PRINT-WINDOW CLOG-WINDOW

  Send browser window to printer.

- [generic-function] SCROLL-BY CLOG-WINDOW X Y

  Scroll browser window by x y.

- [generic-function] SCROLL-TO CLOG-WINDOW X Y

  Scroll browser window to x y.

- [generic-function] OPEN-WINDOW CLOG-WINDOW URL &KEY NAME SPECS

  This will launch a new window of current browser where `CLOG-WINDOW` is displayed (remote or local) and returns a new clog-window. In modern browsers it is very limitted to just open a new tab with url unless is a localhost url.

- [generic-function] CLOSE-WINDOW CLOG-WINDOW

  Close browser window.

- [generic-function] CLOSE-CONNECTION CLOG-WINDOW

  Close connection to browser with out closing browser.

- [generic-function] REQUEST-ANIMATION-FRAME CLOG-WINDOW

  Requests the browser to send an on-animation-frame on the next screen redraw. This event only fires one time per request. The data parementer of the event function contains the time stamp to the millisecond.

CLOG-Window - Events

- [generic-function] SET-ON-ABORT CLOG-WINDOW ON-ABORT-HANDLER

  Set the `ON-ABORT-HANDLER` for `CLOG-OBJ`. If `ON-ABORT-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-ERROR CLOG-WINDOW ON-ERROR-HANDLER

  Set the `ON-ERROR-HANDLER` for `CLOG-OBJ`. If `ON-ERROR-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-BEFORE-UNLOAD CLOG-WINDOW ON-BEFORE-UNLOAD-HANDLER

  Set the `ON-BEFORE-UNLOAD-HANDLER` for `CLOG-WINDOW`. Return and empty string in order to prevent navigation off page. If `ON-BEFORE-UNLOAD-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-HASH-CHANGE CLOG-WINDOW ON-HASH-CHANGE-HANDLER

  Set the `ON-HASH-CHANGE-HANDLER` for `CLOG-OBJ`. If `ON-HASH-CHANGE-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-ORIENTATION-CHANGE CLOG-WINDOW ON-ORIENTATION-CHANGE-HANDLER

  Set the `ON-ORIENTATION-CHANGE-HANDLER` for `CLOG-OBJ`. If `ON-ORIENTATION-CHANGE-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-ANIMATION-FRAME CLOG-WINDOW ON-ANIMATION-FRAME-HANDLER

  Set the `ON-ANIMATION-FRAME-HANDLER` for `CLOG-OBJ` the data parameter of the function is the time stamp. If `ON-ANIMATION-FRAME-HANDLER` is nil unbind the event.

- [generic-function] MOVE-WINDOW-BY CLOG-WINDOW X Y

  Move browser window by x y.

- [generic-function] MOVE-WINDOW-TO CLOG-WINDOW X Y

  Move browser window to x y.

- [generic-function] RESIZE-BY CLOG-WINDOW X Y

  Resize browser window by x y.

- [generic-function] RESIZE-TO CLOG-WINDOW X Y

  Resize browser window to x y.

CLOG-Window - History

- [generic-function] SET-ON-POP-STATE CLOG-WINDOW ON-POP-STATE-HANDLER

  Set the `ON-POP-STATE-HANDLER` for `CLOG-WINDOW`. If `ON-POP-STATE-HANDLER` is nil unbind the event.

- [generic-function] URL-PUSH-STATE CLOG-WINDOW REWRITE-URL

  Method adds an entry to the browser's session history stack.

CLOG-Window - Storage Methods

- [type] STORAGE-TYPE

- [generic-function] STORAGE-LENGTH CLOG-WINDOW STORAGE-TYPE

  Number of entries in browser `STORAGE-TYPE`. (local = persistant or session)

- [generic-function] STORAGE-KEY CLOG-WINDOW STORAGE-TYPE KEY-NUM

  Return the key for entry number `KEY-NUM` in browser `STORAGE-TYPE`. (local = persistant or session)

- [generic-function] STORAGE-REMOVE CLOG-WINDOW STORAGE-TYPE KEY-NAME

  Remove the storage key and value in browser `STORAGE-TYPE`. (local = persistant or session)

- [generic-function] STORAGE-ELEMENT CLOG-WINDOW STORAGE-TYPE KEY-NAME

  Get/Setf storage-element on browser client.

CLOG-Window - Storage Events

- [generic-function] SET-ON-STORAGE CLOG-WINDOW ON-STORAGE-HANDLER

  Set the `ON-STORAGE-HANDLER` for `CLOG-OBJ`. The on-storage event is fired for changes to :local storage keys.

← ↑ → ↺

## 26 CLOG Document Objects

CLOG-Document - CLOG Document Objects

- [class] CLOG-DOCUMENT CLOG-OBJ

  CLOG Document Objects encapsulate the document.

- [generic-function] DOMAIN CLOG-DOCUMENT

  Get domain.

- [generic-function] INPUT-ENCODING CLOG-DOCUMENT

  Get input encoding.

- [generic-function] LAST-MODIFIED CLOG-DOCUMENT

  Get last modified.

- [generic-function] REFERER CLOG-DOCUMENT

  Get referer.

- [generic-function] TITLE CLOG-DOCUMENT

  Get/setf title.

- [generic-function] DOCUMENT-URL CLOG-DOCUMENT

  Get url.

- [generic-function] HEAD-ELEMENT CLOG-DOCUMENT

  Reader for Head Element object

- [generic-function] BODY-ELEMENT OBJECT

- [generic-function] DOCUMENT-ELEMENT CLOG-DOCUMENT

  Reader for Body Element object

- [generic-function] VISIBILITY-STATE CLOG-DOCUMENT

  Get visibility-state. Returns the string 'visible' if browser is in non-minmized state and is partialy visible and 'hidden' is browser is minimized or no part of page is visible including an OS screen lock.

- [generic-function] READY-STATE CLOG-DOCUMENT

  Get ready-state. Returns 'loading'|'interactive'|'complete'. The state would only change if the boot-page was still loading css, graphics, etc. Under normal circumstance there is no need in CLOG to check if the state is ready as on-new-window is only called once one can interact with page. See also `SET-ON-READY-STATE-CHANGE`

- [generic-function] LOAD-CSS CLOG-DOCUMENT CSS-URL &KEY LOAD-ONLY-ONCE

  Load css from `CSS-URL`. If `LOAD-ONLY-ONCE` load-css returns t if load-css previously called otherwise loads the css and returns css-url.

- [generic-function] LOAD-SCRIPT CLOG-DOCUMENT SCRIPT-URL &KEY WAIT-FOR-LOAD WAIT-TIMEOUT LOAD-ONLY-ONCE

  Load script from `SCRIPT-URL`. If `WAIT-FOR-LOAD` is t, load-script will not return until script load is completed or `WAIT-TIMEOUT` passes and load-script returns nil otherwise script-url. If `LOAD-ONLY-ONCE` is t first checks if previously loaded with load-script.

- [generic-function] PUT CLOG-DOCUMENT MESSAGE

  Write text to browser document object.

- [generic-function] PUT-LINE CLOG-DOCUMENT MESSAGE

  Write text to browser document object with new-line.

- [generic-function] PUT-BR CLOG-DOCUMENT MESSAGE

  Write text to browser document object with
  new-line.

- [generic-function] NEW-LINE CLOG-DOCUMENT

  Write to browser document
  new-line.

CLOG-Document - Events

- [generic-function] SET-ON-FULL-SCREEN-CHANGE CLOG-DOCUMENT ON-FULL-SCREEN-CHANGE-HANDLER

  Set the `ON-FULL-SCREEN-CHANGE-HANDLER` for `CLOG-OBJ`. If `ON-FULL-SCREEN-CHANGE-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-VISIBILITY-CHANGE CLOG-DOCUMENT ON-VISIBILITY-CHANGE-HANDLER

  Set the `ON-VISIBILITY-CHANGE-HANDLER` for `CLOG-OBJ`. If `ON-VISIBILITY-CHANGE-HANDLER` is nil unbind the event. This event is fired when the page visibility has changed such as a tab being switch of browser minimized. Use the `VISIBILITY-STATE` property to identify chage.

- [generic-function] SET-ON-READY-STATE-CHANGE CLOG-DOCUMENT ON-READY-STATE-CHANGE-HANDLER

  Set the `ON-READY-STATE-CHANGE-HANDLER` for `CLOG-OBJ`. If `ON-READY-STATE-CHANGE-HANDLER` is nil unbind the event.

- [generic-function] SET-ON-LOAD-SCRIPT CLOG-DOCUMENT HANDLER &KEY CANCEL-EVENT ONE-TIME

  Set a `HANDLER` for script load complete on CLOG-document. the handler (clog-obj data) data is the script-url used to load it. The handler should be installed on the document before calling load-script.

← ↑ → ↺

## 27 CLOG Location Objects

Clog-Location - CLOG Location Objects

- [class] CLOG-LOCATION CLOG-OBJ

  CLOG Location Objects encapsulate the location.

CLOG-Location - Properties

- [generic-function] URL CLOG-LOCATION

  Get/Setf full url. Setting the `URL` causes navgation to `URL`.

- [generic-function] HASH CLOG-LOCATION

  Get/Setf url hash.

- [generic-function] HOST CLOG-LOCATION

  Get/Setf url host.

- [generic-function] HOST-NAME CLOG-LOCATION

  Get/Setf url host name.

- [generic-function] ORIGIN CLOG-LOCATION

  Get url origin.

- [generic-function] PATH-NAME CLOG-LOCATION

  Get/Setf url path-name.

- [generic-function] PORT CLOG-LOCATION

  Get/Setf url port.

- [generic-function] PROTOCOL CLOG-LOCATION

  Get/Setf url protocol.

- [generic-function] URL-SEARCH CLOG-LOCATION

  Get/Setf url-search.

CLOG-Location - Methods

- [generic-function] RELOAD CLOG-LOCATION

  Reload browser window.

- [generic-function] URL-REPLACE CLOG-LOCATION REPLACE-URL

  Replace browser url, i.e. a redirection and current `URL` not saved in session history and back button will not return to it.

- [generic-function] URL-ASSIGN CLOG-LOCATION ASSIGN-URL

  Assign browser url, i.e. a redirection to assign-url that will be saved in session histoy and back button will return to it.

← ↑ → ↺

## 28 CLOG Navigator Objects

CLOG-Navigator - CLOG Navigator Objects

- [class] CLOG-NAVIGATOR CLOG-OBJ

  CLOG Navigator Objects encapsulate the navigator.

CLOG-Navigator - Properties

- [generic-function] COOKIE-ENABLED-P CLOG-NAVIGATOR

  Get if cookie enabled.

- [generic-function] LANGUAGE CLOG-NAVIGATOR

  Get user prefered language.

- [generic-function] USER-AGENT CLOG-NAVIGATOR

  Get user agent.

- [generic-function] VENDOR CLOG-NAVIGATOR

  Get browser vendor.

CLOG-Navigator - Clipboard

- [generic-function] SYSTEM-CLIPBOARD-WRITE CLOG-OBJ TEXT

  Write text to system clipboard

- [generic-function] SYSTEM-CLIPBOARD-READ CLOG-OBJ &KEY WAIT-TIMEOUT

  Read text from system clipboard and return text.

← ↑ → ↺

## 29 CLOG jQuery Objects

CLOG-jQuery - Base class for CLOG jQuery Objects

- [class] CLOG-JQUERY CLOG-ELEMENT

  CLOG jQuery objects. A jQuery representa DOM queries that can represent one or even many CLOG objects as a single element.

CLOG-jQuery creation

- [generic-function] CREATE-JQUERY CLOG-OBJ JQUERY

  Create a new `CLOG-JQUERY` from `JQUERY`. Some sample jquery selectors: * .class element_name #id selector1, selectorN, ...

CLOG-jQuery methods

- [generic-function] JQUERY CLOG-OBJ

  Return the jQuery accessor for and `CLOG-OBJ`.

- [generic-function] JQUERY-EXECUTE CLOG-OBJ METHOD

  Execute the jQuery `METHOD` on and `CLOG-OBJ`. Result is dicarded, returns `CLOG-OBJ`.

- [generic-function] JQUERY-QUERY CLOG-OBJ METHOD &KEY DEFAULT-ANSWER

  Execute the jQuery `METHOD` on ANY `CLOG-OBJ` and return result or `DEFAULT-ANSWER` on time out.

← ↑ → ↺

## 30 CLOG Helper Functions

Tutorial and demo helpers

- [function] CLOG-INSTALL-DIR

  Return the directory CLOG was installed in.

- [function] OPEN-MANUAL

  Launches a browser with CLOG manual.

- [function] RUN-TUTORIAL NUM

  Run tutorial `NUM`

- [function] LOAD-TUTORIAL NUM

  Load tutorial `NUM` - use (clog:run-tutorial)

- [function] RUN-DEMO NUM

  Run demo `NUM`

- [function] LOAD-DEMO NUM

  Load demo `NUM` - use (clog:run-demo)

- [function] CLOG-REPL &KEY (CLOG-GUI-INITIALIZE `T`) (CLOG-WEB-INITIALIZE `T`) (BOOT-FILE "/debug.html") (PORT 8080)

  Set a path /repl that opens a blank page and sets the global clog-user:*body* to last window openned to /repl. Debug mode is set (logging to browser console) in the default debug.html boot-file.

- [function] SAVE-BODY-TO-FILE FILE-NAME &KEY (BODY `CLOG-USER:*BODY*`) (IF-EXISTS `:ERROR`) IF-DOES-NOT-EXIST EXTERNAL-FORMAT

  Save the current html of `BODY` in the current state to `FILE-NAME`

Functions for Compilation and Documentation

- [function] LOAD-WORLD

  Load source files for creating documentation

- [function] MAKE-MARK-DOWN

  Create manual in Mark Down format

- [function] MAKE-HTML

  Create manual in `HTML`

- [function] MAKE-WORLD

← ↑ ↺

## 31 CLOG Framework internals and extensions

* Introduction to Internals *

This section on internals is not intended for general use of CLOG. It is for those looking to maint or extend CLOG, or those creating plugins.

* The Client Side and the Server Side *

All objects created in CLOG have a server side and a client side representation, at least at the time of their creation. The server side representation is a CLOG-obj or one of its descendants that is returned by one of the many create-* functions. The client side representation is the DOM element (or other JavaScript object) itself stored in the clog array keyed by the html-id clog[html-id].

* Client Side Scripting *

Executing code on the client side is done in one of three ways:

1. The connection - Using the clog-connection package execute or query

2. The DOM object - Using the clog-obj execute or query

3. The jQuery wrapper - Using the clog-obj jquery-execute or jquery-query

Query time outs are set in clog-connect:*query-time-out* by default 3 seconds.

* Responding to new JavaScript DOM events *

If there is no data for the event just changing the name of the event is sufficient in this example:

    (defmethod set-on-click ((obj clog-obj) handler)
      (set-event obj "click"
                 (when handler
                   (lambda (data)
                     (declare (ignore data))
                     (funcall handler obj)))))

If there is data for the event an additional string containing the needed JavaScript to return the even data and a function to parse out the data.

Replace the event name with the correct name, parse-keyboard-even with the parse function and the string containing the needed JavaScript replaces keyboard-event-script:

- The event handlers setter

    (defmethod set-on-key-down ((obj clog-obj) handler)
      (set-event obj "keydown"
                 (when handler
                   (lambda (data)
                     (funcall handler obj (parse-keyboard-event data))))
                 :call-back-script keyboard-event-script))

- The script

    (defparameter keyboard-event-script
      "+ e.keyCode + ':' + e.charCode + ':' + e.altKey + ':' + e.ctrlKey + ':' +
         e.shiftKey + ':' + e.metaKey")

- The event parser

    (defun parse-keyboard-event (data)
      (let ((f (ppcre:split ":" data)))
        (list
         :event-type :keyboard
         :key-code   (parse-integer (nth 0 f) :junk-allowed t)
         :char-code  (parse-integer (nth 1 f) :junk-allowed t)
         :alt-key    (js-true-p (nth 2 f))
         :ctrl-key   (js-true-p (nth 3 f))
         :shift-key  (js-true-p (nth 4 f))
         :meta-key   (js-true-p (nth 5 f)))))