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

Closed
frequent opened this Issue Oct 24, 2013 · 2 comments

Comments

Projects
None yet
1 participant
@frequent
Contributor

frequent commented Oct 24, 2013

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

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Oct 24, 2013

Contributor

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.

Contributor

frequent commented Oct 24, 2013

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

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Oct 24, 2013

Contributor

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;
  },
Contributor

frequent commented Oct 24, 2013

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;
  },
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment