Permalink
Browse files

Added the clickArea option

  • Loading branch information...
Nathan Long
Nathan Long committed Mar 8, 2011
1 parent 5263267 commit 6ac438d8cb2aacd974325ed04912f8ebd1b35850
Showing with 35 additions and 6 deletions.
  1. +27 −3 README.markdown
  2. +8 −3 jquery.persistentpanel.js
View
@@ -27,7 +27,7 @@ My apologies for any confusion.
(See examples/index.html)
-## Options (as of v1.20)
+## Options (as of v1.30)
<table>
<thead>
@@ -63,6 +63,23 @@ My apologies for any confusion.
pages, it should use the same cookie name on each page.
</td>
</tr>
+ <tr>
+ <td>clickArea</td>
+ <td>(the toggler element)</td>
+ <td>Any valid jQuery selector string</td>
+ <td>
+ Which element, when clicked, should open and close your panel?
+ Normally, this will be determined by the toggler setting, but
+ in some cases, you might want to specify a different area.
+ For example, you want the toggler contents to change from
+ one arrow to another when the panel opens and closes, but
+ you want to place that arrow inside a larger tab, and you
+ want the user to be able to click anywhere in the tab to
+ toggle the panel.
+ If you don't pass anything in for this option, the click
+ listener is attached to the toggler itself.
+ </td>
+ </tr>
<tr>
<td>defaultState</td>
<td>'closed'</td>
@@ -114,8 +131,15 @@ My apologies for any confusion.
<td>'#panelToggler'</td>
<td>Any valid jQuery selector string</td>
<td>
- Which element, when clicked, should open and close your
- panel? Note: I **strongly** recommend that you use an ID for this
+ By default, which element, when clicked, should open and close your
+ panel?
+ With default settings, the toggler will both be the click trigger for
+ the panel to open and close, and will contain a directional arrow
+ which changes directions when the panel is opened or closed.
+ Both of these behaviors can be overridden: if you set togglerContents
+ to false, the arrows won't change, and if you set clickArea to
+ something else, the click listener won't be attached to this element.
+ Note: I **strongly** recommend that you use an ID for this
selector; you may have more than one panel on the screen at some
point, and you don't want multiple togglers to affect the same panel.
(If you're using the same ID more than once per page, you're Doing
View
@@ -1,5 +1,5 @@
// ---------------------------------------------
-// persistentPanel v1.20
+// persistentPanel v1.30
// A jQuery plugin by Nathan Long
// https://github.com/sleeplessgeek/persistentPanel
// ---------------------------------------------
@@ -135,8 +135,10 @@
// Get things started
initialize();
+ var $clickArea = $(settings.clickArea).length > 0 ? $(settings.clickArea) : $(settings.toggler);
+
// Add namespaced click event listener
- $(settings.toggler).bind('click.persistentPanel',function(e){
+ $clickArea.bind('click.persistentPanel',function(e){
e.preventDefault();
e.stopPropagation();
switch($.data(panel, 'persistentPanelState')) {
@@ -157,6 +159,7 @@
$.fn.persistentPanel.defaults = {
togglerContents: {open: null, closed: null}, // To be determined by openDirection
animations: {open: null, close: null}, // To be determined by openDirection
+ clickArea: null,
cookieName: 'persistentPanel',
defaultState: 'closed',
openDirection: 'down',
@@ -170,9 +173,11 @@
horizontalClose: function(duration, settings){
// Determine opposite direction of openDirection
var dir = settings.openDirection === 'left' ? 'right' : 'left';
+
+ var $clickArea = $(settings.clickArea).length > 0 ? $(settings.clickArea) : $(settings.toggler);
// Default mode will be to slide the panel off screen and back on,
// leaving the toggler visible.
- var dist = 0 - ($(this).outerWidth(true) - (($(this).outerWidth(true) - $(this).width()) / 2) - $(settings.toggler).outerWidth(true));
+ var dist = 0 - ($(this).outerWidth(true) - (($(this).outerWidth(true) - $(this).width()) / 2) - $clickArea.outerWidth(true));
var animationOpts = {};
animationOpts[dir] = dist + 'px';
$(this).animate(animationOpts, duration);

0 comments on commit 6ac438d

Please sign in to comment.