@ -0,0 +1,16 @@ |
|||||||
|
<?xml version="1.0" encoding="UTF-8"?> |
||||||
|
<widget xmlns="http://www.w3.org/ns/widgets" |
||||||
|
xmlns:ub="http://uniboard.mnemis.com/widgets" |
||||||
|
id="http://uniboard.mnemis.com/widgets/webbrowser" |
||||||
|
version="1.1" |
||||||
|
width="900" |
||||||
|
height="500" |
||||||
|
ub:resizable="true"> |
||||||
|
|
||||||
|
<name>Choisir</name> |
||||||
|
<author href="http://www.getuniboard.com" |
||||||
|
email="info@mnemis.com">Mnemis SA</author> |
||||||
|
<description>Choisir widget</description> |
||||||
|
|
||||||
|
<content src="index.html"/> |
||||||
|
</widget> |
@ -0,0 +1,148 @@ |
|||||||
|
body{ |
||||||
|
width: 100%; |
||||||
|
padding: 0; |
||||||
|
height: auto; |
||||||
|
background-color: white; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.disclaimer{ |
||||||
|
width: 90%; |
||||||
|
height: 50px; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
margin-left: 1px; |
||||||
|
margin-right: 1px; |
||||||
|
margin-bottom: 0px; |
||||||
|
padding: 5px; |
||||||
|
text-align: center; |
||||||
|
background-color: #BBBBBB; |
||||||
|
-webkit-border-top-left-radius: 15px; |
||||||
|
-webkit-border-top-right-radius: 15px; |
||||||
|
border-top-left-radius: 15px; |
||||||
|
border-top-right-radius: 15px; |
||||||
|
border: solid 4px #EEEEEE; |
||||||
|
border-bottom: none; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
|
||||||
|
.search{ |
||||||
|
width: 90%; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
margin-left: 1px; |
||||||
|
margin-right: 1px; |
||||||
|
margin-top: 0px; |
||||||
|
padding: 5px; |
||||||
|
background-color: #BBBBBB; |
||||||
|
-webkit-border-bottom-left-radius: 15px; |
||||||
|
-webkit-border-bottom-right-radius: 15px; |
||||||
|
border-bottom-left-radius: 15px; |
||||||
|
border-bottom-right-radius: 15px; |
||||||
|
border: solid 4px #EEEEEE; |
||||||
|
border-top: none; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
|
||||||
|
.togglePages{ |
||||||
|
padding: 0; |
||||||
|
position: absolute; |
||||||
|
bottom: -14px; |
||||||
|
left: 43%; |
||||||
|
width: 15%; |
||||||
|
height: 10px; |
||||||
|
background-color: #666; |
||||||
|
-webkit-border-bottom-left-radius: 5px; |
||||||
|
-webkit-border-bottom-right-radius: 5px; |
||||||
|
border-bottom-left-radius: 5px; |
||||||
|
border-bottom-right-radius: 5px; |
||||||
|
-webkit-box-shadow: #dadada -1px 0 4px; |
||||||
|
box-shadow: #dadada -1px 0 4px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.toggleIcon{ |
||||||
|
width: 14px; |
||||||
|
height: 10px; |
||||||
|
background-image: url(../images/trgUp.png); |
||||||
|
} |
||||||
|
|
||||||
|
.searchInput{ |
||||||
|
margin: 10px 5px 10px 5px; |
||||||
|
padding: 2px; |
||||||
|
padding-left: 8px; |
||||||
|
padding-right:8px; |
||||||
|
float: left; |
||||||
|
width: 60%; |
||||||
|
border-radius: 15px; |
||||||
|
border-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.searchButton{ |
||||||
|
width: 32px; |
||||||
|
height: 32px; |
||||||
|
margin: 5px 5px; |
||||||
|
background-image: url(../images/search.png); |
||||||
|
float: left; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.subSearch{ |
||||||
|
margin: 0; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
|
||||||
|
#subSearchInput{ |
||||||
|
width: 100%; |
||||||
|
float: left; |
||||||
|
} |
||||||
|
|
||||||
|
.searchResult{ |
||||||
|
width: 98%; |
||||||
|
padding: 3px; |
||||||
|
background-color:#123456; |
||||||
|
} |
||||||
|
|
||||||
|
.videoContainer{ |
||||||
|
float: left; |
||||||
|
padding: 3px; |
||||||
|
margin: 3px; |
||||||
|
text-align: center; |
||||||
|
overflow: hidden; |
||||||
|
font-size: small; |
||||||
|
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
|
border: 1px solid #666; |
||||||
|
border-radius: 5px; |
||||||
|
-webkit-box-shadow: #dadada -1px 0 4px; |
||||||
|
-webkit-border-radius: 5px; |
||||||
|
box-shadow: #666 -1px 0 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.resultFooter{ |
||||||
|
float: left; |
||||||
|
margin: 5px; |
||||||
|
padding: 3px; |
||||||
|
width: 100%; |
||||||
|
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
|
font-weight: bold; |
||||||
|
font-size: x-large; |
||||||
|
} |
||||||
|
|
||||||
|
#branding{ |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 10px; |
||||||
|
z-index: 2; |
||||||
|
} |
||||||
|
|
||||||
|
span{ |
||||||
|
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
[draggable] { |
||||||
|
-webkit-user-select: none; |
||||||
|
user-select: none; |
||||||
|
} |
After Width: | Height: | Size: 10 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 214 B |
After Width: | Height: | Size: 1.5 KiB |
After Width: | Height: | Size: 931 B |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 475 B |
After Width: | Height: | Size: 448 B |
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,279 @@ |
|||||||
|
<!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> |