Imbue.js

3 min read Original article ↗

CDN: http://unpkg.com/@ghosts/imbue-js

NPM: npm i @ghosts/imbue-js

Imbue is loaded on this page, feel free to explore the methods in the developer console.

Imbue was designed to replace some of the core features of jQuery, and provide a limited set of useful shortcuts and extensions on top of the standard NodeList, HTMLElement, HTMLDocument, and Array prototypes.

Some useful notes about Imbue:

  • In most cases if a call fails or nothing is found, undefined is returned (similar to standard JS for selection)
  • Imbue extends standard elements and is therefore interoperable with many other frameworks
  • Methods and properties of Imbue often rename or call very simple native JS functions, nothing too fancy here
  • Due to use of the IntersectionObserver API Imbue is not compatible with IE. But it's also 2019, so why would it be? Imbue will work flawlessly on all modern browsers (and slightly not-so modern)
  • Speed should be essentially on par with vanilla JS
  • Imbue is not a framework, it will not completely replace something like jQuery, but it most likely can replace a majority of use-cases

The main focus of Imbue is to augment standard JavaScript to make it easier to use in regards to DOM manipulation, and provide added functions as shorthands for standard calls. One easy example that illustrates this is the call for document.whenReady(), similar to $( document ).ready(). If you mainly use jQuery for selectors, setting styles, and some helper functions, Imbue can replace it with a much smaller footprint and faster runtimes. An added benefit is that Imbue is closer to native JavaScript than jQuery, meaning less to learn. For instance, document.getElement() in Imbue is very similar to document.getElementById() in native JavaScript. All Imbue functions are added to element objects, original JavaScript methods are preserved for the DOM and can be used interchangeably and alongside the added Imbue methods.

NOTE: this is a work in progress at the moment, contibutions appreciated!

HTMLDocument

document.getElement("p") // returns first p elements

document.getElements("p") // returns all p elements

document.getElement("p", context) // optionally provide context (default is document)

document.whenReady(function() { // code here }); // ran when document is ready

document.whenReady(() => { // code here });

HTMLElement

Using "element" as example (usually something retrieved from an above "get" function)

element.whenVisible(() => alert("Now Visible!")) // Provided callback runs once each time the element is visible.

element.whenHidden(() => alert("Now Hidden!"))// Provided callback runs once each time the element is hidden.

element.onHover(() => alert("Being Hovered!")) // Provided callback runs once each time the element is visible.

element.onClick(() => alert("Just Clicked!")) // Provided callback runs once each time the element is visible.

element.onEvent("eventName", () => alert("Event happened!")) // Generic for any event needed

element.removeClass("classToRemove")

element.setClassList("this will be the class list")

element.toggleClass("nightMode")

element.hasClass("nightMode") // returns true or false

element.getStyles()

element.setStyles({"background-color" : "red"})

element.removeStyles(["background-color", "color"])

element.removeStyle("background-color")

element.getWidth() // Retruns computed width of element

element.getParent() // same as parentNode

element.getSiblings() // retrieve array of sibling nodes

element.getChildren() // same as childNodes

element.getSelectedNode() // retrieves first selected checkbox/selected element

element.getSelectedNodes() // retrieves all selected checkbox/selected elements

element.getData("id") // gives value of data-id attribute

element.removeData("id") // removes data-id attribute

element.setData("id", 5) // sets data-id=5

element.hideElement() // hide element

element.showElement() // show element

NodeList

Better documentation on this coming soon. For the most part, NodeList calls are the same as HTMLElement but with a plural form.

AJAX

AJAX({ type: "", url: "/", success: function() {}, error: function() {}, contentType: "", dataType: "", data: data });// contentType, dataType, and type will all default to GET & JSON