|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
|
<head>
|
|
|
|
|
<title>Pixabay Image Search</title>
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
|
|
|
|
|
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="locales/locales.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<!--<p id="lang"></p>-->
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
/*
|
|
|
|
|
This script makes use of the Pixabay image search API, documented here:
|
|
|
|
|
https://pixabay.com/api/docs/
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
var API_KEY = '2261217-168750d9eaaa0051ca20fa425';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Number of results per page
|
|
|
|
|
var limit = 10;
|
|
|
|
|
|
|
|
|
|
// Maximum number of pages to display
|
|
|
|
|
var maxPages = 10;
|
|
|
|
|
|
|
|
|
|
// Minimum size of pictures to search for
|
|
|
|
|
var minHeight = 150;
|
|
|
|
|
var minWidth = 150;
|
|
|
|
|
|
|
|
|
|
// Image type to retrieve. Can be "photo", "illustration", "vector" or "all".
|
|
|
|
|
var imageType = "all";
|
|
|
|
|
|
|
|
|
|
// Default language to search in, if the application can't return a suitable one
|
|
|
|
|
var searchLanguage = "en";
|
|
|
|
|
|
|
|
|
|
// Language for the widget (languages can be added in locales/locales.js)
|
|
|
|
|
var locale = locales["en"];
|
|
|
|
|
|
|
|
|
|
// Fetch 960px images instead of the default 640px. However the API doesn't
|
|
|
|
|
// provide size information in this case, so it is disabled by default.
|
|
|
|
|
var fetchMediumResImages = false;
|
|
|
|
|
|
|
|
|
|
// ---------------------
|
|
|
|
|
// Globals
|
|
|
|
|
// ---------------------
|
|
|
|
|
var currentIndex = 0;
|
|
|
|
|
var currentTerm = "";
|
|
|
|
|
var filtersDisplayed = false;
|
|
|
|
|
|
|
|
|
|
// Pixabay's supported search languages
|
|
|
|
|
var availableLanguages = ['cs', 'da', 'de', 'en', 'es', 'fr', 'id', 'it', 'hu', 'nl', 'no',
|
|
|
|
|
'pl', 'pt', 'ro', 'sk', 'fi', 'sv', 'tr', 'vi', 'th', 'bg', 'ru', 'el', 'ja', 'ko', 'zh'];
|
|
|
|
|
|
|
|
|
|
// ---------------------
|
|
|
|
|
|
|
|
|
|
$(document).ready(loadPage)
|
|
|
|
|
|
|
|
|
|
/* Initialize the page layout */
|
|
|
|
|
function loadPage() {
|
|
|
|
|
|
|
|
|
|
// Get OpenBoard's current language
|
|
|
|
|
var appLanguage = window.sankore ? sankore.locale().substr(0,2) : searchLanguage;
|
|
|
|
|
|
|
|
|
|
// Set it as search language, if possible
|
|
|
|
|
if (availableLanguages.indexOf(appLanguage) > -1)
|
|
|
|
|
searchLanguage = appLanguage;
|
|
|
|
|
|
|
|
|
|
// And as the widget's language
|
|
|
|
|
if (locales[searchLanguage] != undefined)
|
|
|
|
|
locale = locales[searchLanguage];
|
|
|
|
|
|
|
|
|
|
var mode = false; //search or view mode
|
|
|
|
|
var hide = false; //hide or no main panel
|
|
|
|
|
|
|
|
|
|
// basic containers and elements
|
|
|
|
|
|
|
|
|
|
var search = $("<div id='search' class='search'>").appendTo("body");
|
|
|
|
|
|
|
|
|
|
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);
|
|
|
|
|
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search);
|
|
|
|
|
|
|
|
|
|
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput);
|
|
|
|
|
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput);
|
|
|
|
|
|
|
|
|
|
var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput);
|
|
|
|
|
|
|
|
|
|
var selectFilter = $("<select id='typeFilter' class='filterSelect'>")
|
|
|
|
|
.append($("<option value='all'>"+locale.def_opts_val_image+"</option>"))
|
|
|
|
|
.append($("<option value='photo'>"+locale.image_type_photo+"</option>"))
|
|
|
|
|
.append($("<option value='illustration'>"+locale.image_type_illustration+"</option>"))
|
|
|
|
|
.append($("<option value='vector'>"+locale.image_type_vector+"</option>"))
|
|
|
|
|
$("<div class='filterContainer'>").append("<span>"+locale.image_type_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter);
|
|
|
|
|
|
|
|
|
|
var searchResult = $("<div id='searchResult'>").appendTo("body");
|
|
|
|
|
|
|
|
|
|
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body");
|
|
|
|
|
var disclaimer = $("<div id='disclaimer' class='disclaimer'>"+locale.disclaimer_title+"<div>").appendTo(disc_nav_cont);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Functions
|
|
|
|
|
|
|
|
|
|
searchButton.click(function(){
|
|
|
|
|
if(!hide){
|
|
|
|
|
runSearch(searchInput.val(), 0);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
searchInput.keydown(function(event){
|
|
|
|
|
if(!hide){
|
|
|
|
|
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
|
|
|
|
|
runSearch(searchInput.val(), 0);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
($(".imgContainer").live("click",function(){
|
|
|
|
|
sankore.sendFileMetadata(createMetaData($(this)));
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
toggleFilters.click(function(){
|
|
|
|
|
if(filtersDisplayed){
|
|
|
|
|
subSearchFilter.hide();
|
|
|
|
|
toggleFilters.css("background-image","url(images/down.png)");
|
|
|
|
|
filtersDisplayed = false;
|
|
|
|
|
} else {
|
|
|
|
|
subSearchFilter.css("display","inline-block");
|
|
|
|
|
toggleFilters.css("background-image","url(images/up.png)");
|
|
|
|
|
filtersDisplayed = true;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function updateFilters() {
|
|
|
|
|
var value = $("#typeFilter option:selected").val();
|
|
|
|
|
imageType = value;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function runSearch(term, index) {
|
|
|
|
|
updateFilters();
|
|
|
|
|
|
|
|
|
|
currentTerm = term;
|
|
|
|
|
currentIndex = index;
|
|
|
|
|
var page = index+1; // Page numbers start at 1 on Pixabay
|
|
|
|
|
var url = "https://pixabay.com/api/?key="+API_KEY
|
|
|
|
|
+"&q="+escape(term)
|
|
|
|
|
+"&per_page="+limit
|
|
|
|
|
+"&page="+page
|
|
|
|
|
+"&min_width="+minWidth
|
|
|
|
|
+"&minHeight="+minHeight
|
|
|
|
|
+"&image_type="+imageType
|
|
|
|
|
+"&lang="+searchLanguage
|
|
|
|
|
+"&safesearch=true";
|
|
|
|
|
|
|
|
|
|
//console.log(url);
|
|
|
|
|
//document.getElementById("lang").innerHTML = "Language: " + searchLanguage;
|
|
|
|
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: url,
|
|
|
|
|
success: searchComplete,
|
|
|
|
|
error: searchFail,
|
|
|
|
|
dataType: "json"
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function searchComplete(json) {
|
|
|
|
|
// Grab our content div, clear it.
|
|
|
|
|
var totalResults = json.totalHits;
|
|
|
|
|
var contentDiv = $('#searchResult').empty();
|
|
|
|
|
// Loop through our results, printing them to the page.
|
|
|
|
|
var results = json.hits;
|
|
|
|
|
|
|
|
|
|
if (results.length == 0)
|
|
|
|
|
$("<p>"+locale.no_result+"</p>").appendTo(contentDiv);
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < results.length; i++) {
|
|
|
|
|
var result = results[i];
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
Images are displayed in an `imgContainer` element. It contains
|
|
|
|
|
the image itself (`newImg`) but also some hidden fields containing
|
|
|
|
|
metadata that is sent to OpenBoard if the user clicks the image
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
// Image element
|
|
|
|
|
var imgContainer = $("<div class='imgContainer' draggable='true'>");
|
|
|
|
|
var newImg = document.createElement('img');
|
|
|
|
|
|
|
|
|
|
newImg.src = result.previewURL;
|
|
|
|
|
|
|
|
|
|
var imgWidth = (result.previewWidth > minWidth)?result.previewWidth:minWidth;
|
|
|
|
|
var imgHeight = (result.previewHeight > minHeight)?result.previewHeight:minHeight;
|
|
|
|
|
imgContainer.width(imgWidth).height(imgHeight);
|
|
|
|
|
imgContainer.append($(newImg));
|
|
|
|
|
|
|
|
|
|
// Metadata to send to OpenBoard
|
|
|
|
|
var iUrl = $("<input type='hidden'/>");
|
|
|
|
|
var iContent = $("<input type='hidden'/>");
|
|
|
|
|
var iHeight = $("<input type='hidden'/>");
|
|
|
|
|
var iWidth = $("<input type='hidden'/>");
|
|
|
|
|
var iThumbnailUrl = $("<input type='hidden'/>");
|
|
|
|
|
var iTitle = $("<input type='hidden'/>");
|
|
|
|
|
|
|
|
|
|
var imageURL = result.webformatURL;
|
|
|
|
|
if (fetchMediumResImages)
|
|
|
|
|
imageURL = getMediumResURL(result);
|
|
|
|
|
|
|
|
|
|
iUrl.attr("value", imageURL);
|
|
|
|
|
iContent.attr("value", result.type);
|
|
|
|
|
iHeight.attr("value", result.webformatHeight);
|
|
|
|
|
iWidth.attr("value", result.webformatWidth);
|
|
|
|
|
iThumbnailUrl.attr("value", result.previewURL);
|
|
|
|
|
iTitle.attr("value", getImageTitle(result));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
imgContainer.append(iUrl);
|
|
|
|
|
imgContainer.append(iContent);
|
|
|
|
|
imgContainer.append(iHeight);
|
|
|
|
|
imgContainer.append(iWidth);
|
|
|
|
|
imgContainer.append(iThumbnailUrl);
|
|
|
|
|
imgContainer.append(iTitle);
|
|
|
|
|
|
|
|
|
|
// Add the image to the page
|
|
|
|
|
imgContainer.appendTo(contentDiv);
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
// Now add links to additional pages of search results.
|
|
|
|
|
addPaginationLinks(totalResults);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function addPaginationLinks(totalResults) {
|
|
|
|
|
var curPage = currentIndex;
|
|
|
|
|
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>");
|
|
|
|
|
|
|
|
|
|
var highestPageNumber = maxPages;
|
|
|
|
|
if (totalResults/limit < maxPages)
|
|
|
|
|
highestPageNumber = totalResults/limit;
|
|
|
|
|
|
|
|
|
|
for (var i = 0; i < highestPageNumber; i++) {
|
|
|
|
|
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv);
|
|
|
|
|
if (curPage == i)
|
|
|
|
|
link.addClass('active');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$("#disc_nav_cont #resultFooter").remove();
|
|
|
|
|
pagesDiv.insertBefore($('#disclaimer'));
|
|
|
|
|
|
|
|
|
|
$(".imgContainer").each(function(){
|
|
|
|
|
this.addEventListener("dragstart", imageDragging, false);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$(".imgContainer").each(function(){
|
|
|
|
|
this.addEventListener("dragenter", imageDragenter, false);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$(".imgContainer").each(function(){
|
|
|
|
|
this.addEventListener("dragleave", imageDragleave, false);
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$(".imgContainer").each(function(){
|
|
|
|
|
this.addEventListener("dragover", imageDragover, false);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function searchFail(jqXHR, textStatus, errorThrown) {
|
|
|
|
|
alert('Couldn\'t connect to Pixabay: ' + textStatus + ' ' + errorThrown);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function imageDragging(e){
|
|
|
|
|
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function imageDragleave(e){
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function imageDragover(e){
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function imageDragenter(e){
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function gotoPage(i) {
|
|
|
|
|
runSearch(currentTerm, i);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function createMetaData(parent){
|
|
|
|
|
var meta = "";
|
|
|
|
|
//alert($(this).find("input:hidden").eq(0).val());
|
|
|
|
|
meta = "<metadata><data><key>Type</key><value>Image</value></data><data><key>Url</key><value>" +
|
|
|
|
|
parent.find("input:hidden").eq(0).val() +
|
|
|
|
|
"</value></data><data><key>Content</key><value>" +
|
|
|
|
|
parent.find("input:hidden").eq(1).val() +
|
|
|
|
|
"</value></data><data><key>Height</key><value>" +
|
|
|
|
|
parent.find("input:hidden").eq(2).val() +
|
|
|
|
|
"</value></data><data><key>Width</key><value>" +
|
|
|
|
|
parent.find("input:hidden").eq(3).val() +
|
|
|
|
|
"</value></data><data><key>thumbnailUrl</key><value>" +
|
|
|
|
|
parent.find("input:hidden").eq(4).val() +
|
|
|
|
|
"</value></data><data><key>Title</key><value>" +
|
|
|
|
|
parent.find("input:hidden").eq(5).val() +
|
|
|
|
|
"</value></data></metadata>";
|
|
|
|
|
return meta;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getImageTitle(image) {
|
|
|
|
|
// Pixabay images don't have a title, but we can fetch the first tag and use that as a title.
|
|
|
|
|
|
|
|
|
|
var firstTag = image.tags.split(",")[0]
|
|
|
|
|
//console.log(firstTag);
|
|
|
|
|
return firstTag;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getMediumResURL(image) {
|
|
|
|
|
// Pixabay automatically returns a 640px "webformat" picture; we can't request a larger one
|
|
|
|
|
// in the search request, but we can manually fetch one (up to 960px)
|
|
|
|
|
|
|
|
|
|
var url = image.webformatURL;
|
|
|
|
|
|
|
|
|
|
medResURL = url.replace("_640.", "_960.");
|
|
|
|
|
|
|
|
|
|
return medResURL;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</html>
|
