Imbue logo

Version 1.0.12


Download & CDN

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.


Background

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:

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!

Methods & Properties

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