Timeline enable/disable animation

Community Driven Extensions Project
Post Reply
jirkis
Posts: 3
Joined: 28 Jul 2014, 13:55

28 Jul 2014, 14:02

Dear PF Extensions developers,
thank you for your great job making PF extensions! I have a question about implementation of your timeline component.
I'm using PrimeFaces: 5.0, PrimeFaces Extensions: 2.0.0
Is there a possibility to disable javascript animation of reordering stacking events in the same group?
With a lot of events it is very slow to animate all of them to iterate to their final positions.
It would be better to skip animation and place them where they should be immediately.

Thanks for your reply.

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

30 Jul 2014, 21:50

Yes, this is possible, but not supported yet. You can disable stacking, but not animation currently. There are two option in JS widget which are not exposed as JSF tag attributes yet, but they are available on the client-side.

animate, boolean
When true, events are moved animated when resizing or moving them. This is very pleasing for the eye, but does require more computational power.

animateZoom, boolean
When true, events are moved animated when zooming the Timeline. This looks cool, but does require more computational power.

You can create a feature request in our bug tracker.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

jirkis
Posts: 3
Joined: 28 Jul 2014, 13:55

31 Jul 2014, 13:06

Thank you, i made a request.
How is it possible on the client side to disable it? Should i use something like:

Code: Select all

<pe:timeline ...widgetVar="timeline" ...></>

<script>
PF('timeline').option.animate = false;
</script>
And will it work after rerendering timeline?

Thank you.

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

02 Aug 2014, 08:05

I think it will work like the first example http://www.primefaces.org/showcase-ext/ ... /basic.jsf Not sure about if the timeline can only update these options on the client-side without re-rendering.
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

jirkis
Posts: 3
Joined: 28 Jul 2014, 13:55

06 Aug 2014, 15:14

Thanks, with some digging into timeline javascript code I used this solution:

Code: Select all

<pe:timeline ... widgetVar="timelineWgt" />
   ...
<pe:javascript event="rangechanged" execute="PF('timelineWgt').getInstance().setOptions({'animate':false, 'animateZoom':false})"/>
</pe:timeline>
This way, timeline should set animation options to false every time it is moved, so that re-stacking events are not animated.

User avatar
Oleg
Expert Member
Posts: 3805
Joined: 02 Oct 2009, 09:41
Location: Germany, Black Forest

17 Aug 2014, 19:04

The issue was done. I've added two attributes "animate" und "animateZoom".

The new release 2.1.0 will be available in the Maven central on Friday (23.08).
PrimeFaces Cookbook (2. edition): http://ova2.github.io/primefaces-cookbook/ Learning Angular UI Development with PrimeNG: https://github.com/ova2/angular-develop ... th-primeng Blog: https://medium.com/@OlegVaraksin

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests