First pass at Pixabay image search

Search basically works; but just one page of elements are retrieved.
Metadata is assigned ok.
To do: paginate search results; correct display; and later, add filters
preferencesAboutTextFull
Craig Watson 9 years ago
parent a32c1e4c5f
commit 0eba0b1f31
  1. 15
      resources/library/search/Pixabay.wgs/config.xml
  2. 318
      resources/library/search/Pixabay.wgs/css/basic.css
  3. BIN
      resources/library/search/Pixabay.wgs/images/down.png
  4. BIN
      resources/library/search/Pixabay.wgs/images/greySquare.png
  5. BIN
      resources/library/search/Pixabay.wgs/images/icon-close.png
  6. BIN
      resources/library/search/Pixabay.wgs/images/popupBack.png
  7. BIN
      resources/library/search/Pixabay.wgs/images/search.png
  8. BIN
      resources/library/search/Pixabay.wgs/images/search_app.png
  9. BIN
      resources/library/search/Pixabay.wgs/images/trgDown.png
  10. BIN
      resources/library/search/Pixabay.wgs/images/trgUp.png
  11. BIN
      resources/library/search/Pixabay.wgs/images/up.png
  12. 267
      resources/library/search/Pixabay.wgs/index.html
  13. 80
      resources/library/search/Pixabay.wgs/locales/locales.js
  14. 18
      resources/library/search/Pixabay.wgs/scripts/jquery-1.6.2.min.js
  15. BIN
      resources/library/search/Pixabay.wgs/select/jquery.selectBox-arrow.gif
  16. 150
      resources/library/search/Pixabay.wgs/select/jquery.selectBox.css
  17. 916
      resources/library/search/Pixabay.wgs/select/jquery.selectBox.js
  18. 2
      resources/library/search/Pixabay.wgs/select/jquery.selectBox.min.js

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:ub="http://uniboard.mnemis.com/widgets"
id="http://uniboard.mnemis.com/widgets/webbrowser"
version="1.1"
width="900"
height="500"
ub:resizable="true">
<name>Choisir</name>
<author>Craig Watson</author>
<description>Pixabay image search</description>
<content src="index.html"/>
</widget>

@ -0,0 +1,318 @@
html, body{
width: 100%;
padding: 0;
height: auto;
background-color: white;
margin: 0;
}
::-webkit-scrollbar {
width: 14px;
background-color:white;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color:lightgray;
border: 2px solid gray;
}
::-webkit-scrollbar-button:vertical:start{
border-radius: 10px;
background-color:lightgray;
background-image: url(../images/trgUp.png);
background-size: 8px auto;
background-position: center;
background-repeat: no-repeat;
border: 2px solid gray;
}
::-webkit-scrollbar-button:vertical:end{
border-radius: 10px;
background-color:lightgray;
background-image: url(../images/trgDown.png);
background-size: 8px auto;
background-position: center;
background-repeat: no-repeat;
border: 2px solid gray;
}
a {
text-decoration: underline;
}
#disc_nav_cont{
height: auto;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}
.disclaimer{
padding: 5px;
text-align: center;
background-color: #BBBBBB;
border-top: solid 4px #EEEEEE;
border-bottom: none;
font-size: 12px;
}
.resultFooter{
width: 100%;
padding: 3px;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-weight: bold;
font-size: x-large;
text-align: center;
background-color: white;
}
#searchResult {
overflow: hidden;
text-align: center;
/* margin-top: 50px;*/
margin-bottom: 85px;
}
.search{
/*position: fixed;
top: 0;
left: 0;*/
padding: 5px;
background-color: #BBBBBB;
border-bottom: solid 4px #EEEEEE;
}
.search,
.disclaimer {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.toggleIcon{
display: inline-block;
width: 14px;
height: 14px;
background: url(../images/trgUp.png) 50% no-repeat;
}
.searchInput{
padding: 3px;
float: left;
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{
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;
}
.subSearch{
margin: 0;
/*float: left; */
}
#subSearchInput{
width: 100%;
/*height: 46px;*/
display: inline-table;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 5px;
padding-right: 26px;
}
#subSearchFilter{
width: 100%;
display: none;
}
.searchResult{
width: 98%;
padding: 3px;
background-color:#123456;
}
.imgContainer{
display: inline-block;
padding: 3px;
margin: 3px;
text-align: center;
overflow: hidden;
font-size: small;
font-family: Verdana,Arial,Helvetica,sans-serif;
vertical-align: top;
}
.filterContainer{
float: left;
margin: 2px;
padding: 2px;
font-size: 14px;
}
.filterSelect{
border-style:none;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
border-top-right-radius: 15px;
margin-top: 2px;
width: 100%;
}
span{
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #666;
}
[draggable] {
-webkit-user-select: none;
user-select: none;
}
.toggleFilters{
margin: 0;
padding: 0;
background-position: center;
background-image: url(../images/down.png);
position: absolute;
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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 214 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 931 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 475 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 448 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,267 @@
<!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"/>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pixabay Image Search</title>
<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">
var API_KEY = '2217022-41b455b44dccd972675602446';
var category = "image";
var thumbnails = true;
var minHeight = 150;
var minWidth = 150;
var currentIndex = 0;
var currentTerm = "";
var limit = 10;
var filtersDisplayed = false; //display or hide filters
function runSearch(term, index) {
currentTerm = term;
currentIndex = index;
var start = index * limit;
var url = "https://pixabay.com/api/?key="+API_KEY+"&q="+escape(term)+"&per_page="+limit+"&page="+start+"&safesearch=true";
$.ajax({
url: url,
success: searchComplete,
error: searchFail,
dataType: "json"
});
}
function searchComplete(json) {
// Grab our content div, clear it.
var totalResults = json.totalResults;
var contentDiv = $('#searchResult').empty();
// Loop through our results, printing them to the page.
var results = json.hits;
for (var i = 0; i < results.length; i++) {
// For each result write it's title and image to the screen
var result = results[i];
var imgContainer = $("<div class='imgContainer' draggable='true'>");
//var title = document.createElement('div');
var iUrl = $("<input type='hidden'/>");
var iContent = $("<input type='hidden'/>");
var iHeight = $("<input type='hidden'/>");
var iWidth = $("<input type='hidden'/>");
var iThumbnailUrl = $("<input type='hidden'/>");
var newImg = document.createElement('img');
if (thumbnails) {
newImg.src = result.previewURL;
} else {
newImg.src = "./images/thumbnail_icon.png";
}
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth;
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight;
imgContainer.width(imgWidth).height(imgHeight);
imgContainer.append($(newImg));
iUrl.attr("value", result.webformatURL);
iContent.attr("value", result.type);
iHeight.attr("value", result.webformatHeight);
iWidth.attr("value", result.webformatWidth);
//iTitle.attr("value",result.title);
console.log(result.previewURL);
iThumbnailUrl.attr("value", result.previewURL);
//imgContainer.append($(title));
imgContainer.append(iUrl);
imgContainer.append(iContent);
imgContainer.append(iHeight);
imgContainer.append(iWidth);
imgContainer.append(iThumbnailUrl);
// Put our title + image in the content
imgContainer.appendTo(contentDiv);
}
// Now add links to additional pages of search results.
addPaginationLinks(totalResults);
}
function addPaginationLinks(totalResults) {
var curPage = currentIndex; // check what page the app is on
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>");
for (var i = 0; i < 8; i++) {
if (i * limit < totalResults) {
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv);
if (curPage == i) {
link.addClass('active');
}
}
}
$("#disc_nav_cont #resultFooter").remove();
pagesDiv.insertBefore($('#disclaimer'));
$(".imgContainer").each(function(){
this.addEventListener("dragstart", imageDragging, false);
})
$(".imgContainer").each(function(){
this.addEventListener("dragenter", imageDragenter, false);
})
$(".imgContainer").each(function(){
this.addEventListener("dragleave", imageDragleave, false);
})
$(".imgContainer").each(function(){
this.addEventListener("dragover", imageDragover, false);
})
}
function searchFail(jqXHR, textStatus, errorThrown) {
alert('Couldn\'t connect to Pixabay: ' + textStatus + ' ' + errorThrown);
}
function imageDragging(e){
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val());
// alert($(this).find("input:hidden").eq(0).val());
}
function imageDragleave(e){
return false;
}
function imageDragover(e){
return false;
}
function imageDragenter(e){
return false;
}
$(document).ready(function(){
//variables
var mode = false; //search or view mode
var hide = false; //hide or no main panel
//basic containers and elements
var search = $("<div id='search' class='search'>").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 d'images sur Pixabay<div>").appendTo(disc_nav_cont);
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search);
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);
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput);
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput);
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput);
//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);
*/
//mouse click actions
/*
toggleFilters.click(function(){
if(filtersDisplayed){
subSearchFilter.hide();
toggleFilters.css("background-image","url(images/down.png)");
filtersDisplayed = false;
} else {
subSearchFilter.show();
toggleFilters.css("background-image","url(images/up.png)");
filtersDisplayed = true;
}
});
*/
/*togglePages.click(function(event){
if(mode){
hide = false;
$("#search, #disclaimer").slideDown('slow', function(){
toggleIcon.css("background-image","url(images/trgUp.png)");
togglePages.appendTo("#search").css("top","").css("bottom","-14px");
});
mode = false;
} else {
hide = true;
$("#search, #disclaimer").slideUp('slow', function(){
toggleIcon.css("background-image","url(images/trgDown.png)");
togglePages.appendTo("body").css("top","0");
});
mode = true;
}
});*/
searchButton.click(function(){
if(!hide){
runSearch(searchInput.val(), 0);
//togglePages.trigger("click");
}
});
searchInput.keydown(function(event){
if(!hide){
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
runSearch(searchInput.val(), 0);
//togglePages.trigger("click");
}
}
});
(
$(".imgContainer").live("click",function(){
sankore.sendFileMetadata(createMetaData($(this)));
}));
/*$(window).resize(function(){
disclaimer.width($("body").width()-20);
search.width($("body").width()-20);
toggleIcon.css("margin-left",(togglePages.width()/2 - 7));
})*/
});
function gotoPage(i) {
runSearch(currentTerm, i);
}
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>Content</key><value>" +
parent.find("input:hidden").eq(1).val() +
"</value></data><data><key>Height</key><value>" +
parent.find("input:hidden").eq(2).val() +
"</value></data><data><key>Width</key><value>" +
parent.find("input:hidden").eq(3).val() +
"</value></data><data><key>thumbnailUrl</key><value>" +
parent.find("input:hidden").eq(4).val() +
"</value></data></metadata>";
return meta;
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="searchResult"></div>
</body>
</html>

@ -0,0 +1,80 @@
var locales = {
'en': {
'def_opts_val_size': 'Any',
'def_opts_val_type': 'Any',
'def_opts_val_image': 'Any',
'def_opts_val_copyright': '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': 'Licence',
'image_license_reuse': 'Reuse',
'image_license_comm_reuse': 'Commercial reuse',
'image_license_modif': '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.'
},
'fr': {
'def_opts_val_size': 'Toutes',
'def_opts_val_type': 'Tous',
'def_opts_val_image': 'Toutes',
'def_opts_val_copyright': 'Tous',
'size_title': 'Tailles',
'size_small': 'Petite',
'size_medium': 'Moyenne',
'size_large': 'Grande',
'size_extra_large': 'Extra large',
'colorization_title': 'Couleurs de l\'image',
'coloriz_grayscale': 'Noir et blanc',
'coloriz_color': 'En 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': 'Types de fichier',
'image_type_title': 'Types d\'image',
'image_type_faces': 'Visages',
'image_type_photo': 'Photo',
'image_type_clipart': 'Images clipart',
'image_type_lineart': 'Dessins au trait',
'image_license_title': 'Droits d\'usage',
'image_license_reuse': 'Usage, distribution',
'image_license_comm_reuse': 'Usage, distribution, commercial',
'image_license_modif': 'Usage, distribution, modification',
'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.'
}
};

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 B

@ -0,0 +1,150 @@
/* 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;
}

@ -0,0 +1,916 @@
/*
* jQuery selectBox - A cosmetic, styleable replacement for SELECT elements
*
* Copyright 2012 Cory LaViska for A Beautiful Site, LLC.
*
* https://github.com/claviska/jquery-selectBox
*
* Licensed under both the MIT license and the GNU GPLv2 (same as jQuery: http://jquery.org/license)
*
*/
if(jQuery) (function($) {
$.extend($.fn, {
selectBox: function(method, data) {
var typeTimer,
typeSearch = '',
isMac = navigator.platform.match(/mac/i);
//
// Private methods
//
var init = function(select, data) {
var options;
// Disable for iOS devices (their native controls are more suitable for a touch device)
if( navigator.userAgent.match(/iPad|iPhone|Android|IEMobile|BlackBerry/i) ) return false;
// Element must be a select control
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');
// Focus on control when label is clicked
select.bind('click.selectBox', function(event) {
control.focus();
event.preventDefault();
});
// Generate control
if( inline ) {
//
// Inline controls
//
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);
// Auto-height based on size attribute
if( !select[0].style.height ) {
var size = select.attr('size') ? parseInt(select.attr('size')) : 5;
// Draw a dummy control off-screen, measure, and remove it
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 {
//
// Dropdown controls
//
var label = $('<span class="selectBox-label" />'),
arrow = $('<span class="selectBox-arrow" />');
// Update label
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();
// Webkit fix to prevent premature selection of options
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);
// Set label width
var labelWidth = control.width() - arrow.outerWidth() - parseInt(label.css('paddingLeft')) - parseInt(label.css('paddingLeft'));
label.width(labelWidth);
disableSelection(control);
}
// Store data for later use and show the control
select
.addClass('selectBox')
.data('selectBox-control', control)
.data('selectBox-settings', settings)
.hide();
};
var getOptions = function(select, type) {
var options;
// Private function to handle recursion in the getOptions function.
var _getOptions = function(select, options) {
// Loop through the set in order of element children.
select.children('OPTION, OPTGROUP').each( function() {
// If the element is an option, add it to the list.
if ($(this).is('OPTION')) {
// Check for a value in the option found.
if($(this).length > 0) {
// Create an option form the found element.
generateOptions($(this), options);
}
else {
// No option information found, so add an empty.
options.append('<li>\u00A0</li>');
}
}
else {
// If the element is an option group, add the group and call this function on it.
var optgroup = $('<li class="selectBox-optgroup" />');
optgroup.text($(this).attr('label'));
options.append(optgroup);
options = _getOptions($(this), options);
}
});
// Return the built strin
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(); // Prevent options from being "dragged"
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(); // Prevent options from being "dragged"
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());
});
// Inherit classes for dropdown menu
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'));
// Menu position
options
.css('min-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 });
};
// Show menu
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();
// Center on selected option
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 is true, this will select all options between li and the last li selected
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());
}
// Update original control's value
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');
}
// Remember most recently selected item
control.data('selectBox-last-selected', li);
// Change callback
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) {
//
// Handles open/close and arrow key functionality
//
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: // backspace
event.preventDefault();
typeSearch = '';
break;
case 9: // tab
case 27: // esc
hideMenus();
removeHover(select);
break;
case 13: // enter
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: // up
case 37: // left
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: // down
case 39: // right
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) {
//
// Handles type-to-find functionality
//
select = $(select);
var control = select.data('selectBox-control'),
options = control.data('selectBox-options');
if( control.hasClass('selectBox-disabled') ) return;
switch( event.keyCode ) {
case 9: // tab
case 27: // esc
case 13: // enter
case 38: // up
case 37: // left
case 40: // down
case 39: // right
// Don't interfere with the keydown event!
break;
default: // Type to find
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;
}
});
// Clear after a brief pause
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');
// Update label
setLabel(select);
// Update control values
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;
// Remove old options
control.data('selectBox-options').remove();
// Generate new options
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':
// Update label
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);
};
//
// Public methods
//
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':
// Getter
if( data === undefined ) return $(this).data('selectBox-control').data('selectBox-options');
// Setter
$(this).each( function() {
setOptions(this, data);
});
break;
case 'value':
// Empty string is a valid 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);

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save