→ ↺

# 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 Style Blocks
- 10 CLOG Form Objects
- 11 CLOG Canvas Objects
- 12 CLOG Multimedia Objects
- 13 CLOG GUI Objects
- 14 CLOG Web Objects
- 15 CLOG Body Objects
- 16 CLOG Window Objects
- 17 CLOG Document Objects
- 18 CLOG Location Objects
- 19 CLOG Navigator Objects
- 20 CLOG Helper Functions
- 21 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` is complete enough for most uses. See below for some enhacements bing worked on, `CLOG` is actually based on GNOGA, a framework I wrote for Ada in 2013 and used in commercial production code for the last 8 years, i.e. the techiniques `CLOG` uses are solid and proven.

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, it is tested fairly regulary with SCBL on Linux, Windows and Intel MacBook. It should in theory work on any system Quicklisp and `CLACK` will load on to.

`CLOG` will be in Quicklisp in the next update, but because I am still adding code daily, it is currently preferable to clone the github repo into your ~/common-lisp 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):

1. Start emacs then M-x slime

2. In the REPL, run:

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

To see where the source files are:

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

You can the load the demos with:

    CL-USER> (load "path to clog/demos/01-snake.lisp")
    CL-USER> (clog-user:start-demo)

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.

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

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

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 &KEY (HOST "0.0.0.0") (PORT 8080) (BOOT-FILE "/boot.html") (STATIC-BOOT-JS `NIL`) (STATIC-ROOT (`MERGE-PATHNAMES` "./static-files/" (`ASDF/SYSTEM:SYSTEM-SOURCE-DIRECTORY` `:CLOG`)))

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

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

  Set or change the on-new-window handler or set a new one for `PATH` using BOOT_FILE. Paths should always begin with a '/'. If `PATH` is set to "default" will use boot-file when the route can not be determined, ie a static html file including boot.js that has not been added with this function. If `BOOT-FILE` is nil path is removed.

- [function] SHUTDOWN

  Shutdown `CLOG`.

- [function] DEBUG-MODE OBJ

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

- [function] OPEN-BROWSER &KEY (URL "http://127.0.0.1:8080")

  Open a web browser to `URL`.

← ↑ → ↺

## 5 CLOG Utilities

CLOG-Group - Utility Class for CLOG-Obj storage

- [class] CLOG-GROUP

- [function] CREATE-GROUP

  Return a new `CLOG-GROUP` object for storing `CLOG-OBJ`s. They are indexed by their `HTML-ID`.

- [generic-function] ADD CLOG-GROUP CLOG-OBJ &KEY NAME

  Add `CLOG-OBJ` to a `CLOG-GROUP` indexed by the html-id of `CLOG-OBJ` unless `:NAME` is set and is used instead.

- [generic-function] OBJ CLOG-GROUP NAME

  Retrieve from `CLOG-GROUP` the `CLOG-OBJ` with name

`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

  Escape `STR` for sending to browser script.

- [function] LF-TO-BR STR

  Change line feeds to
  .

`CLOG` Color utilities

- [function] RGB RED GREEN BLUE

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

- [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.

← ↑ → ↺

## 6 CLOG Objects

CLOG-Obj - Base class for `CLOG` Objects

- [class] CLOG-OBJ

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

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

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

  Get connection-data that is associated with clog-obj that will persist regardless of thread. 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 key "clog-body" is set to the clog-body of this connection.

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

  Get/Setf from connection-data the item-name in hash.

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

  Remove from connection-data the item-name in hash.

- [generic-function] VALIDP CLOG-OBJ

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

CLOG-Obj - Internals for Extension Plugins

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

  Internal html-id of CLOG-Obj. (Internal)

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

  Execure `SCRIPT` on browser. (Internal)

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

  Execure `SCRIPT` on browser and return result. (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.

- [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-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 even 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

  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

  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

  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

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

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

  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

  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

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

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

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

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

  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

  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

  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

  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-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`. If `HTML-ID` is nil one will be generated.

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

  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.

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

CLOG-Element - General Properties

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

  Get/Setf css style.

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

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

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.

- [generic-function] TEXT CLOG-ELEMENT

  Get/Setf text.

  <tag>Text Content</tag> - Text content is the content contained by the tag. This should not be confused with the 'Value' of a Form Tag. (See clog-form.lisp)

- [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] 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] POSITION-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] 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.

- [generic-function] BOTTOM CLOG-ELEMENT

  Get/Setf bottom.

- [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 LINE-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 LINE-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] 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] 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] 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.

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.

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 HIDDEN CLASS HTML-ID AUTO-PLACE

  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.

`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 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 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 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 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 it true visiblep is set to nil.

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

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

CLOG-Phrase - 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 HIDDEN CLASS HTML-ID AUTO-PLACE

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

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

- [type] LIST-LOCATION-TYPE

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

  Get/Setf list list-location. 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 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 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 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-DEFINITION-LIST &KEY CONTENT 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-DEFINITION-LIST &KEY HIDDEN CONTENT 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 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 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 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 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 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 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 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 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 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 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 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)))

← ↑ → ↺

## 10 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

- [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 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.

- [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 CLASS HTML-ID

  Create a new clog-fieldset 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 &KEY NAME VALUE LABEL CLASS HTML-ID

  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`.

- [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. 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] 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] 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 LABEL-FOR CLASS HTML-ID

  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 CLASS HTML-ID

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

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

  `CLOG` Form Element Option for `CLOG` Select Object

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

  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 HTML-ID CLASS

  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

  Add option `VALUE` to select.

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

  Add group of options to select.

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

  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 CLASS HTML-ID

  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.

← ↑ → ↺

## 11 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 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

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

  Clear rectangle to transparent black

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

  Fill rectangle with current fill-color

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

  Fill rectangle using current stroke-style

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

  Fill text with current fill-color

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

  Stroke text with current stroke-style

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

  Set line style width

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

  Set line cap style

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

  Set line join style

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

  Set miter style limit

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

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

- [generic-function] SET-LINE-DASH CLOG-CONTEXT2D VALUE

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

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

  Set miter style limit

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

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

- [type] TEXT-ALIGN-TYPE

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

  Set text alignment style

- [type] TEXT-BASELINE-TYPE

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

  Set text baseline style

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

  Set text direction style

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

  Set text direction style

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

  Set text stroke style

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

  Set text shadow blur

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

  Set text shadow color

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

  Set text shadow offset x

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

  Set text shadow offset y

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

  Starts a new path empting any previous points.

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

  Adds a line to start point of path.

- [generic-function] MOVE-TO CLOG-CONTEXT2D X Y

  Moves start point of path.

- [generic-function] LINE-TO CLOG-CONTEXT2D X Y

  Adds a line to the current path.

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

  Adds a cubic Bezier curve to the current path.

- [generic-function] QUADRATIC-CURVE-TO CLOG-CONTEXT2D CPX CPY X Y

  Adds a quadratic Bezier curve to the current path.

- [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] 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] RECT CLOG-CONTEXT2D X Y WIDTH HEIGHT

  Adds a rectangle to the current path.

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

  Fill a path.

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

  Stroke a path.

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

  Clip a path.

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

  Save canvas to stack

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

  Restore canvas from stack

← ↑ → ↺

## 12 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

← ↑ → ↺

## 13 CLOG GUI Objects

###### [in package CLOG-GUI]

`CLOG-GUI` - Desktop GUI abstraction for `CLOG`

- [function] CLOG-GUI-INITIALIZE CLOG-BODY &KEY (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 connection. If `W3-CSS-URL` has not been loaded before is installed unless is nil.

`CLOG-GUI` - Menus

- [class] CLOG-GUI-MENU-BAR CLOG-DIV

  Menu bar

- [generic-function] CREATE-GUI-MENU-BAR CLOG-OBJ &KEY CLASS HTML-ID

  Attached a menu bar to a `CLOG-OBJ` in general a clog-body.

- [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 HTML-ID

  Attached a clog-select as a menu item that auto updates with open windows and maximizes them unless is a keep-on-top window or on-window-can-maximize returns nil. Only one instance allowed.

- [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 ⤢ 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] 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 HAS-PINNER KEEP-ON-TOP HIDDEN CLIENT-MOVEMENT 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. 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 wil 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.

- [generic-function] WINDOW-TITLE CLOG-GUI-WINDOW

  Get/setf window title

- [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.

- [generic-function] WINDOW-MAXIMIZED-P CLOG-GUI-WINDOW

  Set `CLOG-GUI-WINDOW` as maximized window.

- [generic-function] WINDOW-MAXIMIZE CLOG-GUI-WINDOW

  Set `CLOG-GUI-WINDOW` as maximized window.

- [generic-function] WINDOW-NORMALIZE CLOG-GUI-WINDOW

  Set `CLOG-GUI-WINDOW` as normalized window.

- [generic-function] WINDOW-TOGGLE-MAXIMIZE CLOG-GUI-WINDOW

  Toggle `CLOG-GUI-WINDOW` as maximize window.

- [generic-function] WINDOW-KEEP-ON-TOP CLOG-GUI-WINDOW

  Set `CLOG-GUI-WINDOW` to stay on top. Use window-focus to undue.

- [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.

- [function] ALERT-DIALOG OBJ CONTENT &KEY (MODAL `T`) (TITLE "About") (LEFT `NIL`) (TOP `NIL`) (WIDTH 300) (HEIGHT 200) (CLIENT-MOVEMENT `NIL`) (HTML-ID `NIL`)

  Create an alert dialog box with `CONTENT` centered.

- [function] INPUT-DIALOG OBJ CONTENT ON-INPUT &KEY (MODAL `T`) (TITLE "Input") (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.

- [function] CONFIRM-DIALOG OBJ CONTENT ON-INPUT &KEY (MODAL `T`) (TITLE "Confirm") (OK-TEXT "OK") (CANCEL-TEXT "Cancel") (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") (LEFT `NIL`) (TOP `NIL`) (WIDTH 400) (HEIGHT 500) (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 name         - Used for (name attribute)
      (2) Field description  - Used for label
      (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" :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.

- [function] SERVER-FILE-DIALOG OBJ TITLE INITIAL-DIR ON-FILE-NAME &KEY (MODAL `T`) (LEFT `NIL`) (TOP `NIL`) (WIDTH 375) (HEIGHT 420) (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.

← ↑ → ↺

## 14 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 on 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

  Attached a menu bar to a `CLOG-OBJ` in general 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 ON-CLICK CLASS HTML-ID

  Attached a menu item to a `CLOG-WEB-MENU-DROP-DOWN`

- [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") (HTML-ID `NIL`)

  Create a form with `CONTENT` followed by `FIELDS`. `FIELDS` is a list of lists each list has:

      (1) Field name         - Used for (name attribute)
      (2) Field description  - Used for label
      (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

← ↑ → ↺

## 15 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 the main thread alive to prevent garbage collection of local objects when not using connection-data objects or global objects.

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

← ↑ → ↺

## 16 CLOG Window Objects

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] 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] CLOSE-WINDOW CLOG-WINDOW

  Close browser window.

- [generic-function] CLOSE-CONNECTION CLOG-WINDOW

  Close connection to browser with out closing browser.

- [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 - 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-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.

- [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.

← ↑ → ↺

## 17 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] READY-STATE CLOG-DOCUMENT

  Get ready-state.

- [generic-function] LOAD-CSS CLOG-DOCUMENT CSS-URL

  Load css from `CSS-URL`.

- [generic-function] LOAD-SCRIPT CLOG-DOCUMENT SCRIPT-URL

  Load script from `SCRIPT-URL`.

- [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.

← ↑ → ↺

## 18 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-WINDOW REPLACE-URL

  Replace browser url.

- [generic-function] URL-ASSIGN CLOG-WINDOW ASSIGN-URL

  Assign browser url.

← ↑ → ↺

## 19 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.

← ↑ → ↺

## 20 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-user:start-tutorial)

- [function] RUN-DEMO NUM

  Run demo `NUM`

- [function] LOAD-DEMO NUM

  Load demo `NUM` - use (clog-user:start-demo)

- [function] CLOG-REPL

  Set a path /repl that opens a blank page and sets the global clog-user:body to last window openned to /repl.

Functions for Compilation and Documentation

- [function] LOAD-WORLD

- [function] MAKE-MARK-DOWN

- [function] MAKE-HTML

- [function] MAKE-WORLD

← ↑ ↺

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