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

Added syntax highlighting for XML Tools #156

Merged
bema merged 33 commits from bema/func/syntax_highlight into master 2023-05-08 11:11:18 +02:00
Conversation 3 Commits 33 Files Changed 11 +171 -27
4 changed files with 171 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d2b2d7f2f2 - Show all commits

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

@@ -141,7 +141,8 @@ function fillDefaultXSLT() {
fetch(serverAddress + "/assets/samples/XSLTTemplate.xslt")
.then( response => response.text() )
.then( (XSTLTemplate) => {
document.getElementById('transformArea').value = XSTLTemplate;
document.getElementById('transformArea').innerText = XSTLTemplate;
highlightSyntax("transformArea");
} )
}

2
Frontend/tools/xpath.html
View File

@@ -69,7 +69,7 @@
<!-- <textarea disabled id="resultArea" name="resultArea"
class="textarea-300 bordered-field vertically-resizeable max-width" style="margin-bottom: 50px;"
rows="10" cols="100"></textarea> -->
<pre><code class="language-xml bordered-field textarea-300" id="resultArea" "></code></pre>
<pre><code class="language-xml bordered-field textarea-300" id="resultArea"></code></pre>
</div>
</div>

95
Frontend/tools/xsd.html
View File

@@ -4,7 +4,11 @@
<head>
<!-- <link rel="stylesheet" href="styles.css"> -->
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
<link rel="stylesheet" href="../assets/css/json.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
widlam commented 2023-04-26 13:52:17 +02:00
Review
Copy Link

This should be linked locally, not from the cloudflare

This should be linked locally, not from the cloudflare
<script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/tools/json.js"></script>
<script>hljs.highlightAll();</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
@@ -43,25 +47,18 @@
<!-- <span id="processorTooltipInfo">procInfo</span><br> -->
<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>
<pre><code class="language-xml bordered-field textarea-300" id="xmlArea" contenteditable="True"></code></pre>
<br>
<label for="transformArea"><b>Insert your XSD:</b></label>
<textarea id="transformArea" name="transformArea" rows="15"
class="textarea-300 bordered-field vertically-resizeable max-width"
onblur="setDefaultContent(this, 'Insert XSD here');"
onfocus="clearDefaultContent(this, 'Insert XSD here');"></textarea>
<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('xsd', true, true)">Verify XSD</button>
<br><br>
<br>
<label for="resultArea"><b>Result:<span id="procinfo"></span></b></label>
<textarea disabled id="resultArea" name="resultArea" rows="2"
class="bordered-field vert2ically-resizeable max-width" style="margin-bottom: 50px;"></textarea>
<pre><code class="language-xml bordered-field" id="resultArea"></code></pre>
</div>
</div>
@@ -115,6 +112,80 @@
}
}
const editorEle = document.getElementById('xmlArea');
// Handle the `paste` event
editorEle.addEventListener('paste', function (e) {
// Prevent the default action
e.preventDefault();
// Get the copied text from the clipboard
const text = e.clipboardData
? (e.originalEvent || e).clipboardData.getData('text/plain')
: // For IE
window.clipboardData
? window.clipboardData.getData('Text')
: '';
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
highlightSyntax(editorEle.id);
} else {
// Insert text at the current position of caret
const range = document.getSelection().getRangeAt(0);
range.deleteContents();
const textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
});
const transformEle = document.getElementById('transformArea');
// Handle the `paste` event
transformEle.addEventListener('paste', function (e) {
// Prevent the default action
e.preventDefault();
// Get the copied text from the clipboard
const text = e.clipboardData
? (e.originalEvent || e).clipboardData.getData('text/plain')
: // For IE
window.clipboardData
? window.clipboardData.getData('Text')
: '';
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
highlightSyntax(transformEle.id);
} else {
// Insert text at the current position of caret
const range = document.getSelection().getRangeAt(0);
range.deleteContents();
const textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
});
</script>
</body>

98
Frontend/tools/xslt.html
View File

@@ -4,7 +4,13 @@
<head>
<!-- <link rel="stylesheet" href="styles.css"> -->
<link rel="stylesheet" href="../assets/css/tools/r11form.css">
<link rel="stylesheet" href="../assets/css/json.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
widlam commented 2023-04-26 13:52:25 +02:00
Review
Copy Link

This should be linked locally, not from the cloudflare

This should be linked locally, not from the cloudflare
<script src="../assets/scripts/tools/scripts.js"></script>
<script src="../assets/scripts/tools/json.js"></script>
<script>hljs.highlightAll();</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
</head>
@@ -45,11 +51,8 @@
<br>
<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>
<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 XSLT:</b></label>
@@ -59,19 +62,14 @@
</button>
</div>
</div>
<textarea id="transformArea" name="transformArea" rows="15"
class="textarea-300 bordered-field vertically-resizeable max-width"
onblur="setDefaultContent(this, 'Insert XSLT here');"
onfocus="clearDefaultContent(this, 'Insert XSLT here');"></textarea>
<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('xslt', true, true)">Execute XSLT transform</button>
<br><br>
<br>
<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>
<pre><code class="language-xml bordered-field textarea-300" id="resultArea"></code></pre>
</div>
</div>
@@ -1227,6 +1225,80 @@
processTooltip();
})
}
const editorEle = document.getElementById('xmlArea');
// Handle the `paste` event
editorEle.addEventListener('paste', function (e) {
// Prevent the default action
e.preventDefault();
// Get the copied text from the clipboard
const text = e.clipboardData
? (e.originalEvent || e).clipboardData.getData('text/plain')
: // For IE
window.clipboardData
? window.clipboardData.getData('Text')
: '';
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
highlightSyntax(editorEle.id);
} else {
// Insert text at the current position of caret
const range = document.getSelection().getRangeAt(0);
range.deleteContents();
const textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
});
const transformEle = document.getElementById('transformArea');
// Handle the `paste` event
transformEle.addEventListener('paste', function (e) {
// Prevent the default action
e.preventDefault();
// Get the copied text from the clipboard
const text = e.clipboardData
? (e.originalEvent || e).clipboardData.getData('text/plain')
: // For IE
window.clipboardData
? window.clipboardData.getData('Text')
: '';
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
highlightSyntax(transformEle.id);
} else {
// Insert text at the current position of caret
const range = document.getSelection().getRangeAt(0);
range.deleteContents();
const textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
});
</script>
</body>