Create a gist now

Instantly share code, notes, and snippets.

@JRGould /app.js
Last active Nov 26, 2015

What would you like to do?
Give it a REST js using mock data
var posts_mockup = [
{ ID: 1, title: "First Post Title", permalink: 'http://example.com/1/', upvotes: 12, downvotes: 2 },
{ ID: 22, title: "Second Post Title", permalink: 'http://example.com/2/', upvotes: 1, downvotes: 22 },
{ ID: 33, title: "Third Post Title", permalink: 'http://example.com/3/', upvotes: 5, downvotes: 4 },
{ ID: 44, title: "Fourth Post Title", permalink: 'http://example.com/4/', upvotes: 2, downvotes: 2 },
{ ID: 55, title: "Fifth Post Title", permalink: 'http://example.com/5/', upvotes: 8, downvotes: 13 },
];
var $el;
var posts = {};
var votedOn = JSON.parse( localStorage.getItem( 'giar_votedOn' ) );
function getPostsFromServer( callback ) {
// TODO: AJAX get posts from server
posts = posts_mockup;
if ( 'function' === typeof callback ) {
callback.call();
}
}
function getRandomPost() {
var post = posts[ Math.floor( Math.random() * posts.length ) ];
var current = $el.data( 'post' );
if ( 'object' == typeof current && current.ID === post.ID ) {
post = getRandomPost();
}
return post;
}
function showPost( post ) {
$el.data( 'currentPost', post );
$el.find( 'h1' ).text( post.title );
$el.find( '.votes .up' ).text( post.upvotes );
$el.find( '.votes .down' ).text( post.downvotes );
}
function getLS( key ) {
var data = window.localStorage.getItem( key );
try {
return JSON.parse( data );
} catch ( e ) {
return data;
}
}
function setLS( key, data ) {
return window.localStorage.setItem( key, JSON.stringify( data ) );
}
function voteOnPost( post, updown ) {
var readingList = getLS( 'readingList' ) || [];
if ( 'up' === updown ) {
if ( -1 === readingList.indexOf( post.ID ) ) {
readingList.push ( post.ID );
setLS( 'readingList', readingList );
addReadingListElem( post );
}
}
showPost( getRandomPost() );
// TODO: AJAX send vote to server
}
function addReadingListElem( post ) {
$el.find( '.reading-list ul' ).append( '<li data-id="' + post.ID + '"><a target=_blank href="' + post.permalink + '">' + post.title + '</a></li>' );
}
$( document ).ready( function() {
$el = $( '.giar' );
getPostsFromServer( initAfterAjax );
function initAfterAjax() {
showPost( getRandomPost() );
// display saved reading list
$el.find( '.reading-list ul' ).empty();
var readingList = getLS( 'readingList' ) || [];
$.each( readingList, function( i, ID ) {
$.each( posts, function( i, post ) {
if ( post.ID === ID ) {
addReadingListElem( post );
}
} );
} );
}
$el.on( 'click', '.votes span', function( e ) {
voteOnPost( $el.data( 'currentPost' ), $( this ).attr( 'class' ) );
} );
$el.on( 'click', '.clear-list', function( e ) {
e.preventDefault();
setLS( 'readingList', [] );
$el.find( '.reading-list ul' ).empty();
} );
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment