Comparing version 1.0.0 to 1.1.0
11
index.js
@@ -0,1 +1,6 @@ | ||
import inViewport from './src/dimension/in-viewport'; | ||
import scrollbarSize from './src/dimension/scrollbar-size'; | ||
import viewportHeight from './src/dimension/viewport-height'; | ||
import viewportWidth from './src/dimension/viewport-width'; | ||
import create from './src/element/create'; | ||
@@ -16,2 +21,8 @@ import {addClass, hasClass, removeClass} from './src/element/class'; | ||
export { | ||
// Dimension | ||
inViewport, | ||
scrollbarSize, | ||
viewportHeight, | ||
viewportWidth, | ||
// Element | ||
@@ -18,0 +29,0 @@ create, |
{ | ||
"name": "domestique", | ||
"version": "1.0.0", | ||
"version": "1.1.0", | ||
"description": "A modular DOM helper library.", | ||
@@ -16,2 +16,3 @@ "repository": "https://github.com/jsor/domestique.git", | ||
"utility", | ||
"dimension", | ||
"element", | ||
@@ -59,6 +60,6 @@ "event", | ||
"babel-preset-env": "^1.7.0", | ||
"browserstack-runner": "^0.7.0", | ||
"browserstack-runner": "^0.8.0", | ||
"chai": "^4.1.2", | ||
"istanbul-instrumenter-loader": "^3.0.1", | ||
"karma": "^2.0.4", | ||
"karma": "^3.0.0", | ||
"karma-chai": "^0.1.0", | ||
@@ -65,0 +66,0 @@ "karma-chrome-launcher": "^2.2.0", |
167
README.md
@@ -39,21 +39,10 @@ Domestique | ||
* [Element](#element) | ||
* [create()](#create) | ||
* [addClass()](#addclass) | ||
* [removeClass()](#removeclass) | ||
* [hasClass()](#hasclass) | ||
* [data()](#data) | ||
* [Event](#event) | ||
* [ready()](#ready) | ||
* [on()](#on) | ||
* [off()](#off) | ||
* [delegate()](#delegate) | ||
* [dispatch()](#dispatch) | ||
* [Query](#query) | ||
* [find()](#find) | ||
* [closest()](#closest) | ||
* [matches()](#matches) | ||
```javascript | ||
import { | ||
// Dimension | ||
scrollbarSize, | ||
viewport, | ||
viewportHeight, | ||
viewportWidth, | ||
// Element | ||
@@ -80,5 +69,96 @@ create, | ||
API | ||
--- | ||
* [Dimension](#dimension) | ||
* [inViewport()](#inviewport) | ||
* [scrollbarSize()](#scrollbarsize) | ||
* [viewportHeight()](#viewportheight) | ||
* [viewportWidth()](#viewportwidth) | ||
* [Element](#element) | ||
* [create()](#create) | ||
* [addClass()](#addclass) | ||
* [removeClass()](#removeclass) | ||
* [hasClass()](#hasclass) | ||
* [data()](#data) | ||
* [Event](#event) | ||
* [ready()](#ready) | ||
* [on()](#on) | ||
* [off()](#off) | ||
* [delegate()](#delegate) | ||
* [dispatch()](#dispatch) | ||
* [Query](#query) | ||
* [find()](#find) | ||
* [closest()](#closest) | ||
* [matches()](#matches) | ||
### Dimension | ||
### inViewport() | ||
``` | ||
inViewport(element: Element): bool | ||
``` | ||
Returns `true` if any part of an element is in the viewport. | ||
#### Example | ||
```javascript | ||
const inVp = inViewport(element); | ||
``` | ||
### scrollbarSize() | ||
``` | ||
scrollbarSize(): number | ||
``` | ||
Returns the size of the scrollbar in pixels. | ||
#### Example | ||
```javascript | ||
const size = scrollbarSize(); | ||
``` | ||
### viewportHeight() | ||
``` | ||
viewportHeight(): number | ||
``` | ||
Returns the viewport height. | ||
Note: The height represent the CSS viewport height | ||
([@media (height)](https://www.w3.org/TR/mediaqueries-4/#height)) including the | ||
size of a rendered scroll bar (if any). | ||
#### Example | ||
```javascript | ||
const vpHeight = viewportHeight(); | ||
``` | ||
### viewportWidth() | ||
``` | ||
viewportWidth(): number | ||
``` | ||
Returns the viewport width. | ||
Note: The width represent the CSS viewport width | ||
([@media (width)](https://www.w3.org/TR/mediaqueries-4/#width)) including the | ||
size of a rendered scroll bar (if any). | ||
#### Example | ||
```javascript | ||
const vpWidth = viewportWidth(); | ||
``` | ||
### Element | ||
### create() | ||
#### create() | ||
@@ -89,5 +169,6 @@ ``` | ||
Creates a DOM element from a HTML string. | ||
Creates a DOM element from a HTML string. If it's already a DOM node, the node | ||
is returned as is. | ||
#### Example | ||
##### Example | ||
@@ -98,3 +179,3 @@ ```javascript | ||
### addClass() | ||
#### addClass() | ||
@@ -107,3 +188,3 @@ ``` | ||
#### Example | ||
##### Example | ||
@@ -115,3 +196,3 @@ ```javascript | ||
### removeClass() | ||
#### removeClass() | ||
@@ -124,3 +205,3 @@ ``` | ||
#### Example | ||
##### Example | ||
@@ -132,3 +213,3 @@ ```javascript | ||
### hasClass() | ||
#### hasClass() | ||
@@ -141,3 +222,3 @@ ``` | ||
#### Example | ||
##### Example | ||
@@ -149,3 +230,3 @@ ```javascript | ||
### data() | ||
#### data() | ||
@@ -158,3 +239,3 @@ ``` | ||
#### Example | ||
##### Example | ||
@@ -187,3 +268,3 @@ ```html | ||
### ready() | ||
#### ready() | ||
@@ -198,3 +279,3 @@ ``` | ||
#### Example | ||
##### Example | ||
@@ -207,3 +288,3 @@ ```javascript | ||
### on() | ||
#### on() | ||
@@ -228,3 +309,3 @@ ``` | ||
#### Example | ||
##### Example | ||
@@ -250,3 +331,3 @@ ```javascript | ||
### off() | ||
#### off() | ||
@@ -259,3 +340,3 @@ ``` | ||
#### Example | ||
##### Example | ||
@@ -271,3 +352,3 @@ ```javascript | ||
### delegate() | ||
#### delegate() | ||
@@ -284,3 +365,3 @@ ``` | ||
#### Example | ||
##### Example | ||
@@ -306,6 +387,6 @@ ```javascript | ||
### dispatch() | ||
#### dispatch() | ||
``` | ||
dispatch(target: EventTarget, type: string[, eventInit: CustomEventInit]): function | ||
dispatch(target: EventTarget, type: string[, eventInit: CustomEventInit]): bool | ||
``` | ||
@@ -316,8 +397,12 @@ | ||
#### Example | ||
The function returns `false` if the event is cancelable and at least one of the | ||
event handlers which handled this event called `Event.preventDefault()`. | ||
Otherwise it returns `true`. | ||
##### Example | ||
```javascript | ||
dispatch(document, 'click'); | ||
const clickNotCancelled = dispatch(document, 'click'); | ||
dispatch( | ||
const myEventNotCancelled = dispatch( | ||
document.querySelector('.my-button'), | ||
@@ -324,0 +409,0 @@ 'my:event', |
@@ -0,2 +1,10 @@ | ||
function check(element) { | ||
return element && element.classList; | ||
} | ||
export function addClass(element, classNames) { | ||
if (!check(element)) { | ||
return; | ||
} | ||
classNames.split(' ').forEach(className => { | ||
@@ -8,2 +16,6 @@ element.classList.add(className); | ||
export function removeClass(element, classNames) { | ||
if (!check(element)) { | ||
return; | ||
} | ||
classNames.split(' ').forEach(className => { | ||
@@ -15,2 +27,6 @@ element.classList.remove(className); | ||
export function hasClass(element, classNames) { | ||
if (!check(element)) { | ||
return; | ||
} | ||
return classNames.split(' ').every(className => { | ||
@@ -17,0 +33,0 @@ return element.classList.contains(className); |
@@ -23,2 +23,6 @@ /* | ||
export default function create(html) { | ||
if (html.nodeType) { | ||
return html; | ||
} | ||
let element = document.createElement('div'); | ||
@@ -25,0 +29,0 @@ |
@@ -10,2 +10,6 @@ /* | ||
export default function data(element, key) { | ||
if (!element || typeof element.getAttribute !== 'function') { | ||
return null; | ||
} | ||
const name = 'data-' + key.replace(regExpMultiDash, '-$&').toLowerCase(); | ||
@@ -12,0 +16,0 @@ const data = element.getAttribute(name); |
export default function dispatch(target, type, eventInit = {}) { | ||
if (!target || typeof target.dispatchEvent !== 'function') { | ||
return true; | ||
} | ||
eventInit.bubbles = eventInit.bubbles || false; | ||
@@ -3,0 +7,0 @@ eventInit.cancelable = eventInit.cancelable || false; |
import optionsArgument from './options-argument'; | ||
export default function off(target, type, listener, options = {capture: false}) { | ||
if (!target || typeof target.removeEventListener !== 'function') { | ||
return () => {}; | ||
} | ||
target.removeEventListener(type, listener, optionsArgument(options)); | ||
} |
@@ -6,2 +6,6 @@ import optionsSupport from './options-support'; | ||
export default function on(target, type, listener, options = {capture: false}) { | ||
if (!target || typeof target.addEventListener !== 'function') { | ||
return () => {}; | ||
} | ||
let callback = listener; | ||
@@ -8,0 +12,0 @@ |
import matches from './matches'; | ||
export default function closest(element, selector) { | ||
if (!element || !selector) { | ||
if (!element) { | ||
return null; | ||
@@ -17,3 +17,3 @@ } | ||
element = element.parentElement || element.parentNode; | ||
element = element.parentNode; | ||
} while (element && element.nodeType === 1); | ||
@@ -20,0 +20,0 @@ |
@@ -1,11 +0,12 @@ | ||
export default function find(selector, element = document) { | ||
if ( | ||
!selector || | ||
!element || | ||
typeof element.querySelectorAll !== 'function' | ||
) { | ||
export default function find(selector, element) { | ||
// Check here for explicitly passed element argument. | ||
// find('selector', undefined) must return an empty array instead of using | ||
// document as context. | ||
const context = arguments.length > 1 ? element : document; | ||
if (!context || typeof context.querySelectorAll !== 'function') { | ||
return []; | ||
} | ||
return [].slice.call(element.querySelectorAll(selector)); | ||
return [].slice.call(context.querySelectorAll(selector)); | ||
} |
export default function matches(element, selector) { | ||
if (!element || !selector) { | ||
if (!element) { | ||
return false; | ||
@@ -10,3 +10,7 @@ } | ||
return nativeMatches && nativeMatches.call(element, selector); | ||
if (typeof nativeMatches !== 'function') { | ||
return false; | ||
} | ||
return nativeMatches.call(element, selector); | ||
} |
21932
21
350
456