Merge pull request 'dev' (#58) from dev into master

Reviewed-on: R11/release11-tools-web#58

Backend-libXML/Parser.py

@@ -1,16 +1,32 @@
 from lxml import etree
 
 
+def prettify(source: str) -> str:
+    xml = etree.XML(source)
+    return etree.tostring(xml, pretty_print=True).decode()
+
+def minimize(source: str) -> str:
+    result = source
+    
+    to_remove = ["   ", "  ", "\t", "\n"]
+    to_substitute = [(" <", "<"), ("> ", ">"), ("</ ", "</"), (" >", ">")]
+    
+    for chars in to_remove:
+        result = result.replace(chars, "")
+    
+    for e in to_substitute:
+        result = result.replace(e[0], e[1])
+    
+    return result
+
+
 def xpath(source: str, xpath: str) -> str:
     """
     Method used to get nodes from XML string using XPath
 
     :param source: XML string used for selection
-    :type source: str
     :param xpath: XPath query used for selection
-    :type xpath: str
     :return: Nodes selected using XPath
-    :rtype: str
     """
 
     
@@ -34,11 +50,8 @@ def xsd(source: str, xsd: str) -> bool:
     """
     Method used to validate XML string against XSD schema
     :param source: XML string used for validation
-    :type source: str
     :param xsd: XSD schema to validate XML against
-    :type xsd: str
     :return: Message saying, if the validation was successful or not
-    :rtype: str
     """
     xml_schema = etree.XMLSchema(etree.XML(xsd))
 
@@ -54,11 +67,8 @@ def xslt(source: str, xslt: str) -> str:
     Method used to transformate XML string using XSLT
 
     :param source: XML string to transform
-    :type source: str
     :param xslt: XSLT string used to transformate XML
-    :type xslt: str
     :return: Result of transformation
-    :rtype: str
     """
     xslt_transform = etree.XSLT(etree.XML(xslt))
 

Backend-libXML/main.py

@@ -15,16 +15,50 @@ cors = CORS(app, resource={
     }
 })
 
+def format_xml(request: request, type: str) -> str:
+    """Function to format XML 
+
+    :param request: Received request
+    :param type: Type of needed processing: xsd, xslt or xpath
+    :raises ValueError: is raised when type is different than those provided above
+    :return: response JSON converted to string and response code
+    """
+    start = time.time_ns()
+    code = 200
+    response_json = dict()
+    try:
+        request_data = json.loads(request.get_data(as_text=True))
+        data = request_data['data']
+        process = request_data['process']
+        if (type == "prettify"):
+            response_json['result'] = Parser.xsd(data, process)
+        elif (type == "minimize"):
+            response_json['result'] = Parser.xslt(data, process)
+        else:
+            raise ValueError("Valid operation types are: prettify, minimize")
+
+        response_json['status'] = "OK"
+    except KeyError as e:
+        response_json['result'] = "Missing key: " + str(e)
+        response_json['status'] = "ERR"
+        code = 400
+    except Exception as e:
+        response_json['result'] = str(e)
+        response_json['status'] = "ERR"
+        code = 400
+    finally:
+        exec_time = (time.time_ns() - start) / 10**6
+        response_json['time'] = f"{exec_time:.03f}"
+        response_json['processor'] = "libxml2 over lxml"
+        return json.dumps(response_json), code
+
 def process_xml(request: request, type: str) -> str:
     """Function to process 
 
     :param request: Received request
-    :type request: request
     :param type: Type of needed processing: xsd, xslt or xpath
-    :type type: str
     :raises ValueError: is raised when type is different than those provided above
     :return: response JSON converted to string and response code
-    :rtype: str, int
     """
     start = time.time_ns()
     code = 200
@@ -39,6 +73,10 @@ def process_xml(request: request, type: str) -> str:
             response_json['result'] = Parser.xslt(data, process)
         elif (type == "xpath"):
             response_json['result'] = Parser.xpath(data, process)
+        elif (type == "prettify"):
+            response_json['result'] = Parser.prettify(data)
+        elif (type == "minimize"):
+            response_json['result'] = Parser.minimize(data)
         else:
             raise ValueError("Valid operation types are: xsd, xslt, xpath")
 
@@ -70,5 +108,13 @@ def xsd():
 def xslt():
     return process_xml(request, "xslt")
 
+@app.route("/prettifypost", methods=["POST"])
+def prettify():
+    return process_xml(request, "prettify")
+
+@app.route("/minimizepost", methods=["POST"])
+def minimize():
+    return process_xml(request, "minimize")
+
 if __name__ == "__main__":
     app.run()

Backend-libXML/sample/minimize/minimize.curl

@@ -0,0 +1,3 @@
+url = "http://localhost:5000/minimizepost"
+data = "@minimize.json"
+request = POST

Backend-libXML/sample/minimize/minimize.json

@@ -0,0 +1,5 @@
+{
+    "data": "<b:books xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns='http://www.demo.com' xmlns:b='http://www.book.com' xmlns:a='http://www.author.com'><b:book id='1'><b:name>Hamlet</b:name><b:date>2001-05-04</b:date><a:authorId>1</a:authorId><b:availability>false</b:availability></b:book><b:book id='2'><b:name>Macbeth</b:name><b:date>2000-12-13</b:date><a:authorId>1</a:authorId><b:availability>false</b:availability></b:book><b:book id='3'><b:name>Harry Potter and the Sorcerer's Stone</b:name><b:date>2005-04-29</b:date><a:authorId>2</a:authorId><b:availability>true</b:availability></b:book><b:book id='4'><b:name>The Long Walk</b:name><b:date>2018-07-01</b:date><a:authorId>4</a:authorId><b:availability>true</b:availability></b:book><b:book id='5'><b:name>Misery</b:name><b:date>2018-01-31</b:date><a:authorId>4</a:authorId><b:availability>true</b:availability></b:book><b:book id='6'><b:name>Think and Grow Rich</b:name><b:date>2004-09-10</b:date><a:authorId>6</a:authorId><b:availability>true</b:availability></b:book><b:book id='7'><b:name>The Law of Success</b:name><b:date>1982-05-09</b:date><a:authorId>6</a:authorId><b:availability>false</b:availability></b:book><b:book id='8'><b:name>Patriot Games</b:name><b:date>1995-10-21</b:date><a:authorId>5</a:authorId><b:availability>false</b:availability></b:book><b:book id='9'><b:name>The Sum of All Fears</b:name><b:date>1992-09-19</b:date><a:authorId>5</a:authorId><b:availability>false</b:availability></b:book><b:book id='10'><b:name>The Alchemist</b:name><b:date>2017-02-20</b:date><a:authorId>3</a:authorId><b:availability>false</b:availability></b:book><b:book id='11'><b:name>Hamlet</b:name><b:date>1994-06-01</b:date><a:authorId>1</a:authorId><b:availability>false</b:availability></b:book><b:book id='12'><b:name>Measure for Measure</b:name><b:date>1990-03-23</b:date><a:authorId>1</a:authorId><b:availability>false</b:availability></b:book><b:book id='13'><b:name>Hamlet</b:name><b:date>1989-05-05</b:date><a:authorId>1</a:authorId><b:availability>true</b:availability></b:book><b:book id='14'><b:name>Hamlet</b:name><b:date>1999-05-30</b:date><a:authorId>1</a:authorId><b:availability>true</b:availability></b:book><b:book id='15'><b:name>The Law of Success</b:name><b:date>2004-11-26</b:date><a:authorId>6</a:authorId><b:availability>true</b:availability></b:book><b:book id='16'><b:name>Romeo and Juliet</b:name><b:date>1997-02-08</b:date><a:authorId>1</a:authorId><b:availability>true</b:availability></b:book><b:book id='17'><b:name>The Alchemist</b:name><b:date>2009-08-21</b:date><a:authorId>3</a:authorId><b:availability>true</b:availability></b:book></b:books>",
+    "processor": "libxml",
+    "version": "1.0"
+}

Backend-libXML/sample/minimize/pretty

@@ -0,0 +1,104 @@
+<b:books xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://www.demo.com" xmlns:b="http://www.book.com" xmlns:a="http://www.author.com">
+  <b:book id="1">
+    <b:name>Hamlet</b:name>
+    <b:date>2001-05-04</b:date>
+    <a:authorId>1</a:authorId>
+    <b:availability>false</b:availability>
+  </b:book>
+  <b:book id="2">
+    <b:name>Macbeth</b:name>
+    <b:date>2000-12-13</b:date>
+    <a:authorId>1</a:authorId>
+    <b:availability>false</b:availability>
+  </b:book>
+  <b:book id="3">
+    <b:name>Harry Potter and the Sorcerer's Stone</b:name>
+    <b:date>2005-04-29</b:date>
+    <a:authorId>2</a:authorId>
+    <b:availability>true</b:availability>
+  </b:book>
+  <b:book id="4">
+    <b:name>The Long Walk</b:name>
+    <b:date>2018-07-01</b:date>
+    <a:authorId>4</a:authorId>
+    <b:availability>true</b:availability>
+  </b:book>
+  <b:book id="5">
+    <b:name>Misery</b:name>
+    <b:date>2018-01-31</b:date>
+    <a:authorId>4</a:authorId>
+    <b:availability>true</b:availability>
+  </b:book>
+  <b:book id="6">
+    <b:name>Think and Grow Rich</b:name>
+    <b:date>2004-09-10</b:date>
+    <a:authorId>6</a:authorId>
+    <b:availability>true</b:availability>
+  </b:book>
+  <b:book id="7">
+    <b:name>The Law of Success</b:name>
+    <b:date>1982-05-09</b:date>
+    <a:authorId>6</a:authorId>
+    <b:availability>false</b:availability>
+  </b:book>
+  <b:book id="8">
+    <b:name>Patriot Games</b:name>
+    <b:date>1995-10-21</b:date>
+    <a:authorId>5</a:authorId>
+    <b:availability>false</b:availability>
+  </b:book>
+  <b:book id="9">
+    <b:name>The Sum of All Fears</b:name>
+    <b:date>1992-09-19</b:date>
+    <a:authorId>5</a:authorId>
+    <b:availability>false</b:availability>
+  </b:book>
+  <b:book id="10">
+    <b:name>The Alchemist</b:name>
+    <b:date>2017-02-20</b:date>
+    <a:authorId>3</a:authorId>
+    <b:availability>false</b:availability>
+  </b:book>
+  <b:book id="11">
+    <b:name>Hamlet</b:name>
+    <b:date>1994-06-01</b:date>
+    <a:authorId>1</a:authorId>
+    <b:availability>false</b:availability>
+  </b:book>
+  <b:book id="12">
+    <b:name>Measure for Measure</b:name>
+    <b:date>1990-03-23</b:date>
+    <a:authorId>1</a:authorId>
+    <b:availability>false</b:availability>
+  </b:book>
+  <b:book id="13">
+    <b:name>Hamlet</b:name>
+    <b:date>1989-05-05</b:date>
+    <a:authorId>1</a:authorId>
+    <b:availability>true</b:availability>
+  </b:book>
+  <b:book id="14">
+    <b:name>Hamlet</b:name>
+    <b:date>1999-05-30</b:date>
+    <a:authorId>1</a:authorId>
+    <b:availability>true</b:availability>
+  </b:book>
+  <b:book id="15">
+    <b:name>The Law of Success</b:name>
+    <b:date>2004-11-26</b:date>
+    <a:authorId>6</a:authorId>
+    <b:availability>true</b:availability>
+  </b:book>
+  <b:book id="16">
+    <b:name>Romeo and Juliet</b:name>
+    <b:date>1997-02-08</b:date>
+    <a:authorId>1</a:authorId>
+    <b:availability>true</b:availability>
+  </b:book>
+  <b:book id="17">
+    <b:name>The Alchemist</b:name>
+    <b:date>2009-08-21</b:date>
+    <a:authorId>3</a:authorId>
+    <b:availability>true</b:availability>
+  </b:book>
+</b:books>

Backend-libXML/sample/prettify/prettify.curl

@@ -0,0 +1,3 @@
+url = "http://localhost:5000/prettifypost"
+data = "@prettify.json"
+request = POST

Backend-libXML/sample/prettify/prettify.json

@@ -0,0 +1,6 @@
+{
+    "data": "<b:books xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns='http://www.demo.com' xmlns:b='http://www.book.com' xmlns:a='http://www.author.com'><b:book id='1'><b:name>Hamlet</b:name><b:date>2001-05-04</b:date><a:authorId>1</a:authorId><b:availability>false</b:availability></b:book><b:book id='2'><b:name>Macbeth</b:name><b:date>2000-12-13</b:date><a:authorId>1</a:authorId><b:availability>false</b:availability></b:book><b:book id='3'><b:name>Harry Potter and the Sorcerer's Stone</b:name><b:date>2005-04-29</b:date><a:authorId>2</a:authorId><b:availability>true</b:availability></b:book><b:book id='4'><b:name>The Long Walk</b:name><b:date>2018-07-01</b:date><a:authorId>4</a:authorId><b:availability>true</b:availability></b:book><b:book id='5'><b:name>Misery</b:name><b:date>2018-01-31</b:date><a:authorId>4</a:authorId><b:availability>true</b:availability></b:book><b:book id='6'><b:name>Think and Grow Rich</b:name><b:date>2004-09-10</b:date><a:authorId>6</a:authorId><b:availability>true</b:availability></b:book><b:book id='7'><b:name>The Law of Success</b:name><b:date>1982-05-09</b:date><a:authorId>6</a:authorId><b:availability>false</b:availability></b:book><b:book id='8'><b:name>Patriot Games</b:name><b:date>1995-10-21</b:date><a:authorId>5</a:authorId><b:availability>false</b:availability></b:book><b:book id='9'><b:name>The Sum of All Fears</b:name><b:date>1992-09-19</b:date><a:authorId>5</a:authorId><b:availability>false</b:availability></b:book><b:book id='10'><b:name>The Alchemist</b:name><b:date>2017-02-20</b:date><a:authorId>3</a:authorId><b:availability>false</b:availability></b:book><b:book id='11'><b:name>Hamlet</b:name><b:date>1994-06-01</b:date><a:authorId>1</a:authorId><b:availability>false</b:availability></b:book><b:book id='12'><b:name>Measure for Measure</b:name><b:date>1990-03-23</b:date><a:authorId>1</a:authorId><b:availability>false</b:availability></b:book><b:book id='13'><b:name>Hamlet</b:name><b:date>1989-05-05</b:date><a:authorId>1</a:authorId><b:availability>true</b:availability></b:book><b:book id='14'><b:name>Hamlet</b:name><b:date>1999-05-30</b:date><a:authorId>1</a:authorId><b:availability>true</b:availability></b:book><b:book id='15'><b:name>The Law of Success</b:name><b:date>2004-11-26</b:date><a:authorId>6</a:authorId><b:availability>true</b:availability></b:book><b:book id='16'><b:name>Romeo and Juliet</b:name><b:date>1997-02-08</b:date><a:authorId>1</a:authorId><b:availability>true</b:availability></b:book><b:book id='17'><b:name>The Alchemist</b:name><b:date>2009-08-21</b:date><a:authorId>3</a:authorId><b:availability>true</b:availability></b:book></b:books>",
+    "process": "whatever",
+    "processor": "libxml",
+    "version": "1.0"
+}

Backend-libXML/sample/xpath/non-ns.curl

@@ -1,4 +1,4 @@
 #url = "localhost:8081/xpathpost"
-url = "localhost:5000/xpath"
+url = "localhost:5000/xpathpost"
 request = "POST"
 data = "@data.json"

Backend-libXML/sample/xpath/ns.curl

@@ -1,4 +1,4 @@
 #url = "localhost:8081/xpathpost"
-url = "localhost:5000/xpath"
+url = "localhost:5000/xpathpost"
 request = "POST"
 data = "@dataNS.json"

Backend-libXML/sample/xsd/xsd.curl

@@ -1,4 +1,4 @@
-#url = "http://localhost:8082/xsd"
+#url = "http://localhost:8082/xsdpost"
-url = "http://localhost:5000/xsd"
+url = "http://localhost:5000/xsdpost"
 data = "@xsd.json"
 request = POST

Backend-libXML/sample/xslt/xslt.curl

@@ -1,3 +1,3 @@
-url = "http://localhost:5000/xslt"
+url = "http://localhost:5000/xsltpost"
 data = "@xslt.json"
 request = POST

Backend/mocked-services/src/main/resources/static/html/mock.html

@@ -34,15 +34,16 @@
                             <!-- status -->
                             <div class="max-width  small-vertical-margin">
                                 <label for="httpStatus">Http Status</label>
-                                <!-- <input id="httpStatus" class="bordered-field max-width data-field" type="text" value="200" list="httpStatusSuggestion"> -->
+                                <input id="httpStatus" type="number" class="bordered-field max-width data-field" value="200" list="httpStatusSuggestion"/>
-                                <select id="httpStatus" class="bordered-field max-width data-field" value="200">
+                                <datalist id="httpStatusSuggestion">
-                                    <option value="200">200</option>
+                                    <option value="200">
-                                    <option value="300">300</option>
+                                    <option value="300">
-                                    <option value="400">400</option>
+                                    <option value="400">
-                                    <option value="403">403</option>
+                                    <option value="403">
-                                    <option value="404">404</option>
+                                    <option value="404">
-                                    <option value="500">500</option>
+                                    <option value="500">
-                                </select>
+                                </datalist>
+
                             </div>
                             <!-- content type -->
                             <div class="max-width  small-vertical-margin">

Backend/mocked-services/src/main/resources/static/js/datatransfer.js

@@ -13,6 +13,10 @@ const removeMessageName = 'removeMessage';
 const C_UUID = 'mock-uuid';
 const C_ID = 'last-displayed-id';
 const C_ADV = 'advanced-mode';
+
+const color_red = "#ff8f8f";
+const color_grey = "#6b6b6b";
+
 const setModified = function(){
     setDataModified();
 }
@@ -41,7 +45,6 @@ function getData(){
 }
 
 
-
 function checkUuid(){
     if(clientUUID == null || clientUUID == undefined || clientUUID == ''){
         clientUUID = json[0].clientUUID;
@@ -56,11 +59,22 @@ function getDomain(){
     return result;
 }
 
+function httpStatusInvalid(){
+    value = $('#httpStatus').val();
+    return value == '';
+}
+
 function setDataModified(){
-    if(dataModified) return;
+    if(httpStatusInvalid()){
+        $('#btn-save').removeClass('active');
+        $('#btn-save').off();
+        document.getElementById("httpStatus").style.backgroundColor = color_red;
+        return;
+    }
     dataModified = true;
     $('#btn-save').addClass('active');
     $('#btn-save').click(getUpdate);
+    document.getElementById("httpStatus").style.backgroundColor = null;
 }
 
 //Adding change listener to fields
@@ -198,13 +212,13 @@ function clearMock(){
 }
 
 function initializeMock(index){
-    clearMock();
+        clearMock();
-    fillStaticFields(json[index].clientUUID
+        fillStaticFields(json[index].clientUUID
-        , json[index].mockedResponseId
+            , json[index].mockedResponseId
-        , json[index].mediaType
+            , json[index].mediaType
-        , json[index].messageBody
+            , json[index].messageBody
-        , json[index].httpStatus);
+            , json[index].httpStatus);
-    fillHeaderTable(json[index].httpHeaders);
+        fillHeaderTable(json[index].httpHeaders);
 }
 
 function fillStaticFields(uuid, id, mediaType, body, httpStatus){

Frontend/assets/css/tools/r11form.css

@@ -20,7 +20,7 @@
     padding: 15px 30px;
     font-family: 'Nunito', sans-serif;
     width: 30%;
-    height: 100%;
+    height: calc(100% - 25px);
     overflow: scroll;
 }
 
@@ -287,6 +287,10 @@
     width: 100%;
 }
 
+.half-width {
+    width: 50%;
+}
+
 .max-width.with-padding {
     width: 94%;
 }
@@ -437,10 +441,6 @@
     content: "▼";
 }
 
-.content.active{
-    
-}
-
 .hiddable {
     display: none;
 }
@@ -479,6 +479,16 @@ textarea {
 	box-sizing: border-box;
 }
 
-code{
+code {
     line-height: 150%;
+}
+
+@media only screen and (max-width: 768px) {
+    .rwd-hideable {
+        display: none;
+    }
+
+    .rwd-expandable {
+        width: 100%;
+    }
 }

Frontend/assets/scripts/tools/scripts.js

@@ -91,7 +91,7 @@ function refreshTooltip() {
     document.getElementById("xsltelementsheader").innerText = XSLTheader;
 }
 
-function performRequest(text, checkXML, checkTransform){
+function performRequest(endpoint, checkXML, checkTransform){
     var xmlData = document.getElementById("xmlArea").value.trim();
     var transformData = document.getElementById("transformArea").value.trim();
     
@@ -106,7 +106,7 @@ function performRequest(text, checkXML, checkTransform){
         empty = true;
     }
     if (!empty) {
-        restRequest(text);
+        restRequest(endpoint, xmlData, transformData);
     }else{
         document.getElementById("resultArea").value = "No data provided!";
         return false;
@@ -114,17 +114,33 @@ function performRequest(text, checkXML, checkTransform){
     
 }
 
+function performFormatRequest(endpoint, checkXML){
+    var xmlData = document.getElementById("xmlArea").value.trim();
+    
+    var empty = false;
+    if (defaultStrings.includes(xmlData) && checkXML) {
+            document.getElementById("xmlArea").style.backgroundColor = color_red;
+            xmlData = "";
+            empty = true;
+    }
+    if (!empty) {
+        restRequest(endpoint, xmlData, null);
+    }else{
+        document.getElementById("resultArea").value = "No data provided!";
+        return false;
+    }
+    
+}
+
+
 //Form REST request, send, receive and display in resultArea
-async function restRequest(text) {
+async function restRequest(endpoint, xmlData, transformData) {
     const escapeChar = "specialEscapeChar";
     var port = ":8081/"
     if (getProcessor() == "libxml") {
         port = ":8082/"
     }
-    const addr = window.location.protocol + "//" + window.location.hostname + port + text;
+    const addr = window.location.protocol + "//" + window.location.hostname + port + endpoint;
-    
-    var xmlData = document.getElementById("xmlArea").value.trim();
-    var transformData = document.getElementById("transformArea").value.trim();
 
     if(defaultStrings.includes(xmlData)){
         xmlData = "<empty/>";

Frontend/index.html

@@ -25,6 +25,7 @@
                 <li id="toolListRow"><a href="./tools/xpath.html" target="iframe">XPath</a></li>
                 <li id="toolListRow"><a href="./tools/xslt.html" target="iframe">XSLT</a></li>
                 <li id="toolListRow"><a href="./tools/xsd.html" target="iframe">XSD</a></li>
+                <li id="toolListRow"><a href="./tools/formatter.html" target="iframe">Formatter</a></li>
             </ul>
             <div id="copyright">Copyright © 2023<br><a href="http://release11.com/">Release11 Sp. z. o. o.</a></div>
         </div>

Frontend/tools/formatter.html

@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <!-- <link rel="stylesheet" href="styles.css"> -->
+    <link rel="stylesheet" href="../assets/css/tools/r11form.css">
+    <script src="../assets/scripts/tools/scripts.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="utf-8" />
+</head>
+
+<body onload="init();">
+    <div class="container">
+        <div id="tool" class="tool rwd-expandable">
+            <div class="tool-context">
+                <div class="headline">
+                    <h1>Online XML Formatter <span class="versionInfo"><span class="version-span">v0.21.37 BETA</span></span>
+                    </h1>
+                </div>
+
+                <select name="processors" id="processors" class="hidden">
+                    <option value="libxml">libXML</option>
+                </select>
+
+                <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"
+                    onblur="setDefaultContent(this, 'Insert XML here');"
+                    onfocus="clearDefaultContent(this, 'Insert XML here');"></textarea>
+                <br><br>
+                <button id="requestButton" class="max-width block-label action-button active"
+                    onclick="performFormatRequest('prettifypost', true)">Prettify XML</button>
+                <button id="requestButton" class="max-width block-label action-button active"
+                    onclick="performFormatRequest('minimizepost', true)">Minimize XML</button>
+                <br><br>
+
+                <label for="resultArea"><b>Result:<span id="procinfo"></span></b></label>
+                <textarea id="resultArea" name="resultArea" rows="2"
+                    class="bordered-field textarea-300 vert2ically-resizeable max-width" style="margin-bottom: 50px;"></textarea>
+
+            </div>
+        </div>
+        <div class="tooltip-window rwd-hideable">
+            <h2>What is this?</h2>
+            <p>This tool has 2 main functions: 
+                <ul>
+                    <li><strong>Prettify XML</strong> to make it human-readable (add indentation etc.)</li>
+                    <li><strong>Minimize XML</strong> to make it more compact (exactly opposite to above)</li>
+                </ul>
+            </p>
+        </div>
+
+
+
+    </div>
+
+    <!-- <script>
+        function getVersion() {
+            return document.getElementById("versions").value;
+        }
+    </script> -->
+    <script>
+        function processTooltip() {
+            console.log("processTooltip");
+
+
+            if (getProcInfo() == "xalan") {
+                document.getElementById("tooltipFunctionInfo").innerText = "XSLT 1.0 functions";
+                document.getElementById("processorTooltipInfo").innerText = "Supports XSLT 1.0";
+                hideList(document.getElementsByName("collapse30"));
+            } else {
+                document.getElementById("tooltipFunctionInfo").innerText = "XSLT 1.0, 2.0 & 3.0 functions";
+                document.getElementById("processorTooltipInfo").innerText = "Supports XSLT up to 3.0";
+                showList(document.getElementsByName("collapse30"));
+            }
+        }
+    </script>
+    <script>
+        function getProcessor() {
+            return document.getElementById("processors").value;
+        }
+    </script>
+    <script>
+        function getVersion() {
+            if (getProcInfo() == "xalan") {
+                return "1.0";
+            } else {
+                return "3.0";
+            }
+        }
+    </script>
+    <script>
+        function getProcInfo() {
+            var processVariables = document.getElementById("processors").value;// + "&version=" + document.getElementById("versions").value;
+            return processVariables;
+        }
+    </script>
+
+    <script>
+        var triggerList = document.getElementsByClassName("collapseTrigger");
+        for (i = 0; i < triggerList.length; i++) {
+            console.log("trigger connected");
+            triggerList[i].addEventListener("click", function () {
+                console.log("click");
+                var collapsible = this.parentElement;
+                var collapsibleData = this.nextElementSibling;
+                if (collapsibleData.style.maxHeight > "0px") {
+                    collapsibleData.style.maxHeight = "0px";
+
+                    this.classList.toggle("active", false);
+                    if (!this.classList.contains("collapsibleMini")) {
+                        collapsible.classList.toggle("active", false);
+                    }
+
+                    var subLists1 = collapsibleData.getElementsByClassName("content");
+                    var subLists2 = collapsibleData.getElementsByClassName("active");
+                    for (j = 0; j < subLists1.length; j++) {
+                        subLists1[j].style.maxHeight = "0px";
+                    }
+                    for (j = 0; j < subLists2.length; j++) {
+                        subLists2[j].classList.toggle("active", false);
+                    }
+                } else {
+                    collapsibleData.style.maxHeight = (collapsibleData.scrollHeight) + "px";
+
+                    this.classList.toggle("active", true);
+                    if (!this.classList.contains("collapsibleMini")) {
+                        collapsible.classList.toggle("active", true);
+                    } else {
+                        var parentContent = this.closest(".content");
+                        parentContent.style.maxHeight = (parentContent.scrollHeight + collapsibleData.scrollHeight) + "px";
+                    }
+                }
+            });
+        }
+    </script>
+
+    <script>
+        function init() {
+            //Handle clicks in whole form and set info in tooltip
+            setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
+            setDefaultContent(document.getElementById("transformArea"), 'Insert XSD here');
+            console.log("init");
+            // refreshTooltip();
+            processTooltip();
+            tool.addEventListener('click', event => {
+                //Check if script was called from textarea or selector
+                var targetID = event.target.getAttribute('id');
+                if (targetID !== "processors" && targetID !== "xmlArea" && targetID !== "transformArea" && targetID !== "versions") {
+                    return;
+                }
+
+                processTooltip();
+                // console.log("clock");
+            })
+        }
+    </script>
+
+</body>
+
+</html>

Frontend/tools/xpath.html

@@ -7,13 +7,14 @@
     <script src="../assets/scripts/tools/jquery-3.6.0.slim.min.js"></script>
     <link rel="stylesheet" href="../assets/css/tools/r11form.css">
     <script src="../assets/scripts/tools/scripts.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8" />
 </head>
 
 <body onload="init();">
 
     <div class="container">
-        <div id="tool" class="tool">
+        <div id="tool" class="tool rwd-expandable">
             <div class="tool-context">
                 <div class="headline">
                     <h1>Online XPath tester <span class="versionInfo"><span class="version-span">v0.4</span></span></h1>
@@ -61,19 +62,21 @@
 
             </div>
         </div>
-        <div class="tooltip tooltip-window">
+        <div class="tooltip tooltip-window rwd-hideable">
             <h2>What is XPath?</h2>
-            <p>XPath is a querry language used for selecting nodes from XML and processing them.<br>
+            <p>XPath is a query language used for selecting nodes from XML and processing them.<br>
                 It may perform operations on strings, numbers and boolean values.<br></p>
 
             <span id="collapsible-lists">
                 <div class="collapsible">
-                    <button class="section-button collapseTrigger" style="border: none">XPath 1.0 vs 2.0 vs 3.0 vs
+                    <span>
-                        3.1</button>
+                        <button class="section-button collapseTrigger" style="border: none">XPath 1.0 vs 2.0 vs 3.0 vs
+                            3.1</button>
+                    </span>
                     <div class="content">
                         <p><b>XPath 2.0 introduced many new features XQuery-cośtam:</b><br>
                             - Added support for all XML simple types<br>
-                            - Many new functions (trippled instruction count)<br>
+                            - Many new functions (tripled instruction count)<br>
                             - All expressions evaluate to sequence<br>
                             - Introduces conditional expressions and for-loops<br>
                         </p>
@@ -81,14 +84,14 @@
                             - Dynamic function calls (function may be called without being referenced by name (find
                             function in collection and call)<br>
                             - Inline functions<br>
-                            - Namespace literals - Namespace may be embeded into function name<br>
+                            - Namespace literals - Namespace may be embedded into function name<br>
                             - Support for union types - collections containing elements of different types<br>
                             - Mapping operator - '!' performs evaluation for each element in sequence and
                             concatenates results<br>
                             - Introduced maps <br>
                         </p>
                         <p><b>XPath 3.1</b><br>
-                            - New operator for function chaing '=>' <br>
+                            - New operator for function chaining '=>' <br>
                             - Introduced maps that store data in pair 'key:value' - 'map{ key : value, key : value
                             }'<br>
                             - Introduced arrays - they differ from sequences in that they can be nested 'array{1, 5, 7,
@@ -105,7 +108,9 @@
 
 
                 <div class="collapsible">
-                    <button class="section-button collapseTrigger" style="border: none">Node-Set</button>
+                    <span>
+                        <button class="section-button collapseTrigger" style="border: none">Node-Set</button>
+                    </span>
                     <div class="content">
 
 
@@ -334,7 +339,9 @@
                     </div>
                 </div>
                 <div class="collapsible">
-                    <button class="section-button collapseTrigger" style="border: none">String</button>
+                    <span>
+                        <button class="section-button collapseTrigger" style="border: none">String</button>
+                    </span>
                     <div class="content">
 
 
@@ -1244,7 +1251,9 @@
                     </div>
                 </div>
                 <div class="collapsible">
-                    <button class="section-button collapseTrigger" style="border: none">Collections</button>
+                    <span name="collapse20">
+                        <button class="section-button collapseTrigger" style="border: none">Collections</button>
+                    </span>
                     <div class="content">
 
                         <span name="collapse20">
@@ -1698,7 +1707,9 @@
                     </div>
                 </div>
                 <div class="collapsible">
-                    <button class="section-button collapseTrigger" style="border: none">Date / Time</button>
+                    <span name="collapse20">
+                        <button class="section-button collapseTrigger" style="border: none">Date / Time</button>
+                    </span>
                     <div class="content">
 
                         <span name="collapse20">
@@ -2602,7 +2613,9 @@
                     </div>
                 </div>
                 <div class="collapsible">
+                    <span name="collapse20">
                     <button class="section-button collapseTrigger" style="border: none">Error</button>
+                    </span>
                     <div class="content">
 
                         <span name="collapse20">
@@ -2669,7 +2682,9 @@
                     </div>
                 </div>
                 <div class="collapsible">
-                    <button class="section-button collapseTrigger" style="border: none">Misc</button>
+                    <span name="collapse20">
+                        <button class="section-button collapseTrigger" style="border: none">Misc</button>
+                    </span>
                     <div class="content">
 
                         <span name="collapse20">
@@ -2990,71 +3005,76 @@
 
 
                     </div>
-                </div><span name="collapse30">
+                </div>
-                    <div class="collapsible">
+
+
+                <div class="collapsible">
+                    <span name="collapse30">
                         <button class="section-button collapseTrigger" style="border: none">Loop /
                             Conditional</button>
-                        <div class="content">
+                    </span>
-                </span>
-                <span name="collapse30">
-                    [3.0] <a href="#" onClick="return false;"
-                        class="hyperlink collapsible collapsibleMini collapseTrigger"><code>fn:for-each(sequence*, function)</code></a>
                     <div class="content">
-                        <div class="section">
+                        <span name="collapse30">
-                            Applies function item to every element in sequence <br>
+                            [3.0] <a href="#" onClick="return false;"
-                            <br>
+                                class="hyperlink collapsible collapsibleMini collapseTrigger"><code>fn:for-each(sequence*, function)</code></a>
-                            <code>W3C Documentation reference: <a href="https://www.w3.org/TR/xpath-functions-30/#func-for-each" class="hyperlink" target="_blank">#func-for-each</code></a>
+                            <div class="content">
-                        </div>
+                                <div class="section">
-                    </div>
+                                    Applies function item to every element in sequence <br>
-                </span>
+                                    <br>
+                                    <code>W3C Documentation reference: <a href="https://www.w3.org/TR/xpath-functions-30/#func-for-each" class="hyperlink" target="_blank">#func-for-each</code></a>
+                                </div>
+                            </div>
+                        </span>
 
-                <span name="collapse30">
+                        <span name="collapse30">
-                    [3.0] <a href="#" onClick="return false;"
+                            [3.0] <a href="#" onClick="return false;"
-                        class="hyperlink collapsible collapsibleMini collapseTrigger"><code>fn:for-each-pair(sequence*, sequence*, function)</code></a>
+                                class="hyperlink collapsible collapsibleMini collapseTrigger"><code>fn:for-each-pair(sequence*, sequence*, function)</code></a>
-                    <div class="content">
+                            <div class="content">
-                        <div class="section">
+                                <div class="section">
-                            Applies the function to consecutive pairs of elements taken from sequences <br>
+                                    Applies the function to consecutive pairs of elements taken from sequences <br>
-                            <br>
+                                    <br>
-                            <code>W3C Documentation reference: <a href="https://www.w3.org/TR/xpath-functions-30/#func-for-each-pair" class="hyperlink" target="_blank">#func-for-each-pair</code></a>
+                                    <code>W3C Documentation reference: <a href="https://www.w3.org/TR/xpath-functions-30/#func-for-each-pair" class="hyperlink" target="_blank">#func-for-each-pair</code></a>
-                        </div>
+                                </div>
-                    </div>
+                            </div>
-                </span>
+                        </span>
 
-                <span name="collapse30">
+                        <span name="collapse30">
-                    [3.0] <a href="#" onClick="return false;"
+                            [3.0] <a href="#" onClick="return false;"
-                        class="hyperlink collapsible collapsibleMini collapseTrigger"><code>fn:fold-left(sequence*, baseValue, function)</code></a>
+                                class="hyperlink collapsible collapsibleMini collapseTrigger"><code>fn:fold-left(sequence*, baseValue, function)</code></a>
-                    <div class="content">
+                            <div class="content">
-                        <div class="section">
+                                <div class="section">
-                            Applies function item to every element in sequence, accumulating value <br>
+                                    Applies function item to every element in sequence, accumulating value <br>
-                            <br>
+                                    <br>
-                            <code>W3C Documentation reference: <a href="https://www.w3.org/TR/xpath-functions-30/#func-fold-left" class="hyperlink" target="_blank">#func-fold-left</code></a>
+                                    <code>W3C Documentation reference: <a href="https://www.w3.org/TR/xpath-functions-30/#func-fold-left" class="hyperlink" target="_blank">#func-fold-left</code></a>
-                        </div>
+                                </div>
-                    </div>
+                            </div>
-                </span>
+                        </span>
 
-                <span name="collapse30">
+                        <span name="collapse30">
-                    [3.0] <a href="#" onClick="return false;"
+                            [3.0] <a href="#" onClick="return false;"
-                        class="hyperlink collapsible collapsibleMini collapseTrigger"><code>fn:fold-right()</code></a>
+                                class="hyperlink collapsible collapsibleMini collapseTrigger"><code>fn:fold-right()</code></a>
-                    <div class="content">
+                            <div class="content">
-                        <div class="section">
+                                <div class="section">
-                            Applies function item to every element in sequence, accumulating value <br>
+                                    Applies function item to every element in sequence, accumulating value <br>
-                            <br>
+                                    <br>
-                            <code>W3C Documentation reference: <a href="https://www.w3.org/TR/xpath-functions-30/#func-fold-right" class="hyperlink" target="_blank">#func-fold-right</code></a>
+                                    <code>W3C Documentation reference: <a href="https://www.w3.org/TR/xpath-functions-30/#func-fold-right" class="hyperlink" target="_blank">#func-fold-right</code></a>
-                        </div>
+                                </div>
-                    </div>
+                            </div>
-                </span>
+                        </span>
 
-                <span name="collapse30">
+                        <span name="collapse30">
-                    [3.0] <a href="#" onClick="return false;"
+                            [3.0] <a href="#" onClick="return false;"
-                        class="hyperlink collapsible collapsibleMini collapseTrigger"><code>fn:filter(sequence*, function)</code></a>
+                                class="hyperlink collapsible collapsibleMini collapseTrigger"><code>fn:filter(sequence*, function)</code></a>
-                    <div class="content">
+                            <div class="content">
-                        <div class="section">
+                                <div class="section">
-                            Returns those items from the sequence for which the supplied function returns true <br>
+                                    Returns those items from the sequence for which the supplied function returns true <br>
-                            <br>
+                                    <br>
-                            <code>W3C Documentation reference: <a href="https://www.w3.org/TR/xpath-functions-30/#func-filter" class="hyperlink" target="_blank">#func-filter</code></a>
+                                    <code>W3C Documentation reference: <a href="https://www.w3.org/TR/xpath-functions-30/#func-filter" class="hyperlink" target="_blank">#func-filter</code></a>
-                        </div>
+                                </div>
+                            </div>
+                        </span>
                     </div>
-                </span>
+                </div>
 
         </div>
         <!-- Cut here -->
@@ -3100,18 +3120,28 @@
 
 
             if (filter == "collapse3.0") {
-                showList(document.getElementsByName("collapse30"));
                 document.getElementById("tooltipFunctionInfo").innerText = "XPath 1.0, 2.0 & 3.0 functions";
-                // hideList(document.getElementsByName("collapse31"));
+                showList(document.getElementsByName("collapse20"));
+                showList(document.getElementsByName("collapse30"));
+                hideList(document.getElementsByName("collapse31"));
                 console.log("collapsed 3.0");
             } else if (filter == "collapse3.1") {
-                showList(document.getElementsByName("collapse31"));
                 document.getElementById("tooltipFunctionInfo").innerText = "XPath 1.0, 2.0, 3.0 & 3.1 functions";
+                showList(document.getElementsByName("collapse20"));
+                showList(document.getElementsByName("collapse30"));
+                showList(document.getElementsByName("collapse31"));
                 console.log("collapsed 3.1");
-            } else {
+            } else if (filter == "collapse2.0"){
                 document.getElementById("tooltipFunctionInfo").innerText = "XPath 1.0 & 2.0 functions";
+                showList(document.getElementsByName("collapse20"));
                 hideList(document.getElementsByName("collapse30"));
                 hideList(document.getElementsByName("collapse31"));
+            } else {
+                document.getElementById("tooltipFunctionInfo").innerText = "XPath 1.0 functions";
+                hideList(document.getElementsByName("collapse20"));
+                hideList(document.getElementsByName("collapse30"));
+                hideList(document.getElementsByName("collapse31"));
+
             }
 
 
@@ -3151,7 +3181,14 @@
             console.log("trigger connected");
             triggerList[i].addEventListener("click", function () {
                 var collapsible = this.parentElement;
-                var collapsibleData = this.nextElementSibling;
+                if (this.tagName == "A") {
+                    var collapsibleData = this.nextElementSibling;
+                } else {
+                    var collapsibleData = this.parentElement.nextElementSibling;
+                    
+                }
+
+                console.log(collapsibleData);
                 if (collapsibleData.style.maxHeight > "0px") {
                     collapsibleData.style.maxHeight = "0px";
 
@@ -3193,14 +3230,14 @@
             setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
             setDefaultContent(document.getElementById("transformArea"), 'Insert XPath expression here');
             console.log("init");
-            processTooltip();
             processVersionSelector();
+            processTooltip();
             tool.addEventListener('change', event => {
                 //Check if script was called from textarea or selector
                 var targetID = event.target.getAttribute('id');
                 if (targetID == "processors") {
-                    processTooltip();
                     processVersionSelector();
+                    processTooltip();
                 }
                 else if (targetID == "versions") {
                     processTooltip();
@@ -3215,7 +3252,7 @@
                     return;
                 }
                 processTooltip();
-                processVersionSelector();
+
             })
             tool.addEventListener('change', event => {
                 //Check if script was called from textarea or selector
@@ -3224,7 +3261,6 @@
                     return;
                 }
                 processTooltip();
-                processVersionSelector();
             })
         }
     </script>

Frontend/tools/xsd.html

@@ -5,24 +5,31 @@
     <!-- <link rel="stylesheet" href="styles.css"> -->
     <link rel="stylesheet" href="../assets/css/tools/r11form.css">
     <script src="../assets/scripts/tools/scripts.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8" />
 </head>
 
 <body onload="init();">
     <div class="container">
-        <div id="tool" class="tool">
+        <div id="tool" class="tool rwd-expandable">
             <div class="tool-context">
                 <div class="headline">
                     <h1>Online XSD tester <span class="versionInfo"><span class="version-span">v0.4 BETA</span></span>
                     </h1>
                 </div>
+                <div class="display-space-between">
+                    <div style="text-align: center;">
                 <label for="processors">Select XSLT processor:</label>
                 <select name="processors" id="processors">
                     <option value="xalan">Xalan</option>
                     <option value="libxml">libXML</option>
                 </select>
+                    </div>
+                    <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px; float: right;"
+                            onclick="fillDefaultXML(this)">Insert default XML</button>
+                </div>
+
                 <!-- <span id="processorTooltipInfo">procInfo</span><br> -->
-                <br>
 
                 <label for="xmlArea"><b>Insert your XML:</b></label>
                 <textarea id="xmlArea" name="xmlArea" rows="15"
@@ -47,7 +54,7 @@
 
             </div>
         </div>
-        <div class="tooltip-window">
+        <div class="tooltip-window rwd-hideable">
             <h2>What is XSD?</h2>
             <p><b>XSD is a W3C recomedation that specifies how to describe the elements in XML document</b></p>
                 <p>XSD specifies data types, order and arity of elements in XML file.<br>

Frontend/tools/xslt.html

@@ -5,22 +5,30 @@
     <!-- <link rel="stylesheet" href="styles.css"> -->
     <link rel="stylesheet" href="../assets/css/tools/r11form.css">
     <script src="../assets/scripts/tools/scripts.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8" />
 </head>
 
 <body onload="init();">
     <div class="container">
-        <div id="tool" class="tool">
+        <div id="tool" class="tool rwd-expandable">
             <div class="tool-context">
                 <div class="headline">
                     <h1>Online XSLT tester <span class="versionInfo"><span class="version-span">v0.4</span></span></h1>
                 </div>
+                <div class="display-space-between">
+                    <div style="text-align: center;">
                 <label for="processors">Select XSLT processor:</label>
                 <select name="processors" id="processors">
                     <option value="saxon">Saxon</option>
                     <option value="xalan">Xalan</option>
                     <option value="libxml">libXML</option>
                 </select>
+                    </div>
+                    <button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px; float: right;"
+                            onclick="fillDefaultXML(this)">Insert default XML</button>
+                </div>
+
                 <span id="processorTooltipInfo">procInfo</span><br>
                 <br>
 
@@ -47,7 +55,7 @@
 
             </div>
         </div>
-        <div class="tooltip tooltip-window">
+        <div class="tooltip tooltip-window rwd-hideable">
             <h2>What is XSLT?</h2>
             <p>XSLT is a language for transforming XML documents into other documents such as XML, HTML and many
                 other.<br></p>
@@ -1218,7 +1226,16 @@
                 }
 
                 processTooltip();
-                // console.log("clock");
+            })
+
+            tool.addEventListener('change', event => {
+                //Check if script was called from textarea or selector
+                var targetID = event.target.getAttribute('id');
+                if (targetID !== "processors") {
+                    return;
+                }
+
+                processTooltip();
             })
         }
     </script>