diff options
author | Leif Johansson <leifj@sunet.se> | 2011-07-27 18:42:48 +0200 |
---|---|---|
committer | Leif Johansson <leifj@sunet.se> | 2011-07-27 18:42:48 +0200 |
commit | cd7c5c728a20f18a533910b55cb13e3f7caffd66 (patch) | |
tree | 9a12f841fdb13a3b3875db61beb6972215a6838d /src/main | |
parent | 2024410ea7c3b23e71b40c6720a1d251024bc69a (diff) |
use macdropdown
Diffstat (limited to 'src/main')
-rw-r--r-- | src/main/webapp/wayf-ndn.jsp | 141 |
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 --> |