ember-simple-dom-tools v0.0.27

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

Kind: global function

create(html) ⇒ NodeList

Kind: global function

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

Kind: global function

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

Kind: global function
Summary: Get or set height for DomElements passed into elements.

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

outerWidth(elements, margins) ⇒ Array

Kind: global function

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

Kind: global function

select(selector, context) ⇒ Array

Kind: global function

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.

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]