Skip to content

Instantly share code, notes, and snippets.

@Daiz

Daiz/4chan.html

Last active August 29, 2015 14:02
Download ZIP

Revisions

  1. Daiz revised this gist Jun 12, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 4chan.html
    View file
    Original file line number Diff line number Diff line change
    @@ -23,7 +23,7 @@
    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) {
    while(fsize >= 1024) {
    fsize /= 1024;
    p++;
    }
  2. Daiz created this gist Jun 12, 2014.
    120 changes: 120 additions & 0 deletions 4chan.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,120 @@
    <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>