@basekits/kit-dom

@basekits/kit-dom

DOM utility functions kit for basekits.

Install

npm i @basekits/kit-type @basekits/kit-object @basekits/kit-error @basekits/kit-validator @basekits/kit-function
npm i @basekits/kit-dom

Usage

const kit = require('@basekits/core')
kit.addKit(require('@basekits/kit-type'))
kit.addKit(require('@basekits/kit-object'))
kit.addKit(require('@basekits/kit-error'))
kit.addKit(require('@basekits/kit-validator'))
kit.addKit(require('@basekits/kit-function'))
kit.addKit(require('@basekits/kit-dom'))

Available Items

The following methods will be available after adding this kit:

.onOutsideClick(elements = [], fn, opts = {once: true})

Executes a function when click event happens outside of one of the elements. elements can be:

1. Array of selector strings.
2. Array of DOM elements.
3. A selector string.
4. A DOM element.

function closeDropdown() {
  // hide dropdown menu
}
kit.onOutsideClick( document.getElementById('sample'), closeDropdown, {once: true} )

opts has once property which causes function to be invoked only once.

---

.getCaretPos(element)

Returns the start and the end index of the current text cursor position in the text and textarea inputs.

const viewport = kit.getCaretPos( document.querySelector('input[type="text"]') )
// returns {start: 3, end: 3}

User selected some text in the input if start and end are different.

---

.setCaretPos(element, start, end)

Sets the caret position in the text and textarea inputs.

const el = document.querySelector('input[type="text"]')
kit.setCaretPos( el, 4, 4 )
// there is a shortand for moving cursor to a certain position:
kit.setCaretPos( el, 4 )
// both of the above are same which move the caret to the 4th index

Selects some text in the input if start and end are different.

---

.getViewportDimensions()

Returns the width and height of the current visible area in the browser.

const viewport = kit.getViewportDimensions()
// returns {width: 800, height: 600}

---

.getAbsoluteDistanceFromTop(element)

Returns element's absolute distance from top of the page in pixels.

const fromTop = kit.getAbsoluteDistanceFromTop(element)
// returns 3392 for example

---

.getViewportRelativeDistanceFromTop(element)

Returns element's relative distance from top of the viewport in pixels.

const fromTop = kit.getViewportRelativeDistanceFromTop(element)
// returns 9 for example

---

.getViewportRelativeDistanceFromBottom(element)

Returns element's relative distance from bottom of the viewport in pixels.

const fromTop = kit.getViewportRelativeDistanceFromBottom(element)
// returns 584 for example

---

.setDOMGlobal(name, value)

Override window or document globals.

kit.setDOMGlobal('window', window)
kit.setDOMGlobal('document', document)

---