Moved scripts from .html files to seperate js .files (#191)

Let's hope everything works as before or better.

Co-authored-by: Adam Bem <adam.bem@zoho.eu>
Reviewed-on: #191
Reviewed-by: Mikolaj Widla <widlam@noreply.example.com>
This commit is contained in:
2023-05-16 09:59:04 +02:00
parent 2d97e39dbe
commit bcbfd34feb
12 changed files with 616 additions and 551 deletions

View File

@@ -7,10 +7,9 @@
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
<link rel="stylesheet" href="../assets/css/highlight.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/common/hljs.min.js"></script>
<script src="../assets/scripts/tools/jsonFormatter.js"></script>
<script src="../assets/scripts/tools/highlight.js"></script>
<script src="../assets/scripts/tools/json.js"></script>
<script>hljs.highlightAll();</script>
</head>
@@ -61,175 +60,5 @@
</div>
</div>
<script>
const mergeHTMLPlugin = (function () {
'use strict';
var originalStream;
/**
* @param {string} value
* @returns {string}
*/
function escapeHTML(value) {
return value
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#x27;');
}
/* plugin itself */
/** @type {HLJSPlugin} */
const mergeHTMLPlugin = {
// preserve the original HTML token stream
"before:highlightElement": ({el}) => {
originalStream = nodeStream(el);
},
// merge it afterwards with the highlighted token stream
"after:highlightElement": ({el, result, text}) => {
if (!originalStream.length) {
return;
}
const resultNode = document.createElement('div');
resultNode.innerHTML = result.value;
result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
el.innerHTML = result.value;
}
};
/**
* @param {Node} node
*/
function tag(node) {
return node.nodeName.toLowerCase();
}
/**
* @param {Node} node
*/
function nodeStream(node) {
/** @type Event[] */
const result = [];
(function _nodeStream(node, offset) {
for (let child = node.firstChild; child; child = child.nextSibling) {
if (child.nodeType === 3) {
offset += child.nodeValue.length;
} else if (child.nodeType === 1) {
result.push({
event: 'start',
offset: offset,
node: child
});
offset = _nodeStream(child, offset);
if (!tag(child).match(/br|hr|img|input/)) {
result.push({
event: 'stop',
offset: offset,
node: child
});
}
}
}
return offset;
})(node, 0);
return result;
}
/**
* @param {any} original - the original stream
* @param {any} highlighted - stream of the highlighted source
* @param {string} value - the original source itself
*/
function mergeStreams(original, highlighted, value) {
let processed = 0;
let result = '';
const nodeStack = [];
function selectStream() {
if (!original.length || !highlighted.length) {
return original.length ? original : highlighted;
}
if (original[0].offset !== highlighted[0].offset) {
return (original[0].offset < highlighted[0].offset) ? original : highlighted;
}
return highlighted[0].event === 'start' ? original : highlighted;
}
/**
* @param {Node} node
*/
function open(node) {
/** @param {Attr} attr */
function attributeString(attr) {
return ' ' + attr.nodeName + '="' + escapeHTML(attr.value) + '"';
}
// @ts-ignore
result += '<' + tag(node) + [].map.call(node.attributes, attributeString).join('')
+ '>';
}
/**
* @param {Node} node
*/
function close(node) {
result += '</' + tag(node) + '>';
}
/**
* @param {Event} event
*/
function render(event) {
(event.event === 'start' ? open : close)(event.node);
}
while (original.length || highlighted.length) {
let stream = selectStream();
result += escapeHTML(value.substring(processed, stream[0].offset));
processed = stream[0].offset;
if (stream === original) {
/*
On any opening or closing tag of the original markup we first close
the entire highlighted node stack, then render the original tag along
with all the following original tags at the same offset and then
reopen all the tags on the highlighted stack.
*/
nodeStack.reverse().forEach(close);
do {
render(stream.splice(0, 1)[0]);
stream = selectStream();
} while (stream === original && stream.length && stream[0].offset === processed);
nodeStack.reverse().forEach(open);
} else {
if (stream[0].event === 'start') {
nodeStack.push(stream[0].node);
} else {
nodeStack.pop();
}
render(stream.splice(0, 1)[0]);
}
}
return result + escapeHTML(value.substr(processed));
}
return mergeHTMLPlugin;
}());
hljs.addPlugin(mergeHTMLPlugin);
function init() {
// Make sure that only plain text is pasted
configurePastingInElement("jsonBlock");
}
</script>
</body>
</html>

View File

@@ -5,8 +5,9 @@
<!-- <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="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script src="../assets/scripts/common/hljs.min.js"></script>
<script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/tools/xmlFormatter.js"></script>
<script src="../assets/scripts/tools/highlight.js"></script>
<script>hljs.highlightAll();</script>
@@ -62,20 +63,6 @@
</div>
<script>
function getProcessor() {
return "libxml";
}
function getVersion() {
return "1.0"
}
function init() {
configurePastingInElement("xmlArea");
}
</script>
</body>
</html>

View File

@@ -5,6 +5,7 @@
<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/xpath.js"></script>
<script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/tools/highlight.js"></script>
<script>hljs.highlightAll();</script>
@@ -17115,156 +17116,6 @@
</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;
if (filter == "collapse3.0") {
document.getElementById("tooltipFunctionInfo").innerText = "XPath 3.0 functions";
hideList(document.getElementsByName("collapse10"));
hideList(document.getElementsByName("collapse20"));
showList(document.getElementsByName("collapse30"));
hideList(document.getElementsByName("collapse31"));
} else if (filter == "collapse3.1") {
document.getElementById("tooltipFunctionInfo").innerText = "XPath 3.1 functions";
hideList(document.getElementsByName("collapse10"));
hideList(document.getElementsByName("collapse20"));
hideList(document.getElementsByName("collapse30"));
showList(document.getElementsByName("collapse31"));
} else if (filter == "collapse2.0") {
document.getElementById("tooltipFunctionInfo").innerText = "XPath 2.0 functions";
hideList(document.getElementsByName("collapse10"));
showList(document.getElementsByName("collapse20"));
hideList(document.getElementsByName("collapse30"));
hideList(document.getElementsByName("collapse31"));
} else {
document.getElementById("tooltipFunctionInfo").innerText = "XPath 1.0 functions";
showList(document.getElementsByName("collapse10"));
hideList(document.getElementsByName("collapse20"));
hideList(document.getElementsByName("collapse30"));
hideList(document.getElementsByName("collapse31"));
}
}
var triggerList = document.getElementsByClassName("collapseTrigger");
for (i = 0; i < triggerList.length; i++) {
triggerList[i].addEventListener("click", function () {
var collapsible = this.parentElement;
if (this.tagName == "A") {
var collapsibleData = this.nextElementSibling;
} else {
var collapsibleData = this.parentElement.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";
}
}
});
}
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 XPath expression here');
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>

View File

@@ -6,6 +6,7 @@
<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/xsd.js"></script>
<script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/tools/highlight.js"></script>
<script>hljs.highlightAll();</script>
@@ -79,45 +80,6 @@
</div>
<script>
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 XSD 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();
})
}
function 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>

View File

@@ -6,6 +6,7 @@
<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/xslt.js"></script>
<script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/tools/highlight.js"></script>
<script>hljs.highlightAll();</script>
@@ -1147,93 +1148,6 @@
</div>
<script>
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"));
}
}
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";
}
}
});
}
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();
})
}
</script>
</body>
</html>