|
function randomArticle() { |
|
$.getJSON("https://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&generator=random&grnnamespace=0&callback=?", function(result) { |
|
// button Choose For Me ready to be clicked again |
|
$("#random").attr("disabled", false); |
|
// hiding intro (empty state) before displaying the response from API |
|
cleanIntro(); |
|
$.each(result.query.pages, function(key, page){ |
|
$("#random-result-title").html('<a href="http://en.wikipedia.org/?curid=' + page.pageid + '">' + page.title + '</a>'); |
|
$("#random-result").html(page.extract); |
|
return false; //to display 1st element and finish the loop |
|
}); |
|
$(".random-result").slideDown(function () { |
|
arrowBack(); |
|
}); |
|
}); |
|
} |
|
|
|
function searchArticle(query){ |
|
$.getJSON("https://en.wikipedia.org/w/api.php?action=query&format=json&generator=search&grnnamespace=0&prop=extracts&exlimit=max&explaintext&exintro&gsrsearch=" + query + "&callback=?", function(result) { |
|
// button Choose For Me ready to be clicked again |
|
$("#query-button").attr("disabled", false); |
|
// hiding intro (empty state) before displaying the result from API |
|
cleanIntro(); |
|
if (result.hasOwnProperty("query")) { |
|
$.each(result.query.pages, function(key, page){ |
|
var extract = page.extract.length > 464 ? page.extract.substring(0,464) + "..." : page.extract; |
|
$("#article-list").append('<li><h2><a href="http://en.wikipedia.org/?curid=' + page.pageid + '">' + page.title + '</a></h2>' + '<p>' + extract + '</p>' + '</li>'); |
|
}); |
|
} else { |
|
hintChange(true); |
|
} |
|
arrowBack(); |
|
}); |
|
} |
|
|
|
function cleanIntro (){ |
|
$(".intro").hide(); |
|
} |
|
|
|
function hintChange (turnOn) { |
|
if (turnOn) { |
|
$("#no-query").removeClass("hidden"); |
|
$("#random").addClass("look"); |
|
} else { |
|
$("#no-query").addClass("hidden"); |
|
$("#random").removeClass("look"); |
|
} |
|
} |
|
|
|
// back-to-top link visibility set |
|
function arrowBack (){ |
|
if (!$(".intro").is(":visible") && $("body").height() - $("footer").height() > $(window).height()){ |
|
$("#back-to-top").removeClass("hidden"); |
|
} else { |
|
$("#back-to-top").addClass("hidden"); |
|
} |
|
} |
|
|
|
$(document).ready(function() { |
|
$("#random").on("click", function(e) { |
|
// random button unfocusing |
|
$(this).blur(); |
|
// disable the button before getting the response from API |
|
$(this).attr("disabled", true); |
|
// hiding article-list |
|
$("#article-list").hide(); |
|
// hiding no-query help text and removing yellow look background of random after random being chosen |
|
hintChange(false); |
|
randomArticle(); |
|
e.preventDefault(); |
|
}); |
|
$("#query-button").on("click", function(e) { |
|
// cleaning after previous search |
|
$("#article-list").html(""); |
|
// making article-list visible again |
|
$("#article-list").show(); |
|
// cleaning random result if displayed |
|
$(".random-result").slideUp(function (){ |
|
// when content slided up calling arrowBack() when query is empty back-to-top section |
|
arrowBack(); |
|
}); |
|
if ($("#query").val() === "") { |
|
// if input is empty let's display empty state help and clean intro image |
|
cleanIntro(); |
|
hintChange(true); |
|
// if random hovered over #no-query span class removed else visible |
|
$("#random").hover(function() { |
|
$("#no-query span").removeClass("accent-hint"); |
|
}, function() { |
|
$("#no-query span").addClass("accent-hint"); |
|
}); |
|
} else { |
|
// disable the button before getting the response from API |
|
$(this).attr("disabled", true); |
|
// passing input text |
|
searchArticle($("#query").val()); |
|
hintChange(false); |
|
} |
|
e.preventDefault(); |
|
}); |
|
// back-to-top focus |
|
$("#arrow-top").on("click", function() { |
|
$("#query").focus().select(); |
|
}); |
|
}); |