New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

@okiba/dom

Package Overview
Dependencies
Maintainers
3
Versions
29
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@okiba/dom - npm Package Compare versions

Comparing version
1.0.21
 to
1.0.22
+3
-3
package.json
{
"name": "@okiba/dom",
"version": "1.0.21",
"version": "1.0.22",
"description": "DOM helpers for okiba.js",

@@ -16,5 +16,5 @@ "main": "./index.js",

"dependencies": {
"@okiba/arrays": "^1.0.20"
"@okiba/arrays": "^1.0.21"
},
"gitHead": "34dac498cb773cf0ef5924386417c53ab621c6cc"
"gitHead": "fd9906fccd0a7cadce5e2ee8b70b1bad9b7842da"
}
+9
-6
README.md

@@ -17,14 +17,17 @@

You can grab it as an `npm` package
You can grab it as a `npm` package
```bash
npm i --save @okiba/dom
```
or you can grab it from core
```bash
npm i --save @okiba/core
```
```javascript
import dom from '@okiba/core/dom'
```
Or use it in the browser
```html
<!-- Minified -->
<script src="https://unpkg.com/@okiba/dom/dist/index.min.js"></script>
<!-- Full -->
<script src="https://unpkg.com/@okiba/dom/dist/index.js"></script>
<script type="module" src="https://unpkg.com/@okiba/dom/index.js"></script>
```

@@ -31,0 +34,0 @@ 

-497
dist/index.js
var OkibaDom = (function (exports) {
'use strict';
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
/**
* @module arrays
* @description Array utils for okiba js
*/
/**
* Cast an array-like object or single element to Array
* @example
* const elements = castArray(document.querySelectorAll('p')) // [p, p]
* const fruits = castArray(🍒) // [🍒]
*
* @param {any} castable Array to cast
* @returns {Array} The array-like converted to Array, or an Array containing the element
*/
function castArray(castable) {
if (castable === void 0) return castable;
if (castable instanceof Array) {
return castable;
}
if (castable.callee || castable instanceof NodeList || castable instanceof DOMTokenList || castable instanceof HTMLCollection) {
return Array.prototype.slice.call(castable);
}
return [castable];
}
/**
* Memo used to cache properties and methods trough the module
*/
var memo = {};
function getMatcher() {
if (!memo.matcher) {
for (var _i = 0, _arr = ['matchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector', 'webkitMatchesSelector']; _i < _arr.length; _i++) {
var k = _arr[_i];
if (k in Element.prototype) {
memo.matcher = k;
break;
}
}
}
return memo.matcher;
}
/**
* Generic event add/removal factory
*/
function eventBuilder(source, type, handler, action, options) {
if (!type || !handler) return false;
var elements = castArray(source);
var types = castArray(type);
var handlers = castArray(handler);
for (var i = 0; i < elements.length; ++i) {
for (var j = 0; j < types.length; ++j) {
elements[i]["".concat(action, "EventListener")](types[j], handlers[Math.min(j, handlers.length - 1)], options);
}
}
return true;
}
/**
* Selects a DOM Element with a certain id
*
* @example
* import {byId} from '@okiba/dom'
* const apple = byId('apple')
* console.log(apple) // [div.apple]
*
* @param {String} id DOM id you are looking for
*
* @return {Element} A DOM Element matching `id`
*/
function byId(id) {
return document.getElementById(id);
}
/**
* Selects a DOM Element, scoped to element
*
* @example
* import {qs} from '@okiba/dom'
* const pear = qs('.pear')
* console.log(pear) // [div.pear]
*
* @param {String} selector DOM Selector (tag, class, id, anything that can be passed to `querySelector` API)
* @param {Element} [element=document] DOM Element to scope the selection query, only childs of that element will be tageted
*
* @return {Element} A DOM Element matching `selector`
*/
function qs(selector) {
var element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
return element.querySelector(selector);
}
/**
* Selects an array of DOM Elements, scoped to element
*
* @example
* import {qsa} from '@okiba/dom'
* const fruits = qsa('.fruit')
* console.log(fruits) // [div.fruit, div.fruit]
*
* @param {String} selector DOM Selector (tag, class, id, anything that can be passed to `querySelector` API)
* @param {Element} [element=document] DOM Element to scope the selection query, only childs of that element will be tageted
*
* @return {Element[]} An array of DOM elements matching `selector`
*/
function qsa(selector) {
var element = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : document;
return castArray(element.querySelectorAll(selector));
}
/**
* Attaches an event listener to a DOM Element, or an array of.
*
* @example
* import {qsa, on} from '@okiba/dom'
* const buttons = qsa('.button')
*
* on(buttons, 'click', onClick)
* on(buttons, ['mouseenter', 'mouseleve'], onMouseChange)
*
* // adds `onClick` to 'click' and `onMouseChange` to both 'mouseenter' and 'mouseleave'
* on(buttons, ['click', mouseenter', 'mouseleve'], [onClick, onMouseChange])
*
* @param {(Element|Element[])} [window] source
* the element which will trigger the event
* @param {(String|String[])} type
* the event name to bind. Or an array of
* @param {(Function|Function[])} handler
* the callback to be fired at the event. If an array is supplied the handlers will be bound in order,
* if there are less handlers than event types, the last handler is bound to all remaining events.
*
* @return {Boolean} Success of the binding
*/
function on(source, type, handler, options) {
return eventBuilder(source, type, handler, 'add', options);
}
/**
* Detached an event listener from a DOM Element, or an array of.
*
* @example
* import {qs, off} from '@okiba/dom'
* const button = qs('.button')
*
* button.addEventListener('click', onButtonClick)
* // or okiba's `on` on(button, 'click')
*
* off(button, 'click', onButtonClick)
*
* // removes `onMouseChange` from both 'mouseenter' and 'mouseleave'
* off(buttons, ['mouseenter', 'mouseleve'], onMouseChange)
*
* // removes `onClick` from 'click' and `onMouseChange` from both 'mouseenter' and 'mouseleave'
* off(buttons, ['click', mouseenter', 'mouseleve'], [onClick, onMouseChange])
*
* @param {(Element|Element[])} [window] source
* Element which will trigger the event
* @param {(String|String[])} type
* Event name to unbind. Or an array of
* @param {(Function|Function[])} handler
* Callback bound to the event. If an array is supplied the handlers will be unbound in order,
* if there are less handlers than event types, the last handler is unbound from all remaining events.
*
* @return {Boolean} Success of the unbinding
*/
function off(source, type, handler, options) {
return eventBuilder(source, type, handler, 'remove', options);
}
/**
*
* Read mouse and touch position in the same way
*
* @example
* import {eventCoords, on} from '@okiba/dom'
* on(window, ['mousemove', 'touchmove'], onMove)
*
* function onMove(e){
* const coords = eventCoords(e)
* console.log(coords)
* }
*
* @param {Event} DOM Event
*
* @return {Object} Event position coordinates (clientX and ClientY)
*/
function eventCoords(event) {
var coords = event;
if (event.type.indexOf('touch') === 0) {
coords = event.touches[0] || event.changedTouches[0];
}
return {
clientX: coords.clientX,
clientY: coords.clientY
};
}
/**
* Gets top and left offsets of an element
*
* @example
* import {qs, offset} from '@okiba/dom'
* const el = qs('.something')
* const offsets = offset(el)
* console.log(offsets) // Logs: {top: 100, left: 100}
*
* @param {Element} el The element you want to get offsets of
*
* @return {Object} Object containing `top` and `left` offsets
*/
function offset(el) {
var left = 0;
var top = 0;
while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
left += el.offsetLeft - (el.tagName !== 'BODY' ? el.scrollLeft : 0);
top += el.offsetTop - (el.tagName !== 'BODY' ? el.scrollTop : 0);
el = el.offsetParent;
}
return {
top: top,
left: left
};
}
/**
* Useful to normalize parameters accepted by modules which work with dom nodes.
* If you need to have an array of Elements and you want to accept any of: String, String array, Element, Element array
*
*
* @example
* import {qs, getElements} from '@okiba/dom'
* const els1 = getElements(['.some', '#thing']) // => [div.some, span#it]
*
* const el = qs('.element')
* const els2 = getElements(el) // => [el]
*
* @param {(String|String[]|Element|Element[])} target The target you want to be sure to obtain as an array of Elements
*
* @return {Element[]} An array of Elements
*/
function getElements(target) {
var els;
if (typeof target === 'string') {
els = qsa(target);
}
if (target instanceof Node) {
els = [target];
}
if (target instanceof NodeList) {
els = castArray(target);
}
if (target instanceof Array) {
if (target[0] instanceof Node) {
return target;
} else if (typeof target[0] === 'string') {
els = target.reduce(function (acc, curr) {
return acc.concat(qsa(curr));
}, []);
}
}
if (!els) {
throw new Error('No target provided');
}
return els;
}
/**
* Checks if an element matches at least one in a list of selectors.
*
* @example
* import {matches} from '@okiba/dom'
*
* const isInternal = !!matches(a, '.internal')
* //...
* const match = matches(myDiv, ['.red', '.green', '.blue])
* myDiv.style.backgroundColor = match.replace('.', '')
*
* @param {Element} el Element to check
* @param {(String|Array)} selectors Selector (ora array thereof) which the element should match
* @param {Boolean} testAncestors If true, extends match test upward in the ancestors
*
* @return {String|null} First matching selector, `null` if there was no match
*/
function matches(el) {
var selectors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
var testAncestors = arguments.length > 2 ? arguments[2] : undefined;
var matcher = getMatcher();
var matched = castArray(selectors).find(function (selector) {
return el[matcher] && el[matcher](selector);
});
if (!matched && testAncestors) {
matched = castArray(selectors).find(function (selector) {
return isChildOf(el, selector);
});
}
return matched;
}
/**
* Check if a given element is child of another. The target to match can be an element, selector, or array of selectors.
*
* @example
* import {isChildOf} from '@okiba/dom'
*
* const isChildOfAnchor = isChildOf(myNode, 'a')
* //... or
* const isInsideButton = isChildOf(myNode, myButton)
*
* @param {Element} el Element to check
* @param {(Element|String|String[])} target Selector to match or Element checked for parent relationship
*
* @return {Boolean} Boolean of match found
*/
function isChildOf(el, target) {
var isSelector = typeof target === 'string';
var isMatching = false;
do {
isMatching = isSelector ? matches(el, target) : el === target;
el = el.parentNode;
} while (!isMatching && el);
return !!isMatching;
}
/**
* Delegate an event callback.
* It will be executed only if the event target has an ancestor which matches the given target
*
* @example
* import {delegate} from '@okiba/dom'
*
* const undelegate = delegate('a.internal-navigation', 'click', onNavigationClick, {capture: true})
*
* function disableNavigation() {
* undelegate()
* }
*
* @param {(String|Element)} target Selector or Element to match
* @param {String} event Event to bind to
* @param {Function} callback Function to be executed at match
* @param {(Object|Boolean)} options Options to be to `on`
* @param {(Window|HTMLDocument|HTMLElement)} context Delegation root element
*
* @return {Function} Function to be called to remove the delegated callback
*/
function delegate(target, event, callback, options) {
var context = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : window;
function check(e) {
if (isChildOf(e.target, target)) {
callback(e);
}
}
on(context, event, check, options);
return function undelegate() {
off(context, event, check);
};
}
/**
* Custom event factory.
* Creates a cross-browsers compatible custom event instance
*
* @param {String} type The custom event type
* @param {Object} options The custom event options
*
* @example
* import {createCustomEvent} from '@okiba/dom'
*
* const enemy = document.getElementById('enemy')
* const shinobiAttack = createCustomEvent('shinobi-attack', {
* detail: { damage: 3 }
* })
*
* enemy.setAttribute('data-life-points', 100)
*
* enemy.addEventListener('shinobi-attack', e => {
* const currentLifePoints = enemy.getAttribute('data-life-points')
* const updatedlifePoints = Math.max(0, currentLifePoints - e.detail.damage)
* enemy.setAttribute('data-life-points', updatedlifePoints)
* })
*
* enemy.dispatchEvent(shinobiAttack)
*
* console.log(enemy.getAttribute('data-life-points')) // Logs: 97
*
* @return {CustomEvent} The custom event instance
*/
function createCustomEvent(type) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var config = _objectSpread2({
bubbles: false,
cancelable: false,
detail: null
}, options);
if (typeof window.CustomEvent === 'function') {
return new window.CustomEvent(type, config);
}
var event = document.createEvent('CustomEvent');
event.initCustomEvent(type, config.bubbles, config.cancelable, config.detail);
return event;
}
exports.byId = byId;
exports.createCustomEvent = createCustomEvent;
exports.delegate = delegate;
exports.eventCoords = eventCoords;
exports.getElements = getElements;
exports.isChildOf = isChildOf;
exports.matches = matches;
exports.off = off;
exports.offset = offset;
exports.on = on;
exports.qs = qs;
exports.qsa = qsa;
return exports;
}({}));
-1
dist/index.min.js
var OkibaDom=function(e){"use strict";function r(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function l(e){return void 0===e?e:e instanceof Array?e:e.callee||e instanceof NodeList||e instanceof DOMTokenList||e instanceof HTMLCollection?Array.prototype.slice.call(e):[e]}var c={};function o(e,t,n,r,o){if(!t||!n)return!1;for(var c=l(e),i=l(t),f=l(n),u=0;u<c.length;++u)for(var a=0;a<i.length;++a)c[u]["".concat(r,"EventListener")](i[a],f[Math.min(a,f.length-1)],o);return!0}function n(e){return l((1<arguments.length&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll(e))}function i(e,t,n,r){return o(e,t,n,"add",r)}function f(e,t,n,r){return o(e,t,n,"remove",r)}function u(t){var e=1<arguments.length&&void 0!==arguments[1]?arguments[1]:[],n=2<arguments.length?arguments[2]:void 0,r=function(){if(!c.matcher)for(var e=0,t=["matchesSelector","mozMatchesSelector","msMatchesSelector","oMatchesSelector","webkitMatchesSelector"];e<t.length;e++){var n=t[e];if(n in Element.prototype){c.matcher=n;break}}return c.matcher}(),o=l(e).find(function(e){return t[r]&&t[r](e)});return!o&&n&&(o=l(e).find(function(e){return a(t,e)})),o}function a(e,t){for(var n="string"==typeof t,r=!1;r=n?u(e,t):e===t,e=e.parentNode,!r&&e;);return!!r}return e.byId=function(e){return document.getElementById(e)},e.createCustomEvent=function(e){var t=function(o){for(var e=1;e<arguments.length;e++){var c=null!=arguments[e]?arguments[e]:{};e%2?r(Object(c),!0).forEach(function(e){var t,n,r;t=o,r=c[n=e],n in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r}):Object.getOwnPropertyDescriptors?Object.defineProperties(o,Object.getOwnPropertyDescriptors(c)):r(Object(c)).forEach(function(e){Object.defineProperty(o,e,Object.getOwnPropertyDescriptor(c,e))})}return o}({bubbles:!1,cancelable:!1,detail:null},1<arguments.length&&void 0!==arguments[1]?arguments[1]:{});if("function"==typeof window.CustomEvent)return new window.CustomEvent(e,t);var n=document.createEvent("CustomEvent");return n.initCustomEvent(e,t.bubbles,t.cancelable,t.detail),n},e.delegate=function(t,e,n,r){var o=4<arguments.length&&void 0!==arguments[4]?arguments[4]:window;function c(e){a(e.target,t)&&n(e)}return i(o,e,c,r),function(){f(o,e,c)}},e.eventCoords=function(e){var t=e;return 0===e.type.indexOf("touch")&&(t=e.touches[0]||e.changedTouches[0]),{clientX:t.clientX,clientY:t.clientY}},e.getElements=function(e){var t;if("string"==typeof e&&(t=n(e)),e instanceof Node&&(t=[e]),e instanceof NodeList&&(t=l(e)),e instanceof Array){if(e[0]instanceof Node)return e;"string"==typeof e[0]&&(t=e.reduce(function(e,t){return e.concat(n(t))},[]))}if(!t)throw new Error("No target provided");return t},e.isChildOf=a,e.matches=u,e.off=f,e.offset=function(e){for(var t=0,n=0;e&&!isNaN(e.offsetLeft)&&!isNaN(e.offsetTop);)t+=e.offsetLeft-("BODY"!==e.tagName?e.scrollLeft:0),n+=e.offsetTop-("BODY"!==e.tagName?e.scrollTop:0),e=e.offsetParent;return{top:n,left:t}},e.on=i,e.qs=function(e){return(1<arguments.length&&void 0!==arguments[1]?arguments[1]:document).querySelector(e)},e.qsa=n,e}({});