panel (outside page): panel=open is not removed from the page object when changing page. Breaks panel when going back to this page.

[frequent]

Not so easy to explain or do in JSBIN...

Here is a: demo page

• Use Firefox
• On first page, open panel, click "Invoices"
• (page will stall while dumping sample data to localstorage)
• On invoice page, the panel still opens/closes
• Click "Home" in header top right or back button
• Back on first page, the panel will not open any more.

Checking with Firebug/Firequery I can see that panel=open is set on the page object of the first page I left when clicking a link on the panel.

When now going back from B to A panel=open is still there as well as some classes set on the ui-content panel wrapper.

So when trying to open the panel again, inside the panel widget:

      if ( self._page().jqmData( "panel" ) === "open" ) {
        self.document.on( "panelclose", function() {
          _openPanel();
        });
      } else {
        _openPanel();
      }

this always ends up in the first handler vs. the second, preventing the panel from opening again.

[frequent]

Seems a problem with self._page(). In my demo when going from A to B, self._page() will return B.

Logging:

  _getPage: function() {
    console.log("get page");
    console.log($( "." + $.mobile.activePageClass ))
    var page = this._parentPage ? this._parentPage : $( "." + $.mobile.activePageClass );

    return page;
  },

on a pagebeforehide will be called 11 times. First 2 times $( "." + $.mobile.activePageClass ) is page A, after that it will be B.

[frequent]

Untested fix (works in my example):

I'm setting an openedPage property to whichever page was "panel-treated" when a panel was opened. The property is reset when a panel closes. On getPage I always try to retrieve this property first before accessing parent page or active page.

Should work since there won't be multiple panels open at the same time.

1. In extensions props add _openedPage

    $.extend( this, {
       ...
         _openedPage: null,
       ...
    });

1. On open, set _openedPage

  complete = function() {
      ...
      self._trigger( "open" );

      self._openedPage = self._page();
  };

1. On close, reset _openedPage

  complete = function() {
      ...
      self._trigger( "close" );

      self._openedPage = null;;
  };

1. In getPage() try to get _openedPage before _parentPage or active page

  _getPage: function() {
      var page = this._openedPage || (this._parentPage ? this._parentPage : $( "." + $.mobile.activePageClass ));

      return page;
  },