You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
468 lines
26 KiB
468 lines
26 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<title>Google Image Search</title>
|
|
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
|
|
<script type="text/javascript" src="locales/locales.js"></script>
|
|
<script type="text/javascript" src="http://www.google.com/uds"></script>
|
|
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
|
|
<script type="text/javascript" src="select/jquery.selectBox.min.js"></script>
|
|
<link type="text/css" rel="stylesheet" href="select/jquery.selectBox.css" />
|
|
<script type="text/javascript">
|
|
//begin google API
|
|
google.load("search","1");
|
|
|
|
var imageSearch;
|
|
var minHeight = 180;
|
|
var minWidht = 150;
|
|
var filtersDisplayed = false; //display or hide filters
|
|
|
|
function addPaginationLinks() {
|
|
|
|
// To paginate search results, use the cursor function.
|
|
var cursor = imageSearch.cursor;
|
|
var curPage = cursor.currentPageIndex; // check what page the app is on
|
|
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>");
|
|
for (var i = 0; i < cursor.pages.length; i++) {
|
|
var page = cursor.pages[i];
|
|
|
|
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:imageSearch.gotoPage('+i+');').html(page.label).appendTo(pagesDiv);
|
|
if (curPage == i) {
|
|
link.addClass('active');
|
|
}
|
|
}
|
|
|
|
pagesDiv.appendTo($('#searchResult'));
|
|
|
|
$(".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 searchComplete() {
|
|
// Check that we got results
|
|
if (imageSearch.results && imageSearch.results.length > 0) {
|
|
|
|
// Grab our content div, clear it.
|
|
var contentDiv = $('#searchResult').empty();
|
|
|
|
// Loop through our results, printing them to the page.
|
|
var results = imageSearch.results;
|
|
console.log(results);
|
|
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.url property which has the escaped version
|
|
newImg.src = result.tbUrl;
|
|
iUrl.attr("value", result.url);
|
|
iContent.attr("value", result.contentNoFormatting);
|
|
iHeight.attr("value", result.height);
|
|
iWidth.attr("value", result.width);
|
|
iTitle.attr("value",result.titleNoFormatting);
|
|
var imgWidth = (result.tbWidth > minWidht)?result.tbWidth:minWidht;
|
|
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight;
|
|
imgContainer.width(imgWidth).height(imgHeight);
|
|
imgContainer.append($(newImg));
|
|
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(imageSearch);
|
|
}
|
|
setTimeout(function(){
|
|
$(window).trigger('resize');
|
|
}, 1000);
|
|
|
|
}
|
|
|
|
function OnLoad() {
|
|
|
|
// Create an Image Search instance.
|
|
imageSearch = new google.search.ImageSearch();
|
|
|
|
// Set searchComplete as the callback function when a search is
|
|
// complete. The imageSearch object will have results in it.
|
|
imageSearch.setSearchCompleteCallback(this, searchComplete, null);
|
|
|
|
imageSearch.setResultSetSize(8);
|
|
//imageSearch.setQueryAddition("Subaru STI");
|
|
// Find me a beautiful car.
|
|
//imageSearch.execute("Sankore");
|
|
|
|
// Include the required Google branding
|
|
google.search.Search.getBranding('branding');
|
|
}
|
|
google.setOnLoadCallback(OnLoad);
|
|
//end of Google API
|
|
|
|
//No google API below
|
|
|
|
function imageDragging(e){
|
|
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val());
|
|
//alert($(this).find("input:hidden").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 lang = window.sankore ? sankore.locale().substr(0,2) : "en"; //locale language
|
|
|
|
//localization
|
|
locale = locales[lang];
|
|
|
|
var disclaimer = $("<div id='disclaimer' class='disclaimer'>"+locale.disclaimer_title+"<div>").appendTo("body");
|
|
|
|
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'>"+locale.def_opts_val+"</option>"))
|
|
.append($("<option value='1'>"+locale.size_small+"</option>"))
|
|
.append($("<option value='2'>"+locale.size_medium+"</option>"))
|
|
.append($("<option value='3'>"+locale.size_large+"</option>"))
|
|
.append($("<option value='4'>"+locale.size_extra_large+"</option>"));
|
|
$("<div class='filterContainer'>").append("<span>"+locale.size_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter);
|
|
|
|
selectFilter = $("<select id='fileTypeFilter' class='filterSelect'>")
|
|
.append($("<option value='0'>"+locale.def_opts_val+"</option>"))
|
|
.append($("<option value='1'>*.JPG</option>"))
|
|
.append($("<option value='2'>*.PNG</option>"))
|
|
.append($("<option value='3'>*.GIF</option>"))
|
|
.append($("<option value='4'>*.BMP</option>"));
|
|
$("<div class='filterContainer'>").append("<span>"+locale.file_type_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter);
|
|
|
|
selectFilter = $("<select id='typeFilter' class='filterSelect'>")
|
|
.append($("<option value='0'>"+locale.def_opts_val+"</option>"))
|
|
.append($("<option value='1'>"+locale.image_type_faces+"</option>"))
|
|
.append($("<option value='2'>"+locale.image_type_photo+"</option>"))
|
|
.append($("<option value='3'>"+locale.image_type_clipart+"</option>"))
|
|
.append($("<option value='4'>"+locale.image_type_lineart+"</option>"));
|
|
$("<div class='filterContainer'>").append("<span>"+locale.image_type_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter);
|
|
|
|
selectFilter = $("<select id='rightsFilter' class='filterSelect'>")
|
|
.append($("<option value='0'>"+locale.def_opts_val+"</option>"))
|
|
.append($("<option value='1'>"+locale.image_license_reuse+"</option>"))
|
|
.append($("<option value='2'>"+locale.image_license_comm_reuse+"</option>"))
|
|
.append($("<option value='3'>"+locale.image_license_modif+"</option>"))
|
|
.append($("<option value='4'>"+locale.image_license_comm_modif+"</option>"));
|
|
$("<div class='filterContainer'>").append("<span>"+locale.image_type_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter);
|
|
|
|
var colors_line = $('<div class="colors_line"></div>');
|
|
subSearchFilter.append(colors_line);
|
|
colors_line.html('<input type="radio" value="allcolor" id="color_shem_allcolor" class="custom" name="color" checked="true">\
|
|
<label id="allcolor" class="filter_button button color active" for="color_shem_allcolor"></label>\
|
|
<input type="radio" value="color" id="color_shem_color" class="custom" name="color">\
|
|
<label id="colored" class="filter_button button color" for="color_shem_color"></label>\
|
|
<input type="radio" value="grayscale" id="color_shem_gray" class="custom" name="color">\
|
|
<label id="grayed" class="filter_button button color" for="color_shem_gray"></label>\
|
|
<label style="border-right: 1px solid #fff; margin-right:7px; margin-left:7px; height: 15px; display: inline-block;"></label>\
|
|
<input type="radio" value="red" id="design9" class="custom" name="color">\
|
|
<label id="red" class="filter_button button color" for="design9"></label>\
|
|
<input type="radio" value="orange" id="design6" class="custom" name="color">\
|
|
<label id="orange" class="filter_button button color" for="design6"></label>\
|
|
<input type="radio" value="yellow" id="design12" class="custom" name="color">\
|
|
<label id="yellow" class="filter_button button color" for="design12"></label>\
|
|
<input type="radio" value="green" id="design5" class="custom" name="color">\
|
|
<label id="green" class="filter_button button color" for="design5"></label>\
|
|
<input type="radio" value="teal" id="design10" class="custom" name="color">\
|
|
<label id="teal" class="filter_button button color" for="design10"></label>\
|
|
<input type="radio" value="blue" id="design2" class="custom" name="color">\
|
|
<label id="blue" class="filter_button button color" for="design2"></label>\
|
|
<input type="radio" value="purple" id="design8" class="custom" name="color">\
|
|
<label id="purple" class="filter_button button color" for="design8"></label>\
|
|
<input type="radio" value="pink" id="design7" class="custom" name="color">\
|
|
<label id="pink" class="filter_button button color" for="design7"></label>\
|
|
<input type="radio" value="white" id="design11" class="custom" name="color">\
|
|
<label id="white" class="filter_button button color" for="design11"></label>\
|
|
<input type="radio" value="gray" id="design4" class="custom" name="color">\
|
|
<label id="gray" class="filter_button button color" for="design4"></label>\
|
|
<input type="radio" value="black" id="design1" class="custom" name="color">\
|
|
<label id="black" class="filter_button button color" for="design1"></label>\
|
|
<input type="radio" value="brown" id="design3" class="custom" name="color">\
|
|
<label id="brown" class="filter_button button color" for="design3"></label>');
|
|
|
|
//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('fast', 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('fast', function(){
|
|
toggleIcon.css("background-image","url(images/trgDown.png)");
|
|
togglePages.appendTo("body").css("top","0");
|
|
});
|
|
mode = true;
|
|
}
|
|
});
|
|
|
|
searchButton.click(function(){
|
|
if(!hide){
|
|
checkFilters(imageSearch).execute(searchInput.val());
|
|
togglePages.trigger("click");
|
|
}
|
|
});
|
|
|
|
searchInput.keydown(function(event){
|
|
if(!hide){
|
|
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
|
|
checkFilters(imageSearch).execute(searchInput.val());
|
|
togglePages.trigger("click");
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
$('.filterSelect, .colors_line input[name=color]').change(function(){
|
|
checkFilters(imageSearch).execute(searchInput.val());
|
|
});
|
|
|
|
$(".imgContainer").live("click",function(){
|
|
sankore.sendFileMetadata(createMetaData($(this)));
|
|
});
|
|
|
|
//checking filters
|
|
function checkFilters(imgSearch){
|
|
var value = $("#sizeFilter option:selected").val();
|
|
switch(value){
|
|
case "0":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,null);
|
|
break;
|
|
case "1":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_SMALL);
|
|
break;
|
|
case "2":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_MEDIUM);
|
|
break;
|
|
case "3":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_LARGE);
|
|
break;
|
|
case "4":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE);
|
|
break;
|
|
}
|
|
|
|
value = $(".colors_line input[name=color]:checked").val();
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,null);
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,null);
|
|
switch(value){
|
|
case "allcolor":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,null);
|
|
break;
|
|
case "grayscale":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,google.search.ImageSearch.COLORIZATION_GRAYSCALE);
|
|
break;
|
|
case "color":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,google.search.ImageSearch.COLORIZATION_COLOR);
|
|
break;
|
|
case "black":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BLACK);
|
|
break;
|
|
case "blue":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BLUE);
|
|
break;
|
|
case "brown":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BROWN);
|
|
break;
|
|
case "gray":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_GRAY);
|
|
break;
|
|
case "green":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_GREEN);
|
|
break;
|
|
case "orange":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_ORANGE);
|
|
break;
|
|
case "pink":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_PINK);
|
|
break;
|
|
case "purple":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_PURPLE);
|
|
break;
|
|
case "red":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_RED);
|
|
break;
|
|
case "teal":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_TEAL);
|
|
break;
|
|
case "white":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_WHITE);
|
|
break;
|
|
case "yellow":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_YELLOW);
|
|
break;
|
|
}
|
|
|
|
value = $("#fileTypeFilter option:selected").val();
|
|
switch(value){
|
|
case "0":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,null);
|
|
break;
|
|
case "1":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_JPG);
|
|
break;
|
|
case "2":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_PNG);
|
|
break;
|
|
case "3":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_GIF);
|
|
break;
|
|
case "4":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_BMP);
|
|
break;
|
|
}
|
|
|
|
value = $("#typeFilter option:selected").val();
|
|
switch(value){
|
|
case "0":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,null);
|
|
break;
|
|
case "1":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_FACES);
|
|
break;
|
|
case "2":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_PHOTO);
|
|
break;
|
|
case "3":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_CLIPART);
|
|
break;
|
|
case "4":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_LINEART);
|
|
break;
|
|
}
|
|
|
|
value = $("#rightsFilter option:selected").val();
|
|
switch(value){
|
|
case "0":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,null);
|
|
break;
|
|
case "1":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_REUSE);
|
|
break;
|
|
case "2":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_COMERCIAL_REUSE);
|
|
break;
|
|
case "3":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_MODIFICATION);
|
|
break;
|
|
case "4":
|
|
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_COMMERCIAL_MODIFICATION);
|
|
break;
|
|
}
|
|
return imgSearch;
|
|
}
|
|
|
|
$(window).resize(function(){
|
|
var width = "200px";
|
|
if ($('#search').width() < 230) {
|
|
width = $("#search").width()-40;
|
|
} else {
|
|
width = "200px";
|
|
}
|
|
$('select').selectBox('destroy').css('width', width).selectBox();
|
|
});
|
|
|
|
$(window).trigger("resize");
|
|
|
|
});
|
|
|
|
function createMetaData(parent){
|
|
var meta = "";
|
|
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>thumbnailUrl</key><value>" +
|
|
parent.find("img").attr("src") +
|
|
"</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>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="branding" style="float: left;"></div><br />
|
|
<div id="searchResult"></div>
|
|
</body>
|
|
</html> |