@basekits/kit-dom v1.4.8

@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)