The CLOG manual

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

[in package CLOG]

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

← ↑ → ↺

1 CLOG Getting Started

CLOG - The Common Lisp Omnificent GUI

David Botton mailto:david@botton.com

License BSD 3-Clause License

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

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

Some potential applications for CLOG:

Cross-platform GUIs and Reports
Secure websites and complex interactive web applications
Mobile software
Massive multiplayer online games
Monitoring software for embedded systems
A fun way to teach programming and advanced multi-tasking parallel programming techniques. (CLOG is a parallel GUI)
And the list goes on

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

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

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

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

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

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

Start emacs then M-x slime
In the REPL, run:

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

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

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

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

You can the run the demos with:

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

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

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

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

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

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

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

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

To open a browser with the CLOG manual:

CL-USER> (clog:open-manual)

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

← ↑ → ↺

2 CLOG Programming Basics

Prerequisites- You don't have to be an expert in Common Lisp but should know the basics
- You don't need to know JavaScript
- You don't need to know HTML but it helps unless someone else is doing the design work.
- You have installed CLOG and (ql:quickload :clog) is working for you.
Simple REPL techniques Tutorial

We first need to load CLOG

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Important take aways to using CLOG from the REPL:

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.
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.
Similarily with all events, any time an event handler is recompiled or want to change the even hander, set-on-* function will need to be called.

← ↑ → ↺

3 CLOG Event Data

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

Events in clog-base

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

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

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

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

Events in clog-window

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

← ↑ → ↺

4 CLOG System

CLOG Startup and Shutdown

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

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

[variable] *STATIC-ROOT* NIL

Contains the static-root setting after initialization.

[variable] *CLOG-PORT* 8080

Port this instance of clog was started on

[variable] *CLOG-DEBUG* NIL

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

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

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

[function] IS-RUNNING-P

[function] SHUTDOWN

Shutdown CLOG.

[function] DEBUG-MODE OBJ

Turn on browser console debugging for OBJ's connection.

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

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

← ↑ → ↺

5 CLOG Utilities

Concurrent Hash Tables

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

Use native concurrent hash tables

Declerative Syntax Support

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

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

CLOG ID utilities

[function] GENERATE-ID

Generate unique ids for use in scripts.

[function] RANDOM-HEX-STRING

Generate cryptographic grade random ids for use in connections.

CLOG JS utilities

[function] JS-TRUE-P VALUE

Return true if VALUE equalp the string true

[function] P-TRUE-JS VALUE

Return "true" if VALUE t

[function] JS-ON-P VALUE

Return true if VALUE equalp the string on

[function] P-ON-JS VALUE

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

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

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

[function] LF-TO-BR STR

Change line feeds to
.

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

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

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

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

CLOG Color utilities

[function] RGB RED GREEN BLUE

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

[function] RGB-TO-HEX RGB

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

[function] RGBA RED GREEN BLUE ALPHA

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

[function] HSL HUE SATURATION LIGHTNESS

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

[function] HSLA HUE SATURATION LIGHTNESS ALPHA

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

CLOG Unit utilities

[function] UNIT UNIT-TYPE VALUE

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

[function] UNIT* UNIT-TYPE VALUE

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

← ↑ → ↺

6 CLOG Objects

CLOG-Obj - Base class for CLOG Objects

[class] CLOG-OBJ

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

[generic-function] PARENT CLOG-OBJ

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

CLOG-Obj - General Properties

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

Get/Setf html property.

CLOG-Obj - General Methods

[generic-function] HEIGHT CLOG-OBJ

Get/Setf html height in pixels.

[generic-function] WIDTH CLOG-OBJ

Get/Setf html width in pixels.

[generic-function] FOCUS CLOG-OBJ

Focus on CLOG-OBJ

[generic-function] BLUR CLOG-OBJ

Remove focus from CLOG-OBJ

CLOG-Obj - Low Level

[variable] *STORE-NEW-OBJECTS* NIL

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

[generic-function] CONNECTION-DATA CLOG-OBJ

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

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

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

Get/Setf item-name from connection-data.

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

Remove item-name from connection-data.

[generic-function] CONNECTION-BODY CLOG-OBJ

Get connection's clog-body.

[generic-function] CONNECTION-PATH CLOG-OBJ

Get the HTML passed used to make the connection.

[generic-function] CONNECTION-SYNC CLOG-OBJ

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

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

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

[generic-function] VALIDP CLOG-OBJ

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

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

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

[function] FLUSH-CONNECTION-CACHE CLOG-OBJ

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

CLOG-Obj - Internals for Extensions and Plugins

[generic-function] HTML-ID CLOG-OBJ

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

[generic-function] SCRIPT-ID CLOG-OBJ

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

[generic-function] EXECUTE CLOG-OBJ METHOD

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

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

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

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

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

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

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

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

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

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

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

CLOG-Obj - Event Handling

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

← ↑ → ↺

7 CLOG Elements

CLOG-Element - Class for CLOG Elements

[class] CLOG-ELEMENT CLOG-OBJ

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

CLOG-Element - Low Level Creation

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

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

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

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

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

Create a new CLOG-ELEMENT or sub-type of CLOG-TYPE and attach an existing element with HTML-ID. The HTML-ID must be unique and must be in DOM, ie placed or auto-placed. If new-id is true the HTML-ID after attachment is changed to one unique to this session.

CLOG-Element - DOM Placement

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

Places NEXT-OBJ after CLOG-OBJ in DOM

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

Places NEXT-OBJ before CLOG-OBJ in DOM

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

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

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

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

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

Places text inside top of CLOG-OBJ in DOM

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

Places text inside bottom of CLOG-OBJ in DOM

CLOG-Element - General Properties

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

Get/Setf css style.

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

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

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

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

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

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

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

Returns t if ATTRIBUTE-NAME exists on CLOG-ELEMENT

CLOG-Element - Properties

[generic-function] ACCESS-KEY CLOG-ELEMENT

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

The special key per browser and platform is:

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

[generic-function] ADVISORY-TITLE CLOG-ELEMENT

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

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

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

[generic-function] EDITABLEP CLOG-ELEMENT

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

[generic-function] DRAGGABLEP CLOG-ELEMENT

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

[generic-function] VISIBLEP CLOG-ELEMENT

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

[generic-function] HIDDENP CLOG-ELEMENT

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

[generic-function] INNER-HTML CLOG-ELEMENT

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

[generic-function] OUTER-HTML CLOG-ELEMENT

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

[generic-function] SPELLCHECKP CLOG-ELEMENT

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

[generic-function] TAB-INDEX CLOG-ELEMENT

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

[generic-function] TEXT CLOG-ELEMENT

Get/Setf text.

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

[generic-function] TEXT-VALUE CLOG-ELEMENT

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

[type] TEXT-DIRECTION-TYPE

[generic-function] TEXT-DIRECTION CLOG-ELEMENT

Get/Setf BiDi text-direction.

[generic-function] LANGUAGE-CODE CLOG-ELEMENT

Get/Setf language-code.

[generic-function] POSITION-LEFT CLOG-ELEMENT

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

[generic-function] POSITION-TOP CLOG-ELEMENT

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

[generic-function] CLIENT-LEFT CLOG-ELEMENT

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

[generic-function] CLIENT-TOP CLOG-ELEMENT

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

[generic-function] CLIENT-WIDTH CLOG-ELEMENT

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

[generic-function] CLIENT-HEIGHT CLOG-ELEMENT

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

[generic-function] OFFSET-LEFT CLOG-ELEMENT

Position in pixels from left relative to the document.

[generic-function] OFFSET-TOP CLOG-ELEMENT

Position in pixels from top relative to the document.

[generic-function] OFFSET-WIDTH CLOG-ELEMENT

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

[generic-function] OFFSET-HEIGHT CLOG-ELEMENT

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

[generic-function] SCROLL-LEFT CLOG-ELEMENT

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

[generic-function] SCROLL-TOP CLOG-ELEMENT

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

[generic-function] SCROLL-WIDTH CLOG-ELEMENT

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

[generic-function] SCROLL-HEIGHT CLOG-ELEMENT

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

[generic-function] HTML-TAG CLOG-ELEMENT

Get html-tag.

CLOG-Element - Styles

[type] BOX-SIZING-TYPE

[generic-function] BOX-SIZING CLOG-ELEMENT

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

[type] CLEAR-SIDE-TYPE

[generic-function] CLEAR-SIDE CLOG-ELEMENT

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

[type] FLOAT-WRAP-TYPE

[generic-function] FLOAT-WRAP CLOG-ELEMENT

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

[type] DISPLAY-TYPE

[generic-function] DISPLAY CLOG-ELEMENT

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

Common Values:

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

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

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

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

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

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

               The properties to adjust for items in the flexbox are:

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

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

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

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

                The properties to adjust for grid items is:

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

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

[generic-function] ORDER CLOG-ELEMENT

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

[generic-function] FLEX CLOG-ELEMENT

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

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

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

[type] FLEX-WRAP-TYPE

[generic-function] FLEX-WRAP CLOG-ELEMENT

Get/Setf direction of flexbox packing.

[type] FLEX-DIRECTION-TYPE

[generic-function] FLEX-DIRECTION CLOG-ELEMENT

Get/Setf direction of flexbox packing.

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

Get/Setf grid-template-columns.

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

Get/Setf grid-template-rows.

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

Get/Setf grid-template-areas.

[generic-function] COLUMN-GAP CLOG-ELEMENT

Get/Setf column-gap.

[generic-function] ROW-GAP CLOG-ELEMENT

Get/Setf row-gap.

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

Get/Setf grid-auto-columns.

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

Get/Setf grid-auto-rows.

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

Get/Setf grid-auto-flow.

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

Get/Setf grid-column-start.

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

Get/Setf grid-column-end.

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

Get/Setf grid-row-start.

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

Get/Setf grid-row-end.

[type] ALIGN-ITEMS-TYPE

[generic-function] ALIGN-ITEMS CLOG-ELEMENT

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

[type] ALIGN-SELF-TYPE

[generic-function] ALIGN-SELF CLOG-ELEMENT

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

[type] ALIGN-CONTENT-TYPE

[generic-function] ALIGN-CONTENT CLOG-ELEMENT

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

[type] JUSTIFY-ITEMS-TYPE

[generic-function] JUSTIFY-ITEMS CLOG-ELEMENT

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

[type] JUSTIFY-SELF-TYPE

[generic-function] JUSTIFY-SELF CLOG-ELEMENT

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

[type] JUSTIFY-CONTENT-TYPE

[generic-function] JUSTIFY-CONTENT CLOG-ELEMENT

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

[type] OVERFLOW-TYPE

[generic-function] OVERFLOW CLOG-ELEMENT

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

[type] OVERFLOW-X-TYPE

[generic-function] OVERFLOW-X CLOG-ELEMENT

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

[type] OVERFLOW-Y-TYPE

[generic-function] OVERFLOW-Y CLOG-ELEMENT

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

[generic-function] Z-INDEX CLOG-ELEMENT

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

[type] RESIZABLE-TYPE

[generic-function] RESIZABLE CLOG-ELEMENT

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

[type] POSITIONING-TYPE

[generic-function] POSITIONING CLOG-ELEMENT

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

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

[generic-function] POSITION-TOP CLOG-ELEMENT

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

[generic-function] POSITION-LEFT CLOG-ELEMENT

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

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

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

[generic-function] LEFT CLOG-WINDOW

Get/Setf browser x position.

[generic-function] TOP CLOG-WINDOW

Get/Setf browser y postion.

[generic-function] RIGHT CLOG-ELEMENT

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

[generic-function] BOTTOM CLOG-ELEMENT

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

[generic-function] BOX-HEIGHT CLOG-ELEMENT

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

[generic-function] BOX-WIDTH CLOG-ELEMENT

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

[generic-function] MAXIMUM-HEIGHT CLOG-ELEMENT

Get/Setf maximum-height.

[generic-function] MAXIMUM-WIDTH CLOG-ELEMENT

Get/Setf maximum-width.

[generic-function] MINIMUM-HEIGHT CLOG-ELEMENT

Get/Setf minimum-height.

[generic-function] MINIMUM-WIDTH CLOG-ELEMENT

Get/Setf minimum-width.

[generic-function] INNER-HEIGHT CLOG-WINDOW

Get/Setf inner height of browser window.

[generic-function] INNER-WIDTH CLOG-WINDOW

Get/Setf inner width of browser window.

[generic-function] OUTER-HEIGHT CLOG-WINDOW

Get/Setf outer height of browser window.

[generic-function] OUTER-WIDTH CLOG-WINDOW

Get/Setf outer width of browser window.

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

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

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

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

[generic-function] COLOR CLOG-ELEMENT

Get/Setf color.

[generic-function] OPACITY CLOG-ELEMENT

Get/Setf opacity.

[type] BACKGROUND-ATTACHMENT-TYPE

[generic-function] BACKGROUND-ATTACHMENT CLOG-ELEMENT

Get/Setf background-attachment.

[generic-function] BACKGROUND-COLOR CLOG-ELEMENT

Get/Setf background-color.

[generic-function] BACKGROUND-IMAGE CLOG-ELEMENT

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

[generic-function] BACKGROUND-POSITION CLOG-ELEMENT

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

[type] BACKGROUND-ORIGIN-TYPE

[generic-function] BACKGROUND-ORIGIN CLOG-ELEMENT

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

[type] BACKGROUND-REPEAT-TYPE

[generic-function] BACKGROUND-REPEAT CLOG-ELEMENT

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

[type] BACKGROUND-CLIP-TYPE

[generic-function] BACKGROUND-CLIP CLOG-ELEMENT

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

[generic-function] BACKGROUND-SIZE CLOG-ELEMENT

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

[type] BORDER-STYLE-TYPE

[generic-function] BORDER CLOG-ELEMENT

Get border.

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

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

[generic-function] BORDER-RADIUS CLOG-ELEMENT

Get/Setf border-radius.

[generic-function] BOX-SHADOW CLOG-ELEMENT

Get/Setf box-shadow.

[generic-function] TEXT-SHADOW CLOG-ELEMENT

Get/Setf text-shadow.

[type] OUTLINE-STYLE-TYPE

[generic-function] OUTLINE CLOG-ELEMENT

Get outline.

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

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

[generic-function] MARGIN CLOG-ELEMENT

Get margin.

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

Set margins, Each can be - |auto|initial|inherit

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

Set margin SIDE (:top :right :bottom or :left), VALUE can be - |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 - |initial|inherit

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

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

[generic-function] CURSOR CLOG-ELEMENT

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

[type] FONT-STYLE-TYPE

[type] FONT-VARIANT-TYPE

[type] SYSTEM-FONT-TYPE

[generic-function] FONT CLOG-ELEMENT

Get/Setf font.

[generic-function] FONT-CSS VALUE

Get/Setf font raw css value

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

Set font.

[type] TEXT-ALIGNMENT-TYPE

[generic-function] TEXT-ALIGNMENT CLOG-ELEMENT

Get/Setf text-alignment.

[type] VERTICAL-ALIGN-TYPE

[generic-function] VERTICAL-ALIGN CLOG-ELEMENT

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

CLOG-Element - Methods

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

add-class.

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

remove-class.

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

toggle-class.

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

Remove CLOG-Element from the DOM.

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

Remove CLOG-Element from the clog cache on browser.

[generic-function] DESTROY CLOG-ELEMENT

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

[generic-function] CLICK CLOG-ELEMENT

simulate click.

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

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

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

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

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

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

CLOG-Element - DOM Traversal Methods

[generic-function] PARENT-ELEMENT CLOG-ELEMENT

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

[generic-function] FIRST-CHILD CLOG-ELEMENT

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

[generic-function] PREVIOUS-SIBLING CLOG-ELEMENT

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

[generic-function] NEXT-SIBLING CLOG-ELEMENT

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

← ↑ → ↺

8 Common CLOG Elements

CLOG-A - Class for CLOG Anchors

[class] CLOG-A CLOG-ELEMENT

CLOG A, anchor, Objects.

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

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

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

[generic-function] LINK CLOG-A

Get/Setf the HREF link of the anchor.

[generic-function] TARGET CLOG-A

Get/Setf the link target of the anchor.

[generic-function] DOWNLOAD CLOG-A

Get/Setf the download name of the anchor.

CLOG-BR - Class for CLOG Line Breaks

[class] CLOG-BR CLOG-ELEMENT

CLOG BR Objects for line breaks.

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

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

CLOG-BUTTON - Class for CLOG Buttons

[class] CLOG-BUTTON CLOG-ELEMENT

CLOG Button Objects.

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

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

[generic-function] DISABLEDP CLOG-FORM-ELEMENT

Get/Setf form element disabledp.

CLOG-IMG - Class for CLOG Images

[class] CLOG-IMG CLOG-ELEMENT

CLOG Img Objects.

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

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

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

Get/Setf the url-src of the img.

CLOG-Div - Class for CLOG Div Blocks

[class] CLOG-DIV CLOG-ELEMENT

CLOG Div Objects.

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

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

CLOG-Dialog - Class for CLOG Dialog Blocks

[class] CLOG-DIALOG CLOG-ELEMENT

CLOG Dialog Objects.

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

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

[generic-function] RETURN-VALUE CLOG-DIALOG

Get/Setf return-value of dialog.

[generic-function] DIALOG-OPENP CLOG-DIALOG

Get/Setf dialog-openp. Will show dialog

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

Close dialog.

[generic-function] CLOSE-DIALOG CLOG-DIALOG

Close dialog.

CLOG-Details - Class for CLOG Detail Blocks

[class] CLOG-DETAILS CLOG-ELEMENT

CLOG Details Objects.

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

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

[generic-function] DETAILS-OPENP CLOG-DETAILS

Get/Setf details-openp. Will show details

CLOG-Summary - Class for CLOG Summary Blocks

[class] CLOG-SUMMARY CLOG-ELEMENT

CLOG Summary Objects.

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

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

CLOG-HR - Class for CLOG Hortizontal Rules

[class] CLOG-HR CLOG-ELEMENT

CLOG HR Objects for horizontal rules.

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

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

CLOG-Meter - Class for CLOG Meters

[class] CLOG-METER CLOG-ELEMENT

CLOG Meter Objects.

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

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

[generic-function] VALUE CLOG-FORM-ELEMENT

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

[generic-function] HIGH CLOG-METER

Get/Setf the high of the meter.

[generic-function] LOW CLOG-METER

Get/Setf the low of the meter.

[generic-function] MINIMUM CLOG-FORM-ELEMENT

Get/Setf form element minimum.

[generic-function] MAXIMUM CLOG-FORM-ELEMENT

Get/Setf form element maximum.

[generic-function] OPTIMUM CLOG-METER

Get/Setf the optimum of the meter.

CLOG-Progress-Bar - Class for CLOG Progress Bars

[class] CLOG-PROGRESS-BAR CLOG-ELEMENT

CLOG Progress-Bar Objects.

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

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

[generic-function] VALUE CLOG-FORM-ELEMENT

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

[generic-function] MAXIMUM CLOG-FORM-ELEMENT

Get/Setf form element maximum.

CLOG-P - Class for CLOG Paragraphs

[class] CLOG-P CLOG-ELEMENT

CLOG P Objects.

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

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

CLOG-Span - Class for CLOG Inline Spans

[class] CLOG-SPAN CLOG-ELEMENT

CLOG Span Objects.

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

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

CLOG-Section - Class for CLOG Inline Sections

[type] SECTION-TYPE

[class] CLOG-SECTION CLOG-ELEMENT

CLOG Section Objects.

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

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

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

CLOG-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 STYLE 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

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

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

[class] CLOG-ORDERED-LIST CLOG-ELEMENT

CLOG Ordered-List Objects.

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

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

[type] LIST-KIND-TYPE

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

Get/Setf list list-kind.

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

[type] LIST-LOCATION-TYPE

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

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

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

[class] CLOG-UNORDERED-LIST CLOG-ELEMENT

CLOG Unordered-List Objects.

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

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

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

[class] CLOG-LIST-ITEM CLOG-ELEMENT

CLOG List-Item Objects.

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

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

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

Get/Setf list item-value.

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

[class] CLOG-DEFINITION-LIST CLOG-ELEMENT

CLOG Definition-List Objects.

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

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

CLOG-Term - Class for CLOG Terms

[class] CLOG-TERM CLOG-ELEMENT

CLOG Term Objects.

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

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

CLOG-Description - Class for CLOG Descriptions

[class] CLOG-DESCRIPTION CLOG-ELEMENT

CLOG Description Objects.

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

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

CLOG-Table - Class for CLOG Tables

[class] CLOG-TABLE CLOG-ELEMENT

CLOG Table Objects.

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

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

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

[class] CLOG-TABLE-ROW CLOG-ELEMENT

CLOG Table-Row Objects.

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

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

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

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

CLOG Table-Column Objects.

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

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

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

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

CLOG Table-Heading Objects.

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

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

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

[class] CLOG-TABLE-HEAD CLOG-TABLE

CLOG Table-Head Objects.

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

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

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

[class] CLOG-TABLE-BODY CLOG-TABLE

CLOG Table-Body Objects.

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

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

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

[class] CLOG-TABLE-CAPTION CLOG-TABLE

CLOG Table-Caption Objects.

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

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

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

[class] CLOG-TABLE-FOOTER CLOG-TABLE

CLOG Table-Footer Objects.

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

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

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

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

CLOG Table-Column-Group Objects.

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

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

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

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

CLOG Table-Column-Group-Item Objects.

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

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

← ↑ → ↺

9 CLOG Presentations

CLOG-Presentations - CLOG bindings to Lisp Objects

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

← ↑ → ↺

10 CLOG Data

Load and Write to objects and CLOG-Elements

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

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

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

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

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

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

SQL Timestamp by Engine

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

Function used by mysql to retrieve the time from the epoch

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

Function used by sqlite to retrieve the time from the epoch

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

Function used by postgresql to retrieve the time from the epoch

SQL Writing Helpers

[function] SQL-QUOTE VALUE

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

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

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

[function] SQL-VALUE-LIST VALUE-LIST

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

[function] SQL-UPDATE-LIST PLIST

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

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

Build basic sql select statement

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

Build basic sql insert statement

[function] SQL-INSERT* TABLE PLIST

Build basic sql insert statement using a plist

[function] SQL-UPDATE TABLE PLIST WHERE

Build basic sql update statement

← ↑ → ↺

11 CLOG DBI

CLOG-Database - CLOG Database Connection

[class] CLOG-DATABASE CLOG-ELEMENT

Connection to database.

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

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

[generic-function] DATABASE-CONNECTION CLOG-DATABASE

Accessor to the database handle

[class] CLOG-ONE-ROW CLOG-ELEMENT

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

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

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

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

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

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

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

[generic-function] CLOG-DATABASE CLOG-OBJ

Access to the CLOG-DATABASE

[generic-function] TABLE-NAME OBJECT

[generic-function] WHERE-CLAUSE OBJECT

[generic-function] ORDER-BY OBJECT

[generic-function] LIMIT OBJECT

[generic-function] ROW-ID-NAME OBJECT

[generic-function] ROWID OBJECT

[generic-function] TABLE-COLUMNS OBJECT

[generic-function] LAST-FETCH OBJECT

[generic-function] LAST-SQL OBJECT

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CLOG Table Lookup Object

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

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

[generic-function] VALUE-FIELD OBJECT

[generic-function] OPTION-FIELD OBJECT

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

CLOG Database Table View Object

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

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

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

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

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

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

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

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

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

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

← ↑ → ↺

12 CLOG Panels

CLOG-Panel - CLOG Panels

[class] CLOG-PANEL CLOG-ELEMENT

CLOG Panel objects.

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

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

CLOG-Panel-Box - CLOG Panel Box

[class] CLOG-PANEL-BOX CLOG-ELEMENT

CLOG Panel-Box Objects.

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

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

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

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

CLOG-Panel-Box-Layout

[class] CLOG-PANEL-BOX-LAYOUT

CLOG Panel Box Layout Objects.

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

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

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

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

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

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

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

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

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

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

[generic-function] RIGHT-PANEL OBJECT

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

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

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

Recalculate layout based on size of outer panel content

← ↑ → ↺

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

← ↑ → ↺

14 CLOG Form Objects

CLOG-Form-Data

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

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

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

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

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

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

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

Delete the multipart data upload

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

Return value for ITEM from FROM-DATA a-list

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

[type] FORM-METHOD-TYPE

[class] CLOG-FORM CLOG-ELEMENT

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

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

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

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

Get form element count.

[generic-function] SUBMIT CLOG-FORM

Submit form.

[generic-function] RESET CLOG-FORM

Reset form.

[generic-function] AUTOCOMPLETEP CLOG-FORM

Get/Setf form autocompletep.

[generic-function] ENCODING CLOG-FORM

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

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

Get/Setf form validate-on-submit.

CLOG-Fieldset - Class for CLOG Fieldsets

[class] CLOG-FIELDSET CLOG-ELEMENT

CLOG Form Element Fieldset Object

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

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

CLOG-Legend - Class for CLOG Legends

[class] CLOG-LEGEND CLOG-ELEMENT

CLOG Fieldset Legend Object

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

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

CLOG-Form-Element - Class for form elements

[class] CLOG-FORM-ELEMENT CLOG-ELEMENT

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

[type] FORM-ELEMENT-TYPE

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

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

[generic-function] AUTOCOMPLETE CLOG-FORM-ELEMENT

Get/Setf form element autocomplete.

[generic-function] AUTOFOCUSP CLOG-FORM-ELEMENT

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

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

Get/Setf form element place holder.

[generic-function] DISABLEDP CLOG-FORM-ELEMENT

Get/Setf form element disabledp.

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

Get/Setf form element read-only-p.

[generic-function] REQUIREDP CLOG-FORM-ELEMENT

Get/Setf form element requiredp.

[generic-function] MULTIPLEP CLOG-FORM-ELEMENT

Get/Setf form element multiplep.

[generic-function] NAME CLOG-FORM-ELEMENT

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

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

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

[generic-function] VALUE CLOG-FORM-ELEMENT

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

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

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

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

Returns t or nil on the selected checkbox button.

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

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

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

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

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

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

[generic-function] PATTERN CLOG-FORM-ELEMENT

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

[generic-function] MINIMUM CLOG-FORM-ELEMENT

Get/Setf form element minimum.

[generic-function] MAXIMUM CLOG-FORM-ELEMENT

Get/Setf form element maximum.

[generic-function] SIZE CLOG-FORM-ELEMENT

Get/Setf form element size.

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

Get/Setf form element step.

[generic-function] SELECT CLOG-FORM-ELEMENT

Select and highlight the contents of element.

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

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

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

Get/Setf the url-src of the img.

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

Get/Setf the alt-text of the img.

[generic-function] CHECKEDP CLOG-FORM-ELEMENT

Get/Setf form element checkedp.

[type] INPUT-MODE-TYPE

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

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

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

Set the option data list to use for this element.

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

Set the option data list to use for this element.

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

Get/Setf form element minimum-length.

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

Get/Setf form element maximum-length.

CLOG-Label - Class for CLOG Labels

[class] CLOG-LABEL CLOG-ELEMENT

CLOG Form Element Label Object

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

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

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

Set label is for ELEMENT.

CLOG-Select - Class for CLOG Selects

[class] CLOG-SELECT CLOG-FORM-ELEMENT

CLOG Form Element Select Options Object

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

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

[class] CLOG-OPTION CLOG-FORM-ELEMENT

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

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

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

[class] CLOG-OPTGROUP CLOG-FORM-ELEMENT

CLOG Form Element Optgroup for CLOG Select Object

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

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

[generic-function] SELECTEDP CLOG-FORM-ELEMENT

Get/Setf form element selectedp.

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

Add option VALUE to select.

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

Add group of options to select.

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

Add option VALUE to select.

[generic-function] SELECT-TEXT CLOG-OBJ

Get/Setf the text of selected item.

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

[class] CLOG-DATA-LIST CLOG-ELEMENT

CLOG Form Element Data-List Options Object

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

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

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

Add option VALUE to data-list.

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

Add option VALUE to data-list.

CLOG-Text-Area - Class for CLOG Text Areas

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

CLOG Form Element Text-Area Object

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

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

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

Get/Setf form element word-wrap.

[generic-function] COLUMNS CLOG-TEXT-AREA

Get/Setf form element columns.

[generic-function] ROWS CLOG-TEXT-AREA

Get/Setf form element rows.

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

Disable resize of text area.

← ↑ → ↺

15 CLOG Canvas Objects

CLOG-Canvas - Class for CLOG canvas objects

[class] CLOG-CANVAS CLOG-ELEMENT

CLOG Canvas Objects.

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

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

[class] CLOG-CONTEXT2D CLOG-OBJ

[generic-function] CREATE-CONTEXT2D CLOG-CANVAS

Create a new CLOG-Context2d from a CLOG-Canvas

CLOG-Canvas - Properties

[generic-function] FILL-STYLE CLOG-CONTEXT2D

Setf/get property fill style

[generic-function] CANVAS-FILTER CLOG-CONTEXT2D

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

[generic-function] FONT-STYLE CLOG-CONTEXT2D

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

[generic-function] GLOBAL-ALPHA CLOG-CONTEXT2D

Setf/get global alpha

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

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

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

Setf/get text shadow blur

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

Setf/get text shadow blur

[generic-function] LINE-CAP CLOG-CONTEXT2D

Setf/get line cap style

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

Setf/get miter style limit

[generic-function] LINE-JOIN CLOG-CONTEXT2D

Setf/get line join style

[generic-function] LINE-WIDTH CLOG-CONTEXT2D

Set line style width

[generic-function] MITER-LIMIT CLOG-CONTEXT2D

Setf/get miter style limit

[generic-function] SHADOW-BLUR CLOG-CONTEXT2D

Setf/get text shadow blur

[generic-function] SHADOW-COLOR CLOG-CONTEXT2D

Setf/get text shadow color

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

Setf/get text shadow offset x

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

Setf/get text shadow offset y

[generic-function] STROKE-STYLE CLOG-CONTEXT2D

Setf/get text stroke style

[type] TEXT-ALIGN-TYPE

[generic-function] TEXT-ALIGN CLOG-CONTEXT2D

Setf/get text alignment style

[type] TEXT-BASELINE-TYPE

[generic-function] TEXT-BASELINE CLOG-CONTEXT2D

Set text baseline style

[generic-function] TEXT-DIR CLOG-CONTEXT2D

Setf/get text direction style

CLOG-Canvas - Methods

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

Adds a circular arc to the current path.

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

Adds an arc to the current path.

[generic-function] BEGIN-PATH CLOG-CONTEXT2D

Starts a new path empting any previous points.

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

Adds a cubic Bezier curve to the current path.

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

Clear rectangle to transparent black

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

Clip a path.

[generic-function] CLOSE-PATH CLOG-CONTEXT2D

Adds a line to start point of path.

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

Create blank image data

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

Create conic gradient

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

Create linear gradient

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

Create radial gradient

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

Create pattern

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

Draw image at dx dy optionally dwidth and dheight

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

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

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

Adds an elliptical arc to the current path.

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

Fill a path.

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

Fill rectangle with current fill-color

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

Fill text with current fill-color

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

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

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

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

[generic-function] GET-TRANSFORM CLOG-CONTEXT2D

Get current transform matrix as clog-matrix

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

Returns t if point is in path or PATH2D if specfified

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

Returns t if point is in stroke or PATH2D if specfified

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

Adds a line to the current path.

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

Measure text returns a clog-text-metrics object

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

Moves start point of path.

[generic-function] PUT-IMAGE-DATA CLOG-CONTEXT2D IMAGE-DATA X Y

Put image-data at x y

[generic-function] PUT-IMAGE-DATA-DIRTY CLOG-CONTEXT2D IMAGE-DATA X Y DX DY DWIDTH DHEIGHT

Put portion of image-data at x y

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

Adds a quadratic Bezier curve to the current path.

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

Adds a rectangle to the current path.

[generic-function] RESET-TRANSFORM CLOG-CONTEXT2D

Restore canvas from stack

[generic-function] CANVAS-RESTORE CLOG-CONTEXT2D

Restore canvas from stack

[generic-function] ROTATE CLOG-MATRIX ANGLE

Return rotate a clog-matrix

[generic-function] CANVAS-SAVE CLOG-CONTEXT2D

Save canvas to stack

[generic-function] SCALE CLOG-CONTEXT2D X Y

Scale

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

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

[generic-function] SET-TRANSFORM CLOG-CONTEXT2D A B C D E F G

Set-Transform

[generic-function] SET-TRANSFORM-WITH-MATRIX CLOG-CONTEXT2D CLOG-MATRIX

Set-Transform-With-Matrix

[generic-function] PATH-STROKE CLOG-CONTEXT2D &KEY PATH2D

Stroke a path.

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

Fill rectangle using current stroke-style

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

Stroke text with current stroke-style

[generic-function] TRANSFORM CLOG-CONTEXT2D A B C D E F

Transform

[generic-function] TRANSLATE CLOG-CONTEXT2D X Y

Translate

CLOG-Canvas-Gradient

[class] CLOG-CANVAS-GRADIENT CLOG-OBJ

[generic-function] ADD-COLOR-STOP CLOG-CANVAS-GRADIENT OFFSET COLOR

Add a color stop

CLOG-Image-Data

[class] CLOG-IMAGE-DATA CLOG-OBJ

[generic-function] JSON-IMAGE-DATA CLOG-IMAGE-DATA

Setf/get json image data

CLOG-Matrix

[class] CLOG-MATRIX CLOG-OBJ

[generic-function] CREATE-MATRIX CLOG-CANVAS &KEY MATRIX

Create a new CLOG-Matrix. MATRIX can be json array 6 element for 2d or 16 for 3d.

[generic-function] FLIP-X CLOG-MATRIX

Return flip-x a clog-matrix

[generic-function] FLIP-Y CLOG-MATRIX

Return flip-y a clog-matrix

[generic-function] INVERSE CLOG-MATRIX

Return inverse a clog-matrix

[generic-function] MULTIPLY CLOG-MATRIX BY-MATRIX

Return multiply a clog-matrix

[generic-function] ROTATE CLOG-MATRIX ANGLE

Return rotate a clog-matrix

[generic-function] SCALE-MATRIX CLOG-MATRIX SX &OPTIONAL SY SZ OX OY OZ

Return scale a clog-matrix by sx and optionally to sy sz ox oy oz

[generic-function] SCALE3D CLOG-MATRIX SX &OPTIONAL SY SZ OX OY OZ

Return scale3d a clog-matrix by sx and optionally to sy sz ox oy oz

[generic-function] TRANSLATE-MATRIX CLOG-MATRIX X Y &OPTIONAL Z

Return translate-matrix a clog-matrix by x y and optionally z

CLOG-Path2d

[class] CLOG-PATH2D CLOG-OBJ

[generic-function] CREATE-PATH2D CLOG-CANVAS &KEY PATH2D

Create a new CLOG-Path2d. If CLOG-PATH2D creates a copy.

CLOG-Text-Metrics

[class] CLOG-TEXT-METRICS CLOG-OBJ

[generic-function] ACTUAL-BOUNDING-BOX-LEFT CLOG-TEXT-METRICS

Actual bounding box left

[generic-function] ACTUAL-BOUNDING-BOX-RIGHT CLOG-TEXT-METRICS

Actual bounding box right

[generic-function] ACTUAL-BOUNDING-BOX-ASCENT CLOG-TEXT-METRICS

Actual bounding box ascent

[generic-function] ACTUAL-BOUNDING-BOX-DESCENT CLOG-TEXT-METRICS

Actual bounding box descent

[generic-function] FONT-BOUNDING-BOX-ASCENT CLOG-TEXT-METRICS

Font bounding box ascent

[generic-function] FONT-BOUNDING-BOX-DESCENT CLOG-TEXT-METRICS

Font bounding box descent

[generic-function] EM-HEIGHT-ASCENT CLOG-TEXT-METRICS

'M' height ascent

[generic-function] EM-HEIGHT-DESCENT CLOG-TEXT-METRICS

'M' height descent

[generic-function] HANGING-BASELINE CLOG-TEXT-METRICS

Hanging baseline

[generic-function] ALPHABETIC-BASELINE CLOG-TEXT-METRICS

Alphabetic baseline

[generic-function] IDEOGRAPHIC-BASELINE CLOG-TEXT-METRICS

Ideographic baseline

← ↑ → ↺

16 CLOG WebGL Objects

[in package CLOG-WEBGL]

CLOG-WebGL - Class for CLOG WebGL objects

[class] CLOG-WEBGL CLOG-OBJ

[generic-function] CREATE-WEBGL CLOG-CANVAS &KEY CONTEXT

Create a new CLOG-WebGL from a CLOG-Canvas. Context can be webgl (version 1) or webgl2 (default)

[generic-function] DRAWING-BUFFER-WIDTH CLOG-WEBGL

Drawing are of buffer width. returns float

[generic-function] DRAWING-BUFFER-HEIGHT CLOG-WEBGL

Drawing are of buffer height. returns float

[generic-function] BUFFER-PARAMETER CLOG-WEBGL GLENUM-TARGET GLENUM-PNAME

Returns information about the buffer. target: A GLenum specifying the target buffer object. Possible values:

:ARRAY_BUFFER Buffer containing vertex attributes, such as vertex coordinates, texture coordinate data, or vertex color data.

:ELEMENT_ARRAY_BUFFER Buffer used for element indices.

When using a WebGL 2 context, the following values are available additionally:

:COPY_READ_BUFFER Buffer for copying from one buffer object to another.

:COPY_WRITE_BUFFER Buffer for copying from one buffer object to another.

:TRANSFORM_FEEDBACK_BUFFER Buffer for transform feedback operations.

:UNIFORM_BUFFER Buffer used for storing uniform blocks.

:PIXEL_PACK_BUFFER Buffer used for pixel transfer operations.

:PIXEL_UNPACK_BUFFER Buffer used for pixel transfer operations.

pname: A GLenum specifying information to query. Possible values:

:BUFFER_SIZE Returns a GLint indicating the size of the buffer in bytes.

:BUFFER_USAGE Returns a GLenum indicating the usage pattern of the buffer. One of the followings:

:STATIC_DRAW :DYNAMIC_DRAW :STREAM_DRAW

When using a WebGL 2 context, the following values are available additionally:

:STATIC_READ :DYNAMIC_READ :STREAM_READ :STATIC_COPY :DYNAMIC_COPY :STREAM_COPY

[generic-function] CONTEXT-ATTRIBUTES OBJ

[generic-function] WEBGL-ERROR OBJ

[generic-function] FRAME-BUFFER-ATTACHMENT-PARAMETER OBJ GLENUM-TARGET GLENUM-ATTACHMENT GLENUM-PNAME

[generic-function] PARAMETER OBJ GLENUM-PNAME

[generic-function] RENDER-BUFFER-PARAMETER OBJ GLENUM-TARGET GLENUM-PNAME

[generic-function] TEXTURE-PARAMETER OBJ GLENUM-TARGET GLENUM-PNAME

[generic-function] VERTEX-ATTRIBUTE CLOG-WEBGL INDEX GLENUM-PNAME

Information about a vertex attribute at a given position. pname: A GLenum specifying the information to query. Possible values:

:VERTEX_ATTRIB_ARRAY_BUFFER_BINDING Returns the currently bound WebGLBuffer.

:VERTEX_ATTRIB_ARRAY_ENABLED Returns a GLboolean that is true if the vertex attribute is enabled at this index. Otherwise false.

:VERTEX_ATTRIB_ARRAY_SIZE Returns a GLint indicating the size of an element of the vertex array.

:VERTEX_ATTRIB_ARRAY_STRIDE Returns a GLint indicating the number of bytes between successive elements in the array. 0 means that the elements are sequential.

:VERTEX_ATTRIB_ARRAY_TYPE Returns a GLenum representing the array type. One of

:BYTE :UNSIGNED_BYTE :SHORT, :UNSIGNED_SHORT :FLOAT :VERTEX_ATTRIB_ARRAY_NORMALIZED Returns a GLboolean that is true if fixed-point data types are normalized for the vertex attribute array at the given index.

:CURRENT_VERTEX_ATTRIB Returns a Float32Array (with 4 elements) representing the current value of the vertex attribute at the given index.

When using a WebGL 2 context, the following values are available additionally:

:VERTEX_ATTRIB_ARRAY_INTEGER Returns a GLboolean indicating whether an integer data type is in the vertex attribute array at the given index.

:VERTEX_ATTRIB_ARRAY_DIVISOR Returns a GLint describing the frequency divisor used for instanced rendering.

[generic-function] ACTIVE-TEXTURE CLOG-WEBGL GLENUM-TEXTURE

Sets the active textcture in gl context based on :TEXTUREI where I is the texture number.

[generic-function] BLEND-COLOR CLOG-WEBGL RED GREEN BLUE ALPHA

Used to set the source and destination blending factors.

[generic-function] BLEND-EQUATION CLOG-WEBGL GLENUM-MODE

Used to set both the RGB blend equation and alpha blend equation to a single equation. :FUNC_ADD : source + destination (default value) :FUNC_SUBTRACT : source - destination :FUNC_REVERSE_SUBTRACT : destination - source

When using a WebGL 2 context, the following values are available additionally:

:MIN : Minimum of source and destination :MAX : Maximum of source and destination

[generic-function] BLEND-EQUATION-SEPERATE CLOG-WEBGL GLENUM-MODE-RGB GLENUM-MODE-ALPHA

Used to set both the RGB blend equation and alpha blend equation to a single equation. :FUNC_ADD : source + destination (default value) :FUNC_SUBTRACT : source - destination :FUNC_REVERSE_SUBTRACT : destination - source

When using a WebGL 2 context, the following values are available additionally:

:MIN : Minimum of source and destination :MAX : Maximum of source and destination

[generic-function] BLEND-FUNCTION CLOG-WEBGL GLENUM-SOURCE-FACTOR GLENUM-DESTINATION-FACTOR

Defines which function is used for blending pixel arithmetic. See - https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc

[generic-function] BLEND-FUNCTION-SEPERATE CLOG-WEBGL GLENUM-SOURCE-FACTOR-RGB GLENUM-DESTINATION-FACTOR-RGB GLENUM-SOURCE-FACTOR-ALPHA GLENUM-DESTINATION-FACTOR-ALPHA

Defines which function is used for blending pixel arithmetic. See - https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc

[generic-function] CHECK-FRAME-BUFFER-STATUS CLOG-WEBGL TARGET

Completeness status of frame buffer. Target can be: :FRAMEBUFFER Collection buffer data storage of color, alpha, depth and stencil buffers used to render an image.

When using a WebGL 2 context, the following values are available additionally:

:DRAW_FRAMEBUFFER Equivalent to :FRAMEBUFFER. Used as a destination for drawing, rendering, clearing, and writing operations.

:READ_FRAMEBUFFER Used as a source for reading operations.

[generic-function] CLEAR-COLOR CLOG-WEBGL RED GREEN BLUE ALPHA

Specifies the color values used when clearing color buffers with CLEAR-WEBGL.

[generic-function] CLEAR-DEPTH CLOG-WEBGL DEPTH

Specifying the depth value used when the depth buffer is cleared.

[generic-function] CLEAR-WEBGL CLOG-WEBGL GLENUM-MASK

Clears buffers to preset values. GLENUM-MASK can be: :COLOR_BUFFER_BIT :DEPTH_BUFFER_BIT :STENCIL_BUFFER_BIT

[generic-function] CLEAR-STENCIL CLOG-WEBGL STENCIL

Specifying the stencil index used when the stencil buffer is cleared.

[generic-function] COLOR-MASK CLOG-WEBGL RED GREEN BLUE ALPHA

Sets which color components to enable or to disable when drawing or rendering red green blue alpha are nil or true

[generic-function] DEPTH-FUNCTION CLOG-WEBGL GLENUM-FUNC

Specifies a function that compares incoming pixel depth to the current depth buffer value. GLENUM-FUNC can be: :NEVER (never pass) :LESS (pass if the incoming value is less than the depth buffer value) :EQUAL (pass if the incoming value equals the depth buffer value) :LEQUAL (pass if the incoming value is less than or equal to the depth buffer value) :GREATER (pass if the incoming value is greater than the depth buffer value) :NOTEQUAL (pass if the incoming value is not equal to the depth buffer value) :GEQUAL (pass if the incoming value is greater than or equal to the depth buffer value) :ALWAYS (always pass)

[generic-function] DEPTH-MASK CLOG-WEBGL ENABLEP

Specifying whether or not writing into the depth buffer is enabled

[generic-function] DEPTH-RANGE CLOG-WEBGL ZNEAR ZFAR

Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.

[generic-function] DISABLE-CAPABILITY CLOG-WEBGL GLENUM-CAPABILITY

Disables specific WebGL capabilities for this context. For GLENUM-CAPABILITY see: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/disable

[generic-function] DISABLE-VERTEX-ATTRIBUTE-ARRAY CLOG-WEBGL ATTRIBUTE-LOCATION

Turns the generic vertex attribute array off at a given index position.

[generic-function] DRAW-ARRAYS CLOG-WEBGL MODE OFFSET COUNT

Renders primitives from array data. MODE can be: :POINTS Draws a single dot. :LINE_STRIP Draws a straight line to the next vertex. :LINE_LOOP Draws a straight line to the next vertex, and connects the last vertex back to the first. :LINES Draws a line between a pair of vertices. :TRIANGLE_STRIP :TRIANGLE_FAN :TRIANGLES Draws a triangle for a group of three vertices.

[generic-function] DRAW-ELEMENTS CLOG-WEBGL MODE COUNT TYPE OFFSET

Renders primitives from array data. MODE can be: :POINTS Draws a single dot. :LINE_STRIP Draws a straight line to the next vertex. :LINE_LOOP Draws a straight line to the next vertex, and connects the last vertex back to the first. :LINES Draws a line between a pair of vertices. :TRIANGLE_STRIP :TRIANGLE_FAN :TRIANGLES Draws a triangle for a group of three vertices.

TYPE can be: :UNSIGNED_BYTE :UNSIGNED_SHORT

[generic-function] ENABLE-CAPABILITY CLOG-WEBGL GLENUM-CAPABILITY

Enables specific WebGL capabilities for this context. For GLENUM-CAPABILITY see: https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/enable

[generic-function] ENABLE-VERTEX-ATTRIBUTE-ARRAY CLOG-WEBGL ATTRIBUTE-LOCATION

Turns the generic vertex attribute array on at a given index position.

[generic-function] FINISH CLOG-WEBGL

Blocks execution until all previously called commands are finished. this needs to be written to fire an event when done to work fully with CLOG

[generic-function] FLUSH CLOG-WEBGL

Empties different buffer commands, causing all commands to be executed as quickly as possible

[generic-function] FRAME-BUFFER-RENDER-BUFFER CLOG-WEBGL TARGET ATTACHMENT RENDERBUFFERTARGET CLOG-WEBGL-RENDER-BUFFER

Attaches a clog-Render-buffer object to a clog-frame-buffer object

[generic-function] FRAME-BUFFER-TEXTURE-2D CLOG-WEBGL TARGET ATTACHMENT TEXTARGET CLOG-FRAME-BUFFER LEVEL

attaches a texture to a clog-frame-buffer

[generic-function] FRONT-FACE CLOG-WEBGL GLENUM-MODE

Specifies whether polygons are front- or back-facing by setting a winding orientation. GLENUM-MODE can be: :CW Clock-wise winding. :CCW Counter-clock-wise winding.

[generic-function] GENERATE-MIPMAP CLOG-WEBGL GLENUM-TARGET

Generates a set of mipmaps for a WebGLTexture object. GLENUM-TARGET can be: :TEXTURE_2D A two-dimensional texture. :TEXTURE_CUBE_MAP A cube-mapped texture. When using a WebGL 2 context, the following values are available additionally:

:TEXTURE_3D A three-dimensional texture. :TEXTURE_2D_ARRAY A two-dimensional array texture

[generic-function] HINT CLOG-WEBGL GLENUM-TARGET GLENUM-MODE

Hints for certain behaviors. The interpretation of these hints depend on the implementation.

target: Sets which behavior to be controlled. Possible values:

:GENERATE_MIPMAP_HINT Quality of filtering when generating mipmap images with WebGLRenderingContext.generateMipmap().

When using the OES_standard_derivatives extension:

ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES Accuracy of the derivative calculation for the GLSL built-in functions: dFdx, dFdy, and fwidth.

When using a WebGL 2 context, the following values are available additionally:

:FRAGMENT_SHADER_DERIVATIVE_HINT Same as ext.FRAGMENT_SHADER_DERIVATIVE_HINT_OES

mode: Sets the behavior. The default value is :DONT_CARE. The possible values are:

:FASTEST : The most efficient behavior should be used. :NICEST : The most correct or the highest quality option should be used. :DONT_CARE : There is no preference for this behavior.

[generic-function] IS-CAPABILITY-ENABLED CLOG-WEBGL GLENUM-CAPABILITY

Return true if glenum-capability is enabled. https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/isEnabled

[generic-function] IS-CONTEXT-LOST CLOG-WEBGL

Return true if context was lost and needs to be re-established

[generic-function] PIXEL-STORE-INTEGER OBJ GLENUM-PNAME VALUE

[generic-function] POLYGON-OFFSET OBJ FACTOR UNITS

[generic-function] RENDER-BUFFER-STORAGE OBJ GLENUM-TARGET GLENUM-INTERNAL-FORMAT WIDTH HEIGHT

[generic-function] SAMPLE-COVERAGE OBJ VALUE INVERTP

[generic-function] SCISSOR OBJ X Y WIDTH HEIGHT

[generic-function] STENCIL-FUNCTION OBJ GLENUM-FUNC REF MASK

[generic-function] STENCIL-FUNCTION-SEPERATE OBJ GLENUM-FACE GLENUM-FUNC REF MASK

[generic-function] STENCIL-MASK OBJ MASK

[generic-function] STENCIL-MASK-SEPERATE OBJ GLENUM-FACE MASK

[generic-function] STENCIL-OPERATION OBJ FAIL ZFAIL ZPASS

[generic-function] STENCIL-OPERATION-SEPERATE OBJ GLENUM-FACE FAIL ZFAIL ZPASS

[generic-function] TEXTURE-PARAMETER-FLOAT OBJ GLENUM-TARGET GLENUM-PNAME VALUE

[generic-function] TEXTURE-PARAMETER-INTEGER OBJ GLENUM-TARGET GLENUM-PNAME VALUE

[generic-function] UNIFORM-MATRIX OBJ SIZE LOCATION NORMALIZE MATRIX

[generic-function] VIEWPORT OBJ X Y WIDTH HEIGHT

[generic-function] VERTEX-ATTRIBUTE-POINTER OBJ ATTRIBUTE-LOCATION SIZE TYPE NORMALIZE STRIDE OFFSET

[generic-function] COMPILE-SHADER-SOURCE OBJ GLENUM-TYPE SOURCE

[generic-function] COMPILE-WEBGL-PROGRAM OBJ VERTEX-SHADER FRAGMENT-SHADER

[class] CLOG-WEBGL-UNIFORM CLOG-OBJ

CLOG-WebGL-Active-Info - Class for CLOG WebGL Active Info objects

[class] CLOG-WEBGL-ACTIVE-INFO CLOG-OBJ

[generic-function] INFO-NAME CLOG-WEBGL-ACTIVE-INFO

Active Info Name

[generic-function] INFO-SIZE CLOG-WEBGL-ACTIVE-INFO

Active Info Size

[generic-function] INFO-TYPE CLOG-WEBGL-ACTIVE-INFO

Active Info Type

CLOG-WebGL-Shader - Class for CLOG WebGL-Shader objects

[class] CLOG-WEBGL-SHADER CLOG-OBJ

[generic-function] CREATE-SHADER CLOG-WEBGL GLENUM-TYPE

Create a clog-webgl-shader for type :GLENUM. See https://github.com/KhronosGroup/WebGL/blob/main/specs/latest/2.0/webgl2.idl For :GLENUM values

[generic-function] IS-SHADER CLOG-WEBGL-SHADER

Return true if is valid

[generic-function] SHADER-SOURCE CLOG-WEBGL-SHADER SOURCE

Sets shader source code

[generic-function] SHADER-PARAMETER CLOG-WEBGL-SHADER GLENUM-PARAM

Returns information about the given shader. :DELETE_STATUS Returns a GLboolean indicating whether or not the shader is flagged for deletion.

:COMPILE_STATUS Returns a GLboolean indicating whether or not the last shader compilation was successful.

:SHADER_TYPE Returns a GLenum indicating whether the shader is a vertex shader (gl.VERTEX_SHADER) or fragment shader (gl.FRAGMENT_SHADER) object.

[generic-function] SHADER-INFO-LOG CLOG-WEBGL-SHADER

It contains warnings, debugging and compile information.

[generic-function] COMPILE-SHADER OBJ

[generic-function] DELETE-SHADER OBJ

CLOG-WebGL-Program - Class for CLOG WebGL-Program objects

[class] CLOG-WEBGL-PROGRAM CLOG-OBJ

[generic-function] CREATE-PROGRAM CLOG-WEBGL

Create a clog-webgl-program

[generic-function] IS-PROGRAM CLOG-WEBGL-PROGRAM

Return true if is valid

[generic-function] ATTACH-SHADER CLOG-WEBGL-PROGRAM CLOG-WEBGL-SHADER

Attaches either a fragment or vertex CLOG-WEBGL-SHADER

[generic-function] DETACH-SHADER CLOG-WEBGL-PROGRAM CLOG-WEBGL-SHADER

Detaches a CLOG-WEBGL-SHADER

[generic-function] BIND-ATTRIBUTE-LOCATION CLOG-WEBGL-PROGRAM INDEX NAME

Binds a generic vertex INDEX to an attribute variable called NAME.

[generic-function] PROGRAM-PARAMETER CLOG-WEBGL-PROGRAM GLENUM-PARAM

Information about the given program. :DELETE_STATUS Returns a GLboolean indicating whether or not the program is flagged for deletion.

:LINK_STATUS Returns a GLboolean indicating whether or not the last link operation was successful.

:VALIDATE_STATUS Returns a GLboolean indicating whether or not the last validation operation was successful.

:ATTACHED_SHADERS Returns a GLint indicating the number of attached shaders to a program.

:ACTIVE_ATTRIBUTES Returns a GLint indicating the number of active attribute variables to a program.

:ACTIVE_UNIFORMS Returns a GLint indicating the number of active uniform variables to a program.

When using a WebGL 2 context, the following values are available additionally:

:TRANSFORM_FEEDBACK_BUFFER_MODE Returns a GLenum indicating the buffer mode when transform feedback is active. May be :SEPARATE_ATTRIBS or :INTERLEAVED_ATTRIBS.

:TRANSFORM_FEEDBACK_VARYINGS Returns a GLint indicating the number of varying variables to capture in transform feedback mode.

:ACTIVE_UNIFORM_BLOCKS Returns a GLint indicating the number of uniform blocks containing active uniforms.

[generic-function] ATTRIBUTE-LOCATION CLOG-WEBGL-PROGRAM NAME

Returns the location of an attribute variable in clog-webgl-program

[generic-function] UNIFORM-LOCATION CLOG-WEBGL-PROGRAM NAME

Returns the location of an uniform variable in clog-webgl-program

[generic-function] ACTIVE-ATTRIBUTE CLOG-WEBGL-PROGRAM INDEX

Query about unknown attributes

[generic-function] ACTIVE-UNIFORM CLOG-WEBGL-PROGRAM INDEX

Query about unknown uniforms

[generic-function] UNIFORM CLOG-WEBGL-PROGRAM LOCATION

Returns the value of uniform at LOCATION in clog-webgl-program

[generic-function] PROGRAM-INFO-LOG CLOG-WEBGL-PROGRAM

Contains errors that occurred during failed linking or validation of WebGLProgram objects.

[generic-function] LINK-PROGRAM OBJ

[generic-function] USE-PROGRAM OBJ

[generic-function] DELETE-PROGRAM OBJ

CLOG-WebGL-Buffer - Class for CLOG WebGL-Buffer objects

[class] CLOG-WEBGL-BUFFER CLOG-OBJ

[generic-function] CREATE-WEBGL-BUFFER CLOG-WEBGL &KEY BIND-TYPE

Create a clog-webgl-buffer. If BIND-TYPE is set binds the buffer to either :ARRAY_BUFFER or :ELEMENT_ARRAY_BUFFER in WebGL2 the following added: :COPY_READ_BUFFER : Buffer for copying from one buffer object to another. :COPY_WRITE_BUFFER : Buffer for copying from one buffer object to another. :TRANSFORM_FEEDBACK_BUFFER : Buffer for transform feedback operations. :UNIFORM_BUFFER : Buffer used for storing uniform blocks. :PIXEL_PACK_BUFFER : Buffer used for pixel transfer operations. :PIXEL_UNPACK_BUFFER : Buffer used for pixel transfer operations.

[generic-function] IS-BUFFER CLOG-WEBGL-BUFFER

Return true if is valid

[generic-function] BIND-BUFFER CLOG-WEBGL-BUFFER GLENUM-TARGET

Set BIND-TYPE of buffer to either :ARRAY_BUFFER or :ELEMENT_ARRAY_BUFFER. WebGL2 adds: :COPY_READ_BUFFER : Buffer for copying from one buffer object to another. :COPY_WRITE_BUFFER : Buffer for copying from one buffer object to another. :TRANSFORM_FEEDBACK_BUFFER : Buffer for transform feedback operations. :UNIFORM_BUFFER : Buffer used for storing uniform blocks. :PIXEL_PACK_BUFFER : Buffer used for pixel transfer operations. :PIXEL_UNPACK_BUFFER : Buffer used for pixel transfer operations.

[generic-function] BUFFER-DATA CLOG-WEBGL-BUFFER DATA-LIST DATA-TYPE GLENUM-USAGE

Initializes and creates the buffer object's data store. DATA-LIST is a Lisp list of data elements. DATA-TYPE is the WebGL data type as a string "Float32Array" GLENUM-USAGE us a usage hint like :STATIC_DRAW

[generic-function] BUFFER-SUB-DATA CLOG-WEBGL-BUFFER OFFSET DATA-LIST DATA-TYPE

Initializes and creates the buffer object's data store. OFFSET element index offset where to start reading the buffer. DATA-LIST is a Lisp list of data elements. DATA-TYPE is the WebGL data type as a string "Float32Array"

[generic-function] DELETE-BUFFER OBJ

CLOG-WebGL-Vertex-Array - Class for CLOG WebGL-Vertex-Array objects

[class] CLOG-WEBGL-VERTEX-ARRAY CLOG-OBJ

[generic-function] CREATE-VERTEX-ARRAY CLOG-WEBGL

Create a clog-webgl-vertex-array

[generic-function] BIND-VERTEX-ARRAY OBJ

[generic-function] DELETE-VERTEX-ARRAY OBJ

CLOG-WebGL-Frame-Buffer - Class for CLOG WebGL-Frame-Buffer objects

[class] CLOG-WEBGL-FRAME-BUFFER CLOG-OBJ

[generic-function] CREATE-WEBGL-FRAME-BUFFER CLOG-WEBGL &KEY BIND-TYPE

Create a clog-webgl-frame-buffer. If BIND-TYPE is set binds the frame-buffer to :FRAMEBUFFER in WebGL2 the following are added: :DRAW_FRAMEBUFFER : Used as a destination for drawing operations such as draw, clear and blit-frame-buffer. :READ_FRAMEBUFFER : Used as a source for reading operations such as readPixels and blit-frame-buffer.

[generic-function] IS-FRAME-BUFFER CLOG-WEBGL-FRAME-BUFFER

Return true if is valid

[generic-function] BIND-FRAME-BUFFER CLOG-WEBGL-FRAME-BUFFER GLENUM-TARGET

Set BIND-TYPE of frame-buffer to :FRAMEBUFFER in WebGL2 the following are added: :DRAW_FRAMEBUFFER : Used as a destination for drawing operations such as draw, clear and blit-frame-buffer. :READ_FRAMEBUFFER : Used as a source for reading operations such as readPixels and blit-frame-buffer

[generic-function] DELETE-FRAME-BUFFER OBJ

CLOG-WebGL-Render-Buffer - Class for CLOG WebGL-Render-Buffer objects

[class] CLOG-WEBGL-RENDER-BUFFER CLOG-OBJ

[generic-function] CREATE-WEBGL-RENDER-BUFFER CLOG-WEBGL &KEY BIND-TYPE

Create a clog-webgl-render-buffer. If BIND-TYPE is set binds the render-buffer to :RENDERBUFFER

[generic-function] IS-RENDER-BUFFER CLOG-WEBGL-RENDER-BUFFER

Return true if is valid

[generic-function] BIND-RENDER-BUFFER CLOG-WEBGL-RENDER-BUFFER GLENUM-TARGET

Set BIND-TYPE of render-buffer to :RENDERBUFFER

[generic-function] DELETE-RENDER-BUFFER OBJ

CLOG-WebGL-Texture - Class for CLOG WebGL-Texture objects

[class] CLOG-WEBGL-TEXTURE CLOG-OBJ

[generic-function] CREATE-WEBGL-TEXTURE CLOG-WEBGL &KEY BIND-TYPE

Create a clog-webgl-texture. If BIND-TYPE is set binds the texture to: :TEXTURE_2D : A two-dimensional texture. :TEXTURE_CUBE_MAP : A cube-mapped texture. in WebGL 2 also: :TEXTURE_3D : A three-dimensional texture. :TEXTURE_2D_ARRAY : A two-dimensional array texture.

[generic-function] IS-TEXTURE CLOG-WEBGL-TEXTURE

Return true if is valid

[generic-function] BIND-TEXTURE CLOG-WEBGL-TEXTURE GLENUM-TARGET

Set BIND-TYPE of texture to: :TEXTURE_2D : A two-dimensional texture. :TEXTURE_CUBE_MAP : A cube-mapped texture. in WebGL 2 also: :TEXTURE_3D : A three-dimensional texture. :TEXTURE_2D_ARRAY : A two-dimensional array texture.

[generic-function] DELETE-TEXTURE OBJ

← ↑ → ↺

17 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

← ↑ → ↺

18 CLOG Auth Objects

[in package CLOG-AUTH]

CLOG-AUTH - Authentication

[function] GET-AUTHENTICATION-TOKEN BODY &KEY AUTH-PATH

Retrieve the stored authentication token

[function] STORE-AUTHENTICATION-TOKEN BODY TOKEN

[function] REMOVE-AUTHENTICATION-TOKEN BODY

[function] SET-ON-AUTHENTICATION-CHANGE BODY HANDLER

CLOG-AUTH - Authorization

[function] ADD-AUTHORIZATION ROLE-LIST ACTION-LIST

Add to each role in ROLE-LIST every action in ACTION-LIST

[function] IS-AUTHORIZED-P ROLE-LIST ACTION

Given ROLE-LIST is action authorized. If action is nil returns t.

← ↑ → ↺

19 CLOG GUI Objects

[in package CLOG-GUI]

CLOG-GUI - Desktop GUI abstraction for CLOG

[function] CLOG-GUI-INITIALIZE CLOG-BODY &KEY (BODY-LEFT-OFFSET 0) (BODY-RIGHT-OFFSET 0) (USE-CLOG-DEBUGGER NIL) (STANDARD-OUTPUT NIL) (PARENT-DESKTOP-OBJ NIL) (W3-CSS-URL "/css/w3.css") (JQUERY-UI-CSS "/css/jquery-ui.css") (JQUERY-UI "/js/jquery-ui.js")

Initializes clog-gui and installs a clog-gui object on connection. If W3-CSS-URL has not been loaded before is installed unless is nil. BODY-LEFT-OFFSET and BODY-RIGHT-OFFSET limit width on maximize. If use-clog-debugger then a graphical debugger is set for all events. parent-desktop-obj is used if this window is a popup or otherwise a slave of another clog-gui page. NOTE: use-clog-debugger should not be set for security issues on non-secure environments.

CLOG-GUI - Menus

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

Menu bar

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

Attached a menu bar to a CLOG-OBJ in general a clog-body. If main-menu add as main menu bar.

[class] CLOG-GUI-MENU-DROP-DOWN CLOG-DIV

Drop down menu

[generic-function] CREATE-GUI-MENU-DROP-DOWN CLOG-GUI-MENU-BAR &KEY CONTENT CLASS HTML-ID

Attached a menu bar drop-down to a CLOG-GUI-MENU-BAR

[class] CLOG-GUI-MENU-ITEM CLOG-SPAN

Menu item

[generic-function] CREATE-GUI-MENU-ITEM CLOG-GUI-MENU-DROP-DOWN &KEY CONTENT ON-CLICK CLASS HTML-ID

Attached a menu item to a CLOG-GUI-MENU-DROP-DOWN

[generic-function] CREATE-GUI-MENU-WINDOW-SELECT CLOG-OBJ &KEY CLASS CONTENT HTML-ID

Attaches a clog-select as a menu item that auto updates with open windows and focuses them unless is a keep-on-top window. The first menu-window-select will receive change window notices only.

[generic-function] CREATE-GUI-MENU-FULL-SCREEN CLOG-GUI-MENU-BAR &KEY HTML-ID

Add as last item in menu bar to allow for a full screen icon ⤢ (menu-full-screen-item default) and full screen mode.

[generic-function] CREATE-GUI-MENU-ICON CLOG-GUI-MENU-BAR &KEY IMAGE-URL ON-CLICK CLASS HTML-ID

Add icon as menu bar item.

CLOG-GUI - Window System

[generic-function] CURRENT-WINDOW CLOG-OBJ

Get the current selected clog-gui-window

[generic-function] MENU-BAR CLOG-OBJ

Get/setf window menu-bar. This is set buy create-gui-menu-bar.

[generic-function] MENU-BAR-HEIGHT CLOG-OBJ

Get menu-bar height

[generic-function] WINDOW-COLLECTION CLOG-OBJ

Get hash table of open windows

[generic-function] WINDOW-TO-TOP-BY-TITLE CLOG-OBJ TITLE

Bring window with TITLE to top and return window or nil if not found

[generic-function] WINDOW-TO-TOP-BY-PARAM CLOG-OBJ PARAM

Bring window with PARAM to top and return window or nil if not found

[generic-function] WINDOW-BY-TITLE CLOG-OBJ TITLE

Bring window with TITLE to top and return window or nil if not found

[generic-function] WINDOW-BY-PARAM CLOG-OBJ PARAM

Bring window with PARAM to top and return window or nil if not found

[generic-function] REORIENT-ALL-WINDOWS CLOG-OBJ

Reorient all windows. Remaximized any maximize windows and leave any normalized windows as normalized. This is called by default in on-resize, on-full-screen-change and on-orientation-change events.

[generic-function] MAXIMIZE-ALL-WINDOWS CLOG-OBJ

Maximize all windows

[generic-function] NORMALIZE-ALL-WINDOWS CLOG-OBJ

Normalize all windows

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

Set the on-window-change HANDLER. The on-window-change clog-obj received is the new window

CLOG-GUI - Individual Windows

[class] CLOG-GUI-WINDOW CLOG-ELEMENT

[generic-function] CREATE-GUI-WINDOW CLOG-OBJ &KEY TITLE CONTENT LEFT TOP WIDTH HEIGHT MAXIMIZE HAS-PINNER KEEP-ON-TOP WINDOW-PARAM HIDDEN CLIENT-MOVEMENT BORDER-CLASS TITLE-CLASS HTML-ID

Create a clog-gui-window. If client-movement is t then use jquery-ui to move/resize and will not work on mobile and touch events are limitted to clicks. When client-movement is t only on-window-move is fired once at start of drag and on-window-move-done at end of drag and on-window-resize at start of resize and on-window-resize-done at end of resize. If has-pinner a toggle will appear on title bar to allow pinning the window in place, if keep-on-top t then when pinned also will keep-on-top. If had-pinned is nil and keep-on-top t then the window will be set to keep-on-top always. window-param is a general parameter for identifiying the window to use with window-to-top-by-param or window-by-param.

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

Get/setf window title

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

Get/setf window param

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

Get window content element.

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

Set CLOG-GUI-WINDOW as focused window.

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

Close CLOG-GUI-WINDOW. on-window-can-close is not called. CLOG-GUI-WINDOW is removed from DOM but still present in the CLOG cache on the browser.

[function] WINDOW-VALID-P OBJ

Returns t if is a valid clog-gui-window. An invalid state can occur when a popup slave desktop is closed by the OS or the window has been previously closed. If the obj exists in the internal hash of windows it is removed.

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

Set CLOG-GUI-WINDOW as maximized window.

[generic-function] WINDOW-MAXIMIZE CLOG-GUI-WINDOW &KEY FOCUS

Set CLOG-GUI-WINDOW as maximized window and :focus (default t).

[generic-function] WINDOW-NORMALIZE CLOG-GUI-WINDOW &KEY FOCUS

Set CLOG-GUI-WINDOW as normalized window an :focus (default t).

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

Toggle CLOG-GUI-WINDOW as maximize window.

[generic-function] WINDOW-TOGGLE-PINNED CLOG-GUI-WINDOW &KEY STATE KEEP-ON-TOP

Toggle the pinned state of a CLOG-GUI-WINDOW. A pinned window cannot be moved, closed, resized, maximized or normalized. A new window is always unpinned. If keep-on-top the keep-on-top state is toggled to match the pinned state. :state forces state. Returns new state

[generic-function] WINDOW-KEEP-ON-TOP CLOG-GUI-WINDOW &KEY STATE

Set CLOG-GUI-WINDOW to stay on top based on state (default t).

[generic-function] WINDOW-MAKE-MODAL CLOG-GUI-WINDOW

Set CLOG-GUI-WINDOW to stay on top and prevent all other interactions. Use window-end-modal to undo.

[generic-function] WINDOW-END-MODAL CLOG-GUI-WINDOW

Set CLOG-GUI-WINDOW to end modal state.

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

Center CLOG-GUI-WINDOW in browser.

CLOG-GUI - Individual Window Events

[generic-function] SET-ON-WINDOW-FOCUS CLOG-GUI-WINDOW HANDLER

Set the on-window-focus HANDLER

[generic-function] SET-ON-WINDOW-BLUR CLOG-GUI-WINDOW HANDLER

Set the on-window-blur HANDLER

[generic-function] SET-ON-WINDOW-CAN-CLOSE CLOG-GUI-WINDOW HANDLER

Set the on-window-can-close HANDLER

[generic-function] SET-ON-WINDOW-CLOSE CLOG-GUI-WINDOW HANDLER

Set the on-window-close HANDLER

[generic-function] SET-ON-WINDOW-CAN-MAXIMIZE CLOG-GUI-WINDOW HANDLER

Set the on-window-can-maximize HANDLER

[generic-function] SET-ON-WINDOW-CAN-NORMALIZE CLOG-GUI-WINDOW HANDLER

Set the on-window-can-normalize HANDLER

[generic-function] SET-ON-WINDOW-CAN-MOVE CLOG-GUI-WINDOW HANDLER

Set the on-window-can-move HANDLER

[generic-function] SET-ON-WINDOW-CAN-SIZE CLOG-GUI-WINDOW HANDLER

Set the on-window-can-size HANDLER

[generic-function] SET-ON-WINDOW-MOVE CLOG-GUI-WINDOW HANDLER

Set the on-window-move HANDLER

[generic-function] SET-ON-WINDOW-SIZE CLOG-GUI-WINDOW HANDLER

Set the on-window-size HANDLER

[generic-function] SET-ON-WINDOW-MOVE-DONE CLOG-GUI-WINDOW HANDLER

Set the on-window-move-done HANDLER.

[generic-function] SET-ON-WINDOW-SIZE-DONE CLOG-GUI-WINDOW HANDLER

Set the on-window-size-done HANDLER

CLOG-GUI - Dialog Boxes

[function] ALERT-TOAST OBJ TITLE CONTENT &KEY (COLOR-CLASS "w3-red") (TIME-OUT NIL) (PLACE-TOP NIL) (HTML-ID NIL)

Create an alert toast with option :TIME-OUT. If place-top is t then alert is placed in DOM at top of html body instead of bottom of html body. Note, when time-out alert-toast blocks and the toast is displayed for time-out or until user closes the toast.

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

Create an alert dialog box with CONTENT centered. If time-out alert-dialog blocks till time-out reached or OK clicked.

[function] INPUT-DIALOG OBJ CONTENT ON-INPUT &KEY (MODAL T) (TIME-OUT NIL) (TITLE "Input") (SIZE 20) (ROWS 1) (PLACEHOLDER-VALUE "") (DEFAULT-VALUE "") (LEFT NIL) (TOP NIL) (WIDTH 300) (HEIGHT 200) (CLIENT-MOVEMENT NIL) (HTML-ID NIL)

Create an input dialog box with CONTENT centered and an input box. Calls on-input with input box contents or nil if canceled. If time-out block time-out seconds for responce or cancels dialog box then returns result of on-input.

[function] CONFIRM-DIALOG OBJ CONTENT ON-INPUT &KEY (MODAL T) (TITLE "Confirm") (OK-TEXT "OK") (CANCEL-TEXT "Cancel") (TIME-OUT NIL) (LEFT NIL) (TOP NIL) (WIDTH 300) (HEIGHT 200) (CLIENT-MOVEMENT NIL) (HTML-ID NIL)

Create a confirmation dialog box with CONTENT centered. Calls on-input with t if confirmed or nil if canceled.

[function] FORM-DIALOG OBJ CONTENT FIELDS ON-INPUT &KEY (MODAL T) (TITLE "Form") (OK-TEXT "OK") (CANCEL-TEXT "Cancel") (TIME-OUT NIL) (LEFT NIL) (TOP NIL) (WIDTH 400) (HEIGHT 500) (SIZE 40) (ROWS 4) (CLIENT-MOVEMENT NIL) (HTML-ID NIL)

Create a form dialog box with CONTENT followed by FIELDS. FIELDS is a list of lists each list has:
```
(1) Field description  - Used for label
(2) Field name         - Used for (name attribute)
(3) Field type         - Optional (defaults to :text)
(4) Field type options - Optional
```
Special field types

Field Type Field Type Options ============= ================== :filename default dir -- NOTE: This is server side! :checkbox t if checked :radiobox a-list ((label name)) a third value can be added "checked" :select a-list ((label name)) a third value can be added "selected" :textarea value :text value (any text input types also work :email, :tel, etc. see FORM-ELEMENT-TYPE)

The size of any texarea field is controled by the size and rows parameters

Calls on-input after OK or Cancel with an a-list of field name to value if confirmed or nil if canceled. If time-out is set the result of on-input returned after either ok or cancel or time elapses.

[function] SERVER-FILE-DIALOG OBJ TITLE INITIAL-DIR ON-FILE-NAME &KEY (MODAL T) (TIME-OUT NIL) (LEFT NIL) (TOP NIL) (WIDTH 390) (HEIGHT 425) (MAXIMIZE NIL) (INITIAL-FILENAME NIL) (CLIENT-MOVEMENT NIL) (HTML-ID NIL)

Create a local file dialog box called TITLE using INITIAL-DIR on server machine, upon close ON-FILE-NAME called with filename or nil if failure. If time-out return result of on-file-name, cancels dialog if time runs out.

CLOG-GUI - Debugger

[macro] WITH-CLOG-DEBUGGER (CLOG-OBJ &KEY TITLE STANDARD-OUTPUT) &BODY BODY

body uses a clog-gui based debugger instead of the console

[function] ONE-OF-DIALOG OBJ INTRO CHOICES &KEY (TITLE "Please choose one") (PROMPT "Choice")

Prompt a dialog box with TITLE and INTRO using list of CHOICES and PROMPT

[class] DIALOG-IN-STREAM TRIVIAL-GRAY-STREAMS:FUNDAMENTAL-CHARACTER-INPUT-STREAM

dialog-in-stream and dialog-out-stream can be combined with make-two-way-stream to provide a query-io using a clog-gui instead of console)

[class] DIALOG-OUT-STREAM TRIVIAL-GRAY-STREAMS:FUNDAMENTAL-CHARACTER-OUTPUT-STREAM

dialog-in-stream and dialog-out-stream can be combined with make-two-way-stream to provide a query-io using a clog-gui instead of console)

CLOG-GUI - Look and Feel

[variable] *MENU-BAR-CLASS* "w3-bar w3-black w3-card-4"

[variable] *MENU-BAR-DROP-DOWN-CLASS* "w3-dropdown-content w3-bar-block w3-card-4"

[variable] *MENU-ITEM-CLASS* "w3-bar-item w3-button"

[variable] *MENU-WINDOW-SELECT-CLASS* "w3-bar-item w3-button"

[variable] *MENU-FULL-SCREEN-ITEM* "⤢"

[variable] *MENU-ICON-IMAGE-CLASS* "w3-button w3-bar-item"

[variable] *TOP-BAR-HEIGHT* 20

Overlap on new windows created with top set as nil

[variable] *DEFAULT-TITLE-CLASS* "w3-black"

Window title bar class

[variable] *DEFAULT-BORDER-CLASS* "w3-card-4 w3-white w3-border"

Window frame border

← ↑ → ↺

20 CLOG Web Objects

[in package CLOG-WEB]

CLOG-WEB - Web page abstraction for CLOG

[function] CLOG-WEB-INITIALIZE CLOG-BODY &KEY (W3-CSS-URL "/css/w3.css")

Initializes clog-web and installs a clog-web object on connection. If W3-CSS-URL has not been loaded before is installed unless is nil.

[function] SET-MAXIMUM-PAGE-WIDTH-IN-PIXELS CLOG-BODY WIDTH

The default width is 980 pixels.

CLOG-WEB - General Containers

[class] CLOG-WEB-PANEL CLOG-DIV

Panel for web content

[generic-function] CREATE-WEB-PANEL CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

Create a clog-web-panel. General container with 16px left and right padding and 16x top and bottom margin. If hidden is t then then the visiblep propetery will be set to nil on creation.

[class] CLOG-WEB-CONTENT CLOG-DIV

Content for web content

[generic-function] CREATE-WEB-CONTENT CLOG-OBJ &KEY CONTENT MAXIMUM-WIDTH HIDDEN CLASS HTML-ID

Create a clog-web-content. General container with 16px left and right padding. If hidden is t then then the visiblep propetery will be set to nil on creation.

[class] CLOG-WEB-CODE CLOG-DIV

Code for web code

[generic-function] CREATE-WEB-CODE CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

Create a clog-web-code. Code content container. If hidden is t then then the visiblep propetery will be set to nil on creation.

[class] CLOG-WEB-MAIN CLOG-DIV

Main for web content

[generic-function] CREATE-WEB-MAIN CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

Create a clog-web-main. Container for main content when using a collapsable sidebar or other whole page shifting technique. If hidden is t then then the visiblep propetery will be set to nil on creation.

[class] CLOG-WEB-SIDEBAR CLOG-DIV

Sidebar for web content

[generic-function] CREATE-WEB-SIDEBAR CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

Create a clog-web-sidebar. Container for sidebar content. sidebars are create with the display property set to :none if hidden it t and :block if nil. In general the visiblep property is used in clog, however in clog-web-sidebar the block property is needed to activate its animations if used. If using a sidebar that will take space and not collapse, make sure to set the sidebar's size and set a margin equal to the size on the main container.

[class] CLOG-WEB-SIDEBAR-ITEM CLOG-BUTTON

Sidebar-Item for web content

[generic-function] CREATE-WEB-SIDEBAR-ITEM CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

Create a clog-web-sidebar-item. A sidebar menu bar item. If hidden is t then then the visiblep propetery will be set to nil on creation.

[class] CLOG-WEB-SIDEBAR-ITEM CLOG-BUTTON

Sidebar-Item for web content

[generic-function] CREATE-WEB-SIDEBAR-ITEM CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

Create a clog-web-sidebar-item. A sidebar menu bar item. If hidden is t then then the visiblep propetery will be set to nil on creation.

[class] CLOG-WEB-COMPOSITOR CLOG-DIV

Compositor for compositing layers of web content

[generic-function] CREATE-WEB-COMPOSITOR CLOG-OBJ &KEY CONTENT HIDDEN CLASS HTML-ID

Create a clog-web-compositor. Allows compositing of content on top of other content. Content is added as children and then composit-location is called on the object of that content. If hidden is t then then the visiblep propetery will be set to nil on creation.

[type] WEB-PADDING-CLASS-TYPE

[generic-function] COMPOSITE-ON-HOVER CLOG-ELEMENT

Composite CLOG-ELEMENT on on-hover.

[generic-function] COMPOSITE-POSITION CLOG-ELEMENT &KEY TOP LEFT PADDING-CLASS

Composite CLOG-ELEMENT to coordinate top left.

[generic-function] COMPOSITE-TOP-MIDDLE CLOG-ELEMENT &KEY PADDING-CLASS

Composite CLOG-ELEMENT on top-middle.

[generic-function] COMPOSITE-TOP-LEFT CLOG-ELEMENT &KEY PADDING-CLASS

Composite CLOG-ELEMENT on top-left.

[generic-function] COMPOSITE-TOP-RIGHT CLOG-ELEMENT &KEY PADDING-CLASS

Composite CLOG-ELEMENT on top-right.

[generic-function] COMPOSITE-BOTTOM-MIDDLE CLOG-ELEMENT &KEY PADDING-CLASS

Composite CLOG-ELEMENT on bottom-middle.

[generic-function] COMPOSITE-BOTTOM-LEFT CLOG-ELEMENT &KEY PADDING-CLASS

Composite CLOG-ELEMENT on bottom-left.

[generic-function] COMPOSITE-BOTTOM-RIGHT CLOG-ELEMENT &KEY PADDING-CLASS

Composite CLOG-ELEMENT on bottom-right.

[generic-function] COMPOSITE-MIDDLE CLOG-ELEMENT &KEY PADDING-CLASS

Composite CLOG-ELEMENT on middle.

[generic-function] COMPOSITE-LEFT CLOG-ELEMENT &KEY PADDING-CLASS

Composite CLOG-ELEMENT on left.

[generic-function] COMPOSITE-RIGHT CLOG-ELEMENT &KEY PADDING-CLASS

Composite CLOG-ELEMENT on right.

CLOG-WEB - Auto Layout System

[class] CLOG-WEB-AUTO-ROW CLOG-DIV

Content for web content

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

Create a clog-web-auto-row. Container for auto-columns If hidden is t then then the visiblep propetery will be set to nil on creation.

[class] CLOG-WEB-AUTO-COLUMN CLOG-DIV

Content for web content

[generic-function] CREATE-WEB-AUTO-COLUMN CLOG-OBJ &KEY CONTENT VERTICAL-ALIGN HIDDEN CLASS HTML-ID

Create a clog-web-auto-column. Container for auto-columns If hidden is t then then the visiblep propetery will be set to nil on creation.

CLOG-WEB - 12 Column Grid Layout System

[class] CLOG-WEB-ROW CLOG-DIV

Row to contain columns of web content in 12 column grid

[generic-function] CREATE-WEB-ROW CLOG-OBJ &KEY PADDING HIDDEN CLASS HTML-ID

Create a clog-web-row. If padding is true 8px left and right padding is addded. If hidden is t then then the visiblep propetery will be set to nil on creation.

[class] CLOG-WEB-CONTAINER CLOG-DIV

Container cells for web content in 12 column grid

[generic-function] CREATE-WEB-CONTAINER CLOG-OBJ &KEY CONTENT COLUMN-SIZE HIDDEN CLASS HTML-ID

Create a clog-web-container. COLUMN-SIZE can be of type container-size-type when to set size displayed on medium and large screens or can use a string of "s1-12 m1-12 l1-12" s m or l followed by how many columns this container uses on small, medium or large screens. Small screens are always displayed full row. Total columns must add to 12 or one needs to be of type :w3-rest to fill space. If hidden is t then then the visiblep propetery will be set to nil on creation.

CLOG-WEB - Look and Feel

[generic-function] ADD-CARD-LOOK CLOG-ELEMENT

Change clog-element to use 2px card look

[generic-function] ADD-HARD-CARD-LOOK CLOG-ELEMENT

Change clog-element to use 4px card look

CLOG-WEB - Mobile

[generic-function] FULL-ROW-ON-MOBILE CLOG-ELEMENT

Change element to display:block, take up the full row, when screen size smaller then 601 pixels DP

[generic-function] HIDE-ON-SMALL-SCREENS CLOG-ELEMENT

Hide element on screens smaller then 601 pixels DP

[generic-function] HIDE-ON-MEDIUM-SCREENS CLOG-ELEMENT

Hide element on screens smaller then 993 pixels DP

[generic-function] HIDE-ON-LARGE-SCREENS CLOG-ELEMENT

Hide element on screens smaller then 993 pixels DP

CLOG-WEB - Menus

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

Menu bar

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

Attach a menu bar to a CLOG-OBJ generally a clog-body.

[generic-function] WEB-MENU-BAR CLOG-OBJ

Get/setf window web-menu-bar. This is set buy create-web-menu-bar.

[generic-function] WEB-MENU-BAR-HEIGHT CLOG-OBJ

Get web-menu-bar height

[class] CLOG-WEB-MENU-DROP-DOWN CLOG-DIV

Drop down menu

[generic-function] CREATE-WEB-MENU-DROP-DOWN CLOG-WEB-MENU-BAR &KEY CONTENT CLASS HTML-ID

Attached a menu bar drop-down to a CLOG-WEB-MENU-BAR

[class] CLOG-WEB-MENU-ITEM CLOG-SPAN

Menu item

[generic-function] CREATE-WEB-MENU-ITEM CLOG-WEB-MENU-DROP-DOWN &KEY CONTENT LINK ON-CLICK CLASS HTML-ID

Attached a menu item to a CLOG-WEB-MENU-DROP-DOWN. Use to set a link or on-click to set an on-click handler

[generic-function] CREATE-WEB-MENU-FULL-SCREEN CLOG-WEB-MENU-BAR &KEY HTML-ID

Add as last item in menu bar to allow for a full screen icon ⤢ and full screen mode.

[generic-function] CREATE-WEB-MENU-ICON CLOG-WEB-MENU-BAR &KEY IMAGE-URL ON-CLICK CLASS HTML-ID

Add icon as menu bar item.

CLOG-WEB - Interactions

[function] CLOG-WEB-ALERT OBJ TITLE CONTENT &KEY (COLOR-CLASS "w3-red") (TIME-OUT NIL) (PLACE-TOP NIL) (HTML-ID NIL)

Create an alert toast with option :TIME-OUT. If place-top is t then alert is placed in DOM at top of OBJ instead of bottom of OBJ.

[function] CLOG-WEB-FORM OBJ CONTENT FIELDS ON-INPUT &KEY (MODAL NIL) (OK-TEXT "OK") (CANCEL-TEXT "Cancel") (BORDER-CLASS "w3-border") (TEXT-CLASS "w3-text-black") (COLOR-CLASS "w3-black") (HTML-ID NIL)

Create a form with CONTENT followed by FIELDS. FIELDS is a list of lists each list has:
```
(1) Field description  - Used for label
(2) Field name         - Used for (name attribute)
(3) Field type         - Optional (defaults to :text)
(4) Field type options - Optional
```
Special field types

Field Type Field Type Options ============= ================== :checkbox t if checked :radiobox a-list ((label name)) a third value can be added "checked" :select a-list ((label name)) a third value can be added "selected" :text value (any text input types also work :email, :tel, etc. see FORM-ELEMENT-TYPE)

Calls on-input after OK or Cancel with an a-list of field name to value if confirmed or nil if canceled. CANCEL-TEXT is only displayed if modal is t

If clog-web-site is being used the class class setting will be replaced with the value if set in the theme settings.

[function] FORM-RESULT RESULT KEY

Return the value for KEY from RESULT

CLOG-WEB - Websites

[class] CLOG-WEB-SITE

Website information

[generic-function] CREATE-WEB-SITE CLOG-OBJ &KEY SETTINGS PROFILE ROLES THEME URL TITLE FOOTER LOGO

Attach a clog-web-site to a CLOG-OBJ generally a clog-body.

[generic-function] GET-WEB-SITE CLOG-OBJ

Retrieve the clog-web-site object created on CLOG-OBJ's connection

[generic-function] CREATE-WEB-PAGE CLOG-OBJ PAGE PROPERTIES &KEY AUTHORIZE

Use the clog-web-site THEME to create PAGE with CLOG-OBJ as parent. PAGE is a symbol to identify the pages purpose to the website theme. Themes are required to provide certain default pages see clog-web-themes file. If AUTHORIZE then PAGE is used also as a CLOG-Auth action to be checked if the current users roles have permission to PAGE

CLOG-WEB-SITE - Accessors

[generic-function] THEME OBJECT

[generic-function] SETTINGS OBJECT

[generic-function] PROFILE OBJECT

[generic-function] ROLES OBJECT

[generic-function] URL CLOG-LOCATION

Get/Setf full url. Setting the URL causes navgation to URL.

[generic-function] TITLE CLOG-DOCUMENT

Get/setf title.

[generic-function] FOOTER OBJECT

[generic-function] LOGO OBJECT

CLOG-WEB - Utilities

[function] CLOG-WEB-ROUTES-FROM-MENU MENU

Use a menu to setup a route for each menu item that has a third element.

[function] CLOG-WEB-META DESCRIPTION

Returns a boot-function for use with CLOG:INITIALIZE to add meta and no-script body information for search engines with DESCRIPTION.

[function] BASE-URL-P BASE-URL URL-PATH

True if url-path is based on base-url

[function] ADJUST-FOR-BASE-URL BASE-URL URL-PATH

If url-path is not on base-url return base-url otherwise url-path

[function] BASE-URL-SPLIT BASE-URL URL-PATH

Split path by / adjusting for base-url

← ↑ → ↺

21 CLOG Web DBI

[in package CLOG-WEB-DBI]

Authentication

[function] LOGIN BODY SQL-CONNECTION USERNAME PASSWORD

Login and set current authentication token, it does not remove token if one is present and login fails.

[function] LOGOUT BODY

Logout and remove current authenitcation token

[function] GET-PROFILE OBJ SQL-CONNECTION

Retrieve profile based on current authentication token. If there is no token or fails to match as user returns nil

[function] SIGN-UP BODY SQL-CONNECTION &KEY (TITLE "Sign Up") (NEXT-STEP "/login")

Setup a sign-up form and process a new sign-up

[function] CHANGE-PASSWORD BODY SQL-CONNECTION &KEY (TITLE "Change Password") (NEXT-STEP "/")

Setup a change password form and handle change of password

[function] RESET-PASSWORD SQL-CONNECTION USERNAME &KEY (NEW-PASSWORD "password")

Reset USERNAME's password to :NEW-PASSWORD

[function] MAKE-TOKEN

Create a unique token used to associate a browser with a user

[function] LOAD-CONTENT SQL-CONNECTION TABLE KEY-VALUE &KEY (KEY-COL "key") WHERE ORDER-BY

Returns list of records found in TABLE where KEY-COL = KEY-VALUE and optional WHERE and ORDER-BY sql.

[function] CREATE-BASE-TABLES SQL-CONNECTION &KEY (SQL-TIMESTAMP-FUNC *SQLITE-TIMESTAMP*)

Create default tables

← ↑ → ↺

22 CLOG Web Site Themes

[in package CLOG-WEB]

Theme helpers

[function] GET-SETTING WEBSITE KEY DEFAULT

Return the setting for KEY or DEFAULT from website settings

[function] GET-PROPERTY PROPERTIES KEY DEFAULT

Return the property for KEY from the p-list PROPERTIES or DEFAULT

Built in themes

[function] DEFAULT-THEME BODY PAGE PROPERTIES

The default theme for clog-web-site. Settings available: :color-class - w3 color class for menu bars and buttons (def: w3-black) :border-class - w3 border (def: "") :text-class - w3 text color class (def: "") :signup-link - link to signup (def: /signup) :login-link - link to login (def: /login) :username-link - link when clicking on username (def: /logout) Page properties: :menu - (("Menu Name" (("Menu Item" "link")))) (def: nil) :content - (def: "")

← ↑ → ↺

23 CLOG Body Objects

CLOG-Body - CLOG Body Objects

[class] CLOG-BODY CLOG-ELEMENT

CLOG Body Object encapsulate the view in the window.

CLOG-Body - Properties

[generic-function] RUN CLOG-BODY

Keeps a connection thread alive to allow post user close of connection / browser.

[generic-function] SET-HTML-ON-CLOSE CLOG-BODY HTML

In case of connection loss to this CLOG-BODY, replace the browser contents with HTML.

[generic-function] WINDOW CLOG-BODY

Reader for CLOG-Window object

[generic-function] HTML-DOCUMENT CLOG-BODY

Reader for CLOG-Document object

[generic-function] LOCATION CLOG-BODY

Reader for CLOG-Location object

[generic-function] NAVIGATOR CLOG-BODY

Reader for CLOG-Navigator object

← ↑ → ↺

24 CLOG Window Objects

CLOG Popups

[variable] *CLOG-POPUP-PATH* "/clogwin"

Default URL for popup windows

[function] ENABLE-CLOG-POPUP &KEY (PATH *CLOG-POPUP-PATH*) (BOOT-FILE "/boot.html")

Enable handling of clog enabled popups

[generic-function] OPEN-CLOG-POPUP CLOG-OBJ &KEY PATH ADD-SYNC-TO-PATH SYNC-KEY NAME SPECS WAIT-TIMEOUT

Open a new browser window/popup in most cases a tab. Since they are controlled by clog you have full control of the new popups and are more flexible than using open-windo. Returns the clog-body and the clog-window in the same connnection as obj of the new window on the new connection or nil if failed within :WAIT-TIMEOUT

[generic-function] CLOG-POPUP-OPENNED CLOG-OBJ SYNC-KEY

Used to notify open-clog-popup the new popup window is ready used for custom clog-popup handlers.

[generic-function] IN-CLOG-POPUP-P CLOG-OBJ

Returns obj if clog-gui-window is a in a clog-popup window

CLOG-Window - CLOG Window Objects

[class] CLOG-WINDOW CLOG-OBJ

CLOG Window Objects encapsulate the window.

CLOG-Window - Properties

[generic-function] WINDOW-NAME CLOG-WINDOW

Get/Setf name for use by hyperlink "target" for this window.

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

Rewrite browser history and url with REWRITE-URL no redirection of browser takes place. REWRITE-URL must be same domain.

[generic-function] INNER-HEIGHT CLOG-WINDOW

Get/Setf inner height of browser window.

[generic-function] INNER-WIDTH CLOG-WINDOW

Get/Setf inner width of browser window.

[generic-function] OUTER-HEIGHT CLOG-WINDOW

Get/Setf outer height of browser window.

[generic-function] OUTER-WIDTH CLOG-WINDOW

Get/Setf outer width of browser window.

[generic-function] X-OFFSET CLOG-WINDOW

Get/Setf browser window x offset from left edge.

[generic-function] Y-OFFSET CLOG-WINDOW

Get/Setf browser window y offset from top edge.

[generic-function] LEFT CLOG-WINDOW

Get/Setf browser x position.

[generic-function] TOP CLOG-WINDOW

Get/Setf browser y postion.

[generic-function] PIXEL-RATIO CLOG-WINDOW

Get device pixel ratio.

[generic-function] SCREEN-WIDTH CLOG-WINDOW

Get screen width.

[generic-function] SCREEN-HEIGHT CLOG-WINDOW

Get screen height.

[generic-function] SCREEN-AVAILABLE-WIDTH CLOG-WINDOW

Get available screen width.

[generic-function] SCREEN-AVAILABLE-HEIGHT CLOG-WINDOW

Get available screen height.

[generic-function] SCREEN-AVAILABLE-TOP CLOG-WINDOW

Get available screen top.

[generic-function] SCREEN-AVAILABLE-LEFT CLOG-WINDOW

Get available screen left.

[generic-function] SCREEN-COLOR-DEPTH CLOG-WINDOW

Get screen color depth.

CLOG-Window - Methods

[generic-function] ALERT CLOG-WINDOW MESSAGE

Launch an alert box. Note that as long as not dismissed events and messages may not be trasmitted on most browsers.

[generic-function] LOG-CONSOLE CLOG-WINDOW MESSAGE

Print message to browser console.

[generic-function] LOG-ERROR CLOG-WINDOW MESSAGE

Print error message to browser console.

[generic-function] PRINT-WINDOW CLOG-WINDOW

Send browser window to printer.

[generic-function] SCROLL-BY CLOG-WINDOW X Y

Scroll browser window by x y.

[generic-function] SCROLL-TO CLOG-WINDOW X Y

Scroll browser window to x y.

[generic-function] OPEN-WINDOW CLOG-WINDOW URL &KEY NAME SPECS

This will launch a new window of current browser where CLOG-WINDOW is displayed (remote or local) and returns a new clog-window. In modern browsers it is very limitted to just open a new tab with url unless is a localhost url.

[generic-function] CLOSE-WINDOW CLOG-WINDOW

Close browser window.

[generic-function] CLOSE-CONNECTION CLOG-WINDOW

Close connection to browser with out closing browser.

[generic-function] REQUEST-ANIMATION-FRAME CLOG-WINDOW

Requests the browser to send an on-animation-frame on the next screen redraw. This event only fires one time per request. The data parementer of the event function contains the time stamp to the millisecond.

CLOG-Window - Events

[generic-function] SET-ON-ABORT CLOG-WINDOW ON-ABORT-HANDLER

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

[generic-function] SET-ON-ERROR CLOG-WINDOW ON-ERROR-HANDLER

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

[generic-function] SET-ON-BEFORE-UNLOAD CLOG-WINDOW ON-BEFORE-UNLOAD-HANDLER

Set the ON-BEFORE-UNLOAD-HANDLER for CLOG-WINDOW. Return and empty string in order to prevent navigation off page. If ON-BEFORE-UNLOAD-HANDLER is nil unbind the event.

[generic-function] SET-ON-HASH-CHANGE CLOG-WINDOW ON-HASH-CHANGE-HANDLER

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

[generic-function] SET-ON-ORIENTATION-CHANGE CLOG-WINDOW ON-ORIENTATION-CHANGE-HANDLER

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

[generic-function] SET-ON-ANIMATION-FRAME CLOG-WINDOW ON-ANIMATION-FRAME-HANDLER

Set the ON-ANIMATION-FRAME-HANDLER for CLOG-OBJ the data parameter of the function is the time stamp. If ON-ANIMATION-FRAME-HANDLER is nil unbind the event.

[generic-function] MOVE-WINDOW-BY CLOG-WINDOW X Y

Move browser window by x y.

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

Move browser window to x y.

[generic-function] RESIZE-BY CLOG-WINDOW X Y

Resize browser window by x y.

[generic-function] RESIZE-TO CLOG-WINDOW X Y

Resize browser window to x y.

CLOG-Window - History

[generic-function] SET-ON-POP-STATE CLOG-WINDOW ON-POP-STATE-HANDLER

Set the ON-POP-STATE-HANDLER for CLOG-WINDOW. If ON-POP-STATE-HANDLER is nil unbind the event.

[generic-function] URL-PUSH-STATE CLOG-WINDOW REWRITE-URL

Method adds an entry to the browser's session history stack.

CLOG-Window - Storage Methods

[type] STORAGE-TYPE

[generic-function] STORAGE-LENGTH CLOG-WINDOW STORAGE-TYPE

Number of entries in browser STORAGE-TYPE. (local = persistant or session)

[generic-function] STORAGE-KEY CLOG-WINDOW STORAGE-TYPE KEY-NUM

Return the key for entry number KEY-NUM in browser STORAGE-TYPE. (local = persistant or session)

[generic-function] STORAGE-REMOVE CLOG-WINDOW STORAGE-TYPE KEY-NAME

Remove the storage key and value in browser STORAGE-TYPE. (local = persistant or session)

[generic-function] STORAGE-ELEMENT CLOG-WINDOW STORAGE-TYPE KEY-NAME

Get/Setf storage-element on browser client.

CLOG-Window - Storage Events

[generic-function] SET-ON-STORAGE CLOG-WINDOW ON-STORAGE-HANDLER

Set the ON-STORAGE-HANDLER for CLOG-OBJ. The on-storage event is fired for changes to :local storage keys.

← ↑ → ↺

25 CLOG Document Objects

CLOG-Document - CLOG Document Objects

[class] CLOG-DOCUMENT CLOG-OBJ

CLOG Document Objects encapsulate the document.

[generic-function] DOMAIN CLOG-DOCUMENT

Get domain.

[generic-function] INPUT-ENCODING CLOG-DOCUMENT

Get input encoding.

[generic-function] LAST-MODIFIED CLOG-DOCUMENT

Get last modified.

[generic-function] REFERER CLOG-DOCUMENT

Get referer.

[generic-function] TITLE CLOG-DOCUMENT

Get/setf title.

[generic-function] DOCUMENT-URL CLOG-DOCUMENT

Get url.

[generic-function] HEAD-ELEMENT CLOG-DOCUMENT

Reader for Head Element object

[generic-function] BODY-ELEMENT OBJECT

[generic-function] DOCUMENT-ELEMENT CLOG-DOCUMENT

Reader for Body Element object

[generic-function] VISIBILITY-STATE CLOG-DOCUMENT

Get visibility-state. Returns the string 'visible' if browser is in non-minmized state and is partialy visible and 'hidden' is browser is minimized or no part of page is visible including an OS screen lock.

[generic-function] READY-STATE CLOG-DOCUMENT

Get ready-state. Returns 'loading'|'interactive'|'complete'. The state would only change if the boot-page was still loading css, graphics, etc. Under normal circumstance there is no need in CLOG to check if the state is ready as on-new-window is only called once one can interact with page. See also SET-ON-READY-STATE-CHANGE

[generic-function] LOAD-CSS CLOG-DOCUMENT CSS-URL &KEY LOAD-ONLY-ONCE

Load css from CSS-URL. If LOAD-ONLY-ONCE load-css returns t if load-css previously called otherwise loads the css and returns css-url.

[generic-function] LOAD-SCRIPT CLOG-DOCUMENT SCRIPT-URL &KEY WAIT-FOR-LOAD WAIT-TIMEOUT LOAD-ONLY-ONCE

Load script from SCRIPT-URL. If WAIT-FOR-LOAD is t, load-script will not return until script load is completed or WAIT-TIMEOUT passes and load-script returns nil otherwise script-url. If LOAD-ONLY-ONCE is t first checks if previously loaded with load-script.

[generic-function] PUT CLOG-DOCUMENT MESSAGE

Write text to browser document object.

[generic-function] PUT-LINE CLOG-DOCUMENT MESSAGE

Write text to browser document object with new-line.

[generic-function] PUT-BR CLOG-DOCUMENT MESSAGE

Write text to browser document object with
new-line.

[generic-function] NEW-LINE CLOG-DOCUMENT

Write to browser document
new-line.

CLOG-Document - Events

[generic-function] SET-ON-FULL-SCREEN-CHANGE CLOG-DOCUMENT ON-FULL-SCREEN-CHANGE-HANDLER

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

[generic-function] SET-ON-VISIBILITY-CHANGE CLOG-DOCUMENT ON-VISIBILITY-CHANGE-HANDLER

Set the ON-VISIBILITY-CHANGE-HANDLER for CLOG-OBJ. If ON-VISIBILITY-CHANGE-HANDLER is nil unbind the event. This event is fired when the page visibility has changed such as a tab being switch of browser minimized. Use the VISIBILITY-STATE property to identify chage.

[generic-function] SET-ON-READY-STATE-CHANGE CLOG-DOCUMENT ON-READY-STATE-CHANGE-HANDLER

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

[generic-function] SET-ON-LOAD-SCRIPT CLOG-DOCUMENT HANDLER &KEY CANCEL-EVENT ONE-TIME

Set a HANDLER for script load complete on CLOG-document. the handler (clog-obj data) data is the script-url used to load it. The handler should be installed on the document before calling load-script.

← ↑ → ↺

26 CLOG Location Objects

Clog-Location - CLOG Location Objects

[class] CLOG-LOCATION CLOG-OBJ

CLOG Location Objects encapsulate the location.

CLOG-Location - Properties

[generic-function] URL CLOG-LOCATION

Get/Setf full url. Setting the URL causes navgation to URL.

[generic-function] HASH CLOG-LOCATION

Get/Setf url hash.

[generic-function] HOST CLOG-LOCATION

Get/Setf url host.

[generic-function] HOST-NAME CLOG-LOCATION

Get/Setf url host name.

[generic-function] ORIGIN CLOG-LOCATION

Get url origin.

[generic-function] PATH-NAME CLOG-LOCATION

Get/Setf url path-name.

[generic-function] PORT CLOG-LOCATION

Get/Setf url port.

[generic-function] PROTOCOL CLOG-LOCATION

Get/Setf url protocol.

[generic-function] URL-SEARCH CLOG-LOCATION

Get/Setf url-search.

CLOG-Location - Methods

[generic-function] RELOAD CLOG-LOCATION

Reload browser window.

[generic-function] URL-REPLACE CLOG-LOCATION REPLACE-URL

Replace browser url, i.e. a redirection and current URL not saved in session history and back button will not return to it.

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

Assign browser url, i.e. a redirection to assign-url that will be saved in session histoy and back button will return to it.

← ↑ → ↺

27 CLOG Navigator Objects

CLOG-Navigator - CLOG Navigator Objects

[class] CLOG-NAVIGATOR CLOG-OBJ

CLOG Navigator Objects encapsulate the navigator.

CLOG-Navigator - Properties

[generic-function] COOKIE-ENABLED-P CLOG-NAVIGATOR

Get if cookie enabled.

[generic-function] LANGUAGE CLOG-NAVIGATOR

Get user prefered language.

[generic-function] USER-AGENT CLOG-NAVIGATOR

Get user agent.

[generic-function] VENDOR CLOG-NAVIGATOR

Get browser vendor.

CLOG-Navigator - Clipboard

[generic-function] SYSTEM-CLIPBOARD-WRITE CLOG-OBJ TEXT

Write text to system clipboard

[generic-function] SYSTEM-CLIPBOARD-READ CLOG-OBJ &KEY WAIT-TIMEOUT

Read text from system clipboard and return text.

← ↑ → ↺

28 CLOG jQuery Objects

CLOG-jQuery - Base class for CLOG jQuery Objects

[class] CLOG-JQUERY CLOG-ELEMENT

CLOG jQuery objects. A jQuery representa DOM queries that can represent one or even many CLOG objects as a single element.

CLOG-jQuery creation

[generic-function] CREATE-JQUERY CLOG-OBJ JQUERY

Create a new CLOG-JQUERY from JQUERY. Some sample jquery selectors: * .class element_name #id selector1, selectorN, ...

CLOG-jQuery methods

[generic-function] JQUERY CLOG-OBJ

Return the jQuery accessor for and CLOG-OBJ.

[generic-function] JQUERY-EXECUTE CLOG-OBJ METHOD

Execute the jQuery METHOD on and CLOG-OBJ. Result is dicarded, returns CLOG-OBJ.

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

Execute the jQuery METHOD on ANY CLOG-OBJ and return result or DEFAULT-ANSWER on time out.

← ↑ → ↺

29 CLOG Helper Functions

Tutorial and demo helpers

[function] CLOG-INSTALL-DIR

Return the directory CLOG was installed in.

[function] OPEN-MANUAL

Launches a browser with CLOG manual.

[function] RUN-TUTORIAL NUM

Run tutorial NUM

[function] LOAD-TUTORIAL NUM

Load tutorial NUM - use (clog:run-tutorial)

[function] RUN-DEMO NUM

Run demo NUM

[function] LOAD-DEMO NUM

Load demo NUM - use (clog:run-demo)

[function] CLOG-REPL &KEY (CLOG-GUI-INITIALIZE T) (CLOG-WEB-INITIALIZE T) (BOOT-FILE "/debug.html") (PORT 8080)

Set a path /repl that opens a blank page and sets the global clog-user:*body* to last window openned to /repl. Debug mode is set (logging to browser console) in the default debug.html boot-file.

[function] SAVE-BODY-TO-FILE FILE-NAME &KEY (BODY CLOG-USER:*BODY*) (IF-EXISTS :ERROR) IF-DOES-NOT-EXIST EXTERNAL-FORMAT

Save the current html of BODY in the current state to FILE-NAME

Functions for Compilation and Documentation

[function] LOAD-WORLD

Load source files for creating documentation

[function] MAKE-MARK-DOWN

Create manual in Mark Down format

[function] MAKE-HTML

Create manual in HTML

[function] MAKE-WORLD

← ↑ ↺

30 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:

The connection - Using the clog-connection package execute or query
The DOM object - Using the clog-obj execute or query
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)))))

Table of Contents

[in package CLOG]

[in package CLOG-WEBGL]

[in package CLOG-AUTH]

[in package CLOG-GUI]

[in package CLOG-WEB]

[in package CLOG-WEB-DBI]

[in package CLOG-WEB]