Get Started

installation

CDN

<script src="https://cdn.skypack.dev/@unsetsoft/jlib" type="module"></script>

API

.load(fn)

If the DOM is ready, run the function, otherwise wait until it is ready and then run the function.

Jlib().load(() => {
   Jlib("nav").addClass("active")
})

.getElements()

It returns a NodeList of all the elements that match the selector.

.getElement()

The function getElement() is a method of the class ElementHandler. It returns the single element.

.event(event, callback)

The event function takes two arguments, the first being the event type and the second being the callback function. The event function then returns the event listener.

.insertHTML(html)

The function takes a string of HTML as an argument, and inserts it into the innerHTML of each element in the collection.

.disableElement(boolean)

The function takes a boolean as an argument. this add disable state to the element.

.addClass(className)

It adds a class to the element.

.removeClass(className)

The function removes a class from the element.

.replaceClass(className, newClassName)

This function replaces the class name of the element with the new class name

.getDataSet()

This function returns the dataset of the single element.

const { tag } = Jlib('#hot').getDataSet()

.getDataSets()

Same has .getDataSet() but, this get data from all elements.

const { tag } = Jlib('button').getDataSets()

.removeChildrens()

It removes all the children of the element.

.hasClass(className)

This function returns true if the element has the class, and false if it doesn't.

if (Jlib("nav").hasClass("active")){
  console.log("The nav is actived!")
}

.toggleClass(className)

If the element has the class, remove it. If it doesn't have the class, add it.

.style(obj / string, value)

If the first argument is a string, then set the style property of the element to the value of the second argument. If the first argument is an object, then set the style property of the element to the value of the object.

Jlib("#box").style("opacity", 0.5)

// Jlib("#box").style("width", "200px")
/* Jlib("#box").style({
   width : "200px",
   height: "200px",
   background: "red"
})
*/

.append(child)

The append function takes a child element and appends it to the current element.

const p = document.createElement("p")
Jlib("div").append("Hello world!",p)

.remove()

The remove() function removes the element from the DOM.

---

API Animate

With this, each element can have a predefined animation or create a custom one.

.animate().fadeIn(opt)

Display the matched elements by fading them to opaque.

.animate().fadeOut(opt)

Hide the matched elements by fading them to transparent.

.animate().anime(keyframes, opt)

The animate function takes two arguments, keyframes and opt, and returns the element with the animation applied.

The param opt is optional. but if is passed is an object with duration and iterations

Examples

Jlib("div").animate().fadeIn({
         duration: 400,
         iterations: 1
})

Jlib("div").animate().fadeOut({
         duration: 400,
         iterations: 1
})

Jlib('#box').animate().anime([
   {transform: 'rotate(360deg)'}
])

---

API Remote

this uses fetch, so the options are the same as fetch. However, method is already included by default; the other fetch options such as body, headers, mode etc. are available for inclusion. Fetch options

.remote(url).get(options)

 const r = await Jlib().remote("https://api.sampleapis.com/coffee/hot").get();

.remote(url).post(options)

 const r = await Jlib().remote("https://api.sampleapis.com/coffee/hot").post();

.remote(url).put(options)

 const r = await Jlib().remote("https://api.sampleapis.com/coffee/hot/1").put();

.remote(url).delete(options)

 const r = await Jlib().remote("https://api.sampleapis.com/coffee/hot/1").delete();