Skip to content

Instantly share code, notes, and snippets.

@erik-sn

erik-sn/Wikipedia Viewer.markdown

Last active July 3, 2016 07:07
Show Gist options
  • Save erik-sn/2940d9d1bf79ac179109ed605e7a600d to your computer and use it in GitHub Desktop.
Save erik-sn/2940d9d1bf79ac179109ed605e7a600d to your computer and use it in GitHub Desktop.
Download ZIP
Wikipedia Viewer
Raw
index.html
<div id="loader">Loading...</div>
<div id="error-container"></div>
<div id="page-container" class="container">
<div class="row">
<div id="search-container" class="col-sm-4">
<button id="random-button" class="btn btn-primary">Random Article</button>
<div id="search-input">
<form id="search-form">
<fieldset class="form-group">
<label for="wikiSearchInput" id="search-label">Search Wikipedia:</label>
<input type="search" class="form-control" id="wikiSearchInput" placeholder="Search here..." autocomplete="off">
<small id="search-error" class="text-muted"></small>
</fieldset>
</form>
<ul id="wiki-options"></ul>
<div id="history-container">
<label id="search-label">Search History:</label>
<button id="clear-history-button" class="btn btn-danger">Clear History</button>
<div id="history-list-container" >
<ul id="history-list"></ul>
</div>
</div>
</div>
</div>
<div id="wiki-buffer">
<div id="wiki-container" class="col-sm-8">
<div id="wiki-holder">Type in the search box or click 'Random Article' to see an article from Wikipedia.</div>
<div id="title-container"></div>
<div id="extract-container">
</div>
<div id="link-container"></div>
</div>
</div>
</div>
</div>
Raw
script.js
var pageUrl = 'https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles=';
var imgUrl = 'https://en.wikipedia.org/w/api.php?action=query&prop=pageimages&format=json&pithumbsize=100&titles=';
var searchUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&limit=10&namespace=0&format=json&search=';
var randomUrl = 'https://en.wikipedia.org/w/api.php?action=query&format=json&list=random&rnnamespace=0&rnlimit=1'
$(document).ready(function() {
hideLoader();
$('#wikiSearchInput').on('input', function(event) {
searchWikipedia(event.target.value);
});
$('#search-form').submit(function(event) {
event.preventDefault();
var search = $("#wikiSearchInput").val();
if (search.length < 3) {
$('#search-error').html('Your search must be greater than three characters.')
} else {
$("#wikiSearchInput").val('');
$('.wiki-option').remove();
fetchArticle(search, true);
}
});
$('#random-button').on('click', function() {
getRandomArticle();
});
$('#clear-history-button').on('click', function() {
$('.history-item').fadeOut(500, function() {
$(this).remove();
});
});
$(document).on('click', '.wiki-option', function() {
fetchArticle($(this).html(), true);
$("#wikiSearchInput").val('');
$('.wiki-option').remove();
});
$('html, body, #page-container').on('click', function() {
$('.wiki-option').hide();
});
$(document).on('click', '#wikiSearchInput', function() {
$('.wiki-option').show();
});
$(window).resize(function() {
var searchWidth = $('#wikiSearchInput').width();
$('#wiki-options').css('width', searchWidth);
checkHistoryVisibility();
});
$(document).on('click', '.history-item', function() {
var title = $(this).html();
var index = title.indexOf('>');
if (index !== -1) {
title = title.substring(index + 1);
}
fetchArticle(title, false);
});
});
function hideLoader() {
$('#loader').hide();
$('#page-container').show();
}
function showError(error) {
$('#page-container').hide();
$('#error-container').html(error);
}
function checkHistoryVisibility() {
var width = $(window).width();
var items = $('#history-list').children().length;
if (width < 775 || items === 0) {
$('#history-container').hide();
} else {
$('#history-container').show();
}
}
function searchWikipedia(term) {
getData(searchUrl + term, 'jsonp', function(response) {
if (!response) {
$('#search-error').html('There was a problem while searching Wikipedia.')
} else {
var titles = response[1];
var options = titles.reduce(function(previous, current) {
return previous + '<li class="wiki-option list-group-item">' + current + '</li>';
}, '');
$('#wiki-options').html(options);
}
});
}
function fetchArticle(title, addToHistory) {
$('#wiki-container').fadeOut(250, function() {
getData(pageUrl + title, 'jsonp', function(data) {
getData(imgUrl + title, 'jsonp', function(imageData) {
hideLoader();
if (!data || !imageData) {
showError('There was a problem loading wikipedia data - make sure you are using HTTPS and try again.')
} else {
$('#wiki-holder').hide();
var object = getFirstObject(imageData.query.pages);
var image = '';
if (object) {
var thumbnail = object.thumbnail;
}
if (thumbnail) {
var imgUrl = thumbnail.source;
image = '<img alt="" id="wiki-img-container" src="' + imgUrl + '" />';
}
var wiki = getFirstObject(data.query.pages);
setActiveArticle(wiki, image);
if (addToHistory) {
updateHistory(wiki, imgUrl);
}
$('#wiki-container').fadeIn(250);
}
});
});
});
}
function setActiveArticle(wiki, image) {
$('#title-container').html('<h1>' + wiki.title + '</h1>');
$('#extract-container').html(image + wiki.extract);
$('#link-container').html('<h3>Read more on <a href="https://en.wikipedia.org/wiki/' + wiki.title +'">Wikipedia</a></h3>');
}
function updateHistory(wiki, imgUrl) {
var image = '';
if (imgUrl) {
image = '<img class="history-img" src="' + imgUrl + '" height="25" />';
}
var item = '<li class="history-item list-group-item">'+ image + wiki.title + '</li>';
$('#history-list').prepend(item);
$('#history-container').show();
}
function getRandomArticle() {
getData(randomUrl, 'jsonp', function(data) {
console.log(data)
if (!data) {
getRandomArticle();
}
var title = data.query.random[0].title;
fetchArticle(title, true);
});
}
function getData(url, dataType, returnData) {
$.ajax({
url: url,
type: 'GET',
dataType: dataType,
success: function(data) {
returnData(data)
},
error: function(jqXHR, textStatus, errorThrown) {
returnData(undefined);
}
});
}
function getFirstObject(object) {
for (var i in object) {
if (object.hasOwnProperty(i)) {
return object[i];
}
}
}
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
#page-container {
display: none;
margin-left: auto;
margin-right: auto;
}
#loader {
margin-top: 20%;
width: 100%;
font-size: 40px;
font-weight: bold;
text-align: center;
}
#error-container {
width: 70%;
font-size: 24px;
font-weight: bold;
margin: 5% 15% 0% 15%;
text-align: center;
color: red;
}
#search-container {
}
#random-button {
width: 100%;
font-size: 20px;
margin-bottom: 25px;
-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
}
#search-label {
font-size: 18px;
}
#search-error {
color: red;
}
#wiki-options {
z-index: 1;
position: fixed;
padding-top: 0px;
padding-left: 0px;
margin-top: -15px;
width: 25%;
}
.wiki-option {
cursor: pointer;
margin-left: 0px;
color: white !important;
background-color: #337ab7 !important;
border-color: #2e6da4 !important;
}
#wiki-buffer {
margin-left: 15px;
margin-right: 15px;
}
#history-container {
display: none;
width: 100%;
}
#history-list-container {
overflow-y: auto;
height: 60vh;
}
#history-list {
padding-left: 0px;
}
.history-item {
width: 100%;
transition: background-color 0.25s ease-in-out;
transition: color 0.25s ease-in-out;
}
.history-item:hover {
cursor: pointer;
color: white !important;
background-color: #337ab7 !important;
border-color: #2e6da4 !important;
transition: background-color 0.15s ease-in-out;
transition: color 0.15s ease-in-out;
}
.history-img {
-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5);
margin-right: 5px;
}
#clear-history-button {
width: 100%;
}
#wiki-container {
border: 3px solid black;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
}
#wiki-holder {
font-size: 24px;
text-align: center;
padding: 25px;
}
#title-container {
text-align: center;
}
#wiki-img-container {
margin: 10px;
float: left;
border: 2px solid black;
-webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.75);
}
#link-container {
text-align: center;
}
#extract-container {
min-height: 100px;
font-size: 18px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment