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 repository

  • cd ember-simple-dom-tools
  • npm install

  ## Running

  • ember serve
  • Visit your app at http://localhost:4200.

  ## Running Tests

  • npm test (Runs ember try:each to test your addon against multiple Ember versions)
  • ember test
  • ember test --server

  ## Building

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

---

append(elements, destination) ⇒ Array | undefined

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.

---

create(html) ⇒ NodeList

Kind: global function

Param	Type	Description
html	string	A valid string of html

---

empty(elements) ⇒ Array.<(Elements|null)>

Kind: global function

Param	Type	Description
elements	Element | Array.<Element> | NodeList | HTMLCollection	Elements to remove children from.

---

height(elements, [toHeight], [...DIMENSION_OPTIONS]) ⇒ Number | Array.<Number> | undefined

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]
 
 

---

outerHeight(elements, [margins]) ⇒ Array

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.

---

outerWidth(elements, [margins]) ⇒ Array

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.

---

remove(elements) ⇒ Array.<(Elements|null)>

Kind: global function

Param	Type	Description
elements	Element | Array.<Element> | NodeList | HTMLCollection	Elements to remove.

---

select(selector, context) ⇒ Array

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

---

width(elements, [toWidth], [...DIMENSION_OPTIONS]) ⇒ Number | Array.<Number> | undefined

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]