use macdropdown

1 files changed, 135 insertions, 6 deletions

diff --git a/src/main/webapp/wayf-ndn.jsp b/src/main/webapp/wayf-ndn.jsp
index 0129455..1567a77 100644
--- a/src/main/webapp/wayf-ndn.jsp
+++ b/src/main/webapp/wayf-ndn.jsp
@@ -151,10 +151,139 @@
     <script type="text/javascript">
 $(function() {
 		   $("input:submit, input:reset, input:button, a",".button").button();
-		   $("#origin").mcDropdown('#sites');
+		   //$("#origin").mcDropdown('#sites');
 		   $(".sitelist").menu();
 });
     </script>
+    <script type="text/javascript"> 
+		$.widget( "ui.iosMenu", {
+			options: {
+				backText:      'Back',
+				slideDuration: 400,
+				slideEasing:   'linear'
+			},
+ 
+			_insertBackButtons: function() {
+				this.element.find( 'li ul, li ol' ).prepend(
+					$( '<li>' +
+						 '	<span class="ui-icon ui-icon-carat-1-w"></span>' +
+						 '	<a href="#menu-back" class="ios-menu-back-link">' +
+									this.options.backText +
+						 '	</a>' +
+						 '</li>'
+				) );
+				return this;
+			},
+ 
+			_create: function( options ) {
+				var iosMenu = this;
+ 
+				iosMenu
+					._insertBackButtons()
+					.element
+						.addClass( 'ios-style' )
+						.menu({
+							// When a submenu shows up, place it just to the right
+							// of the current menu. Later, we'll slide it into view.
+							position: {
+								my: 'left top',
+								at: 'right top',
+								of: iosMenu.element
+							}
+						});
+ 
+				var menu = iosMenu.element.data( 'menu' );
+ 
+				// Override menu#select to account for nesting and back buttons:
+				menu.select = function( event ) {
+					if ( menu.active && menu.active.find( '> .ios-menu-back-link' ).length ) {
+						// if you selected "back", go back:
+						menu.focus( event, menu.active );
+						if ( menu.left( event ) ) {
+							event.stopImmediatePropagation();
+						}
+						event.preventDefault();
+					} else if ( menu.active && menu.active.find( '> ul' ).length ) {
+						// if you selected something with children, show the children:
+						menu.focus( event, menu.active );
+						if ( menu.right( event ) ) {
+							event.stopImmediatePropagation();
+						}
+						event.preventDefault();
+					} else {
+						menu._trigger( 'select', event, { item: menu.active } );
+					}
+				};
+ 
+				// Override menu#left to enable sliding behavior:
+				menu.left = function( event ) {
+					var newItem = this.active && this.active.parents( 'li:not(.ui-menubar-item) ').first(),
+							self		= this,
+							parent;
+					if ( newItem && newItem.length ) {
+					  newItem.find( '> a' ).addClass( 'ui-state-focus' ).removeClass( 'ui-state-active' );
+						parent = this.active.parent();
+						parent
+							.attr( 'aria-hidden', 'true' )
+							.attr( 'aria-expanded', 'false' )
+							.animate({
+								left: self.element.css( 'width' )
+							}, iosMenu.options.slideDuration, iosMenu.options.slideEasing, function() {
+								parent.hide();
+								self.focus( event, newItem );
+							})
+						return true;
+					} else if ( event && event.which === $.ui.keyCode.ESCAPE ) {
+						// #left gets called both for left-arrow and escape. If it's the
+						// latter and we're at the top, fire a "close" event:
+						self._trigger( 'close', event );
+					}
+				};
+ 
+				// Override menu#_open to enable sliding behavior:
+				var menuOpenWithoutSliding = menu._open;
+				menu._open = function ( submenu ) {
+					menuOpenWithoutSliding.call( this, submenu );
+					submenu.animate({
+						left: 0
+					}, iosMenu.options.slideDuration, iosMenu.options.slideEasing);
+				};
+ 
+				// Override menu#_startOpening so that hovering doesn't
+				// initiate the sliding:
+				menu._startOpening = function() {
+					clearTimeout( this.timer );
+				}
+			},
+ 
+			destroy: function() {
+			  var menu = this.element && this.element.data( 'menu' );
+				menu && menu.destroy();
+			}
+		});
+ 
+		$(function() {
+			var list    = $( '#sites' );
+			var firstLI = list.find( 'li' ).first();
+			list
+				.iosMenu()
+				.focus()
+				.menu( 'focus', {}, firstLI )
+				.bind( 'menuselect', function( event, ui ) {
+					$('#origin').attr('value',$(ui.item).attr('rel'));
+					$('#selector').submit();
+				});
+		});
+	</script> 
+	<style> 
+		.ios-style, .ios-style ul, .ios-style ol { background: #fff; height: 200px; padding: 2px; width: 260px; }
+		.ios-style { overflow-x: hidden; overflow-y: auto; }
+		.ios-style::-webkit-scrollbar { width: 5px; height: 5px; }
+		.ios-style::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.6); border-radius: 4px; }
+		.ios-style ul, .ios-style ol { overflow-y: visible; border: none; }
+		.ios-style.ui-menu-icons .ui-menu-item a { position: inherit; }
+		.ios-style .ui-menu-item a { cursor: pointer; outline: none; }
+	</style>
 </head>
 
 <body>
@@ -192,7 +321,7 @@ $(function() {
 	        	<logic:present name="cookieList" scope="request">
 		        	<li style="veritcal-align: top; border-right: 1px solid #CECECE; min-height: 300px; padding-right: 20px;">
 					   <h2>Recently Used</h2>
-					   <ul class="sitelist">
+					   <ul class="sitelist" style="margin-bottom: 50px;">
 					        <logic:iterate id="site" name="cookieList">
 					            <li><a tabindex="10" href="#<jsp:getProperty name="site" property="name"/>"><jsp:getProperty name="site" property="displayName"/></a></li> 
 					        </logic:iterate>
@@ -217,9 +346,9 @@ $(function() {
 	        	</logic:present>
 	        	<li style="vertical-align: top; padding-left: 20px;">
 	        		<h2>Full list of identity providers</h2>
-	        		<form method="get" action="<bean:write name="requestURL" />">
+	        		<form id="selector" method="get" action="<bean:write name="requestURL" />">
 	        		  <input type="hidden" name="action" value="selection"/>
-			          <input type="text" name="origin" id="origin" value="" />
+			          <input type="hidden" name="origin" id="origin" value="" />
 					  <logic:notPresent name="entityID" scope="request">
 		                 <input type="hidden" name="shire" value="<bean:write name="shire" />" />
 		                 <input type="hidden" name="target" value="<bean:write name="target" />" />
@@ -238,10 +367,10 @@ $(function() {
 		                 <option value="session" selected="selected"> Remember for session</option>
 		                 <option value="perm"> Remember for a week</option>
 		              </select>
-		              <input tabindex="50" type="submit" value="Select"/>
+		              <!-- input tabindex="50" type="submit" value="Select"/ -->
 		            </form>
 					<logic:present name="siteLists" scope="request">
-					  <ul id="sites" class="mcdropdown_menu">
+					  <ul id="sites">
 						<logic:iterate id="siteset" name="siteLists">
 			                <li>
 			                   <!-- a href="#<jsp:getProperty name="siteset" property="name"/>"><jsp:getProperty name="siteset" property="name"/></a -->