ember-simple-dom-tools
The default blueprint for ember-cli addons.
Last updated 3 years ago by nullrocket .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ember-simple-dom-tools 
SYNC missed versions from official npm registry.

ember-simple-dom-tools

TravisCI Build Status

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

    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]


Current Tags

  • 0.0.27                                ...           latest (3 years ago)

16 Versions

  • 0.0.27                                ...           3 years ago
  • 0.0.26                                ...           3 years ago
  • 0.0.25                                ...           3 years ago
  • 0.0.24                                ...           3 years ago
  • 0.0.23                                ...           3 years ago
  • 0.0.22                                ...           3 years ago
  • 0.0.21                                ...           3 years ago
  • 0.0.20                                ...           3 years ago
  • 0.0.19                                ...           3 years ago
  • 0.0.18                                ...           3 years ago
  • 0.0.17                                ...           3 years ago
  • 0.0.16                                ...           3 years ago
  • 0.0.15                                ...           3 years ago
  • 0.0.14                                ...           3 years ago
  • 0.0.13                                ...           3 years ago
  • 0.0.0-development                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |