Created
May 9, 2017 01:08
-
-
Save rachel-yankelevitz/fc1385a06b14622507db9edd34a7b3a1 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function(){ | |
// Array to store all feed sources | |
var SOURCES = [ | |
{ | |
displayName: "Reddit", | |
url: "https://www.reddit.com/r/worldnews/top/.json", | |
proxyRequired: true, | |
defaultSource: true, // You can have only one default source | |
formatResponse: function(response) { | |
var items = response.data.children; | |
return items.map(function(child) { | |
return { | |
title: child.data.title, | |
author: child.data.author, | |
score: child.data.score, | |
link: child.data.url, | |
thumbnail: child.data.thumbnail, | |
tag: child.data.subreddit, | |
description: child.data.domain | |
}; | |
}); | |
} | |
}, | |
{ | |
displayName: "Mashable", | |
url: "http://mashable.com/stories.json", | |
proxyRequired: true, | |
defaultSource: false, | |
formatResponse: function(response){ | |
var articles = response.new; | |
return _.map(articles, function(article) { | |
return { | |
description: article.content.plain, | |
score: article.shares.total, | |
link: article.link, | |
tag: article.channel, | |
title: article.title, | |
thumbnail: article.responsive_images[2].image | |
} | |
}); | |
} | |
}, | |
{ | |
displayName: "Digg", | |
url: "http://digg.com/api/news/popular.json", | |
proxyRequired: true, | |
defaultSource: false, | |
formatResponse: function(response){ | |
var articles = response.data.feed; | |
return _.map(articles, function(article) { | |
return { | |
description: article.content.description, | |
score: article.digg_score, | |
link: article.content.url, | |
tag: article.content.kicker, | |
title: article.content.title, | |
thumbnail: article.content.media.images[0].url | |
} | |
}); | |
} | |
} | |
]; | |
// Prefix url for proxy | |
var PROXY_URL = "https://accesscontrolalloworiginall.herokuapp.com/"; | |
//this appends to the non-default apis because they need to be called with an appended url | |
// Utils object to store any misc. methods | |
var Utils = { | |
markupFromArticles: function(articles) { | |
return _.map(articles, function(article) { | |
return Utils.markupFromSingleArticle(article); | |
}).join(''); | |
}, | |
markupFromSingleArticle: function(article) { | |
return Utils.articleTemplate(article); | |
}, | |
articleTemplate: _.template('<article class="article clearfix">' + | |
'<section class="featuredImage">' + | |
'<img src="<%= thumbnail %>" alt="">' + | |
'</section>' + | |
'<section class="articleContent">' + | |
'<a data-description="<%= description %>" href="<%= link %>" ><h3><%= title %></h3></a>' + | |
'<h6><%= tag %></h6>' + | |
'</section>' + | |
'<section class="impressions"><%= score %></section>' + | |
'</article>') | |
}; | |
// App object to store all app relates metods | |
var App = { | |
init: function() { | |
// Methods that need to be called on initialization | |
App.bindEvents(); | |
App.showDefaultFeed(); | |
App.displayDropDown(); | |
}, | |
showDefaultFeed: function() { | |
var defaultFeed = _.findWhere(SOURCES, { defaultSource: true }); | |
App.showFeed(defaultFeed); | |
}, | |
currentArticles: [], | |
showFeed: function(source) { | |
var request = App.requestFeed(source); | |
// debugger; | |
request.done(function(response) { | |
var currentArticles = source.formatResponse(response); | |
App.currentArticles = currentArticles; | |
App.renderArticles(currentArticles); | |
}); | |
// add in fail scenario | |
}, | |
requestFeed: function(source){ | |
var url = source.proxyRequired ? PROXY_URL + source.url : source.url; | |
App.setView('loader'); | |
return $.ajax(url, { | |
dataType: 'json' | |
}); | |
}, | |
displayDropDown: function() { | |
SOURCES.forEach(function(item) { | |
var sourceHTML = _.template('<li><a href="#"><%= displayName %></a></li>') | |
var sourceName = sourceHTML(item); | |
$(".sources-dropdown").append(sourceName); | |
}); | |
}, | |
//onclick of list item, go to renderArticles function// | |
renderArticles: function(articles) { | |
App.setView('feed'); | |
var articlesHTML = Utils.markupFromArticles(articles); | |
$("#main").html(articlesHTML); | |
}, | |
bindEvents: function() { | |
$(".closePopUp").on("click",function(e) { | |
e.preventDefault(); | |
App.setView('feed'); | |
}); | |
// $('.sources-dropdown').on('click', 'a', App.showFeed); <-- don't delete this!!!! | |
$(".sources-dropdown").on("click", "li", function() { | |
var index = $(this).index(); | |
var feedObject = SOURCES[index]; | |
App.showFeed(feedObject); | |
}); | |
// Attach event listeners | |
$("section#main").on("click", "article a", function(e) { | |
e.preventDefault(); | |
App.setView('detail'); | |
var buttonLink = $(this).attr('href'); | |
$('.container > a').attr('href', buttonLink); | |
$('.container > h1').text(this.text); | |
var desc = $(this).data('description'); | |
$('.container > p').text(desc); | |
$('#popUp').removeClass('loader hidden'); | |
$('.closePopUp').removeClass('hidden'); | |
// console.log('desc', desc); <-- sanity check for the desc variable// | |
}); | |
}, | |
setView: function(viewType) { | |
var $popup = $('#popUp'); | |
var $closePopUp = $('.closePopUp'); | |
if (viewType === 'loader') { | |
$popup.removeClass('hidden'); | |
$closePopUp.addClass('hidden'); | |
$popup.addClass('loader'); | |
} | |
else if (viewType === 'detail') { | |
$popup.removeClass('hidden'); | |
$closePopUp.removeClass('hidden'); | |
$popup.removeClass('loader'); | |
} | |
else if (viewType === 'feed') { | |
$popup.addClass('hidden'); | |
$closePopUp.addClass('hidden'); | |
} | |
} | |
}; | |
App.init(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment