@ -1,315 +1,315 @@ |
|||||||
html, body{ |
html, body{ |
||||||
width: 100%; |
width: 100%; |
||||||
padding: 0; |
padding: 0; |
||||||
height: auto; |
height: auto; |
||||||
background-color: white; |
background-color: white; |
||||||
margin: 0; |
margin: 0; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar { |
::-webkit-scrollbar { |
||||||
width: 14px; |
width: 14px; |
||||||
background-color:white; |
background-color:white; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb { |
::-webkit-scrollbar-thumb { |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:start{ |
::-webkit-scrollbar-button:vertical:start{ |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
background-image: url(../images/trgUp.png); |
background-image: url(../images/trgUp.png); |
||||||
background-size: 8px auto; |
background-size: 8px auto; |
||||||
background-position: center; |
background-position: center; |
||||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:end{ |
::-webkit-scrollbar-button:vertical:end{ |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
background-image: url(../images/trgDown.png); |
background-image: url(../images/trgDown.png); |
||||||
background-size: 8px auto; |
background-size: 8px auto; |
||||||
background-position: center; |
background-position: center; |
||||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
a { |
a { |
||||||
text-decoration: underline; |
text-decoration: underline; |
||||||
} |
} |
||||||
|
|
||||||
#disc_nav_cont{ |
#disc_nav_cont{ |
||||||
height: auto; |
height: auto; |
||||||
position: fixed; |
position: fixed; |
||||||
left: 0; |
left: 0; |
||||||
bottom: 0; |
bottom: 0; |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
|
|
||||||
.disclaimer{ |
.disclaimer{ |
||||||
padding: 5px; |
padding: 5px; |
||||||
text-align: center; |
text-align: center; |
||||||
background-color: #BBBBBB; |
background-color: #BBBBBB; |
||||||
border-top: solid 4px #EEEEEE; |
border-top: solid 4px #EEEEEE; |
||||||
border-bottom: none; |
border-bottom: none; |
||||||
font-size: 12px; |
font-size: 12px; |
||||||
} |
} |
||||||
|
|
||||||
.resultFooter{ |
.resultFooter{ |
||||||
width: 100%; |
width: 100%; |
||||||
padding: 3px; |
padding: 3px; |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
font-size: x-large; |
font-size: x-large; |
||||||
text-align: center; |
text-align: center; |
||||||
background-color: white; |
background-color: white; |
||||||
} |
} |
||||||
|
|
||||||
#searchResult { |
#searchResult { |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
text-align: center; |
text-align: center; |
||||||
margin-top: 50px; |
margin-top: 50px; |
||||||
margin-bottom: 50px; |
margin-bottom: 85px; |
||||||
} |
} |
||||||
|
|
||||||
.search{ |
.search{ |
||||||
position: fixed; |
position: fixed; |
||||||
top: 0; |
top: 0; |
||||||
left: 0; |
left: 0; |
||||||
padding: 5px; |
padding: 5px; |
||||||
background-color: #BBBBBB; |
background-color: #BBBBBB; |
||||||
border-bottom: solid 4px #EEEEEE; |
border-bottom: solid 4px #EEEEEE; |
||||||
} |
} |
||||||
|
|
||||||
.search, |
.search, |
||||||
.disclaimer { |
.disclaimer { |
||||||
width: 100%; |
width: 100%; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.searchInput{ |
.searchInput{ |
||||||
padding: 3px; |
padding: 3px; |
||||||
float: left; |
float: left; |
||||||
width: 100%; |
width: 100%; |
||||||
border-radius: 3px; |
border-radius: 3px; |
||||||
border-style: none; |
border-style: none; |
||||||
height: 22px; |
height: 22px; |
||||||
line-height: 18px; |
line-height: 18px; |
||||||
vertical-align: middle; |
vertical-align: middle; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.searchButton{ |
.searchButton{ |
||||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
background: url("../images/search_app.png") -38px -38px no-repeat; |
||||||
width: 24px; |
width: 24px; |
||||||
height: 24px; |
height: 24px; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
position: absolute; |
position: absolute; |
||||||
right: 30px; |
right: 30px; |
||||||
top: 9px; |
top: 9px; |
||||||
margin-left: -2px; |
margin-left: -2px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
.subSearch{ |
.subSearch{ |
||||||
margin: 0; |
margin: 0; |
||||||
float: left; |
float: left; |
||||||
} |
} |
||||||
|
|
||||||
#subSearchInput{ |
#subSearchInput{ |
||||||
width: 100%; |
width: 100%; |
||||||
float: left; |
float: left; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
padding: 5px; |
padding: 5px; |
||||||
padding-right: 26px; |
padding-right: 26px; |
||||||
} |
} |
||||||
|
|
||||||
#subSearchFilter{ |
#subSearchFilter{ |
||||||
width: 100%; |
width: 100%; |
||||||
float: left; |
float: left; |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.searchResult{ |
.searchResult{ |
||||||
width: 98%; |
width: 98%; |
||||||
padding: 3px; |
padding: 3px; |
||||||
background-color:#123456; |
background-color:#123456; |
||||||
} |
} |
||||||
|
|
||||||
.imgContainer{ |
.imgContainer{ |
||||||
display: inline-block; |
display: inline-block; |
||||||
padding: 3px; |
padding: 3px; |
||||||
margin: 3px; |
margin: 3px; |
||||||
text-align: center; |
text-align: center; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
font-size: small; |
font-size: small; |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
border: 1px solid #666; |
border: 1px solid #666; |
||||||
border-radius: 5px; |
border-radius: 5px; |
||||||
-webkit-box-shadow: #dadada -1px 0 4px; |
-webkit-box-shadow: #dadada -1px 0 4px; |
||||||
-webkit-border-radius: 5px; |
-webkit-border-radius: 5px; |
||||||
box-shadow: #666 -1px 0 4px; |
box-shadow: #666 -1px 0 4px; |
||||||
vertical-align: top; |
vertical-align: top; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
.filterContainer{ |
.filterContainer{ |
||||||
float: left; |
float: left; |
||||||
margin: 2px; |
margin: 2px; |
||||||
padding: 2px; |
padding: 2px; |
||||||
font-size: 14px; |
font-size: 14px; |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
.filterSelect{ |
.filterSelect{ |
||||||
border-style:none; |
border-style:none; |
||||||
-webkit-border-top-right-radius: 15px; |
-webkit-border-top-right-radius: 15px; |
||||||
-webkit-border-bottom-right-radius: 15px; |
-webkit-border-bottom-right-radius: 15px; |
||||||
-moz-border-radius-topright: 15px; |
-moz-border-radius-topright: 15px; |
||||||
-moz-border-radius-bottomright: 15px; |
-moz-border-radius-bottomright: 15px; |
||||||
border-top-right-radius: 15px; |
border-top-right-radius: 15px; |
||||||
margin-top: 2px; |
margin-top: 2px; |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
|
|
||||||
span{ |
span{ |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
color: #666; |
color: #666; |
||||||
} |
} |
||||||
|
|
||||||
[draggable] { |
[draggable] { |
||||||
-webkit-user-select: none; |
-webkit-user-select: none; |
||||||
user-select: none; |
user-select: none; |
||||||
} |
} |
||||||
|
|
||||||
.toggleFilters{ |
.toggleFilters{ |
||||||
margin: 0; |
margin: 0; |
||||||
padding: 0; |
padding: 0; |
||||||
background-position: center; |
background-position: center; |
||||||
background-image: url(../images/down.png); |
background-image: url(../images/down.png); |
||||||
position: absolute; |
position: absolute; |
||||||
top: 11px; |
top: 11px; |
||||||
right: 6px; |
right: 6px; |
||||||
width: 20px; |
width: 20px; |
||||||
height: 20px; |
height: 20px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
.colors_line { |
.colors_line { |
||||||
float: left; |
float: left; |
||||||
margin: 4px; |
margin: 4px; |
||||||
margin-right: 0; |
margin-right: 0; |
||||||
clear: left; |
clear: left; |
||||||
} |
} |
||||||
|
|
||||||
.custom { |
.custom { |
||||||
opacity: 0; |
opacity: 0; |
||||||
position: absolute; |
position: absolute; |
||||||
left: -10000px; |
left: -10000px; |
||||||
} |
} |
||||||
|
|
||||||
.filter_button.button.color { |
.filter_button.button.color { |
||||||
display: inline-block; |
display: inline-block; |
||||||
width: 15px; |
width: 15px; |
||||||
height: 15px; |
height: 15px; |
||||||
border: 1px solid #EBEBEB; |
border: 1px solid #EBEBEB; |
||||||
padding: 0; |
padding: 0; |
||||||
margin: 0; |
margin: 0; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.filter_button.button.color:hover { |
.filter_button.button.color:hover { |
||||||
border: 1px solid rgb(128,128,128); |
border: 1px solid rgb(128,128,128); |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
input[type="radio"]:checked + .filter_button.button.color { |
input[type="radio"]:checked + .filter_button.button.color { |
||||||
border: 1px solid rgb(255,255,255); |
border: 1px solid rgb(255,255,255); |
||||||
box-shadow: 0 0 0px 1px #000; |
box-shadow: 0 0 0px 1px #000; |
||||||
-webkit-box-shadow: 0 0 0px 1px #000; |
-webkit-box-shadow: 0 0 0px 1px #000; |
||||||
} |
} |
||||||
|
|
||||||
#allcolor { |
#allcolor { |
||||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
background: white url('../images/search_app.png') -43px -144px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#colored { |
#colored { |
||||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
background: white url('../images/search_app.png') -43px -244px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#grayed { |
#grayed { |
||||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
background: white url('../images/search_app.png') -45px -343px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#black{ |
#black{ |
||||||
background-color:#ffffff; |
background-color:#ffffff; |
||||||
} |
} |
||||||
#blue{ |
#blue{ |
||||||
background-color:#0000FF; |
background-color:#0000FF; |
||||||
} |
} |
||||||
#brown{ |
#brown{ |
||||||
background-color:rgba(139, 82, 16, 1); |
background-color:rgba(139, 82, 16, 1); |
||||||
} |
} |
||||||
|
|
||||||
#gray{ |
#gray{ |
||||||
background-color:#999999; |
background-color:#999999; |
||||||
} |
} |
||||||
|
|
||||||
#green{ |
#green{ |
||||||
background-color:#00CC00; |
background-color:#00CC00; |
||||||
} |
} |
||||||
|
|
||||||
#orange{ |
#orange{ |
||||||
background-color:#FB940B; |
background-color:#FB940B; |
||||||
} |
} |
||||||
|
|
||||||
#pink{ |
#pink{ |
||||||
background-color:#FF98BF; |
background-color:#FF98BF; |
||||||
} |
} |
||||||
|
|
||||||
#purple{ |
#purple{ |
||||||
background-color:#762CA7; |
background-color:#762CA7; |
||||||
} |
} |
||||||
|
|
||||||
#red{ |
#red{ |
||||||
background-color:#CC0000; |
background-color:#CC0000; |
||||||
} |
} |
||||||
|
|
||||||
#teal{ |
#teal{ |
||||||
background-color:#03C0C6; |
background-color:#03C0C6; |
||||||
} |
} |
||||||
|
|
||||||
#white{ |
#white{ |
||||||
background-color:#000000; |
background-color:#000000; |
||||||
} |
} |
||||||
|
|
||||||
#yellow{ |
#yellow{ |
||||||
background-color:#FFFF00; |
background-color:#FFFF00; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-dropdown, .selectBox-options li a { |
.selectBox-dropdown, .selectBox-options li a { |
||||||
line-height: 1.3 !important; |
line-height: 1.3 !important; |
||||||
font-size: 13px; |
font-size: 13px; |
||||||
} |
} |
||||||
|
|
||||||
.pager_button { |
.pager_button { |
||||||
padding: 3px 5px; |
padding: 3px 5px; |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
color: black; |
color: black; |
||||||
display: inline-block; |
display: inline-block; |
||||||
} |
} |
||||||
|
|
||||||
.pager_button.active { |
.pager_button.active { |
||||||
border-radius: 3px; |
border-radius: 3px; |
||||||
-webkit-border-radius: 3px; |
-webkit-border-radius: 3px; |
||||||
background-color: gray; |
background-color: gray; |
||||||
color: white; |
color: white; |
||||||
} |
} |
||||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 214 B After Width: | Height: | Size: 214 B |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 931 B After Width: | Height: | Size: 931 B |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 475 B After Width: | Height: | Size: 475 B |
Before Width: | Height: | Size: 448 B After Width: | Height: | Size: 448 B |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -1,253 +1,253 @@ |
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
<!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"/> |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||||
<head> |
<head> |
||||||
<title>Planete Sankore Image Search</title> |
<title>Planete Sankore Image Search</title> |
||||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
<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" src="scripts/jquery-1.6.2.min.js"></script> |
||||||
<script type="text/javascript"> |
<script type="text/javascript"> |
||||||
var category = "audio"; |
var category = "audio"; |
||||||
var thumbnails = false; |
var thumbnails = false; |
||||||
var minHeight = 180; |
var minHeight = 177; |
||||||
var minWidth = 150; |
var minWidth = 150; |
||||||
|
|
||||||
var currentIndex = 0; |
var currentIndex = 0; |
||||||
var currentTerm = ""; |
var currentTerm = ""; |
||||||
var limit = 10; |
var limit = 10; |
||||||
var filtersDisplayed = false; //display or hide filters |
var filtersDisplayed = false; //display or hide filters |
||||||
|
|
||||||
function addPaginationLinks(totalResults) { |
function addPaginationLinks(totalResults) { |
||||||
var curPage = currentIndex; // check what page the app is on |
var curPage = currentIndex; // check what page the app is on |
||||||
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
||||||
for (var i = 0; i < 8; i++) { |
for (var i = 0; i < 8; i++) { |
||||||
if (i * limit < totalResults) { |
if (i * limit < totalResults) { |
||||||
|
|
||||||
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
||||||
if (curPage == i) { |
if (curPage == i) { |
||||||
link.addClass('active'); |
link.addClass('active'); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
$("#disc_nav_cont #resultFooter").remove(); |
$("#disc_nav_cont #resultFooter").remove(); |
||||||
pagesDiv.insertBefore($('#disclaimer')); |
pagesDiv.insertBefore($('#disclaimer')); |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragstart", imageDragging, false); |
this.addEventListener("dragstart", imageDragging, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragenter", imageDragenter, false); |
this.addEventListener("dragenter", imageDragenter, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragleave", imageDragleave, false); |
this.addEventListener("dragleave", imageDragleave, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragover", imageDragover, false); |
this.addEventListener("dragover", imageDragover, false); |
||||||
}) |
}) |
||||||
} |
} |
||||||
|
|
||||||
function searchFail(jqXHR, textStatus, errorThrown) { |
function searchFail(jqXHR, textStatus, errorThrown) { |
||||||
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
||||||
} |
} |
||||||
|
|
||||||
function searchComplete(json) { |
function searchComplete(json) { |
||||||
// Grab our content div, clear it. |
// Grab our content div, clear it. |
||||||
var totalResults = json.totalResults; |
var totalResults = json.totalResults; |
||||||
var contentDiv = $('#searchResult').empty(); |
var contentDiv = $('#searchResult').empty(); |
||||||
// Loop through our results, printing them to the page. |
// Loop through our results, printing them to the page. |
||||||
var results = json.rows; |
var results = json.rows; |
||||||
for (var i = 0; i < results.length; i++) { |
for (var i = 0; i < results.length; i++) { |
||||||
// For each result write it's title and image to the screen |
// For each result write it's title and image to the screen |
||||||
var result = results[i]; |
var result = results[i]; |
||||||
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
||||||
var title = document.createElement('div'); |
var title = document.createElement('div'); |
||||||
var iUrl = $("<input type='hidden'/>"); |
var iUrl = $("<input type='hidden'/>"); |
||||||
var iContent = $("<input type='hidden'/>"); |
var iContent = $("<input type='hidden'/>"); |
||||||
var iHeight = $("<input type='hidden'/>"); |
var iHeight = $("<input type='hidden'/>"); |
||||||
var iWidth = $("<input type='hidden'/>"); |
var iWidth = $("<input type='hidden'/>"); |
||||||
var iTitle = $("<input type='hidden'/>"); |
var iTitle = $("<input type='hidden'/>"); |
||||||
|
|
||||||
// We use titleNoFormatting so that no HTML tags are left in the |
// We use titleNoFormatting so that no HTML tags are left in the |
||||||
// title |
// title |
||||||
title.innerHTML = result.title; |
title.innerHTML = result.title; |
||||||
var newImg = document.createElement('img'); |
var newImg = document.createElement('img'); |
||||||
|
|
||||||
// There is also a result.file property which has the escaped version |
// There is also a result.file property which has the escaped version |
||||||
if (thumbnails) { |
if (thumbnails) { |
||||||
newImg.src = result.file; |
newImg.src = result.file; |
||||||
} else { |
} else { |
||||||
newImg.src = "./images/thumbnail_icon.png"; |
newImg.src = "./images/thumbnail_icon.png"; |
||||||
} |
} |
||||||
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
||||||
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
||||||
imgContainer.width(imgWidth).height(imgHeight); |
imgContainer.width(imgWidth).height(imgHeight); |
||||||
imgContainer.append($(newImg)); |
imgContainer.append($(newImg)); |
||||||
iUrl.attr("value", result.file); |
iUrl.attr("value", result.file); |
||||||
iContent.attr("value", result.title); |
iContent.attr("value", result.title); |
||||||
iHeight.attr("value", result.height); |
iHeight.attr("value", result.height); |
||||||
iWidth.attr("value", result.width); |
iWidth.attr("value", result.width); |
||||||
iTitle.attr("value",result.title); |
iTitle.attr("value",result.title); |
||||||
imgContainer.append($(title)); |
imgContainer.append($(title)); |
||||||
imgContainer.append(iUrl); |
imgContainer.append(iUrl); |
||||||
imgContainer.append(iContent); |
imgContainer.append(iContent); |
||||||
imgContainer.append(iHeight); |
imgContainer.append(iHeight); |
||||||
imgContainer.append(iWidth); |
imgContainer.append(iWidth); |
||||||
imgContainer.append(iTitle); |
imgContainer.append(iTitle); |
||||||
|
|
||||||
// Put our title + image in the content |
// Put our title + image in the content |
||||||
imgContainer.appendTo(contentDiv); |
imgContainer.appendTo(contentDiv); |
||||||
|
|
||||||
} |
} |
||||||
// Now add links to additional pages of search results. |
// Now add links to additional pages of search results. |
||||||
addPaginationLinks(totalResults); |
addPaginationLinks(totalResults); |
||||||
} |
} |
||||||
|
|
||||||
function imageDragging(e){ |
function imageDragging(e){ |
||||||
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
||||||
} |
} |
||||||
|
|
||||||
function imageDragleave(e){ |
function imageDragleave(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
function imageDragover(e){ |
function imageDragover(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
function imageDragenter(e){ |
function imageDragenter(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
$(document).ready(function(){ |
$(document).ready(function(){ |
||||||
|
|
||||||
//variables |
//variables |
||||||
var mode = false; //search or view mode |
var mode = false; //search or view mode |
||||||
var hide = false; //hide or no main panel |
var hide = false; //hide or no main panel |
||||||
|
|
||||||
//basic containers and elements |
//basic containers and elements |
||||||
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
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 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 search = $("<div id='search' class='search'>").appendTo("body"); |
||||||
|
|
||||||
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
||||||
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
||||||
|
|
||||||
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
||||||
var subSearchFilter = $("<div id='subSearchFilter' 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 searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput); |
||||||
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
||||||
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
||||||
|
|
||||||
//adding filters to the wgt |
//adding filters to the wgt |
||||||
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
||||||
.append($("<option value='0'>Any</option>")) |
.append($("<option value='0'>Any</option>")) |
||||||
.append($("<option value='1'>Small</option>")) |
.append($("<option value='1'>Small</option>")) |
||||||
.append($("<option value='2'>Medium</option>")) |
.append($("<option value='2'>Medium</option>")) |
||||||
.append($("<option value='3'>Large</option>")) |
.append($("<option value='3'>Large</option>")) |
||||||
.append($("<option value='4'>Extra large</option>")); |
.append($("<option value='4'>Extra large</option>")); |
||||||
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
||||||
|
|
||||||
//mouse click actions |
//mouse click actions |
||||||
/* |
/* |
||||||
toggleFilters.click(function(){ |
toggleFilters.click(function(){ |
||||||
if(filtersDisplayed){ |
if(filtersDisplayed){ |
||||||
subSearchFilter.hide(); |
subSearchFilter.hide(); |
||||||
toggleFilters.css("background-image","url(images/down.png)"); |
toggleFilters.css("background-image","url(images/down.png)"); |
||||||
filtersDisplayed = false; |
filtersDisplayed = false; |
||||||
} else { |
} else { |
||||||
subSearchFilter.show(); |
subSearchFilter.show(); |
||||||
toggleFilters.css("background-image","url(images/up.png)"); |
toggleFilters.css("background-image","url(images/up.png)"); |
||||||
filtersDisplayed = true; |
filtersDisplayed = true; |
||||||
} |
} |
||||||
}); |
}); |
||||||
*/ |
*/ |
||||||
|
|
||||||
/*togglePages.click(function(event){ |
/*togglePages.click(function(event){ |
||||||
if(mode){ |
if(mode){ |
||||||
hide = false; |
hide = false; |
||||||
$("#search, #disclaimer").slideDown('slow', function(){ |
$("#search, #disclaimer").slideDown('slow', function(){ |
||||||
toggleIcon.css("background-image","url(images/trgUp.png)"); |
toggleIcon.css("background-image","url(images/trgUp.png)"); |
||||||
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
||||||
}); |
}); |
||||||
mode = false; |
mode = false; |
||||||
} else { |
} else { |
||||||
hide = true; |
hide = true; |
||||||
$("#search, #disclaimer").slideUp('slow', function(){ |
$("#search, #disclaimer").slideUp('slow', function(){ |
||||||
toggleIcon.css("background-image","url(images/trgDown.png)"); |
toggleIcon.css("background-image","url(images/trgDown.png)"); |
||||||
togglePages.appendTo("body").css("top","0"); |
togglePages.appendTo("body").css("top","0"); |
||||||
}); |
}); |
||||||
mode = true; |
mode = true; |
||||||
} |
} |
||||||
});*/ |
});*/ |
||||||
|
|
||||||
searchButton.click(function(){ |
searchButton.click(function(){ |
||||||
if(!hide){ |
if(!hide){ |
||||||
runSearch(searchInput.val(), 0); |
runSearch(searchInput.val(), 0); |
||||||
//togglePages.trigger("click"); |
//togglePages.trigger("click"); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
searchInput.keydown(function(event){ |
searchInput.keydown(function(event){ |
||||||
if(!hide){ |
if(!hide){ |
||||||
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
||||||
runSearch(searchInput.val(), 0); |
runSearch(searchInput.val(), 0); |
||||||
//togglePages.trigger("click"); |
//togglePages.trigger("click"); |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
}); |
}); |
||||||
( |
( |
||||||
$(".imgContainer").live("click",function(){ |
$(".imgContainer").live("click",function(){ |
||||||
sankore.sendFileMetadata(createMetaData($(this))); |
sankore.sendFileMetadata(createMetaData($(this))); |
||||||
})); |
})); |
||||||
|
|
||||||
/*$(window).resize(function(){ |
/*$(window).resize(function(){ |
||||||
disclaimer.width($("body").width()-20); |
disclaimer.width($("body").width()-20); |
||||||
search.width($("body").width()-20); |
search.width($("body").width()-20); |
||||||
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
||||||
})*/ |
})*/ |
||||||
|
|
||||||
}); |
}); |
||||||
|
|
||||||
function gotoPage(i) { |
function gotoPage(i) { |
||||||
runSearch(currentTerm, i); |
runSearch(currentTerm, i); |
||||||
} |
} |
||||||
|
|
||||||
// launching the search on planete sankore |
// launching the search on planete sankore |
||||||
function runSearch(term, index) { |
function runSearch(term, index) { |
||||||
currentTerm = term; |
currentTerm = term; |
||||||
currentIndex = index; |
currentIndex = index; |
||||||
var start = index * limit; |
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; |
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({ |
$.ajax({ |
||||||
url: url, |
url: url, |
||||||
success: searchComplete, |
success: searchComplete, |
||||||
error: searchFail, |
error: searchFail, |
||||||
dataType: "json" |
dataType: "json" |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
|
||||||
function createMetaData(parent){ |
function createMetaData(parent){ |
||||||
var meta = ""; |
var meta = ""; |
||||||
//alert($(this).find("input:hidden").eq(0).val()); |
//alert($(this).find("input:hidden").eq(0).val()); |
||||||
meta = "<metadata><data><key>Type</key><value>Audio</value></data><data><key>Url</key><value>" + |
meta = "<metadata><data><key>Type</key><value>Audio</value></data><data><key>Url</key><value>" + |
||||||
parent.find("input:hidden").eq(0).val() + |
parent.find("input:hidden").eq(0).val() + |
||||||
"</value></data><data><key>Content</key><value>" + |
"</value></data><data><key>Content</key><value>" + |
||||||
parent.find("input:hidden").eq(1).val() + |
parent.find("input:hidden").eq(1).val() + |
||||||
"</value></data><data><key>Height</key><value>n/a</value></data>"+ |
"</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>" + |
"<data><key>Width</key><value>n/a</value></data><data><key>Title</key><value>" + |
||||||
parent.find("input:hidden").eq(4).val() + |
parent.find("input:hidden").eq(4).val() + |
||||||
"</value></data></metadata>"; |
"</value></data></metadata>"; |
||||||
return meta; |
return meta; |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
</head> |
</head> |
||||||
<body style="font-family: Arial;border: 0 none;"> |
<body style="font-family: Arial;border: 0 none;"> |
||||||
<div id="searchResult"></div> |
<div id="searchResult"></div> |
||||||
</body> |
</body> |
||||||
</html> |
</html> |
||||||
|
@ -1,315 +1,315 @@ |
|||||||
html, body{ |
html, body{ |
||||||
width: 100%; |
width: 100%; |
||||||
padding: 0; |
padding: 0; |
||||||
height: auto; |
height: auto; |
||||||
background-color: white; |
background-color: white; |
||||||
margin: 0; |
margin: 0; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar { |
::-webkit-scrollbar { |
||||||
width: 14px; |
width: 14px; |
||||||
background-color:white; |
background-color:white; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb { |
::-webkit-scrollbar-thumb { |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:start{ |
::-webkit-scrollbar-button:vertical:start{ |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
background-image: url(../images/trgUp.png); |
background-image: url(../images/trgUp.png); |
||||||
background-size: 8px auto; |
background-size: 8px auto; |
||||||
background-position: center; |
background-position: center; |
||||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:end{ |
::-webkit-scrollbar-button:vertical:end{ |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
background-image: url(../images/trgDown.png); |
background-image: url(../images/trgDown.png); |
||||||
background-size: 8px auto; |
background-size: 8px auto; |
||||||
background-position: center; |
background-position: center; |
||||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
a { |
a { |
||||||
text-decoration: underline; |
text-decoration: underline; |
||||||
} |
} |
||||||
|
|
||||||
#disc_nav_cont{ |
#disc_nav_cont{ |
||||||
height: auto; |
height: auto; |
||||||
position: fixed; |
position: fixed; |
||||||
left: 0; |
left: 0; |
||||||
bottom: 0; |
bottom: 0; |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
|
|
||||||
.disclaimer{ |
.disclaimer{ |
||||||
padding: 5px; |
padding: 5px; |
||||||
text-align: center; |
text-align: center; |
||||||
background-color: #BBBBBB; |
background-color: #BBBBBB; |
||||||
border-top: solid 4px #EEEEEE; |
border-top: solid 4px #EEEEEE; |
||||||
border-bottom: none; |
border-bottom: none; |
||||||
font-size: 12px; |
font-size: 12px; |
||||||
} |
} |
||||||
|
|
||||||
.resultFooter{ |
.resultFooter{ |
||||||
width: 100%; |
width: 100%; |
||||||
padding: 3px; |
padding: 3px; |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
font-size: x-large; |
font-size: x-large; |
||||||
text-align: center; |
text-align: center; |
||||||
background-color: white; |
background-color: white; |
||||||
} |
} |
||||||
|
|
||||||
#searchResult { |
#searchResult { |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
text-align: center; |
text-align: center; |
||||||
margin-top: 50px; |
margin-top: 50px; |
||||||
margin-bottom: 50px; |
margin-bottom: 85px; |
||||||
} |
} |
||||||
|
|
||||||
.search{ |
.search{ |
||||||
position: fixed; |
position: fixed; |
||||||
top: 0; |
top: 0; |
||||||
left: 0; |
left: 0; |
||||||
padding: 5px; |
padding: 5px; |
||||||
background-color: #BBBBBB; |
background-color: #BBBBBB; |
||||||
border-bottom: solid 4px #EEEEEE; |
border-bottom: solid 4px #EEEEEE; |
||||||
} |
} |
||||||
|
|
||||||
.search, |
.search, |
||||||
.disclaimer { |
.disclaimer { |
||||||
width: 100%; |
width: 100%; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.searchInput{ |
.searchInput{ |
||||||
padding: 3px; |
padding: 3px; |
||||||
float: left; |
float: left; |
||||||
width: 100%; |
width: 100%; |
||||||
border-radius: 3px; |
border-radius: 3px; |
||||||
border-style: none; |
border-style: none; |
||||||
height: 22px; |
height: 22px; |
||||||
line-height: 18px; |
line-height: 18px; |
||||||
vertical-align: middle; |
vertical-align: middle; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.searchButton{ |
.searchButton{ |
||||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
background: url("../images/search_app.png") -38px -38px no-repeat; |
||||||
width: 24px; |
width: 24px; |
||||||
height: 24px; |
height: 24px; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
position: absolute; |
position: absolute; |
||||||
right: 30px; |
right: 30px; |
||||||
top: 9px; |
top: 9px; |
||||||
margin-left: -2px; |
margin-left: -2px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
.subSearch{ |
.subSearch{ |
||||||
margin: 0; |
margin: 0; |
||||||
float: left; |
float: left; |
||||||
} |
} |
||||||
|
|
||||||
#subSearchInput{ |
#subSearchInput{ |
||||||
width: 100%; |
width: 100%; |
||||||
float: left; |
float: left; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
padding: 5px; |
padding: 5px; |
||||||
padding-right: 26px; |
padding-right: 26px; |
||||||
} |
} |
||||||
|
|
||||||
#subSearchFilter{ |
#subSearchFilter{ |
||||||
width: 100%; |
width: 100%; |
||||||
float: left; |
float: left; |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.searchResult{ |
.searchResult{ |
||||||
width: 98%; |
width: 98%; |
||||||
padding: 3px; |
padding: 3px; |
||||||
background-color:#123456; |
background-color:#123456; |
||||||
} |
} |
||||||
|
|
||||||
.imgContainer{ |
.imgContainer{ |
||||||
display: inline-block; |
display: inline-block; |
||||||
padding: 3px; |
padding: 3px; |
||||||
margin: 3px; |
margin: 3px; |
||||||
text-align: center; |
text-align: center; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
font-size: small; |
font-size: small; |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
border: 1px solid #666; |
border: 1px solid #666; |
||||||
border-radius: 5px; |
border-radius: 5px; |
||||||
-webkit-box-shadow: #dadada -1px 0 4px; |
-webkit-box-shadow: #dadada -1px 0 4px; |
||||||
-webkit-border-radius: 5px; |
-webkit-border-radius: 5px; |
||||||
box-shadow: #666 -1px 0 4px; |
box-shadow: #666 -1px 0 4px; |
||||||
vertical-align: top; |
vertical-align: top; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
.filterContainer{ |
.filterContainer{ |
||||||
float: left; |
float: left; |
||||||
margin: 2px; |
margin: 2px; |
||||||
padding: 2px; |
padding: 2px; |
||||||
font-size: 14px; |
font-size: 14px; |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
.filterSelect{ |
.filterSelect{ |
||||||
border-style:none; |
border-style:none; |
||||||
-webkit-border-top-right-radius: 15px; |
-webkit-border-top-right-radius: 15px; |
||||||
-webkit-border-bottom-right-radius: 15px; |
-webkit-border-bottom-right-radius: 15px; |
||||||
-moz-border-radius-topright: 15px; |
-moz-border-radius-topright: 15px; |
||||||
-moz-border-radius-bottomright: 15px; |
-moz-border-radius-bottomright: 15px; |
||||||
border-top-right-radius: 15px; |
border-top-right-radius: 15px; |
||||||
margin-top: 2px; |
margin-top: 2px; |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
|
|
||||||
span{ |
span{ |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
color: #666; |
color: #666; |
||||||
} |
} |
||||||
|
|
||||||
[draggable] { |
[draggable] { |
||||||
-webkit-user-select: none; |
-webkit-user-select: none; |
||||||
user-select: none; |
user-select: none; |
||||||
} |
} |
||||||
|
|
||||||
.toggleFilters{ |
.toggleFilters{ |
||||||
margin: 0; |
margin: 0; |
||||||
padding: 0; |
padding: 0; |
||||||
background-position: center; |
background-position: center; |
||||||
background-image: url(../images/down.png); |
background-image: url(../images/down.png); |
||||||
position: absolute; |
position: absolute; |
||||||
top: 11px; |
top: 11px; |
||||||
right: 6px; |
right: 6px; |
||||||
width: 20px; |
width: 20px; |
||||||
height: 20px; |
height: 20px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
.colors_line { |
.colors_line { |
||||||
float: left; |
float: left; |
||||||
margin: 4px; |
margin: 4px; |
||||||
margin-right: 0; |
margin-right: 0; |
||||||
clear: left; |
clear: left; |
||||||
} |
} |
||||||
|
|
||||||
.custom { |
.custom { |
||||||
opacity: 0; |
opacity: 0; |
||||||
position: absolute; |
position: absolute; |
||||||
left: -10000px; |
left: -10000px; |
||||||
} |
} |
||||||
|
|
||||||
.filter_button.button.color { |
.filter_button.button.color { |
||||||
display: inline-block; |
display: inline-block; |
||||||
width: 15px; |
width: 15px; |
||||||
height: 15px; |
height: 15px; |
||||||
border: 1px solid #EBEBEB; |
border: 1px solid #EBEBEB; |
||||||
padding: 0; |
padding: 0; |
||||||
margin: 0; |
margin: 0; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.filter_button.button.color:hover { |
.filter_button.button.color:hover { |
||||||
border: 1px solid rgb(128,128,128); |
border: 1px solid rgb(128,128,128); |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
input[type="radio"]:checked + .filter_button.button.color { |
input[type="radio"]:checked + .filter_button.button.color { |
||||||
border: 1px solid rgb(255,255,255); |
border: 1px solid rgb(255,255,255); |
||||||
box-shadow: 0 0 0px 1px #000; |
box-shadow: 0 0 0px 1px #000; |
||||||
-webkit-box-shadow: 0 0 0px 1px #000; |
-webkit-box-shadow: 0 0 0px 1px #000; |
||||||
} |
} |
||||||
|
|
||||||
#allcolor { |
#allcolor { |
||||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
background: white url('../images/search_app.png') -43px -144px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#colored { |
#colored { |
||||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
background: white url('../images/search_app.png') -43px -244px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#grayed { |
#grayed { |
||||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
background: white url('../images/search_app.png') -45px -343px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#black{ |
#black{ |
||||||
background-color:#ffffff; |
background-color:#ffffff; |
||||||
} |
} |
||||||
#blue{ |
#blue{ |
||||||
background-color:#0000FF; |
background-color:#0000FF; |
||||||
} |
} |
||||||
#brown{ |
#brown{ |
||||||
background-color:rgba(139, 82, 16, 1); |
background-color:rgba(139, 82, 16, 1); |
||||||
} |
} |
||||||
|
|
||||||
#gray{ |
#gray{ |
||||||
background-color:#999999; |
background-color:#999999; |
||||||
} |
} |
||||||
|
|
||||||
#green{ |
#green{ |
||||||
background-color:#00CC00; |
background-color:#00CC00; |
||||||
} |
} |
||||||
|
|
||||||
#orange{ |
#orange{ |
||||||
background-color:#FB940B; |
background-color:#FB940B; |
||||||
} |
} |
||||||
|
|
||||||
#pink{ |
#pink{ |
||||||
background-color:#FF98BF; |
background-color:#FF98BF; |
||||||
} |
} |
||||||
|
|
||||||
#purple{ |
#purple{ |
||||||
background-color:#762CA7; |
background-color:#762CA7; |
||||||
} |
} |
||||||
|
|
||||||
#red{ |
#red{ |
||||||
background-color:#CC0000; |
background-color:#CC0000; |
||||||
} |
} |
||||||
|
|
||||||
#teal{ |
#teal{ |
||||||
background-color:#03C0C6; |
background-color:#03C0C6; |
||||||
} |
} |
||||||
|
|
||||||
#white{ |
#white{ |
||||||
background-color:#000000; |
background-color:#000000; |
||||||
} |
} |
||||||
|
|
||||||
#yellow{ |
#yellow{ |
||||||
background-color:#FFFF00; |
background-color:#FFFF00; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-dropdown, .selectBox-options li a { |
.selectBox-dropdown, .selectBox-options li a { |
||||||
line-height: 1.3 !important; |
line-height: 1.3 !important; |
||||||
font-size: 13px; |
font-size: 13px; |
||||||
} |
} |
||||||
|
|
||||||
.pager_button { |
.pager_button { |
||||||
padding: 3px 5px; |
padding: 3px 5px; |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
color: black; |
color: black; |
||||||
display: inline-block; |
display: inline-block; |
||||||
} |
} |
||||||
|
|
||||||
.pager_button.active { |
.pager_button.active { |
||||||
border-radius: 3px; |
border-radius: 3px; |
||||||
-webkit-border-radius: 3px; |
-webkit-border-radius: 3px; |
||||||
background-color: gray; |
background-color: gray; |
||||||
color: white; |
color: white; |
||||||
} |
} |
||||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 214 B After Width: | Height: | Size: 214 B |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 931 B After Width: | Height: | Size: 931 B |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 475 B After Width: | Height: | Size: 475 B |
Before Width: | Height: | Size: 448 B After Width: | Height: | Size: 448 B |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -1,253 +1,253 @@ |
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
<!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"/> |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||||
<head> |
<head> |
||||||
<title>Planete Sankore Image Search</title> |
<title>Planete Sankore Image Search</title> |
||||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
<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" src="scripts/jquery-1.6.2.min.js"></script> |
||||||
<script type="text/javascript"> |
<script type="text/javascript"> |
||||||
var category = "interactive"; |
var category = "interactive"; |
||||||
var thumbnails = false; |
var thumbnails = false; |
||||||
var minHeight = 180; |
var minHeight = 177; |
||||||
var minWidth = 150; |
var minWidth = 150; |
||||||
|
|
||||||
var currentIndex = 0; |
var currentIndex = 0; |
||||||
var currentTerm = ""; |
var currentTerm = ""; |
||||||
var limit = 10; |
var limit = 10; |
||||||
var filtersDisplayed = false; //display or hide filters |
var filtersDisplayed = false; //display or hide filters |
||||||
|
|
||||||
function addPaginationLinks(totalResults) { |
function addPaginationLinks(totalResults) { |
||||||
var curPage = currentIndex; // check what page the app is on |
var curPage = currentIndex; // check what page the app is on |
||||||
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
||||||
for (var i = 0; i < 8; i++) { |
for (var i = 0; i < 8; i++) { |
||||||
if (i * limit < totalResults) { |
if (i * limit < totalResults) { |
||||||
|
|
||||||
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
||||||
if (curPage == i) { |
if (curPage == i) { |
||||||
link.addClass('active'); |
link.addClass('active'); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
$("#disc_nav_cont #resultFooter").remove(); |
$("#disc_nav_cont #resultFooter").remove(); |
||||||
pagesDiv.insertBefore($('#disclaimer')); |
pagesDiv.insertBefore($('#disclaimer')); |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragstart", imageDragging, false); |
this.addEventListener("dragstart", imageDragging, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragenter", imageDragenter, false); |
this.addEventListener("dragenter", imageDragenter, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragleave", imageDragleave, false); |
this.addEventListener("dragleave", imageDragleave, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragover", imageDragover, false); |
this.addEventListener("dragover", imageDragover, false); |
||||||
}) |
}) |
||||||
} |
} |
||||||
|
|
||||||
function searchFail(jqXHR, textStatus, errorThrown) { |
function searchFail(jqXHR, textStatus, errorThrown) { |
||||||
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
||||||
} |
} |
||||||
|
|
||||||
function searchComplete(json) { |
function searchComplete(json) { |
||||||
// Grab our content div, clear it. |
// Grab our content div, clear it. |
||||||
var totalResults = json.totalResults; |
var totalResults = json.totalResults; |
||||||
var contentDiv = $('#searchResult').empty(); |
var contentDiv = $('#searchResult').empty(); |
||||||
// Loop through our results, printing them to the page. |
// Loop through our results, printing them to the page. |
||||||
var results = json.rows; |
var results = json.rows; |
||||||
for (var i = 0; i < results.length; i++) { |
for (var i = 0; i < results.length; i++) { |
||||||
// For each result write it's title and image to the screen |
// For each result write it's title and image to the screen |
||||||
var result = results[i]; |
var result = results[i]; |
||||||
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
||||||
var title = document.createElement('div'); |
var title = document.createElement('div'); |
||||||
var iUrl = $("<input type='hidden'/>"); |
var iUrl = $("<input type='hidden'/>"); |
||||||
var iContent = $("<input type='hidden'/>"); |
var iContent = $("<input type='hidden'/>"); |
||||||
var iHeight = $("<input type='hidden'/>"); |
var iHeight = $("<input type='hidden'/>"); |
||||||
var iWidth = $("<input type='hidden'/>"); |
var iWidth = $("<input type='hidden'/>"); |
||||||
var iTitle = $("<input type='hidden'/>"); |
var iTitle = $("<input type='hidden'/>"); |
||||||
|
|
||||||
// We use titleNoFormatting so that no HTML tags are left in the |
// We use titleNoFormatting so that no HTML tags are left in the |
||||||
// title |
// title |
||||||
title.innerHTML = result.title; |
title.innerHTML = result.title; |
||||||
var newImg = document.createElement('img'); |
var newImg = document.createElement('img'); |
||||||
|
|
||||||
// There is also a result.file property which has the escaped version |
// There is also a result.file property which has the escaped version |
||||||
if (thumbnails) { |
if (thumbnails) { |
||||||
newImg.src = result.file; |
newImg.src = result.file; |
||||||
} else { |
} else { |
||||||
newImg.src = "./images/thumbnail_icon.png"; |
newImg.src = "./images/thumbnail_icon.png"; |
||||||
} |
} |
||||||
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
||||||
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
||||||
imgContainer.width(imgWidth).height(imgHeight); |
imgContainer.width(imgWidth).height(imgHeight); |
||||||
imgContainer.append($(newImg)); |
imgContainer.append($(newImg)); |
||||||
iUrl.attr("value", result.file); |
iUrl.attr("value", result.file); |
||||||
iContent.attr("value", result.title); |
iContent.attr("value", result.title); |
||||||
iHeight.attr("value", result.height); |
iHeight.attr("value", result.height); |
||||||
iWidth.attr("value", result.width); |
iWidth.attr("value", result.width); |
||||||
iTitle.attr("value",result.title); |
iTitle.attr("value",result.title); |
||||||
imgContainer.append($(title)); |
imgContainer.append($(title)); |
||||||
imgContainer.append(iUrl); |
imgContainer.append(iUrl); |
||||||
imgContainer.append(iContent); |
imgContainer.append(iContent); |
||||||
imgContainer.append(iHeight); |
imgContainer.append(iHeight); |
||||||
imgContainer.append(iWidth); |
imgContainer.append(iWidth); |
||||||
imgContainer.append(iTitle); |
imgContainer.append(iTitle); |
||||||
|
|
||||||
// Put our title + image in the content |
// Put our title + image in the content |
||||||
imgContainer.appendTo(contentDiv); |
imgContainer.appendTo(contentDiv); |
||||||
|
|
||||||
} |
} |
||||||
// Now add links to additional pages of search results. |
// Now add links to additional pages of search results. |
||||||
addPaginationLinks(totalResults); |
addPaginationLinks(totalResults); |
||||||
} |
} |
||||||
|
|
||||||
function imageDragging(e){ |
function imageDragging(e){ |
||||||
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
||||||
// alert($(this).find("input:hidden").eq(0).val()); |
// alert($(this).find("input:hidden").eq(0).val()); |
||||||
} |
} |
||||||
|
|
||||||
function imageDragleave(e){ |
function imageDragleave(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
function imageDragover(e){ |
function imageDragover(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
function imageDragenter(e){ |
function imageDragenter(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
$(document).ready(function(){ |
$(document).ready(function(){ |
||||||
|
|
||||||
//variables |
//variables |
||||||
var mode = false; //search or view mode |
var mode = false; //search or view mode |
||||||
var hide = false; //hide or no main panel |
var hide = false; //hide or no main panel |
||||||
|
|
||||||
//basic containers and elements |
//basic containers and elements |
||||||
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
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 flash sur Planète Sankoré<div>").appendTo(disc_nav_cont); |
var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche de documents flash sur Planète Sankoré<div>").appendTo(disc_nav_cont); |
||||||
var search = $("<div id='search' class='search'>").appendTo("body"); |
var search = $("<div id='search' class='search'>").appendTo("body"); |
||||||
|
|
||||||
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
||||||
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
||||||
|
|
||||||
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
||||||
var subSearchFilter = $("<div id='subSearchFilter' 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 searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput); |
||||||
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
||||||
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
||||||
|
|
||||||
//adding filters to the wgt |
//adding filters to the wgt |
||||||
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
||||||
.append($("<option value='0'>Any</option>")) |
.append($("<option value='0'>Any</option>")) |
||||||
.append($("<option value='1'>Small</option>")) |
.append($("<option value='1'>Small</option>")) |
||||||
.append($("<option value='2'>Medium</option>")) |
.append($("<option value='2'>Medium</option>")) |
||||||
.append($("<option value='3'>Large</option>")) |
.append($("<option value='3'>Large</option>")) |
||||||
.append($("<option value='4'>Extra large</option>")); |
.append($("<option value='4'>Extra large</option>")); |
||||||
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
||||||
|
|
||||||
//mouse click actions |
//mouse click actions |
||||||
/* |
/* |
||||||
toggleFilters.click(function(){ |
toggleFilters.click(function(){ |
||||||
if(filtersDisplayed){ |
if(filtersDisplayed){ |
||||||
subSearchFilter.hide(); |
subSearchFilter.hide(); |
||||||
toggleFilters.css("background-image","url(images/down.png)"); |
toggleFilters.css("background-image","url(images/down.png)"); |
||||||
filtersDisplayed = false; |
filtersDisplayed = false; |
||||||
} else { |
} else { |
||||||
subSearchFilter.show(); |
subSearchFilter.show(); |
||||||
toggleFilters.css("background-image","url(images/up.png)"); |
toggleFilters.css("background-image","url(images/up.png)"); |
||||||
filtersDisplayed = true; |
filtersDisplayed = true; |
||||||
} |
} |
||||||
}); |
}); |
||||||
*/ |
*/ |
||||||
|
|
||||||
/*togglePages.click(function(event){ |
/*togglePages.click(function(event){ |
||||||
if(mode){ |
if(mode){ |
||||||
hide = false; |
hide = false; |
||||||
$("#search, #disclaimer").slideDown('slow', function(){ |
$("#search, #disclaimer").slideDown('slow', function(){ |
||||||
toggleIcon.css("background-image","url(images/trgUp.png)"); |
toggleIcon.css("background-image","url(images/trgUp.png)"); |
||||||
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
||||||
}); |
}); |
||||||
mode = false; |
mode = false; |
||||||
} else { |
} else { |
||||||
hide = true; |
hide = true; |
||||||
$("#search, #disclaimer").slideUp('slow', function(){ |
$("#search, #disclaimer").slideUp('slow', function(){ |
||||||
toggleIcon.css("background-image","url(images/trgDown.png)"); |
toggleIcon.css("background-image","url(images/trgDown.png)"); |
||||||
togglePages.appendTo("body").css("top","0"); |
togglePages.appendTo("body").css("top","0"); |
||||||
}); |
}); |
||||||
mode = true; |
mode = true; |
||||||
} |
} |
||||||
});*/ |
});*/ |
||||||
|
|
||||||
searchButton.click(function(){ |
searchButton.click(function(){ |
||||||
if(!hide){ |
if(!hide){ |
||||||
runSearch(searchInput.val(), 0); |
runSearch(searchInput.val(), 0); |
||||||
//togglePages.trigger("click"); |
//togglePages.trigger("click"); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
searchInput.keydown(function(event){ |
searchInput.keydown(function(event){ |
||||||
if(!hide){ |
if(!hide){ |
||||||
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
||||||
runSearch(searchInput.val(), 0); |
runSearch(searchInput.val(), 0); |
||||||
//togglePages.trigger("click"); |
//togglePages.trigger("click"); |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
}); |
}); |
||||||
( |
( |
||||||
$(".imgContainer").live("click",function(){ |
$(".imgContainer").live("click",function(){ |
||||||
sankore.sendFileMetadata(createMetaData($(this))); |
sankore.sendFileMetadata(createMetaData($(this))); |
||||||
})); |
})); |
||||||
|
|
||||||
/*$(window).resize(function(){ |
/*$(window).resize(function(){ |
||||||
disclaimer.width($("body").width()-20); |
disclaimer.width($("body").width()-20); |
||||||
search.width($("body").width()-20); |
search.width($("body").width()-20); |
||||||
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
||||||
})*/ |
})*/ |
||||||
|
|
||||||
}); |
}); |
||||||
|
|
||||||
function gotoPage(i) { |
function gotoPage(i) { |
||||||
runSearch(currentTerm, i); |
runSearch(currentTerm, i); |
||||||
} |
} |
||||||
|
|
||||||
// launching the search on planete sankore |
// launching the search on planete sankore |
||||||
function runSearch(term, index) { |
function runSearch(term, index) { |
||||||
currentTerm = term; |
currentTerm = term; |
||||||
currentIndex = index; |
currentIndex = index; |
||||||
var start = index * limit; |
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; |
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({ |
$.ajax({ |
||||||
url: url, |
url: url, |
||||||
success: searchComplete, |
success: searchComplete, |
||||||
error: searchFail, |
error: searchFail, |
||||||
dataType: "json" |
dataType: "json" |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
|
||||||
function createMetaData(parent){ |
function createMetaData(parent){ |
||||||
var meta = ""; |
var meta = ""; |
||||||
meta = "<metadata><data><key>Type</key><value>Flash</value></data><data><key>Url</key><value>" + |
meta = "<metadata><data><key>Type</key><value>Flash</value></data><data><key>Url</key><value>" + |
||||||
parent.find("input:hidden").eq(0).val() + |
parent.find("input:hidden").eq(0).val() + |
||||||
"</value></data><data><key>Content</key><value>" + |
"</value></data><data><key>Content</key><value>" + |
||||||
parent.find("input:hidden").eq(1).val() + |
parent.find("input:hidden").eq(1).val() + |
||||||
"</value></data><data><key>Height</key><value>n/a</value></data>"+ |
"</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>" + |
"<data><key>Width</key><value>n/a</value></data><data><key>Title</key><value>" + |
||||||
parent.find("input:hidden").eq(4).val() + |
parent.find("input:hidden").eq(4).val() + |
||||||
"</value></data></metadata>"; |
"</value></data></metadata>"; |
||||||
return meta; |
return meta; |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
</head> |
</head> |
||||||
<body style="font-family: Arial;border: 0 none;"> |
<body style="font-family: Arial;border: 0 none;"> |
||||||
<div id="searchResult"></div> |
<div id="searchResult"></div> |
||||||
</body> |
</body> |
||||||
</html> |
</html> |
||||||
|
@ -1,318 +1,318 @@ |
|||||||
html, body{ |
html, body{ |
||||||
width: 100%; |
width: 100%; |
||||||
padding: 0; |
padding: 0; |
||||||
height: auto; |
height: auto; |
||||||
background-color: white; |
background-color: white; |
||||||
margin: 0; |
margin: 0; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar { |
::-webkit-scrollbar { |
||||||
width: 14px; |
width: 14px; |
||||||
background-color:white; |
background-color:white; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb { |
::-webkit-scrollbar-thumb { |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:start{ |
::-webkit-scrollbar-button:vertical:start{ |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
background-image: url(../images/trgUp.png); |
background-image: url(../images/trgUp.png); |
||||||
background-size: 8px auto; |
background-size: 8px auto; |
||||||
background-position: center; |
background-position: center; |
||||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:end{ |
::-webkit-scrollbar-button:vertical:end{ |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
background-image: url(../images/trgDown.png); |
background-image: url(../images/trgDown.png); |
||||||
background-size: 8px auto; |
background-size: 8px auto; |
||||||
background-position: center; |
background-position: center; |
||||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
a { |
a { |
||||||
text-decoration: underline; |
text-decoration: underline; |
||||||
} |
} |
||||||
|
|
||||||
#disc_nav_cont{ |
#disc_nav_cont{ |
||||||
height: auto; |
height: auto; |
||||||
position: fixed; |
position: fixed; |
||||||
left: 0; |
left: 0; |
||||||
bottom: 0; |
bottom: 0; |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
|
|
||||||
.disclaimer{ |
.disclaimer{ |
||||||
padding: 5px; |
padding: 5px; |
||||||
text-align: center; |
text-align: center; |
||||||
background-color: #BBBBBB; |
background-color: #BBBBBB; |
||||||
border-top: solid 4px #EEEEEE; |
border-top: solid 4px #EEEEEE; |
||||||
border-bottom: none; |
border-bottom: none; |
||||||
font-size: 12px; |
font-size: 12px; |
||||||
} |
} |
||||||
|
|
||||||
.resultFooter{ |
.resultFooter{ |
||||||
width: 100%; |
width: 100%; |
||||||
padding: 3px; |
padding: 3px; |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
font-size: x-large; |
font-size: x-large; |
||||||
text-align: center; |
text-align: center; |
||||||
background-color: white; |
background-color: white; |
||||||
} |
} |
||||||
|
|
||||||
#searchResult { |
#searchResult { |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
text-align: center; |
text-align: center; |
||||||
margin-top: 50px; |
margin-top: 50px; |
||||||
margin-bottom: 50px; |
margin-bottom: 85px; |
||||||
} |
} |
||||||
|
|
||||||
.search{ |
.search{ |
||||||
position: fixed; |
position: fixed; |
||||||
top: 0; |
top: 0; |
||||||
left: 0; |
left: 0; |
||||||
padding: 5px; |
padding: 5px; |
||||||
background-color: #BBBBBB; |
background-color: #BBBBBB; |
||||||
border-bottom: solid 4px #EEEEEE; |
border-bottom: solid 4px #EEEEEE; |
||||||
} |
} |
||||||
|
|
||||||
.search, |
.search, |
||||||
.disclaimer { |
.disclaimer { |
||||||
width: 100%; |
width: 100%; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.toggleIcon{ |
.toggleIcon{ |
||||||
display: inline-block; |
display: inline-block; |
||||||
width: 14px; |
width: 14px; |
||||||
height: 14px; |
height: 14px; |
||||||
background: url(../images/trgUp.png) 50% no-repeat; |
background: url(../images/trgUp.png) 50% no-repeat; |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
.searchInput{ |
.searchInput{ |
||||||
padding: 3px; |
padding: 3px; |
||||||
float: left; |
float: left; |
||||||
width: 100%; |
width: 100%; |
||||||
border-radius: 3px; |
border-radius: 3px; |
||||||
border-style: none; |
border-style: none; |
||||||
height: 22px; |
height: 22px; |
||||||
line-height: 18px; |
line-height: 18px; |
||||||
vertical-align: middle; |
vertical-align: middle; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.searchButton{ |
.searchButton{ |
||||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
background: url("../images/search_app.png") -38px -38px no-repeat; |
||||||
width: 24px; |
width: 24px; |
||||||
height: 24px; |
height: 24px; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
position: absolute; |
position: absolute; |
||||||
right: 30px; |
right: 30px; |
||||||
top: 9px; |
top: 9px; |
||||||
margin-left: -2px; |
margin-left: -2px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
.subSearch{ |
.subSearch{ |
||||||
margin: 0; |
margin: 0; |
||||||
float: left; |
float: left; |
||||||
} |
} |
||||||
|
|
||||||
#subSearchInput{ |
#subSearchInput{ |
||||||
width: 100%; |
width: 100%; |
||||||
float: left; |
float: left; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
padding: 5px; |
padding: 5px; |
||||||
padding-right: 26px; |
padding-right: 26px; |
||||||
} |
} |
||||||
|
|
||||||
#subSearchFilter{ |
#subSearchFilter{ |
||||||
width: 100%; |
width: 100%; |
||||||
float: left; |
float: left; |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.searchResult{ |
.searchResult{ |
||||||
width: 98%; |
width: 98%; |
||||||
padding: 3px; |
padding: 3px; |
||||||
|
|
||||||
background-color:#123456; |
background-color:#123456; |
||||||
} |
} |
||||||
|
|
||||||
.imgContainer{ |
.imgContainer{ |
||||||
display: inline-block; |
display: inline-block; |
||||||
padding: 3px; |
padding: 3px; |
||||||
margin: 3px; |
margin: 3px; |
||||||
text-align: center; |
text-align: center; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
font-size: small; |
font-size: small; |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
vertical-align: top; |
vertical-align: top; |
||||||
} |
} |
||||||
|
|
||||||
.filterContainer{ |
.filterContainer{ |
||||||
float: left; |
float: left; |
||||||
margin: 2px; |
margin: 2px; |
||||||
padding: 2px; |
padding: 2px; |
||||||
font-size: 14px; |
font-size: 14px; |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
.filterSelect{ |
.filterSelect{ |
||||||
border-style:none; |
border-style:none; |
||||||
-webkit-border-top-right-radius: 15px; |
-webkit-border-top-right-radius: 15px; |
||||||
-webkit-border-bottom-right-radius: 15px; |
-webkit-border-bottom-right-radius: 15px; |
||||||
-moz-border-radius-topright: 15px; |
-moz-border-radius-topright: 15px; |
||||||
-moz-border-radius-bottomright: 15px; |
-moz-border-radius-bottomright: 15px; |
||||||
border-top-right-radius: 15px; |
border-top-right-radius: 15px; |
||||||
margin-top: 2px; |
margin-top: 2px; |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
|
|
||||||
span{ |
span{ |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
color: #666; |
color: #666; |
||||||
} |
} |
||||||
|
|
||||||
[draggable] { |
[draggable] { |
||||||
-webkit-user-select: none; |
-webkit-user-select: none; |
||||||
user-select: none; |
user-select: none; |
||||||
} |
} |
||||||
|
|
||||||
.toggleFilters{ |
.toggleFilters{ |
||||||
margin: 0; |
margin: 0; |
||||||
padding: 0; |
padding: 0; |
||||||
background-position: center; |
background-position: center; |
||||||
background-image: url(../images/down.png); |
background-image: url(../images/down.png); |
||||||
position: absolute; |
position: absolute; |
||||||
top: 11px; |
top: 11px; |
||||||
right: 6px; |
right: 6px; |
||||||
width: 20px; |
width: 20px; |
||||||
height: 20px; |
height: 20px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
.colors_line { |
.colors_line { |
||||||
float: left; |
float: left; |
||||||
margin: 4px; |
margin: 4px; |
||||||
margin-right: 0; |
margin-right: 0; |
||||||
clear: left; |
clear: left; |
||||||
} |
} |
||||||
|
|
||||||
.custom { |
.custom { |
||||||
opacity: 0; |
opacity: 0; |
||||||
position: absolute; |
position: absolute; |
||||||
left: -10000px; |
left: -10000px; |
||||||
} |
} |
||||||
|
|
||||||
.filter_button.button.color { |
.filter_button.button.color { |
||||||
display: inline-block; |
display: inline-block; |
||||||
width: 15px; |
width: 15px; |
||||||
height: 15px; |
height: 15px; |
||||||
border: 1px solid #EBEBEB; |
border: 1px solid #EBEBEB; |
||||||
padding: 0; |
padding: 0; |
||||||
margin: 0; |
margin: 0; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.filter_button.button.color:hover { |
.filter_button.button.color:hover { |
||||||
border: 1px solid rgb(128,128,128); |
border: 1px solid rgb(128,128,128); |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
input[type="radio"]:checked + .filter_button.button.color { |
input[type="radio"]:checked + .filter_button.button.color { |
||||||
border: 1px solid rgb(255,255,255); |
border: 1px solid rgb(255,255,255); |
||||||
box-shadow: 0 0 0px 1px #000; |
box-shadow: 0 0 0px 1px #000; |
||||||
-webkit-box-shadow: 0 0 0px 1px #000; |
-webkit-box-shadow: 0 0 0px 1px #000; |
||||||
} |
} |
||||||
|
|
||||||
#allcolor { |
#allcolor { |
||||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
background: white url('../images/search_app.png') -43px -144px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#colored { |
#colored { |
||||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
background: white url('../images/search_app.png') -43px -244px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#grayed { |
#grayed { |
||||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
background: white url('../images/search_app.png') -45px -343px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#black{ |
#black{ |
||||||
background-color:#ffffff; |
background-color:#ffffff; |
||||||
} |
} |
||||||
#blue{ |
#blue{ |
||||||
background-color:#0000FF; |
background-color:#0000FF; |
||||||
} |
} |
||||||
#brown{ |
#brown{ |
||||||
background-color:rgba(139, 82, 16, 1); |
background-color:rgba(139, 82, 16, 1); |
||||||
} |
} |
||||||
|
|
||||||
#gray{ |
#gray{ |
||||||
background-color:#999999; |
background-color:#999999; |
||||||
} |
} |
||||||
|
|
||||||
#green{ |
#green{ |
||||||
background-color:#00CC00; |
background-color:#00CC00; |
||||||
} |
} |
||||||
|
|
||||||
#orange{ |
#orange{ |
||||||
background-color:#FB940B; |
background-color:#FB940B; |
||||||
} |
} |
||||||
|
|
||||||
#pink{ |
#pink{ |
||||||
background-color:#FF98BF; |
background-color:#FF98BF; |
||||||
} |
} |
||||||
|
|
||||||
#purple{ |
#purple{ |
||||||
background-color:#762CA7; |
background-color:#762CA7; |
||||||
} |
} |
||||||
|
|
||||||
#red{ |
#red{ |
||||||
background-color:#CC0000; |
background-color:#CC0000; |
||||||
} |
} |
||||||
|
|
||||||
#teal{ |
#teal{ |
||||||
background-color:#03C0C6; |
background-color:#03C0C6; |
||||||
} |
} |
||||||
|
|
||||||
#white{ |
#white{ |
||||||
background-color:#000000; |
background-color:#000000; |
||||||
} |
} |
||||||
|
|
||||||
#yellow{ |
#yellow{ |
||||||
background-color:#FFFF00; |
background-color:#FFFF00; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-dropdown, .selectBox-options li a { |
.selectBox-dropdown, .selectBox-options li a { |
||||||
line-height: 1.3 !important; |
line-height: 1.3 !important; |
||||||
font-size: 13px; |
font-size: 13px; |
||||||
} |
} |
||||||
|
|
||||||
.pager_button { |
.pager_button { |
||||||
padding: 3px 5px; |
padding: 3px 5px; |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
color: black; |
color: black; |
||||||
display: inline-block; |
display: inline-block; |
||||||
} |
} |
||||||
|
|
||||||
.pager_button.active { |
.pager_button.active { |
||||||
border-radius: 3px; |
border-radius: 3px; |
||||||
-webkit-border-radius: 3px; |
-webkit-border-radius: 3px; |
||||||
background-color: gray; |
background-color: gray; |
||||||
color: white; |
color: white; |
||||||
} |
} |
||||||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 214 B After Width: | Height: | Size: 214 B |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 931 B After Width: | Height: | Size: 931 B |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 475 B After Width: | Height: | Size: 475 B |
Before Width: | Height: | Size: 448 B After Width: | Height: | Size: 448 B |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -1,470 +1,470 @@ |
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
<!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"/> |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||||
<head> |
<head> |
||||||
<title>Google Image Search</title> |
<title>Google Image Search</title> |
||||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
||||||
<script type="text/javascript" src="locales/locales.js"></script> |
<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="http://www.google.com/uds"></script> |
||||||
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> |
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> |
||||||
<script type="text/javascript" src="select/jquery.selectBox.js"></script> |
<script type="text/javascript" src="select/jquery.selectBox.js"></script> |
||||||
<link type="text/css" rel="stylesheet" href="select/jquery.selectBox.css" /> |
<link type="text/css" rel="stylesheet" href="select/jquery.selectBox.css" /> |
||||||
<script type="text/javascript"> |
<script type="text/javascript"> |
||||||
//begin google API |
//begin google API |
||||||
google.load("search","1"); |
google.load("search","1"); |
||||||
|
|
||||||
var imageSearch; |
var imageSearch; |
||||||
var minHeight = 180; |
var minHeight = 180; |
||||||
var minWidht = 150; |
var minWidht = 150; |
||||||
var filtersDisplayed = false; //display or hide filters |
var filtersDisplayed = false; //display or hide filters |
||||||
|
|
||||||
function addPaginationLinks() { |
function addPaginationLinks() { |
||||||
|
|
||||||
// To paginate search results, use the cursor function. |
// To paginate search results, use the cursor function. |
||||||
var cursor = imageSearch.cursor; |
var cursor = imageSearch.cursor; |
||||||
var curPage = cursor.currentPageIndex; // check what page the app is on |
var curPage = cursor.currentPageIndex; // check what page the app is on |
||||||
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
||||||
for (var i = 0; i < cursor.pages.length; i++) { |
for (var i = 0; i < cursor.pages.length; i++) { |
||||||
var page = cursor.pages[i]; |
var page = cursor.pages[i]; |
||||||
|
|
||||||
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:imageSearch.gotoPage('+i+');').html(page.label).appendTo(pagesDiv); |
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:imageSearch.gotoPage('+i+');').html(page.label).appendTo(pagesDiv); |
||||||
if (curPage == i) { |
if (curPage == i) { |
||||||
link.addClass('active'); |
link.addClass('active'); |
||||||
} |
} |
||||||
} |
} |
||||||
$("#disc_nav_cont #resultFooter").remove(); |
$("#disc_nav_cont #resultFooter").remove(); |
||||||
pagesDiv.insertBefore($('#disclaimer')); |
pagesDiv.insertBefore($('#disclaimer')); |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragstart", imageDragging, false); |
this.addEventListener("dragstart", imageDragging, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragenter", imageDragenter, false); |
this.addEventListener("dragenter", imageDragenter, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragleave", imageDragleave, false); |
this.addEventListener("dragleave", imageDragleave, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragover", imageDragover, false); |
this.addEventListener("dragover", imageDragover, false); |
||||||
}) |
}) |
||||||
} |
} |
||||||
|
|
||||||
function searchComplete() { |
function searchComplete() { |
||||||
// Check that we got results |
// Check that we got results |
||||||
if (imageSearch.results && imageSearch.results.length > 0) { |
if (imageSearch.results && imageSearch.results.length > 0) { |
||||||
|
|
||||||
// Grab our content div, clear it. |
// Grab our content div, clear it. |
||||||
var contentDiv = $('#searchResult').empty(); |
var contentDiv = $('#searchResult').empty(); |
||||||
|
|
||||||
// Loop through our results, printing them to the page. |
// Loop through our results, printing them to the page. |
||||||
var results = imageSearch.results; |
var results = imageSearch.results; |
||||||
console.log(results); |
console.log(results); |
||||||
for (var i = 0; i < results.length; i++) { |
for (var i = 0; i < results.length; i++) { |
||||||
// For each result write it's title and image to the screen |
// For each result write it's title and image to the screen |
||||||
var result = results[i]; |
var result = results[i]; |
||||||
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
||||||
//var title = document.createElement('div'); |
//var title = document.createElement('div'); |
||||||
var iUrl = $("<input type='hidden'/>"); |
var iUrl = $("<input type='hidden'/>"); |
||||||
var iContent = $("<input type='hidden'/>"); |
var iContent = $("<input type='hidden'/>"); |
||||||
var iHeight = $("<input type='hidden'/>"); |
var iHeight = $("<input type='hidden'/>"); |
||||||
var iWidth = $("<input type='hidden'/>"); |
var iWidth = $("<input type='hidden'/>"); |
||||||
var iTitle = $("<input type='hidden'/>"); |
var iTitle = $("<input type='hidden'/>"); |
||||||
|
|
||||||
// We use titleNoFormatting so that no HTML tags are left in the |
// We use titleNoFormatting so that no HTML tags are left in the |
||||||
// title |
// title |
||||||
//title.innerHTML = result.title; |
//title.innerHTML = result.title; |
||||||
var newImg = document.createElement('img'); |
var newImg = document.createElement('img'); |
||||||
|
|
||||||
// There is also a result.url property which has the escaped version |
// There is also a result.url property which has the escaped version |
||||||
newImg.src = result.tbUrl; |
newImg.src = result.tbUrl; |
||||||
iUrl.attr("value", result.url); |
iUrl.attr("value", result.url); |
||||||
iContent.attr("value", result.contentNoFormatting); |
iContent.attr("value", result.contentNoFormatting); |
||||||
iHeight.attr("value", result.height); |
iHeight.attr("value", result.height); |
||||||
iWidth.attr("value", result.width); |
iWidth.attr("value", result.width); |
||||||
iTitle.attr("value",result.titleNoFormatting); |
iTitle.attr("value",result.titleNoFormatting); |
||||||
var imgWidth = (result.tbWidth > minWidht)?result.tbWidth:minWidht; |
var imgWidth = (result.tbWidth > minWidht)?result.tbWidth:minWidht; |
||||||
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
||||||
imgContainer.width(imgWidth).height(imgHeight); |
imgContainer.width(imgWidth).height(imgHeight); |
||||||
imgContainer.append($(newImg)); |
imgContainer.append($(newImg)); |
||||||
//imgContainer.append($(title)); |
//imgContainer.append($(title)); |
||||||
imgContainer.append(iUrl); |
imgContainer.append(iUrl); |
||||||
imgContainer.append(iContent); |
imgContainer.append(iContent); |
||||||
imgContainer.append(iHeight); |
imgContainer.append(iHeight); |
||||||
imgContainer.append(iWidth); |
imgContainer.append(iWidth); |
||||||
imgContainer.append(iTitle); |
imgContainer.append(iTitle); |
||||||
|
|
||||||
// Put our title + image in the content |
// Put our title + image in the content |
||||||
imgContainer.appendTo(contentDiv); |
imgContainer.appendTo(contentDiv); |
||||||
} |
} |
||||||
|
|
||||||
// Now add links to additional pages of search results. |
// Now add links to additional pages of search results. |
||||||
addPaginationLinks(imageSearch); |
addPaginationLinks(imageSearch); |
||||||
} |
} |
||||||
setTimeout(function(){ |
setTimeout(function(){ |
||||||
$(window).trigger('resize'); |
$(window).trigger('resize'); |
||||||
}, 1000); |
}, 1000); |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
function OnLoad() { |
function OnLoad() { |
||||||
|
|
||||||
// Create an Image Search instance. |
// Create an Image Search instance. |
||||||
imageSearch = new google.search.ImageSearch(); |
imageSearch = new google.search.ImageSearch(); |
||||||
|
|
||||||
// Set searchComplete as the callback function when a search is |
// Set searchComplete as the callback function when a search is |
||||||
// complete. The imageSearch object will have results in it. |
// complete. The imageSearch object will have results in it. |
||||||
imageSearch.setSearchCompleteCallback(this, searchComplete, null); |
imageSearch.setSearchCompleteCallback(this, searchComplete, null); |
||||||
|
|
||||||
imageSearch.setResultSetSize(8); |
imageSearch.setResultSetSize(8); |
||||||
//imageSearch.setQueryAddition("Subaru STI"); |
//imageSearch.setQueryAddition("Subaru STI"); |
||||||
// Find me a beautiful car. |
// Find me a beautiful car. |
||||||
//imageSearch.execute("Sankore"); |
//imageSearch.execute("Sankore"); |
||||||
|
|
||||||
// Include the required Google branding |
// Include the required Google branding |
||||||
google.search.Search.getBranding('branding'); |
google.search.Search.getBranding('branding'); |
||||||
} |
} |
||||||
google.setOnLoadCallback(OnLoad); |
google.setOnLoadCallback(OnLoad); |
||||||
//end of Google API |
//end of Google API |
||||||
|
|
||||||
//No google API below |
//No google API below |
||||||
|
|
||||||
function imageDragging(e){ |
function imageDragging(e){ |
||||||
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
||||||
//alert($(this).find("input:hidden").val()); |
//alert($(this).find("input:hidden").val()); |
||||||
} |
} |
||||||
|
|
||||||
function imageDragleave(e){ |
function imageDragleave(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
function imageDragover(e){ |
function imageDragover(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
function imageDragenter(e){ |
function imageDragenter(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
$(document).ready(function(){ |
$(document).ready(function(){ |
||||||
|
|
||||||
//variables |
//variables |
||||||
var mode = false; //search or view mode |
var mode = false; //search or view mode |
||||||
var hide = false; //hide or no main panel |
var hide = false; //hide or no main panel |
||||||
|
|
||||||
//basic containers and elements |
//basic containers and elements |
||||||
var lang = window.sankore ? sankore.locale().substr(0,2) : "en"; //locale language |
var lang = window.sankore ? sankore.locale().substr(0,2) : "en"; //locale language |
||||||
|
|
||||||
//localization |
//localization |
||||||
locale = locales[lang]; |
locale = locales[lang]; |
||||||
|
|
||||||
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
||||||
var disclaimer = $("<div id='disclaimer' class='disclaimer'>"+locale.disclaimer_title+"<div>").appendTo(disc_nav_cont); |
var disclaimer = $("<div id='disclaimer' class='disclaimer'>"+locale.disclaimer_title+"<div>").appendTo(disc_nav_cont); |
||||||
var search = $("<div id='search' class='search'>").appendTo("body"); |
var search = $("<div id='search' class='search'>").appendTo("body"); |
||||||
|
|
||||||
//var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
//var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
||||||
//var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
//var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
||||||
|
|
||||||
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
||||||
var subSearchFilter = $("<div id='subSearchFilter' 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 searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput); |
||||||
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
||||||
var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
||||||
|
|
||||||
//adding filters to the wgt |
//adding filters to the wgt |
||||||
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
||||||
.append($("<option value='0'>"+locale.def_opts_val_size+"</option>")) |
.append($("<option value='0'>"+locale.def_opts_val_size+"</option>")) |
||||||
.append($("<option value='1'>"+locale.size_small+"</option>")) |
.append($("<option value='1'>"+locale.size_small+"</option>")) |
||||||
.append($("<option value='2'>"+locale.size_medium+"</option>")) |
.append($("<option value='2'>"+locale.size_medium+"</option>")) |
||||||
.append($("<option value='3'>"+locale.size_large+"</option>")) |
.append($("<option value='3'>"+locale.size_large+"</option>")) |
||||||
.append($("<option value='4'>"+locale.size_extra_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); |
$("<div class='filterContainer'>").append("<span>"+locale.size_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter); |
||||||
|
|
||||||
selectFilter = $("<select id='fileTypeFilter' class='filterSelect'>") |
selectFilter = $("<select id='fileTypeFilter' class='filterSelect'>") |
||||||
.append($("<option value='0'>"+locale.def_opts_val_type+"</option>")) |
.append($("<option value='0'>"+locale.def_opts_val_type+"</option>")) |
||||||
.append($("<option value='1'>*.JPG</option>")) |
.append($("<option value='1'>*.JPG</option>")) |
||||||
.append($("<option value='2'>*.PNG</option>")) |
.append($("<option value='2'>*.PNG</option>")) |
||||||
.append($("<option value='3'>*.GIF</option>")) |
.append($("<option value='3'>*.GIF</option>")) |
||||||
.append($("<option value='4'>*.BMP</option>")); |
.append($("<option value='4'>*.BMP</option>")); |
||||||
$("<div class='filterContainer'>").append("<span>"+locale.file_type_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter); |
$("<div class='filterContainer'>").append("<span>"+locale.file_type_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter); |
||||||
|
|
||||||
selectFilter = $("<select id='typeFilter' class='filterSelect'>") |
selectFilter = $("<select id='typeFilter' class='filterSelect'>") |
||||||
.append($("<option value='0'>"+locale.def_opts_val_image+"</option>")) |
.append($("<option value='0'>"+locale.def_opts_val_image+"</option>")) |
||||||
.append($("<option value='1'>"+locale.image_type_faces+"</option>")) |
.append($("<option value='1'>"+locale.image_type_faces+"</option>")) |
||||||
.append($("<option value='2'>"+locale.image_type_photo+"</option>")) |
.append($("<option value='2'>"+locale.image_type_photo+"</option>")) |
||||||
.append($("<option value='3'>"+locale.image_type_clipart+"</option>")) |
.append($("<option value='3'>"+locale.image_type_clipart+"</option>")) |
||||||
.append($("<option value='4'>"+locale.image_type_lineart+"</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); |
$("<div class='filterContainer'>").append("<span>"+locale.image_type_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter); |
||||||
|
|
||||||
selectFilter = $("<select id='rightsFilter' class='filterSelect'>") |
selectFilter = $("<select id='rightsFilter' class='filterSelect'>") |
||||||
.append($("<option value='0'>"+locale.def_opts_val_copyright+"</option>")) |
.append($("<option value='0'>"+locale.def_opts_val_copyright+"</option>")) |
||||||
.append($("<option value='1'>"+locale.image_license_reuse+"</option>")) |
.append($("<option value='1'>"+locale.image_license_reuse+"</option>")) |
||||||
.append($("<option value='2'>"+locale.image_license_comm_reuse+"</option>")) |
.append($("<option value='2'>"+locale.image_license_comm_reuse+"</option>")) |
||||||
.append($("<option value='3'>"+locale.image_license_modif+"</option>")) |
.append($("<option value='3'>"+locale.image_license_modif+"</option>")) |
||||||
.append($("<option value='4'>"+locale.image_license_comm_modif+"</option>")); |
.append($("<option value='4'>"+locale.image_license_comm_modif+"</option>")); |
||||||
$("<div class='filterContainer'>").append("<span>"+locale.image_license_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter); |
$("<div class='filterContainer'>").append("<span>"+locale.image_license_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter); |
||||||
|
|
||||||
var colors_line = $('<div class="colors_line"></div>'); |
var colors_line = $('<div class="colors_line"></div>'); |
||||||
subSearchFilter.append(colors_line); |
subSearchFilter.append(colors_line); |
||||||
colors_line.html('<input type="radio" value="allcolor" id="color_shem_allcolor" class="custom" name="color" checked="true">\ |
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>\ |
<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">\ |
<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>\ |
<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">\ |
<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 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>\ |
<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">\ |
<input type="radio" value="red" id="design9" class="custom" name="color">\ |
||||||
<label id="red" class="filter_button button color" for="design9"></label>\ |
<label id="red" class="filter_button button color" for="design9"></label>\ |
||||||
<input type="radio" value="orange" id="design6" class="custom" name="color">\ |
<input type="radio" value="orange" id="design6" class="custom" name="color">\ |
||||||
<label id="orange" class="filter_button button color" for="design6"></label>\ |
<label id="orange" class="filter_button button color" for="design6"></label>\ |
||||||
<input type="radio" value="yellow" id="design12" class="custom" name="color">\ |
<input type="radio" value="yellow" id="design12" class="custom" name="color">\ |
||||||
<label id="yellow" class="filter_button button color" for="design12"></label>\ |
<label id="yellow" class="filter_button button color" for="design12"></label>\ |
||||||
<input type="radio" value="green" id="design5" class="custom" name="color">\ |
<input type="radio" value="green" id="design5" class="custom" name="color">\ |
||||||
<label id="green" class="filter_button button color" for="design5"></label>\ |
<label id="green" class="filter_button button color" for="design5"></label>\ |
||||||
<input type="radio" value="teal" id="design10" class="custom" name="color">\ |
<input type="radio" value="teal" id="design10" class="custom" name="color">\ |
||||||
<label id="teal" class="filter_button button color" for="design10"></label>\ |
<label id="teal" class="filter_button button color" for="design10"></label>\ |
||||||
<input type="radio" value="blue" id="design2" class="custom" name="color">\ |
<input type="radio" value="blue" id="design2" class="custom" name="color">\ |
||||||
<label id="blue" class="filter_button button color" for="design2"></label>\ |
<label id="blue" class="filter_button button color" for="design2"></label>\ |
||||||
<input type="radio" value="purple" id="design8" class="custom" name="color">\ |
<input type="radio" value="purple" id="design8" class="custom" name="color">\ |
||||||
<label id="purple" class="filter_button button color" for="design8"></label>\ |
<label id="purple" class="filter_button button color" for="design8"></label>\ |
||||||
<input type="radio" value="pink" id="design7" class="custom" name="color">\ |
<input type="radio" value="pink" id="design7" class="custom" name="color">\ |
||||||
<label id="pink" class="filter_button button color" for="design7"></label>\ |
<label id="pink" class="filter_button button color" for="design7"></label>\ |
||||||
<input type="radio" value="white" id="design11" class="custom" name="color">\ |
<input type="radio" value="white" id="design11" class="custom" name="color">\ |
||||||
<label id="white" class="filter_button button color" for="design11"></label>\ |
<label id="white" class="filter_button button color" for="design11"></label>\ |
||||||
<input type="radio" value="gray" id="design4" class="custom" name="color">\ |
<input type="radio" value="gray" id="design4" class="custom" name="color">\ |
||||||
<label id="gray" class="filter_button button color" for="design4"></label>\ |
<label id="gray" class="filter_button button color" for="design4"></label>\ |
||||||
<input type="radio" value="black" id="design1" class="custom" name="color">\ |
<input type="radio" value="black" id="design1" class="custom" name="color">\ |
||||||
<label id="black" class="filter_button button color" for="design1"></label>\ |
<label id="black" class="filter_button button color" for="design1"></label>\ |
||||||
<input type="radio" value="brown" id="design3" class="custom" name="color">\ |
<input type="radio" value="brown" id="design3" class="custom" name="color">\ |
||||||
<label id="brown" class="filter_button button color" for="design3"></label>'); |
<label id="brown" class="filter_button button color" for="design3"></label>'); |
||||||
|
|
||||||
//mouse click actions |
//mouse click actions |
||||||
toggleFilters.click(function(){ |
toggleFilters.click(function(){ |
||||||
if(filtersDisplayed){ |
if(filtersDisplayed){ |
||||||
subSearchFilter.hide(); |
subSearchFilter.hide(); |
||||||
//$("#search").height(46); |
//$("#search").height(46); |
||||||
toggleFilters.css("background-image","url(images/down.png)"); |
toggleFilters.css("background-image","url(images/down.png)"); |
||||||
filtersDisplayed = false; |
filtersDisplayed = false; |
||||||
} else { |
} else { |
||||||
//$("#search").height(120); |
//$("#search").height(120); |
||||||
subSearchFilter.show(); |
subSearchFilter.show(); |
||||||
toggleFilters.css("background-image","url(images/up.png)"); |
toggleFilters.css("background-image","url(images/up.png)"); |
||||||
filtersDisplayed = true; |
filtersDisplayed = true; |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
/*togglePages.click(function(event){ |
/*togglePages.click(function(event){ |
||||||
if(mode){ |
if(mode){ |
||||||
hide = false; |
hide = false; |
||||||
$("#search, #disclaimer").slideDown('fast', function(){ |
$("#search, #disclaimer").slideDown('fast', function(){ |
||||||
toggleIcon.css("background-image","url(images/trgUp.png)"); |
toggleIcon.css("background-image","url(images/trgUp.png)"); |
||||||
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
||||||
}); |
}); |
||||||
mode = false; |
mode = false; |
||||||
} else { |
} else { |
||||||
hide = true; |
hide = true; |
||||||
$("#search, #disclaimer").slideUp('fast', function(){ |
$("#search, #disclaimer").slideUp('fast', function(){ |
||||||
toggleIcon.css("background-image","url(images/trgDown.png)"); |
toggleIcon.css("background-image","url(images/trgDown.png)"); |
||||||
togglePages.appendTo("body").css("top","0"); |
togglePages.appendTo("body").css("top","0"); |
||||||
}); |
}); |
||||||
mode = true; |
mode = true; |
||||||
} |
} |
||||||
});*/ |
});*/ |
||||||
|
|
||||||
searchButton.click(function(){ |
searchButton.click(function(){ |
||||||
if(!hide){ |
if(!hide){ |
||||||
checkFilters(imageSearch).execute(searchInput.val()); |
checkFilters(imageSearch).execute(searchInput.val()); |
||||||
//togglePages.trigger("click"); |
//togglePages.trigger("click"); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
searchInput.keydown(function(event){ |
searchInput.keydown(function(event){ |
||||||
if(!hide){ |
if(!hide){ |
||||||
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
||||||
checkFilters(imageSearch).execute(searchInput.val()); |
checkFilters(imageSearch).execute(searchInput.val()); |
||||||
//togglePages.trigger("click"); |
//togglePages.trigger("click"); |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
$('.filterSelect, .colors_line input[name=color]').change(function(){ |
$('.filterSelect, .colors_line input[name=color]').change(function(){ |
||||||
checkFilters(imageSearch).execute(searchInput.val()); |
checkFilters(imageSearch).execute(searchInput.val()); |
||||||
}); |
}); |
||||||
|
|
||||||
$(".imgContainer").live("click",function(){ |
$(".imgContainer").live("click",function(){ |
||||||
sankore.sendFileMetadata(createMetaData($(this))); |
sankore.sendFileMetadata(createMetaData($(this))); |
||||||
}); |
}); |
||||||
|
|
||||||
//checking filters |
//checking filters |
||||||
function checkFilters(imgSearch){ |
function checkFilters(imgSearch){ |
||||||
var value = $("#sizeFilter option:selected").val(); |
var value = $("#sizeFilter option:selected").val(); |
||||||
switch(value){ |
switch(value){ |
||||||
case "0": |
case "0": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,null); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,null); |
||||||
break; |
break; |
||||||
case "1": |
case "1": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_SMALL); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_SMALL); |
||||||
break; |
break; |
||||||
case "2": |
case "2": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_MEDIUM); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_MEDIUM); |
||||||
break; |
break; |
||||||
case "3": |
case "3": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_LARGE); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_LARGE); |
||||||
break; |
break; |
||||||
case "4": |
case "4": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,google.search.ImageSearch.IMAGESIZE_EXTRA_LARGE); |
||||||
break; |
break; |
||||||
} |
} |
||||||
|
|
||||||
value = $(".colors_line input[name=color]:checked").val(); |
value = $(".colors_line input[name=color]:checked").val(); |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,null); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,null); |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,null); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,null); |
||||||
switch(value){ |
switch(value){ |
||||||
case "allcolor": |
case "allcolor": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,null); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,null); |
||||||
break; |
break; |
||||||
case "grayscale": |
case "grayscale": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,google.search.ImageSearch.COLORIZATION_GRAYSCALE); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,google.search.ImageSearch.COLORIZATION_GRAYSCALE); |
||||||
break; |
break; |
||||||
case "color": |
case "color": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,google.search.ImageSearch.COLORIZATION_COLOR); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,google.search.ImageSearch.COLORIZATION_COLOR); |
||||||
break; |
break; |
||||||
case "black": |
case "black": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BLACK); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BLACK); |
||||||
break; |
break; |
||||||
case "blue": |
case "blue": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BLUE); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BLUE); |
||||||
break; |
break; |
||||||
case "brown": |
case "brown": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BROWN); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BROWN); |
||||||
break; |
break; |
||||||
case "gray": |
case "gray": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_GRAY); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_GRAY); |
||||||
break; |
break; |
||||||
case "green": |
case "green": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_GREEN); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_GREEN); |
||||||
break; |
break; |
||||||
case "orange": |
case "orange": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_ORANGE); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_ORANGE); |
||||||
break; |
break; |
||||||
case "pink": |
case "pink": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_PINK); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_PINK); |
||||||
break; |
break; |
||||||
case "purple": |
case "purple": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_PURPLE); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_PURPLE); |
||||||
break; |
break; |
||||||
case "red": |
case "red": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_RED); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_RED); |
||||||
break; |
break; |
||||||
case "teal": |
case "teal": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_TEAL); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_TEAL); |
||||||
break; |
break; |
||||||
case "white": |
case "white": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_WHITE); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_WHITE); |
||||||
break; |
break; |
||||||
case "yellow": |
case "yellow": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_YELLOW); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_YELLOW); |
||||||
break; |
break; |
||||||
} |
} |
||||||
|
|
||||||
value = $("#fileTypeFilter option:selected").val(); |
value = $("#fileTypeFilter option:selected").val(); |
||||||
switch(value){ |
switch(value){ |
||||||
case "0": |
case "0": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,null); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,null); |
||||||
break; |
break; |
||||||
case "1": |
case "1": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_JPG); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_JPG); |
||||||
break; |
break; |
||||||
case "2": |
case "2": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_PNG); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_PNG); |
||||||
break; |
break; |
||||||
case "3": |
case "3": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_GIF); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_GIF); |
||||||
break; |
break; |
||||||
case "4": |
case "4": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_BMP); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_FILETYPE,google.search.ImageSearch.FILETYPE_BMP); |
||||||
break; |
break; |
||||||
} |
} |
||||||
|
|
||||||
value = $("#typeFilter option:selected").val(); |
value = $("#typeFilter option:selected").val(); |
||||||
switch(value){ |
switch(value){ |
||||||
case "0": |
case "0": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,null); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,null); |
||||||
break; |
break; |
||||||
case "1": |
case "1": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_FACES); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_FACES); |
||||||
break; |
break; |
||||||
case "2": |
case "2": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_PHOTO); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_PHOTO); |
||||||
break; |
break; |
||||||
case "3": |
case "3": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_CLIPART); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_CLIPART); |
||||||
break; |
break; |
||||||
case "4": |
case "4": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_LINEART); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGETYPE,google.search.ImageSearch.IMAGETYPE_LINEART); |
||||||
break; |
break; |
||||||
} |
} |
||||||
|
|
||||||
value = $("#rightsFilter option:selected").val(); |
value = $("#rightsFilter option:selected").val(); |
||||||
switch(value){ |
switch(value){ |
||||||
case "0": |
case "0": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,null); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,null); |
||||||
break; |
break; |
||||||
case "1": |
case "1": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_REUSE); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_REUSE); |
||||||
break; |
break; |
||||||
case "2": |
case "2": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_COMERCIAL_REUSE); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_COMERCIAL_REUSE); |
||||||
break; |
break; |
||||||
case "3": |
case "3": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_MODIFICATION); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_MODIFICATION); |
||||||
break; |
break; |
||||||
case "4": |
case "4": |
||||||
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_COMMERCIAL_MODIFICATION); |
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_RIGHTS,google.search.ImageSearch.RIGHTS_COMMERCIAL_MODIFICATION); |
||||||
break; |
break; |
||||||
} |
} |
||||||
return imgSearch; |
return imgSearch; |
||||||
} |
} |
||||||
|
|
||||||
$(window).resize(function(){ |
$(window).resize(function(){ |
||||||
var width = "200px"; |
var width = "200px"; |
||||||
if ($('#search').width() < 230) { |
if ($('#search').width() < 230) { |
||||||
width = $("#search").width()-40; |
width = $("#search").width()-40; |
||||||
} else { |
} else { |
||||||
width = "200px"; |
width = "200px"; |
||||||
} |
} |
||||||
$('select').selectBox('destroy').css('width', width).selectBox(); |
$('select').selectBox('destroy').css('width', width).selectBox(); |
||||||
}); |
}); |
||||||
|
|
||||||
$(window).trigger("resize"); |
$(window).trigger("resize"); |
||||||
|
|
||||||
}); |
}); |
||||||
|
|
||||||
function createMetaData(parent){ |
function createMetaData(parent){ |
||||||
var meta = ""; |
var meta = ""; |
||||||
meta = "<metadata><data><key>Type</key><value>Image</value></data><data><key>Url</key><value>" + |
meta = "<metadata><data><key>Type</key><value>Image</value></data><data><key>Url</key><value>" + |
||||||
parent.find("input:hidden").eq(0).val() + |
parent.find("input:hidden").eq(0).val() + |
||||||
"</value></data><data><key>thumbnailUrl</key><value>" + |
"</value></data><data><key>thumbnailUrl</key><value>" + |
||||||
parent.find("img").attr("src") + |
parent.find("img").attr("src") + |
||||||
"</value></data><data><key>Content</key><value>" + |
"</value></data><data><key>Content</key><value>" + |
||||||
parent.find("input:hidden").eq(1).val() + |
parent.find("input:hidden").eq(1).val() + |
||||||
"</value></data><data><key>Height</key><value>" + |
"</value></data><data><key>Height</key><value>" + |
||||||
parent.find("input:hidden").eq(2).val() + |
parent.find("input:hidden").eq(2).val() + |
||||||
"</value></data><data><key>Width</key><value>" + |
"</value></data><data><key>Width</key><value>" + |
||||||
parent.find("input:hidden").eq(3).val() + |
parent.find("input:hidden").eq(3).val() + |
||||||
"</value></data><data><key>Title</key><value>" + |
"</value></data><data><key>Title</key><value>" + |
||||||
parent.find("input:hidden").eq(4).val() + |
parent.find("input:hidden").eq(4).val() + |
||||||
"</value></data></metadata>"; |
"</value></data></metadata>"; |
||||||
return meta; |
return meta; |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
</head> |
</head> |
||||||
<body style="font-family: Arial;border: 0 none;"> |
<body style="font-family: Arial;border: 0 none;"> |
||||||
<div id="searchResult"></div> |
<div id="searchResult"></div> |
||||||
</body> |
</body> |
||||||
</html> |
</html> |
||||||
|
@ -1,80 +1,80 @@ |
|||||||
var locales = { |
var locales = { |
||||||
'en': { |
'en': { |
||||||
'def_opts_val_size': 'Any', |
'def_opts_val_size': 'Any', |
||||||
'def_opts_val_type': 'Any', |
'def_opts_val_type': 'Any', |
||||||
'def_opts_val_image': 'Any', |
'def_opts_val_image': 'Any', |
||||||
'def_opts_val_copyright': 'Any', |
'def_opts_val_copyright': 'Any', |
||||||
'size_title': 'Size', |
'size_title': 'Size', |
||||||
'size_small': 'Small', |
'size_small': 'Small', |
||||||
'size_medium': 'Medium', |
'size_medium': 'Medium', |
||||||
'size_large': 'Large', |
'size_large': 'Large', |
||||||
'size_extra_large': 'Extra large', |
'size_extra_large': 'Extra large', |
||||||
'colorization_title': 'Colorization', |
'colorization_title': 'Colorization', |
||||||
'coloriz_grayscale': 'Grayscale', |
'coloriz_grayscale': 'Grayscale', |
||||||
'coloriz_color': 'Color', |
'coloriz_color': 'Color', |
||||||
'main_color_title': 'Main color', |
'main_color_title': 'Main color', |
||||||
'm_color_black': 'Black', |
'm_color_black': 'Black', |
||||||
'm_color_blue': 'Blue', |
'm_color_blue': 'Blue', |
||||||
'm_color_brown': 'Brown', |
'm_color_brown': 'Brown', |
||||||
'm_color_gray': 'Gray', |
'm_color_gray': 'Gray', |
||||||
'm_color_green': 'Green', |
'm_color_green': 'Green', |
||||||
'm_color_orange': 'Orange', |
'm_color_orange': 'Orange', |
||||||
'm_color_pink': 'Pink', |
'm_color_pink': 'Pink', |
||||||
'm_color_purple': 'Purple', |
'm_color_purple': 'Purple', |
||||||
'm_color_red': 'Red', |
'm_color_red': 'Red', |
||||||
'm_color_teal': 'Teal', |
'm_color_teal': 'Teal', |
||||||
'm_color_white': 'White', |
'm_color_white': 'White', |
||||||
'm_color_yellow': 'Yellow', |
'm_color_yellow': 'Yellow', |
||||||
'file_type_title': 'File type', |
'file_type_title': 'File type', |
||||||
'image_type_title': 'Image type', |
'image_type_title': 'Image type', |
||||||
'image_type_faces': 'Faces', |
'image_type_faces': 'Faces', |
||||||
'image_type_photo': 'Photo', |
'image_type_photo': 'Photo', |
||||||
'image_type_clipart': 'Clipart', |
'image_type_clipart': 'Clipart', |
||||||
'image_type_lineart': 'Lineart', |
'image_type_lineart': 'Lineart', |
||||||
'image_license_title': 'Licence', |
'image_license_title': 'Licence', |
||||||
'image_license_reuse': 'Reuse', |
'image_license_reuse': 'Reuse', |
||||||
'image_license_comm_reuse': 'Commercial reuse', |
'image_license_comm_reuse': 'Commercial reuse', |
||||||
'image_license_modif': 'Modification', |
'image_license_modif': 'Modification', |
||||||
'image_license_comm_modif': 'Commercial modification', |
'image_license_comm_modif': 'Commercial modification', |
||||||
'disclaimer_title': 'This API is based on Google Image. Please refer to terms of use of this service.' |
'disclaimer_title': 'This API is based on Google Image. Please refer to terms of use of this service.' |
||||||
}, |
}, |
||||||
'fr': { |
'fr': { |
||||||
'def_opts_val_size': 'Toutes', |
'def_opts_val_size': 'Toutes', |
||||||
'def_opts_val_type': 'Tous', |
'def_opts_val_type': 'Tous', |
||||||
'def_opts_val_image': 'Toutes', |
'def_opts_val_image': 'Toutes', |
||||||
'def_opts_val_copyright': 'Tous', |
'def_opts_val_copyright': 'Tous', |
||||||
'size_title': 'Tailles', |
'size_title': 'Tailles', |
||||||
'size_small': 'Petite', |
'size_small': 'Petite', |
||||||
'size_medium': 'Moyenne', |
'size_medium': 'Moyenne', |
||||||
'size_large': 'Grande', |
'size_large': 'Grande', |
||||||
'size_extra_large': 'Extra large', |
'size_extra_large': 'Extra large', |
||||||
'colorization_title': 'Couleurs de l\'image', |
'colorization_title': 'Couleurs de l\'image', |
||||||
'coloriz_grayscale': 'Noir et blanc', |
'coloriz_grayscale': 'Noir et blanc', |
||||||
'coloriz_color': 'En couleur', |
'coloriz_color': 'En couleur', |
||||||
'main_color_title': 'Couleur électronique', |
'main_color_title': 'Couleur électronique', |
||||||
'm_color_black': 'Noir', |
'm_color_black': 'Noir', |
||||||
'm_color_blue': 'Bleu', |
'm_color_blue': 'Bleu', |
||||||
'm_color_brown': 'Brun', |
'm_color_brown': 'Brun', |
||||||
'm_color_gray': 'Gris', |
'm_color_gray': 'Gris', |
||||||
'm_color_green': 'Vert', |
'm_color_green': 'Vert', |
||||||
'm_color_orange': 'Orange', |
'm_color_orange': 'Orange', |
||||||
'm_color_pink': 'Rose', |
'm_color_pink': 'Rose', |
||||||
'm_color_purple': 'Pourpre', |
'm_color_purple': 'Pourpre', |
||||||
'm_color_red': 'Rouge', |
'm_color_red': 'Rouge', |
||||||
'm_color_teal': 'Sarcelle', |
'm_color_teal': 'Sarcelle', |
||||||
'm_color_white': 'Blanc', |
'm_color_white': 'Blanc', |
||||||
'm_color_yellow': 'Jaune', |
'm_color_yellow': 'Jaune', |
||||||
'file_type_title': 'Types de fichier', |
'file_type_title': 'Types de fichier', |
||||||
'image_type_title': 'Types d\'image', |
'image_type_title': 'Types d\'image', |
||||||
'image_type_faces': 'Visages', |
'image_type_faces': 'Visages', |
||||||
'image_type_photo': 'Photo', |
'image_type_photo': 'Photo', |
||||||
'image_type_clipart': 'Images clipart', |
'image_type_clipart': 'Images clipart', |
||||||
'image_type_lineart': 'Dessins au trait', |
'image_type_lineart': 'Dessins au trait', |
||||||
'image_license_title': 'Droits d\'usage', |
'image_license_title': 'Droits d\'usage', |
||||||
'image_license_reuse': 'Usage, distribution', |
'image_license_reuse': 'Usage, distribution', |
||||||
'image_license_comm_reuse': 'Usage, distribution, commercial', |
'image_license_comm_reuse': 'Usage, distribution, commercial', |
||||||
'image_license_modif': 'Usage, distribution, modification', |
'image_license_modif': 'Usage, distribution, modification', |
||||||
'image_license_comm_modif': 'Usage, distribution, modification, commercial', |
'image_license_comm_modif': 'Usage, distribution, modification, commercial', |
||||||
'disclaimer_title': 'Cette recherche utilise les services de Google Images. Veuillez vous référer aux conditions d\'utilisation de ce service.' |
'disclaimer_title': 'Cette recherche utilise les services de Google Images. Veuillez vous référer aux conditions d\'utilisation de ce service.' |
||||||
} |
} |
||||||
}; |
}; |
||||||
|
Before Width: | Height: | Size: 64 B After Width: | Height: | Size: 64 B |
@ -1,150 +1,150 @@ |
|||||||
/* Dropdown control */ |
/* Dropdown control */ |
||||||
.selectBox-dropdown { |
.selectBox-dropdown { |
||||||
min-width: 60px; |
min-width: 60px; |
||||||
position: relative; |
position: relative; |
||||||
/*border: solid 1px #BBB;*/ |
/*border: solid 1px #BBB;*/ |
||||||
line-height: 1.5; |
line-height: 1.5; |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
text-align: left; |
text-align: left; |
||||||
color: #000; |
color: #000; |
||||||
outline: none; |
outline: none; |
||||||
vertical-align: middle; |
vertical-align: middle; |
||||||
background: #F2F2F2; |
background: #F2F2F2; |
||||||
background: -moz-linear-gradient(top, #F8F8F8 1%, #E1E1E1 100%); |
background: -moz-linear-gradient(top, #F8F8F8 1%, #E1E1E1 100%); |
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #F8F8F8), color-stop(100%, #E1E1E1)); |
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #F8F8F8), color-stop(100%, #E1E1E1)); |
||||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#E1E1E1', GradientType=0); |
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#E1E1E1', GradientType=0); |
||||||
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .75); |
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .75); |
||||||
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .75); |
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .75); |
||||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .75); |
box-shadow: 0 1px 0 rgba(255, 255, 255, .75); |
||||||
-webkit-border-radius: 4px; |
-webkit-border-radius: 4px; |
||||||
-moz-border-radius: 4px; |
-moz-border-radius: 4px; |
||||||
border-radius: 4px; |
border-radius: 4px; |
||||||
display: inline-block; |
display: inline-block; |
||||||
cursor: default; |
cursor: default; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-dropdown:focus, |
.selectBox-dropdown:focus, |
||||||
.selectBox-dropdown:focus .selectBox-arrow { |
.selectBox-dropdown:focus .selectBox-arrow { |
||||||
border-color: #666; |
border-color: #666; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-dropdown.selectBox-menuShowing { |
.selectBox-dropdown.selectBox-menuShowing { |
||||||
-moz-border-radius-bottomleft: 0; |
-moz-border-radius-bottomleft: 0; |
||||||
-moz-border-radius-bottomright: 0; |
-moz-border-radius-bottomright: 0; |
||||||
-webkit-border-bottom-left-radius: 0; |
-webkit-border-bottom-left-radius: 0; |
||||||
-webkit-border-bottom-right-radius: 0; |
-webkit-border-bottom-right-radius: 0; |
||||||
border-bottom-left-radius: 0; |
border-bottom-left-radius: 0; |
||||||
border-bottom-right-radius: 0; |
border-bottom-right-radius: 0; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-dropdown .selectBox-label { |
.selectBox-dropdown .selectBox-label { |
||||||
padding: 2px 8px; |
padding: 2px 8px; |
||||||
display: inline-block; |
display: inline-block; |
||||||
white-space: nowrap; |
white-space: nowrap; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-dropdown .selectBox-arrow { |
.selectBox-dropdown .selectBox-arrow { |
||||||
position: absolute; |
position: absolute; |
||||||
top: 0; |
top: 0; |
||||||
right: 0; |
right: 0; |
||||||
width: 23px; |
width: 23px; |
||||||
height: 100%; |
height: 100%; |
||||||
background: url(jquery.selectBox-arrow.gif) 50% center no-repeat; |
background: url(jquery.selectBox-arrow.gif) 50% center no-repeat; |
||||||
border-left: solid 1px #BBB; |
border-left: solid 1px #BBB; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
/* Dropdown menu */ |
/* Dropdown menu */ |
||||||
.selectBox-dropdown-menu { |
.selectBox-dropdown-menu { |
||||||
position: absolute; |
position: absolute; |
||||||
z-index: 99999; |
z-index: 99999; |
||||||
max-height: 200px; |
max-height: 200px; |
||||||
min-height: 1em; |
min-height: 1em; |
||||||
border: solid 1px #BBB; /* should be the same border width as .selectBox-dropdown */ |
border: solid 1px #BBB; /* should be the same border width as .selectBox-dropdown */ |
||||||
background: #FFF; |
background: #FFF; |
||||||
-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .2); |
-moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .2); |
||||||
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .2); |
-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .2); |
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, .2); |
box-shadow: 0 2px 6px rgba(0, 0, 0, .2); |
||||||
overflow: auto; |
overflow: auto; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
/* Inline control */ |
/* Inline control */ |
||||||
.selectBox-inline { |
.selectBox-inline { |
||||||
min-width: 150px; |
min-width: 150px; |
||||||
outline: none; |
outline: none; |
||||||
border: solid 1px #BBB; |
border: solid 1px #BBB; |
||||||
background: #FFF; |
background: #FFF; |
||||||
display: inline-block; |
display: inline-block; |
||||||
-webkit-border-radius: 4px; |
-webkit-border-radius: 4px; |
||||||
-moz-border-radius: 4px; |
-moz-border-radius: 4px; |
||||||
border-radius: 4px; |
border-radius: 4px; |
||||||
overflow: auto; |
overflow: auto; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-inline:focus { |
.selectBox-inline:focus { |
||||||
border-color: #666; |
border-color: #666; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
/* Options */ |
/* Options */ |
||||||
.selectBox-options, |
.selectBox-options, |
||||||
.selectBox-options LI, |
.selectBox-options LI, |
||||||
.selectBox-options LI A { |
.selectBox-options LI A { |
||||||
list-style: none; |
list-style: none; |
||||||
display: block; |
display: block; |
||||||
cursor: default; |
cursor: default; |
||||||
padding: 0; |
padding: 0; |
||||||
margin: 0; |
margin: 0; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-options LI A { |
.selectBox-options LI A { |
||||||
line-height: 1.5; |
line-height: 1.5; |
||||||
padding: 0 .5em; |
padding: 0 .5em; |
||||||
white-space: nowrap; |
white-space: nowrap; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
background: 6px center no-repeat; |
background: 6px center no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-options LI.selectBox-hover A { |
.selectBox-options LI.selectBox-hover A { |
||||||
background-color: #EEE; |
background-color: #EEE; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-options LI.selectBox-disabled A { |
.selectBox-options LI.selectBox-disabled A { |
||||||
color: #888; |
color: #888; |
||||||
background-color: transparent; |
background-color: transparent; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-options LI.selectBox-selected A { |
.selectBox-options LI.selectBox-selected A { |
||||||
background-color: #C8DEF4; |
background-color: #C8DEF4; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-options .selectBox-optgroup { |
.selectBox-options .selectBox-optgroup { |
||||||
color: #666; |
color: #666; |
||||||
background: #EEE; |
background: #EEE; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
line-height: 1.5; |
line-height: 1.5; |
||||||
padding: 0 .3em; |
padding: 0 .3em; |
||||||
white-space: nowrap; |
white-space: nowrap; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
/* Disabled state */ |
/* Disabled state */ |
||||||
.selectBox.selectBox-disabled { |
.selectBox.selectBox-disabled { |
||||||
color: #888 !important; |
color: #888 !important; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-dropdown.selectBox-disabled .selectBox-arrow { |
.selectBox-dropdown.selectBox-disabled .selectBox-arrow { |
||||||
opacity: .5; |
opacity: .5; |
||||||
filter: alpha(opacity=50); |
filter: alpha(opacity=50); |
||||||
border-color: #666; |
border-color: #666; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-inline.selectBox-disabled { |
.selectBox-inline.selectBox-disabled { |
||||||
color: #888 !important; |
color: #888 !important; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-inline.selectBox-disabled .selectBox-options A { |
.selectBox-inline.selectBox-disabled .selectBox-options A { |
||||||
background-color: transparent !important; |
background-color: transparent !important; |
||||||
} |
} |
@ -1,315 +1,315 @@ |
|||||||
html, body{ |
html, body{ |
||||||
width: 100%; |
width: 100%; |
||||||
padding: 0; |
padding: 0; |
||||||
height: auto; |
height: auto; |
||||||
background-color: white; |
background-color: white; |
||||||
margin: 0; |
margin: 0; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar { |
::-webkit-scrollbar { |
||||||
width: 14px; |
width: 14px; |
||||||
background-color:white; |
background-color:white; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb { |
::-webkit-scrollbar-thumb { |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:start{ |
::-webkit-scrollbar-button:vertical:start{ |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
background-image: url(../images/trgUp.png); |
background-image: url(../images/trgUp.png); |
||||||
background-size: 8px auto; |
background-size: 8px auto; |
||||||
background-position: center; |
background-position: center; |
||||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
::-webkit-scrollbar-button:vertical:end{ |
::-webkit-scrollbar-button:vertical:end{ |
||||||
border-radius: 10px; |
border-radius: 10px; |
||||||
background-color:lightgray; |
background-color:lightgray; |
||||||
background-image: url(../images/trgDown.png); |
background-image: url(../images/trgDown.png); |
||||||
background-size: 8px auto; |
background-size: 8px auto; |
||||||
background-position: center; |
background-position: center; |
||||||
background-repeat: no-repeat; |
background-repeat: no-repeat; |
||||||
border: 2px solid gray; |
border: 2px solid gray; |
||||||
} |
} |
||||||
|
|
||||||
a { |
a { |
||||||
text-decoration: underline; |
text-decoration: underline; |
||||||
} |
} |
||||||
|
|
||||||
#disc_nav_cont{ |
#disc_nav_cont{ |
||||||
height: auto; |
height: auto; |
||||||
position: fixed; |
position: fixed; |
||||||
left: 0; |
left: 0; |
||||||
bottom: 0; |
bottom: 0; |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
|
|
||||||
.disclaimer{ |
.disclaimer{ |
||||||
padding: 5px; |
padding: 5px; |
||||||
text-align: center; |
text-align: center; |
||||||
background-color: #BBBBBB; |
background-color: #BBBBBB; |
||||||
border-top: solid 4px #EEEEEE; |
border-top: solid 4px #EEEEEE; |
||||||
border-bottom: none; |
border-bottom: none; |
||||||
font-size: 12px; |
font-size: 12px; |
||||||
} |
} |
||||||
|
|
||||||
.resultFooter{ |
.resultFooter{ |
||||||
width: 100%; |
width: 100%; |
||||||
padding: 3px; |
padding: 3px; |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
font-size: x-large; |
font-size: x-large; |
||||||
text-align: center; |
text-align: center; |
||||||
background-color: white; |
background-color: white; |
||||||
} |
} |
||||||
|
|
||||||
#searchResult { |
#searchResult { |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
text-align: center; |
text-align: center; |
||||||
margin-top: 50px; |
margin-top: 50px; |
||||||
margin-bottom: 50px; |
margin-bottom: 85px; |
||||||
} |
} |
||||||
|
|
||||||
.search{ |
.search{ |
||||||
position: fixed; |
position: fixed; |
||||||
top: 0; |
top: 0; |
||||||
left: 0; |
left: 0; |
||||||
padding: 5px; |
padding: 5px; |
||||||
background-color: #BBBBBB; |
background-color: #BBBBBB; |
||||||
border-bottom: solid 4px #EEEEEE; |
border-bottom: solid 4px #EEEEEE; |
||||||
} |
} |
||||||
|
|
||||||
.search, |
.search, |
||||||
.disclaimer { |
.disclaimer { |
||||||
width: 100%; |
width: 100%; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.searchInput{ |
.searchInput{ |
||||||
padding: 3px; |
padding: 3px; |
||||||
float: left; |
float: left; |
||||||
width: 100%; |
width: 100%; |
||||||
border-radius: 3px; |
border-radius: 3px; |
||||||
border-style: none; |
border-style: none; |
||||||
height: 22px; |
height: 22px; |
||||||
line-height: 18px; |
line-height: 18px; |
||||||
vertical-align: middle; |
vertical-align: middle; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.searchButton{ |
.searchButton{ |
||||||
background: url("../images/search_app.png") -38px -38px no-repeat; |
background: url("../images/search_app.png") -38px -38px no-repeat; |
||||||
width: 24px; |
width: 24px; |
||||||
height: 24px; |
height: 24px; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
position: absolute; |
position: absolute; |
||||||
right: 30px; |
right: 30px; |
||||||
top: 9px; |
top: 9px; |
||||||
margin-left: -2px; |
margin-left: -2px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
.subSearch{ |
.subSearch{ |
||||||
margin: 0; |
margin: 0; |
||||||
float: left; |
float: left; |
||||||
} |
} |
||||||
|
|
||||||
#subSearchInput{ |
#subSearchInput{ |
||||||
width: 100%; |
width: 100%; |
||||||
float: left; |
float: left; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
padding: 5px; |
padding: 5px; |
||||||
padding-right: 26px; |
padding-right: 26px; |
||||||
} |
} |
||||||
|
|
||||||
#subSearchFilter{ |
#subSearchFilter{ |
||||||
width: 100%; |
width: 100%; |
||||||
float: left; |
float: left; |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.searchResult{ |
.searchResult{ |
||||||
width: 98%; |
width: 98%; |
||||||
padding: 3px; |
padding: 3px; |
||||||
background-color:#123456; |
background-color:#123456; |
||||||
} |
} |
||||||
|
|
||||||
.imgContainer{ |
.imgContainer{ |
||||||
display: inline-block; |
display: inline-block; |
||||||
padding: 3px; |
padding: 3px; |
||||||
margin: 3px; |
margin: 3px; |
||||||
text-align: center; |
text-align: center; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
font-size: small; |
font-size: small; |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
border: 1px solid #666; |
border: 1px solid #666; |
||||||
border-radius: 5px; |
border-radius: 5px; |
||||||
-webkit-box-shadow: #dadada -1px 0 4px; |
-webkit-box-shadow: #dadada -1px 0 4px; |
||||||
-webkit-border-radius: 5px; |
-webkit-border-radius: 5px; |
||||||
box-shadow: #666 -1px 0 4px; |
box-shadow: #666 -1px 0 4px; |
||||||
vertical-align: top; |
vertical-align: top; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
.filterContainer{ |
.filterContainer{ |
||||||
float: left; |
float: left; |
||||||
margin: 2px; |
margin: 2px; |
||||||
padding: 2px; |
padding: 2px; |
||||||
font-size: 14px; |
font-size: 14px; |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
.filterSelect{ |
.filterSelect{ |
||||||
border-style:none; |
border-style:none; |
||||||
-webkit-border-top-right-radius: 15px; |
-webkit-border-top-right-radius: 15px; |
||||||
-webkit-border-bottom-right-radius: 15px; |
-webkit-border-bottom-right-radius: 15px; |
||||||
-moz-border-radius-topright: 15px; |
-moz-border-radius-topright: 15px; |
||||||
-moz-border-radius-bottomright: 15px; |
-moz-border-radius-bottomright: 15px; |
||||||
border-top-right-radius: 15px; |
border-top-right-radius: 15px; |
||||||
margin-top: 2px; |
margin-top: 2px; |
||||||
width: 100%; |
width: 100%; |
||||||
} |
} |
||||||
|
|
||||||
span{ |
span{ |
||||||
font-family: Verdana,Arial,Helvetica,sans-serif; |
font-family: Verdana,Arial,Helvetica,sans-serif; |
||||||
color: #666; |
color: #666; |
||||||
} |
} |
||||||
|
|
||||||
[draggable] { |
[draggable] { |
||||||
-webkit-user-select: none; |
-webkit-user-select: none; |
||||||
user-select: none; |
user-select: none; |
||||||
} |
} |
||||||
|
|
||||||
.toggleFilters{ |
.toggleFilters{ |
||||||
margin: 0; |
margin: 0; |
||||||
padding: 0; |
padding: 0; |
||||||
background-position: center; |
background-position: center; |
||||||
background-image: url(../images/down.png); |
background-image: url(../images/down.png); |
||||||
position: absolute; |
position: absolute; |
||||||
top: 11px; |
top: 11px; |
||||||
right: 6px; |
right: 6px; |
||||||
width: 20px; |
width: 20px; |
||||||
height: 20px; |
height: 20px; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
.colors_line { |
.colors_line { |
||||||
float: left; |
float: left; |
||||||
margin: 4px; |
margin: 4px; |
||||||
margin-right: 0; |
margin-right: 0; |
||||||
clear: left; |
clear: left; |
||||||
} |
} |
||||||
|
|
||||||
.custom { |
.custom { |
||||||
opacity: 0; |
opacity: 0; |
||||||
position: absolute; |
position: absolute; |
||||||
left: -10000px; |
left: -10000px; |
||||||
} |
} |
||||||
|
|
||||||
.filter_button.button.color { |
.filter_button.button.color { |
||||||
display: inline-block; |
display: inline-block; |
||||||
width: 15px; |
width: 15px; |
||||||
height: 15px; |
height: 15px; |
||||||
border: 1px solid #EBEBEB; |
border: 1px solid #EBEBEB; |
||||||
padding: 0; |
padding: 0; |
||||||
margin: 0; |
margin: 0; |
||||||
box-sizing: border-box; |
box-sizing: border-box; |
||||||
-webkit-box-sizing: border-box; |
-webkit-box-sizing: border-box; |
||||||
} |
} |
||||||
|
|
||||||
.filter_button.button.color:hover { |
.filter_button.button.color:hover { |
||||||
border: 1px solid rgb(128,128,128); |
border: 1px solid rgb(128,128,128); |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
input[type="radio"]:checked + .filter_button.button.color { |
input[type="radio"]:checked + .filter_button.button.color { |
||||||
border: 1px solid rgb(255,255,255); |
border: 1px solid rgb(255,255,255); |
||||||
box-shadow: 0 0 0px 1px #000; |
box-shadow: 0 0 0px 1px #000; |
||||||
-webkit-box-shadow: 0 0 0px 1px #000; |
-webkit-box-shadow: 0 0 0px 1px #000; |
||||||
} |
} |
||||||
|
|
||||||
#allcolor { |
#allcolor { |
||||||
background: white url('../images/search_app.png') -43px -144px no-repeat; |
background: white url('../images/search_app.png') -43px -144px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#colored { |
#colored { |
||||||
background: white url('../images/search_app.png') -43px -244px no-repeat; |
background: white url('../images/search_app.png') -43px -244px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#grayed { |
#grayed { |
||||||
background: white url('../images/search_app.png') -45px -343px no-repeat; |
background: white url('../images/search_app.png') -45px -343px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#black{ |
#black{ |
||||||
background-color:#ffffff; |
background-color:#ffffff; |
||||||
} |
} |
||||||
#blue{ |
#blue{ |
||||||
background-color:#0000FF; |
background-color:#0000FF; |
||||||
} |
} |
||||||
#brown{ |
#brown{ |
||||||
background-color:rgba(139, 82, 16, 1); |
background-color:rgba(139, 82, 16, 1); |
||||||
} |
} |
||||||
|
|
||||||
#gray{ |
#gray{ |
||||||
background-color:#999999; |
background-color:#999999; |
||||||
} |
} |
||||||
|
|
||||||
#green{ |
#green{ |
||||||
background-color:#00CC00; |
background-color:#00CC00; |
||||||
} |
} |
||||||
|
|
||||||
#orange{ |
#orange{ |
||||||
background-color:#FB940B; |
background-color:#FB940B; |
||||||
} |
} |
||||||
|
|
||||||
#pink{ |
#pink{ |
||||||
background-color:#FF98BF; |
background-color:#FF98BF; |
||||||
} |
} |
||||||
|
|
||||||
#purple{ |
#purple{ |
||||||
background-color:#762CA7; |
background-color:#762CA7; |
||||||
} |
} |
||||||
|
|
||||||
#red{ |
#red{ |
||||||
background-color:#CC0000; |
background-color:#CC0000; |
||||||
} |
} |
||||||
|
|
||||||
#teal{ |
#teal{ |
||||||
background-color:#03C0C6; |
background-color:#03C0C6; |
||||||
} |
} |
||||||
|
|
||||||
#white{ |
#white{ |
||||||
background-color:#000000; |
background-color:#000000; |
||||||
} |
} |
||||||
|
|
||||||
#yellow{ |
#yellow{ |
||||||
background-color:#FFFF00; |
background-color:#FFFF00; |
||||||
} |
} |
||||||
|
|
||||||
.selectBox-dropdown, .selectBox-options li a { |
.selectBox-dropdown, .selectBox-options li a { |
||||||
line-height: 1.3 !important; |
line-height: 1.3 !important; |
||||||
font-size: 13px; |
font-size: 13px; |
||||||
} |
} |
||||||
|
|
||||||
.pager_button { |
.pager_button { |
||||||
padding: 3px 5px; |
padding: 3px 5px; |
||||||
font-size: 16px; |
font-size: 16px; |
||||||
color: black; |
color: black; |
||||||
display: inline-block; |
display: inline-block; |
||||||
} |
} |
||||||
|
|
||||||
.pager_button.active { |
.pager_button.active { |
||||||
border-radius: 3px; |
border-radius: 3px; |
||||||
-webkit-border-radius: 3px; |
-webkit-border-radius: 3px; |
||||||
background-color: gray; |
background-color: gray; |
||||||
color: white; |
color: white; |
||||||
} |
} |
||||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
Before Width: | Height: | Size: 214 B After Width: | Height: | Size: 214 B |
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
Before Width: | Height: | Size: 931 B After Width: | Height: | Size: 931 B |
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 475 B After Width: | Height: | Size: 475 B |
Before Width: | Height: | Size: 448 B After Width: | Height: | Size: 448 B |
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@ -1,254 +1,254 @@ |
|||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
<!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"/> |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||||
<head> |
<head> |
||||||
<title>Planete Sankore Image Search</title> |
<title>Planete Sankore Image Search</title> |
||||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
<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" src="scripts/jquery-1.6.2.min.js"></script> |
||||||
<script type="text/javascript"> |
<script type="text/javascript"> |
||||||
var category = "video"; |
var category = "video"; |
||||||
var thumbnails = false; |
var thumbnails = false; |
||||||
var minHeight = 180; |
var minHeight = 177; |
||||||
var minWidth = 150; |
var minWidth = 150; |
||||||
|
|
||||||
var currentIndex = 0; |
var currentIndex = 0; |
||||||
var currentTerm = ""; |
var currentTerm = ""; |
||||||
var limit = 10; |
var limit = 10; |
||||||
var filtersDisplayed = false; //display or hide filters |
var filtersDisplayed = false; //display or hide filters |
||||||
|
|
||||||
function addPaginationLinks(totalResults) { |
function addPaginationLinks(totalResults) { |
||||||
var curPage = currentIndex; // check what page the app is on |
var curPage = currentIndex; // check what page the app is on |
||||||
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>"); |
||||||
for (var i = 0; i < 8; i++) { |
for (var i = 0; i < 8; i++) { |
||||||
if (i * limit < totalResults) { |
if (i * limit < totalResults) { |
||||||
|
|
||||||
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv); |
||||||
if (curPage == i) { |
if (curPage == i) { |
||||||
link.addClass('active'); |
link.addClass('active'); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
$("#disc_nav_cont #resultFooter").remove(); |
$("#disc_nav_cont #resultFooter").remove(); |
||||||
pagesDiv.insertBefore($('#disclaimer')); |
pagesDiv.insertBefore($('#disclaimer')); |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragstart", imageDragging, false); |
this.addEventListener("dragstart", imageDragging, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragenter", imageDragenter, false); |
this.addEventListener("dragenter", imageDragenter, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragleave", imageDragleave, false); |
this.addEventListener("dragleave", imageDragleave, false); |
||||||
}) |
}) |
||||||
|
|
||||||
$(".imgContainer").each(function(){ |
$(".imgContainer").each(function(){ |
||||||
this.addEventListener("dragover", imageDragover, false); |
this.addEventListener("dragover", imageDragover, false); |
||||||
}) |
}) |
||||||
} |
} |
||||||
|
|
||||||
function searchFail(jqXHR, textStatus, errorThrown) { |
function searchFail(jqXHR, textStatus, errorThrown) { |
||||||
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
alert('Impossible to connect to Planete Sankore: ' + textStatus + ' ' + errorThrown); |
||||||
} |
} |
||||||
|
|
||||||
function searchComplete(json) { |
function searchComplete(json) { |
||||||
// Grab our content div, clear it. |
// Grab our content div, clear it. |
||||||
var totalResults = json.totalResults; |
var totalResults = json.totalResults; |
||||||
var contentDiv = $('#searchResult').empty(); |
var contentDiv = $('#searchResult').empty(); |
||||||
// Loop through our results, printing them to the page. |
// Loop through our results, printing them to the page. |
||||||
var results = json.rows; |
var results = json.rows; |
||||||
for (var i = 0; i < results.length; i++) { |
for (var i = 0; i < results.length; i++) { |
||||||
// For each result write it's title and image to the screen |
// For each result write it's title and image to the screen |
||||||
var result = results[i]; |
var result = results[i]; |
||||||
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
var imgContainer = $("<div class='imgContainer' draggable='true'>"); |
||||||
var title = document.createElement('div'); |
var title = document.createElement('div'); |
||||||
var iUrl = $("<input type='hidden'/>"); |
var iUrl = $("<input type='hidden'/>"); |
||||||
var iContent = $("<input type='hidden'/>"); |
var iContent = $("<input type='hidden'/>"); |
||||||
var iHeight = $("<input type='hidden'/>"); |
var iHeight = $("<input type='hidden'/>"); |
||||||
var iWidth = $("<input type='hidden'/>"); |
var iWidth = $("<input type='hidden'/>"); |
||||||
var iTitle = $("<input type='hidden'/>"); |
var iTitle = $("<input type='hidden'/>"); |
||||||
|
|
||||||
// We use titleNoFormatting so that no HTML tags are left in the |
// We use titleNoFormatting so that no HTML tags are left in the |
||||||
// title |
// title |
||||||
title.innerHTML = result.title; |
title.innerHTML = result.title; |
||||||
var newImg = document.createElement('img'); |
var newImg = document.createElement('img'); |
||||||
|
|
||||||
// There is also a result.file property which has the escaped version |
// There is also a result.file property which has the escaped version |
||||||
if (thumbnails) { |
if (thumbnails) { |
||||||
newImg.src = result.file; |
newImg.src = result.file; |
||||||
} else { |
} else { |
||||||
newImg.src = "./images/thumbnail_icon.png"; |
newImg.src = "./images/thumbnail_icon.png"; |
||||||
} |
} |
||||||
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth; |
||||||
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight; |
||||||
imgContainer.width(imgWidth).height(imgHeight); |
imgContainer.width(imgWidth).height(imgHeight); |
||||||
imgContainer.append($(newImg)); |
imgContainer.append($(newImg)); |
||||||
iUrl.attr("value", result.file); |
iUrl.attr("value", result.file); |
||||||
iContent.attr("value", result.title); |
iContent.attr("value", result.title); |
||||||
iHeight.attr("value", result.height); |
iHeight.attr("value", result.height); |
||||||
iWidth.attr("value", result.width); |
iWidth.attr("value", result.width); |
||||||
iTitle.attr("value",result.title); |
iTitle.attr("value",result.title); |
||||||
imgContainer.append($(title)); |
imgContainer.append($(title)); |
||||||
imgContainer.append(iUrl); |
imgContainer.append(iUrl); |
||||||
imgContainer.append(iContent); |
imgContainer.append(iContent); |
||||||
imgContainer.append(iHeight); |
imgContainer.append(iHeight); |
||||||
imgContainer.append(iWidth); |
imgContainer.append(iWidth); |
||||||
imgContainer.append(iTitle); |
imgContainer.append(iTitle); |
||||||
|
|
||||||
// Put our title + image in the content |
// Put our title + image in the content |
||||||
imgContainer.appendTo(contentDiv); |
imgContainer.appendTo(contentDiv); |
||||||
|
|
||||||
} |
} |
||||||
// Now add links to additional pages of search results. |
// Now add links to additional pages of search results. |
||||||
addPaginationLinks(totalResults); |
addPaginationLinks(totalResults); |
||||||
} |
} |
||||||
|
|
||||||
function imageDragging(e){ |
function imageDragging(e){ |
||||||
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val()); |
||||||
// alert($(this).find("input:hidden").eq(0).val()); |
// alert($(this).find("input:hidden").eq(0).val()); |
||||||
} |
} |
||||||
|
|
||||||
function imageDragleave(e){ |
function imageDragleave(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
function imageDragover(e){ |
function imageDragover(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
function imageDragenter(e){ |
function imageDragenter(e){ |
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
$(document).ready(function(){ |
$(document).ready(function(){ |
||||||
|
|
||||||
//variables |
//variables |
||||||
var mode = false; //search or view mode |
var mode = false; //search or view mode |
||||||
var hide = false; //hide or no main panel |
var hide = false; //hide or no main panel |
||||||
|
|
||||||
//basic containers and elements |
//basic containers and elements |
||||||
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body"); |
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 vidéo sur Planète Sankoré<div>").appendTo(disc_nav_cont); |
var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche de documents vidéo sur Planète Sankoré<div>").appendTo(disc_nav_cont); |
||||||
var search = $("<div id='search' class='search'>").appendTo("body"); |
var search = $("<div id='search' class='search'>").appendTo("body"); |
||||||
|
|
||||||
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search); |
||||||
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages); |
||||||
|
|
||||||
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search); |
||||||
var subSearchFilter = $("<div id='subSearchFilter' 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 searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput); |
||||||
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput); |
||||||
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput); |
||||||
|
|
||||||
//adding filters to the wgt |
//adding filters to the wgt |
||||||
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>") |
||||||
.append($("<option value='0'>Any</option>")) |
.append($("<option value='0'>Any</option>")) |
||||||
.append($("<option value='1'>Small</option>")) |
.append($("<option value='1'>Small</option>")) |
||||||
.append($("<option value='2'>Medium</option>")) |
.append($("<option value='2'>Medium</option>")) |
||||||
.append($("<option value='3'>Large</option>")) |
.append($("<option value='3'>Large</option>")) |
||||||
.append($("<option value='4'>Extra large</option>")); |
.append($("<option value='4'>Extra large</option>")); |
||||||
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter); |
||||||
|
|
||||||
//mouse click actions |
//mouse click actions |
||||||
/* |
/* |
||||||
toggleFilters.click(function(){ |
toggleFilters.click(function(){ |
||||||
if(filtersDisplayed){ |
if(filtersDisplayed){ |
||||||
subSearchFilter.hide(); |
subSearchFilter.hide(); |
||||||
toggleFilters.css("background-image","url(images/down.png)"); |
toggleFilters.css("background-image","url(images/down.png)"); |
||||||
filtersDisplayed = false; |
filtersDisplayed = false; |
||||||
} else { |
} else { |
||||||
subSearchFilter.show(); |
subSearchFilter.show(); |
||||||
toggleFilters.css("background-image","url(images/up.png)"); |
toggleFilters.css("background-image","url(images/up.png)"); |
||||||
filtersDisplayed = true; |
filtersDisplayed = true; |
||||||
} |
} |
||||||
}); |
}); |
||||||
*/ |
*/ |
||||||
|
|
||||||
/*togglePages.click(function(event){ |
/*togglePages.click(function(event){ |
||||||
if(mode){ |
if(mode){ |
||||||
hide = false; |
hide = false; |
||||||
$("#search, #disclaimer").slideDown('slow', function(){ |
$("#search, #disclaimer").slideDown('slow', function(){ |
||||||
toggleIcon.css("background-image","url(images/trgUp.png)"); |
toggleIcon.css("background-image","url(images/trgUp.png)"); |
||||||
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
togglePages.appendTo("#search").css("top","").css("bottom","-14px"); |
||||||
}); |
}); |
||||||
mode = false; |
mode = false; |
||||||
} else { |
} else { |
||||||
hide = true; |
hide = true; |
||||||
$("#search, #disclaimer").slideUp('slow', function(){ |
$("#search, #disclaimer").slideUp('slow', function(){ |
||||||
toggleIcon.css("background-image","url(images/trgDown.png)"); |
toggleIcon.css("background-image","url(images/trgDown.png)"); |
||||||
togglePages.appendTo("body").css("top","0"); |
togglePages.appendTo("body").css("top","0"); |
||||||
}); |
}); |
||||||
mode = true; |
mode = true; |
||||||
} |
} |
||||||
});*/ |
});*/ |
||||||
|
|
||||||
searchButton.click(function(){ |
searchButton.click(function(){ |
||||||
if(!hide){ |
if(!hide){ |
||||||
runSearch(searchInput.val(), 0); |
runSearch(searchInput.val(), 0); |
||||||
//togglePages.trigger("click"); |
//togglePages.trigger("click"); |
||||||
} |
} |
||||||
}); |
}); |
||||||
|
|
||||||
searchInput.keydown(function(event){ |
searchInput.keydown(function(event){ |
||||||
if(!hide){ |
if(!hide){ |
||||||
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){ |
||||||
runSearch(searchInput.val(), 0); |
runSearch(searchInput.val(), 0); |
||||||
//togglePages.trigger("click"); |
//togglePages.trigger("click"); |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
}); |
}); |
||||||
( |
( |
||||||
$(".imgContainer").live("click",function(){ |
$(".imgContainer").live("click",function(){ |
||||||
sankore.sendFileMetadata(createMetaData($(this))); |
sankore.sendFileMetadata(createMetaData($(this))); |
||||||
})); |
})); |
||||||
|
|
||||||
/*$(window).resize(function(){ |
/*$(window).resize(function(){ |
||||||
disclaimer.width($("body").width()-20); |
disclaimer.width($("body").width()-20); |
||||||
search.width($("body").width()-20); |
search.width($("body").width()-20); |
||||||
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
toggleIcon.css("margin-left",(togglePages.width()/2 - 7)); |
||||||
})*/ |
})*/ |
||||||
|
|
||||||
}); |
}); |
||||||
|
|
||||||
function gotoPage(i) { |
function gotoPage(i) { |
||||||
runSearch(currentTerm, i); |
runSearch(currentTerm, i); |
||||||
} |
} |
||||||
|
|
||||||
// launching the search on planete sankore |
// launching the search on planete sankore |
||||||
function runSearch(term, index) { |
function runSearch(term, index) { |
||||||
currentTerm = term; |
currentTerm = term; |
||||||
currentIndex = index; |
currentIndex = index; |
||||||
var start = index * limit; |
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; |
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({ |
$.ajax({ |
||||||
url: url, |
url: url, |
||||||
success: searchComplete, |
success: searchComplete, |
||||||
error: searchFail, |
error: searchFail, |
||||||
dataType: "json" |
dataType: "json" |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
|
||||||
function createMetaData(parent){ |
function createMetaData(parent){ |
||||||
var meta = ""; |
var meta = ""; |
||||||
//alert($(this).find("input:hidden").eq(0).val()); |
//alert($(this).find("input:hidden").eq(0).val()); |
||||||
meta = "<metadata><data><key>Type</key><value>Video</value></data><data><key>Url</key><value>" + |
meta = "<metadata><data><key>Type</key><value>Video</value></data><data><key>Url</key><value>" + |
||||||
parent.find("input:hidden").eq(0).val() + |
parent.find("input:hidden").eq(0).val() + |
||||||
"</value></data><data><key>Content</key><value>" + |
"</value></data><data><key>Content</key><value>" + |
||||||
parent.find("input:hidden").eq(1).val() + |
parent.find("input:hidden").eq(1).val() + |
||||||
"</value></data><data><key>Height</key><value>n/a</value></data>"+ |
"</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>" + |
"<data><key>Width</key><value>n/a</value></data><data><key>Title</key><value>" + |
||||||
parent.find("input:hidden").eq(4).val() + |
parent.find("input:hidden").eq(4).val() + |
||||||
"</value></data></metadata>"; |
"</value></data></metadata>"; |
||||||
return meta; |
return meta; |
||||||
} |
} |
||||||
</script> |
</script> |
||||||
|
|
||||||
</head> |
</head> |
||||||
<body style="font-family: Arial;border: 0 none;"> |
<body style="font-family: Arial;border: 0 none;"> |
||||||
<div id="searchResult"></div> |
<div id="searchResult"></div> |
||||||
</body> |
</body> |
||||||
</html> |
</html> |
||||||
|