ember-simple-dom-tools
Useless for the moment.
This library ember-simple-dom-tools is a collection of dom utilities as an alternative to jQuery or other dom manipulation libraries This library is not as fully featured as jQuery but does allow you to pull in the bare minimum dom manipulation functionality needed.
API Design summary
Use
Install addon
# ember-cli > 0.2.3
ember install ember-dom-simple-tools
# ember-cli <= 0.2.3
ember install:addon ember-dom-simple-tools
You can import individual modules
import select from 'ember-dom-simple-tools/select';
let selectedDom = select('.content');
-or-
import { select } from 'ember-dom-simple-tools';
let selectedDom = select('.content');
You can import the entire library on a single namespace
import dom from 'ember-dom-simple-tools';
let selectedDom = dom.select('.content');
Installation
-
git clone <repository-url>
this repositorycd ember-simple-dom-tools
npm install
ember serve
- Visit your app at http://localhost:4200.
-
npm test
(Runsember try:each
to test your addon against multiple Ember versions) ember test
ember test --server
ember build
For more information on using ember-cli, visit https://ember-cli.com/.
Functions
-
append(elements, destination) β
Array
|undefined
-
create(html) β
NodeList
-
empty(elements) β
Array.<(Elements|null)>
-
height(elements, [toHeight], [...DIMENSION_OPTIONS]) β
Number
|Array.<Number>
|undefined
-
Get or set height for DomElements passed into elements.
-
outerHeight(elements, [margins]) β
Array
-
outerWidth(elements, [margins]) β
Array
-
remove(elements) β
Array.<(Elements|null)>
-
select(selector, context) β
Array
-
width(elements, [toWidth], [...DIMENSION_OPTIONS]) β
Number
|Array.<Number>
|undefined
-
Get or set width for DomElements passed into elements.
Array
| undefined
append(elements, destination) β Kind: global function
Param | Type | Description |
---|---|---|
elements | Array |
An element or an array of elements to append |
destination | DomElement |
A DOM element to append elements to. |
NodeList
create(html) β Kind: global function
Param | Type | Description |
---|---|---|
html | string |
A valid string of html |
Array.<(Elements|null)>
empty(elements) β Kind: global function
Param | Type | Description |
---|---|---|
elements |
Element | Array.<Element> | NodeList | HTMLCollection
|
Elements to remove children from. |
Number
| Array.<Number>
| undefined
height(elements, [toHeight], [...DIMENSION_OPTIONS]) β Kind: global function
Summary: Get or set height for DomElements passed into elements.
Param | Type | Description |
---|---|---|
elements |
DomElement | NodeList | HTMLCollection | Array
|
A DomElement or an array of DomElements. |
[toHeight] |
string | integer
|
The toHeight param can be either a number or a string, if you wish to specify units you must pass a string. |
[...DIMENSION_OPTIONS] | DIMENSION_OPTIONS |
Returns: Number
| Array.<Number>
| undefined
- Either a length or an array of lengths depending on the options passed in, values are in px units. Returns undefined if an element is not found.
//index.html
...
<div class="content" style="height:500px" >
<p class="intro" style="height:500px" > </p>
<p class="intro" style="height:500px" ></p>
<p class="intro" style="height:500px" ></p>
</div>
...
//height.js
import {height,select,DIMENSION_OPTIONS} from 'ember-simple-dom-tools';
let contentDom = select('.content');
// height called with single element and no options will return a single value.
height(contentDom); // 500
// height called with a single element and the option DIMENSION_OPTIONS.RETURN_ARRAY
// will always return an array of values.
height(contentDom,DIMENSION_OPTIONS.RETURN_ARRAY); // [500]
// height called with an array of elements will return the height of the
// first element.
let paragraphDom = select('p');
height(paragraphDom); // 500
// height called with an array of elements and the option
// DIMENSION_OPTIONS.RETURN ARRAY will return an array of all the passed elements heights.
height(paragraphDom,DIMENSION_OPTIONS.RETURN_ARRAY); // [500,500,500]
// height called with single element, a value, and no options will set the
// elements height and return the newly set height.
height(contentDom,600); // 600
// height called with single element, a value, and DIMENSION_OPTIONS.RETURN_ARRAY
// will set the elements height and return the newly set height as an array.
height(contentDom,700,DIMENSION_OPTIONS.RETURN_ARRAY); // [700]
// height called with an array of elements and a value will set the first elements
// height and return the newly set height.
height(paragraphDomDom,700); // 700
// height called with an array of elements, a value and DIMENSION_OPTIONS.RETURN_ARRAY
// will set all elements height and return an array of heights.
height(paragraphDomDom,800,DIMENSION_OPTIONS.RETURN_ARRAY); // [800,800,800]
Array
outerHeight(elements, [margins]) β Kind: global function
Param | Type | Description |
---|---|---|
elements | Array |
An element or an array of elements to get outerHeight from |
[margins] | boolean |
If true include margins in the return value. |
Array
outerWidth(elements, [margins]) β Kind: global function
Param | Type | Description |
---|---|---|
elements | Array |
An element or an array of elements to get outerWidth from |
[margins] | boolean |
If true include margins in the return value. |
Array.<(Elements|null)>
remove(elements) β Kind: global function
Param | Type | Description |
---|---|---|
elements |
Element | Array.<Element> | NodeList | HTMLCollection
|
Elements to remove. |
Array
select(selector, context) β Kind: global function
Param | Type | Description |
---|---|---|
selector | string |
A valid css selector |
context | DomElement |
A DOM element to use as context |
Returns: Array
- Returns an array of elements matching the selector, or an empty array if no elements match.
A wrapper around native dom element selection methods document.getElementById, document.querySelectorAll, document.getElementsByClassName and document.getElementsByTagName.
select
Number
| Array.<Number>
| undefined
width(elements, [toWidth], [...DIMENSION_OPTIONS]) β Kind: global function
Summary: Get or set width for DomElements passed into elements.
Param | Type | Description |
---|---|---|
elements |
DomElement | NodeList | HTMLCollection | Array
|
A DomElement or an array of DomElements. |
[toWidth] |
string | integer
|
The toWidth param can be either a number or a string, if you wish to specify units you must pass a string. |
[...DIMENSION_OPTIONS] | DIMENSION_OPTIONS |
Returns: Number
| Array.<Number>
| undefined
- Either a length or an array of lengths depending on the options passed in, values are in px units. Returns undefined if an element is not found.
//index.html
...
<div class="content" style="width:500px" >
<p class="intro" style="width:500px" > </p>
<p class="intro" style="width:500px" ></p>
<p class="intro" style="width:500px" ></p>
</div>
...
//width.js
import {width,select,DIMENSION_OPTIONS} from 'ember-simple-dom-tools';
let contentDom = select('.content');
// width called with single element and no options will return a single value.
width(contentDom); // 500
// width called with a single element and the option DIMENSION_OPTIONS.RETURN_ARRAY
// will always return an array of values.
width(contentDom,DIMENSION_OPTIONS.RETURN_ARRAY); // [500]
// width called with an array of elements will return the width of the
// first element.
let paragraphDom = select('p');
width(paragraphDom); // 500
// width called with an array of elements and the option
// DIMENSION_OPTIONS.RETURN ARRAY will return an array of all the passed elements widths.
width(paragraphDom,DIMENSION_OPTIONS.RETURN_ARRAY); // [500,500,500]
// width called with single element, a value, and no options will set the
// elements width and return the newly set width.
width(contentDom,600); // 600
// width called with single element, a value, and DIMENSION_OPTIONS.RETURN_ARRAY
// will set the elements width and return the newly set width as an array.
width(contentDom,700,DIMENSION_OPTIONS.RETURN_ARRAY); // [700]
// width called with an array of elements and a value will set the first elements
// width and return the newly set width.
width(paragraphDomDom,700); // 700
// width called with an array of elements, a value and DIMENSION_OPTIONS.RETURN_ARRAY
// will set all elements width and return an array of widths.
width(paragraphDomDom,800,DIMENSION_OPTIONS.RETURN_ARRAY); // [800,800,800]