R11/release11-tools
4
2
Fork 0
Code Issues 9 Pull Requests 4 Packages Projects Releases 6 Wiki Activity

Added draft page for XQuery tool and connected it to menu

Browse Source
This commit is contained in:
Adam Bem
2023-06-05 14:53:27 +02:00
parent 86b3572003
commit 559a21b1ec
4 changed files with 191 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Frontend/assets/scripts/frame.js
View File

@@ -25,6 +25,7 @@ function init() {
tools.set("xpath", "tools/xpath.html");
tools.set("xsd", "tools/xsd.html");
tools.set("xslt", "tools/xslt.html");
tools.set("xquery", "tools/xquery.html");
tools.set("xmlform", "tools/xmlFormatter.html");
tools.set("jsonform", "tools/jsonFormatter.html");
tools.set("mock", "tools/mock.html");

100
Frontend/assets/scripts/tools/xquery.js Normal file
View File

@@ -0,0 +1,100 @@
/**
* The `processTooltip()` function is responsible for updating the display of the tooltip based on the selected version of the processor.
* It shows or hides different sections of the tooltip based on the selected version.
* It also handles the click event on the form and updates the tooltip accordingly.
*
* @function
* @name processTooltip
* @kind function
*/
function processTooltip() {
if (getProcessor() == "xalan" || getProcessor() == "libxml") {
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"));
}
}
/**
* This function is executed after the page is loaded.
*
* @function
* @name init
* @kind function
*/
function init() {
// Make sure that only plain text is pasted
configurePastingInElement("xmlArea");
configurePastingInElement("transformArea");
//Handle clicks in whole form and set info in tooltip
setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
setDefaultContent(document.getElementById("transformArea"), 'Insert XSLT here');
// 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();
})
tool.addEventListener('change', event => {
//Check if script was called from textarea or selector
var targetID = event.target.getAttribute('id');
if (targetID !== "processors") {
return;
}
processTooltip();
})
var triggerList = document.getElementsByClassName("collapseTrigger");
for (i = 0; i < triggerList.length; i++) {
triggerList[i].addEventListener("click", function () {
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";
}
}
});
}
}

1
Frontend/index.html
View File

@@ -36,6 +36,7 @@
<li class="toolListRow xmlTool"><a href="#" onclick="changeTool('xpath');">XPath</a></li>
<li class="toolListRow xmlTool"><a href="#" onclick="changeTool('xslt');">XSLT</a></li>
<li class="toolListRow xmlTool"><a href="#" onclick="changeTool('xsd');">XSD</a></li>
<li class="toolListRow xmlTool"><a href="#" onclick="changeTool('xquery');">XQuery</a></li>
<li class="toolListRow xmlTool"><a href="#" onclick="changeTool('xmlform');">XML Formatter</a></li>
<li class="toolListRow jsonTool"><a href="#" onclick="changeTool('jsonform');">JSON Formatter</a></li>
</ul>

89
Frontend/tools/xquery.html Normal file
View File

@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<!-- <link rel="stylesheet" href="styles.css"> -->
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
<link rel="stylesheet" href="../assets/css/highlight.css">
<script src="../assets/scripts/common/hljs.min.js"></script>
<script src="../assets/scripts/tools/xquery.js"></script>
<script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/tools/highlight.js"></script>
<script>hljs.highlightAll();</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 XQuery tester</h1>
</div>
<div class="display-space-between">
<div style="text-align: center;">
<label for="processors">Select XQuery processor:</label>
<select name="processors" id="processors">
<option value="saxon">Saxon</option>
<option value="xalan">Xalan</option>
<option value="libxml">libXML</option>
</select>
<select name="versions" id="versions" style="display: none;">
<option class="hideable libxml xalan" value="1.0">1.0</option>
<option class="hideable saxon" value="2.0">2.0</option>
<option class="hideable saxon" value="3.0">3.0</option>
<option class="hideable saxon" value="3.1">3.1</option>
</select>
</div>
<div>
<button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
onclick="clearDataField()">Clear</button>
<button class="action-button active" id="prettyXMLButton" style="padding: 3px 10px;"
onclick="performFormatRequest('prettify', true, 'xmlArea', 'xmlArea')">Format XML</button>
<button class="action-button active" id="defaultXMLButton" style="padding: 3px 10px;"
onclick="fillDefaultXML(this)">Insert default XML</button>
</div>
</div>
<span id="processorTooltipInfo">procInfo</span><br>
<br>
<label for="xmlArea"><b>Insert your XML:</b></label>
<pre><code class="language-xml bordered-field textarea-300" id="xmlArea" contenteditable="True"></code></pre>
<br>
<div class="display-space-between">
<label for="transformArea"><b>Insert your XQuery:</b></label>
<div>
<button class="action-button active" id="defaultQueryButton" style="padding: 3px 10px;">Insert default query</button>
</div>
</div>
<pre><code class="language-xml bordered-field textarea-300" id="transformArea" contenteditable="True"></code></pre>
<br>
<button id="requestButton" class="max-width block-label action-button active"
onclick="performRequest('xquery', true, true)">Execute XQuery</button>
<br>
<label for="resultArea"><b>Transform result:<span id="procinfo"></span></b></label>
<pre><code class="language-xml bordered-field textarea-300" id="resultArea"></code></pre>
</div>
</div>
<div class="tooltip tooltip-window rwd-hideable">
<h2>What is XSLT?</h2>
TBD
</div>
<!-- Cut END -->
</div>
</div>
</div>
</body>
</html>