-
-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
* Fix #151 and make minor feed UI adjustments * Reformat script using 2 spaces * Bug fixes * Fixed header sizes
- Loading branch information
Caleb Ely
authored and
Charlie Lee
committed
May 15, 2016
1 parent
376073e
commit 842f50b
Showing
3 changed files
with
147 additions
and
140 deletions.
There are no files selected for viewing
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,151 +1,153 @@ | ||
| module.exports = {}; | ||
|
|
||
| (function() { | ||
| "use strict"; | ||
| let qNewsContainer = document.querySelector(".container-news"); | ||
| qNewsContainer.addEventListener("click", openNews); | ||
| "use strict"; | ||
| let qNewsContainer = document.querySelector(".container-news"); | ||
| qNewsContainer.addEventListener("click", openNews); | ||
|
|
||
| /** | ||
| * Open the desired news post in the user's browser. | ||
| * | ||
| * @param {Object} e - An MouseEvent object. | ||
| */ | ||
| function openNews(e) { | ||
| if (e.target.classList.contains("post-title")) { | ||
| nw.Shell.openExternal(e.target.parentElement.dataset.url); | ||
| } | ||
| /** | ||
| * Open the desired news post in the user's browser. | ||
| * | ||
| * @param {Object} e - An MouseEvent object. | ||
| */ | ||
| function openNews(e) { | ||
| if (e.target.classList.contains("post-link")) { | ||
| utils.openURL(e.target.dataset.url); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Cache the latest news. | ||
| * | ||
| * @param {Array} posts - An array containing raw new objects. | ||
| * @returns {Boolean} True if new was cached, false otherwise. | ||
| */ | ||
| function _cacheNews(posts) { | ||
| // Store the news in localStorage in case we cannot fetch it anew | ||
| localStorage.setItem("ba-news", JSON.stringify(posts)); | ||
| /** | ||
| * Cache the latest news. | ||
| * | ||
| * @param {Array} posts - An array containing raw new objects. | ||
| * @returns {Boolean} True if new was cached, false otherwise. | ||
| */ | ||
| function _cacheNews(posts) { | ||
| // Store the news in localStorage in case we cannot fetch it anew | ||
| localStorage.setItem("ba-news", JSON.stringify(posts)); | ||
|
|
||
| // Because setItem() does not have a return value upon successful | ||
| // storage, this kludge does that for us. | ||
| if (localStorage.getItem("ba-news")) { | ||
| console.info("Latest news sucessfully cached"); | ||
| return true; | ||
| } else { | ||
| console.info("Latest news was not sucessfully cached"); | ||
| return false; | ||
| } | ||
| // Because setItem() does not have a return value upon successful | ||
| // storage, this kludge does that for us. | ||
| if (localStorage.getItem("ba-news")) { | ||
| console.info("Latest news sucessfully cached"); | ||
| return true; | ||
| } else { | ||
| console.info("Latest news was not sucessfully cached"); | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Retrieve the cached news. | ||
| * | ||
| * @returns {Array} An array containing raw news objects. | ||
| * If not available, an empty array. | ||
| */ | ||
| function _getNewsCache() { | ||
| console.info("Fetching cached news"); | ||
| let cached = localStorage.getItem("ba-news"); | ||
| return cached ? JSON.parse(cached) : []; | ||
| } | ||
| /** | ||
| * Retrieve the cached news. | ||
| * | ||
| * @returns {Array} An array containing raw news objects. | ||
| * If not available, an empty array. | ||
| */ | ||
| function _getNewsCache() { | ||
| console.info("Fetching cached news"); | ||
| let cached = localStorage.getItem("ba-news"); | ||
| return cached ? JSON.parse(cached) : []; | ||
| } | ||
|
|
||
| /** | ||
| * Clear the cached news. | ||
| * | ||
| * @returns {Boolean} Always returns true. | ||
| */ | ||
| function _clearNewsCache() { | ||
| localStorage.removeItem("ba-news"); | ||
| return true; | ||
| } | ||
| /** | ||
| * Clear the cached news. | ||
| * | ||
| * @returns {Boolean} Always returns true. | ||
| */ | ||
| function _clearNewsCache() { | ||
| localStorage.removeItem("ba-news"); | ||
| return true; | ||
| } | ||
|
|
||
| /** | ||
| * Construct the HTML structure for the news. | ||
| * | ||
| * @param {Object} post - A news article object. | ||
| * @returns {String} | ||
| */ | ||
| function _compilePostHTML(post) { | ||
| return `<div class="post" id="post-${post.id}"> | ||
| /** | ||
| * Construct the HTML structure for the news. | ||
| * | ||
| * @param {Object} post - A news article object. | ||
| * @returns {String} | ||
| */ | ||
| function _compilePostHTML(post) { | ||
| return `<div class="post" id="post-${post.id}"> | ||
| <header> | ||
| <a class="post-link" href="#" data-url="${post.url}"><h2 class="post-title">${post.title}</h2></a> | ||
| <h2 class="post-title"><a class="post-link" href="#" data-url="${post.url}">${post.title}</a></h2> | ||
| <p class="post-date">${post.date}</p> | ||
| </header> | ||
| <div class="post-content"><p>${post.excerpt}</p></div> | ||
| </div>`; | ||
| } | ||
|
|
||
| /** | ||
| * Compile the latest news. | ||
| * | ||
| * @param {JSON} data - The JSON response data. | ||
| * @returns {Array} The latest news, in the form of news objects. | ||
| */ | ||
| function getPosts(data) { | ||
| let posts = [], | ||
| numOfPosts = 3; | ||
| } | ||
|
|
||
| // Get the post up to the limit of posts we want to display | ||
| for (var i = 0; i < numOfPosts; i++) { | ||
| var curPost = data.posts[i]; | ||
| posts.push({ | ||
| id: curPost.id, | ||
| url: curPost.url, | ||
| date: new Date(curPost.date).toLocaleDateString(), | ||
| title: curPost.title_plain, | ||
| excerpt: curPost.excerpt | ||
| }); | ||
| } | ||
| /** | ||
| * Compile the latest news. | ||
| * | ||
| * @param {JSON} data - The JSON response data. | ||
| * @returns {Array} The latest news, in the form of news objects. | ||
| */ | ||
| function getPosts(data) { | ||
| let posts = [], | ||
| numOfPosts = 3; | ||
|
|
||
| // Cache the news | ||
| _clearNewsCache(); | ||
| _cacheNews(posts); | ||
| return posts; | ||
| // Get the post up to the limit of posts we want to display | ||
| for (var i = 0; i < numOfPosts; i++) { | ||
| var curPost = data.posts[i]; | ||
| posts.push({ | ||
| id: curPost.id, | ||
| url: curPost.url, | ||
| date: new Date(curPost.date).toLocaleDateString(), | ||
| title: curPost.title_plain, | ||
| excerpt: curPost.excerpt | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Display an error message if the news cannot be loaded. | ||
| */ | ||
| function erroring(err) { | ||
| qNewsContainer.innerHTML = "<h3>News could not be loaded at this time.</h3>"; | ||
| console.error(err); | ||
| } | ||
| // Cache the news | ||
| _clearNewsCache(); | ||
| _cacheNews(posts); | ||
| return posts; | ||
| } | ||
|
|
||
| /** | ||
| * Display the news. | ||
| * | ||
| * @param {Array} posts - An array containing the news to display. | ||
| * @returns {Boolean} Always returns true. | ||
| */ | ||
| function displayNews(posts) { | ||
| posts.forEach(function(post) { | ||
| qNewsContainer.insertAdjacentHTML("beforeend", _compilePostHTML(post)); | ||
| }); | ||
| return true; | ||
| } | ||
| /** | ||
| * Display an error message if the news cannot be loaded. | ||
| */ | ||
| function erroring(err) { | ||
| qNewsContainer.innerHTML = "<h3>News could not be loaded at this time.</h3>"; | ||
| console.error(err); | ||
| } | ||
|
|
||
| /** | ||
| * Fetch the latest news. | ||
| * | ||
| * @param {String} url - The URL to the JSON news feed. | ||
| */ | ||
| function load(url) { | ||
| window.fetch(url, {method: "get"}) | ||
| .then(r => r.json()) | ||
| .then(r => displayNews(getPosts(r))) | ||
| .catch(err => { | ||
| // First try to load the cached news, if possible | ||
| var cachedNews = _getNewsCache(); | ||
| if (cachedNews) { | ||
| displayNews(cachedNews); | ||
| /** | ||
| * Display the news. | ||
| * | ||
| * @param {Array} posts - An array containing the news to display. | ||
| * @returns {Boolean} Always returns true. | ||
| */ | ||
| function displayNews(posts) { | ||
| posts.forEach(function(post) { | ||
| qNewsContainer.insertAdjacentHTML("beforeend", _compilePostHTML(post)); | ||
| }); | ||
| return true; | ||
| } | ||
|
|
||
| // No cache available, error | ||
| } else { | ||
| erroring(err); | ||
| } | ||
| }); | ||
| } | ||
| /** | ||
| * Fetch the latest news. | ||
| * | ||
| * @param {String} url - The URL to the JSON news feed. | ||
| */ | ||
| function load(url) { | ||
| window.fetch(url, { | ||
| method: "get" | ||
| }) | ||
| .then(r => r.json()) | ||
| .then(r => displayNews(getPosts(r))) | ||
| .catch(err => { | ||
| // First try to load the cached news, if possible | ||
| var cachedNews = _getNewsCache(); | ||
| if (cachedNews) { | ||
| displayNews(cachedNews); | ||
|
|
||
| // No cache available, error | ||
| } else { | ||
| erroring(err); | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| // Public exports | ||
| module.exports.load = load; | ||
| // Public exports | ||
| module.exports.load = load; | ||
| }()); |