CDN:
http://unpkg.com/@ghosts/imbue-js
NPM:
npm i @ghosts/imbue-js
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:
undefined
is returned (similar to standard JS for
selection)
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!
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 });
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
Better documentation on this coming soon. For the most part, NodeList calls are the same as HTMLElement but with a plural form.
AJAX({
type: "",
url: "/",
success: function() {},
error: function() {},
contentType: "",
dataType: "",
data: data
});// contentType, dataType, and type will all default to GET & JSON