summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorLeif Johansson <leifj@sunet.se>2011-07-27 18:42:48 +0200
committerLeif Johansson <leifj@sunet.se>2011-07-27 18:42:48 +0200
commitcd7c5c728a20f18a533910b55cb13e3f7caffd66 (patch)
tree9a12f841fdb13a3b3875db61beb6972215a6838d
parent2024410ea7c3b23e71b40c6720a1d251024bc69a (diff)
use macdropdown
-rw-r--r--src/main/webapp/wayf-ndn.jsp141
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 -->