Resize Issue about jquery.tabslideout.js

[melloware]

My updated example is here: https://www.primefaces.org/showcase-ext/sections/slideout/basicUsage.jsf

[mark222]

I also had this problem. After I create my UI, an async AJAX update comes back from the server and populates information inside the slide out. So the size is now larger and the slideout appears partially open (shows part of the panel). Opening and re-closing does not fix it, still shows a partial panel when closed.

I have made a fix (hack?) for this. The problem is that the slideout only looks at the panel size one time during initialization (and stores it in the 'sizes' var). Thereafter it always uses this fixed size.

My fix attempt is to query the panel size dynamically at the time of slideIn() and slideOut(). To make that work I had to rearrange some of the code, and I suspect I hacked it rather badly... not being an expert in javascript. Your application must call

$("#mySlideOut").tabSlideOut("updateSize");

after any operation that (may have) changed the size of the panel (e.g. some update to the DOM inside the slideout). This will re-open/close the slideout with newly calculated panel sizes.

This is an imperfect solution as the panel partially shows itself as soon as the DOM is updated, then the subsequent call (as above) fixes it, but the effect is that the panel pops partly out, then fully closes. It is fairly quick, but annoying. I think the only complete fix is to separate (in the DOM) the handle and the panel content. The content should be hidden when the slideout is closed so that changes to it's content cannot show up on-screen. Only when the slideout is opened should the content be positioned, shown, and animated. To make it work with the current markup would be a lot of work (probably need to reparent all the children except the handle under a synthetic DIV node). Would be easier to define another node inside the slideout to be the parent of all content, but that would not be backwards compatible with the current implementation.

I might tinker with this more if I have time, but for now this solution is good enough. You can find my fork here: https://github.com/mark222/jquery.tabSlideOut.js

I did not submit a pull request because I feel like the changes are too much of a hack and does not make a smooth UI experience.

[mark222]

Have you tried this fix to see if it helps?

[melloware]

I will try it and report back!

[melloware]

it does work but i see what you mean about not a graceful UI experience.

[microneer]

Finally got time to look at this. The best solution turned out to be not just a little tweak, and is in b18634d which I'll release as v2.3.2.

Now tabs are positioned at 0px from the edge they're aligned on, and translated 100% of their size to be just off the page with the tab still showing. This means that even if the panel changes size, they're still off the page.

Slide in and out animation is implemented using CSS animation instead of JQuery.

[melloware]

Tested and fix looks great. the only bug I see introduced is when I do the 'open' method like...

<p:commandButton value="Open" type="button" onclick="PF('slideout').open();"/>  

The table will not open. In the debugger it will open then close again. If I revert to 2.3.1 this works.

[melloware]

Looks like it is a return of this issue: #5 Somehow now that you have removed the animate function it behaves differently. If you run this JSFiddle press the button. Nothing will look like is happening but if you run the debugger you will see the tab open then close.

http://jsfiddle.net/xLow0hxh/

[microneer]

The button click is causing the tab to slide in again because clickScreenToClose is true by default. In v2.3.1, animate would cause that the tab open class to be applied AFTER the button click had propagated to - which was probably 'wrong' but worked better in most cases.

I am making a v2.4 which adds the ability to define clickScreenToCloseFilters - when any of these match a click event, they will prevent the tab from closing. It is simple to set this to ['button'] in your case, an no button clicks will close that tab. I'll be updating the demo too, to show that, and a nice use of it for a "Keep tab open" checkbox.

PS Rather that simulate a mouse click, you should call the API to toggle the tab: $('#right').tabSlideOut('toggle').

[melloware]

You rock. Let me know when its ready I will give it a shot. And yep in my real code I call this from a button click.

$('#right').tabSlideOut('toggle')

But it ends up having the same behavior!

[microneer]

v2.4 is up and this Fiddle demonstrates: http://jsfiddle.net/microneer/6kvus71q/3/

[melloware]

Everything is looking good! I assume to ignore clicks from links and buttons it would be ['button','a'].
Answer: Yep 'a' works fine.

[microneer]

Yes, that sounds right. On 2/01/2018 20:01, "Melloware" <[email protected]> wrote: Everything is looking good! I assume to ignore clicks from links and buttons it would be ['button','a'] ? — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#8 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA6-RUeKuDyPTiqIsIcKd97ooVzs20-Kks5tGosKgaJpZM4L3f-f> .

[cabintech]

Nice!! Glad to get rid of my hack! I also like using:

clickScreenToCloseFilters: ['*']

so that I can totally control the closing of the slider.

Thanks!