top

CAPH.WUI.WIDGET.DOM

DomContainer Represents a rectangle container that could only append dom element in it. Using this container is a good way to make dom element shown on the screen. The dom element would be appended one by one, and the class of element would be applied.


Methods

triggerKeyEvent

Description
Execute Key event handler and behaviors attached to the matched elements for the given event type.
Parameters
■eventType
  - String 
  - such as 'keydown', 'keypressr', 'keyup' and so on.        
■data (Optional)
  - Object 
  - Additional data for the key event
■element (Optional)
  - Object
  - The element to be applied attached handler
Return■Object
  - the dom element
Emulator SupportY
SDK Constraintnone
Example
var el = document.getElementById("test");
var flag = false;
    el.addEventListener('keydown', function(e){
        if(e&& e.keyCode === caph.platform.Key.ENTER){
            flag = true;
        }
    }, false);
caph.wui.widget.Dom.triggerKeyEvent('keydown', caph.platform.Key.ENTER, el);

triggerMouseEvent

Description
Execute event handler and behaviors attached to the matched elements for the given event type.
Parameters
■eventType
  - String
  - such as 'click', 'mouseover', 'mousedown' and so on.        
■data (Optional)
  - Object
  - Additional data for the mouse event
■element (Optional)
  - Object
  - The element to be applied attached handler
Return■Object
  - the dom element
Emulator SupportY
SDK Constraintnone
Example
var el = document.getElementById("testdiv");
var flag = false;
    el.addEventListener('mouseup', function(e){
            flag = true;
    }, false);
caph.wui.widget.Dom.triggerMouseEvent('mouseup', {
        clientX: 10,
        clientY: 10
    }, el);

getStyle

Description
Returns a value of specified style property in element
Parameters
■element
  - Object
  - The element to get style       
■prop
  - String 
  - The property of style
Return■String
  - the value of style property
Emulator SupportY
SDK Constraintnone
Example
//Let's say el and prop are given
function foo(el, prop) {
  if(caph.wui.widget.Dom.getStyle(el, 'position') === 'fixed') {
    //Let's say doSomething() is given
    doSomething(el);
   }
}

getBoundingOffset

Description
Returns an offset of an element
Parameters
■el
  - Object
  - The parent element to be bounded       
■mode
  - String
  - The mode to be applied
Return■Object
  - the offset of an element
Emulator SupportY
SDK Constraintnone
Example
//Let's say el is given
function foo(el) {
    parentOffset = caph.wui.widget.Dom.getBoundingOffset(el);
    // Let's say doSomething() is given
    doSomething(parentOffset);
}

getOffsetParent

Description
Returns first element which property value of position is not static among ancestor.
Parameters
■el
  - Object
  - The parent to get offset
Return■Object
  - the first element
Emulator SupportY
SDK Constraintnone
Example
//Let's say el is given
function foo(el) {
   offsetParent = caph.wui.widget.Dom.getOffsetParent(el); 
   //Let's say doSomething() is given
   doSomething(offsetParent);
}

getPosition

Description
Returns a result that subtract parent offsets and element margins on offset of an element
Parameters
■el
  - Object 
  - The element of get position
Return■Object
  - the result of getPosition
Emulator SupportY
SDK Constraintnone
Example
//Let's say el is given
function foo(el) {
  if(!caph.wui.widget.Dom.getPosition(el).top < 0) {
    // Let's say doSomething() is given
    doSomething(el);
   }
}

getVisible

Description
Checks whether element is visible.
Parameters
■el
  - Object
  - The element to be checked its visibility
Return■Boolean
  - true : visible
  - false : not visible
Emulator SupportY
SDK Constraintnone
Example
//Let's say el is given
function foo(el) {
  if(caph.wui.widget.Dom.getVisible(el)) {
    // Let's say doSomething() is given
    doSomething(el);
   }
}

getBoundingRect

Description
Returns offset, size and margin(optional) property value of an element
Parameters
■el
  - Object
  - The element to be bounded       
■mode (Optional)
  - String
  - The mode to be applied
Return■Object
  - Object
   * left : left
   * top : top
   * width : width
   * height : height
   * right : left+width
   * bottom : top+height
  - margin
   * left : marginLeft
   * right : marginRight
   * top : marginTop
   * bottom : marginBottom
Emulator SupportY
SDK Constraintnone
Example
//Let's say el is given
var bound = caph.wui.widget.Dom.getBoundingRect(el);
   l = bound.left;
   t = bound.top;
   w = bound.width;
   h = bound.height; 
//Let's say doSomething() is given 
doSomething(l, t, w, h);

hasClass

Description
Checks whether an element contains a specified class
Parameters
■element
  - Object
  - The element to be checked       
■classnm
  - String
  - The name of class to be removed
Return■Boolean
  - true : if it has one
  - false : otherwise.
Emulator SupportY
SDK Constraintnone
Example
function foo(a) {
  // Let's say el and cl are given
  if(!caph.wui.widget.Dom.hasClass(el, cl)) {
    //Let's say doSomething() is given 
    doSomething(el, cl);
  }
}

addClass

Description
Adds a specified class to an element
Parameters
■element
  - Object
  - The element to be checked       
■classnm
  - String
  - The name of class to be removed
Return■Boolean
  - true : if it succeed
  - false : otherwise.
Emulator SupportY
SDK Constraintnone
Example
function foo(a) {
  //let's say el and cl are given
  if(!caph.wui.widget.Dom.hasClass(el, cl)) {
    caph.wui.widget.Dom.addClass(el, cl)
  }
}

removeClass

Description
Removes a specified class from an element
Parameters
■element
  - Object
  - The element to be checked       
■classnm
  - String
  - The name of class to be removed
Return■Boolean
  - true : if it succeed
  - false : otherwise.
Emulator SupportY
SDK Constraintnone
Example
function foo(a) {
  //Let's say el and cl are given
  if(caph.wui.widget.Dom.hasClass(el, cl)) {
    caph.wui.widget.Dom.removeClass(el, cl)
  }
}

triggerEvent

Description
Execute handler and behaviors attached to the matched elements for the given event type.
Parameters
■eventType
  - String 
  -  such as 'focuschange', 'keydown', 'mouseover' and so on.        
■data (Optional)
  - Object 
  - Additional data for the event
■element (Optional)
  - Object
  - The element to be applied attached handler.
Return■Void
Emulator SupportY
SDK Constraintnone
Example
var el = document.getElementById("test");
    var flag = false;
    el.addEventListener('keydown', function(e){
        if(e&& e.keyCode === caph.platform.Key.ENTER){
            flag = true;
        }
    }, false);
    caph.wui.widget.Dom.triggerEvent('keydown', caph.platform.Key.ENTER, el);

setStyle

Description
Sets the CSS property value of element directly.
Parameters
■element
  - HTML Document Element
  - The element to be applied CSS properties      
■style
  - String
  - CSS properties to be added to the element
Return■Void
Emulator SupportY
SDK Constraintnone
Example
var el = document.getElementById('test');
caph.wui.widget.Dom.setStyle(el, 'width:500px');
caph.wui.widget.Dom.setStyle(el, 'margin:20px');