jsFiddle List ALL Fiddles v2

by Rich Costello

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="https://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic"></script>
<div class="utility-description">
    This utility will retrieve all of the public fiddles from the specificed user
</div>

<br />

<div>
    <div>
        <label for="input-jsfiddle-username">Username: </label>
        <input type="text" class="jsfiddle-username" id="input-jsfiddle-username" placeholder="MadLittleMods" />
    </div>
    <button class="get-fiddles">Get Fiddles</button>
</div>

<br />
    
<div class="fiddle-list-info"></div>
<ul class="fiddle-list">
</ul>
    
<script class="hbs-fiddle-list-entry" type="text/x-handlebars-template">
    <li class="fiddle-list-entry">
        <div class="fiddle-list-entry-title">
            <a href="{{ url }}" target="_blank">{{ title }}</a>
        </div>
        <div class="fiddle-list-entry-description">
            {{ description }}
        </div>
    </li>
</script>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body
{
    background: #eeeeee;
    font-family: 'Ubuntu', Arial, sans-serif;
    font-size: 14px;
}

a
{
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.utility-description
{
    margin: 4px;
    padding: 4px;
    
    background: rgba(0, 0, 0, .1);
    border: 1px solid rgba(0, 0, 0, .3);
}


.fiddle-list
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    
    border: 1px solid rgba(0, 0, 0, .2);
}
.fiddle-list-entry
{
    display: block;
    padding: 8px;
    
    background: rgba(255, 255, 255, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.fiddle-list-entry:last-child
{
    border-bottom: none;
}
.fiddle-list-entry:hover
{
    background: rgba(255, 255, 255, .6);
}


.fiddle-list-entry-title 
{
    color: #222222;
    font-size: 16px;
    font-weight: bold;
}
.fiddle-list-entry-title a, .fiddle-list-entry-title a:link
{
    color: #222222;
}
.fiddle-list-entry-title a:hover
{
    color: #666666;
}
.fiddle-list-entry-title a:active
{
    color: #27ccaf;
}

.fiddle-list-entry-description 
{
    margin-top: 4px;
    
    color: #444444;
    font-size: 12px;
}




.loading-spinner {
    display: block;
    width: 40px;
    height: 20px;
    overflow: hidden;
}
.loading-spinner:before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    
    border-style: solid;
    border-top-color: #444;
    border-right-color: #444;
    border-left-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    
    -webkit-animation: rotate 3s ease-in-out infinite;
    animation: rotate 3s ease-in-out infinite;
    
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
 ...

JavaScript

var FiddleCatcher = function() {
    return {
        getFiddles: function(userName, callback) {
            $.ajax({
                url: 'http://fiddle.jshell.net/api/user/' + userName + '/demo/list.json?&start=0&sort=date&start=0&limit=99999&order=desc'
            }).done(function(data) {
                var json = jQuery.parseJSON(data);
                //console.log(json);
                callback(json);
            });
        }
    }
}

var fiddleCatcher = new FiddleCatcher();

$('.get-fiddles').on('click', function() {
    var username = $('.jsfiddle-username').val() || 'MadLittleMods';
    //console.log(username);
    
    if(username.length > 0)
    {
        // Add a spinner
        $('.fiddle-list-info').html('<i class="loading-spinner"></i>');
        
        fiddleCatcher.getFiddles(username, function(fiddleList) {
            //console.log(fiddleList);
            
            $('.fiddle-list-info').html(username + ' has made ' + fiddleList.length + ' fiddles:');
            
            var source = $('.hbs-fiddle-list-entry').html();
            var template = Handlebars.compile(source);
            
            // Clear out the list
            $('.fiddle-list').html('');
            // And then repolulate it
            for(var i = 0; i < fiddleList.length; i++)
            {
                $('.fiddle-list').append(template(fiddleList[i]));
            }
        });
    }
});