Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

d_js

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

d_js - npm Package Compare versions

Comparing version 1.10.0 to 2.0.0

1

bower.json

@@ -13,2 +13,3 @@ {

"events",
"polyfills",
"css"

@@ -15,0 +16,0 @@ ],

29

CHANGELOG.md

@@ -7,2 +7,31 @@ # Change Log

## 2.0.0 - 2017-08-04
### Added
* Added a polyfill to `Element.prototype.closest`
* Added a polyfill to `Element.prototype.replaceWith`
* Added a polyfill to `NodeList.prototype.forEach`
### Removed
* Drop support for IE10
* Drop *dist* folder
* Removed `d.is()` and implemented a polyfill for `Element.prototype.matches` instead.
* Removed `d.remove()` and implemented a polyfill for `Element.prototype.remove` instead.
* Removed `d.append()` and implemented a polyfill for `Element.prototype.append` instead.
* Removed `d.prepend()` and implemented a polyfill for `Element.prototype.prepend` instead.
* Removed `d.insertBefore()` and implemented a polyfill for `Element.prototype.before` instead.
* Removed `d.insertAfter()` and implemented a polyfill for `Element.prototype.after` instead.
* Removed the ability to create instances to chain functions
### Changed
* `d.getAll()` returns a NodeList, instead an array
* `d.parse()` returns a documentFragment, instead an array
### Fixed
* Fixed custom events in IE
## 1.10.0 - 2017-07-20

@@ -9,0 +38,0 @@

608

d.js
'use strict';
(function (root, factory) {
(function(root, factory) {
if (typeof define === 'function' && define.amd) {

@@ -13,371 +13,298 @@ define([], function() {

}
}(this, function () {
})(this, function() {
var div = document.createElement('div');
var d = {
function d (query) {
//constructor
if (this instanceof d) {
Array.prototype.splice.apply(this, [0, 0].concat(query));
} else {
return new d(selectOrParse(query));
}
}
/*
* Select the first element
*/
get: function(query) {
if (typeof query === 'string') {
return document.querySelector(query);
}
/*
* Select the first element
*/
d.get = function (query) {
if (typeof query === 'string') {
return document.querySelector(query);
}
if (
query instanceof NodeList ||
query instanceof HTMLCollection ||
query instanceof Array
) {
return query[0];
}
if (query instanceof NodeList || query instanceof HTMLCollection || query instanceof Array || query instanceof d) {
return query[0];
}
if (Object.prototype.toString.call(query) === '[object Object]') {
for (var q in query) {
return query[q].querySelector(q);
if (Object.prototype.toString.call(query) === '[object Object]') {
for (var q in query) {
return query[q].querySelector(q);
}
}
}
return query;
};
/*
* Select an array of elements
*/
d.getAll = function (query) {
if (Array.isArray(query)) {
return query;
}
},
if (typeof query === 'string') {
query = document.querySelectorAll(query);
} else if (Object.prototype.toString.call(query) === '[object Object]' && !(query instanceof d)) {
for (var q in query) {
query = query[q].querySelectorAll(q);
break;
/*
* Select all elements
*/
getAll: function(query) {
if (query instanceof NodeList) {
return query;
}
}
if (query instanceof NodeList || query instanceof HTMLCollection || query instanceof d) {
return Array.prototype.slice.call(query);
}
if (typeof query === 'string') {
return document.querySelectorAll(query);
}
if (Object.prototype.toString.call(query) === '[object Object]') {
for (var q in query) {
return query[q].querySelectorAll(q);
}
}
return [query];
};
throw new Error('Invalid argument to getAll');
},
/**
* Select the siblings of an element
*/
d.getSiblings = function (element, query) {
element = d.get(element);
/**
* Select the siblings of an element
*/
getSiblings: function(element, query) {
element = d.get(element);
if (!element) {
return [];
}
if (!element) {
return [];
}
return d.getAll(element.parentNode.children).filter(function (child) {
return child !== element && (!query || d.is(child, query));
});
};
return Array.prototype.filter.call(
element.parentNode.children,
function(child) {
return (
child !== element && (!query || child.matches(query))
);
}
);
},
/*
* Check whether the element matches with a selector
*/
d.is = function (element, query) {
if (typeof query === 'string') {
return (element.matches || element.matchesSelector || element.msMatchesSelector || element.mozMatchesSelector || element.webkitMatchesSelector).call(element, query);
}
/*
* Attach an event to the elements.
*/
on: function(events, query, callback, useCapture) {
forceArray(query).forEach(function(el) {
events.split(' ').forEach(function(event) {
el.addEventListener(event, callback, useCapture || false);
});
});
},
return element === query;
};
/*
* Delegate an event to the elements.
*/
delegate: function(events, query, selector, callback) {
d.on(
events,
query,
function(event) {
for (
var target = event.target;
target && target !== this;
target = target.parentNode
) {
if (target.matches(selector)) {
callback.call(target, event, target);
break;
}
}
},
true
);
},
/*
* Attach an event to the elements.
*/
d.on = function (events, query, callback, useCapture) {
d.getAll(query).forEach(function (el) {
events.split(' ').forEach(function (event) {
el.addEventListener(event, callback, useCapture || false);
/*
* Detach an event from the elements.
*/
off: function(events, query, callback, useCapture) {
forceArray(query).forEach(function(el) {
events.split(' ').forEach(function(event) {
el.removeEventListener(
event,
callback,
useCapture || false
);
});
});
});
};
},
/*
* Delegate an event to the elements.
*/
d.delegate = function (events, query, selector, callback) {
d.on(events, query, function (event) {
for (var target = event.target; target && target !== this; target = target.parentNode) {
if (d.is(target, selector)) {
callback.call(target, event, target);
break;
}
/*
* Dispatch an event.
*/
trigger: function(event, query, data) {
if (typeof event === 'string') {
event = createEvent(event, data);
}
}, true);
};
/*
* detach an event from the elements.
*/
d.off = function (events, query, callback, useCapture) {
d.getAll(query).forEach(function (el) {
events.split(' ').forEach(function (event) {
el.removeEventListener(event, callback, useCapture || false);
forceArray(query).forEach(function(el) {
el.dispatchEvent(event);
});
});
};
},
/*
* dispatch an event.
*/
d.trigger = function (event, query, data) {
if (typeof event === 'string') {
event = createEvent(event, data);
}
/*
* Get/set the styles of elements
*/
css: function(query, prop, value) {
if (arguments.length < 3 && typeof prop !== 'object') {
var style = getComputedStyle(d.get(query));
d.getAll(query).forEach(function (el) {
el.dispatchEvent(event);
});
};
return arguments.length === 1 ? style : style[styleProp(prop)];
}
/*
* Remove elements
*/
d.remove = function (query) {
d.getAll(query).forEach(function (el) {
el.parentNode.removeChild(el);
});
};
var rules = {};
/*
* Insert a new element before other
*/
d.insertBefore = function (query, content) {
var element = d.get(query);
if (typeof prop === 'object') {
rules = prop;
} else {
rules[prop] = value;
}
if (element) {
selectOrParse(content).forEach(function (el) {
element.parentNode.insertBefore(el, element);
});
}
};
forceArray(query).forEach(function(el, index, elements) {
for (var prop in rules) {
var val = rules[prop];
/*
* Insert a new element after other
*/
d.insertAfter = function (query, content) {
var element = d.get(query);
if (typeof val === 'function') {
val = val.call(this, el, index, elements);
} else if (Array.isArray(val)) {
val = val[index % val.length];
}
if (element) {
selectOrParse(content).reverse().forEach(function (el) {
element.parentNode.insertBefore(el, element.nextSibling);
el.style[styleProp(prop)] = val;
}
});
}
};
},
/*
* Insert a new element as the first child of other
*/
d.prepend = function (query, content) {
var element = d.get(query);
/*
* Get/set data-* attributes
*/
data: function(query, name, value) {
if (arguments.length < 3 && typeof name !== 'object') {
var element = d.get(query);
if (element) {
selectOrParse(content).reverse().forEach(function (el) {
element.insertBefore(el, element.firstChild);
});
}
};
if (!element || !element.dataset[name]) {
return;
}
/*
* Insert a new element as the last child of other
*/
d.append = function (query, content) {
var element = d.get(query);
return dataValue(element.dataset[name]);
}
if (element) {
selectOrParse(content).forEach(function (el) {
element.appendChild(el);
});
}
};
var values = {};
/*
* Get/set the styles of elements
*/
d.css = function (query, prop, value) {
if (arguments.length < 3 && (typeof prop !== 'object')) {
var style = getComputedStyle(d.get(query));
if (typeof name === 'object') {
values = name;
} else {
values[name] = value;
}
return (arguments.length === 1) ? style : style[styleProp(prop)];
}
forceArray(query).forEach(function(el) {
for (var name in values) {
var value = values[name];
var rules = {};
if (typeof value === 'object') {
value = JSON.stringify(value);
}
if (typeof prop === 'object') {
rules = prop;
} else {
rules[prop] = value;
}
d.getAll(query).forEach(function (el, index, elements) {
for (var prop in rules) {
var val = rules[prop];
if (typeof val === 'function') {
val = val.call(this, el, index, elements);
} else if (Array.isArray(val)) {
val = val[index % val.length];
el.dataset[name] = value;
}
});
},
el.style[styleProp(prop)] = val;
}
});
/*
* Parses a html code
*/
parse: function(html, includeTextNodes) {
var tmp = document.implementation.createHTMLDocument('');
tmp.body.innerHTML = html;
return toFragment(
includeTextNodes ? tmp.body.childNodes : tmp.body.children
);
}
};
/*
* Get/set data-* attributes
*/
d.data = function (query, name, value) {
if (arguments.length < 3 && (typeof name !== 'object')) {
var element = d.get(query);
/******************************
* Polyfills
******************************/
if (!element || !element.dataset[name]) {
return;
// http://caniuse.com/#search=matches
if (!('matches' in Element.prototype)) {
Element.prototype.matches =
Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
}
// http://caniuse.com/#feat=element-closest
if (!('closest' in Element.prototype)) {
Element.prototype.closest = function(query) {
var ancestor = this;
if (!ancestor.documentOwner.contains(query)) {
return null;
}
return dataValue(element.dataset[name]);
}
do {
if (ancestor.matches(query)) {
return ancestor;
}
var values = {};
ancestor = ancestor.parentElement;
} while (ancestor !== null);
if (typeof name === 'object') {
values = name;
} else {
values[name] = value;
}
return ancestor;
};
}
d.getAll(query).forEach(function (el) {
for (var name in values) {
var value = values[name];
if (typeof value === 'object') {
value = JSON.stringify(value);
}
el.dataset[name] = value;
// http://caniuse.com/#feat=childnode-remove
if (!('remove' in Element.prototype)) {
Element.prototype.remove = function() {
if (this.parentNode) {
this.parentNode.removeChild(this);
}
});
};
};
}
/*
* Parses a html code
*/
d.parse = function (html, forceArray) {
div.innerHTML = html;
// http://caniuse.com/#feat=dom-manip-convenience
if (!('append' in Element.prototype)) {
Element.prototype.append = function() {
this.appendChild(toFragment(arguments));
};
}
if (div.children.length === 0) {
return forceArray ? [] : null;
}
if (!('prepend' in Element.prototype)) {
Element.prototype.prepend = function() {
this.insertBefore(toFragment(arguments), this.firstChild);
};
}
if (div.children.length === 1 && !forceArray) {
return div.children[0];
}
if (!('before' in Element.prototype)) {
Element.prototype.before = function() {
this.parentNode.insertBefore(toFragment(arguments), this);
};
}
return d.getAll(div.children);
};
if (!('after' in Element.prototype)) {
Element.prototype.after = function() {
this.parentNode.insertBefore(
toFragment(arguments),
this.nextSibling
);
};
}
if (!('replaceWith' in Element.prototype)) {
Element.prototype.replaceWith = function() {
this.parentNode.replaceChild(toFragment(arguments), this);
};
}
/******************************
* Wrapper for chaining
******************************/
d.prototype = Object.create(Array.prototype, {
on: {
value: function (event, callback, useCapture) {
d.on(event, this, callback, useCapture);
return this;
// https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach
if (!('forEach' in NodeList.prototype)) {
NodeList.prototype.forEach = function(callback, thisArg) {
thisArg = thisArg || window;
for (var i = 0; i < this.length; i++) {
callback.call(thisArg, this[i], i, this);
}
},
delegate: {
value: function (event, selector, callback, useCapture) {
d.delegate(event, this, selector, callback, useCapture);
return this;
}
},
off: {
value: function (event, callback, useCapture) {
d.off(event, this, callback, useCapture);
return this;
}
},
trigger: {
value: function (event, data) {
d.trigger(event, this, data);
return this;
}
},
css: {
value: function () {
return getSet(this, arguments, d.css);
}
},
data: {
value: function () {
return getSet(this, arguments, d.data);
}
},
insertBefore: {
value: function (content) {
d.insertBefore(this, content);
return this;
}
},
insertAfter: {
value: function (content) {
d.insertAfter(this, content);
return this;
}
},
prepend: {
value: function (content) {
d.prepend(this, content);
return this;
}
},
append: {
value: function (content) {
d.append(this, content);
return this;
}
},
insertBeforeTo: {
value: function (query) {
d.insertBefore(query, this);
return this;
}
},
insertAfterTo: {
value: function (query) {
d.insertAfter(query, this);
return this;
}
},
prependTo: {
value: function (query) {
d.prepend(query, this);
return this;
}
},
appendTo: {
value: function (query) {
d.append(query, this);
return this;
}
}
});
};
}
/******************************

@@ -387,5 +314,5 @@ * Helpers functions

function selectOrParse(query) {
if (typeof query === 'string' && query[0] === '<') {
return d.parse(query, true) || [];
function forceArray(query) {
if (query instanceof Node) {
return [query];
}

@@ -396,18 +323,19 @@

function getSet(el, args, fn) {
args = Array.prototype.slice.call(args);
args.unshift(el);
function toFragment(args) {
var fragment = document.createDocumentFragment();
//getter
if (args.length < 3 && (typeof args[1] !== 'object')) {
return fn.apply(null, args);
}
Array.prototype.slice.call(args).forEach(function(item) {
fragment.appendChild(
item instanceof Node
? item
: document.createTextNode(String(item))
);
});
fn.apply(null, args);
return el;
return fragment;
}
function styleProp (prop) {
function styleProp(prop) {
//camelCase (ex: font-family => fontFamily)
prop = prop.replace(/(-\w)/g, function (match) {
prop = prop.replace(/(-\w)/g, function(match) {
return match[1].toUpperCase();

@@ -427,3 +355,3 @@ });

vendorProp = prefixes[i] + capProp;
if (vendorProp in div.style) {

@@ -437,13 +365,13 @@ return vendorProp;

switch (value.toLowerCase()) {
case 'true':
return true;
case 'true':
return true;
case 'false':
return false;
case 'false':
return false;
case 'undefined':
return undefined;
case 'undefined':
return undefined;
case 'null':
return null;
case 'null':
return null;
}

@@ -469,7 +397,7 @@

function createEvent (type, data) {
function createEvent(type, data) {
var event;
//native event
if (('on' + type) in div) {
if ('on' + type in div) {
event = document.createEvent('HTMLEvents');

@@ -481,4 +409,4 @@ event.initEvent(type, true, false);

//custom event
if (window.CustomEvent) {
return new CustomEvent(type, {detail: data || {}});
if (typeof window.CustomEvent === 'function') {
return new CustomEvent(type, { detail: data || {} });
}

@@ -492,2 +420,2 @@

return d;
}));
});

9

package.json
{
"name": "d_js",
"version": "1.10.0",
"version": "2.0.0",
"description": "DOM manipulation micro-library",

@@ -15,10 +15,7 @@ "main": "d.js",

"devDependencies": {
"eslint": "^4.2.0",
"gulp": "^3.9.1",
"gulp-uglify": "^3.0.0"
"prettier": "^1.5.3"
},
"scripts": {
"build": "gulp",
"lint": "eslint d.js"
"prettier": "prettier d.js --single-quote --tab-width 4 --write"
}
}

162

README.md

@@ -5,8 +5,6 @@ # d.js

A lot of this code is taken from http://youmightnotneedjquery.com/
* Compatible with modern browsers and IE >= 10
* Installable with bower `bower install d.js`
* Compatible with modern browsers and IE 11
* Installable with NPM `npm install d_js` and bower `bower install d.js`
* Compatible with AMD, commonJS and global javascript
* Only 5Kb (minified)
* Only 4Kb (minified)
* HTML & SVG support

@@ -17,3 +15,3 @@

```js
//Get an array with all .buttons elements
//Get all .buttons elements
var buttons = d.getAll('.buttons');

@@ -40,3 +38,3 @@

* **query** A string with the selector, array of elements, an object or a Node/NodeList/HTMLCollection instance
* **query** A string with the selector, an object `{"selector": elementContext}` or a Node/NodeList

@@ -52,5 +50,5 @@ ```js

Returns an array with all elements found:
Returns `NodeList` with all elements found:
* **query** A string with the selector, array of elements, an object or a Node/NodeList/HTMLCollection instance
* **query** A string with the selector or an object `{"selector": elementContext}`

@@ -65,5 +63,5 @@ ```js

Returns an array with all siblings of another.
Returns an `Array` with all siblings of another.
* **element** A string with the selector, array of elements, an object or a Node/NodeList/HTMLCollection instance
* **element** A string with the selector, an object `{"selector": elementContext}` or a Node/NodeList
* **query** Optional string to filter the siblings

@@ -76,14 +74,2 @@

### d.is(element, query)
Returns if the element matches with the selector:
* **element** The element
* **query** A string with the selector
```js
d.is(document.body, 'h1'); //false
d.is(document.body, 'body'); //true
```
### d.on(event, query, callback, useCapture)

@@ -94,3 +80,3 @@

* **event** A string with the event name or an instance of `Event`
* **query** A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance
* **query** A string with the selector, an object `{"selector": elementContext}` or a Node/NodeList
* **callback** The event callback

@@ -112,3 +98,3 @@ * **useCapture** (optional)

* **event** A string with the event name or an instance of `Event`
* **query** A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance
* **query** A string with the selector, an object `{"selector": elementContext}` or a Node/NodeList
* **target** A string with the target selector

@@ -131,3 +117,3 @@ * **callback** The event callback

* **event** A string with the event name or an instance of `Event`
* **query** A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance
* **query** A string with the selector, an object `{"selector": elementContext}` or a Node/NodeList
* **callback** The event callback

@@ -145,3 +131,3 @@ * **useCapture** (optional)

* **event** A string with the event name or an instance of `Event`
* **query** A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance
* **query** A string with the selector, an object `{"selector": elementContext}` or a Node/NodeList

@@ -152,12 +138,2 @@ ```js

### d.remove(query)
Removes the elements from the DOM
* **query** A string with the selector, array of elements or a Node/NodeList/HTMLCollection instance
```js
d.remove('.button');
```
### d.data()

@@ -188,50 +164,2 @@

### d.insertAfter(query, content)
Insert new elements after other
* **query** A string with the selector, array of elements or a NodeList/HTMLCollection instance
* **content** A string with the selector or html content, array of elements or a Node/NodeList/HTMLCollection instance
```js
d.insertAfter('li:last-child', newNodes);
d.insertAfter('li:last-child', '<li>new content</li>');
```
### d.insertBefore(query, content)
Insert new elements before other
* **query** A string with the selector, array of elements or a NodeList/HTMLCollection instance
* **content** A string with the selector or html content, array of elements or a Node/NodeList/HTMLCollection instance
```js
d.insertBefore('li:first-child', newNodes);
d.insertBefore('li:first-child', '<li>new content</li>');
```
### d.prepend(query, content)
Insert new elements as first children of other element
* **query** A string with the selector, array of elements or a NodeList/HTMLCollection instance
* **content** A string with the selector or html content, array of elements or a Node/NodeList/HTMLCollection instance
```js
d.prepend('ul', newLiNode);
d.prepend('ul', '<li>new content</li>');
```
### d.append(query, content)
Insert new elements as last children of other element
* **query** A string with the selector, array of elements or a NodeList/HTMLCollection instance
* **content** A string with the selector or html content, array of elements or a Node/NodeList/HTMLCollection instance
```js
d.append('ul', newLiNode);
d.append('ul', '<li>new content</li>');
```
### d.css()

@@ -265,64 +193,26 @@

Parses html code. Returns an element or an array of elements
Parses html and returns a `DocumentFragment`
* **html** A string with the code to parse
* **forceArray** To return an array of elements even if just one element has been parsed
```js
//parse one element
var button = d.parse('<button>Hello</button>');
button.classList.add('active');
var button = d.parse('<button>Hello</button>').firstChild;
//parse a list of elements
var buttons = d.parse('<button>Hello</button><button>World</button>');
buttons.forEach(function (el) {
el.classList.add('active');
});
```
## Chaining
## Polyfills
`d.js` allows to create `d` instances so you can chain some of these methods. Example:
This library provides also some polyfills to add support for some DOM manipulation convenience methods missing in Explorer and Edge:
```js
d('.button')
.css({
color: 'red',
fontFamily: 'Arial'
}).
.on('click', function (e) {
alert('Button clicked');
})
.append('.buttons');
//You can create new elements on the fly:
d('<button>Click me</button>')
.css({
color: 'red',
fontFamily: 'Arial'
})
.on('click', function () {
alert('Hi!');
})
.appendTo('.buttons');
```
Chainable methods:
Method | Description
------ | -----------
`.on(event, callback, useCapture)` | Attach an event.
`.off(event, callback, useCapture)` | Removes an event.
`.delegate(event, target, callback, useCapture)` | Delegates an event.
`.trigger(event, data)` | Trigger an event
`.css(name, value)` | Get/set css properties
`.data(name, value)` | Get/set data-* attributes
`.insertBefore(content)` | Insert new elements before the element
`.insertAfter(content)` | Insert new elements after the element
`.prepend(content)` | Insert new elements as first children
`.append(content)` | Insert new elements as last children
`.insertBeforeTo(query)` | Insert the element before other element
`.insertAfterTo(query)` | Insert the element after other element
`.prependTo(query)` | Insert the element as first child of other element
`.appendTo(query)` | Insert the element as last child of other element
* `Element.prototype.matches`
* `Element.prototype.closest`
* `Element.prototype.remove`
* `Element.prototype.append`
* `Element.prototype.prepend`
* `Element.prototype.before`
* `Element.prototype.after`
* `Element.prototype.replaceWith`
* `NodeList.prototype.forEach`
.eslintrc.js
demo/index.html
dist/d.js
gulpfile.js
tests/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc