search

jquery-archive / jquery-mobile

jQuery Mobile Framework
https://jquerymobile.com
Other
9.68k stars 2.4k forks source link

Responsive sliding panels #5163

Closed toddparker closed 11 years ago

toddparker commented 11 years ago

A simple widget we should try to land would be a generic panel utility that would allow peolple to make collapsible panels and menus. The idea is to have a button that can show the panel when tapped.

We're going to do some initial prototyping to see the feasibility of adding this widget. We'll use this code as a starting point:

https://github.com/filamentgroup/Slidenav http://filamentgroup.github.com/Slidenav/demo/

jasondscott commented 11 years ago

We currently have this in BlackBerry 10 theme http://jsbin.com/eciwes/3. Both the slide and the push.

toddparker commented 11 years ago

Good call @jasondscott - can you link to the files for this in the BB10 repo?

jasondscott commented 11 years ago

atm this is very tightly coupled with the actionbar. The original design was to have them as separate plugins but time did not allow for it. https://github.com/blackberry/jQueryMobile-BB10-Theme/tree/master/plugins/actionbar https://github.com/blackberry/jQueryMobile-BB10-Theme/tree/master/plugins/overflowMenu All of the logic is here https://github.com/blackberry/jQueryMobile-BB10-Theme/blob/master/plugins/actionbar/jquery.mobile.actionbar.js

jesperveldhuizen commented 11 years ago

Any progress on this guys? :-)

Little wish from me (if it's possible): make the menu fixed on 100% height and disable the scrolling on the normal page (like facebook's menu).

m-vdv commented 11 years ago

+1 for a good SlideNav, JQuery Mobile really needs this!

@baansport Aldo Lugo created a jQM FB style slide nav, but it's far from perfect.. see here: http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/

For best UX, I'd suggest the following:

I recently stumbled upon Sidetap (http://sidetap.it/) So far it's the best jQuery based sidenav I've seen, you might want to check it out ;)

As always, huge thanks to the entire jQuery Mobile Team!

toddparker commented 11 years ago

@jasondscott created a prototype here in a branch: http://jquerymobile.com/branches/SlidingPanel/docs/content/content-overflow.html

I think for 1.3, we should just focus on the left/right and push/over modes and skip top/bottom.

m-vdv commented 11 years ago

@toddparker Great to see you're actively working on this! :D

Looks and already works quite good in webkit on the desktop.. A whole lot of bugs left on mobile unfortunately :/ I could provide you a list of the bugs I can find, if that would be helpful but I assume you're already aware of them since it's just a prototype.

Good luck!

toddparker commented 11 years ago

Initial API work here: http://oksoclap.com/C1Lv3eBfTF

jesperveldhuizen commented 11 years ago

Will the panel widget be placed within the page like normal widgets? Would be great if this widget could be placed outside the page to avoid double code (in fact, in every page).

toddparker commented 11 years ago

@baansport - I agree, but I think this will require larger changes to our widgets. We need to look at updating all our widgets to live outside page, slated for 1.4

arschmitz commented 11 years ago

@toddmparker i think thats a good idea for the 1.4 review might as well try to get all these larger widget issues done at once

jaspergrannetia commented 11 years ago

Toddparker: "I think for 1.3, we should just focus on the left/right and push/over modes and skip top/bottom."

I totally agree (for what that is worth :-D). Having these features would be just great. This widget, and also the gorgeous new table widget, would really make a difference. Love what you are doing and waiting patiently. :-) Thnx!

josh-io commented 11 years ago

Really looking forward to this! Here at TapCanvas, we built our own homegrown solution (see an example at http://tapcanvas.com/go/sampleapp). We're happy to contribute our code, or just feel free to view source and incorporate what's useful. :)

toddparker commented 11 years ago

@jamerrill - thanks, yours is really slick. @jlembeck and I have been hacking away on the plugin and initial decs/demos.

We're looking at adding a 3rd display type (Push) that would essentially turn the panel into a collapsible column at wider widths. Demo isn't working right here for that, but here' is where we are now: http://jquerymobile.com/branches/slide-panel/docs/panels/index.html

josh-io commented 11 years ago

@toddparker Thanks! Here are a few observations:

  1. I think you'll want a way to prevent horizontal scrolling when the panel is open. Our method was to give the body a class consisting of: position:fixed;top:0;right:0;bottom:0;left:0;overflow-x:hidden;.
  2. It can be problematic if the height of the panel equals the height of the page, i.e. if a user open the panel using a link in the middle of the page, he/she can't see the navigation in the panel without scrolling to the top.
  3. The "pan" display mode slides the panel in. My ideal visual effect is for the page to "reveal" the panel underneath. :)

Sooooo happy this is going to be a part of jQM!

toddparker commented 11 years ago

@jamerrill -

  1. Good tip
  2. We've been discussing this. How do you handle this? Scroll to the top when the panel opens?
  3. Subtle, but you're right. We can change pan so the panel is there and the page just slides away

Great stuff, thanks for the info. I've been looking at your code and we're going to flip this over to use translateX like you do to make things smoother. Do you use a feature test for that?

josh-io commented 11 years ago
  1. Thanks! :)
  2. Our panel gets position:fixed and top:0;right:0;bottom:0;left:0;—then it can scroll independently of the page. -webkit-overflow-scrolling: touch; makes scrolling feel great, too.
  3. Cool!
  4. TranslateX makes a huge difference. We used a feature test, but we found that older versions of Android were lying to us, so we ended up just specifying iOS and Chrome. :)
toddparker commented 11 years ago

I just tacked on a todo list here for the changes and items remaining for the panels - feel free to add items: http://oksoclap.com/C1Lv3eBfTF

toddparker commented 11 years ago

Updated demo, working on performance now: http://jquerymobile.com/branches/slide-panel/docs/panels/index.html

forresst commented 11 years ago

I tested the page and I have two comments: 1) the "push" mode does not work the same way as the other 2 modes: if we are not on the top of the page and you click on the link "push", the framework is positioned above of the page. For the other 2 modes, it remains in the same place (it is not positioned at the top). (Tested on Chrome 23)

2) Small error in doc: replace "The panel Behaves just like at narrow widths pan goal at WIDER viewports (above 600 pixels)" by "The panel Behaves just like narrow widths reveal at goal at WIDER viewports (above 600 pixels) "

In any case it is the great work!

toddparker commented 11 years ago

@forresst - for #1, are you talking about the layer to dismiss the panel? RIght now, we hide that overlay at wide breakpoints to allow you to basically open the panel and leave it open as you work with the page, sort of like a collapsible column. Is that what you're referring to?

Docs need an update for sure.

josh-io commented 11 years ago

Looking really nice! I'd still love it if the left/right panels didn't scroll with the page content—if you open the panel using the "Open panel" link 1/3 down the page, it's actually impossible on iPhone to see the panel contents. :)

One fun thing: a swipe event could be added to close the panel. :)

jaspermdegroot commented 11 years ago

Swipe to close the panel works with "reveal". Not sure if we should also use that for "push".

josh-io commented 11 years ago

Ahh. Looks like the swipe event is bound to the revealed panel, when it should be bound to the page. (The idea is that the user is "pushing" the page back with their thumb.)

For the Push method, it doesn't matter where the swipe event is—both the panel and page are moving back to their original position.

m-vdv commented 11 years ago

@uGoMobi I believe Swipe events should work for all open/close panel methods, unless there is a good reason not too that I haven't thought of? Btw the swipe close doesn't seem to work on Android (Standard/Chrome browser)

@jamerrill Definitely with you on that, the panels shouldn't scroll with the page. But scrolling within the panel must remain possible! (think of panels with lot's of content).

This is starting to become really great, can't wait to implement this!

josh-io commented 11 years ago

@webslash Agree with you there, the panel should scroll independently of the page.

toddparker commented 11 years ago

I just changed this so swipe anywhere on the page closes the panel, regardless of mode or direction.

We've added a bunch of hardware acceleration and it's way better now. Still refining. http://jquerymobile.com/branches/slide-panel/docs/panels/index.html

^^ The preview is updated hourly and is probably not in sync with Git yet.

Making the panel scroll independently of the page won't work well on a lot of our platforms so that's going to be tricky. If you just set overflow:auto on a container, it can make the overflow content inaccessible on quite a few platforms. Position:fixed also needs lot of qualification, that should never be directly applied in your CSS because it breaks a lot of platforms. I think both of these may be needed to get that effect and it will need a lot of qualification and testing so that may be a later refinement. Adding a scroll top top may be a low-tech approach for now.

forresst commented 11 years ago

@toddparker I'll try to be more explicit (still under chrome 23 desktop):

For mode reveal or mode overlay 1) scroll the page to the section "Setting panel display mode" 2) click on the link "reveal" (or "overlay") => the panel opens and scroll position of the page (right side of the screen) does not move ( test OK ) 3) click again on the "reveal" (or "overlay") => the panel closes and the scroll position of the page (right side of the screen) does not move ( test OK )

For mode push 1) scroll the page to the section "Setting panel display mode" 2) click on the link "push" => panel opens but the scroll position of the page (right side of the screen) returns to the top of the page ( test KO ) 3) click again on the "push" => panel closes and the scroll position of the page (right side of the screen) remains to the top ( test KO )

toddparker commented 11 years ago

We’ve decided to tweak the sliding panel code a bit and API to simplify internals and support the most common use cases. So instead of the link being used to configure the panel position (left, right) and display (reveal, push, overlay), these are now set on the panel and the link just points to which panel to display. Work being done in the slide-panel-refactor branch.

scottjehl commented 11 years ago

Perhaps similar changes should roll into a future popup update too, simplifying the code by decoupling links from popups.

On Dec 13, 2012, at 11:17 AM, Todd Parker wrote:

We’ve decided to tweak the sliding panel code a bit and API to simplify internals and support the most common use cases. So instead of the link being used to configure the panel position (left, right) and display (reveal, push, overlay), these are now set on the panel and the link just points to which panel to display. Work being done in the slide-panel-refactor branch.

— Reply to this email directly or view it on GitHub.

m-vdv commented 11 years ago

I've taken the time to test out the slide panels inside an Android WebView (on SGS2 with ICS 4.0.4)

Refactored Slide Panel http://jquerymobile.com/branches/slide-panel-refactor/

Overlay Panel doesn't show, only the panels shadow appears a little. However a phone rotation change does force the panel to show up. But the fixed header is on top of the panel.

Reveal The page content is pushed aside but once again no panel just whitespace. Again a phone rotation change does force the panel to show up. But the fixed header is on top of the panel.

Push The page content is pushed aside but no panel just whitespace. Again a phone rotation change does force the panel to show up. Panel is on top of fixed header.

(old) Slide Panel http://jquerymobile.com/branches/slide-panel/

Overlay Animation is a little choppy but it works

Reveal Works well

Push Works as it should

Right panel which has the form does show some issues. Push & Overlay show the panel for a second then the panel dissapears and there's only whitespace. Didn't find issues on phone rotation change.

So to my findings the "old" slide-panel works a lot better then the refactored one in an Android WebView. Hope this helps you guys out, I can put together a test WebView app which loads the slide panel pages if you want it to test on your own devices, just let me know!

Good luck and I hope to see a stable slide-panel with reveal in JQM 1.3 ;)

toddparker commented 11 years ago

@webslash - thanks for the report. The only thing I can think of is the hardware acceleration may be causing issues? Seems to work great in all the Android versions we have in a browser so it must be a difference between the browser and a webview. From my testing, ICS had the worst animation performance and we're still thinking about whether we should kick them out of transitions manually.

Mind adding this CSS rule to your page to negate the hardware acceleration to see if it makes a difference?

.ui-panel-3dtransforms.ui-panel-content-wrap,
.ui-panel-3dtransforms ~.ui-panel-content-wrap .ui-header {
    -webkit-backface-visibility: visible;
}

Would you also mind testing that page in the default browser and Chrome on your phone? Is it better or worse? Lastly, if you turn off animations, how well does it work?

josh-io commented 11 years ago

Just checked out the refactored slide panel on iOS 6.2 running on iPhone 5. Awesome! I did have an issue when using the phone in landscape mode: the panel scrolls with the page, whereas in portrait mode, it does not.

m-vdv commented 11 years ago

@toddparker You're welcome! I didn't set Hardware acceleration to "true" for the WebView, so that's probably not it. The android WebView behaves quite differently from the standard browser or Chrome and to my findings it's the worst of all :/ However I believe PhoneGap uses the Android WebView as well, so good support for it would be welcomed by many.

Now I haven't had time to test your suggestions yet, but here's the app I made which allows you to input a URL and it'll open the page inside an Android WebView (hardware acceleration not set), that way you can test things easily ;)

Download: http://www.webslash.be/clients/jqm/jQMWebView.apk

m-vdv commented 11 years ago

@toddparker Tested the refactored slide panel with the suggested css rule but it appears to have no effect within WebView. (In standard browser and Chrome the slide panel still works)

Also tested with animations turned off, exact same behaviour (slidepanel only shows after a phone orientation change), just without the animations.

The best slide panel I've seen so far is the one Google has on it's mobile website, it also works perfectly within WebView so it might be worth checking out how they put it together.

Let me know if there's anything else I can do to help ;)

arschmitz commented 11 years ago

@toddmparker I installed the app from @webslash and tested on htc thunderbolt w/ 2.3. and galaxy nexusw/ 4.1 2.3 works perfectly 4.1 is exactly as @webslash described with 4.0

arschmitz commented 11 years ago

@webslash Thank you very much for this app it will help out a lot with issues involving webviews on android previously this was very difficult for us to work with. Iv already put it on two test devices and plan to use it to work on some other long standing android / webview issues

m-vdv commented 11 years ago

@arschmitz That's great to hear! ;)

jaspermdegroot commented 11 years ago

@webslash - I installed your app as well... really awesome! Thanks!!

jaspermdegroot commented 11 years ago

The cause of the Android WebView issue reported by @webslash is:

.ui-panel-3dtransforms {
    position: fixed;
}
toddparker commented 11 years ago

I think we might want to kick Android 4.0 out manually by failing the 3D test. Animations are pretty bad in ICS and the fixed positioning is killing PhoneGap.

Seems like 4.1 is fine on both counts so I think this is just a case where 4.0 isn't quite up to snuff on some pretty basic CSS stuff.

@scottjehl @zachleat @arschmitz @uGoMobi - What do you think?

arschmitz commented 11 years ago

@toddparker both @uGoMobi and myself were able to reproduce this in 4.1 also :(

arschmitz commented 11 years ago

A few more issues i have noticed using the panels 1.) if you set dismissable to false it throws an error on every open or close its from this line https://github.com/jquery/jquery-mobile/blob/slide-panel-refactor/js/widgets/panel.js#L232 you are adding and removing a class from _modal which is undefined if dismissible is set to false you can see this issue at http://jsbin.com/uzaret/613 it also does a similar one for close to fix use if(self._modal !== null) to check if its a modal first 2.) if you call close on a closed panel then open it it opens then squashes the panel to the left because its not removing the class ui-panel-closed gets added at end of open for some reason. it looks like this is because you are running the transition on the closed panel which dosent complete so it dosent call complete. I wouldnt think close should do anything on a closed panel. maybe the whole method should be wrapped in if(this._open) and not do anything if its not open

jaspermdegroot commented 11 years ago

I tested http://jquerymobile.com/branches/slide-panel-refactor/ on Galaxy Nexus Android 4.1.1.

Default browser: overlay + push: white blink on panel reveal: no blink on panel, but problems with header. It doesn't slide with content and there is a redraw at end of the transition.

Chrome: Only problem with reveal. It looks like a redraw of the content/header during the transition. You see a flash of the dark (panel) background through the content/header.

arschmitz commented 11 years ago

@webslash We were wondering if you would mind if we put your app in our demos and contributing guidelines to help other people test in web views we think this could be really helpful to some people. We will make sure to give you full credit (not to mention its in the app lol).

jaspergrannetia commented 11 years ago

I noticed that reflowing the content of the page in Push mode is not consistent in all browsers (all on Windows Vista with http://jquerymobile.com/branches/slide-panel-refactor/docs/panels/index.html):

Hope this helps. Let me know if I need to retest.

Jasper

m-vdv commented 11 years ago

@arschmitz No problem, go ahead!

zachleat commented 11 years ago

While working on tests for the slide panel, I noticed an issue with the transitionend events not firing on panel open in Firefox. It wasn't animating the panel at all.

The culprit was:

.ui-page-active.ui-panel-page-block{
    overflow-x:hidden;
}

I've removed this in the PR with the tests here: https://github.com/jquery/jquery-mobile/pull/5412

I'm guessing that removal may have some bearing on some of the testing happening here.

arschmitz commented 11 years ago

panels are now merged into master and good to go!

toddparker commented 11 years ago

Woo hoo! That was easy :)