Improved drop down list and search options

CHANGES

@@ -33,6 +33,8 @@ SWITCHwayf Changes and Version History:
           Embedded WAYF
         - If the Discovery Feed feature is activated only those IdPs are shown 
           that are contained in the feed. Others will be hidden automatically.
+        - Added Locations to format of IDP entries to allow users to search
+          Identity Providers using a geographical hint.
 
 1.15    Release date: 21. October 2011
         - A default and custom CSS file can now be used

css/default-styles.css

@@ -141,9 +141,13 @@ pre {
 
 /* dropdown arrow control */
 .idd_icon {
-	border-color: #C0C0C0;
-	border-style: solid solid solid none;
-	border-width: 0;	
+	border-width: 0;
+}
+
+.idd_icon:hover {
+	box-shadow: 1px 1px 8px #999999;
+	-webkit-box-shadow: 1px 1px 8px #00247D;
+	-moz-box-shadow: 1px 1px 8px #00247D;
 }
 
 /* Dropdown list */
@@ -178,7 +182,7 @@ div.idd_list {
 
 /* Dropdown list items nested under group headers */
 .idd_listItem_Nested {
-	padding-left: 15px;
+	margin-left: 15px;
 }
 
 /* mouseover on all list items except group headers */

css/improvedDropdown.css

-
-/* textbox part of the dropdown list */
-.idd_textbox {
-	border-style: solid;
-	border-color: #333333;
-	vertical-align: middle;
-}
-
-/* dropdown arrow control */
-.idd_icon {
-	border-color: #C0C0C0;
-	border-style: solid solid solid none;
-	border-width: 0;	
-}
-
-/* Dropdown list */
-div.idd_list {
-	border: thin solid #C0C0C0;
-	max-height: 300px;
-	background-color: #FFFFFF;
-	padding-left: 5px;
-	padding-top: 0px;
-	padding-bottom: 0px;
-	z-index: 900;
-}
-
-/* Option Group headers */
-.idd_listItemGroupHeader
-{
-	font-family:Verdana, sans-serif;
-	font-size: 12px;
-	padding-bottom: 2px;
-	font-weight: bold;
-	text-align: left
-}
-
-/* Dropdown list items except group headers */
-.idd_listItem {
-	font-family:Verdana, sans-serif;
-	font-size: 12px;
-	height: 1em; 
-	margin: 0px;
-	padding-bottom: 2px;
-	text-align:left;
-}
-
-/* Dropdown list items nested under group headers */
-.idd_listItem_Nested {
-	padding-left: 15px;
-}
-
-/* mouseover on all list items except group headers */
-.idd_listItem_Hover
-{
-	color: #FFFFFF;
-	background-color: #00247D;
-}
-
-/* List items that are disabled */
-.idd_listItem_Disabled {
-	color: #C0C0C0;
-	cursor: default;
-}

default-header.php

@@ -8,7 +8,6 @@
 	<meta name="description" content="Choose your home organization to authenticate">
 	<script type="text/javascript" src="<?php echo $javascriptURL ?>/jquery.js"></script>
 	<script type="text/javascript" src="<?php echo $javascriptURL ?>/improvedDropDown.js"></script>
-	<link rel="StyleSheet" href="<?php echo $cssURL ?>/improvedDropdown.css" type="text/css">
 	<script language="JavaScript" type="text/javascript">
 	<!--
 	

functions.php

@@ -472,8 +472,8 @@ function composeOptionTitle($IdPValues){
 	foreach($IdPValues as $key => $value){
 		if (is_array($value) && isset($value['Name'])){
 			$title .= ' '.$value['Name'];
-		} elseif ($key != 'SSO') {
-			$title .= ' '.$value;
+		} elseif ($key == 'Locations' && is_array($value)) {
+			$title .= ' '.implode(' ', $value);
 		}
 	}
 	

js/improvedDropDown.js

@@ -133,7 +133,7 @@ function getTextElement(sourceElement, imgElement) {
                   .css('height', sourceElement.outerHeight() + 'px')
                   .css('font-family', sourceElement.css('font-family'))
                   .css('font-size', sourceElement.css('font-size'))
-                  .css('border-width', '1px')                                    
+                  .css('border-width', '1px')
                   .attr('autocomplete', 'off')
                   .attr('padding','0')
                   .width(controlWidth);
@@ -194,6 +194,7 @@ function getTextElement(sourceElement, imgElement) {
         }
     });
     
+	// Clear text area on click
 	newTextElement.click(function (obj) {
 		obj.target.value = "";
 	});
@@ -508,7 +509,9 @@ function positionList(listControl) {
             var childItems = listControl.children('.idd_listItem:visible,.idd_listItemGroupHeader:visible');
 
             var elementHeightPx = getElementsTotalHeightPx(childItems) + 5;
-            var maxHeightPx = $(window).height() + $(document).scrollTop() - listControl.position().top - 20;
+
+			// Use absolute position of list to calculate list height
+            var maxHeightPx = $(window).height() + $(document).scrollTop() - listControl.offset().top - 20;
             var minListHeigtPx = 12;
             var listhHeight = Math.min(elementHeightPx, maxHeightPx)
             listhHeight = Math.max(listhHeight, minListHeigtPx);
@@ -523,7 +526,9 @@ function positionList(listControl) {
             listWidthPx = Math.min(maxListWidthPx, listWidthPx);
 
             childItems.css('width', listWidthPx + 'px');
-            listControl.css('width', listWidthPx + 'px');
+
+			// Add some margin for compensating scrollbar
+            listControl.css('width', (listWidthPx + 15) + 'px');
 
         } catch  (err)  { /*eat any sizing errors */ }
 }
@@ -573,8 +578,14 @@ function updateListFilter(textControl) {
 }
 
 function doesListItemMach(listItem, compareText) {
+	
+	// Ensure the is not returned
+	if (listItem.attr('savedValue') == '-'){
+		return false;
+	}
+	
     // Compares a listItem (jQuery object representing item in dropdown list) to compareText
-	return (!listItem.hasClass('idd_listItem_Disabled')) && (stringContainsCaseInsensitive(listItem.text(), compareText) || stringContainsCaseInsensitive(listItem.attr('savedValue'), compareText) || stringContainsCaseInsensitive(listItem.attr('savedTitle'), compareText))
+	return (!listItem.hasClass('idd_listItem_Disabled')) && (stringContainsCaseInsensitive(listItem.text(), compareText) || stringContainsCaseInsensitive(listItem.attr('savedTitle'), compareText))
 }
 
 function getIsDirty(textControl) {

templates.php

@@ -96,7 +96,8 @@ function printDropDownList($IDProviders, $selectedIDP = ''){
 		}
 		
 		// Add additional information as title to the entry
-		$title = composeOptionTitle($values);
+		$title = getDomainNameFromURI($key);
+		$title .= composeOptionTitle($values);
 		
 		// Figure out if entry is valid or a category
 		if (!isset($values['SSO'])){