hypertext
Version:
Create HTML in JavaScript via virtual-dom VTrees or directly to the DOM: virtual-hyperscript alternative
156 lines (143 loc) • 6.09 kB
HTML
<!-- Hypertext createNodes example -->
<!-- Original HTML and CSS by Dan Andersson http://codepen.io/praktikdan/ -->
<html lang="en"><head><meta charset="UTF-8"><title>Hypertext - createNodes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://fonts.googleapis.com/css?family=Oxygen:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="./dist/style.css">
</head>
<body>
<!-- This HTML is hidden and will remain hidden -->
<section style='display: none;'>
<div class='main-wrapper'>
<div class='hero-image'>
<div class='hero-content'>
<div class='hc-label'>The Italian Dolomites</div>
<div class='hc-desc'>Interview with Andy Free about his trip to the dolomites in Italy</div>
<div class='hc-footer'>
<div class='hcf-comments'><span class='amount'>168</span>Comments</div>
<div class='hcf-divider'></div>
<div class='hcf-shares'><span class='amount'>26.842</span>Shares</div>
<div class='hcf-toggle'>
<p class='hcft-label'>More Articles</p>
<div class='hcft-icon-holder'>
<i class='hcft-icon closed fa fa-chevron-down'></i>
<i class='hcft-icon opened fa fa-times'></i>
</div>
</div>
</div>
</div>
</div>
<div class='scroll-content'>
<div class='sc-row'>
<div class='content-article'>
<div class='article-number'>01</div>
<div class='article-info'>
<div class='ai-label'>Visiting Vester Peak</div>
<div class='ai-desc'>Everything you should know about hiking in the mountains</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>24</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>128</span>Shares</div>
</div>
</div>
<div class='article-image ca-1'></div>
</div>
<div class='content-article'>
<div class='article-number'>02</div>
<div class='article-info'>
<div class='ai-label'>Trailing Together</div>
<div class='ai-desc'>Walking among the nature in the Rocky Mountain National Park, Colorado</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>458</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>110</span>Shares</div>
</div>
</div>
<div class='article-image ca-2'></div>
</div>
</div>
<div class='sc-row'>
<div class='content-article'>
<div class='article-number'>03</div>
<div class='article-info'>
<div class='ai-label'>The Magic Pond</div>
<div class='ai-desc'>The scenery is set like a Monet painting</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>1640</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>86.451</span>Shares</div>
</div>
</div>
<div class='article-image ca-3'></div>
</div>
<div class='content-article'>
<div class='article-number'>04</div>
<div class='article-info'>
<div class='ai-label'>Beach Essentials</div>
<div class='ai-desc'>What should you bring to the beach, and what beaches should you visit?</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>58</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>1.359</span>Shares</div>
</div>
</div>
<div class='article-image ca-4'></div>
</div>
</div>
<div class='sc-row'>
<div class='content-article'>
<div class='article-number'>05</div>
<div class='article-info'>
<div class='ai-label'>Romantic Camping</div>
<div class='ai-desc'>We went to Norway to find out just how romantic it can be sleeping under the stars</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>14</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>36</span>Shares</div>
</div>
</div>
<div class='article-image ca-5'></div>
</div>
<div class='content-article'>
<div class='article-number'>06</div>
<div class='article-info'>
<div class='ai-label'>Cave Explorers</div>
<div class='ai-desc'>In USA there's over a thousand caves. We list everyone that you should visit.</div>
<div class='ai-footer'>
<div class='aif-comments'><span class='amount'>3590</span>Comments</div>
<div class='aif-divider'></div>
<div class='aif-shares'><span class='amount'>129.547</span>Shares</div>
</div>
</div>
<div class='article-image ca-6'></div>
</div>
</div>
</div>
</div>
</section>
<!-- End of hidden HTML -->
<!-- Hypertext script -->
<script src="./dist/hypertext-not-for-production.min.js"></script>
<!-- some-app-template.js -->
<script>
// Get The hidden section.
var section = document.getElementsByTagName('section')[0];
// Get HTML within the hidden section.
var html = section.firstElementChild;
// create a virtual tree from the HTML nodes.
var virtualNodes = createVirtualNodes(html)
// Create DOM nodes from the virtualNodes.
var newDOMNodes = createNodes(virtualNodes);
// Place the newly created nodes into the body.
document.body.insertBefore(newDOMNodes, section)
</script>
<!-- some-app-event-bindings.js -->
<script>
var htfcIcon = document.querySelector('.hcft-icon-holder');
var heroImage = document.querySelector('.hero-image');
htfcIcon.addEventListener('click', function(){
heroImage.classList.toggle('browsing-content');
});
</script>
</body>
</html>