Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Popup: modified trigger option to support multiple elements. #582

Closed
wants to merge 2 commits into from

4 participants

@clarkbox

this replaces #578
Also adding this feature to the demo, and streamlining the JS in the demo to be more concise and clear.

@jzaefferer jzaefferer commented on the diff
demos/popup/popup-menu-table.html
@@ -19,9 +19,15 @@
$(this).popup("close");
}
};
-
- $(".demo td:has(.menubar)").clone().appendTo(".demo tbody tr:not(:first)");
- $("table .menubar > ul").menu(selected).popup().prev().button();
+
+ $(".myMenu").menu(selected).popup({ trigger: $(".myButtons").button() });
+
+ $('#openButton').on('click', function(event){
+ $(".myMenu").popup('open');
+ event.preventDefault();
+ event.stopPropagation();
@jzaefferer Owner

Despite these calls, clicking #openButton while the popup is still open causes it to open and close immediately. In other words, click on the first button to open it, then click on this button, and it'll go through to show and hide animations and end up not visible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@jzaefferer
Owner

Sorry it took so long to review this. Could you look into the reopening-issue? Once thats settled, we can land this.

@scottgonzalez

Is this still relevant?

@mikesherov
Collaborator

@clarkbox, I'm going to close this pull for now. It needs unit tests and has a couple of bugs to work out. If you're still interested in pursuing this, please feel free to open a new pull that addresses the issues @jzaefferer pointed out and write some tests. Thanks again man!

@mikesherov mikesherov closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 62 additions and 26 deletions.
  1. +47 −21 demos/popup/popup-menu-table.html
  2. +15 −5 ui/jquery.ui.popup.js
View
68 demos/popup/popup-menu-table.html
@@ -19,9 +19,15 @@
$(this).popup("close");
}
};
-
- $(".demo td:has(.menubar)").clone().appendTo(".demo tbody tr:not(:first)");
- $("table .menubar > ul").menu(selected).popup().prev().button();
+
+ $(".myMenu").menu(selected).popup({ trigger: $(".myButtons").button() });
+
+ $('#openButton').on('click', function(event){
+ $(".myMenu").popup('open');
+ event.preventDefault();
+ event.stopPropagation();
@jzaefferer Owner

Despite these calls, clicking #openButton while the popup is still open causes it to open and close immediately. In other words, click on the first button to open it, then click on this button, and it'll go through to show and hide animations and end up not visible.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ }).button();
+
});
</script>
<style type="text/css">
@@ -34,7 +40,9 @@
.demo th, .demo td {
padding: 0.5em;
}
- </style>
+
+ #openButton{margin-top:20px;}
+ </style>
</head>
<body>
@@ -56,22 +64,7 @@
<td class="ui-widget-content">3.6</td>
<td class="ui-widget-content">
<div class="menubar">
- <a href="#">Options</a>
- <ul>
- <li><a href="#">Order...</a></li>
- <li class="ui-state-disabled">Write a Review...</li>
- <li><a href="#">Find Similar Movies...</a></li>
- <li>
- <a href="#">Rate</a>
- <ul>
- <li><a href="#">5 stars</a></li>
- <li><a href="#">4 stars</a></li>
- <li><a href="#">3 stars</a></li>
- <li><a href="#">2 stars</a></li>
- <li><a href="#">1 stars</a></li>
- </ul>
- </li>
- </ul>
+ <a href="#" class="myButtons">Options</a>
</div>
</td>
</tr>
@@ -79,19 +72,52 @@
<td class="ui-widget-content">Rod Stewart: Storyteller 1984-1991</td>
<td class="ui-widget-content">1991</td>
<td class="ui-widget-content">3.1</td>
+ <td class="ui-widget-content">
+ <div class="menubar">
+ <a href="#" class="myButtons">Options</a>
+ </div>
+ </td>
</tr>
<tr>
<td class="ui-widget-content">Stevie Ray Vaughan and Double Trouble: Live at the El Mocambo 1983</td>
<td class="ui-widget-content">1991</td>
<td class="ui-widget-content">3.9</td>
+ <td class="ui-widget-content">
+ <div class="menubar">
+ <a href="#" class="myButtons">Options</a>
+ </div>
+ </td>
</tr>
<tr>
<td class="ui-widget-content">Spike and Mike's Sick &amp; Twisted Festival of Animation</td>
<td class="ui-widget-content">1997</td>
<td class="ui-widget-content">2.6</td>
+ <td class="ui-widget-content">
+ <div class="menubar">
+ <a href="#" class="myButtons">Options</a>
+ </div>
+ </td>
</tr>
</tbody>
</table>
+
+ <a href="#" id="openButton">Programtically open popup()</a>
+
+ <ul class="myMenu">
+ <li><a href="#">Order...</a></li>
+ <li class="ui-state-disabled">Write a Review...</li>
+ <li><a href="#">Find Similar Movies...</a></li>
+ <li>
+ <a href="#">Rate</a>
+ <ul>
+ <li><a href="#">5 stars</a></li>
+ <li><a href="#">4 stars</a></li>
+ <li><a href="#">3 stars</a></li>
+ <li><a href="#">2 stars</a></li>
+ <li><a href="#">1 stars</a></li>
+ </ul>
+ </li>
+ </ul>
<div id="log"></div>
</div>
@@ -99,7 +125,7 @@
<div class="demo-description">
-<p>Poup menu in a table. Works okay standalone, not so much in the scrolling demo view. For that to work better, position() would have to take the closest scrolled parent into account for collision detection.</p>
+<p>Poup menu in a table. Demonstrates using popup with multiple triggers. Works okay standalone, not so much in the scrolling demo view. For that to work better, position() would have to take the closest scrolled parent into account for collision detection.</p>
</div><!-- End demo-description -->
View
20 ui/jquery.ui.popup.js
@@ -102,13 +102,16 @@ $.widget( "ui.popup", {
event.preventDefault();
},
mousedown: function( event ) {
- var noFocus = false;
+ var noFocus = false,
+ target = $( event.target );
/* TODO: Determine in which cases focus should stay on the trigger after the popup opens
(should apply for any trigger that has other interaction besides opening the popup, e.g. a text field) */
- if ( $( event.target ).is( "input" ) ) {
+ if ( target.is( "input" ) ) {
noFocus = true;
}
- if (this.isOpen) {
+
+ //clicking on the same trigger twice should close the popup
+ if (this.isOpen && target.is( this.triggeredBy ) ) {
suppressExpandOnFocus = true;
this.close();
return;
@@ -217,10 +220,17 @@ $.widget( "ui.popup", {
},
open: function( event ) {
+ //keep state of the target that triggered this event - required in the case of a shared popup element
+ this.triggeredBy = event ? event.target : this.options.trigger;
var position = $.extend( {}, {
- of: this.options.trigger
+ of: this.triggeredBy
}, this.options.position );
-
+
+ //in the case this is a shared popup (aka has more than one trigger) we need to hide this so the following _show() effect will appear
+ if( this.isOpen ){
+ this.element.css('display','none');
+ }
+
this._show( this.element, this.options.show );
this.element
.attr( "aria-hidden", "false" )
Something went wrong with that request. Please try again.