Skip to content

Instantly share code, notes, and snippets.

@ergurjeetsingh

ergurjeetsingh/index.html

Created June 11, 2018 05:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ergurjeetsingh/ce8f0645bbda90ac0cb9a5eb4f5f7032 to your computer and use it in GitHub Desktop.
Save ergurjeetsingh/ce8f0645bbda90ac0cb9a5eb4f5f7032 to your computer and use it in GitHub Desktop.
Download ZIP
jason get data
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<title>Aioneframework.com Examples</title>
<meta name="theme-color" content="#168dc5">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Testing google fonts" >
<link rel="icon" type="image/png" href="https://cdn.aioneframework.com/assets/images/favicon-32x32.png" sizes="32x32" />
<link rel="stylesheet" type="text/css" href="https://cdn.aioneframework.com/assets/css/aione.min.css">
<style type="text/css">
.gists-wrapper{
float: left;
width: 300px;
}
.preview-wrapper{
float: right;
width: calc( 100% - 300px );
}
.gists-wrapper > ul{
border: 1px solid #e8e8e8;
}
.gists-wrapper > ul > li{
padding: 10px;
border-bottom:1px solid #e8e8e8;
cursor: pointer;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gists-wrapper > ul > li:last-child{
border-bottom: none;
}
.gists-wrapper > ul > li > a{
color: #454545;
font-size:16px;
}
.gists-wrapper .gists-header{
font-size: 24px;
background-color: #03a9f4;
color: white;
padding: 15px;
}
.title{
font-size: 40px;
padding:15px;
font-weight: 300;
color: #263238;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<section>
<div class="ar ">
<div class="ac l100 m100 s100">
<div class="aione-align-center">
<div class="gists-wrapper">
<div class="gists-header">
List Of Gists
</div>
<ul class="gists"></ul>
</div>
<div class="preview-wrapper">
<div class="title"></div>
<div class="preview">
</div>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.aioneframework.com/assets/js/vendor.min.js"></script>
<!-- <script src="https://cdn.aioneframework.com/assets/js/aione.min.js"></script> -->
<script src="http://manage.aioneframework.com/aioneframework/assets/js/aione.js"></script>
<script>
$.getJSON('https://api.github.com/users/sgssandhu/gists', function(data) {
var html = '';
var gists = [];
$.each( data, function( key, value ) {
var title = value.description;
if(title == '' || title == null || title == undefined){
title = value.id;
}
//html += '<li><a class="gist" href="https://aioneframework.com/play/#'+value.id+'" target="_blank" data-target="'+value.id+'">' + title + '</a></li>';
html += '<li><a class="gist-item" href="#" data-target="'+value.id+'">' + title + '</a></li>';
});
console.log('Gists Inserted');
$(".gists").html(html);
});
$(document).ready(function() {
console.log('Ready');
$('body').on('click', ".gists > li > a", function(e) {
console.log('Gist Clicked');
e.preventDefault();
$(this).parent().addClass("active").siblings().removeClass('active');
var gist = $(this).attr("data-target");
if(gist != undefined){
$.getJSON('https://api.github.com/gists/'+gist, function(data) {
var html = '';
$.each( data.files, function( key, file ) {
if(file.language == 'HTML'){
html += file.content;
}
});
$(".preview").html(html);
$(".title").html(data.description);
});
}
});
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment