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.
279 lines
13 KiB
279 lines
13 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="http://www.google.com/uds"></script>
|
|
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
|
|
<script type="text/javascript">
|
|
// This code generates a "Raw Searcher" to handle search queries. The Raw Searcher requires
|
|
// you to handle and draw the search results manually.
|
|
google.load('search', '1');
|
|
|
|
var videoSearch;
|
|
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 = videoSearch.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];
|
|
if (curPage == i) {
|
|
|
|
// If we are on the current page, then don't make a link.
|
|
var label = document.createTextNode(' ' + page.label + ' ');
|
|
pagesDiv.append($(label));
|
|
} else {
|
|
|
|
// Create links to other pages using gotoPage() on the searcher.
|
|
var link = document.createElement('a');
|
|
link.href = 'javascript:videoSearch.gotoPage('+i+');';
|
|
link.innerHTML = page.label;
|
|
link.style.marginRight = '2px';
|
|
pagesDiv.append($(link));
|
|
}
|
|
}
|
|
|
|
pagesDiv.appendTo($('#searchResult'));
|
|
|
|
$(".videoContainer").each(function(){
|
|
this.addEventListener("dragstart", imageDragging, false);
|
|
})
|
|
|
|
$(".videoContainer").each(function(){
|
|
this.addEventListener("dragenter", imageDragenter, false);
|
|
})
|
|
|
|
$(".videoContainer").each(function(){
|
|
this.addEventListener("dragleave", imageDragleave, false);
|
|
})
|
|
|
|
$(".videoContainer").each(function(){
|
|
this.addEventListener("dragover", imageDragover, false);
|
|
})
|
|
}
|
|
|
|
function searchComplete() {
|
|
|
|
// Check that we got results
|
|
document.getElementById('searchResult').innerHTML = '';
|
|
if (videoSearch.results && videoSearch.results.length > 0) {
|
|
|
|
var contentDiv = $('#searchResult').empty();
|
|
var results = videoSearch.results;
|
|
for (var i = 0; i < results.length; i++) {
|
|
|
|
// Create HTML elements for search results
|
|
var result = results[i];
|
|
/*var str = videoSearch.results[i].playUrl.replace("&autoplay=1","").replace("&autoplay=true","");
|
|
alert(str)
|
|
a.src = str + "&autoPlay=false";
|
|
a.type = "application/x-shockwave-flash";*/
|
|
|
|
// Append search results to the HTML nodes
|
|
//p.appendChild(a);
|
|
//document.body.appendChild(p);
|
|
|
|
var videoContainer = $("<div class='videoContainer' draggable='true'>");
|
|
var title = document.createElement('div');
|
|
var vUrl = $("<input type='hidden'/>");
|
|
var vContent = $("<input type='hidden'/>");
|
|
var vHeight = $("<input type='hidden'/>");
|
|
var vWidth = $("<input type='hidden'/>");
|
|
var vTitle = $("<input type='hidden'/>");
|
|
var vAuthor = $("<input type='hidden'/>");
|
|
var vDuration = $("<input type='hidden'/>");
|
|
var vPublished = $("<input type='hidden'/>");
|
|
var vPublisher = $("<input type='hidden'/>");
|
|
var vRating = $("<input type='hidden'/>");
|
|
var vCount = $("<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;
|
|
//var str = videoSearch.results[i].playUrl.replace("&autoplay=1","").replace("&autoplay=true","");
|
|
vUrl.attr("value", result.url);
|
|
vContent.attr("value", result.content);
|
|
vHeight.attr("value", result.tbHeight);
|
|
vWidth.attr("value", result.tbWidth);
|
|
vTitle.attr("value",result.titleNoFormatting);
|
|
vAuthor.attr("value", result.author);
|
|
vDuration.attr("value", result.duration);
|
|
vPublished.attr("value", result.published);
|
|
vPublisher.attr("value", result.publisher);
|
|
vRating.attr("value",result.rating);
|
|
vCount.attr("value",result.viewCount);
|
|
//var imgWidth = (result.tbWidth > minWidht)?result.tbWidth:minWidht;
|
|
//var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight;
|
|
videoContainer.width(minWidht).height(minHeight);
|
|
videoContainer.append($(newImg));
|
|
videoContainer.append($(title));
|
|
videoContainer.append(vUrl);
|
|
videoContainer.append(vContent);
|
|
videoContainer.append(vHeight);
|
|
videoContainer.append(vWidth);
|
|
videoContainer.append(vTitle);
|
|
videoContainer.append(vAuthor);
|
|
videoContainer.append(vDuration);
|
|
videoContainer.append(vPublished);
|
|
videoContainer.append(vPublisher);
|
|
videoContainer.append(vRating);
|
|
videoContainer.append(vCount);
|
|
|
|
// Put our title + image in the content
|
|
videoContainer.appendTo(contentDiv);
|
|
}
|
|
|
|
addPaginationLinks(videoSearch);
|
|
}
|
|
}
|
|
|
|
function onLoad() {
|
|
// Create a VideoSearch instance.
|
|
videoSearch = new google.search.VideoSearch();
|
|
|
|
// Set searchComplete as the callback function when a search is complete. The
|
|
// videoSearch object will have results in it.
|
|
videoSearch.setSearchCompleteCallback(this, searchComplete, null);
|
|
|
|
videoSearch.setResultSetSize(8);
|
|
|
|
// Include the required Google branding
|
|
google.search.Search.getBranding('branding');
|
|
}
|
|
|
|
// Set a callback to call your code when the page loads
|
|
google.setOnLoadCallback(onLoad);
|
|
|
|
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 disclaimer = $("<div id='disclaimer' class='disclaimer'>Disclaimer<div>").appendTo("body");
|
|
var search = $("<div id='search' class='search'>").appendTo("body");
|
|
|
|
disclaimer.width($("body").width()-20);
|
|
search.width($("body").width()-20);
|
|
|
|
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search);
|
|
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages).css("margin-left",(togglePages.width()/2 - 7));
|
|
|
|
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);
|
|
|
|
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput);
|
|
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput);
|
|
|
|
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){
|
|
videoSearch.execute(searchInput.val());
|
|
togglePages.trigger("click");
|
|
}
|
|
});
|
|
|
|
searchInput.keydown(function(event){
|
|
if(!hide){
|
|
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
|
|
videoSearch.execute(searchInput.val());
|
|
togglePages.trigger("click");
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
$(".videoContainer").live("click",function(){
|
|
//alert(createMetaData($(this)));
|
|
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 createMetaData(parent){
|
|
var meta = "";
|
|
//alert($(this).find("input:hidden").eq(0).val());
|
|
meta = "<metadata><data><key>Type</key><value>Video</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>tbHeight</key><value>" +
|
|
parent.find("input:hidden").eq(2).val() +
|
|
"</value></data><data><key>tbWidth</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><data><key>Author</key><value>" +
|
|
parent.find("input:hidden").eq(5).val() +
|
|
"</value></data><data><key>Duration</key><value>" +
|
|
parent.find("input:hidden").eq(6).val() +
|
|
"</value></data><data><key>Published</key><value>" +
|
|
parent.find("input:hidden").eq(7).val() +
|
|
"</value></data><data><key>Publisher</key><value>" +
|
|
parent.find("input:hidden").eq(8).val() +
|
|
"</value></data><data><key>Rating</key><value>" +
|
|
parent.find("input:hidden").eq(9).val() +
|
|
"</value></data><data><key>View count</key><value>" +
|
|
parent.find("input:hidden").eq(10).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> |