rvjs-dom v0.2.6

rvjs-dom

HTML Dom basic manipulations

import * as Dom from "rvjs-dom";

Dom.ClassName

Object \ Class name html nodes manipulations

• ClassName.set

  	>`Function( {String | HTMLCollection | Dom.Collection} nodes, {String} classes ) : {Dom.ClassName}` \
  	Set class or classes for nodes

• ClassName.add

  	>`Function( {String | HTMLCollection | Dom.Collection} nodes, {String} classes) : {Dom.ClassName}` \
  	Add class or classes for nodes

• ClassName.pick

  	>`Function( {Boolean} add, ...args )` \
  	Add or Remove class classes for nodes, the first argument indicates a function further arguments are passed to the function

• ClassName.remove

  	>`Function({String | HTMLCollection | Dom.Collection} nodes, {String} classes) : {Dom.ClassName}` \
  	Remove class or classes for nodes

• ClassName.toggle

  	>`Function({String | HTMLCollection | Dom.Collection} nodes, {String} classes) : {Dom.ClassName}` \
  	Toggle class or classes for nodes

• ClassName.has

  	>`Function({String | HTMLCollection | Dom.Collection} nodes, {String} classes[, {Function} callback]) : {Boolean}` \
  	Check class or classes assigned for nodes \
  	If classes is found and $callback arguments is function then $callback function will be called

• ClassName.not

  	>`Function({String | HTMLCollection | Dom.Collection} nodes, {String} classes[, {Function} callback]) : {Boolean}` \
  	Check class or classes is not assigned for nodes \
  	If classes is not found and $callback arguments is function then $callback function will be called

• ClassName.dispatch

  	>`Function({String | HTMLCollection | Dom.Collection} nodes, {String} classes, {Function} callback) : {Dom.ClassName | Boolean}` \
  	Short method for all `Dom.ClassName` methods: \
  	`: class-name` - set \
  	`+ class-name` - add \
  	`- class-name` - remove \
  	`~ class-name` - toggle \
  	`? class-name` - has \
  	`! class-name` - not \
  	`?` and `!` used $callback method and return `Boolean`. Other method return `ClassName` object

Dom.Collection

Class \ Create html nodes collection

• Collection

  	> `Class new Dom.Collection({*} nodes[, {Boolean} isWindow = false])` \
  	Create new Collection

• Collection.make

  	> `Function({*} nodes[, {Boolean} isWindow = false])` \
  	Similarly to new Collection( ... args ) but you may use Collection instance for the nodes argument

Collection instance

• constructor

  	>`Function({*} nodes[, {Boolean} isWindow = false])` \
  	New instance

• fill

  	>`Function({*} nodes[, {Boolean} isWindow = false])` \
  	Add new nodes

• forEach

  	>`Function({Function} callback)` \
  	Similarly to Array.prototype.forEach

• map

  	>`Function({Function} callback)`\
  	Similarly to Array.prototype.map, return new Collection instance

import {Collection, Element} from "rvjs-dom";

let collection_1 = new Collection(document.body);
let collection_2 = new Collection(['body', 'footer', 'header, #head', Element.byId("app")]);
let collection_3 = new Collection(Element.byQuery("div.class-name")); // Similarly to
let collection_4 = new Collection("div.class-name");

// collection_5 === collection_1
let collection_5 = Collection.make(collection_1);

Dom.Element

Object \ Default html nodes manipulations

• Element.byId

  	>`Function({String} name) : {HtmlElement | null}` \
  	Similarly to calling the `document.getElementById(name)` function

• Element.byQueryOne

  	>`Function({String} name[, {HtmlElement} element = null])` \
  	Similarly to calling the `HtmlElement.querySelector(name)` function \
  	If the element is null it is used `document` object

• Element.byQuery

  	>`Function({String} name[, {HtmlElement} element = null])` \
  	Similarly to calling the `HtmlElement.querySelectorAll(name)` function \
  	If the element is null it is used `document` object

• Element.byClassName

  	>`Function({String} name)` \
  	Similarly to calling the `document.getElementsByClassName(name)` function

• Element.byTag

  	>`Function({String} name)` \
  	Similarly to calling the `document.getElementsByTagName(name)` function

• Element.byName

  	>`Function({String} name)` \
  	Similarly to calling the `document.getElementsByName(name)` function

• Element.create

  	>`Function({Object} properties) : {HtmlElement}`
  	Create HtmlElement \
  	Properties:
  	- `{String} name` - tag name, default `"div"`, you can use selectors, e.g. `"div#id.class-name"`
  	- `{String} className` - class name
  	- `{String} id` - id attribute
  	- `{String} nameSpace` - name space
  	- `{Object} attrs` - html attributes
  	- `{Object} props` - properties for element
  	- `{Object} data` - data attributes for element
  	- `{Object} events` - events for element
  	- `{HtmlElement} parent` - if exists the `parent` property then the element will be appended to parent
  	- `{Boolean} prepend` - if exists the `parent` property and `prepend` is `true` then the element will be prepended to parent
  	- `{String | Function} text` - append TextNode to the created HtmlElement
  	- `{String | Function} html` - set html text to the created HtmlElement (used property `innerHTML`)
  	- `{Array} children` - children elements
  	- `{*} child` - child element

• Element.css

  	>`Function({*} nodes, {String} name, {String} value) : {Dom.Collection}` \
  	Assign style property `name` equal to `value` for all `nodes`

• Element.css

  	>`Function({*} nodes, {Object} styles) : {Dom.Collection}`\

  Assign multiply styles properties

Dom.Evn

Object \ Add and remove default events for html nodes

• Evn.support

  	>`Object {}` \
  	Mixed support values

• Evn.add

  	>`Function({*} nodes, {String} event, {Function} callback)` \
  	Add `event` for nodes

• Evn.remove

  	>`Function({*} nodes, {String} event, {Function} callback)` \
  	Remove `event` for nodes

• Evn.resize

  	>`Function({Function} callback[, {Function} removeCallback])` \
  	Add resize event for window object

• Evn.scroll

  	>`Function({Function} callback[, {Function} removeCallback])` \
  	Add scroll event for window object

• Evn.on

  	>`Function({String} event, {Function} callback[, {Function} removeCallback])` \
  	Add `event` for window object

• Evn.hover

  	>`Function({*} nodes, {Function} enterCallback, {Function} leaveCallback[, {Function} removeCallback])` \
  	Add mouseenter and mouseleave events for nodes

• Evn.ready

  	>`Function({Function} eventCallback)` \
  	Add callback for DOMContentLoaded event

• Evn.native

  	>`Function({Boolean | String} add, {HtmlElement} node, {String} event, {Function} callback[, {*} useCapture=false])` \
  	Use native event listener for fast

Dom.Offset

• Offset

  	> `Function({HtmlElement} element[, {Boolean} fixed = false]) : {Object}` \
  	Get offset of html node \
  	Use `fixed = "auto"` for detect fixed element \
  	Return object with properties: 
  	- `{Number} width` - HtmlElement width content
  	- `{Number} height` - HtmlElement height content
  	- `{Number} top` - HtmlElement offset top of viewport 
  	- `{Number} left` - HtmlElement offset left of viewport 

Dom.Page

Object \ Page page (browser window) offset properties: top, left, width, height, etc.

• {Number} width - document width
• {Number} height - document height
• {Number} top - document top scroll
• {Number} left - document left scroll
• {Number} viewportWidth - document viewport width
• {Number} viewportHeight - document viewport height
• {Function} all() - get all properties as Object

Dom.Style

Function \ Css property (HtmlElement.style) manipulations

• Style

  	> Function( {HtmlElement} element, {String} name, {String | Number} value ) \
  	Add `name` property to `element` style

import {Element, Style} from "rvjs-dom";

Style( Element.byId("app"), "--red", "#900");
Style( Element.byId("app"), "border", "1px solid var(--red)" );

Dom.StyleSheets

Function \ Add new style sheet rules for page \ Return Void

• Dom.StyleSheets

  	>`Function( {String} selector, {String} rules )`

• Dom.StyleSheets

  	> `Function( {Object} rules )` \
  	Add multiply rules

import {StyleSheets} from "rvjs-dom";

StyleSheets("div.class-name, div.class-name > span", "border: 1px solid red; float: left;");
StyleSheets({ 
	"div.red": "color: #900;",
	"div.class-name": "float: left;"
});