Skip to content

Commit 9d9e1ce

Browse files
jzaeffererjzaefferer
committed
Adding popup utility prototype to visual menu tests
1 parent d573a92 commit 9d9e1ce

File tree

2 files changed

+266
-0
lines changed

2 files changed

+266
-0
lines changed

‎tests/visual/menu/popup.html

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Visual Test for Popup Utility</title>
5+
<link rel="stylesheet" href="../visual.css" type="text/css" />
6+
<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" title="ui-theme" />
7+
<script type="text/javascript" src="../../../jquery-1.5.1.js"></script>
8+
<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
9+
<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
10+
<script type="text/javascript" src="../../../ui/jquery.ui.position.js"></script>
11+
<script type="text/javascript" src="../../../ui/jquery.ui.button.js"></script>
12+
<script type="text/javascript" src="../../../ui/jquery.ui.menu.js"></script>
13+
<script type="text/javascript" src="popup.js"></script>
14+
<!--
15+
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
16+
-->
17+
<script type="text/javascript">
18+
$(function() {
19+
$.fn.themeswitcher && $('<div/>').css({
20+
position: "absolute",
21+
right: 10,
22+
top: 10
23+
}).appendTo(document.body).themeswitcher();
24+
25+
var selected = {
26+
select: function( event, ui ) {
27+
$( "<div/>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" );
28+
$(this).hide();
29+
}
30+
};
31+
32+
$("#button1").button();
33+
$("#menu1").menu(selected).popup();
34+
35+
$( "#rerun" )
36+
.button()
37+
.click(function() {
38+
alert( "Running the last action" );
39+
})
40+
.next()
41+
.button({
42+
text: false,
43+
icons: {
44+
primary: "ui-icon-triangle-1-s"
45+
}
46+
})
47+
.parent()
48+
.buttonset()
49+
.next()
50+
.menu(selected)
51+
.popup({
52+
trigger: $("#select")
53+
});
54+
55+
$("td:has(.menubar)").clone().appendTo("tbody tr:not(:first)");
56+
$("table .menubar > ul").menu(selected).popup().prev().button();
57+
});
58+
</script>
59+
<style type="text/css">
60+
body { font-size:62.5%; }
61+
62+
.ui-popup { position: absolute; z-index: 5000; }
63+
.ui-menu { width: 200px; }
64+
65+
table {
66+
border-collapse: collapse;
67+
}
68+
th, td {
69+
padding: 0.5em;
70+
border: 1px solid black;
71+
}
72+
</style>
73+
</head>
74+
<body>
75+
76+
<button id="button1">Show context menu 1</button>
77+
<ul id="menu1">
78+
<li><a href="#">Amsterdam</a></li>
79+
<li><a href="#">Anaheim</a></li>
80+
<li><a href="#">Cologne</a></li>
81+
<li><a href="#">Frankfurt</a></li>
82+
<li><a href="#">Magdeburg</a></li>
83+
<li><a href="#">Munich</a></li>
84+
<li><a href="#">Utrecht</a></li>
85+
<li><a href="#">Zurich</a></li>
86+
</ul>
87+
88+
<div>
89+
<div>
90+
<button id="rerun">Run last action</button>
91+
<button id="select">Select an action</button>
92+
</div>
93+
<ul>
94+
<li><a href="#">Open...</a></li>
95+
<li><a href="#">Save</a></li>
96+
<li><a href="#">Delete</a></li>
97+
</ul>
98+
</div>
99+
100+
<table id="movies" class="ui-widget">
101+
<thead>
102+
<tr>
103+
<th data-field="Name" class="ui-widget-header">Name</th>
104+
<th data-field="ReleaseYear" class="ui-widget-header">Release Year</th>
105+
<th data-field="AverageRating" class="ui-widget-header">Average Rating</th>
106+
<th class="ui-widget-header"></th>
107+
</tr>
108+
</thead>
109+
<tbody>
110+
<tr>
111+
<td class="ui-widget-content">Red Hot Chili Peppers: Funky Monks</td>
112+
<td class="ui-widget-content">1993</td>
113+
<td class="ui-widget-content">3.6</td>
114+
<td class="ui-widget-content">
115+
<div class="menubar">
116+
<a href="#">Options</a>
117+
<ul>
118+
<li><a href="#">Order...</a></li>
119+
<li class="ui-state-disabled">Write a Review...</li>
120+
<li><a href="#">Find Similar Movies...</a></li>
121+
<li>
122+
<a href="#">Rate</a>
123+
<ul>
124+
<li><a href="#">5 stars</a></li>
125+
<li><a href="#">4 stars</a></li>
126+
<li><a href="#">3 stars</a></li>
127+
<li><a href="#">2 stars</a></li>
128+
<li><a href="#">1 stars</a></li>
129+
</ul>
130+
</li>
131+
</ul>
132+
</div>
133+
</td>
134+
</tr>
135+
<tr>
136+
<td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td>
137+
<td class="ui-widget-content">1991</td>
138+
<td class="ui-widget-content">3.1</td>
139+
</tr>
140+
<tr>
141+
<td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td>
142+
<td class="ui-widget-content">1991</td>
143+
<td class="ui-widget-content">3.9</td>
144+
</tr>
145+
<tr>
146+
<td class="ui-widget-content">Spike and Mike's Sick &amp; Twisted Festival of Animation</td>
147+
<td class="ui-widget-content">1997</td>
148+
<td class="ui-widget-content">2.6</td>
149+
</tr>
150+
</tbody>
151+
</table>
152+
153+
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
154+
Log:
155+
<div id="log" style="height: 400px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
156+
</div>
157+
158+
</body>
159+
</html>

‎tests/visual/menu/popup.js

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/*
2+
* jQuery UI popup utility
3+
*/
4+
(function($) {
5+
6+
var idIncrement = 0;
7+
8+
$.widget( "ui.popup", {
9+
options: {
10+
position: {
11+
my: "left top",
12+
at: "left bottom"
13+
}
14+
},
15+
_create: function() {
16+
if ( !this.options.trigger ) {
17+
this.options.trigger = this.element.prev();
18+
}
19+
20+
if ( !this.element.attr( "id" ) ) {
21+
this.element.attr( "id", "ui-popup-" + idIncrement++ );
22+
this.generatedId = true;
23+
}
24+
25+
if ( !this.element.attr( "role" ) ) {
26+
// TODO alternatives to tooltip are dialog and menu, all three aren't generic popups
27+
this.element.attr( "role", "tooltip" );
28+
this.generatedRole = true;
29+
}
30+
31+
this.options.trigger
32+
.attr( "aria-haspop", true )
33+
.attr( "aria-owns", this.element.attr( "id" ) );
34+
35+
this.element
36+
.addClass("ui-popup")
37+
this._close();
38+
39+
this._bind(this.options.trigger, {
40+
click: function( event ) {
41+
event.stopPropagation();
42+
event.preventDefault();
43+
this._open( event );
44+
}
45+
});
46+
47+
this._bind({
48+
keyup: function( event ) {
49+
if (event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" )) {
50+
this._close( event );
51+
this.options.trigger.focus();
52+
}
53+
}
54+
});
55+
56+
this._bind(document, {
57+
click: function( event ) {
58+
if (this.open && !$(event.target).closest(".ui-popup").length) {
59+
this._close( event );
60+
}
61+
}
62+
})
63+
},
64+
65+
_destroy: function() {
66+
this.element
67+
.show()
68+
.removeClass( "ui-popup" )
69+
.removeAttr( "aria-hidden" )
70+
.removeAttr( "aria-expanded" );
71+
72+
if ( this.generatedId ) {
73+
this.element.removeAttr( "id" );
74+
}
75+
if ( this.generatedRole ) {
76+
this.element.removeAttr( "role" );
77+
}
78+
},
79+
80+
_open: function( event ) {
81+
var position = $.extend( {}, {
82+
of: this.options.trigger
83+
}, this.options.position );
84+
85+
this.element
86+
.show()
87+
.attr( "aria-hidden", false )
88+
.attr( "aria-expanded", true )
89+
.position( position )
90+
.focus();
91+
this.open = true;
92+
this._trigger( "open", event );
93+
},
94+
95+
_close: function( event ) {
96+
this.element
97+
.hide()
98+
.attr( "aria-hidden", true )
99+
.attr( "aria-expanded", false );
100+
this.open = false;
101+
this._trigger( "close", event );
102+
}
103+
104+
105+
});
106+
107+
}(jQuery));

0 commit comments

Comments
 (0)