Toolbar: Add option "external" #8428

Open
gabrielschulhof opened this Issue Apr 21, 2016 · 3 comments

Comments

Projects
None yet
2 participants
@gabrielschulhof
Contributor

gabrielschulhof commented Apr 21, 2016

external:

  • null: use current code (roughly this.element.closest(".ui-page")) to detect whether you're in a page.
  • true: Assume you're external
  • false: Assume you're internal

The reason we need this is that external toolbars set all current and future pages to position: relative, however, if a toolbar is instantiated on a floating piece of DOM, it will not find a parent page, thus affecting all current pages.

Additionally, the code for setting the pages as relative should key off of this.document instead of running a global selector, i.e., this.document.find( ... )... (in toolbar.js:_setRelative())

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Apr 21, 2016

Contributor

Oh, check other places/widgets where we check whether a widget is inside a page and create this option there too.

Contributor

gabrielschulhof commented Apr 21, 2016

Oh, check other places/widgets where we check whether a widget is inside a page and create this option there too.

@cgack

This comment has been minimized.

Show comment
Hide comment
@cgack

cgack Apr 28, 2016

Contributor

@gabrielschulhof is there a specific demo/example where I can see this?

Contributor

cgack commented Apr 28, 2016

@gabrielschulhof is there a specific demo/example where I can see this?

gabrielschulhof added a commit to gabrielschulhof/jquery-mobile that referenced this issue Apr 29, 2016

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Apr 29, 2016

Contributor

@cgack I was going to build selectmenu that way to save on DOM manip, but I couldn't, because it was marking all pages as position: relative.

Try this:

  1. Go to http://jsbin.com/zifoxi/
  2. Click "Go to other page"
  3. Click "Go back"
  4. Click "Create popup"
  5. Click "Go to other page"

At this point the other page will appear below the current page, which is itself visibility: hidden-ed, because, upon its creation, the toolbar set all pages to be position: relative, so now they appear below one another.

This problem doesn't happen if you attach the toolbar div to the DOM and into a page before instantiating the toolbar on it.

Contributor

gabrielschulhof commented Apr 29, 2016

@cgack I was going to build selectmenu that way to save on DOM manip, but I couldn't, because it was marking all pages as position: relative.

Try this:

  1. Go to http://jsbin.com/zifoxi/
  2. Click "Go to other page"
  3. Click "Go back"
  4. Click "Create popup"
  5. Click "Go to other page"

At this point the other page will appear below the current page, which is itself visibility: hidden-ed, because, upon its creation, the toolbar set all pages to be position: relative, so now they appear below one another.

This problem doesn't happen if you attach the toolbar div to the DOM and into a page before instantiating the toolbar on it.

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