Added docs in js files and fixed some minor visual bugs (#118)

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: R11/release11-tools-web#118

Frontend/assets/css/tools/r11form.css

@@ -260,6 +260,7 @@
 
 .action-button.active:hover {
     filter: brightness(110%);
+    transition-duration: 0.3s;
 }
 
 .action-button {
@@ -407,6 +408,7 @@
 .section-button:hover {
     /* border-bottom: #3bc4f1 2px solid; */
     backdrop-filter: brightness(100%); 
+    transition-duration: 0.3s;
 }
 
 .section-button .active {

Frontend/assets/scripts/frame.js

@@ -1,3 +1,17 @@
+
+function init() {
+    changeActiveTools('xmlTool', 'XML');
+}
+
+/**
+ * Function that updates list of tools depending on chosen category
+ * 
+ * @function
+ * @name changeActiveTools
+ * @kind function
+ * @param {any} activeClass class of elements that have to be shown
+ * @param {any} activeCategoryButton class of category button that has to be active
+ */
 function changeActiveTools(activeClass, activeCategoryButton) {
     let tools = document.getElementById("toolList").children
     

Frontend/assets/scripts/tools/scripts.js

@@ -2,7 +2,16 @@ var defaultStrings = [];
 const color_grey = "#6b6b6b";
 const color_red = "#ff8f8f";
 
-//Remove default text and set color to black
+/**
+ * It clears default content of the element and sets it's color to black.
+ * 
+ * @function
+ * @name clearDefaultContent
+ * @kind function
+ * @param {any} element to set
+ * @param {any} text to set
+ * @returns {void}
+ */
 function clearDefaultContent(element, text) {
     if (element.value == text) {
         element.value = "";
@@ -11,6 +20,13 @@ function clearDefaultContent(element, text) {
     }
 }
 
+/**
+ * It clears all data fields.
+ * 
+ * @function
+ * @name clearDataField
+ * @kind function
+ */
 function clearDataField(){
     document.getElementById("xmlArea").value = "";
     document.getElementById("xmlArea").style.color = null;
@@ -34,8 +50,16 @@ function fillDefaultXML(element) {
             }
         }
 
-//Set default text in grey
-function setDefaultContent(element, text) {6543
+/**
+ * It sets default content for the element an changes it's color to grey
+ * 
+ * @function
+ * @name setDefaultContent
+ * @kind function
+ * @param {any} element to set
+ * @param {any} text to set
+ */
+function setDefaultContent(element, text) {
     if (element.value == "") {
         var id = element.getAttribute('id');
         if (!defaultStrings.includes(text)) {
@@ -56,6 +80,15 @@ function setDefaultContent(element, text) {6543
     }
 }
 
+/**
+ * It hides list for specified version of XPath
+ * 
+ * @function
+ * @name hideList
+ * @kind function
+ * @param {any} collList class name of list to hide
+ * @returns {void}
+ */
 function hideList(collList) {
     for (i = 0; i < collList.length; i++) {
         if (collList[i].nextElementSibling !== null) {
@@ -67,16 +100,45 @@ function hideList(collList) {
     }
 }
 
+/**
+ * It checks if the text is a default text.
+ * 
+ * @function
+ * @name checkDefault
+ * @kind function
+ * @param {any} text
+ * @returns {boolean}
+ */
 function checkDefault(text){
     return defaultStrings.includes(text);
 }
 
+/**
+ * It show list for specified version of XPath
+ * 
+ * @function
+ * @name showList
+ * @kind function
+ * @param {any} collList class name of list to hide
+ * @returns {void}
+ */
 function showList(collList) {
     for (i = 0; i < collList.length; i++) {
         collList[i].style.display = 'block';
     }
 }
 
+/**
+ * A function that is used to fold/unfold collapsible elements.
+ * 
+ * @function
+ * @name smoothFoldElement
+ * @kind function
+ * @param {any} element
+ * @param {any} toogleState
+ * @param {any} toggleParrent
+ * @returns {void}
+ */
 function smoothFoldElement(element, toogleState, toggleParrent){
     if (toogleState) {
         console.log("DUPA");
@@ -98,7 +160,14 @@ function smoothFoldElement(element, toogleState, toggleParrent){
     }
 }
 
-//Set tooltip info, function is called by onClick handlers
+/**
+ * Set tooltip info, function is called by onClick handlers
+ * 
+ * @function
+ * @name refreshTooltip
+ * @kind function
+ * @returns {void}
+ */
 function refreshTooltip() {
     var resizeList = document.getElementsByClassName("collapsibleData");
     console.log("collDataList: " + resizeList.length)
@@ -108,6 +177,17 @@ function refreshTooltip() {
 
 
 
+/**
+ * A function that performs a request to the server.
+ * 
+ * @function
+ * @name performRequest
+ * @kind function
+ * @param {any} endpoint of target service
+ * @param {any} checkXML enable checking for empty XML
+ * @param {any} checkTransform enable checking for empty transform data
+ * @returns {false | undefined}
+ */
 function performRequest(endpoint, checkXML, checkTransform){
     const sourceId = "xmlArea";
     const transformId = "transformArea";
@@ -147,6 +227,18 @@ function performRequest(endpoint, checkXML, checkTransform){
     
 }
 
+/**
+ * Function that prepares data to send and handles response
+ * 
+ * @function
+ * @name performFormatRequest
+ * @kind function
+ * @param {any} endpoint of target service
+ * @param {any} checkXML enable checking for empty XML
+ * @param {any} sourceId ID of element to get XML from
+ * @param {any} targetId ID of element to write formatted XML
+ * @returns {void}
+ */
 function performFormatRequest(endpoint, checkXML, sourceId, targetId){
     const sourceElement = document.getElementById(sourceId);
     const targetElement = document.getElementById(targetId);
@@ -182,7 +274,19 @@ function performFormatRequest(endpoint, checkXML, sourceId, targetId){
 }
 
 
-//Form REST request, send and return received data
+/**
+ * Form REST request, send and return received data
+ * 
+ * @async
+ * @function
+ * @name restRequest
+ * @kind function
+ * @param {any} port of target service
+ * @param {any} endpoint of target service
+ * @param {any} xmlData XML that will be sent
+ * @param {any} transformData data used to transform given XML
+ * @returns {Promise<any>}
+ */
 async function restRequest(port, endpoint, xmlData, transformData) {
     const escapeChar = "specialEscapeChar";