Refactor javascript

move repeating javascript code to scripts.js file
This commit is contained in:
2023-03-22 14:22:09 +01:00
parent cfe5eb3b88
commit 52ca53adb6
6 changed files with 231 additions and 227 deletions

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>