228 lines
5.6 KiB
HTML
228 lines
5.6 KiB
HTML
<html>
|
|
<head>
|
|
<title>Himalaya</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
font-family: 'Source Code Pro', monospace;
|
|
}
|
|
|
|
.page {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
justify-content: space-between
|
|
}
|
|
|
|
header .info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
header h1 {
|
|
margin: 0;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
header a {
|
|
color: #08f;
|
|
text-decoration: none;
|
|
padding: 0px 10px;
|
|
}
|
|
|
|
header a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.converter {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.split {
|
|
display: flex;
|
|
align-self: stretch;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
box-shadow: 1px 0 0 #eee;
|
|
}
|
|
|
|
.pane {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
align-self: stretch;
|
|
padding: 20px;
|
|
font-size: 1em;
|
|
border: none;
|
|
margin: 0px;
|
|
outline: none;
|
|
overflow: auto;
|
|
}
|
|
|
|
.pane label {
|
|
display: block;
|
|
text-transform: uppercase;
|
|
color: #555;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.pane-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background-color: #eee;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
pre {
|
|
text-wrap: auto;
|
|
}
|
|
|
|
#source {
|
|
flex: 1;
|
|
display: flex;
|
|
align-self: stretch;
|
|
border: none;
|
|
background-color: transparent;
|
|
outline: none;
|
|
padding: 0px;
|
|
font-size: inherit;
|
|
}
|
|
|
|
#output {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class='page'>
|
|
<header>
|
|
<div class='info'>
|
|
<h1>Himalaya</h1>
|
|
<a href='https://github.com/andrejewski/himalaya'>on Github</a>
|
|
<a href='http://chrisandrejewski.com'>by Chris Andrejewski</a>
|
|
</div>
|
|
<div>
|
|
<label>
|
|
<input id='show-stringify-pane' type='checkbox' />
|
|
<span>Show stringify pane</span>
|
|
</label>
|
|
</div>
|
|
</header>
|
|
<div class='converter'>
|
|
<div class='split'>
|
|
<div class='pane-header'>
|
|
<label>HTML</label>
|
|
<label>
|
|
<input id='whitespace' type='checkbox' />
|
|
<span>Remove whitespace</span>
|
|
</label>
|
|
</div>
|
|
<div class='pane pane-source'>
|
|
<textarea id='source' placeholder='<div>HTML to transform</div>'></textarea>
|
|
</div>
|
|
</div>
|
|
<div class='split'>
|
|
<div class='pane-header'>
|
|
<label>JSON (AST)</label>
|
|
<label>
|
|
<input id='positions' type='checkbox' />
|
|
<span>Include positions</span>
|
|
</label>
|
|
</div>
|
|
<div class='pane pane-output'>
|
|
<pre id='output-parse'></pre>
|
|
</div>
|
|
</div>
|
|
<div class='split' id="stringify-pane" style="display: none;">
|
|
<div class='pane-header'>
|
|
<label>Stringify</label>
|
|
<label>
|
|
<input id='prefer-double-quote-attributes' type='checkbox' />
|
|
<span>Prefer double quote attributes</span>
|
|
</label>
|
|
</div>
|
|
<div class='pane pane-output'>
|
|
<pre id='output-stringify'></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src='dist/himalaya.js'></script>
|
|
<script>
|
|
function removeEmptyNodes (nodes) {
|
|
return nodes.filter(node => {
|
|
if (node.type === 'element') {
|
|
node.children = removeEmptyNodes(node.children);
|
|
return true
|
|
}
|
|
return node.content.length
|
|
})
|
|
}
|
|
|
|
function stripWhitespace (nodes) {
|
|
return nodes.map(node => {
|
|
if (node.type === 'element') {
|
|
node.children = stripWhitespace(node.children)
|
|
} else {
|
|
node.content = node.content.trim()
|
|
}
|
|
return node
|
|
})
|
|
}
|
|
|
|
function removeWhitespace(nodes) {
|
|
return removeEmptyNodes(stripWhitespace(nodes))
|
|
}
|
|
|
|
function $ (selector) {
|
|
return document.querySelector(selector)
|
|
}
|
|
|
|
function updateOutput () {
|
|
var html = $('#source').value || ''
|
|
himalaya.parseDefaults.includePositions = $('#positions').checked
|
|
|
|
var code = himalaya.parse(html)
|
|
if ($('#whitespace').checked) {
|
|
code = removeWhitespace(code)
|
|
}
|
|
|
|
$('#output-parse').innerText = JSON.stringify(code, null, 2)
|
|
|
|
var options = { ...himalaya.parseDefaults, preferDoubleQuoteAttributes: $('#prefer-double-quote-attributes').checked }
|
|
$('#output-stringify').innerText = himalaya.stringify(code, options)
|
|
}
|
|
|
|
$('#source').onkeyup = updateOutput
|
|
$('#whitespace').onchange = updateOutput
|
|
$('#positions').onchange = updateOutput
|
|
$('#prefer-double-quote-attributes').onchange = updateOutput
|
|
updateOutput()
|
|
|
|
function updatePaneDisplay () {
|
|
$('#stringify-pane').style.display = $('#show-stringify-pane').checked ? 'flex' : 'none'
|
|
}
|
|
|
|
$('#show-stringify-pane').onchange = updatePaneDisplay
|
|
</script>
|
|
</body>
|
|
</html>
|