JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<div id="loading">
    <div class="text">Loading</div>
</div>
<div id="arrows">
    <div class="left">❮</div>
    <div class="right">❯</div>
</div>
<div id="content"></div>

CSS

body {
    background:#000;
    font-family:Myriad Pro;
    font-size:14px;
    -webkit-font-smoothing: antialiased;
}
.item {
    display:none;
}
.active {
    display:block;
    height:100%;
    position:relative;
}
.active .image {
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    position:absolute;
    left:122px;
    right:122px;
    top:70px;
    bottom:135px;
    box-shadow:inset 0 0 0 2px #111;
}
.active .info {
   position:absolute;
    bottom:0;
    left:100px;
    right:100px;
    text-align:center;
    color:#fff;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space: nowrap;
    height:103px;
}
.info .title {
    color:#fff;
    font-size:15px;
    text-decoration:inherit;
    border-bottom:1px solid rgba(255, 255, 255, .3);
}
.info .type{
    color:#fff;
    text-transform:uppercase;
    border:1px solid #fff;
    padding:4px 8px 3px 8px;
    font-size:11px;
    display:inline-block;
    margin-top:18px;
    margin-left:3px;
    margin-right:3px;
    text-decoration:none;
}
.info .nsfw{
    color:red;
    text-transform:uppercase;
    border:1px solid red;
    padding:4px 8px 3px 8px;
    font-size:11px;
    display:inline-block;
    margin-top:18px;
    margin-left:3px;
    margin-right:3px;
}
#loading {
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    background:rgba(0, 0, 0, .4);
    z-index:100;
    display:none;
}
#loading .text {
    color:#fff;
    width:100px;
    height:20px;
    text-align:center;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-50px;
    margin-top:-10px;
}
#arrows div {
    position:absolute;
    top:50%;
    margin-top:-62px;
    border-radius:50px;
    border:1px solid #fff;
    color:#fff;
    font-size:20px;
    padding-top:10px;
    height:30px;
    cursor:pointer;
    z-index:99999;
    -webkit-user-select: none;
}
#arrows .left {
    left:40px;
    padding-left:13px;
    width:27px;
}
#arrows .right {
  ...

JavaScript

vars = {
    "subreddit": "funny",
        "sort": "new",
        "nsfw": true,
        "limit": 50,
        "threshold": 2,
        "last": "next",
        "after": "",
        "before": "",
        "counter": 0,
        "items": []
}

function posts(type, name, previous, callback) {
    loadingStart();
    var base = "http://www.reddit.com/r/" + vars.subreddit + "/" + vars.sort + ".json?sort=new&limit=" + vars.limit + "&",
        url = base + type + "=" + name;
    $.getJSON(url, function (data) {
        var posts = data.data.children,
            length = posts.length,
            items = [],
            next = data.data.after;
        if (length !== 0) {
            vars.items = [];
            vars.after = posts[length - 1].data.name;
            vars.before = posts[0].data.name;
            posts.forEach(function (i) {
                var post = i.data,
                    domain = post.domain,
                    url = post.url,
                    nsfw = (vars.nsfw === true) ? true : !post.over_18,
                    protocol = $("<a>").prop("href", url).prop("protocol"),
                    extension = url.split(".").pop(),
                    included_extensions = ["png", "gif", "jpg", "jpeg", "tif"],
                    excluded_domains = ["dropbox.com"],
                    excluded_array = [nsfw, included_extensions.indexOf(extension) !== -1, excluded_domains.indexOf(domain) === -1, protocol !== "https:"],
                    exclude = excluded_array.indexOf(false) !== -1;
                if (!exclude) {
                    vars.items.push({
                        "title": post.title,
                            "permalink": "http://reddit.com" + post.permalink,
                            "url": post.url,
                            "extension": extension,
                            "nsfw": post.over_18
                    });
                }
            });
            // If there are no items to display
            // Attempt to show next...