fixHackpadMarkup

by Ryan McQuen

HTML

<button class="clean-hackpad">Fix Hackpad markup</button>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Language" content="en-us">
  <meta name="version" content="123">
  <style>
    body {
      font-family: Helvetica
    }
    
    ul.comment {
      list-style-image: url('https://hackpad.com/static/img/comment.png');
    }
    
    ul.task {
      list-style-image: url('https://hackpad.com/static/img/unchecked.png');
    }
    
    ul.taskdone {
      list-style-image: url('https://hackpad.com/static/img/checked.png');
    }
  </style>
  <title>/1$nOUvKlt6cXY</title>
</head>

<body>
  <h1>Normalize heights of elements with JavaScript</h1>

  <p>Use the following code to work around elements of differing heights, that are lined up in columns. Apply the height of the tallest element to all elements (normalize them), so things line up nicely.</p>
  <p></p>
  <p>To use it, just put the selector inside `querySelectorAll()` on the `elementArray` (replace `.foobar`).</p>
  <p></p>
  <p>If you haven’t used querySelectorAll(), you owe it to yourself to read this:</p>
  <p>
    <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll"></a>https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll</p>
  <p></p>
  <ul class="code">
    <li>window.addEventListener(’load’,</li>
    <li>&nbsp; function() {</li>
    <li>&nbsp;&nbsp;&nbsp; var elementHeightArray = [];</li>
    <li>&nbsp;&nbsp;&nbsp; var elementArray = [].slice.call(document.querySelectorAll(’.foobar’));</li>
    <li>&nbsp;&nbsp;&nbsp; elementArray.forEach(function(i) {</li>
    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; elementHeightArray.push(i.clientHeight);</li>
    <li>&nbsp;&nbsp;&nbsp; });</li>
    <li>&nbsp;&nbsp;&nbsp; var maxElementHeight = Math.max.apply(Math, elementHeightArray);</li>
    <li>&nbsp;&nbsp;&nbsp;...

JavaScript

function cleanUpHackpadMarkup(selector, elementType) {
  [].slice.call(document.querySelectorAll(selector)).forEach(function (oldMarkup) {
    var newMarkup = document.createElement(elementType);
    newMarkup.innerHTML = oldMarkup.innerHTML;
    oldMarkup.parentNode.insertBefore(newMarkup, oldMarkup);
    oldMarkup.parentNode.removeChild(oldMarkup);
  });
}
document.querySelector('.clean-hackpad').addEventListener('click', function () {
  cleanUpHackpadMarkup('ul.code li', 'div');
  cleanUpHackpadMarkup('ul.code', 'code');
});