<!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 > Planete Sankore 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" >
var category = "audio";
var thumbnails = false;
var minHeight = 177;
var minWidth = 150;
var currentIndex = 0;
var currentTerm = "";
var limit = 10;
var filtersDisplayed = false; //display or hide filters
function addPaginationLinks(totalResults) {
var curPage = currentIndex; // check what page the app is on
var pagesDiv = $("< div id = 'resultFooter' class = 'resultFooter' > ");
for (var i = 0; i < 8 ; i + + ) {
if (i * limit < totalResults ) {
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('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown);
}
function searchComplete(json) {
// Grab our content div, clear it.
var totalResults = json.totalResults;
var contentDiv = $('#searchResult').empty();
// Loop through our results, printing them to the page.
var results = json.rows;
for (var i = 0; i < results.length ; i + + ) {
// For each result write it's title and image to the screen
var result = results[i];
var imgContainer = $("< div class = 'imgContainer' draggable = 'true' > ");
var title = document.createElement('div');
var iUrl = $("< input type = 'hidden' / > ");
var iContent = $("< input type = 'hidden' / > ");
var iHeight = $("< input type = 'hidden' / > ");
var iWidth = $("< input type = 'hidden' / > ");
var iTitle = $("< input type = 'hidden' / > ");
// We use titleNoFormatting so that no HTML tags are left in the
// title
title.innerHTML = result.title;
var newImg = document.createElement('img');
// There is also a result.file property which has the escaped version
if (thumbnails) {
newImg.src = result.file;
} else {
newImg.src = "./images/thumbnail_icon.png";
}
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth;
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight;
imgContainer.width(imgWidth).height(imgHeight);
imgContainer.append($(newImg));
iUrl.attr("value", result.file);
iContent.attr("value", result.title);
iHeight.attr("value", result.height);
iWidth.attr("value", result.width);
iTitle.attr("value",result.title);
imgContainer.append($(title));
imgContainer.append(iUrl);
imgContainer.append(iContent);
imgContainer.append(iHeight);
imgContainer.append(iWidth);
imgContainer.append(iTitle);
// Put our title + image in the content
imgContainer.appendTo(contentDiv);
}
// Now add links to additional pages of search results.
addPaginationLinks(totalResults);
}
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;
}
$(document).ready(function(){
//variables
var mode = false; //search or view mode
var hide = false; //hide or no main panel
//basic containers and elements
var disc_nav_cont = $("< div id = 'disc_nav_cont' class = 'disc_nav_cont' > ").appendTo("body");
var disclaimer = $("< div id = 'disclaimer' class = 'disclaimer' > Recherche de documents audio sur Planète Sankoré< div > ").appendTo(disc_nav_cont);
var search = $("< div id = 'search' class = 'search' > ").appendTo("body");
var togglePages = $("< div id = 'togglePages' class = 'togglePages' > ").appendTo(search);
var toggleIcon = $("< div id = 'toggleIcon' class = 'toggleIcon' > ").appendTo(togglePages);
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);
//adding filters to the wgt
var selectFilter = $("< select id = 'sizeFilter' class = 'filterSelect' > ")
.append($("< option value = '0' > Any< / option > "))
.append($("< option value = '1' > Small< / option > "))
.append($("< option value = '2' > Medium< / option > "))
.append($("< option value = '3' > Large< / option > "))
.append($("< option value = '4' > Extra large< / option > "));
$("< div class = 'filterContainer' > ").append("< span > Size:< / span > ").append(selectFilter).appendTo(subSearchFilter);
//mouse click actions
/*
toggleFilters.click(function(){
if(filtersDisplayed){
subSearchFilter.hide();
toggleFilters.css("background-image","url(images/down.png)");
filtersDisplayed = false;
} else {
subSearchFilter.show();
toggleFilters.css("background-image","url(images/up.png)");
filtersDisplayed = true;
}
});
*/
/*togglePages.click(function(event){
if(mode){
hide = false;
$("#search, #disclaimer").slideDown('slow', function(){
toggleIcon.css("background-image","url(images/trgUp.png)");
togglePages.appendTo("#search").css("top","").css("bottom","-14px");
});
mode = false;
} else {
hide = true;
$("#search, #disclaimer").slideUp('slow', function(){
toggleIcon.css("background-image","url(images/trgDown.png)");
togglePages.appendTo("body").css("top","0");
});
mode = true;
}
});*/
searchButton.click(function(){
if(!hide){
runSearch(searchInput.val(), 0);
//togglePages.trigger("click");
}
});
searchInput.keydown(function(event){
if(!hide){
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
runSearch(searchInput.val(), 0);
//togglePages.trigger("click");
}
}
});
(
$(".imgContainer").live("click",function(){
sankore.sendFileMetadata(createMetaData($(this)));
}));
/*$(window).resize(function(){
disclaimer.width($("body").width()-20);
search.width($("body").width()-20);
toggleIcon.css("margin-left",(togglePages.width()/2 - 7));
})*/
});
function gotoPage(i) {
runSearch(currentTerm, i);
}
// launching the search on planete sankore
function runSearch(term, index) {
currentTerm = term;
currentIndex = index;
var start = index * limit;
var url = "http://planete.sankore.org/xwiki/bin/view/Search/Resources?xpage=plain& category=" + category + "& level=& sort=title& dir=ASC& terms=" + escape(term) + "& start=" + start + "& limit=" + limit;
$.ajax({
url: url,
success: searchComplete,
error: searchFail,
dataType: "json"
});
}
function createMetaData(parent){
var meta = "";
//alert($(this).find("input:hidden").eq(0).val());
meta = "< metadata > < data > < key > Type< / key > < value > Audio< / 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 > n/a< / value > < / data > "+
"< data > < key > Width< / key > < value > n/a< / value > < / data > < data > < key > Title< / key > < value > " +
parent.find("input:hidden").eq(4).val() +
"< / value > < / data > < / metadata > ";
return meta;
}
< / script >
< / head >
< body style = "font-family: Arial;border: 0 none;" >
< div id = "searchResult" > < / div >
< / body >
< / html >
