Noncollinear Perpendicular Microcrystalline

    @basekits/kit-dom

    1.4.8 • Public • Published

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

    Install

    npm i @basekits/kit-dom

    DownloadsWeekly Downloads

    2

    Version

    1.4.8

    License

    MIT

    Unpacked Size

    22 kB

    Total Files

    9

    Last publish

    Collaborators

    • muratgozel