From 9d9e1ce12225302776497d0a98271e904740b4fd Mon Sep 17 00:00:00 2001 From: jzaefferer Date: Fri, 8 Apr 2011 15:31:06 +0200 Subject: [PATCH] Adding popup utility prototype to visual menu tests --- tests/visual/menu/popup.html | 159 +++++++++++++++++++++++++++++++++++ tests/visual/menu/popup.js | 107 +++++++++++++++++++++++ 2 files changed, 266 insertions(+) create mode 100644 tests/visual/menu/popup.html create mode 100644 tests/visual/menu/popup.js diff --git a/tests/visual/menu/popup.html b/tests/visual/menu/popup.html new file mode 100644 index 000000000..de9796133 --- /dev/null +++ b/tests/visual/menu/popup.html @@ -0,0 +1,159 @@ + + + + Visual Test for Popup Utility + + + + + + + + + + + + + + + + + + +
+
+ + +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameRelease YearAverage Rating
Red Hot Chili Peppers: Funky Monks19933.6 +
+ Options + +
+
Rod Stewart: Storyteller 1984-199119913.1
Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 198319913.9
Spike and Mike's Sick & Twisted Festival of Animation19972.6
+ +
+ Log: +
+
+ + + diff --git a/tests/visual/menu/popup.js b/tests/visual/menu/popup.js new file mode 100644 index 000000000..dea1452e0 --- /dev/null +++ b/tests/visual/menu/popup.js @@ -0,0 +1,107 @@ +/* + * jQuery UI popup utility + */ +(function($) { + +var idIncrement = 0; + +$.widget( "ui.popup", { + options: { + position: { + my: "left top", + at: "left bottom" + } + }, + _create: function() { + if ( !this.options.trigger ) { + this.options.trigger = this.element.prev(); + } + + if ( !this.element.attr( "id" ) ) { + this.element.attr( "id", "ui-popup-" + idIncrement++ ); + this.generatedId = true; + } + + if ( !this.element.attr( "role" ) ) { + // TODO alternatives to tooltip are dialog and menu, all three aren't generic popups + this.element.attr( "role", "tooltip" ); + this.generatedRole = true; + } + + this.options.trigger + .attr( "aria-haspop", true ) + .attr( "aria-owns", this.element.attr( "id" ) ); + + this.element + .addClass("ui-popup") + this._close(); + + this._bind(this.options.trigger, { + click: function( event ) { + event.stopPropagation(); + event.preventDefault(); + this._open( event ); + } + }); + + this._bind({ + keyup: function( event ) { + if (event.keyCode == $.ui.keyCode.ESCAPE && this.element.is( ":visible" )) { + this._close( event ); + this.options.trigger.focus(); + } + } + }); + + this._bind(document, { + click: function( event ) { + if (this.open && !$(event.target).closest(".ui-popup").length) { + this._close( event ); + } + } + }) + }, + + _destroy: function() { + this.element + .show() + .removeClass( "ui-popup" ) + .removeAttr( "aria-hidden" ) + .removeAttr( "aria-expanded" ); + + if ( this.generatedId ) { + this.element.removeAttr( "id" ); + } + if ( this.generatedRole ) { + this.element.removeAttr( "role" ); + } + }, + + _open: function( event ) { + var position = $.extend( {}, { + of: this.options.trigger + }, this.options.position ); + + this.element + .show() + .attr( "aria-hidden", false ) + .attr( "aria-expanded", true ) + .position( position ) + .focus(); + this.open = true; + this._trigger( "open", event ); + }, + + _close: function( event ) { + this.element + .hide() + .attr( "aria-hidden", true ) + .attr( "aria-expanded", false ); + this.open = false; + this._trigger( "close", event ); + } + + +}); + +}(jQuery));