Daiz/4chan.html

## 4chan.html
<html>
<head>
  <title>Test</title>
<body>
  <div class="thread">
  </div>
  <script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"></script>
  <script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script>
  <script src="data2.js"></script>
  <script type="module">
  var HTML = {};
  HTML.post = (data) => {

    var board = 'a';

    var tripHTML = function() {
      var {trip} = data;
      if(trip) return `<span class="postertrip">${trip}</span>`;
      else return '';
    }

    var fileHTML = function() {
      var {no, tim, ext, filename, w, h, fsize, md5, tn_h, tn_w} = data;
      var prefix = ['B', 'KB', 'MB'];
      var p = 0;
      while(fsize >= 1024) {
        fsize /= 1024;
        p++;
      }
      var fmtsize = `${+fsize.toFixed(1)} ${prefix[p]}`
      return `
      <div class="file" id="f${no}"
        <div class="fileText" id="fT${no}">
          File: <a href="http://i.4cdn.org/${board}/${tim}${ext}" target="_blank">
            ${filename}${ext}
          </a> (${fmtsize}, ${w}x${h})
        </div>
        <a class="fileThumb" href="http://i.4cdn.org/${board}/${tim}${ext}"
        target="_blank">
          <img src="http://0.t.4cdn.org/${board}/${tim}s.jpg" alt="${fmtsize}"
          data-md5="${md5}" style="height: ${tn_h}px; width: ${tn_w}px">
          <div class="mFileInfo mobile"></div>
        </a>
      </div>
      `
    }

    var infoHTML = function() {
      var {no, sub, name, time, now} = data;
      sub = sub || '';
      var tripcode = tripHTML();
      return `
      <div class="postInfo desktop" id="pi${no}">
        <input type="checkbox" name="${no}" value="delete">
        <span class="subject">${sub}</span>
        <span class="nameBlock">
          <span class="name">${name}</span>
          ${tripcode}
        </span>
        <span class="dateTime" data-utc="${time}">${now}</span>
        <span class="postNum desktop">
          <a href="#p${no}" title="Link to this post">No.</a>
          <a href="" title="Reply to this post">${no}</a>
        </span>
      </div>
      `
    }

    var {no, com, resto, filename} = data;
    com = com || '';

    var hasFile = !!filename;
    var isOP = !resto;

    var type = isOP ? 'op' : 'reply';
    var infoblock = '';

    if(hasFile) {
      infoblock = isOP ? fileHTML() + infoHTML() : infoHTML() + fileHTML();
    } else {
      infoblock = infoHTML();
    }

    return compile(`
    <div class="postContainer ${type}Container" id="pc${no}">
      <div id="p${no}" class="post ${type}">
        <div class="postInfoM mobile" id="pim${no}"></div>
        ${infoblock}
        <blockquote class="postMessage" id="m${no}">${com}</blockquote>
      </div>
    </div>
    `);

  }

  function compile(html) {
    var d = document,
    frag = d.createDocumentFragment(),
    div = d.createElement('div');

    frag.appendChild(div);
    div.innerHTML = html;

    var el;
    while(el = div.firstChild) {
      frag.appendChild(el);
    }
    frag.removeChild(div);
    return frag;
  }

  var thread = document.querySelector('.thread');
  console.time('Render posts');
  for(var jsonPost of jsonData.posts) {
    thread.appendChild(HTML.post(jsonPost));
  }
  console.timeEnd('Render posts');
  </script>
</body>
</html>
	<html>
	<head>
	<title>Test</title>
	<body>
	<div class="thread">
	</div>
	<script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"></script>
	<script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script>
	<script src="data2.js"></script>
	<script type="module">
	var HTML = {};
	HTML.post = (data) => {

	var board = 'a';

	var tripHTML = function() {
	var {trip} = data;
	if(trip) return `<span class="postertrip">${trip}</span>`;
	else return '';
	}

	var fileHTML = function() {
	var {no, tim, ext, filename, w, h, fsize, md5, tn_h, tn_w} = data;
	var prefix = ['B', 'KB', 'MB'];
	var p = 0;
	while(fsize >= 1024) {
	fsize /= 1024;
	p++;
	}
	var fmtsize = `${+fsize.toFixed(1)} ${prefix[p]}`
	return `
	<div class="file" id="f${no}"
	<div class="fileText" id="fT${no}">
	File: <a href="http://i.4cdn.org/${board}/${tim}${ext}" target="_blank">
	${filename}${ext}
	</a> (${fmtsize}, ${w}x${h})
	</div>
	<a class="fileThumb" href="http://i.4cdn.org/${board}/${tim}${ext}"
	target="_blank">
	<img src="http://0.t.4cdn.org/${board}/${tim}s.jpg" alt="${fmtsize}"
	data-md5="${md5}" style="height: ${tn_h}px; width: ${tn_w}px">
	<div class="mFileInfo mobile"></div>
	</a>
	</div>
	`
	}

	var infoHTML = function() {
	var {no, sub, name, time, now} = data;
	sub = sub \|\| '';
	var tripcode = tripHTML();
	return `
	<div class="postInfo desktop" id="pi${no}">
	<input type="checkbox" name="${no}" value="delete">
	<span class="subject">${sub}</span>
	<span class="nameBlock">
	<span class="name">${name}</span>
	${tripcode}
	</span>
	<span class="dateTime" data-utc="${time}">${now}</span>
	<span class="postNum desktop">
	<a href="#p${no}" title="Link to this post">No.</a>
	<a href="" title="Reply to this post">${no}</a>
	</span>
	</div>
	`
	}

	var {no, com, resto, filename} = data;
	com = com \|\| '';

	var hasFile = !!filename;
	var isOP = !resto;

	var type = isOP ? 'op' : 'reply';
	var infoblock = '';

	if(hasFile) {
	infoblock = isOP ? fileHTML() + infoHTML() : infoHTML() + fileHTML();
	} else {
	infoblock = infoHTML();
	}

	return compile(`
	<div class="postContainer ${type}Container" id="pc${no}">
	<div id="p${no}" class="post ${type}">
	<div class="postInfoM mobile" id="pim${no}"></div>
	${infoblock}
	<blockquote class="postMessage" id="m${no}">${com}</blockquote>
	</div>
	</div>
	`);

	}

	function compile(html) {
	var d = document,
	frag = d.createDocumentFragment(),
	div = d.createElement('div');

	frag.appendChild(div);
	div.innerHTML = html;

	var el;
	while(el = div.firstChild) {
	frag.appendChild(el);
	}
	frag.removeChild(div);
	return frag;
	}

	var thread = document.querySelector('.thread');
	console.time('Render posts');
	for(var jsonPost of jsonData.posts) {
	thread.appendChild(HTML.post(jsonPost));
	}
	console.timeEnd('Render posts');
	</script>
	</body>
	</html>