fossfreedom
217 linhas
8.4 KiB
HTML
217 linhas
8.4 KiB
HTML
## -*- coding: utf-8 -*-
|
|
|
|
<%page args="artist, album, stylesheet, selection_color" />
|
|
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
|
|
<link rel="stylesheet" href="${stylesheet}" type="text/css" />
|
|
<script src="http://www.google.com/jsapi"></script>
|
|
<script type="text/javascript">
|
|
var artist = "${artist}";
|
|
var album = "${album}";
|
|
var query = "${artist} ${album}";
|
|
var imageSearch;
|
|
var currentPage = 0;
|
|
var clear = true;
|
|
var selected;
|
|
|
|
google.load('search', '1');
|
|
|
|
function searchComplete(searcher) {
|
|
var moreLink = document.getElementById('more');
|
|
|
|
if (clear == true) {
|
|
// Grab our content div, clear it.
|
|
var contentDiv = document.getElementById('content');
|
|
contentDiv.innerHTML = '';
|
|
|
|
// reset the page counter
|
|
currentPage = 0
|
|
|
|
// create the image container
|
|
var imgContainer = document.createElement('div');
|
|
imgContainer.setAttribute("id", "imgcontainer");
|
|
contentDiv.appendChild(imgContainer);
|
|
|
|
//show the more link
|
|
moreLink.style.display="block";
|
|
}
|
|
|
|
// add the results to the content div
|
|
var imgContainer = document.getElementById('imgcontainer');
|
|
|
|
// Check that we got results
|
|
if (searcher.results && searcher.results.length > 0) {
|
|
// Loop through our results, printing them to the page.
|
|
var results = searcher.results;
|
|
|
|
for (var i = 0; i < results.length; i++) {
|
|
// For each result write its image to the screen
|
|
var result = results[i];
|
|
|
|
var newImg = document.createElement('img');
|
|
newImg.ondblclick = setCover;
|
|
newImg.onclick = highlight;
|
|
newImg.src = result.tbUrl;
|
|
newImg.id = result.unescapedUrl;
|
|
newImg.setAttribute("class", "srchresult");
|
|
imgContainer.appendChild(newImg);
|
|
}
|
|
|
|
}
|
|
|
|
if (!searcher.results || searcher.results.length < 8) {
|
|
// no more results, hide the link
|
|
moreLink.style.display="none";
|
|
}
|
|
}
|
|
|
|
function moreResults() {
|
|
currentPage++;
|
|
|
|
if (currentPage == 7) {
|
|
// eight is the max amount of pages we can get
|
|
// so, no more pages, hide the link
|
|
var moreLink = document.getElementById('more');
|
|
moreLink.style.display="none";
|
|
}
|
|
|
|
clear = false;
|
|
imageSearch.gotoPage(currentPage)
|
|
}
|
|
|
|
function setCover(event) {
|
|
document.title = this.id
|
|
}
|
|
|
|
function highlight(event) {
|
|
if ( selected !== undefined ) {
|
|
selected.style.border = "hidden"
|
|
selected.style.margin = "5px"
|
|
}
|
|
|
|
selected = this
|
|
selected.style.border = "solid 3px ${selection_color}"
|
|
selected.style.margin = "2px"
|
|
}
|
|
|
|
function onSearchText() {
|
|
var txt = document.getElementById('searchtext').value;
|
|
clear = true;
|
|
imageSearch.execute(txt);
|
|
}
|
|
|
|
function onOptionChange(selObj) {
|
|
var idx = selObj.selectedIndex;
|
|
var which = selObj.options[idx].value;
|
|
|
|
if (selObj.id == "searchmode") {
|
|
if (which == "artist") { query = artist; }
|
|
else if (which == "album") { query = album; }
|
|
else if (which == "both") { query = artist + " " + album; }
|
|
|
|
} else if (selObj.id == "imagesize") {
|
|
var image_size = google.search.ImageSearch.IMAGESIZE_SMALL;
|
|
|
|
if (which == "medium") {
|
|
image_size =
|
|
google.search.ImageSearch.IMAGESIZE_MEDIUM;
|
|
|
|
} else if (which == "large") {
|
|
image_size = google.search.ImageSearch.IMAGESIZE_LARGE;
|
|
|
|
} else if (which == "x-large") {
|
|
image_size =
|
|
google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE;
|
|
}
|
|
|
|
imageSearch.setRestriction(
|
|
google.search.ImageSearch.RESTRICT_IMAGESIZE,
|
|
image_size);
|
|
}
|
|
|
|
clear = true;
|
|
imageSearch.execute(query);
|
|
}
|
|
|
|
function toggleSelectOption(linkObj) {
|
|
var searchdiv = document.getElementById('searchoption');
|
|
|
|
searchstr="${_('Search Options')}";
|
|
if (searchdiv.style.display=="none") {
|
|
searchdiv.style.display="block";
|
|
linkObj.innerText=searchstr+" : [-]";
|
|
|
|
} else {
|
|
searchdiv.style.display="none";
|
|
linkObj.innerText=searchstr+" : [+]";
|
|
}
|
|
}
|
|
|
|
function OnLoad() {
|
|
// Our ImageSearch instance.
|
|
imageSearch = new google.search.ImageSearch();
|
|
|
|
imageSearch.setResultSetSize(
|
|
google.search.Search.LARGE_RESULTSET);
|
|
|
|
//imageSearch.setRestriction(
|
|
// google.search.ImageSearch.RESTRICT_FILETYPE,
|
|
// google.search.ImageSearch.FILETYPE_JPG);
|
|
imageSearch.setRestriction(
|
|
google.search.ImageSearch.RESTRICT_IMAGESIZE,
|
|
google.search.ImageSearch.IMAGESIZE_LARGE);
|
|
|
|
// Here we set a callback so that anytime a search is executed,
|
|
// it will call the searchComplete function and pass it our
|
|
//ImageSearch searcher.
|
|
// When a search completes, our ImageSearch object is
|
|
//automatically populated with the results.
|
|
imageSearch.setSearchCompleteCallback(this, searchComplete,
|
|
[imageSearch]);
|
|
|
|
// Find me the artist and album image
|
|
imageSearch.execute(query);
|
|
|
|
google.search.Search.getBranding('branding');
|
|
|
|
}
|
|
|
|
google.setOnLoadCallback(OnLoad);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="searchoptioncontainer">
|
|
<a href="#" onclick="toggleSelectOption(this); return false;">
|
|
${_("Search Options")} : [+]</a> ${_("Tip: doubleclick or drag a cover to use it as the album cover")}
|
|
<div id="searchoption" style="display:none;">
|
|
<label>${_("Search Mode")} : </label>
|
|
<select id="searchmode" onchange="onOptionChange(this);">
|
|
<option value="artist">${_("Artist")}</option>
|
|
<option value="album">${_("Album")}</option>
|
|
<option value="both" selected>${_("Artist and album")}</option>
|
|
</select>
|
|
<hr/>
|
|
<label>${_("Search text")} : </label>
|
|
<input type="text" id="searchtext" width="75%"/>
|
|
<button type="button" id="searchbutton"
|
|
onclick="onSearchText();">${_("Search")}</button>
|
|
<hr/>
|
|
<label>${_("Image Size")} : </label>
|
|
<select id="imagesize" onchange="onOptionChange(this);">
|
|
<option value="small">${_("Small")}</option>
|
|
<option value="medium">${_("Medium")}</option>
|
|
<option value="large" selected>${_("Large")}</option>
|
|
<option value="x-large">${_("Extra Large")}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
<div id="content">${_("Loading...")}</div>
|
|
<a id="more" href="#" style="float: left;"
|
|
onclick="moreResults(); return false;">${_("Show more results")}</a>
|
|
<div id="branding" style="float: right;"></div>
|
|
</body>
|
|
</html>
|