(class-list el)Returns the element's classList, which is a DOMTokenList
Returns the element's classList, which is a DOMTokenList
(class-string el)Returns the element's class value as a string
Returns the element's class value as a string
(click-xy e)Returns a js-array of x and y coords of click event.
Returns a js-array of x and y coords of click event.
(client-rect el)Given an dom node, returns a js-object describing the element's geometry relative to the viewport.
Given an dom node, returns a js-object describing the element's geometry relative to the viewport.
(client-rect-map el)Given an dom node, returns a cljs map describing the element's geometry relative to the viewport.
Given an dom node, returns a cljs map describing the element's geometry relative to the viewport.
(css-custom-property-value nm)(css-custom-property-value el nm)Gets computed style for css custom property. First checks for the computed style on the element, if supplied. If element is not supplied, checks for the computed style on the root html. Returns a string.
Gets computed style for css custom property. First checks for the computed style on the element, if supplied. If element is not supplied, checks for the computed style on the root html. Returns a string.
(css-custom-property-value-data nm)(css-custom-property-value-data el nm)Gets computed style for css custom property. First checks for the computed style on the element, if supplied. If element is not supplied, checks for the computed style on the root html. Returns a map of values.
(css-custom-property-value-data my-el "--sz") => {:string "500px" :value 500 :units "px"}
If the css-custom-property is not set, returns empty string: (css-custom-property-value-data my-el "--szzz") => {:string ""}
Gets computed style for css custom property.
First checks for the computed style on the element, if supplied.
If element is not supplied, checks for the computed style on the root html.
Returns a map of values.
(css-custom-property-value-data my-el "--sz") =>
{:string "500px" :value 500 :units "px"}
If the css-custom-property is not set, returns empty string:
(css-custom-property-value-data my-el "--szzz") =>
{:string ""}(data-selector attr)(data-selector attr v)(data-selector :foo :bar) => "[data-foo="bar"]"
(data-selector :foo :bar) => "[data-foo=\"bar\"]"
(duration-property-ms el)(duration-property-ms el property)Given a dom node and a style property, returns the computed style value of that property, in milliseconds.
Properties that take a time value: transition-duration transition-delay animation-duration animation-delay animation-iteration-count transition animation
Given a dom node and a style property, returns the computed style value of that property, in milliseconds. Properties that take a time value: transition-duration transition-delay animation-duration animation-delay animation-iteration-count transition animation
(el-from-point x y)Expects x and y viewport coordinates and returns the element found at that point.
Expects x and y viewport coordinates and returns the element found at that point.
(el-index el)Get index of element, relative to its parent
Get index of element, relative to its parent
(element-node? el)If supplied value is a dom element such as <div>, <span>, etc., returns true, else returns false.
If supplied value is a dom element such as <div>, <span>, etc., returns true, else returns false.
(event-xy e)Returns a js array of x and y coords of event.
Returns a js array of x and y coords of event.
(fade-in el)(fade-in el {:keys [display opacity duration]})Orchestrates the fading in of an element.
Orchestrates the fading in of an element.
(fade-out el)(fade-out el {:keys [duration]})Orchestrates the fading out of an element.
Orchestrates the fading out of an element.
(intersecting-client-rects? a b)Expects two js objects representing client-rect instances.
Expects two js objects representing client-rect instances.
(matches-media? prop val)On a desktop: (matches-media? "any-hover" "hover") => true
On a touch device such as a smartphone that does not support hover: (matches-media? "any-hover" "hover") => false
On a desktop: (matches-media? "any-hover" "hover") => true On a touch device such as a smartphone that does not support hover: (matches-media? "any-hover" "hover") => false
(mouse-down-a11y f & args)Sets up a partial attributes js-obj for using on-mouse-down instead of on-click.
Intended for buttons, switches, checkboxes, radios, etc.
The function passed in may accept any number of args, but the last arg needs to be the event.
Contrived example with reagent:
(defn sidenav-item-handler [label modal? e] (domo/scroll-into-view! (domo/qs-data= "foo-bar" label)) (domo/scroll-by! {:y -50}) (when modal? (dismiss-popover! e)))
(defn my-reagent-component [{:keys [coll modal?]}] (into [:ul] (for [{:keys [label]} coll] [:li [button (merge-attrs (sx :.pill ...) (mouse-down-a11y sidenav-item-handler label modal?)) label]])))
Sets up a partial attributes js-obj for using `on-mouse-down` instead of `on-click`.
Intended for buttons, switches, checkboxes, radios, etc.
The function passed in may accept any number of args, but the last arg needs
to be the event.
Contrived example with reagent:
(defn sidenav-item-handler [label modal? e]
(domo/scroll-into-view!
(domo/qs-data= "foo-bar" label))
(domo/scroll-by! {:y -50})
(when modal?
(dismiss-popover! e)))
(defn my-reagent-component
[{:keys [coll modal?]}]
(into [:ul]
(for [{:keys [label]} coll]
[:li
[button
(merge-attrs
(sx :.pill
...)
(mouse-down-a11y sidenav-item-handler label modal?))
label]])))(mouse-down-a11y-map f & args)Sets up a partial attributes map for using on-mouse-down instead of on-click.
Intended for buttons, switches, checkboxes, radios, etc.
The function passed in may accept any number of args, but the last arg needs to be the event.
Contrived example with reagent:
(defn sidenav-item-handler [label modal? e] (domo/scroll-into-view! (domo/qs-data= "foo-bar" label)) (domo/scroll-by! {:y -50}) (when modal? (dismiss-popover! e)))
(defn my-reagent-component [{:keys [coll modal?]}] (into [:ul] (for [{:keys [label]} coll] [:li [button (merge-attrs (sx :.pill ...) (mouse-down-a11y sidenav-item-handler label modal?)) label]])))
Sets up a partial attributes map for using `on-mouse-down` instead of `on-click`.
Intended for buttons, switches, checkboxes, radios, etc.
The function passed in may accept any number of args, but the last arg needs
to be the event.
Contrived example with reagent:
(defn sidenav-item-handler [label modal? e]
(domo/scroll-into-view!
(domo/qs-data= "foo-bar" label))
(domo/scroll-by! {:y -50})
(when modal?
(dismiss-popover! e)))
(defn my-reagent-component
[{:keys [coll modal?]}]
(into [:ul]
(for [{:keys [label]} coll]
[:li
[button
(merge-attrs
(sx :.pill
...)
(mouse-down-a11y sidenav-item-handler label modal?))
label]])))(observe-intersection {:keys [element intersecting not-intersecting f threshold
root-margin]
:or {threshold 0.1 root-margin "0px"}})(raf f)Sugar for (js/requestAnimationFrame f)
Sugar for (js/requestAnimationFrame f)
(screen-quadrant el)Given a dom node, returns a tuple representing the viewport quadrant which which contains the center of the node.
(screen-quadrant (domo.core/el-by-id "my-id")) => [:top :left]
Given a dom node, returns a tuple representing the viewport quadrant which which contains the center of the node. (screen-quadrant (domo.core/el-by-id "my-id")) => [:top :left]
(screen-quadrant-from-point x y)Given an x and y value, returns a tuple back representing the viewport quadrant which contains the point.
(screen-quadrant 10 20) => [:top :left]
Given an x and y value, returns a tuple back representing the viewport quadrant which contains the point. (screen-quadrant 10 20) => [:top :left]
(scroll-into-view! el)(scroll-into-view! el
{:keys [inline block behavior]
:or {block "start" inline "nearest" behavior "auto"}})(sibling-with-attribute el attr)(sibling-with-attribute el attr v)Returns the first sibling with attribute match
Returns the first sibling with attribute match
(siblings-with-attribute el attr)(siblings-with-attribute el attr v)Returns a vector of siblings with attribute matches.
Returns a vector of siblings with attribute matches.
(toggle-attribute! el attr a b)Toggles an attribute between provided values a and b, depending on the current value of the attribute.
Given the following dom node bound to el:
<div data-foo="baz">
(toggle-attribute! el :data-foo :baz :bar)
mutates the dome to:
<div data-foo="bar">
Toggles an attribute between provided values a and b, depending on the current value of the attribute. Given the following dom node bound to `el`: <div data-foo="baz"> (toggle-attribute! el :data-foo :baz :bar) mutates the dome to: <div data-foo="bar">
(token->ms x)(token->ms el x)Expects a key or string which maps to an existing design token (css custom property). If the value of the token is a valid (css) microseconds or seconds unit, an integer representing the number of microseconds will be returned.
Example:
/* css */ :root { --xxfast: 100; }
;; cljs (token->ms "--xxfast") ; => 100 (token->ms :--xxfast) ; => 100 (token->ms 42) ; => nil
Expects a key or string which maps to an existing design token (css custom
property). If the value of the token is a valid (css) microseconds or seconds
unit, an integer representing the number of microseconds will be returned.
Example:
/* css */
:root {
--xxfast: 100;
}
;; cljs
(token->ms "--xxfast") ; => 100
(token->ms :--xxfast) ; => 100
(token->ms 42) ; => nil
(value-selector v)(value-selector :baz) => "[value="baz"]"
(value-selector :baz) => "[value=\"baz\"]"
(viewport)Returns a js object describing the viewport inner-width and inner-height.
Example:
(viewport) => {inner-width: 275 inner-height-without-scrollbars: 1246 inner-width-without-scrollbars: 275 inner-height: 1246}
Returns a js object describing the viewport inner-width and inner-height.
Example:
(viewport) =>
{inner-width: 275
inner-height-without-scrollbars: 1246
inner-width-without-scrollbars: 275
inner-height: 1246}(viewport-map)Returns a cljs hashmap describing the viewport inner-width and inner-height.
Example:
(viewport) => {:inner-width 275 :inner-height-without-scrollbars 1246 :inner-width-without-scrollbars 275 :inner-height 1246}
Returns a cljs hashmap describing the viewport inner-width and inner-height.
Example:
(viewport) =>
{:inner-width 275
:inner-height-without-scrollbars 1246
:inner-width-without-scrollbars 275
:inner-height 1246}(viewport-x-fraction vp x)First argument must be a viewport js object produced from domo.core/viewport. Second argument must be a number representing an x coordinate. Returns the position as a fraction of the viewport width.
First argument must be a viewport js object produced from domo.core/viewport. Second argument must be a number representing an x coordinate. Returns the position as a fraction of the viewport width.
(viewport-y-fraction vp y)First argument must be a viewport js object produced from domo.core/viewport. Second argument must be a number representing an y coordinate. Returns the position as a fraction of the viewport height.
First argument must be a viewport js object produced from domo.core/viewport. Second argument must be a number representing an y coordinate. Returns the position as a fraction of the viewport height.
(zip-get el steps)Zipper-esque navigation for the DOM.
The following 4 calls are equivalent:
(def el (domo.core/el-by-id "my-id"))
(zip-get el "v > >")
(zip-get el [:v :> :>])
(zip-get app-el '[v > >])
(zip-get el "down right right")
(zip-get el [:down :right :right])
(zip-get el '[down right right])
Zipper-esque navigation for the DOM. The following 4 calls are equivalent: (def el (domo.core/el-by-id "my-id")) (zip-get el "v > >") (zip-get el [:v :> :>]) (zip-get app-el '[v > >]) (zip-get el "down right right") (zip-get el [:down :right :right]) (zip-get el '[down right right])
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |