Caph Class: View

new View(option)

A class which provides primitive methods to render a vdom element.

Parameters:

Name	Type	Description
`option`	Object	Options. Please refer to the options of caph.module.renderer.VDom constructor.

Since:

2.0.0

Example

var view = new caph.module.renderer.View();

Extends

caph.module.renderer.VDom

Methods

_offset(x, y, z) → {caph.module.renderer.View|Object}

Set or get offset position from root view.

Parameters:

Name	Type	Description
`x`	Number	The number is offset position about x axis. (from root view)
`y`	Number	The number is offset position about y axis. (from root view)
`z`	Number	The number is offset position about z axis. (from root view)

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an offset position from root view.

Type: caph.module.renderer.View | Object

Example

var View = caph.module.renderer.View;
 var view1 = new View();
 var view2 = new View();

 view1.position(100, 200).mount();
 view2.position(50, 100).addTo(view1);
 view2._offset(view1_offset());

addChild(node) → {caph.module.renderer.VDom}

Adds the given node or array of nodes to this node's children.

Parameters:

Name	Type	Description
`node`	caph.module.renderer.VDom \| Array.<VDom>	VDom node to add.

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#addChild

See:

collection.TreeNode.addChild

Returns:

itself.

Type: caph.module.renderer.VDom

Example

var VDom = caph.require('module.renderer.VDom');
var vdom1 = new VDom(), vdom2 = new VDom();
vdom1.addChild(vdom2);

addClass(className) → {caph.module.renderer.VDom}

Adds a class to this object's list of classes. If class already exists in the list, it will not be added.

Parameters:

Name	Type	Description
`className`	String	A string variable representing a class name or space-delimited class names.

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#addClass

Returns:

itself.

Type: caph.module.renderer.VDom

Example

var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.addClass('class1');
vdom.addClass('class2 class3 class4');

destroy()

Destroys itself and all its children, which makes them available for garbage collection and means they can't be reused.

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#destroy

Example

var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.destroy();

getProperty(attributeName) → {String|Number}

Gets the current value of the given attribute name.

Parameters:

Name	Type	Description
`attributeName`	String	An attribute name to correspond to the one in Element in Web API Interfaces. (@link https://developer.mozilla.org/en-US/docs/Web/API/element#Properties)

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#getProperty

Returns:

The value of the given attribute name.

Type: String | Number

Example

var VDom = caph.require('module.renderer.VDom');
var id, vdom = new VDom();
vdom.setProperty({ id : 'test' });
id = vdom.getProperty('id');

getStyle(styleName) → {String|Number}

Gets the current value of the given style name.

Parameters:

Name	Type	Description
`styleName`	String	A style name to correspond to the one of ElementCSSInlineStyle. (@link http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle)

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#getStyle

Returns:

The value of the given style name.

Type: String | Number

Example

var VDom = caph.require('module.renderer.VDom');
var bgColor, vdom = new VDom();
vdom.setStyle({ backgroundColor : 'blue' });
bgColor = vdom.getStyle('backgroundColor');

hasClass(className) → {Boolean}

Checks if this object's list of classes contains a specific class.

Parameters:

Name	Type	Description
`className`	String	A string variable representing a class name or space-delimited class names.

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#hasClass

Returns:

Type: Boolean

Example

var VDom = caph.require('module.renderer.VDom');
var result, vdom = new VDom();
vdom.addClass('class1 class2 class3 class4');
result = vdom.hasClass('class1');
result =  vdom.hasClass('class3 class4');

mount(target) → {caph.module.renderer.VDom}

Gets a vdom mounted in a HTML element. Currently this function can be called only once.

Parameters:

Name	Type	Argument	Description
`target`	String \| HTMLElement \| function	<optional>	A HTML element where the given root node mounts, a function returning a HTML element, or else, a string describing element's id. If not defined, document.body is set as default.

Since:

2.1.0

Inherited From:

caph.module.renderer.VDom#mount

Returns:

itself.

Type: caph.module.renderer.VDom

Example

var VDom = caph.require('module.renderer.VDom');
var node = new VDom();
node.mount(document.body);

opacity(value) → {caph.module.renderer.View|Number}

sets or gets this opacity

Parameters:

Name	Type	Description
`value`	Number	The number is opacity value of view.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a opacity value.

Type: caph.module.renderer.View | Number

Example

var View = caph.module.renderer.View;
 var view = new View();
 var curOpacity = view.opacity();
 view.opacity(curOpacity - 0.2);

position(x, y, z) → {caph.module.renderer.View|Array}

Set position property or get position property.

Parameters:

Name	Type	Description
`x`	Number	The number is position about x axis. (centered position)
`y`	Number	The number is position about y axis. (centered position)
`z`	Number	The number is position about z axis. (centered position)

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including three unit-less pixel values, which means x, y and z position.

Type: caph.module.renderer.View | Array

Example

var View = caph.module.renderer.View;
 var view = new View();
 var curPosition = view.position();
 view.position(curPosition[0] + 100, curPosition[1] + 100, null);

positionOrigin(x, y) → {caph.module.renderer.View|Array}

Set the position origin or get the position origin.

Parameters:

Name	Type	Description
`x`	Number	The number is x-position about position origin. The position origin value range is from 0 to 1.
`y`	Number	The number is y-position about position origin. The position origin value range is from 0 to 1.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including two unit-less pixel values, which means x and y position origin.

Type: caph.module.renderer.View | Array

Example

var View = caph.module.renderer.View;
 var view = new View();
 view.positionOrigin(0.5, 0.5);
 view.position(300, 300);

removeChild(node, option) → {caph.module.renderer.VDom}

Removes the given node in case that it is this node's child. The removed node will still be reusable unless the destroy option is truthy.

Parameters:

Name Type Argument Description

node

caph.module.renderer.VDom | Array.<VDom>

VDom node to remove.

option

Object

Option

Properties

Name	Type	Argument	Description
`destroy`	Boolean	<optional>	Determines whether or not to destroy the given node. Once the given node and its children is destroyed, it can be included in garbage collection.

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#removeChild

See:

collection.TreeNode.removeChild

Returns:

itself.

Type: caph.module.renderer.VDom

Example

var VDom = caph.require('module.renderer.VDom');
var vdom1 = new VDom(), vdom2 = new VDom();
vdom1.addChild(vdom2);
vdom1.removeChild(vdom2);

removeClass(className) → {caph.module.renderer.VDom}

Removes a class from this object's list of classes.

Parameters:

Name	Type	Description
`className`	String	A string variable representing a class name or space-delimited class names.

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#removeClass

Returns:

itself.

Type: caph.module.renderer.VDom

Example

var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.addClass('class1 class2 class3 class4');
vdom.removeClass('class1');
vdom.removeClass('class3 class4');

requestPostRender(callback) → {caph.module.renderer.VDom}

Requests calling the given callback function just after this object has been rendered with its properties Once this is called, the given callback will be called by renderer in its 'post-render' sequence.

Parameters:

Name	Type	Description
`callback`	function	[optional] the function named '_postRender' will be called in case that the given callback is undefined.

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#requestPostRender

Returns:

itself.

Type: caph.module.renderer.VDom

Example

var VDom = caph.module.renderer.VDom;
 var view = new VDom();
 view.requestPostRender(function() {
     alert('PostRender');
 });
 view.position(10, 10);

requestPreRender(callback) → {caph.module.renderer.VDom}

Requests calling the given callback function just before this object is rendered. Once this is called, the given callback will be called by renderer in its 'pre-render' sequence.

Parameters:

Name	Type	Description
`callback`	function	[optional] the function named '_preRender' will be called in case the given callback is undefined.

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#requestPreRender

Returns:

itself.

Type: caph.module.renderer.VDom

Example

var VDom = caph.module.renderer.VDom;
 var view = new VDom();
 view.requestPreRender(function() {
     alert('PreRender');
 });
 view.position(10, 10);

rotate(degx, degy, degz) → {caph.module.renderer.View|Array}

Set rotation of component or get rotation of component.

Parameters:

Name	Type	Description
`degx`	Number	The number is rotate degree about x axis. (centered position)
`degy`	Number	The number is rotate degree about y axis. (centered position)
`degz`	Number	The number is rotate degree about z axis. (centered position)

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including three unit-less degree values, which means x, y and z rotation.

Type: caph.module.renderer.View | Array

Example

var View = caph.module.renderer.View;
 var view = new View();
 var curRotate = view.rotate();
 view.rotate(curRotate[0] + 30, curRotate[1] + 30, curRotate[2] + 30);

rotateX(value) → {caph.module.renderer.View|Number}

Set x rotate degree or get x rotate degree.

Parameters:

Name	Type	Description
`value`	Number	The number is rotate degree.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a x rotation value.

Type: caph.module.renderer.View | Number

Example

var View = caph.module.renderer.View;
 var view = new View();
 view.rotateX(view.rotateX() + 30);

rotateY(value) → {caph.module.renderer.View|Number}

Set y rotate degree or get y rotate degree.

Parameters:

Name	Type	Description
`value`	Number	The number is rotate degree.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a y rotation value.

Type: caph.module.renderer.View | Number

Example

var View = caph.module.renderer.View;
 var view = new View();
 view.rotateY(view.rotateY() + 30);

rotateZ(value) → {caph.module.renderer.View|Number}

Set z rotate degree or get z rotate degree.

Parameters:

Name	Type	Description
`value`	Number	The number is rotate degree.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a z rotation value.

Type: caph.module.renderer.View | Number

Example

var View = caph.module.renderer.View;
 var view = new View();
 view.rotateZ(view.rotateZ() + 30);

rotationOrigin(x, y) → {caph.module.renderer.View|Array}

Set the rotation origin or get the rotation origin.

Parameters:

Name	Type	Description
`x`	Number	The number is x-position about rotation origin. The rotation origin value range is from 0 to 1.
`y`	Number	The number is y-position about rotation origin. The rotation origin value range is from 0 to 1.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including two unit-less pixel values, which means x and y rotation origin.

Type: caph.module.renderer.View | Array

Example

var View = caph.module.renderer.View;
 var view = new View();
 view.rotationOrigin(0, 1);
 view.rotateZ(120);

scale(x, y) → {caph.module.renderer.View|Array}

Set scale of component or get scale of component.

Parameters:

Name	Type	Description
`x`	Number	The number is scale value about x axis. The scale value range is from 0 to 1.
`y`	Number	The number is scale value about y axis. The scale value range is from 0 to 1.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including two unit-less ratio values, which means x and y scale.

Type: caph.module.renderer.View | Array

Example

var View = caph.module.renderer.View;
 var view = new View();
 var curScale = view.scale();
 view.scale(curScale[0] * 0.5, curScale[1] * 0.5);

setProperty(properties) → {caph.module.renderer.VDom}

Sets this object's properties.

Parameters:

Name	Type	Description
`properties`	Object	An object with attribute name and value pairs which correspond to the properties of HTMLElement. (@link https://developer.mozilla.org/en-US/docs/Web/API/element#Properties) 'script','iframe','link' in 'innerHTML' attribute are not allowed.

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#setProperty

See:

https://dom.spec.whatwg.org/#interface-element

Returns:

itself.

Type: caph.module.renderer.VDom

Example

var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.setProperty({
              id: 'button',
             innerHTML: 'add',
             style: {
                 width: '100px',
                 height: '50px',
                 color: 'white',
                 textAlign: 'center',
                 backgroundColor: 'blue'
             }
           });

setStyle(styles) → {caph.module.renderer.VDom}

Sets this object's style attibutes.

Parameters:

Name	Type	Description
`styles`	Object	An object with style name and value pairs which correspond to the configuration of ElementCSSInlineStyle. (@link http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle)

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#setStyle

See:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

Returns:

itself.

Type: caph.module.renderer.VDom

Example

var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.setStyle({
             width: '100px',
             height: '50px',
             color: 'white',
             textAlign: 'center',
             backgroundColor: 'blue'
           });

size(size) → {caph.module.renderer.View|Array}

Set size or get size (width / height)

Parameters:

Name	Type	Argument	Description
`size`	Array.<number>	<optional>	A array unit-less pixel value The array has size value.( number[width, height] )

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including two unit-less pixel values, which means width and height. (for example, [100,100] means width : 100px, height: 100px).

Type: caph.module.renderer.View | Array

Example

var View = caph.module.renderer.View;
 var view = new View();
 view.size([100, 100]);

skew(x, y) → {caph.module.renderer.View|Array}

Set skew of component or get skew of component.

Parameters:

Name	Type	Description
`x`	Number	The number is skew value about x axis.
`y`	Number	The number is skew value about y axis.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including two unit-less degree values, which means x and y skew.

Type: caph.module.renderer.View | Array

Example

var View = caph.module.renderer.View;
 var view = new View();
 var curSkew = view.skew();
 view.skew(curSkew[0] + 30, curSkew[1] + 30);

toggleClass(className) → {caph.module.renderer.VDom}

Toggles the existence of a class in this object's list of classes.

Parameters:

Name	Type	Description
`className`	String	The class name to be toggled.

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#toggleClass

Returns:

itself.

Type: caph.module.renderer.VDom

Example

var VDom = caph.require('module.renderer.VDom');
var result, vdom = new VDom();
vdom.addClass('class1 class2');
vdom.toggleClass('class2');

translate(dx, dy, dz) → {caph.module.renderer.View}

Translates this object relatively from its current position.

Parameters:

Name	Type	Description
`dx`	Number	delta value of x. unit-less pixel value.
`dy`	Number	delta value of y. unit-less pixel value.
`dz`	Number	delta value of z. unit-less pixel value.

Since:

2.0.0

Returns:

It returns itself to provide method chaining.

Type: caph.module.renderer.View

Example

var View = caph.module.renderer.View;
 var view = new View();
 view.translate(50, 50, 50);

unmount()

Unmounts from HTML element. If target vdom is not mounted at HTML Element, this method doesn't work.

Since:

2.1.0

Inherited From:

caph.module.renderer.VDom#unmount

Example

var VDom = caph.require('module.renderer.VDom');
var node = new VDom();
node.mount(document.body);

//unmounting from body. (not destroyed)
node.unmount();

update() → {caph.module.renderer.VDom}

Updates its properties to the corresponding DOM element.

Since:

2.0.0

Inherited From:

caph.module.renderer.VDom#update

Returns:

itself.

Type: caph.module.renderer.VDom

Example

var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.update();

visibility(value) → {caph.module.renderer.View|Boolean}

Set visibility property or get visibility property.

Parameters:

Name	Type	Description
`value`	Boolean	The boolean value is true or false.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an Boolean, which means visibility state. If visibility is visible, true. If not, false.

Type: caph.module.renderer.View | Boolean

Example

var View = caph.module.renderer.View;
 var view = new View();
 if(view.visibility()) {
     view.visibility(false);
 }
 else {
     view.visibility(true);
 }

x(value) → {caph.module.renderer.View|Number}

Set x position property or get x position property.

Parameters:

Name	Type	Description
`value`	Number	The number is x-axis position about component.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a x position value.

Type: caph.module.renderer.View | Number

Example

var View = caph.module.renderer.View;
 var view = new View();
 view.x(view.x() + 100);

y(value) → {caph.module.renderer.View|Number}

Set y position property or get y position property.

Parameters:

Name	Type	Description
`value`	Number	The number is y-axis position about component.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a y position value.

Type: caph.module.renderer.View | Number

Example

var View = caph.module.renderer.View;
 var view = new View();
 view.y(view.y() + 100);

z(value) → {caph.module.renderer.View|Number}

Set z position property or get z position property.

Parameters:

Name	Type	Description
`value`	Number	The number is z-axis position about component.

Since:

2.0.0

Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a z position value.

Type: caph.module.renderer.View | Number

Example

var View = caph.module.renderer.View;
 var view = new View();
 view.z(view.z() + 100);