@mrbakieness/npm_js_selector v1.3.0

JavaScript Selector

Install

npm install @mrbakieness/npm_js_selector --save-dev

Useage

To use the module first you have to import the module into your main JavaScript file.

import "../node_modules/@mrbakieness/npm_js_selector/index.js";

This libary has multiple functions that can be used to make javascript easier to write. Loosely based on jQuery but much more lightweight.

.ready(callback)

Basic ready function.

$_(document).ready(() => {
    console.log('document ready!');
    //code goes here
})

.on(events, callback, options)

Function to add event listener to elements.

    $_('.element').on('click', (e) => {
        e.target.style.color = 'red';
    })

The following are the current option arguments that can be passed.

If once: true is being used the following needs to be include within the callback so that the event only happenes once on IE11.

if (IE_once(e) == true) {
    //code goes here ...
}

A full example:

    $_('.element').on('mouseover', (e) => {
        if (IE_once(e) == true) {
            e.target.style.color = 'red';
        }
    }, { once: true })

.forEach(callback)

Function to loop through elements and executes code for each element.

$_('.elements').forEach((el) => {
    el.classList.remove('active');
})

.addClass(class)

Adds a class to an element or list of elements.

$_('.elements').addClass('class');

.removeClass(class)

Removes a class to an element or list of elements.

$_('.elements').removeClass('class');

.modal()

Creates a modal based on element ID. The Element need to have the attribute data-modal-title.

<div id="element" data-modal-title="Basic dialog">
    <div class="modal__content">
        <p>This is the default dialog.</p>
    </div>
</div>

$_('#element').modal();

.slide(position, time)

Horizontal slide function to move elements left to right based on position.

$_('.element').slide(toCenter, 500);

.fadeOut(time)

Fades out and element in a given time.

$_('.element').fadeOut(2000);