Skip to content

Commit

Permalink
Update index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@an-nguyen-90
an-nguyen-90 authored Nov 20, 2023
1 parent 0ddbe2d commit 08df2a7
Showing 1 changed file with 264 additions and 61 deletions.
325 changes: 264 additions & 61 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,266 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XML to XSLT Translator</title>
<style>
body {
font-family: Arial, sans-serif;
}

textarea {
width: 100%;
height: 150px;
margin-bottom: 10px;
}

button {
padding: 8px;
font-size: 16px;
}

pre {
white-space: pre-wrap;
}
</style>
</head>
<body>

<h2>XML to XSLT Translator</h2>

<label for="xmlInput">XML Input:</label>
<textarea id="xmlInput" placeholder="Enter XML data"></textarea>

<label for="xsltInput">XSLT Input:</label>
<textarea id="xsltInput" placeholder="Enter XSLT data"></textarea>

<button onclick="transformXML()">Translate</button>

<h3>Result:</h3>
<pre id="result"></pre>

<script>
function transformXML() {
var xmlInput = document.getElementById('xmlInput').value;
var xsltInput = document.getElementById('xsltInput').value;

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlInput, 'application/xml');
var xsltDoc = parser.parseFromString(xsltInput, 'application/xml');

var xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsltDoc);

var resultDoc = xsltProcessor.transformToDocument(xmlDoc);
var resultString = new XMLSerializer().serializeToString(resultDoc);

document.getElementById('result').textContent = resultString;
}
</script>

</body>
<html
lang="en"
data-bs-theme="dark"
>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link
rel="icon"
href="flip-brandmark-transparent-bkgd.svg"
type="image/x-icon"
/>
<title>Flip Online XSLT Parser</title>
</head>
<body>
<div class="container-fluid">
<!-- 1st row -->
<h1 style="text-align: center">Flip Online XSLT Parser</h1>

<!-- 2nd row -->
<div class="row align-items-end">
<!-- csv editor wrapper -->
<div class="col">
<!-- to put p tag and label components on the same row-->
<div class="row">
<div class="col"><p>CSV Input:</p></div>
<div class="col text-end">
<label>
<input
type="checkbox"
id="hasHeader"
/>
CSV has a header line
</label>
</div>
</div>

<!-- csv editor -->
<div id="csvEditor"></div>
</div>

<!-- xslt wrapper -->
<div class="col">
<!-- to put p tag and label components on the same row-->
<div class="row justify-content-end">
<div class="col"><p>XML Output Template:</p></div>
<div class="col text-end">
<button
type="submit"
class="btn btn-primary btn-sm"
>
Convert to XML
</button>
</div>
</div>

<!-- xml template editor -->
<div id="xmlTempEditor"></div>
</div>
</div>

<div class="row">
<div
class="col-12"
style="height: 4px"
></div>
</div>

<!-- 3rd row -->
<div class="row">
<div class="col">
<p>XSLT Input XML</p>
<div id="xsltInputXmlEditor"></div>
</div>

<div class="col-6">
<p>XSLT</p>
<div id="xsltEditor"></div>
</div>

<div class="col">
<p>XSLT Output XML</p>
<div id="xsltOutputXmlEditor"></div>
</div>
</div>
</div>
<script
async
src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js"
crossorigin="anonymous"
></script>
<script type="importmap">
{
"imports": {
"@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/esm/popper.min.js",
"bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>
<script>
var csvEditor = ace.edit("csvEditor", {
theme: "ace/theme/merbivore_soft",
mode: "ace/mode/javascript",
autoScrollEditorIntoView: true,
maxLines: 10,
minLines: 100,
hasCssTransforms: true,
wrap: true,
printMargin: false,
value: "Enter or paste CSV here" + "\n".repeat(100),
});

var xmlTempEditor = ace.edit("xmlTempEditor", {
theme: "ace/theme/chaos",
mode: "ace/mode/xml",
autoScrollEditorIntoView: true,
maxLines: 10,
minLines: 100,
hasCssTransforms: true,
wrap: true,
printMargin: false,
});
const xmlTemplate = `<?xml version="1.0"?>
<root>
<Row>
<Cell FieldNo="1">{field1}</Cell>
<Cell FieldNo="2">{field2}</Cell>
<Cell FieldNo="3">{field3}</Cell>
<Cell FieldNo="4">{field4}</Cell>
<Cell FieldNo="5">{field5}</Cell>
<Cell FieldNo="6">{field6}</Cell>
<Cell FieldNo="7">{field7}</Cell>
<Cell FieldNo="8">{field8}</Cell>
<Cell FieldNo="9">{field9}</Cell>
<Cell FieldNo="10">{field10}</Cell>
<Cell FieldNo="11">{field11}</Cell>
<Cell FieldNo="12">{field12}</Cell>
<Cell FieldNo="13">{field13}</Cell>
<Cell FieldNo="14">{field14}</Cell>
<Cell FieldNo="15">{field15}</Cell>
<Cell FieldNo="16">{field16}</Cell>
<Cell FieldNo="17">{field17}</Cell>
<Cell FieldNo="18">{field18}</Cell>
<Cell FieldNo="19">{field19}</Cell>
<Cell FieldNo="20">{field20}</Cell>
<Cell FieldNo="21">{field21}</Cell>
<Cell FieldNo="22">{field22}</Cell>
<Cell FieldNo="23">{field23}</Cell>
<Cell FieldNo="24">{field24}</Cell>
<Cell FieldNo="25">{field25}</Cell>
<Cell FieldNo="26">{field26}</Cell>
<Cell FieldNo="27">{field27}</Cell>
<Cell FieldNo="28">{field28}</Cell>
<Cell FieldNo="29">{field29}</Cell>
<Cell FieldNo="30">{field30}</Cell>
<Cell FieldNo="31">{field31}</Cell>
<Cell FieldNo="32">{field32}</Cell>
<Cell FieldNo="33">{field33}</Cell>
<Cell FieldNo="34">{field34}</Cell>
<Cell FieldNo="35">{field35}</Cell>
<Cell FieldNo="36">{field36}</Cell>
<Cell FieldNo="37">{field37}</Cell>
<Cell FieldNo="38">{field38}</Cell>
<Cell FieldNo="39">{field39}</Cell>
<Cell FieldNo="40">{field40}</Cell>
<Cell FieldNo="41">{field41}</Cell>
<Cell FieldNo="42">{field42}</Cell>
<Cell FieldNo="43">{field43}</Cell>
<Cell FieldNo="44">{field44}</Cell>
<Cell FieldNo="45">{field45}</Cell>
<Cell FieldNo="46">{field46}</Cell>
<Cell FieldNo="47">{field47}</Cell>
<Cell FieldNo="48">{field48}</Cell>
<Cell FieldNo="49">{field49}</Cell>
<Cell FieldNo="50">{field50}</Cell>
<Cell FieldNo="51">{field51}</Cell>
<Cell FieldNo="52">{field52}</Cell>
<Cell FieldNo="53">{field53}</Cell>
<Cell FieldNo="54">{field54}</Cell>
<Cell FieldNo="55">{field55}</Cell>
<Cell FieldNo="56">{field56}</Cell>
<Cell FieldNo="57">{field57}</Cell>
<Cell FieldNo="58">{field58}</Cell>
<Cell FieldNo="59">{field59}</Cell>
<Cell FieldNo="60">{field60}</Cell>
<Cell FieldNo="61">{field61}</Cell>
<Cell FieldNo="62">{field62}</Cell>
<Cell FieldNo="63">{field63}</Cell>
<Cell FieldNo="64">{field64}</Cell>
<Cell FieldNo="65">{field65}</Cell>
<Cell FieldNo="66">{field66}</Cell>
<Cell FieldNo="67">{field67}</Cell>
<Cell FieldNo="68">{field68}</Cell>
<Cell FieldNo="69">{field69}</Cell>
<Cell FieldNo="70">{field70}</Cell>
<Cell FieldNo="71">{field71}</Cell>
<Cell FieldNo="72">{field72}</Cell>
<Cell FieldNo="73">{field73}</Cell>
<Cell FieldNo="74">{field74}</Cell>
<Cell FieldNo="75">{field75}</Cell>
<Cell FieldNo="76">{field76}</Cell>
<Cell FieldNo="77">{field77}</Cell>
<Cell FieldNo="78">{field78}</Cell>
<Cell FieldNo="79">{field79}</Cell>
<Cell FieldNo="80">{field80}</Cell>
<Cell FieldNo="81">{field81}</Cell>
<Cell FieldNo="82">{field82}</Cell>
<Cell FieldNo="83">{field83}</Cell>
<Cell FieldNo="84">{field84}</Cell>
<Cell FieldNo="85">{field85}</Cell>
<Cell FieldNo="86">{field86}</Cell>
<Cell FieldNo="87">{field87}</Cell>
<Cell FieldNo="88">{field88}</Cell>
<Cell FieldNo="89">{field89}</Cell>
</Row>
</root>
`;
xmlTempEditor.setValue(xmlTemplate);

var xsltInputXmlEditor = ace.edit("xsltInputXmlEditor", {
theme: "ace/theme/chaos",
mode: "ace/mode/xml",
autoScrollEditorIntoView: true,
maxLines: 100,
minLines: 100,
hasCssTransforms: true,
wrap: true,
printMargin: false,
});

var xsltEditor = ace.edit("xsltEditor", {
theme: "ace/theme/chaos",
mode: "ace/mode/xml",
autoScrollEditorIntoView: true,
maxLines: 100,
minLines: 100,
hasCssTransforms: true,
wrap: true,
printMargin: false,
value: "Enter or paste XSLT here" + "\n".repeat(100),
});

var xsltOutputXmlEditor = ace.edit("xsltOutputXmlEditor", {
theme: "ace/theme/chaos",
mode: "ace/mode/xml",
autoScrollEditorIntoView: true,
maxLines: 100,
minLines: 100,
hasCssTransforms: true,
wrap: true,
printMargin: false,
});
</script>
</body>
</html>

0 comments on commit 08df2a7

Please sign in to comment.