himalaya
Version:
HTML to JSON parser
228 lines (201 loc) • 5.72 kB
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>