ganelon.web.ui-operations documentation

This namespace provides wrapping functions for defining certain out of the box UI operations.

An operation is a command send from an AJAX action to thin JavaScript layer.

add-class

(add-class id class-name)
Add css class to elements matched by id.

Client side operation type is 'dom-add-class', which maps directly to jQuery .addClass() method.

Example:

(add-class ".warning" "large-warning")

after

(after id value)
Insert DOM content after elements matched by id.

Client side operation type is 'dom-after', which maps directly to jQuery .after() method.

Example:

(after "#widget1" "<p>Test!</p>")

append

(append id value)
Insert DOM content at the end of elements matched by id.

Client side operation type is 'dom-append', which maps directly to jQuery .append() method.

Example:

(append "#widget1" "<p>Test!</p>")

before

(before id value)
Insert content before DOM elements matched by id.

Client side operation type is 'dom-before', which maps directly to jQuery .before() method.

detach

(detach id)
Detach elements matched by id from DOM tree. Please note, that it might me more readable to
add your own operations instead of composing them out of existing ones.

Client side operation type is 'dom-detach', which maps directly to jQuery .detach() method.

fade

(fade id body)
Replace a part(s) of DOM referenced by id (which is a jQuery selector string).

Client side operation type is 'dom-fade', which uses jQuery's .fadeOut(), .fadeIn() and .html() methods.

Example:

(fade "#widget1" "<p>Test!</p>")

html

(html id value)
Set HTML contents of elements matched by id in DOM tree.

Client side operation type is 'dom-html', which maps directly to jQuery .html() method in write mode.

make-empty

(make-empty id)
Remove all children of elements matched by id in DOM tree.

Client side operation type is 'dom-make-empty', which maps directly to jQuery .empty() method.

modal

(modal id body & params)
Display modal window. The default JavaScript operation uses Twitter Bootstrap's modal plugin.
Client side operation type is 'modal'.

With & params it is possible to pass additional options to the plugin itself.

Example:

(modal "demo-action-source-modal"
   (hiccup.core/html
     [:div {:class "modal-header"}
      [:a {:class "close" :data-dismiss "modal"} "close"]
      [:h3 "Example action and widget"]])
   :style "width: 640px;")

notification

(notification title body & params)
Display Growl-style notification. Client side operation type is 'notification'.

With & params, it is possible to provide additional options to the plugin itself.

Example:

(ui/notification "Success"  (h/html "Message set to: " [:b (hiccup.util/escape-html msg)]))

open-page

(open-page url)
Open page URL through JavaScript.

Client side operation type is 'open-page'.

Example:

(open-page "/another-page")

prepend

(prepend id value)
Insert content at the beginning of DOM elements matched by id.

Client side operation type is 'dom-prepend', which maps directly to jQuery .prepend() method.

refresh-page

(refresh-page)
Refresh browser's page through JavaScript.

Client side operation type is 'refresh-page'.

Example:

(refresh-page)

remove-attr

(remove-attr id name)
Remote attribute with a specified name from elements matched by id.

Client side operation type is 'dom-remove-attr', which maps directly to jQuery .removeAttr() method.

remove-class

(remove-class id name)
Remote CSS class with a specified name from elements matched by id.

Client side operation type is 'dom-remove-class', which maps directly to jQuery .removeClass() method.

remove-element

(remove-element id)
Remove elements matched by id from DOM tree.

Client side operation type is 'dom-remove-element', which maps directly to jQuery .remove() method.

remove-modal

(remove-modal id)
Remove modal window, created by (modal id body & params) function.

Client side operation type is 'remove-modal'.

Example:

(remove-modal "demo-action-source-modal")

remove-prop

(remove-prop id value)
Remote property with a specified name from elements matched by id.

Client side operation type is 'dom-remove-prop', which maps directly to jQuery .removeProp() method.

replace-with

(replace-with id body)
Remote property with a specified name from elements matched by id.

Client side operation type is 'dom-remove-prop', which maps directly to jQuery .removeProp() method.

set-attr

(set-attr id name value)(set-attr id properties)
Set attribute value or values for elements matched by id.

Client side operation type is 'dom-set-attr', which maps directly to jQuery .attr() method (in write mode).

set-css

(set-css id name value)(set-css id properties)
Set css attribute or attributes for elements matched by id.

Client side operation type is 'dom-set-css', which maps directly to jQuery .css() method (in write mode).

set-height

(set-height id height)
Set height of elements matched by id in DOM tree.

Client side operation type is 'dom-set-height', which maps directly to jQuery .height() method (in write mode).

set-offset

(set-offset id coordinates)
Set offset contents of elements matched by id in DOM tree.

Client side operation type is 'dom-set-offset', which maps directly to jQuery .offset() method in write mode.

set-prop

(set-prop id name value)(set-prop id properties)
Set properties of DOM tree elements match by id.

Client side operation type is 'dom-set-prop', which maps directly to jQuery .prop() method in write mode.

set-scroll-left

(set-scroll-left id value)
Set horizontal position of a scrollbar for elements matched by id.

Client side operation type is 'dom-set-scroll-left', which maps directly to jQuery .scrollLeft() method.

set-scroll-top

(set-scroll-top id value)
Set vertical position of a scrollbar for elements matched by id.

Client side operation type is 'dom-set-scroll-top', which maps directly to jQuery .scrollTop() method.

set-width

(set-width id width)
Set width of elements matched by id in DOM tree.

Client side operation type is 'dom-set-width', which maps directly to jQuery .width() method (in write mode).

text

(text id value)
Set text contents of elements matched by id in DOM tree.

Client side operation type is 'dom-html', which maps directly to jQuery .text() method in write mode.

toggle-class

(toggle-class id value)
Toggle CSS class with a specified name for elements matched by id.

Client side operation type is 'dom-toggle-class', which maps directly to jQuery .toggleClass() method.