diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b7c8629 --- /dev/null +++ b/.gitignore @@ -0,0 +1,98 @@ + +# Created by https://www.gitignore.io/api/node +# Edit at https://www.gitignore.io/?templates=node + +### Node ### +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# Diagnostic reports (https://nodejs.org/api/report.html) +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# next.js build output +.next + +# nuxt.js build output +.nuxt + +# react / gatsby +public/ + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# End of https://www.gitignore.io/api/node \ No newline at end of file diff --git a/dist/imbue.js b/dist/imbue.js index aa74b3e..a313528 100644 --- a/dist/imbue.js +++ b/dist/imbue.js @@ -1 +1 @@ -function POST(url,data,success){var params="string"==typeof data?data:Object.keys(data).map((function(k){return encodeURIComponent(k)+"="+encodeURIComponent(data[k])})).join("&"),xhr=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");return xhr.open("POST",url),xhr.onreadystatechange=function(){xhr.readyState>3&&200==xhr.status&&success(xhr.responseText)},xhr.setRequestHeader("X-Requested-With","XMLHttpRequest"),xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),xhr.send(params),xhr}function GET(url,success){var xhr=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");return xhr.open("GET",url),xhr.onreadystatechange=function(){xhr.readyState>3&&200==xhr.status&&success(xhr.responseText)},xhr.setRequestHeader("X-Requested-With","XMLHttpRequest"),xhr.send(),xhr}HTMLDocument.prototype.getElements=function(selector,context){return(context||document).querySelectorAll(selector)},HTMLDocument.prototype.getElement=function(selector,context){return(context||document).querySelector(selector)},HTMLDocument.prototype.whenReady=function(callback){"loading"!=document.readyState?callback():document.addEventListener?document.addEventListener("DOMContentLoaded",callback):document.attachEvent("onreadystatechange",(function(){"complete"==document.readyState&&callback()}))},HTMLElement.prototype.appendChild=function(template){this.innerHTML+=template},HTMLElement.prototype.appendSibling=function(template){this.parentNode.innerHTML+=template},HTMLElement.prototype.removeClass=function(className){this.classList.remove(className)},HTMLElement.prototype.addClass=function(className){this.classList.add(className)},HTMLElement.prototype.setClassList=function(classList){this.classList=classList},HTMLElement.prototype.toggleClass=function(className){this.classList.toggle(className)},HTMLElement.prototype.hasClass=function(className){return this.classList.contains(className)},HTMLElement.prototype.getStyles=function(){return this.classList.getAttribute("style")},HTMLElement.prototype.setStyles=function(styles){for(var prop in styles)this.style[prop]=styles[prop]},HTMLElement.prototype.removeStyle=function(style){this.style[style]=null},HTMLElement.prototype.removeStyles=function(styles){for(var i=0;i3&&200==xhr.status&&success(xhr.responseText)},xhr.setRequestHeader("X-Requested-With","XMLHttpRequest"),xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),xhr.send(params),xhr}function GET(url,success){var xhr=window.XMLHttpRequest?new XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");return xhr.open("GET",url),xhr.onreadystatechange=function(){xhr.readyState>3&&200==xhr.status&&success(xhr.responseText)},xhr.setRequestHeader("X-Requested-With","XMLHttpRequest"),xhr.send(),xhr}HTMLDocument.prototype.getElements=function(selector,context){return(context||document).querySelectorAll(selector)},HTMLDocument.prototype.getElement=function(selector,context){return(context||document).querySelector(selector)},HTMLDocument.prototype.whenReady=function(callback){"loading"!=document.readyState?callback():document.addEventListener?document.addEventListener("DOMContentLoaded",callback):document.attachEvent("onreadystatechange",(function(){"complete"==document.readyState&&callback()}))},HTMLElement.prototype.appendChild=function(template){this.innerHTML+=template},HTMLElement.prototype.appendSibling=function(template){this.parentNode.innerHTML+=template},HTMLElement.prototype.removeClass=function(className){this.classList.remove(className)},HTMLElement.prototype.addClass=function(className){this.classList.add(className)},HTMLElement.prototype.setClassList=function(classList){this.classList=classList},HTMLElement.prototype.toggleClass=function(className){this.classList.toggle(className)},HTMLElement.prototype.hasClass=function(className){return this.classList.contains(className)},HTMLElement.prototype.getStyles=function(){return this.classList.getAttribute("style")},HTMLElement.prototype.setStyles=function(styles){for(var prop in styles)this.style[prop]=styles[prop]},HTMLElement.prototype.removeStyle=function(style){this.style[style]=null},HTMLElement.prototype.removeStyles=function(styles){for(var i=0;i - -Imbue.js - - -

Imbue

+ + + Imbue.js + + + +
+

+ Imbue logo +

+ Version 1.0.1 +

+
+
+

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, and HTMLDocument 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 +
    • + +
  • 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. The +

+ +

+ 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 +

-

Imbue logo

+

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

-

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, and HTMLDocument prototypes.

+

HTMLElement

-

Some useful notes about Imbue:

+

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

-
    -
  • In most cases if a call fails or nothing is found, undefined is returned (similar to standard JS for selection)
    • +

    + element.appendChild(`<div> Child Content </div>`) +

    -
  • Imbue extends standard elements and is therefore interoperable with many other frameworks
    • +

    + element.appendSibling(`<div> Sibling Content + </div>`) +

    -
  • Methods and properties of Imbue often rename or call very simple native JS functions, nothing too fancy here
    • +
    -
  • Speed should be essentially on par with vanilla JS
    • +

    element.removeClass("classToRemove")

    -
  • Imbue is not a framework, it will not completely replace something like jQuery, but it most likely can replace a majority of use-cases
    • -
+

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

-

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. The

+

element.toggleClass("nightMode")

-

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

+

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

-

Examples:

+
-

HTMLDocument

+

element.getStyles()

-

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

+

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

-

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

+

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

-

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

+

element.removeStyle("background-color")

-
+
-

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

+

element.getParent() // same as parentNode

-

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

+

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

-

HTMLElement

+

element.getChildren() // same as childNodes

-

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

+
-

element.appendChild(`<div> Child Content </div>`)

+

+ element.getSelectedValue() // retrieves first selected checkbox / + selected option +

-

element.appendSibling(`<div> Sibling Content </div>`)

+

+ element.getSelectedValues() // retrieves all selected checkbox / + selected options +

-
+
-

element.removeClass("classToRemove")

+

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

-

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

+

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

-

element.toggleClass("nightMode")

+

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

-

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

+
-
+

element.hide() // hide element

-

element.getStyles()

+

element.show() // show element

-

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

+
-

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

+

element.HTML // same as innerHTML

-

element.removeStyle("background-color")

+

NodeList

-
+

+ All above methods should work automatically with a NodeList returned + from document.getElements() +

-

element.getParent() // same as parentNode

+

Aray

+

array = array.distinct() // remove duplicate elements

-

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

+

AJAX

-

element.getChildren() // same as childNodes

+

POST(url, data, callback)

-
- -

element.getSelectedValue() // retrieves first selected checkbox / selected option

- -

element.getSelectedValues() // retrieves all selected checkbox / selected options

- -
- -

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.hide() // hide element

- -

element.show() // show element

- -
- -

element.HTML // same as innerHTML

- -

NodeList

- -

All above methods should work automatically with a NodeList returned from document.getElements()

- -

AJAX

- -

POST(url, data, callback)

- -

GET(url, callback)

- -

- -

- +

GET(url, callback)

+ + diff --git a/package.json b/package.json index ea6964e..5ac44ab 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ghosts/imbue", - "version": "1.0.0", + "version": "1.0.1", "publishConfig": { "registry": "https://npm.pkg.github.com/" }, @@ -24,6 +24,6 @@ "bugs": { "url": "https://github.com/Ghosts/Imbue/issues" }, - "homepage": "https://github.com/Ghosts/Imbue#readme", + "homepage": "https://imbue.js.org", "dependencies": {} } diff --git a/source/imbue.js b/source/imbue.js index bc9e57b..9d7670e 100644 --- a/source/imbue.js +++ b/source/imbue.js @@ -191,6 +191,13 @@ NodeList.prototype.removeStyles = function() { // End NodeList Functions +//Begin Array Functions + +Array.prototype.distinct = function() { + return Array.from(new Set(this)); +}; +//End Array Functions + // Begin AJAX Functions function POST(url, data, success) { var params =