h1. Javascript Framework of KS

h2. KSUtils.setMaskLayer
* *Description*
To set the mask layer covering a portlet when a pop-up window appears.
* *Prototype*
{code}KSUtils.prototype.setMaskLayer = function(id){code}
* *Parameter*
|| Name || Type || Description ||
| *id* | {{string}} | The id attribute of the html element |
* *Example*
Here, the setMasklayer is called when the browser's window is resized:
{code}jsmanager.addOnResizeJavascript('function(){eXo.ks.KSUtils.setMaskLayer("'+uicomponent.id+'");}');{code}


h2. CheckBoxManager.checkAll
* *Description*
To select all checkboxes. 
* *Prototype*
{code} CheckBoxManager.prototype.checkAll = function() {code}
* *Example*
Here, the checkAll is called when the CheckAll checkbox is clicked:
{code}<input id="UIFORUMCheckAllForum" type="checkbox" class="checkbox" title="Check all" value="4" onClick="eXo.forum.UIForumPortlet.checkAll(this);"/>{code}


h2. EventManager.addEvent
* *Description*
To register an event on a {{DOM node}}.
* *Prototype*
{code} EventManager.addEvent = function( obj, type, fn ) {code}

* *Parameter*
|| Name || Type || Description ||
| *obj* | {{DOM node}} | The element on which events need to be installed. |
| *type* | {{string}} | To represent the event type. |
| *fn* | {{function}} | The Javascript function. |


* *Example*
To register a _doClick()_ funtion to the onclick of an element, do as follows:

{code}var element = document.getElementById("test"); 
eXo.core.EventManager.addEvent(element, "click", doClick);
{code} 


h2. EventManager.removeEvent

* *Description*
To remove events which have been attached on the {{DOM node}}.
* *Prototype*
{code} EventManager.prototype.removeEvent = function( obj, type, fn ) {code}

* *Parameter*
|| Name || Type || Description ||
| *obj* | {{DOM node}} | A node with events which need to be removed. |
| *type* | {{string}} | To represent the event type. |
| *fn* | {{function}} | The Javascript function. |


* *Example*
Supposing that the _doClick_ function has been registered in the "test" element. If the developer unregisters the _doClick_ function, do as follows:
{code}var element = document.getElementById("test"); 
eXo.core.EventManager.removeEvent(element, "click", doClick);
{code} 


h2. EventManager.getMouseButton

* *Description*
To get which mouse button was pressed by the user.
* *Prototype*
{code} EventManager.prototype.getMouseButton = function(evt) {code}

* *Parameter*
|| Name || Type || Description ||
| *evt* | {{object}} | Event object |

* *Return*
|| Type || Description ||
| {{integer}} | To indicate which mouse button was pressed or released. |

* *Example*
To check which mouse button has been clicked, you can do:
{code}eXo.core.EventManager.getMouseButton(evt); //evt: Event object{code}

In which, accoring to W3C, values of the getMouseButton function should be:
          Left button - 0
          Middle button - 1
          Right button - 2

          According to Microsoft, its values should be:
  	  Left button - 0
          Middle button - 4
          Right button - 2


h2. EventManager.getEventTarget
* *Description*
To get the HTML element the event took place on.
* *Prototype*
{code} EventManager.prototype.getEventTarget = function(evt) {code}

* *Parameter*
|| Name || Type || Description ||
| *evt* | {{object}} | Event object |

* *Return*
|| Name || Type || Description ||
| target | {{DOM node}} | The HTML element on which the event took place. |

* *Example*
If the developer wants to know the tag name of an element when clicking the element, do as follows:

{code}var element = document.getElementById("test"); 
eXo.core.EventManager.addEvent(element, "click", doClick);
function doClick(evt){
 var node = eXo.core.EventManager.getEventTarget(evt);
 alert(node.tagName);
}
{code} 


h2. EventManager.getEventTargetByClass
* *Description*
To get the HTML element on which the event took place by the class selector.
* *Prototype*
{code} EventManager.prototype.getEventTargetByClass = function(evt, className) {code}

* *Parameter*
|| Name || Type || Description ||
| *evt* |  {{object}} | Event object |
| *className* | {{string}} | The class stylesheet selector. |

* *Return*
|| Name || Type || Description ||
| target | {{DOM node}} | The HTML element the event took place on. |

* *Example*
{code}
<div class="TestClass" onclick="test(event);">
        Click me
</div>
<div onclick="test(event);">
        Other
</div>
<script type="text/javascript">
function test(evt){
        var evtMgr = eXo.core.EventManager;
        var srcElement = evtMgr.getEventTargetByClass(evt,"TestClass");
        if(!srcElement) alert(srcElement.innerHTML); // Comment
}
</script>
{code}

h2. EventManager.getEventTargetByTagName

* *Description*
To get the HTML element the event took place on by the tag name.
* *Prototype*
{code} EventManager.prototype.getEventTargetByTagName = function(evt, tagName) {code}

* *Parameter*
|| Name || Type || Description ||
| *evt* | {{object}} | Event object |
| *tagName* | {{string}} | Name of HTML tag. |

* *Return*
|| Name || Type || Description ||
| target |  {{DOM node}} | The HTML element the event took place on. |

* *Example*
{code}
 <div onclick="test(event);">
        Click me
</div>
<span onclick="test(event);">
        Other
</span>
<script type="text/javascript">
function test(evt){
        var evtMgr = eXo.core.EventManager;
        var srcElement = evtMgr.getEventTargetByTagName(evt,"div");
        if(!srcElement) alert(srcElement.innerHTML); // Comment
}
</script>
{code}


h2. EventManager.cancelBubble

* *Description*
To prevent the event from taking place.

* *Prototype*

{code} EventManager.prototype.cancelBubble = function(evt) {code}


* *Parameter*
|| Name || Type || Description ||
| *evt* | {{object}} | Event object |


* *Description*
To cancel the event bubbling.

* *Example*
To cancel the event bubbling, do as follows:
{code} 
<div onclick="test1();">
        <div>abc</div>
        <div onclick="test2(event);">cancel bubble</div>
</div>
<script type="text/javascript">
        function test1(){
                alert("Parent");
        }
        function test2(evt){
                eXo.core.EventManager.cancelBubble(evt);
                alert("Child");
        }
</script>
{code}

h2. EventManager.cancelEvent
* * Description*
To cancel any default action associated with the event.

* *Prototype*
{code} EventManager.prototype.cancelEvent = function(evt) {code}

* *Parameter*
|| Name || Type || Description ||
| *evt* | {{object}} | Event object |

* *Example*
The following example is to disable the default action of all links on the page that proceeds the script when clicked on, then goes to the URL specified in its "href" attribute:

{code}
function disablelink(e){
        eXo.core.EventManager.cancelEvent(e);
}

var alllinks=document.getElementsByTagName("a")
for (var i=0; i<alllinks.length; i++){
 alllinks[i].onclick=disablelink
}
{code}


h1. Javascript Framework of Forum

h2. UIForumPortlet.numberIsCheckedForum
* *Description* 
To inform the number of selected items.
* *Prototype*
{code} UIForumPortlet.prototype.numberIsCheckedForum = function(formName, checkAllName, multiAns, onlyAns, notChecked) {code}
* *Parameter*
|| Name || Type || Description ||
| *formName* | {{string}} | The name of form |
| *checkAllName* | {{string}} | The id of checkbox |
| *multiAns* | {{string}} | The message informing the number of selected items. | 
| *onlyAns* | {{string}} | The message informing only one item is selected. |
| *notChecked* | {{string}} | The warning message which will appear when the user hasnot selected any items. |
* *Return*
|| Type || Description ||
| {{boolean}} | When the user selects many items, the returned value is TRUE. When the user select only one item or doesnot select any item, the returned value is FALSE. |
| {{boolean}} | When the user selects only one item, the returned value is TRUE. |
| {{boolean}} | When the user doesnot select any items, the returned value is FALSE. |

* * Example*
To check the number of items selected on the UICategory form, do as follows:
{code} 
<div class="ItemIcon $classIconItem">
  <a class="MenuItem" style="display:block" onclick="javaScript:if(eXo.forum.UIForumPortlet.numberIsCheckedForum('UICategory', 'UIFORUMCheckAllForum', '<%=_ctx.appRes("UICategory.confirm.DeleteMoreForum")%>', '<%=_ctx.appRes("UITopicContainer.confirm.RemoveForum")%>', '<%=_ctx.appRes("UITopicDetail.msg.notCheckForum")%>')){$link;}">
	<%=nameItem%>
  </a>
</div>
{code}


h2. UIForumPortlet.showTreeNode

* *Description* 
To show/hide the tree.

* *Prototype*
{code} UIForumPortlet.prototype.showTreeNode = function(obj, isShow) {code}

* *Parameter*
|| Name || Type || Description ||
| *obj* | {{DOM node}} | The node clicked |
| *isShow* | {{string}} | The initial status of tree. |

* *Example* 
{code}
<div class="NodeLabel" onclick ='eXo.faq.UIAnswersPortlet.showTreeNode(this,"$isShow");'>
   <div class="NodeSelected">
      <a>$categoryName</a>
   </div> 
</div>
{code}

h2. UIForumPortlet.checkedNode

* *Description* 
 To do the action when the user select the checkbox on the tree node.

* *Prototype*
{code} UIForumPortlet.prototype.checkedNode = function(elm) {code}

* *Parameter*
|| Name || Type || Description ||
| *elm* | {{DOM node}} | The checkbox on the tree node. |

* *Description*

{code} 
<div class="ParentCheckBox" onclick='eXo.forum.UIForumPortlet.checkedNode(this);' style="float:left; padding-top:4px;">
  <%uicomponent.renderChild(category.getId())%>
</div>
{code}


h2. UIForumPortlet.setSizeImages

* *Description* 
To resize the image size to the container size.

* *Prototype*
{code} UIForumPortlet.prototype.setSizeImages = function(delta, classParant) {code}

* *Parameter*
|| Name || Type || Description ||
| *delta* | {{integer}} | The interval between the image and container. |
| *classParant* | {{string}} | The class name of the container of image. |

* *Example*
To set the size for images in UITopicDetail in Forum, do as follows:

{code}
UIForumPortlet.prototype.reSizeImages = function() {
  setTimeout('eXo.forum.UIForumPortlet.setSizeImages(225, "UITopicDetail")', 500);
};
{code}


h2. UIForumPortlet.executeLink
* *Description* 
To get and execute the action when the user clicks the HTML node with the _action_ attribute.
* *Prototype*
{code} UIForumPortlet.prototype.executeLink = function(evt) {code}

* *Parameter*
|| Name || Type || Description ||
| *evt* | {{object}} | Event object |

* *Example*
To perform the action when the user clicks the tag A on a specific UI component, do as follows:
{code}
 UIForumPortlet.prototype.addLink = function(cpId, clazzAction) {
    var comp = document.getElementById(cpId);
    var uiCategoryTitle = eXo.core.DOMUtil.findDescendantsByClass(comp,"a", clazzAction);
    var i = uiCategoryTitle.length;
    if(!i || (i <=0)) return ;
    while(i--){
       uiCategoryTitle[i].onclick = this.executeLink ;
    }
};
{code}

h2. UIForumPortlet.createLink

* *Description* 
To create a link based on the user's setting (with Ajax or not).

* *Prototype*
{code} UIForumPortlet.prototype.createLink = function(cpId,isAjax) {code} 

* *Parameter*
|| Name || Type || Description ||
| *cpId* | {{string}} | The id of UI component. |
| *isAjax* | {{boolean}} | To check if the developer uses Ajax or not. |

* *Example*
To create a link for a component, do as follows:
{code}
 jsmanager.addJavascript("eXo.forum.UIForumPortlet.createLink('"+uicomponent.id+"','" + uicomponent.useAjax + "');") ;
{code}

h2. UIForumPortlet.showBBCodeHelp

* *Description* 
To show/hide the help pop-up to create BBCodes.

* *Prototype*
{code} UIForumPortlet.prototype.showBBCodeHelp = function(id, isIn) {code}

* *Parameter*
|| Name || Type || Description ||
| *id* | {{string}} | The identity information of shown pop-up. |
| *isIn* | {{boolean}} | If the value of _isIn_ is true, the pop-up is shown. If false, the pop-up is hidden. |

* *Example*
To show the BBCodeHelp pop-up when the user clicks the element with $id, do as follows:
{code}
eXo.forum.UIForumPortlet.showBBCodeHelp('$id', 'true')"  
{code}


h1. Javascript Framework of Answers & FAQ

*attach*

* *Description*
To initialize data, then set up and process functions when the user clicks the category item.

* *Prototype*
{code} eXo.faq.DragDrop.attach = function(evt) {code}

* *Parameter*
|| Name || Type || Description ||
| *evt | {{object}} | Event object. |

* *Example*
To install the drag and drop feature for items with the class selector _FAQCategory_ in the component with _compid_, do the following:
{code}
function init(compid){
	var comp = document.getElementById(compid);
	var elements = eXo.core.DOMUtil.findDescendantsByClass(comp,"div","FAQCategory");
	var i = elements.length;
	while(i--){
		elements[i].onmousedown = this.attach;
	}
}
{code}






