zhiephie/repo

## repo
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Yudi Purwanto - Web Developer</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
  <div class="profile"></div>
  <hr />
  <h3>My Repositories</h3>
  <div class="my-repos"></div>
  <hr />
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.3/jquery.dataTables.min.js"></script>

<script type="text/template" id="profile-template">
<h1 style="margin-top: 40px;"><%= user.name %></h1>
<hr />
<div class="row">
  <div class="span8">
  <img style="float:left; margin-right: 20px;width: 80px; max-width:80px; height: 80px;" src="http://www.gravatar.com/avatar/<%= user.gravatar_id %>" class="img-polaroid">
    <%= user.company %><br/ >
    <%= user.location %><br />
    <%= user.email %><br />
    For hire: <%= user.hireable %>
  </div>
  <div class="span3">
    <a href="http://twitter.com/str4whatt" class="twitter-follow-button">Follow @str4whatt</a></td></tr>
    <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
  </div>
</div>
</script>
<script type="text/template" id="repositories-table">
  <hr />
  <% if( typeof org !== 'undefined') { %>
<img style="float:left; margin-right: 20px;height: 80px; width: 80px;" src="<%= org.avatar_url %>" class="img-polaroid"  />
    <h2 style="line-height: 80px;"><a href="<%= org.url %>"><%= org.login %></a></h2>
    <div style="clear: both;"></div>
  <hr />


  <% } %>
  <table class="table libraries table-striped">
    <thead>
      <tr>
        <th>Name</th><th>Language</th><th>Description</th><th>Forks</th><th>Watchers</th><th>Open Issues</th>
      </tr>
    </thead>
    <tbody>
      <% _.each(repos, function(repo){ %>
      <tr>
        <td><a href="<%= repo.html_url %>"><%= repo.name %></a></td>
        <td><%= repo.language %></td>
        <td><%= repo.description.substr(0,50) %>...</td>
        <td><%= repo.forks %></td>
        <td><%= repo.watchers %></td>
        <td><%= repo.open_issues %></td>

      </tr>
      <% }); %>
    </tbody>
  </table>

</script>

<script>
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
    return {
        "iStart":         oSettings._iDisplayStart,
        "iEnd":           oSettings.fnDisplayEnd(),
        "iLength":        oSettings._iDisplayLength,
        "iTotal":         oSettings.fnRecordsTotal(),
        "iFilteredTotal": oSettings.fnRecordsDisplay(),
        "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
        "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
    };
}

/* Bootstrap style pagination control */
$.extend( $.fn.dataTableExt.oPagination, {
    "bootstrap": {
        "fnInit": function( oSettings, nPaging, fnDraw ) {
            var oLang = oSettings.oLanguage.oPaginate;
            var fnClickHandler = function ( e ) {
                e.preventDefault();
                if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
                    fnDraw( oSettings );
                }
            };

            $(nPaging).addClass('pagination').append(
                '<ul>'+
                    '<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
                    '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
                '</ul>'
            );
            var els = $('a', nPaging);
            $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
            $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
        },

        "fnUpdate": function ( oSettings, fnDraw ) {
            var iListLength = 5;
            var oPaging = oSettings.oInstance.fnPagingInfo();
            var an = oSettings.aanFeatures.p;
            var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

            if ( oPaging.iTotalPages < iListLength) {
                iStart = 1;
                iEnd = oPaging.iTotalPages;
            }
            else if ( oPaging.iPage <= iHalf ) {
                iStart = 1;
                iEnd = iListLength;
            } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
                iStart = oPaging.iTotalPages - iListLength + 1;
                iEnd = oPaging.iTotalPages;
            } else {
                iStart = oPaging.iPage - iHalf + 1;
                iEnd = iStart + iListLength - 1;
            }

            for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
                // Remove the middle elements
                $('li:gt(0)', an[i]).filter(':not(:last)').remove();

                // Add the new list items and their event handlers
                for ( j=iStart ; j<=iEnd ; j++ ) {
                    sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
                    $('<li '+sClass+'><a href="#">'+j+'</a></li>')
                        .insertBefore( $('li:last', an[i])[0] )
                        .bind('click', function (e) {
                            e.preventDefault();
                            oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
                            fnDraw( oSettings );
                        } );
                }

                // Add / remove disabled classes from the static elements
                if ( oPaging.iPage === 0 ) {
                    $('li:first', an[i]).addClass('disabled');
                } else {
                    $('li:first', an[i]).removeClass('disabled');
                }

                if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
                    $('li:last', an[i]).addClass('disabled');
                } else {
                    $('li:last', an[i]).removeClass('disabled');
                }
            }
        }
    }
} );
/*
var displayProfile = function (username) {
  $.ajax('https://api.github.com/users/' + username + '?callback=?', {
    crossDomain: true,
    dataType: "jsonp",
    success: function (user) {
      console.log(user);
    }
  });
};
*/
var displayUserRepos = function () {

  $.ajax('http://d2a0f5wdso4x2s.cloudfront.net/?username=zhiephie' , {
    dataType: "json",
    success: function (repos) {
      console.log(repos);
      $('.profile').html(_.template($('#profile-template').html(), {user: repos.profile}));

      $('.my-repos').html(_.template($('#repositories-table').html(), {repos: repos.repos}));
      $('.my-repos table').dataTable( {
          "bPaginate": true,
          "bLengthChange": false,
          "bFilter": false,
          "bInfo": true,
          "bAutoWidth": false,
          "aaSorting": [[ 4, "desc" ]],
          "sPaginationType": "bootstrap"
      }  );
    }
  });

};
      displayUserRepos();

</script>
<script src="//static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">try{ clicky.init(100641309); }catch(e){}</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100641309ns.gif" /></p></noscript>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Yudi Purwanto - Web Developer</title>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css" />
	</head>
	<body>
	<div class="container">
	<div class="profile"></div>
	<hr />
	<h3>My Repositories</h3>
	<div class="my-repos"></div>
	<hr />
	</div>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.3/jquery.dataTables.min.js"></script>

	<script type="text/template" id="profile-template">
	<h1 style="margin-top: 40px;"><%= user.name %></h1>
	<hr />
	<div class="row">
	<div class="span8">
	<img style="float:left; margin-right: 20px;width: 80px; max-width:80px; height: 80px;" src="http://www.gravatar.com/avatar/<%= user.gravatar_id %>" class="img-polaroid">
	<%= user.company %><br/ >
	<%= user.location %><br />
	<%= user.email %><br />
	For hire: <%= user.hireable %>
	</div>
	<div class="span3">
	<a href="http://twitter.com/str4whatt" class="twitter-follow-button">Follow @str4whatt</a></td></tr>
	<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
	</div>
	</div>
	</script>
	<script type="text/template" id="repositories-table">
	<hr />
	<% if( typeof org !== 'undefined') { %>
	<img style="float:left; margin-right: 20px;height: 80px; width: 80px;" src="<%= org.avatar_url %>" class="img-polaroid" />
	<h2 style="line-height: 80px;"><a href="<%= org.url %>"><%= org.login %></a></h2>
	<div style="clear: both;"></div>
	<hr />


	<% } %>
	<table class="table libraries table-striped">
	<thead>
	<tr>
	<th>Name</th><th>Language</th><th>Description</th><th>Forks</th><th>Watchers</th><th>Open Issues</th>
	</tr>
	</thead>
	<tbody>
	<% _.each(repos, function(repo){ %>
	<tr>
	<td><a href="<%= repo.html_url %>"><%= repo.name %></a></td>
	<td><%= repo.language %></td>
	<td><%= repo.description.substr(0,50) %>...</td>
	<td><%= repo.forks %></td>
	<td><%= repo.watchers %></td>
	<td><%= repo.open_issues %></td>

	</tr>
	<% }); %>
	</tbody>
	</table>

	</script>

	<script>
	$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
	{
	return {
	"iStart": oSettings._iDisplayStart,
	"iEnd": oSettings.fnDisplayEnd(),
	"iLength": oSettings._iDisplayLength,
	"iTotal": oSettings.fnRecordsTotal(),
	"iFilteredTotal": oSettings.fnRecordsDisplay(),
	"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
	"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
	};
	}

	/* Bootstrap style pagination control */
	$.extend( $.fn.dataTableExt.oPagination, {
	"bootstrap": {
	"fnInit": function( oSettings, nPaging, fnDraw ) {
	var oLang = oSettings.oLanguage.oPaginate;
	var fnClickHandler = function ( e ) {
	e.preventDefault();
	if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
	fnDraw( oSettings );
	}
	};

	$(nPaging).addClass('pagination').append(
	'<ul>'+
	'<li class="prev disabled"><a href="#">← '+oLang.sPrevious+'</a></li>'+
	'<li class="next disabled"><a href="#">'+oLang.sNext+' → </a></li>'+
	'</ul>'
	);
	var els = $('a', nPaging);
	$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
	$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
	},

	"fnUpdate": function ( oSettings, fnDraw ) {
	var iListLength = 5;
	var oPaging = oSettings.oInstance.fnPagingInfo();
	var an = oSettings.aanFeatures.p;
	var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);

	if ( oPaging.iTotalPages < iListLength) {
	iStart = 1;
	iEnd = oPaging.iTotalPages;
	}
	else if ( oPaging.iPage <= iHalf ) {
	iStart = 1;
	iEnd = iListLength;
	} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
	iStart = oPaging.iTotalPages - iListLength + 1;
	iEnd = oPaging.iTotalPages;
	} else {
	iStart = oPaging.iPage - iHalf + 1;
	iEnd = iStart + iListLength - 1;
	}

	for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
	// Remove the middle elements
	$('li:gt(0)', an[i]).filter(':not(:last)').remove();

	// Add the new list items and their event handlers
	for ( j=iStart ; j<=iEnd ; j++ ) {
	sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
	$('<li '+sClass+'><a href="#">'+j+'</a></li>')
	.insertBefore( $('li:last', an[i])[0] )
	.bind('click', function (e) {
	e.preventDefault();
	oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
	fnDraw( oSettings );
	} );
	}

	// Add / remove disabled classes from the static elements
	if ( oPaging.iPage === 0 ) {
	$('li:first', an[i]).addClass('disabled');
	} else {
	$('li:first', an[i]).removeClass('disabled');
	}

	if ( oPaging.iPage === oPaging.iTotalPages-1 \|\| oPaging.iTotalPages === 0 ) {
	$('li:last', an[i]).addClass('disabled');
	} else {
	$('li:last', an[i]).removeClass('disabled');
	}
	}
	}
	}
	} );
	/*
	var displayProfile = function (username) {
	$.ajax('https://api.github.com/users/' + username + '?callback=?', {
	crossDomain: true,
	dataType: "jsonp",
	success: function (user) {
	console.log(user);
	}
	});
	};
	*/
	var displayUserRepos = function () {

	$.ajax('http://d2a0f5wdso4x2s.cloudfront.net/?username=zhiephie' , {
	dataType: "json",
	success: function (repos) {
	console.log(repos);
	$('.profile').html(_.template($('#profile-template').html(), {user: repos.profile}));

	$('.my-repos').html(_.template($('#repositories-table').html(), {repos: repos.repos}));
	$('.my-repos table').dataTable( {
	"bPaginate": true,
	"bLengthChange": false,
	"bFilter": false,
	"bInfo": true,
	"bAutoWidth": false,
	"aaSorting": [[ 4, "desc" ]],
	"sPaginationType": "bootstrap"
	} );
	}
	});

	};
	displayUserRepos();

	</script>
	<script src="//static.getclicky.com/js" type="text/javascript"></script>
	<script type="text/javascript">try{ clicky.init(100641309); }catch(e){}</script>
	<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100641309ns.gif" /></p></noscript>
	</body>
	</html>