Menubar #979

Closed
wants to merge 8 commits into
from
@@ -44,10 +44,18 @@
items: ".menubarItem",
menuElement: ".menuElement"
});
+
+ $("#bar4").menubar({
+ position: {
+ within: $("#demo-frame").add(window).first()
+ },
+ select: select,
+ orientation: "vertical"
+ });
});
</script>
<style>
- #bar1, #bar2 { margin: 0 0 4em; }
+ #bar1, #bar2, #bar3 { margin: 0 0 4em; }
</style>
</head>
<body>
@@ -194,6 +202,52 @@
</div>
</div>
+<ul id="bar4" class="menubar">
+ <li><a href="#About">About</a></li>
+ <li>
+ <a href="#File">File</a>
+ <ul>
+ <li><a href="#Open...">Open...</a></li>
+ <li class="ui-state-disabled"><a href="#">Open recent...</a></li>
+ <li><a href="#Save">Save</a></li>
+ <li><a href="#Save%20as...">Save as...</a></li>
+ <li><a href="#Close">Close</a></li>
+ <li><a href="#Quit">Quit</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#Edit">Edit</a>
+ <ul>
+ <li><a href="#Copy">Copy</a></li>
+ <li><a href="#Cut">Cut</a></li>
+ <li class="ui-state-disabled"><a href="#">Paste</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#View">View</a>
+ <ul>
+ <li><a href="#Fullscreen">Fullscreen</a></li>
+ <li><a href="#Fit%20into%20view">Fit into view</a></li>
+ <li>
+ <a href="#Encoding">Encoding</a>
+ <ul>
+ <li><a href="#Auto-detect">Auto-detect</a></li>
+ <li><a href="#UTF-8">UTF-8</a></li>
+ <li>
+ <a href="#UTF-16">UTF-16</a>
+ <ul>
+ <li><a href="#Option%201">Option 1</a></li>
+ <li><a href="#Option%202">Option 2</a></li>
+ <li><a href="#Option%203">Option 3</a></li>
+ <li><a href="#Option%204">Option 4</a></li>
+ </ul>
+ </li>
+ </ul>
+ </li>
+ <li><a href="#Customize...">Customize...</a></li>
+ </ul>
+ </li>
+</ul>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Log:
<div id="log" style="height: 100px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
@@ -10,8 +10,9 @@ TestHelpers.commonWidgetTests( "menubar", {
at: "left bottom"
},
disabled: false,
+ orientation: "horizontal",
// callbacks
create: null
}
-});
+});
@@ -11,6 +11,45 @@ test( "markup structure", function() {
});
});
+test( "Passing a vertical orientation parameter adds vertical classes on ui elements", function() {
+ expect( 11 );
+
+ var secondMenuItem,
+ element = $( "#bar1" ).menubar({ orientation: "vertical" }),
+ widget = element.data( "ui-menubar" ),
+ options = widget.options,
+ menuItemCount = element.children( ".ui-menubar-item" ).length,
+ firstMenuItem = $( "#bar1 .ui-menubar-item .ui-button:first" ),
+ defaultOrientation = $( "#bar2" ).menubar().data( "ui-menubar" ).options.orientation;
+
+ equal( "horizontal", defaultOrientation, "menubars shoud have horizontal orientation by default" );
+ equal( "vertical", options.orientation, "options should reflect vertical option being set" );
+ ok( element.hasClass( "vertical" ) , "menubar should have a vertical class applied" );
+ equal( element.children( ".ui-menubar-item.vertical" ).length, menuItemCount, "menuItems should have a vertical class applied" );
+
+ firstMenuItem[ 0 ].focus();
+ equal( document.activeElement, firstMenuItem[0], "Focus set on first menuItem" );
+
+ $( firstMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
+ ok( firstMenuItem.hasClass( "ui-state-focus" ), "RIGHT should NOT move focus off of focused item if vertically oriented" );
+
+ $( firstMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.LEFT } );
+ ok( firstMenuItem.hasClass( "ui-state-focus" ), "LEFT should NOT move focus off of focused item if vertically oriented" );
+
+ $( firstMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
+ ok( !firstMenuItem.hasClass( "ui-state-focus" ), "DOWN should move focus off of focused item if vertically oriented" );
+
+ secondMenuItem = firstMenuItem.parent().next().children(":first");
+ equal( document.activeElement, secondMenuItem[ 0 ], "Focus is set on second menuItem" );
+
+ $( secondMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.UP } );
+ ok( firstMenuItem.hasClass( "ui-state-focus" ), "UP should move focus back to the original menu item" );
+
+ $( firstMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
+ $( secondMenuItem ).simulate( "keydown", { keyCode: $.ui.keyCode.RIGHT } );
+ ok( widget.active, "Pressing RIGHT on a menuItem with a subMenu should make the submenu active" );
+});
+
test( "accessibility", function () {
expect( 2 );
var element = $( "#bar1" ).menubar();
@@ -34,14 +73,14 @@ test( "Cursor keys should move the focus", function() {
});
test ( "_destroy should successfully unwrap 'span.ui-button-text' elements" , function() {
- expect(1);
+ expect(1);
var containedButtonTextSpans,
- element = $( "#bar1" ).menubar();
+ element = $( "#bar1" ).menubar();
- element.menubar( "destroy" );
- containedButtonTextSpans = element.find( "span.ui-button-text" ).length
- equal( containedButtonTextSpans, 0, "All 'span.ui-button-text' should be removed by destroy" );
+ element.menubar( "destroy" );
+ containedButtonTextSpans = element.find( "span.ui-button-text" ).length
+ equal( containedButtonTextSpans, 0, "All 'span.ui-button-text' should be removed by destroy" );
});
@@ -13,3 +13,10 @@
.ui-menubar .ui-menubar-link { border-right: 1px dashed transparent; border-left: 1px dashed transparent; }
.ui-menubar .ui-menu { width: 200px; position: absolute; z-index: 9999; font-weight: normal; }
+
+/* Vertical orientation support */
+.ui-menubar-item.vertical { float: none; }
+.ui-menubar.vertical .ui-button { float: none; }
+.ui-menubar.vertical .ui-button.ui-state-focus, .ui-menubar.vertical .ui-button:hover {
+ float: none; border: solid 1px transparent;
+}
Oops, something went wrong.