domo.core — design.kushi/domo 0.3.0

add-class! cljs

(add-class! el & xs)

add-event-listener! cljs

(add-event-listener! el nm f opts)

arrow-keycode? cljs

(arrow-keycode? e)

as-css-custom-property-name cljs

(as-css-custom-property-name v)

as-str cljs

(as-str x)

attribute-true? cljs

(attribute-true? node attr)

cet cljs

(cet e)

cetv cljs

(cetv e)

click! cljs

(click! el)

click-xy cljs

(click-xy e)

client-rect cljs

(client-rect el)

computed-style cljs

(computed-style nm)

(computed-style el nm)

copy-to-clipboard! cljs

(copy-to-clipboard! s)

(copy-to-clipboard! node s)

css-custom-property-value cljs

(css-custom-property-value nm)

(css-custom-property-value el nm)

Gets computed style for css custom property. First checks for the computed sytle 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 cljs

(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-style-string cljs

(css-style-string m)

data-attr cljs

(data-attr el nm)

data-selector= cljs

(data-selector= attr v)

dev-only cljs

(dev-only x)

dispatch-event! cljs

(dispatch-event! el e)

duration-property-ms cljs

(duration-property-ms el property)

el-by-id cljs

(el-by-id id)

el-from-point cljs

(el-from-point x y)

el-idx cljs

(el-idx el)

Get index of element, relative to its parent

el-type cljs

(el-type el)

et cljs

(et e)

etv cljs

(etv e)

etv->float cljs

(etv->float e)

etv->int cljs

(etv->int e)

focus! cljs

(focus! el)

get-first-onscreen-child-from-top cljs

(get-first-onscreen-child-from-top el)

grandparent cljs

(grandparent node)

has-attribute? cljs

(has-attribute? el x)

has-class cljs

(has-class node classname)

has-class? cljs

(has-class? el s)

hover-class-attrs cljs

(hover-class-attrs s)

matches-media? cljs

(matches-media? prop val)

matches-or-nearest-ancestor? cljs

(matches-or-nearest-ancestor? el sel)

media-supports-hover? cljs

(media-supports-hover?)

media-supports-touch? cljs

(media-supports-touch?)

mouse-down-a11y cljs

(mouse-down-a11y 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]])))

mouse-event! cljs

(mouse-event! nm)

(mouse-event! nm opts)

nearest-ancestor cljs

(nearest-ancestor node sel)

next-element-sibling cljs

(next-element-sibling node)

node-is-of-type? cljs

(node-is-of-type? el s)

observe-intersection cljs

(observe-intersection {:keys [element intersecting not-intersecting f threshold
                              root-margin]
                       :or {threshold 0.1 root-margin "0px"}})

on-key-down-tab-navigation cljs

(on-key-down-tab-navigation e)

If arrow keys are pressed when an element is focused, this will properly handle tab navigation. The element which has focus, and all of its siblings elements, must have a role of tab. All the siblings must be direct children of an element with a role of tablist.

parent cljs

(parent node)

prefers-reduced-motion? cljs

(prefers-reduced-motion?)

prevent-default! cljs

(prevent-default! e)

previous-element-sibling cljs

(previous-element-sibling node)

qs cljs

(qs s)

(qs el s)

qs-data= cljs

(qs-data= attr v)

(qs-data= el attr v)

raf cljs

(raf f)

Sugar for (js/requestAnimationFrame f)

remove-attribute! cljs

(remove-attribute! el attr)

remove-class! cljs

(remove-class! el & xs)

round-by-dpr cljs

(round-by-dpr n)

screen-quadrant cljs

(screen-quadrant node)

Pass a dom node and get a tuple back reprenting the quadrant in which the center of the node lives. (screen-quadrant (js/document.getElementById "my-id")) => [:top :left]

screen-quadrant-from-point cljs

(screen-quadrant-from-point x y)

Pass an x and y val and get a tuple back reprenting the quadrant in which the point lives. (screen-quadrant 10 20) => [:top :left]

scroll-by! cljs

(scroll-by! {:keys [x y behavior] :or {x 0 y 0 behavior "auto"}})

scroll-into-view! cljs

(scroll-into-view! el)

(scroll-into-view! el
                   {:keys [inline block behavior]
                    :or {block "start" inline "nearest" behavior "auto"}})

scroll-to-top! cljs

(scroll-to-top!)

set! cljs

(set! el attr v)

set-attribute! cljs

(set-attribute! el attr v)

set-caret! cljs

(set-caret! el i)

set-client-wh-css-vars! cljs

(set-client-wh-css-vars! el)

set-css-var! cljs

(set-css-var! el prop val)

set-neg-client-wh-css-vars! cljs

(set-neg-client-wh-css-vars! el)

set-property! cljs

(set-property! el attr v)

set-style! cljs

(set-style! el prop s)

set-style!* cljs

(set-style!* el prop s)

toggle-attribute cljs

(toggle-attribute node attr a b)

toggle-attribute-sibling cljs

(toggle-attribute-sibling el attr a b)

toggle-boolean-attribute cljs

(toggle-boolean-attribute node attr)

toggle-boolean-attribute-sibling cljs

(toggle-boolean-attribute-sibling el attr)

toggle-class! cljs

(toggle-class! el & xs)

value-selector= cljs

(value-selector= v)

viewport cljs

(viewport)

writing-direction cljs

(writing-direction)

zip-get cljs

(zip-get el steps)

zip-nav cljs