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

Refactor javascript

Browse Source 
move repeating javascript code to scripts.js file
This commit is contained in:
Mikolaj Widla
2023-03-22 14:22:09 +01:00
parent cfe5eb3b88
commit 52ca53adb6
6 changed files with 231 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
Frontend/assets/scripts/tools/scripts.js
View File

@@ -20,6 +20,34 @@ function clearDefaultContent(element, text) {
}
}
/**
* It returns the value of the element with id "processors".
*
* @function
* @name getProcessor
* @kind function
* @returns {any}
*/
function getProcessor() {
return document.getElementById("processors").value;
}
/**
* It returns version of XSLT.
*
* @function
* @name getVersion
* @kind function
* @returns {"1.0" | "3.0"}
*/
function getVersion() {
if (getProcessor() == "xalan") {
return "1.0";
} else {
return "3.0";
}
}
/**
* It clears all data fields.
*

153
Frontend/assets/scripts/tools/xpath.js
View File

@@ -1,153 +0,0 @@
import "../common/jquery-3.6.0.slim.min.js";
function processVersionSelector() {
var processor = getProcessor();
var hideableOptions = document.getElementsByClassName("hideable");
for (let i = 0; i < hideableOptions.length; i++) {
hideableOptions[i].style = "display: none;";
}
if (processor == "xalan" || processor == "libxml") {
var xalanOptions = document.getElementsByClassName("xalan");
for (let i = 0; i < xalanOptions.length; i++) {
xalanOptions[i].style = "";
}
document.getElementById("versions").selectedIndex = 0;
}
else {
var saxonOptions = document.getElementsByClassName("saxon");
for (let i = 0; i < saxonOptions.length; i++) {
saxonOptions[i].style = "";
}
document.getElementById("versions").selectedIndex = 3;
}
processTooltip();
}
function processTooltip() {
var filter = "collapse" + getVersion();
var collList;
console.log("filter: ", filter);
if (filter == "collapse3.0") {
document.getElementById("tooltipFunctionInfo").innerText = "XPath 1.0, 2.0 & 3.0 functions";
showList(document.getElementsByName("collapse20"));
showList(document.getElementsByName("collapse30"));
hideList(document.getElementsByName("collapse31"));
console.log("collapsed 3.0");
} else if (filter == "collapse3.1") {
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 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"));
}
}
function getVersion() {
return document.getElementById("versions").value;
}
function getProcessor() {
return document.getElementById("processors").value;
}
function getProcInfo() {
var processVariables = document.getElementById("processors").value + "&version=" + getVersion();
return processVariables;
}
var triggerList = document.getElementsByClassName("collapseTrigger");
for (i = 0; i < triggerList.length; i++) {
console.log("trigger connected");
triggerList[i].addEventListener("click", function () {
var collapsible = this.parentElement;
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";
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";
}
}
});
}
function init() {
//Handle clicks in whole form and set info in tooltip
setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
setDefaultContent(document.getElementById("transformArea"), 'Insert XPath expression here');
console.log("init");
processVersionSelector();
processTooltip();
tool.addEventListener('change', event => {
//Check if script was called from textarea or selector
var targetID = event.target.getAttribute('id');
if (targetID == "processors") {
processVersionSelector();
processTooltip();
}
else if (targetID == "versions") {
processTooltip();
}
})
tool.addEventListener('click', event => {
//Check if script was called from textarea or selector
var targetID = event.target.getAttribute('id');
if (targetID !== "xmlArea" && targetID !== "transformArea") {
return;
}
processTooltip();
})
tool.addEventListener('change', event => {
//Check if script was called from textarea or selector
var targetID = event.target.getAttribute('id');
if (targetID !== "xmlArea" && targetID !== "transformArea") {
return;
}
processTooltip();
})
}

18
Frontend/assets/scripts/tools/xsd.js
View File

@@ -1,18 +0,0 @@
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");
})
}

143
Frontend/tools/xpath.html
View File

@@ -6,7 +6,6 @@
<!-- <link rel="stylesheet" href="styles.css"> -->
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
<script src="../assets/scripts/tools/scripts.js"> </script>
<script src="../assets/scripts/tools/xpath.js"> </script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
@@ -3383,6 +3382,148 @@
</div>
<script>
function processVersionSelector() {
var processor = getProcessor();
var hideableOptions = document.getElementsByClassName("hideable");
for (let i = 0; i < hideableOptions.length; i++) {
hideableOptions[i].style = "display: none;";
}
if (processor == "xalan" || processor == "libxml") {
var xalanOptions = document.getElementsByClassName("xalan");
for (let i = 0; i < xalanOptions.length; i++) {
xalanOptions[i].style = "";
}
document.getElementById("versions").selectedIndex = 0;
}
else {
var saxonOptions = document.getElementsByClassName("saxon");
for (let i = 0; i < saxonOptions.length; i++) {
saxonOptions[i].style = "";
}
document.getElementById("versions").selectedIndex = 3;
}
processTooltip();
}
function processTooltip() {
var filter = "collapse" + getVersion();
var collList;
console.log("filter: ", filter);
if (filter == "collapse3.0") {
document.getElementById("tooltipFunctionInfo").innerText = "XPath 1.0, 2.0 & 3.0 functions";
showList(document.getElementsByName("collapse20"));
showList(document.getElementsByName("collapse30"));
hideList(document.getElementsByName("collapse31"));
console.log("collapsed 3.0");
} else if (filter == "collapse3.1") {
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 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"));
}
}
var triggerList = document.getElementsByClassName("collapseTrigger");
for (i = 0; i < triggerList.length; i++) {
console.log("trigger connected");
triggerList[i].addEventListener("click", function () {
var collapsible = this.parentElement;
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";
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";
}
}
});
}
function init() {
//Handle clicks in whole form and set info in tooltip
setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
setDefaultContent(document.getElementById("transformArea"), 'Insert XPath expression here');
console.log("init");
processVersionSelector();
processTooltip();
tool.addEventListener('change', event => {
//Check if script was called from textarea or selector
var targetID = event.target.getAttribute('id');
if (targetID == "processors") {
processVersionSelector();
processTooltip();
}
else if (targetID == "versions") {
processTooltip();
}
})
tool.addEventListener('click', event => {
//Check if script was called from textarea or selector
var targetID = event.target.getAttribute('id');
if (targetID !== "xmlArea" && targetID !== "transformArea") {
return;
}
processTooltip();
})
tool.addEventListener('change', event => {
//Check if script was called from textarea or selector
var targetID = event.target.getAttribute('id');
if (targetID !== "xmlArea" && targetID !== "transformArea") {
return;
}
processTooltip();
})
}
</script>
</body>
</html>

66
Frontend/tools/xsd.html
View File

@@ -5,7 +5,6 @@
<!-- <link rel="stylesheet" href="styles.css"> -->
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
<script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/tools/xsd.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
@@ -19,11 +18,11 @@
</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>
<label for="processors">Select XSLT processor:</label>
<select name="processors" id="processors">
<option value="xalan">Xalan</option>
<option value="libxml">libXML</option>
</select>
</div>
<div>
<button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
@@ -63,20 +62,57 @@
<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>
Main components of XSD file are:<br>
- Element declaration - declares properties of elements (names and namespaces)<br>
- Attribute declarations - declares properties of attributes<br>
- Simple and complex types:<br>
- - XSD provides 19 simple data types<br>
- - More complex types are declared using simple types and relationships<br>
</p>
<p>XSD specifies data types, order and arity of elements in XML file.<br>
Main components of XSD file are:<br>
- Element declaration - declares properties of elements (names and namespaces)<br>
- Attribute declarations - declares properties of attributes<br>
- Simple and complex types:<br>
- - XSD provides 19 simple data types<br>
- - More complex types are declared using simple types and relationships<br>
</p>
</div>
</div>
<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");
})
}
function processTooltip() {
console.log("processTooltip");
if (getProcessor() == "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>
</body>
</html>
</html>

50
Frontend/tools/xslt.html
View File

@@ -18,12 +18,12 @@
</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>
<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>
<div>
<button class="action-button active" id="clearXMLButton" style="padding: 3px 10px;"
@@ -57,7 +57,8 @@
<label for="resultArea"><b>Transform result:<span id="procinfo"></span></b></label>
<textarea disabled id="resultArea" name="resultArea" rows="10"
class="textarea-300 bordered-field vertically-resizeable max-width" style="margin-bottom: 50px;" ></textarea>
class="textarea-300 bordered-field vertically-resizeable max-width"
style="margin-bottom: 50px;"></textarea>
</div>
</div>
@@ -1135,17 +1136,10 @@
</div>
<!-- <script>
function getVersion() {
return document.getElementById("versions").value;
}
</script> -->
<script>
function processTooltip() {
console.log("processTooltip");
if (getProcInfo() == "xalan" || getProcInfo() == "libxml") {
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"));
@@ -1155,29 +1149,7 @@
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");
@@ -1214,9 +1186,7 @@
}
});
}
</script>
<script>
function init() {
//Handle clicks in whole form and set info in tooltip
setDefaultContent(document.getElementById("xmlArea"), 'Insert XML here');
@@ -1248,4 +1218,4 @@
</body>
</html>
</html>