<!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>