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";
     

Frontend/index.html

@@ -13,7 +13,7 @@
     
 </head>
 
-<body>
+<body onload="init()">
     <div id="header">
         <div id="leftElements">
             <div id="logo"><a href="http://release11.com/"><img src="assets/images/logo_czarne.svg" alt="Release11"></a></div>
@@ -30,14 +30,14 @@
     <div id="content">
         <div id="leftBar">
             <ul id="toolList">
-                <li id="toolListRow" class="dynamic restTool">
+                <li id="toolListRow" class="dynamic restTool" style="display: none;">
                     <a id="rest-mock" href="http://tools.zipper.release11.com:8097/" target="iframe">REST Mock</a>
                 </li>
                 <li id="toolListRow" class="xmlTool"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
                 <li id="toolListRow" class="xmlTool"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
                 <li id="toolListRow" class="xmlTool"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
                 <li id="toolListRow" class="xmlTool"><a href="tools/xmlFormatter.html" target="iframe">XML Formatter</a></li>
-                <li id="toolListRow" class="jsonTool"><a href="tools/jsonFormatter.html" target="iframe">JSON Formatter</a></li>
+                <li id="toolListRow" class="jsonTool" style="display: none;"><a href="tools/jsonFormatter.html" target="iframe">JSON Formatter</a></li>
             </ul>
             <div id="copyright">
                 Build: [:VERSION:]<br>

Frontend/tools/xpath.html

@@ -21,7 +21,7 @@
                 </div>
 
                 <div class="display-space-between">
-                    <div style="text-align: center;">
+                    <div>
                         <label for="processors">Select XPath processor:</label>
                         <select name="processors" id="processors">
                             <option value="saxon">Saxon</option>
@@ -45,7 +45,7 @@
                             onclick="fillDefaultXML(this)">Insert default XML</button>
                     </div>
                 </div>
-                <!-- <br><br> -->
+                <br>
                 <label for="xmlArea"><b>Insert your XML:</b></label>
                 <textarea id="xmlArea" name="xmlArea" rows="15"
                     class="textarea-300 bordered-field vertically-resizeable max-width"