Commit 322daf94 authored by Claudio Valerio's avatar Claudio Valerio

new version of google image widget

parent cbbac4e0
File mode changed from 100755 to 100644
body{
html, body{
width: 100%;
padding: 0;
height: auto;
......@@ -6,10 +6,13 @@ body{
margin: 0;
}
a {
text-decoration: none;
}
.disclaimer{
width: 90%;
height: 50px;
position: absolute;
height: 30px;
position: fixed;
left: 0;
bottom: 0;
margin-left: 1px;
......@@ -27,14 +30,16 @@ body{
z-index: 10;
}
#searchResult {
overflow: hidden;
text-align: center;
}
.search{
width: 90%;
position: absolute;
position: fixed;
top: 0;
left: 0;
margin-left: 1px;
margin-right: 1px;
margin-top: 0px;
padding: 5px;
background-color: #BBBBBB;
-webkit-border-bottom-left-radius: 15px;
......@@ -46,47 +51,62 @@ body{
z-index: 101;
}
.search,
.disclaimer {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.togglePages{
padding: 0;
position: absolute;
bottom: -14px;
left: 43%;
width: 15%;
height: 10px;
bottom: -19px;
left: 40%;
width: 22%;
height: 15px;
background-color: #666;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
-webkit-box-shadow: #dadada -1px 0 4px;
box-shadow: #dadada -1px 0 4px;
cursor: pointer;
z-index: 100;
text-align: center;
}
.toggleIcon{
display: inline-block;
width: 14px;
height: 10px;
background-image: url(../images/trgUp.png);
height: 14px;
background: url(../images/trgUp.png) 50% no-repeat;
}
.searchInput{
margin: 10px 5px 10px 5px;
padding: 2px;
padding-left: 8px;
padding-right:8px;
padding: 3px;
float: left;
width: 60%;
border-radius: 15px;
width: 100%;
border-radius: 3px;
border-style: none;
height: 22px;
line-height: 18px;
vertical-align: middle;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.searchButton{
width: 32px;
height: 32px;
margin: 5px 5px;
background-image: url(../images/search.png);
float: left;
background: url("../images/search_app.png") -38px -38px no-repeat;
width: 24px;
height: 24px;
overflow: hidden;
position: absolute;
right: 30px;
top: 9px;
margin-left: -2px;
cursor: pointer;
}
......@@ -98,6 +118,10 @@ body{
#subSearchInput{
width: 100%;
float: left;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 5px;
padding-right: 26px;
}
#subSearchFilter{
......@@ -113,7 +137,7 @@ body{
}
.imgContainer{
float: left;
display: inline-block;
padding: 3px;
margin: 3px;
text-align: center;
......@@ -125,6 +149,7 @@ body{
-webkit-box-shadow: #dadada -1px 0 4px;
-webkit-border-radius: 5px;
box-shadow: #666 -1px 0 4px;
vertical-align: top;
}
.resultFooter{
......@@ -135,12 +160,13 @@ body{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: x-large;
text-align: center;
}
#branding{
position: absolute;
top: 0;
left: 10px;
left: 0;
z-index: 2;
}
......@@ -159,6 +185,8 @@ body{
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
border-top-right-radius: 15px;
margin-top: 2px;
width: 100%;
}
span{
......@@ -177,9 +205,121 @@ span{
background-position: center;
background-image: url(../images/down.png);
position: absolute;
bottom: 2px;
right: 2px;
top: 11px;
right: 6px;
width: 20px;
height: 20px;
cursor: pointer;
}
.colors_line {
float: left;
margin: 4px;
margin-right: 0;
clear: left;
}
.custom {
opacity: 0;
position: absolute;
left: -10000px;
}
.filter_button.button.color {
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid #EBEBEB;
padding: 0;
margin: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.filter_button.button.color:hover {
border: 1px solid rgb(128,128,128);
cursor: pointer;
}
input[type="radio"]:checked + .filter_button.button.color {
border: 1px solid rgb(255,255,255);
box-shadow: 0 0 0px 1px #000;
-webkit-box-shadow: 0 0 0px 1px #000;
}
#allcolor {
background: white url('../images/search_app.png') -43px -144px no-repeat;
}
#colored {
background: white url('../images/search_app.png') -43px -244px no-repeat;
}
#grayed {
background: white url('../images/search_app.png') -45px -343px no-repeat;
}
#black{
background-color:#ffffff;
}
#blue{
background-color:#0000FF;
}
#brown{
background-color:rgba(139, 82, 16, 1);
}
#gray{
background-color:#999999;
}
#green{
background-color:#00CC00;
}
#orange{
background-color:#FB940B;
}
#pink{
background-color:#FF98BF;
}
#purple{
background-color:#762CA7;
}
#red{
background-color:#CC0000;
}
#teal{
background-color:#03C0C6;
}
#white{
background-color:#000000;
}
#yellow{
background-color:#FFFF00;
}
.selectBox-dropdown, .selectBox-options li a {
line-height: 1.3 !important;
font-size: 13px;
}
.pager_button {
padding: 3px 5px;
font-size: 16px;
color: black;
display: inline-block;
}
.pager_button.active {
border-radius: 3px;
-webkit-border-radius: 3px;
background-color: gray;
color: white;
}
\ No newline at end of file
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
File mode changed from 100755 to 100644
......@@ -3,10 +3,12 @@
<head>
<title>Google Image Search</title>
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
<script type="text/javascript" src="locales/locales.js"></script>
<script type="text/javascript" src="http://www.google.com/uds"></script>
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="select/jquery.selectBox.min.js"></script>
<link type="text/css" rel="stylesheet" href="select/jquery.selectBox.css" />
<script type="text/javascript">
//begin google API
google.load("search","1");
......@@ -23,19 +25,10 @@
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>");
for (var i = 0; i < cursor.pages.length; i++) {
var page = cursor.pages[i];
if (curPage == i) {
// If we are on the current page, then don't make a link.
var label = document.createTextNode(' ' + page.label + ' ');
pagesDiv.append($(label));
} else {
// Create links to other pages using gotoPage() on the searcher.
var link = document.createElement('a');
link.href = 'javascript:imageSearch.gotoPage('+i+');';
link.innerHTML = page.label;
link.style.marginRight = '2px';
pagesDiv.append($(link));
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:imageSearch.gotoPage('+i+');').html(page.label).appendTo(pagesDiv);
if (curPage == i) {
link.addClass('active');
}
}
......@@ -59,7 +52,6 @@
}
function searchComplete() {
// Check that we got results
if (imageSearch.results && imageSearch.results.length > 0) {
......@@ -68,6 +60,7 @@
// Loop through our results, printing them to the page.
var results = imageSearch.results;
console.log(results);
for (var i = 0; i < results.length; i++) {
// For each result write it's title and image to the screen
var result = results[i];
......@@ -109,6 +102,10 @@
// Now add links to additional pages of search results.
addPaginationLinks(imageSearch);
}
setTimeout(function(){
$(window).trigger('resize');
}, 1000);
}
function OnLoad() {
......@@ -157,26 +154,17 @@
var hide = false; //hide or no main panel
//basic containers and elements
var lang = ""; //locale language
var disclaimer;
if(window.sankore){
lang = sankore.locale().substr(0,2);
lang = "fr";
if(lang == "en"){
disclaimer = $("<div id='disclaimer' class='disclaimer'>EN<div>").appendTo("body");
}
else{
disclaimer = $("<div id='disclaimer' class='disclaimer'>FR<div>").appendTo("body");
}
}
var lang = window.sankore ? sankore.locale().substr(0,2) : "en"; //locale language
//localization
locale = locales[lang];
var disclaimer = $("<div id='disclaimer' class='disclaimer'>"+locale.disclaimer_title+"<div>").appendTo("body");
var search = $("<div id='search' class='search'>").appendTo("body");
disclaimer.width($("body").width()-20);
search.width($("body").width()-20);
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search);
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages).css("margin-left",(togglePages.width()/2 - 7));
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages);
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search);
......@@ -187,58 +175,70 @@
//adding filters to the wgt
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>")
.append($("<option value='0'>Any</option>"))
.append($("<option value='1'>Small</option>"))
.append($("<option value='2'>Medium</option>"))
.append($("<option value='3'>Large</option>"))
.append($("<option value='4'>Extra large</option>"));
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter);
selectFilter = $("<select id='colorizFilter' class='filterSelect'>")
.append($("<option value='0'>Any</option>"))
.append($("<option value='1'>Grayscale</option>"))
.append($("<option value='2'>Color</option>"));
$("<div class='filterContainer'>").append("<span>Colorization:</span>").append(selectFilter).appendTo(subSearchFilter);
selectFilter = $("<select id='colorFilter' class='filterSelect'>")
.append($("<option value='0'>Any</option>"))
.append($("<option value='1'>Black</option>"))
.append($("<option value='2'>Blue</option>"))
.append($("<option value='3'>Brown</option>"))
.append($("<option value='4'>Gray</option>"))
.append($("<option value='5'>Green</option>"))
.append($("<option value='6'>Orange</option>"))
.append($("<option value='7'>Pink</option>"))
.append($("<option value='8'>Purple</option>"))
.append($("<option value='9'>Red</option>"))
.append($("<option value='10'>Teal</option>"))
.append($("<option value='11'>White</option>"))
.append($("<option value='12'>Yellow</option>"));
$("<div class='filterContainer'>").append("<span>Main color:</span>").append(selectFilter).appendTo(subSearchFilter);
.append($("<option value='0'>"+locale.def_opts_val+"</option>"))
.append($("<option value='1'>"+locale.size_small+"</option>"))
.append($("<option value='2'>"+locale.size_medium+"</option>"))
.append($("<option value='3'>"+locale.size_large+"</option>"))
.append($("<option value='4'>"+locale.size_extra_large+"</option>"));
$("<div class='filterContainer'>").append("<span>"+locale.size_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter);
selectFilter = $("<select id='fileTypeFilter' class='filterSelect'>")
.append($("<option value='0'>Any</option>"))
.append($("<option value='0'>"+locale.def_opts_val+"</option>"))
.append($("<option value='1'>*.JPG</option>"))
.append($("<option value='2'>*.PNG</option>"))
.append($("<option value='3'>*.GIF</option>"))
.append($("<option value='4'>*.BMP</option>"));
$("<div class='filterContainer'>").append("<span>File type:</span>").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'>")
.append($("<option value='0'>Any</option>"))
.append($("<option value='1'>Faces</option>"))
.append($("<option value='2'>Photo</option>"))
.append($("<option value='3'>Clipart</option>"))
.append($("<option value='4'>Lineart</option>"));
$("<div class='filterContainer'>").append("<span>Image type:</span>").append(selectFilter).appendTo(subSearchFilter);
.append($("<option value='0'>"+locale.def_opts_val+"</option>"))
.append($("<option value='1'>"+locale.image_type_faces+"</option>"))
.append($("<option value='2'>"+locale.image_type_photo+"</option>"))
.append($("<option value='3'>"+locale.image_type_clipart+"</option>"))
.append($("<option value='4'>"+locale.image_type_lineart+"</option>"));
$("<div class='filterContainer'>").append("<span>"+locale.image_type_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter);
selectFilter = $("<select id='rightsFilter' class='filterSelect'>")
.append($("<option value='0'>Any</option>"))
.append($("<option value='1'>Reuse</option>"))
.append($("<option value='2'>Comercial reuse</option>"))
.append($("<option value='3'>Modification</option>"))
.append($("<option value='4'>Comercial modification</option>"));
$("<div class='filterContainer'>").append("<span>Image type:</span>").append(selectFilter).appendTo(subSearchFilter);
.append($("<option value='0'>"+locale.def_opts_val+"</option>"))
.append($("<option value='1'>"+locale.image_license_reuse+"</option>"))
.append($("<option value='2'>"+locale.image_license_comm_reuse+"</option>"))
.append($("<option value='3'>"+locale.image_license_modif+"</option>"))
.append($("<option value='4'>"+locale.image_license_comm_modif+"</option>"));
$("<div class='filterContainer'>").append("<span>"+locale.image_type_title+":</span><br/>").append(selectFilter).appendTo(subSearchFilter);
var colors_line = $('<div class="colors_line"></div>');
subSearchFilter.append(colors_line);
colors_line.html('<input type="radio" value="allcolor" id="color_shem_allcolor" class="custom" name="color" checked="true">\
<label id="allcolor" class="filter_button button color active" for="color_shem_allcolor"></label>\
<input type="radio" value="color" id="color_shem_color" class="custom" name="color">\
<label id="colored" class="filter_button button color" for="color_shem_color"></label>\
<input type="radio" value="grayscale" id="color_shem_gray" class="custom" name="color">\
<label id="grayed" class="filter_button button color" for="color_shem_gray"></label>\
<label style="border-right: 1px solid #fff; margin-right:7px; margin-left:7px; height: 15px; display: inline-block;"></label>\
<input type="radio" value="red" id="design9" class="custom" name="color">\
<label id="red" class="filter_button button color" for="design9"></label>\
<input type="radio" value="orange" id="design6" class="custom" name="color">\
<label id="orange" class="filter_button button color" for="design6"></label>\
<input type="radio" value="yellow" id="design12" class="custom" name="color">\
<label id="yellow" class="filter_button button color" for="design12"></label>\
<input type="radio" value="green" id="design5" class="custom" name="color">\
<label id="green" class="filter_button button color" for="design5"></label>\
<input type="radio" value="teal" id="design10" class="custom" name="color">\
<label id="teal" class="filter_button button color" for="design10"></label>\
<input type="radio" value="blue" id="design2" class="custom" name="color">\
<label id="blue" class="filter_button button color" for="design2"></label>\
<input type="radio" value="purple" id="design8" class="custom" name="color">\
<label id="purple" class="filter_button button color" for="design8"></label>\
<input type="radio" value="pink" id="design7" class="custom" name="color">\
<label id="pink" class="filter_button button color" for="design7"></label>\
<input type="radio" value="white" id="design11" class="custom" name="color">\
<label id="white" class="filter_button button color" for="design11"></label>\
<input type="radio" value="gray" id="design4" class="custom" name="color">\
<label id="gray" class="filter_button button color" for="design4"></label>\
<input type="radio" value="black" id="design1" class="custom" name="color">\
<label id="black" class="filter_button button color" for="design1"></label>\
<input type="radio" value="brown" id="design3" class="custom" name="color">\
<label id="brown" class="filter_button button color" for="design3"></label>');
//mouse click actions
toggleFilters.click(function(){
......@@ -256,14 +256,14 @@
togglePages.click(function(event){
if(mode){
hide = false;
$("#search, #disclaimer").slideDown('slow', function(){
$("#search, #disclaimer").slideDown('fast', function(){
toggleIcon.css("background-image","url(images/trgUp.png)");
togglePages.appendTo("#search").css("top","").css("bottom","-14px");
});
mode = false;
} else {
hide = true;
$("#search, #disclaimer").slideUp('slow', function(){
$("#search, #disclaimer").slideUp('fast', function(){
toggleIcon.css("background-image","url(images/trgDown.png)");
togglePages.appendTo("body").css("top","0");
});
......@@ -287,11 +287,14 @@
}
});
(
$('.filterSelect, .colors_line input[name=color]').change(function(){
checkFilters(imageSearch).execute(searchInput.val());
});
$(".imgContainer").live("click",function(){
//alert(createMetaData($(this)));
sankore.sendFileMetadata(createMetaData($(this)));
}));
});
//checking filters
function checkFilters(imgSearch){
......@@ -314,58 +317,53 @@
break;
}
value = $("#colorizFilter option:selected").val();
value = $(".colors_line input[name=color]:checked").val();
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,null);
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,null);
switch(value){
case "0":
case "allcolor":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,null);
break;
case "1":
case "grayscale":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,google.search.ImageSearch.COLORIZATION_GRAYSCALE);
break;
case "2":
case "color":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORIZATION,google.search.ImageSearch.COLORIZATION_COLOR);
break;
}
value = $("#colorFilter option:selected").val();
switch(value){
case "0":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,null);
break;
case "1":
case "black":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BLACK);
break;
case "2":
case "blue":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BLUE);
break;
case "3":
case "brown":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_BROWN);
break;
case "4":
case "gray":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_GRAY);
break;
case "5":
case "green":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_GREEN);
break;
case "6":
case "orange":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_ORANGE);
break;
case "7":
case "pink":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_PINK);
break;
case "8":
case "purple":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_PURPLE);
break;
case "9":
case "red":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_RED);
break;
case "10":
case "teal":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_TEAL);
break;
case "11":
case "white":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_WHITE);
break;
case "12":
case "yellow":
imgSearch.setRestriction(google.search.ImageSearch.RESTRICT_COLORFILTER,google.search.ImageSearch.COLOR_YELLOW);
break;
}
......@@ -429,19 +427,26 @@
return imgSearch;
}
$(window).resize(function(){
disclaimer.width($("body").width()-20);
search.width($("body").width()-20);
toggleIcon.css("margin-left",(togglePages.width()/2 - 7));
})
$(window).resize(function(){
var width = "200px";
if ($('#search').width() < 230) {
width = $("#search").width()-40;
} else {
width = "200px";
}
$('select').selectBox('destroy').css('width', width).selectBox();
});
$(window).trigger("resize");
});
function createMetaData(parent){
var meta = "";
//alert($(this).find("input:hidden").eq(0).val());
meta = "<metadata><data><key>Type</key><value>Image</value></data><data><key>Url</key><value>" +
parent.find("input:hidden").eq(0).val() +
"</value></data><data><key>thumbnailUrl</key><value>" +
parent.find("img").attr("src") +
"</value></data><data><key>Content</key><value>" +
parent.find("input:hidden").eq(1).val() +
"</value></data><data><key>Height</key><value>" +
......
var locales = {
'en': {
'def_opts_val': 'Any',
'size_title': 'Size',
'size_small': 'Small',
'size_medium': 'Medium',
'size_large': 'Large',
'size_extra_large': 'Extra large',
'colorization_title': 'Colorization',
'coloriz_grayscale': 'Grayscale',
'coloriz_color': 'Color',
'main_color_title': 'Main color',
'm_color_black': 'Black',
'm_color_blue': 'Blue',
'm_color_brown': 'Brown',
'm_color_gray': 'Gray',
'm_color_green': 'Green',
'm_color_orange': 'Orange',
'm_color_pink': 'Pink',
'm_color_purple': 'Purple',
'm_color_red': 'Red',
'm_color_teal': 'Teal',
'm_color_white': 'White',
'm_color_yellow': 'Yellow',
'file_type_title': 'File type',
'image_type_title': 'Image type',
'image_type_faces': 'Faces',
'image_type_photo': 'Photo',
'image_type_clipart': 'Clipart',
'image_type_lineart': 'Lineart',
'image_license_title': 'Image type',
'image_license_reuse': 'Reuse',
'image_license_comm_reuse': 'Commercial reuse',
'image_license_modif': 'Modification',
'image_license_comm_modif': 'Commercial modification',
'disclaimer_title': 'Disclaimer'
},
'fr': {
'def_opts_val': 'Tout',
'size_title': 'Taille',
'size_small': 'Petit',
'size_medium': 'Moyen',
'size_large': 'Grand',
'size_extra_large': 'Extra large',
'colorization_title': 'Colorisation',
'coloriz_grayscale': 'Niveaux de gris',
'coloriz_color': 'Couleur',
'main_color_title': 'Couleur électronique',
'm_color_black': 'Noir',
'm_color_blue': 'Bleu',
'm_color_brown': 'Brun',
'm_color_gray': 'Gris',
'm_color_green': 'Vert',
'm_color_orange': 'Orange',
'm_color_pink': 'Rose',
'm_color_purple': 'Pourpre',
'm_color_red': 'Rouge',
'm_color_teal': 'Sarcelle',
'm_color_white': 'Blanc',
'm_color_yellow': 'Jaune',
'file_type_title': 'Type de fichier',
'image_type_title': 'Type d\'image',
'image_type_faces': 'Visages',
'image_type_photo': 'Photo',
'image_type_clipart': 'Des cliparts',
'image_type_lineart': 'Lineart',
'image_license_title': 'Type d\'image',
'image_license_reuse': 'Réutilisation',
'image_license_comm_reuse': 'La réutilisation commerciale',
'image_license_modif': 'Modification',
'image_license_comm_modif': 'Modification de commerce',
'disclaimer_title': 'Désistement'
}
};
\ No newline at end of file
/* Dropdown control */
.selectBox-dropdown {
min-width: 60px;
position: relative;
/*border: solid 1px #BBB;*/
line-height: 1.5;
text-decoration: none;
text-align: left;
color: #000;
outline: none;
vertical-align: middle;
background: #F2F2F2;
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));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F8F8F8', endColorstr='#E1E1E1', GradientType=0);
-moz-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);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
display: inline-block;
cursor: default;
}
.selectBox-dropdown:focus,
.selectBox-dropdown:focus .selectBox-arrow {
border-color: #666;
}
.selectBox-dropdown.selectBox-menuShowing {
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.selectBox-dropdown .selectBox-label {
padding: 2px 8px;
display: inline-block;
white-space: nowrap;
overflow: hidden;
}
.selectBox-dropdown .selectBox-arrow {
position: absolute;
top: 0;
right: 0;
width: 23px;
height: 100%;
background: url(jquery.selectBox-arrow.gif) 50% center no-repeat;
border-left: solid 1px #BBB;
}
/* Dropdown menu */
.selectBox-dropdown-menu {
position: absolute;
z-index: 99999;
max-height: 200px;
min-height: 1em;
border: solid 1px #BBB; /* should be the same border width as .selectBox-dropdown */
background: #FFF;
-moz-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);
overflow: auto;
}
/* Inline control */
.selectBox-inline {
min-width: 150px;
outline: none;
border: solid 1px #BBB;
background: #FFF;
display: inline-block;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
overflow: auto;
}
.selectBox-inline:focus {
border-color: #666;
}
/* Options */
.selectBox-options,
.selectBox-options LI,
.selectBox-options LI A {
list-style: none;
display: block;
cursor: default;
padding: 0;
margin: 0;
}
.selectBox-options LI A {
line-height: 1.5;
padding: 0 .5em;
white-space: nowrap;
overflow: hidden;
background: 6px center no-repeat;
}
.selectBox-options LI.selectBox-hover A {
background-color: #EEE;
}
.selectBox-options LI.selectBox-disabled A {
color: #888;
background-color: transparent;
}
.selectBox-options LI.selectBox-selected A {
background-color: #C8DEF4;
}
.selectBox-options .selectBox-optgroup {
color: #666;
background: #EEE;
font-weight: bold;
line-height: 1.5;
padding: 0 .3em;
white-space: nowrap;
}
/* Disabled state */
.selectBox.selectBox-disabled {
color: #888 !important;
}
.selectBox-dropdown.selectBox-disabled .selectBox-arrow {
opacity: .5;
filter: alpha(opacity=50);
border-color: #666;
}
.selectBox-inline.selectBox-disabled {
color: #888 !important;
}
.selectBox-inline.selectBox-disabled .selectBox-options A {
background-color: transparent !important;
}
\ No newline at end of file
/* jQuery SelectBox - https://github.com/claviska/jquery-selectBox */
if(jQuery)(function($){$.extend($.fn,{selectBox:function(method,data){var typeTimer,typeSearch='',isMac=navigator.platform.match(/mac/i);var init=function(select,data){var options;if(navigator.userAgent.match(/iPad|iPhone|Android|IEMobile|BlackBerry/i))return false;if(select.tagName.toLowerCase()!=='select')return false;select=$(select);if(select.data('selectBox-control'))return false;var control=$('<a class="selectBox" />'),inline=select.attr('multiple')||parseInt(select.attr('size'))>1;var settings=data||{};control.width(select.outerWidth()).addClass(select.attr('class')).attr('title',select.attr('title')||'').attr('tabindex',parseInt(select.attr('tabindex'))).css('display','inline-block').bind('focus.selectBox',function(){if(this!==document.activeElement&&document.body!==document.activeElement)$(document.activeElement).blur();if(control.hasClass('selectBox-active'))return;control.addClass('selectBox-active');select.trigger('focus')}).bind('blur.selectBox',function(){if(!control.hasClass('selectBox-active'))return;control.removeClass('selectBox-active');select.trigger('blur')});if(!$(window).data('selectBox-bindings')){$(window).data('selectBox-bindings',true).bind('scroll.selectBox',hideMenus).bind('resize.selectBox',hideMenus)}if(select.attr('disabled'))control.addClass('selectBox-disabled');select.bind('click.selectBox',function(event){control.focus();event.preventDefault()});if(inline){options=getOptions(select,'inline');control.append(options).data('selectBox-options',options).addClass('selectBox-inline selectBox-menuShowing').bind('keydown.selectBox',function(event){handleKeyDown(select,event)}).bind('keypress.selectBox',function(event){handleKeyPress(select,event)}).bind('mousedown.selectBox',function(event){if($(event.target).is('A.selectBox-inline'))event.preventDefault();if(!control.hasClass('selectBox-focus'))control.focus()}).insertAfter(select);if(!select[0].style.height){var size=select.attr('size')?parseInt(select.attr('size')):5;var tmp=control.clone().removeAttr('id').css({position:'absolute',top:'-9999em'}).show().appendTo('body');tmp.find('.selectBox-options').html('<li><a>\u00A0</a></li>');var optionHeight=parseInt(tmp.find('.selectBox-options A:first').html('&nbsp;').outerHeight());tmp.remove();control.height(optionHeight*size)}disableSelection(control)}else{var label=$('<span class="selectBox-label" />'),arrow=$('<span class="selectBox-arrow" />');label.attr('class',getLabelClass(select)).text(getLabelText(select));options=getOptions(select,'dropdown');options.appendTo('BODY');control.data('selectBox-options',options).addClass('selectBox-dropdown').append(label).append(arrow).bind('mousedown.selectBox',function(event){if(control.hasClass('selectBox-menuShowing')){hideMenus()}else{event.stopPropagation();options.data('selectBox-down-at-x',event.screenX).data('selectBox-down-at-y',event.screenY);showMenu(select)}}).bind('keydown.selectBox',function(event){handleKeyDown(select,event)}).bind('keypress.selectBox',function(event){handleKeyPress(select,event)}).bind('open.selectBox',function(event,triggerData){if(triggerData&&triggerData._selectBox===true)return;showMenu(select)}).bind('close.selectBox',function(event,triggerData){if(triggerData&&triggerData._selectBox===true)return;hideMenus()}).insertAfter(select);var labelWidth=control.width()-arrow.outerWidth()-parseInt(label.css('paddingLeft'))-parseInt(label.css('paddingLeft'));label.width(labelWidth);disableSelection(control)}select.addClass('selectBox').data('selectBox-control',control).data('selectBox-settings',settings).hide()};var getOptions=function(select,type){var options;var _getOptions=function(select,options){select.children('OPTION, OPTGROUP').each(function(){if($(this).is('OPTION')){if($(this).length>0){generateOptions($(this),options)}else{options.append('<li>\u00A0</li>')}}else{var optgroup=$('<li class="selectBox-optgroup" />');optgroup.text($(this).attr('label'));options.append(optgroup);options=_getOptions($(this),options)}});return options};switch(type){case'inline':options=$('<ul class="selectBox-options" />');options=_getOptions(select,options);options.find('A').bind('mouseover.selectBox',function(event){addHover(select,$(this).parent())}).bind('mouseout.selectBox',function(event){removeHover(select,$(this).parent())}).bind('mousedown.selectBox',function(event){event.preventDefault();if(!select.selectBox('control').hasClass('selectBox-active'))select.selectBox('control').focus()}).bind('mouseup.selectBox',function(event){hideMenus();selectOption(select,$(this).parent(),event)});disableSelection(options);return options;case'dropdown':options=$('<ul class="selectBox-dropdown-menu selectBox-options" />');options=_getOptions(select,options);options.data('selectBox-select',select).css('display','none').appendTo('BODY').find('A').bind('mousedown.selectBox',function(event){event.preventDefault();if(event.screenX===options.data('selectBox-down-at-x')&&event.screenY===options.data('selectBox-down-at-y')){options.removeData('selectBox-down-at-x').removeData('selectBox-down-at-y');hideMenus()}}).bind('mouseup.selectBox',function(event){if(event.screenX===options.data('selectBox-down-at-x')&&event.screenY===options.data('selectBox-down-at-y')){return}else{options.removeData('selectBox-down-at-x').removeData('selectBox-down-at-y')}selectOption(select,$(this).parent());hideMenus()}).bind('mouseover.selectBox',function(event){addHover(select,$(this).parent())}).bind('mouseout.selectBox',function(event){removeHover(select,$(this).parent())});var classes=select.attr('class')||'';if(classes!==''){classes=classes.split(' ');for(var i in classes)options.addClass(classes[i]+'-selectBox-dropdown-menu')}disableSelection(options);return options}};var getLabelClass=function(select){var selected=$(select).find('OPTION:selected');return('selectBox-label '+(selected.attr('class')||'')).replace(/\s+$/,'')};var getLabelText=function(select){var selected=$(select).find('OPTION:selected');return selected.text()||'\u00A0'};var setLabel=function(select){select=$(select);var control=select.data('selectBox-control');if(!control)return;control.find('.selectBox-label').attr('class',getLabelClass(select)).text(getLabelText(select))};var destroy=function(select){select=$(select);var control=select.data('selectBox-control');if(!control)return;var options=control.data('selectBox-options');options.remove();control.remove();select.removeClass('selectBox').removeData('selectBox-control').data('selectBox-control',null).removeData('selectBox-settings').data('selectBox-settings',null).show()};var refresh=function(select){select=$(select);select.selectBox('options',select.html())};var showMenu=function(select){select=$(select);var control=select.data('selectBox-control'),settings=select.data('selectBox-settings'),options=control.data('selectBox-options');if(control.hasClass('selectBox-disabled'))return false;hideMenus();var borderBottomWidth=isNaN(control.css('borderBottomWidth'))?0:parseInt(control.css('borderBottomWidth'));options.width(control.innerWidth()).css({top:control.offset().top+control.outerHeight()-borderBottomWidth,left:control.offset().left});if(select.triggerHandler('beforeopen'))return false;var dispatchOpenEvent=function(){select.triggerHandler('open',{_selectBox:true})};switch(settings.menuTransition){case'fade':options.fadeIn(settings.menuSpeed,dispatchOpenEvent);break;case'slide':options.slideDown(settings.menuSpeed,dispatchOpenEvent);break;default:options.show(settings.menuSpeed,dispatchOpenEvent);break}if(!settings.menuSpeed)dispatchOpenEvent();var li=options.find('.selectBox-selected:first');keepOptionInView(select,li,true);addHover(select,li);control.addClass('selectBox-menuShowing');$(document).bind('mousedown.selectBox',function(event){if($(event.target).parents().andSelf().hasClass('selectBox-options'))return;hideMenus()})};var hideMenus=function(){if($(".selectBox-dropdown-menu:visible").length===0)return;$(document).unbind('mousedown.selectBox');$(".selectBox-dropdown-menu").each(function(){var options=$(this),select=options.data('selectBox-select'),control=select.data('selectBox-control'),settings=select.data('selectBox-settings');if(select.triggerHandler('beforeclose'))return false;var dispatchCloseEvent=function(){select.triggerHandler('close',{_selectBox:true})};switch(settings.menuTransition){case'fade':options.fadeOut(settings.menuSpeed,dispatchCloseEvent);break;case'slide':options.slideUp(settings.menuSpeed,dispatchCloseEvent);break;default:options.hide(settings.menuSpeed,dispatchCloseEvent);break}if(!settings.menuSpeed)dispatchCloseEvent();control.removeClass('selectBox-menuShowing')})};var selectOption=function(select,li,event){select=$(select);li=$(li);var control=select.data('selectBox-control'),settings=select.data('selectBox-settings');if(control.hasClass('selectBox-disabled'))return false;if(li.length===0||li.hasClass('selectBox-disabled'))return false;if(select.attr('multiple')){if(event.shiftKey&&control.data('selectBox-last-selected')){li.toggleClass('selectBox-selected');var affectedOptions;if(li.index()>control.data('selectBox-last-selected').index()){affectedOptions=li.siblings().slice(control.data('selectBox-last-selected').index(),li.index())}else{affectedOptions=li.siblings().slice(li.index(),control.data('selectBox-last-selected').index())}affectedOptions=affectedOptions.not('.selectBox-optgroup, .selectBox-disabled');if(li.hasClass('selectBox-selected')){affectedOptions.addClass('selectBox-selected')}else{affectedOptions.removeClass('selectBox-selected')}}else if((isMac&&event.metaKey)||(!isMac&&event.ctrlKey)){li.toggleClass('selectBox-selected')}else{li.siblings().removeClass('selectBox-selected');li.addClass('selectBox-selected')}}else{li.siblings().removeClass('selectBox-selected');li.addClass('selectBox-selected')}if(control.hasClass('selectBox-dropdown')){control.find('.selectBox-label').text(li.text())}var i=0,selection=[];if(select.attr('multiple')){control.find('.selectBox-selected A').each(function(){selection[i++]=$(this).attr('rel')})}else{selection=li.find('A').attr('rel')}control.data('selectBox-last-selected',li);if(select.val()!==selection){select.val(selection);setLabel(select);select.trigger('change')}return true};var addHover=function(select,li){select=$(select);li=$(li);var control=select.data('selectBox-control'),options=control.data('selectBox-options');options.find('.selectBox-hover').removeClass('selectBox-hover');li.addClass('selectBox-hover')};var removeHover=function(select,li){select=$(select);li=$(li);var control=select.data('selectBox-control'),options=control.data('selectBox-options');options.find('.selectBox-hover').removeClass('selectBox-hover')};var keepOptionInView=function(select,li,center){if(!li||li.length===0)return;select=$(select);var control=select.data('selectBox-control'),options=control.data('selectBox-options'),scrollBox=control.hasClass('selectBox-dropdown')?options:options.parent(),top=parseInt(li.offset().top-scrollBox.position().top),bottom=parseInt(top+li.outerHeight());if(center){scrollBox.scrollTop(li.offset().top-scrollBox.offset().top+scrollBox.scrollTop()-(scrollBox.height()/2))}else{if(top<0){scrollBox.scrollTop(li.offset().top-scrollBox.offset().top+scrollBox.scrollTop())}if(bottom>scrollBox.height()){scrollBox.scrollTop((li.offset().top+li.outerHeight())-scrollBox.offset().top+scrollBox.scrollTop()-scrollBox.height())}}};var handleKeyDown=function(select,event){select=$(select);var control=select.data('selectBox-control'),options=control.data('selectBox-options'),settings=select.data('selectBox-settings'),totalOptions=0,i=0;if(control.hasClass('selectBox-disabled'))return;switch(event.keyCode){case 8:event.preventDefault();typeSearch='';break;case 9:case 27:hideMenus();removeHover(select);break;case 13:if(control.hasClass('selectBox-menuShowing')){selectOption(select,options.find('LI.selectBox-hover:first'),event);if(control.hasClass('selectBox-dropdown'))hideMenus()}else{showMenu(select)}break;case 38:case 37:event.preventDefault();if(control.hasClass('selectBox-menuShowing')){var prev=options.find('.selectBox-hover').prev('LI');totalOptions=options.find('LI:not(.selectBox-optgroup)').length;i=0;while(prev.length===0||prev.hasClass('selectBox-disabled')||prev.hasClass('selectBox-optgroup')){prev=prev.prev('LI');if(prev.length===0){if(settings.loopOptions){prev=options.find('LI:last')}else{prev=options.find('LI:first')}}if(++i>=totalOptions)break}addHover(select,prev);selectOption(select,prev,event);keepOptionInView(select,prev)}else{showMenu(select)}break;case 40:case 39:event.preventDefault();if(control.hasClass('selectBox-menuShowing')){var next=options.find('.selectBox-hover').next('LI');totalOptions=options.find('LI:not(.selectBox-optgroup)').length;i=0;while(next.length===0||next.hasClass('selectBox-disabled')||next.hasClass('selectBox-optgroup')){next=next.next('LI');if(next.length===0){if(settings.loopOptions){next=options.find('LI:first')}else{next=options.find('LI:last')}}if(++i>=totalOptions)break}addHover(select,next);selectOption(select,next,event);keepOptionInView(select,next)}else{showMenu(select)}break}};var handleKeyPress=function(select,event){select=$(select);var control=select.data('selectBox-control'),options=control.data('selectBox-options');if(control.hasClass('selectBox-disabled'))return;switch(event.keyCode){case 9:case 27:case 13:case 38:case 37:case 40:case 39:break;default:if(!control.hasClass('selectBox-menuShowing'))showMenu(select);event.preventDefault();clearTimeout(typeTimer);typeSearch+=String.fromCharCode(event.charCode||event.keyCode);options.find('A').each(function(){if($(this).text().substr(0,typeSearch.length).toLowerCase()===typeSearch.toLowerCase()){addHover(select,$(this).parent());keepOptionInView(select,$(this).parent());return false}});typeTimer=setTimeout(function(){typeSearch=''},1000);break}};var enable=function(select){select=$(select);select.attr('disabled',false);var control=select.data('selectBox-control');if(!control)return;control.removeClass('selectBox-disabled')};var disable=function(select){select=$(select);select.attr('disabled',true);var control=select.data('selectBox-control');if(!control)return;control.addClass('selectBox-disabled')};var setValue=function(select,value){select=$(select);select.val(value);value=select.val();var control=select.data('selectBox-control');if(!control)return;var settings=select.data('selectBox-settings'),options=control.data('selectBox-options');setLabel(select);options.find('.selectBox-selected').removeClass('selectBox-selected');options.find('A').each(function(){if(typeof(value)==='object'){for(var i=0;i<value.length;i++){if($(this).attr('rel')==value[i]){$(this).parent().addClass('selectBox-selected')}}}else{if($(this).attr('rel')==value){$(this).parent().addClass('selectBox-selected')}}});if(settings.change)settings.change.call(select)};var setOptions=function(select,options){select=$(select);var control=select.data('selectBox-control'),settings=select.data('selectBox-settings');switch(typeof(data)){case'string':select.html(data);break;case'object':select.html('');for(var i in data){if(data[i]===null)continue;if(typeof(data[i])==='object'){var optgroup=$('<optgroup label="'+i+'" />');for(var j in data[i]){optgroup.append('<option value="'+j+'">'+data[i][j]+'</option>')}select.append(optgroup)}else{var option=$('<option value="'+i+'">'+data[i]+'</option>');select.append(option)}}break}if(!control)return;control.data('selectBox-options').remove();var type=control.hasClass('selectBox-dropdown')?'dropdown':'inline';options=getOptions(select,type);control.data('selectBox-options',options);switch(type){case'inline':control.append(options);break;case'dropdown':setLabel(select);$("BODY").append(options);break}};var disableSelection=function(selector){$(selector).css('MozUserSelect','none').bind('selectstart',function(event){event.preventDefault()})};var generateOptions=function(self,options){var li=$('<li />'),a=$('<a />');li.addClass(self.attr('class'));li.data(self.data());a.attr('rel',self.val()).text(self.text());li.append(a);if(self.attr('disabled'))li.addClass('selectBox-disabled');if(self.attr('selected'))li.addClass('selectBox-selected');options.append(li)};switch(method){case'control':return $(this).data('selectBox-control');case'settings':if(!data)return $(this).data('selectBox-settings');$(this).each(function(){$(this).data('selectBox-settings',$.extend(true,$(this).data('selectBox-settings'),data))});break;case'options':if(data===undefined)return $(this).data('selectBox-control').data('selectBox-options');$(this).each(function(){setOptions(this,data)});break;case'value':if(data===undefined)return $(this).val();$(this).each(function(){setValue(this,data)});break;case'refresh':$(this).each(function(){refresh(this)});break;case'enable':$(this).each(function(){enable(this)});break;case'disable':$(this).each(function(){disable(this)});break;case'destroy':$(this).each(function(){destroy(this)});break;default:$(this).each(function(){init(this,method)});break}return $(this)}})})(jQuery);
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment