The CLOG manual
Table of Contents
- 1 CLOG Getting Started
- 2 CLOG Programming Basics
- 3 CLOG Event Data
- 4 CLOG System
- 5 CLOG Utilities
- 6 CLOG Objects
- 7 CLOG Elements
- 8 Common CLOG Elements
- 9 CLOG Presentations
- 10 CLOG Data
- 11 CLOG DBI
- 12 CLOG Panels
- 13 CLOG Style Blocks
- 14 CLOG Form Objects
- 15 CLOG Canvas Objects
- 16 CLOG Multimedia Objects
- 17 CLOG Auth Objects
- 18 CLOG GUI Objects
- 19 CLOG Web Objects
- 20 CLOG Web DBI
- 21 CLOG Web Site Themes
- 22 CLOG Body Objects
- 23 CLOG Window Objects
- 24 CLOG Document Objects
- 25 CLOG Location Objects
- 26 CLOG Navigator Objects
- 27 CLOG jQuery Objects
- 28 CLOG Helper Functions
- 29 CLOG Framework internals and extensions
[in package CLOG]
The Common Lisp Omnificient GUI, CLOG for short, uses web technology to produce graphical user interfaces for applications locally or remotely. CLOG can take the place, or work along side, most cross platform GUI frameworks and website frameworks. The CLOG package starts up the connectivity to the browser or other websocket client (often a browser embedded in a native template application.)
1 CLOG Getting Started
CLOG - The Common Lisp Omnificent GUI
David Botton mailto:david@botton.com
License BSD 3-Clause License
The Common Lisp Omnificent GUI, CLOG for short, uses web technology to produce graphical user interfaces for applications locally or remotely. CLOG can take the place, or work alongside, most cross-platform GUI frameworks and website frameworks. The CLOG package starts up the connectivity to the browser or other websocket client (often a browser embedded in a native template application.)
STATUS: CLOG is complete and all work is on higher order additions, such as full desktop over the web, database tools,etc. See below for some enhacements being worked on. CLOG is actually based on GNOGA, a framework I wrote for Ada in 2013 and used in commercial production code for the last 8+ years, i.e. the techniques CLOG uses are solid and proven.
CLOG is being actively extended daily. 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 &KEY (HOST "0.0.0.0") (PORT 8080) (SERVER
:HUNCHENTOOT
) (EXTENDED-ROUTINGNIL
) (LONG-POLL-FIRSTNIL
) (BOOT-FILE "/boot.html") (BOOT-FUNCTIONNIL
) (STATIC-BOOT-HTMLNIL
) (STATIC-BOOT-JSNIL
) (STATIC-ROOT (MERGE-PATHNAMES
"./static-files/" (ASDF/SYSTEM:SYSTEM-SOURCE-DIRECTORY
:CLOG
)))Inititalize CLOG on a socket using
HOST
andPORT
to serveBOOT-FILE
as the default route to establish web-socket connections and static files located atSTATIC-ROOT
. The webserver used with CLACK can be chosed with:SERVER
. IfEXTENDED-ROUTING
is t routes will match even if extend with additional / and additional paths. If LONG-POLLING-FIRST is t, the output is sent asHTML
instead of websocket commands until on-new-window-handler ends, this should be 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). IfON-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 setSTATIC-ROOT
will be ignored. IfBOOT-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 nil if boot.html is not present will use compiled version. 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.
[function] SET-ON-NEW-WINDOW ON-NEW-WINDOW-HANDLER &KEY (PATH "/") (BOOT-FILE "/boot.html")
Set or change the
ON-NEW-WINDOW-HANDLER
forPATH
using BOOT_FILE. Paths should always begin with a forward slash '/'. IfPATH
is set to :default any path without another route and there is no static file matching the requested pathON-NEW-WINDOW-HANDLER
andBOOT-FILE
will be used. IfBOOT-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 "http://127.0.0.1:8080")
Launch on os a web browser on local machine to
URL
. SeeOPEN-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.
CLOG-Group - Utility Class for CLOG-Obj storage
- [class] CLOG-GROUP
[function] CREATE-GROUP
Return a new
CLOG-GROUP
object for storingCLOG-OBJ
s. They are indexed by theirHTML-ID
or an arbitraryNAME
.
[generic-function] ADD CLOG-GROUP CLOG-OBJ &KEY NAME
Add
CLOG-OBJ
to aCLOG-GROUP
indexed by the html-id ofCLOG-OBJ
unless:NAME
is set and is used instead.
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
) (HTMLNIL
)Escape
STR
for sending to browser script. If no-nil is t (default is nil) if str isNIL
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
.
CLOG Color utilities
[function] RGB RED GREEN BLUE
Return
RGB
string, red green and blue may be 0-255
[function] RGBA RED GREEN BLUE ALPHA
Return
RGBA
string, red green and blue may be 0-255, alpha 0.0 - 1.0
[function] HSL HUE SATURATION LIGHTNESS
Return
HSL
string, hue 0-360, saturation and lightness 0%-100%
[function] HSLA HUE SATURATION LIGHTNESS ALPHA
Return
HSLA
string, hue 0-360, saturation and lightness 0%-100%, alpha 0.0 - 1.0
CLOG Unit utilities
[function] UNIT UNIT-TYPE VALUE
produce a string from numeric value with
UNIT-TYPE
appended.
6 CLOG Objects
CLOG-Obj - Base class for CLOG Objects
[class] CLOG-OBJ
CLOG objects (clog-obj) encapsulate the connection between lisp and an
HTML
DOM element.
CLOG-Obj - General Properties
[generic-function] PROPERTY CLOG-OBJ PROPERTY-NAME &KEY DEFAULT-ANSWER
Get/Setf html property.
CLOG-Obj - General Methods
[generic-function] HEIGHT CLOG-OBJ
Get/Setf html height in pixels.
[generic-function] WIDTH CLOG-OBJ
Get/Setf html width in pixels.
[generic-function] FOCUS CLOG-OBJ
Focus on
CLOG-OBJ
[generic-function] BLUR CLOG-OBJ
Remove focus from
CLOG-OBJ
CLOG-Obj - Low Level
[generic-function] CONNECTION-DATA CLOG-OBJ
Get connection-data that is associated with clog-obj that will persist regardless of thread. The event hooks are stored in this string based hash in the format of: "html-id:event-name" => #'event-handler. clog-* keys are reserved for internal use of clog. The key "clog-body" is set to the clog-body of this connection and accessible with
CONNECTION-BODY
.
[generic-function] CONNECTION-DATA-ITEM CLOG-OBJ ITEM-NAME
Get/Setf item-name from connection-data.
[generic-function] CONNECTION-BODY CLOG-OBJ
Get connection's clog-body.
[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] REMOVE-CONNECTION-DATA-ITEM CLOG-OBJ ITEM-NAME
Remove item-name from connection-data.
[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 withFLUSH-CONNECTION-CACHE
or a query is made.
[function] FLUSH-CONNECTION-CACHE CLOG-OBJ
Flush connection cache if on.
CLOG-Obj - Internals for Extensions and Plugins
[generic-function] HTML-ID CLOG-OBJ
Internal html-id of CLOG-Obj. (Internal)
[generic-function] EXECUTE CLOG-OBJ METHOD
Execute the JavaScript
METHOD
onOBJ
. Result is discarded. seeJQUERY-EXECUTE
(Internal)
[generic-function] QUERY CLOG-OBJ METHOD &KEY DEFAULT-ANSWER
Execute the JavaScript query
METHOD
onOBJ
and return result or if time outDEFAULT-ANSWER
. seeJQUERY-QUERY
(Internal)
[generic-function] JS-EXECUTE CLOG-OBJ SCRIPT
Execure
SCRIPT
on browser. Result is discarded, returnCLOG-OBJ
. (Internal)
[generic-function] JS-QUERY CLOG-OBJ SCRIPT &KEY DEFAULT-ANSWER
Execure
SCRIPT
on browser and return result. (Internal)
[generic-function] SET-ON-EVENT CLOG-OBJ EVENT-NAME HANDLER &KEY CANCEL-EVENT ONE-TIME
Set a
HANDLER
forEVENT-NAME
onCLOG-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
forEVENT-NAME
onCLOG-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
forCLOG-OBJ
. IfON-RESIZE-HANDLER
is nil unbind the event.
[generic-function] SET-ON-FOCUS CLOG-OBJ ON-FOCUS-HANDLER
Set the
ON-FOCUS-HANDLER
forCLOG-OBJ
. IfON-FOCUS-HANDLER
is nil unbind the event.
[generic-function] SET-ON-BLUR CLOG-OBJ ON-BLUR-HANDLER
Set the
ON-BLUR-HANDLER
forCLOG-OBJ
. IfON-BLUR-HANDLER
is nil unbind the event.
[generic-function] SET-ON-CHANGE CLOG-OBJ ON-CHANGE-HANDLER
Set the
ON-CHANGE-HANDLER
forCLOG-OBJ
. IfON-CHANGE-HANDLER
is nil unbind the event.
[generic-function] SET-ON-INPUT CLOG-OBJ ON-INPUT-HANDLER
Set the
ON-INPUT-HANDLER
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-DRAG-START-HANDLER
is nil unbind the event.
[generic-function] SET-ON-DRAG CLOG-OBJ ON-DRAG-HANDLER
Set the
ON-DRAG-HANDLER
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-FOCUS-OUT-HANDLER
is nil unbind the event.
[generic-function] SET-ON-RESET CLOG-OBJ ON-RESET-HANDLER
Set the
ON-RESET-HANDLER
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-SEARCH-HANDLER
is nil unbind the event.
[generic-function] SET-ON-SELECT CLOG-OBJ ON-SELECT-HANDLER
Set the
ON-SELECT-HANDLER
forCLOG-OBJ
. IfON-SELECT-HANDLER
is nil unbind the event.
[generic-function] SET-ON-SUBMIT CLOG-OBJ ON-SUBMIT-HANDLER
Set the
ON-SUBMIT-HANDLER
forCLOG-OBJ
. IfON-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-FormSUBMIT
for more details.
[generic-function] SET-ON-SELECT CLOG-OBJ ON-SELECT-HANDLER
Set the
ON-SELECT-HANDLER
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-CONTEXT-MENU-HANDLER
is nil unbind the event. Setting on-mouse-right-click will replace this handler. If:ONE-TIME
unbind event on right click.
[generic-function] SET-ON-CLICK CLOG-OBJ ON-CLICK-HANDLER &KEY ONE-TIME
Set the
ON-CLICK-HANDLER
forCLOG-OBJ
. IfON-CLICK-HANDLER
is nil unbind the event. Setting this event will replace an on-mouse click if set. If:ONE-TIME
unbind event on click.
[generic-function] SET-ON-DOUBLE-CLICK CLOG-OBJ ON-DOUBLE-CLICK-HANDLER &KEY ONE-TIME
Set the
ON-DOUBLE-CLICK-HANDLER
forCLOG-OBJ
. IfON-DOUBLE-CLICK-HANDLER
is nil unbind the event. Setting the on-mouse-double-click event will replace this handler.
[generic-function] SET-ON-MOUSE-CLICK CLOG-OBJ ON-MOUSE-CLICK-HANDLER &KEY ONE-TIME
Set the
ON-MOUSE-CLICK-HANDLER
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
Set the
ON-MOUSE-UP-HANDLER
forCLOG-OBJ
. IfON-MOUSE-UP-HANDLER
is nil unbind the event.
[generic-function] SET-ON-MOUSE-MOVE CLOG-OBJ ON-MOUSE-MOVE-HANDLER
Set the
ON-MOUSE-MOVE-HANDLER
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
Set the
ON-POINTER-UP-HANDLER
forCLOG-OBJ
. IfON-POINTER-UP-HANDLER
is nil unbind the event.
[generic-function] SET-ON-POINTER-MOVE CLOG-OBJ ON-POINTER-MOVE-HANDLER
Set the
ON-POINTER-MOVE-HANDLER
forCLOG-OBJ
. IfON-POINTER-MOVE-HANDLER
is nil unbind the event.
[generic-function] SET-ON-TOUCH-START CLOG-OBJ ON-TOUCH-START-HANDLER &KEY ONE-TIME
Set the
ON-TOUCH-START-HANDLER
forCLOG-OBJ
. IfON-TOUCH-START-HANDLER
is nil unbind the event.
[generic-function] SET-ON-TOUCH-MOVE CLOG-OBJ ON-TOUCH-MOVE-HANDLER
Set the
ON-TOUCH-MOVE-HANDLER
forCLOG-OBJ
. IfON-TOUCH-MOVE-HANDLER
is nil unbind the event.
[generic-function] SET-ON-TOUCH-END CLOG-OBJ ON-TOUCH-END-HANDLER
Set the
ON-TOUCH-END-HANDLER
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. If disable-default is t default key bindings in browser will not occur. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-KEY-PRESS-HANDLER
is nil unbind the event.
[generic-function] SET-ON-COPY CLOG-OBJ ON-COPY-HANDLER
Set the
ON-COPY-HANDLER
forCLOG-OBJ
. IfON-COPY-HANDLER
is nil unbind the event.
[generic-function] SET-ON-CUT CLOG-OBJ ON-CUT-HANDLER
Set the
ON-CUT-HANDLER
forCLOG-OBJ
. IfON-CUT-HANDLER
is nil unbind the event.
[generic-function] SET-ON-PASTE CLOG-OBJ HANDLER
Set the ON-PASTE-HANDLER for
CLOG-OBJ
. If ON-PASTE-HANDLER is nil unbind the event.
7 CLOG Elements
CLOG-Element - Class for CLOG Elements
[class] CLOG-ELEMENT CLOG-OBJ
CLOG Element Objects is the base class for all html element objects.
CLOG-Element - Low Level Creation
[generic-function] CREATE-CHILD CLOG-OBJ HTML &KEY HTML-ID AUTO-PLACE CLOG-TYPE
Create a new CLOG-Element or sub-type of
CLOG-TYPE
fromHTML
as child ofCLOG-OBJ
and if:AUTO-PLACE
(default t) place-inside-bottom-ofCLOG-OBJ
. IfHTML-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 ofCLOG-TYPE
and attach an existing element withHTML-ID
. TheHTML-ID
must be unique and must be in DOM, ie placed or auto-placed. If new-id is true theHTML-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
afterCLOG-OBJ
in DOM
[generic-function] PLACE-BEFORE CLOG-OBJ NEXT-OBJ
Places
NEXT-OBJ
beforeCLOG-OBJ
in DOM
[generic-function] PLACE-INSIDE-TOP-OF CLOG-OBJ NEXT-OBJ
Places
NEXT-OBJ
inside top ofCLOG-OBJ
in DOM
[generic-function] PLACE-INSIDE-BOTTOM-OF CLOG-OBJ NEXT-OBJ
Places
NEXT-OBJ
inside bottom ofCLOG-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 onCLOG-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. UserTEXT-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
. UnlikeTEXT
this is only the text associated with thisAdditionally for forms get/setf the value.
- [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 inUNITS
(default :px)
[generic-function] LEFT CLOG-WINDOW
Get/Setf browser x position.
[generic-function] TOP CLOG-WINDOW
Get/Setf browser y postion.
[generic-function] RIGHT CLOG-ELEMENT
Get/Setf right.
[generic-function] BOTTOM CLOG-ELEMENT
Get/Setf bottom.
[generic-function] BOX-HEIGHT CLOG-ELEMENT
Get/Setf box-height. Height based on box sizing.
[generic-function] BOX-WIDTH CLOG-ELEMENT
Get/Setf box-width. Width based on box sizing.
[generic-function] MAXIMUM-HEIGHT CLOG-ELEMENT
Get/Setf maximum-height.
[generic-function] MAXIMUM-WIDTH CLOG-ELEMENT
Get/Setf maximum-width.
[generic-function] MINIMUM-HEIGHT CLOG-ELEMENT
Get/Setf minimum-height.
[generic-function] MINIMUM-WIDTH CLOG-ELEMENT
Get/Setf minimum-width.
[generic-function] INNER-HEIGHT CLOG-WINDOW
Get/Setf inner height of browser window.
[generic-function] INNER-WIDTH CLOG-WINDOW
Get/Setf inner width of browser window.
[generic-function] OUTER-HEIGHT CLOG-WINDOW
Get/Setf outer height of browser window.
[generic-function] OUTER-WIDTH CLOG-WINDOW
Get/Setf outer width of browser window.
[generic-function] OUTER-HEIGHT-TO-MARGIN CLOG-ELEMENT
Get outer-height-to-margin. Includes padding and border and margin.
[generic-function] OUTER-WIDTH-TO-MARGIN CLOG-ELEMENT
Get outer-width-to-margin. Includes padding and border and margin.
[generic-function] COLOR CLOG-ELEMENT
Get/Setf color.
[generic-function] OPACITY CLOG-ELEMENT
Get/Setf opacity.
- [type] BACKGROUND-ATTACHMENT-TYPE
[generic-function] BACKGROUND-ATTACHMENT CLOG-ELEMENT
Get/Setf background-attachment.
[generic-function] BACKGROUND-COLOR CLOG-ELEMENT
Get/Setf background-color.
[generic-function] BACKGROUND-IMAGE CLOG-ELEMENT
Get/Setf background-image url. proper syntax is 'url(...)' | nil to clear
[generic-function] BACKGROUND-POSITION CLOG-ELEMENT
Get/Setf background-position. combination of 2 - left/right/center/top/bottom | %x %y | x y
- [type] BACKGROUND-ORIGIN-TYPE
[generic-function] BACKGROUND-ORIGIN CLOG-ELEMENT
Get/Setf background-origin. Background position property is relative to origin of: padding-box|border-box|content-box
- [type] BACKGROUND-REPEAT-TYPE
[generic-function] BACKGROUND-REPEAT CLOG-ELEMENT
Get/Setf background-repeat. repeat-x | repeat-y | repeat | space | round | no-repeat {1,2}
- [type] BACKGROUND-CLIP-TYPE
[generic-function] BACKGROUND-CLIP CLOG-ELEMENT
Get/Setf background-clip. If an element's background extends underneath its border box, padding box, or content box.
[generic-function] BACKGROUND-SIZE CLOG-ELEMENT
Get/Setf background-size. auto | w h | % = cover of parent | contain
- [type] BORDER-STYLE-TYPE
[generic-function] BORDER CLOG-ELEMENT
Get border.
[generic-function] SET-BORDER CLOG-ELEMENT LINE-WIDTH 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] 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.
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
Create a new
CLOG-A
as child ofCLOG-OBJ
with:LINK
and:CONTENT
(default "") and:TARGET
("_self") and if:AUTO-PLACE
(default t) place-inside-bottom-ofCLOG-OBJ
.Target of link, name of a frame or: _blank = new window _top = top most frame (full browser window) _parent = parent frame or window _self = current frame or window
[generic-function] LINK CLOG-A
Get/Setf the HREF link of the anchor.
[generic-function] TARGET CLOG-A
Get/Setf the link target of the anchor.
CLOG-BR
- Class for CLOG Line Breaks
[class] CLOG-BR CLOG-ELEMENT
CLOG BR Objects for line breaks.
[generic-function] CREATE-BR CLOG-OBJ &KEY STYLE HIDDEN CLASS HTML-ID AUTO-PLACE
Create a new
CLOG-BR
as child ofCLOG-OBJ
that creates a line break and if:AUTO-PLACE
(default t) place-inside-bottom-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-OBJ
. If hidden is true visiblep is set to nil. Use inside aCLOG-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 ofCLOG-OBJ
that creates a horizontal rule (line) and if:AUTO-PLACE
(default t) place-inside-bottom-ofCLOG-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
withVALUE
(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-ofCLOG-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
withVALUE
(default 0)MAXIMUM
(default 100) and if:AUTO-PLACE
(default t) place-inside-bottom-ofCLOG-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 ofCLOG-OBJ
with:CONTENT
(default "") and if:AUTO-PLACE
(default t) place-inside-bottom-ofCLOG-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
withCONTENT
and if:AUTO-PLACE
(default t) place-inside-bottom-ofCLOG-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
withCONTENT
and if:AUTO-PLACE
(default t) place-inside-bottom-ofCLOG-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
withCONTENT
and if:AUTO-PLACE
(default t) place-inside-bottom-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ofCLOG-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-ELEMENTBiderectional 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-ELEMENTBiderectional link slot (
ACCESSOR
OBJECT
) <> clog-element (CLOG-OBJ
)
[macro] LINK-FORM-ELEMENT-TO-SLOT CLOG-OBJ OBJECT ACCESSOR &KEY (SET-EVENT #'
SET-ON-CHANGE
) TRANSFORMLink changes to (value
CLOG-OBJ
) to (ACESSOROBJECT
) onSET-EVENT
withTRANSFORM
[macro] LINK-ELEMENT-TO-SLOT CLOG-OBJ OBJECT ACCESSOR &KEY (SET-EVENT #'
SET-ON-CHANGE
) TRANSFORMLink changes to (text
CLOG-OBJ
) to (ACESSOROBJECT
) onSET-EVENT
withTRANSFORM
[macro] LINK-ELEMENT-TO-PLACE CLOG-OBJ PROPERTY PLACE &KEY (SET-EVENT #'
SET-ON-CHANGE
) TRANSFORMLink changes to (
PROPERTY
CLOG-OBJ
) to any lispPLACE
onSET-EVENT
withTRANSFORM
[macro] LINK-SLOT-TO-FORM-ELEMENT OBJECT ACCESSOR CLOG-OBJ &KEY TRANSFORM
Link changes to lisp (
ACCESSOR
OBJECT
) to (valueCLOG-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 (textCLOG-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
) toPLACE
. Only onePLACE
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-KEYT
)Load a
PLIST
in toOBJ
where key of plist is the name of slot onOBJ
and the value is the data to load. If slot contains aCLOG-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 aCLOG-ELEMENT
thenTEXT-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-KEYWORDST
)Returns a plist, one member for each slot name in
SLOT-NAME-LIST
, the key is the slot name. If a slot contains aCLOG-ELEMENT
thenTEXT-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 aSQL
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 aSQL
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
forCLOG-ONE-ROW
. IfON-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 whenMASTER-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-ofCLOG-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. AllPANEL
items or custom slots on panel will be set usingDATA-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. AllPANEL
items or custom slots on panel will be set usingDATA-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 usingDATA-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 fromPANEL
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. AllPANEL
items or custom rows on panel will be retrieved fromPANEL
usingDATA-WRITE-PLIST
.
[generic-function] CLEAR-ROW CLOG-ONE-ROW PANEL
Clear current rowid and all fields in
PANEL
usingDATA-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
forCLOG-DB-TABLE
. IfON-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
forCLOG-DB-TABLE
. IfON-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
forCLOG-DB-TABLE
. IfON-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
forCLOG-DB-TABLE
. IfON-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
(seeBORDER-STYLE-TYPE
),BORDER-WIDTH
,BORDER-COLOR
,:POSITIONING
(default is:FIXED
the default builder panels are:STATIC
) (seePOSITIONING-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-ofCLOG-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 ofCLOG-OBJ
with and if:AUTO-PLACE
(default t) place-inside-bottom-ofCLOG-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 theCLOG-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/orHORIZONTAL
(default t). This will set theDISPLAY
property ofCLOG-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 theHTML-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.
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 theTEXT
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-ofCLOG-OBJ
. In CLOG a form's on-submit handler should be set and the form element values handled in that handler as opposed to theHTML
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 (submitCLOG-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 &KEY NAME VALUE LABEL CLASS STYLE HIDDEN HTML-ID AUTO-PLACE
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 radioELEMENT-TYPE
groups byNAME
.
[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] 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
.
[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-ofCLOG-OBJ
.
- [class] CLOG-CONTEXT2D CLOG-OBJ
[generic-function] CREATE-CONTEXT2D CLOG-CANVAS
Create a new CLOG-Context2d from a CLOG-Canvas
[generic-function] CLEAR-RECT CLOG-CONTEXT2D X Y WIDTH HEIGHT
Clear rectangle to transparent black
[generic-function] FILL-RECT CLOG-CONTEXT2D X Y WIDTH HEIGHT
Fill rectangle with current fill-color
[generic-function] STROKE-RECT CLOG-CONTEXT2D X Y WIDTH HEIGHT
Fill rectangle using current stroke-style
[generic-function] FILL-TEXT CLOG-CONTEXT2D TEXT X Y &KEY MAX-WIDTH
Fill text with current fill-color
[generic-function] STROKE-TEXT CLOG-CONTEXT2D TEXT X Y &KEY MAX-WIDTH
Stroke text with current stroke-style
[generic-function] LINE-WIDTH CLOG-CONTEXT2D VALUE
Set line style width
[generic-function] LINE-CAP CLOG-CONTEXT2D VALUE
Set line cap style
[generic-function] LINE-JOIN CLOG-CONTEXT2D VALUE
Set line join style
[generic-function] MITER-LIMIT CLOG-CONTEXT2D VALUE
Set miter style limit
[generic-function] GET-LINE-DASH CLOG-CONTEXT2D
Set line style dash pattern, e.g. 10, 20
[generic-function] SET-LINE-DASH CLOG-CONTEXT2D VALUE
Set line style dash pattern, e.g. 10, 20
[generic-function] LINE-DASH-OFFSET CLOG-CONTEXT2D VALUE
Set miter style limit
[generic-function] FONT-STYLE CLOG-CONTEXT2D VALUE
Set font style using css font string https://developer.mozilla.org/en-US/docs/Web/CSS/font
- [type] TEXT-ALIGN-TYPE
[generic-function] TEXT-ALIGN CLOG-CONTEXT2D VALUE
Set text alignment style
- [type] TEXT-BASELINE-TYPE
[generic-function] TEXT-BASELINE CLOG-CONTEXT2D VALUE
Set text baseline style
[generic-function] TEXT-DIR CLOG-CONTEXT2D VALUE
Set text direction style
[generic-function] FILL-STYLE CLOG-CONTEXT2D VALUE
Set text direction style
[generic-function] STROKE-STYLE CLOG-CONTEXT2D VALUE
Set text stroke style
[generic-function] SHADOW-BLUR CLOG-CONTEXT2D VALUE
Set text shadow blur
[generic-function] SHADOW-COLOR CLOG-CONTEXT2D VALUE
Set text shadow color
[generic-function] SHADOW-OFFSET-X CLOG-CONTEXT2D VALUE
Set text shadow offset x
[generic-function] SHADOW-OFFSET-Y CLOG-CONTEXT2D VALUE
Set text shadow offset y
[generic-function] BEGIN-PATH CLOG-CONTEXT2D
Starts a new path empting any previous points.
[generic-function] CLOSE-PATH CLOG-CONTEXT2D
Adds a line to start point of path.
[generic-function] MOVE-TO CLOG-CONTEXT2D X Y
Moves start point of path.
[generic-function] LINE-TO CLOG-CONTEXT2D X Y
Adds a line to the current path.
[generic-function] BEZIER-CURVE-TO CLOG-CONTEXT2D CP1X CP1Y CP2X CP2Y X Y
Adds a cubic Bezier curve to the current path.
[generic-function] QUADRATIC-CURVE-TO CLOG-CONTEXT2D CPX CPY X Y
Adds a quadratic Bezier curve to the current path.
[generic-function] ARC CLOG-CONTEXT2D X Y RADIUS START-ANGLE END-ANGLE &KEY ANTICLOCKWISE
Adds a circular arc to the current path.
[generic-function] ARC-TO CLOG-CONTEXT2D X1 Y1 X2 Y2
Adds an arc to the current path.
[generic-function] ELLIPSE CLOG-CONTEXT2D X Y RADIUS-X RADIUS-Y ROTATION START-ANGLE END-ANGLE &KEY ANTICLOCKWISE
Adds an elliptical arc to the current path.
[generic-function] RECT CLOG-CONTEXT2D X Y WIDTH HEIGHT
Adds a rectangle to the current path.
[generic-function] PATH-FILL CLOG-CONTEXT2D
Fill a path.
[generic-function] PATH-STROKE CLOG-CONTEXT2D
Stroke a path.
[generic-function] PATH-CLIP CLOG-CONTEXT2D
Clip a path.
[generic-function] CANVAS-SAVE CLOG-CONTEXT2D
Save canvas to stack
[generic-function] CANVAS-RESTORE CLOG-CONTEXT2D
Restore canvas from stack
16 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
17 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 inACTION-LIST
[function] IS-AUTHORIZED-P ROLE-LIST ACTION
Given
ROLE-LIST
is action authorized. If action is nil returns t.
18 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) (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
andBODY-RIGHT-OFFSET
limit width on maximize.
CLOG-GUI
- Menus
[class] CLOG-GUI-MENU-BAR CLOG-DIV
Menu bar
[generic-function] CREATE-GUI-MENU-BAR CLOG-OBJ &KEY CLASS HTML-ID
Attached a menu bar to a
CLOG-OBJ
in general a clog-body.
[class] CLOG-GUI-MENU-DROP-DOWN CLOG-DIV
Drop down menu
[generic-function] CREATE-GUI-MENU-DROP-DOWN CLOG-GUI-MENU-BAR &KEY CONTENT CLASS HTML-ID
Attached a menu bar drop-down to a
CLOG-GUI-MENU-BAR
[class] CLOG-GUI-MENU-ITEM CLOG-SPAN
Menu item
[generic-function] CREATE-GUI-MENU-ITEM CLOG-GUI-MENU-DROP-DOWN &KEY CONTENT ON-CLICK CLASS HTML-ID
Attached a menu item to a
CLOG-GUI-MENU-DROP-DOWN
[generic-function] CREATE-GUI-MENU-WINDOW-SELECT CLOG-OBJ &KEY CLASS HTML-ID
Attached a clog-select as a menu item that auto updates with open windows and maximizes them unless is a keep-on-top window or on-window-can-maximize returns nil. Only one instance allowed.
[generic-function] CREATE-GUI-MENU-FULL-SCREEN CLOG-GUI-MENU-BAR &KEY HTML-ID
Add as last item in menu bar to allow for a full screen icon ⤢ and full screen mode.
[generic-function] CREATE-GUI-MENU-ICON CLOG-GUI-MENU-BAR &KEY IMAGE-URL ON-CLICK CLASS HTML-ID
Add icon as menu bar item.
CLOG-GUI
- Window System
[generic-function] CURRENT-WINDOW CLOG-OBJ
Get the current selected clog-gui-window
[generic-function] MENU-BAR CLOG-OBJ
Get/setf window menu-bar. This is set buy create-gui-menu-bar.
[generic-function] MENU-BAR-HEIGHT CLOG-OBJ
Get menu-bar height
[generic-function] WINDOW-COLLECTION CLOG-OBJ
Get hash table of open windows
[generic-function] MAXIMIZE-ALL-WINDOWS CLOG-OBJ
Maximize all windows
[generic-function] NORMALIZE-ALL-WINDOWS CLOG-OBJ
Normalize all windows
[generic-function] SET-ON-WINDOW-CHANGE CLOG-OBJ HANDLER
Set the on-window-change
HANDLER
. The on-window-change clog-obj received is the new window
CLOG-GUI
- Individual Windows
- [class] CLOG-GUI-WINDOW CLOG-ELEMENT
[generic-function] CREATE-GUI-WINDOW CLOG-OBJ &KEY TITLE CONTENT LEFT TOP WIDTH HEIGHT MAXIMIZE HAS-PINNER KEEP-ON-TOP HIDDEN CLIENT-MOVEMENT HTML-ID
Create a clog-gui-window. If client-movement is t then use jquery-ui to move/resize and will not work on mobile. When client-movement is t only on-window-move is fired once at start of drag and on-window-move-done at end of drag and on-window-resize at start of resize and on-window-resize-done at end of resize. If has-pinner a toggle wil appear on title bar to allow pinning the window in place, if keep-on-top t then when pinned also will keep-on-top. If had-pinned is nil and keep-on-top t then the window will be set to keep-on-top always.
[generic-function] WINDOW-TITLE CLOG-GUI-WINDOW
Get/setf window title
[generic-function] WINDOW-CONTENT CLOG-GUI-WINDOW
Get window content element.
[generic-function] WINDOW-FOCUS CLOG-GUI-WINDOW
Set
CLOG-GUI-WINDOW
as focused window.
[generic-function] WINDOW-CLOSE CLOG-GUI-WINDOW
Close
CLOG-GUI-WINDOW
. on-window-can-close is not called.CLOG-GUI-WINDOW
is removed from DOM but still present in the CLOG cache on the browser.
[generic-function] WINDOW-MAXIMIZED-P CLOG-GUI-WINDOW
Set
CLOG-GUI-WINDOW
as maximized window.
[generic-function] WINDOW-MAXIMIZE CLOG-GUI-WINDOW
Set
CLOG-GUI-WINDOW
as maximized window.
[generic-function] WINDOW-NORMALIZE CLOG-GUI-WINDOW
Set
CLOG-GUI-WINDOW
as normalized window.
[generic-function] WINDOW-TOGGLE-MAXIMIZE CLOG-GUI-WINDOW
Toggle
CLOG-GUI-WINDOW
as maximize window.
[generic-function] WINDOW-KEEP-ON-TOP CLOG-GUI-WINDOW
Set
CLOG-GUI-WINDOW
to stay on top. Use window-focus to undue.
[generic-function] WINDOW-MAKE-MODAL CLOG-GUI-WINDOW
Set
CLOG-GUI-WINDOW
to stay on top and prevent all other interactions. Use window-end-modal to undo.
[generic-function] WINDOW-END-MODAL CLOG-GUI-WINDOW
Set
CLOG-GUI-WINDOW
to end modal state.
[generic-function] WINDOW-CENTER CLOG-GUI-WINDOW
Center
CLOG-GUI-WINDOW
in browser.
CLOG-GUI
- Individual Window Events
[generic-function] SET-ON-WINDOW-FOCUS CLOG-GUI-WINDOW HANDLER
Set the on-window-focus
HANDLER
[generic-function] SET-ON-WINDOW-BLUR CLOG-GUI-WINDOW HANDLER
Set the on-window-blur
HANDLER
[generic-function] SET-ON-WINDOW-CAN-CLOSE CLOG-GUI-WINDOW HANDLER
Set the on-window-can-close
HANDLER
[generic-function] SET-ON-WINDOW-CLOSE CLOG-GUI-WINDOW HANDLER
Set the on-window-close
HANDLER
[generic-function] SET-ON-WINDOW-CAN-MAXIMIZE CLOG-GUI-WINDOW HANDLER
Set the on-window-can-maximize
HANDLER
[generic-function] SET-ON-WINDOW-CAN-NORMALIZE CLOG-GUI-WINDOW HANDLER
Set the on-window-can-normalize
HANDLER
[generic-function] SET-ON-WINDOW-CAN-MOVE CLOG-GUI-WINDOW HANDLER
Set the on-window-can-move
HANDLER
[generic-function] SET-ON-WINDOW-CAN-SIZE CLOG-GUI-WINDOW HANDLER
Set the on-window-can-size
HANDLER
[generic-function] SET-ON-WINDOW-MOVE CLOG-GUI-WINDOW HANDLER
Set the on-window-move
HANDLER
[generic-function] SET-ON-WINDOW-SIZE CLOG-GUI-WINDOW HANDLER
Set the on-window-size
HANDLER
[generic-function] SET-ON-WINDOW-MOVE-DONE CLOG-GUI-WINDOW HANDLER
Set the on-window-move-done
HANDLER
[generic-function] SET-ON-WINDOW-SIZE-DONE CLOG-GUI-WINDOW HANDLER
Set the on-window-size-done
HANDLER
CLOG-GUI
- Dialog Boxes
[function] ALERT-TOAST OBJ TITLE CONTENT &KEY (COLOR-CLASS "w3-red") (TIME-OUT
NIL
) (PLACE-TOPNIL
) (HTML-IDNIL
)Create an alert toast with option
:TIME-OUT
. If place-top is t then alert is placed in DOM at top of html body instead of bottom of html body.
[function] ALERT-DIALOG OBJ CONTENT &KEY (MODAL
T
) (TITLE "About") (LEFTNIL
) (TOPNIL
) (WIDTH 300) (HEIGHT 200) (CLIENT-MOVEMENTNIL
) (HTML-IDNIL
)Create an alert dialog box with
CONTENT
centered.
[function] INPUT-DIALOG OBJ CONTENT ON-INPUT &KEY (MODAL
T
) (TITLE "Input") (SIZE 20) (ROWS 1) (DEFAULT-VALUE "") (LEFTNIL
) (TOPNIL
) (WIDTH 300) (HEIGHT 200) (CLIENT-MOVEMENTNIL
) (HTML-IDNIL
)Create an input dialog box with
CONTENT
centered and an input box. Calls on-input with input box contents or nil if canceled.
[function] CONFIRM-DIALOG OBJ CONTENT ON-INPUT &KEY (MODAL
T
) (TITLE "Confirm") (OK-TEXT "OK") (CANCEL-TEXT "Cancel") (LEFTNIL
) (TOPNIL
) (WIDTH 300) (HEIGHT 200) (CLIENT-MOVEMENTNIL
) (HTML-IDNIL
)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") (LEFTNIL
) (TOPNIL
) (WIDTH 400) (HEIGHT 500) (CLIENT-MOVEMENTNIL
) (HTML-IDNIL
)Create a form dialog box with
CONTENT
followed byFIELDS
.FIELDS
is a list of lists each list has:(1) Field name - Used for (name attribute) (2) Field description - Used for label (3) Field type - Optional (defaults to :text) (4) Field type options - Optional
Special field types
Field Type Field Type Options ============= ================== :filename default dir -- NOTE: This is server side! :checkbox t if checked :radiobox a-list ((label name)) a third value can be added "checked" :select a-list ((label name)) a third value can be added "selected" :text value (any text input types also work :email, :tel, etc. see
FORM-ELEMENT-TYPE
)Calls on-input after OK or Cancel with an a-list of field name to value if confirmed or nil if canceled.
[function] SERVER-FILE-DIALOG OBJ TITLE INITIAL-DIR ON-FILE-NAME &KEY (MODAL
T
) (LEFTNIL
) (TOPNIL
) (WIDTH 390) (HEIGHT 425) (MAXIMIZENIL
) (INITIAL-FILENAMENIL
) (CLIENT-MOVEMENTNIL
) (HTML-IDNIL
)Create a local file dialog box called
TITLE
usingINITIAL-DIR
on server machine, upon closeON-FILE-NAME
called with filename or nil if failure.
19 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-TOPNIL
) (HTML-IDNIL
)Create an alert toast with option
:TIME-OUT
. If place-top is t then alert is placed in DOM at top ofOBJ
instead of bottom ofOBJ
.
[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-IDNIL
)Create a form with
CONTENT
followed byFIELDS
.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 tIf 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
fromRESULT
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 createPAGE
withCLOG-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. IfAUTHORIZE
thenPAGE
is used also as a CLOG-Auth action to be checked if the current users roles have permission toPAGE
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 toURL
.
[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 withDESCRIPTION
.
[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
20 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
whereKEY-COL
=KEY-VALUE
and optionalWHERE
andORDER-BY
sql.
[function] CREATE-BASE-TABLES SQL-CONNECTION &KEY (SQL-TIMESTAMP-FUNC
*SQLITE-TIMESTAMP*
)Create default tables
21 CLOG Web Site Themes
[in package CLOG-WEB]
Theme helpers
[function] GET-SETTING WEBSITE KEY DEFAULT
Return the setting for
KEY
orDEFAULT
from website settings
[function] GET-PROPERTY PROPERTIES KEY DEFAULT
Return the property for
KEY
from the p-listPROPERTIES
orDEFAULT
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: "")
22 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 withHTML
.
[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
23 CLOG Window Objects
CLOG-Window - CLOG Window Objects
[class] CLOG-WINDOW CLOG-OBJ
CLOG Window Objects encapsulate the window.
CLOG-Window - Properties
[generic-function] WINDOW-NAME CLOG-WINDOW
Get/Setf name for use by hyperlink "target" for this window.
[generic-function] INNER-HEIGHT CLOG-WINDOW
Get/Setf inner height of browser window.
[generic-function] INNER-WIDTH CLOG-WINDOW
Get/Setf inner width of browser window.
[generic-function] OUTER-HEIGHT CLOG-WINDOW
Get/Setf outer height of browser window.
[generic-function] OUTER-WIDTH CLOG-WINDOW
Get/Setf outer width of browser window.
[generic-function] X-OFFSET CLOG-WINDOW
Get/Setf browser window x offset from left edge.
[generic-function] Y-OFFSET CLOG-WINDOW
Get/Setf browser window y offset from top edge.
[generic-function] LEFT CLOG-WINDOW
Get/Setf browser x position.
[generic-function] TOP CLOG-WINDOW
Get/Setf browser y postion.
[generic-function] PIXEL-RATIO CLOG-WINDOW
Get device pixel ratio.
[generic-function] SCREEN-WIDTH CLOG-WINDOW
Get screen width.
[generic-function] SCREEN-HEIGHT CLOG-WINDOW
Get screen height.
[generic-function] SCREEN-AVAILABLE-WIDTH CLOG-WINDOW
Get available screen width.
[generic-function] SCREEN-AVAILABLE-HEIGHT CLOG-WINDOW
Get available screen height.
[generic-function] SCREEN-AVAILABLE-TOP CLOG-WINDOW
Get available screen top.
[generic-function] SCREEN-AVAILABLE-LEFT CLOG-WINDOW
Get available screen left.
[generic-function] SCREEN-COLOR-DEPTH CLOG-WINDOW
Get screen color depth.
CLOG-Window - Methods
[generic-function] ALERT CLOG-WINDOW MESSAGE
Launch an alert box. Note that as long as not dismissed events and messages may not be trasmitted on most browsers.
[generic-function] LOG-CONSOLE CLOG-WINDOW MESSAGE
Print message to browser console.
[generic-function] LOG-ERROR CLOG-WINDOW MESSAGE
Print error message to browser console.
[generic-function] PRINT-WINDOW CLOG-WINDOW
Send browser window to printer.
[generic-function] SCROLL-BY CLOG-WINDOW X Y
Scroll browser window by x y.
[generic-function] SCROLL-TO CLOG-WINDOW X Y
Scroll browser window to x y.
[generic-function] OPEN-WINDOW CLOG-WINDOW URL &KEY NAME SPECS REPLACE
This will launch a new window of current browser where
CLOG-WINDOW
is displayed (remote or local). 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.
- [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 browserSTORAGE-TYPE
. (local = persistant or session)
[generic-function] STORAGE-REMOVE CLOG-WINDOW STORAGE-TYPE KEY-NAME
Remove the storage key and value in browser
STORAGE-TYPE
. (local = persistant or session)
[generic-function] STORAGE-ELEMENT CLOG-WINDOW STORAGE-TYPE KEY-NAME
Get/Setf storage-element on browser client.
CLOG-Window - Events
[generic-function] SET-ON-ABORT CLOG-WINDOW ON-ABORT-HANDLER
Set the
ON-ABORT-HANDLER
forCLOG-OBJ
. IfON-ABORT-HANDLER
is nil unbind the event.
[generic-function] SET-ON-ERROR CLOG-WINDOW ON-ERROR-HANDLER
Set the
ON-ERROR-HANDLER
forCLOG-OBJ
. IfON-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
forCLOG-WINDOW
. Return and empty string in order to prevent navigation off page. IfON-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
forCLOG-OBJ
. IfON-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
forCLOG-OBJ
. IfON-ORIENTATION-CHANGE-HANDLER
is nil unbind the event.
[generic-function] SET-ON-STORAGE CLOG-WINDOW ON-STORAGE-HANDLER
Set the
ON-STORAGE-HANDLER
forCLOG-OBJ
. The on-storage event is fired for changes to :local storage keys.
[generic-function] MOVE-WINDOW-BY CLOG-WINDOW X Y
Move browser window by x y.
[generic-function] MOVE-WINDOW-TO CLOG-WINDOW X Y
Move browser window to x y.
[generic-function] RESIZE-BY CLOG-WINDOW X Y
Resize browser window by x y.
[generic-function] RESIZE-TO CLOG-WINDOW X Y
Resize browser window to x y.
24 CLOG Document Objects
CLOG-Document - CLOG Document Objects
[class] CLOG-DOCUMENT CLOG-OBJ
CLOG Document Objects encapsulate the document.
[generic-function] DOMAIN CLOG-DOCUMENT
Get domain.
[generic-function] INPUT-ENCODING CLOG-DOCUMENT
Get input encoding.
[generic-function] LAST-MODIFIED CLOG-DOCUMENT
Get last modified.
[generic-function] REFERER CLOG-DOCUMENT
Get referer.
[generic-function] TITLE CLOG-DOCUMENT
Get/setf title.
[generic-function] DOCUMENT-URL CLOG-DOCUMENT
Get url.
[generic-function] HEAD-ELEMENT CLOG-DOCUMENT
Reader for Head Element object
- [generic-function] BODY-ELEMENT OBJECT
[generic-function] DOCUMENT-ELEMENT CLOG-DOCUMENT
Reader for Body Element object
[generic-function] READY-STATE CLOG-DOCUMENT
Get ready-state.
[generic-function] LOAD-CSS CLOG-DOCUMENT CSS-URL &KEY LOAD-ONLY-ONCE
Load css from
CSS-URL
. IfLOAD-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
. IfWAIT-FOR-LOAD
is t, load-script will not return until script load is completed orWAIT-TIMEOUT
passes and load-script returns nil otherwise script-url. IfLOAD-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
forCLOG-OBJ
. IfON-FULL-SCREEN-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.
25 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 toURL
.
[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, ie 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.
26 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.
27 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 my CLOG objects as a single element.
CLOG-jQuery creation
[generic-function] CREATE-JQUERY CLOG-OBJ JQUERY
Create a new
CLOG-JQUERY
fromJQUERY
. 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 andCLOG-OBJ
. Result is dicarded, returnCLOG-OBJ
.
[generic-function] JQUERY-QUERY CLOG-OBJ METHOD &KEY DEFAULT-ANSWER
Execute the jQuery
METHOD
on ANYCLOG-OBJ
and return result orDEFAULT-ANSWER
on time out.
28 CLOG Helper Functions
Tutorial and demo helpers
[function] CLOG-INSTALL-DIR
Return the directory CLOG was installed in.
[function] OPEN-MANUAL
Launches a browser with CLOG manual.
[function] RUN-TUTORIAL NUM
Run tutorial
NUM
[function] LOAD-TUTORIAL NUM
Load tutorial
NUM
- use (clog-user:start-tutorial)
[function] RUN-DEMO NUM
Run demo
NUM
[function] LOAD-DEMO NUM
Load demo
NUM
- use (clog-user:start-demo)
[function] CLOG-REPL &KEY (CLOG-GUI-INITIALIZE
T
) (CLOG-WEB-INITIALIZET
)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),
[function] SAVE-BODY-TO-FILE FILE-NAME &KEY (BODY
CLOG-USER::*BODY*
) (IF-EXISTS:ERROR
) IF-DOES-NOT-EXIST EXTERNAL-FORMATSave the current html of
BODY
in the current state toFILE-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
29 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 cloghtml-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)))))