Flowtime.updateNavigation() issues

[kawof]

Hi @marcolago, thanks for your wonderful plugin.

I have an urgent issue:

I am adding content dynamically via Ajax. Everytime I add or remove elements I call Flowtime.updateNavigation() to let flowtime know about my newly modified elements.

Flowtime.addEventListener("flowtimenavigation") is also needed while navigating but this event seems to be also called with updateNavigation().

If I want to add content via Ajax when for example e.prevSection == false, this fire and endless loop because the Flowtime.updateNavigation() seems to call the flowtimenavigation event and viceversa.

Is there a way to separate both? Any advice would be appreciated.

[marcolago]

Hi.

I’ve changed the updateNavigation API so you have to call Flowtime.updateNavigation(false); as the parameter to avoid event fire.

I’ve pushed the edit to master with some other improvements. Let me know if this works for you.

Thanks. marcolago

[kawof]

Wow, thank you so much for the quick response. I will test it now and let you know.

PS: is there any place to donate anything to your project? its very helpful!

[marcolago]

Thanks for your appreciation and your kindness. I’m completely new to donations for my work (and the donation is not necessary) but if you want I have a PayPal account https://www.paypal.me/marcolago/

Thanks again and let me know if everything is fine and if you need further support. marcolago

[kawof]

Great. I will do that.

I am now running into a connected issue: When I dynamically add a new slide and do an updateNavigation(), the DOM is updated as expected but flowtime will automatically navigate until the new slide. I assume this is like this, because if my old slide had a sectionIndex of 0 for example, when doing the updateNavigation, my new slide will have a sectionIndex of 0, and therefore flowtime automatically goes there (however this is just a guess).

To illustrate better my point I did a quick codepen example: Preview: https://s.codepen.io/anon/debug/WQJzVK#/2/1 Code: http://codepen.io/anon/pen/WQJzVK

If you navigate from the left to the right you will see: page 1, page 2 and page 3. If you come back to the left, once you reach page 1, my code will add page 3 on the left of page 1. However, instead of remaining in page 1, Flowtime automatically will to page 3, which is the newly added item. This is not the desired behavior. I would like to be able to add page 3 on the left, while remaining on page 1.

How can I achieve this?

[marcolago]

Hi. Thanks for the example, it was very useful to identify the problem. Now I have fixed the issue in a better way than today.

You can check a new demo forked from your pen here: http://s.codepen.io/marcolago/debug/MaGBqz and the pen here: http://codepen.io/marcolago/pen/MaGBqz

You can use the new, temporary, version of the main script from here: http://flowtime-js.marcolago.com/examples/a/flowtime.js

Please, have a look and make some tests, and let me know if everything will be fine. If ok I’ll merge this version in the master branch.

Please, mind that the timeout delay you have used to trigger the navigation logic was too short (250ms), it has to be in sync with the transition duration from page to page (500ms by default). I've added two utility methods, Flowtime.getTransitionTime() and Flowtime.setTransitionTime(), to get and set the time programmatically.

Thanks for the patience. marcolago

[kawof]

Hi @marcolago

Thanks for your help.

I am not sure I understand the new functionality completely. How do I activate the default animation when navigating through the other slides? In the codepen, all animations are disabled by default, right? I also can't see the post loading on the left when I reach again the first slide. Is there anything specifically I should do now to activate it?

[kawof]

Sorry, apparently that was an issue on my end. I cleared my cache and the new script worked perfectly. I will test it and let you know asap. Thanks!

[marcolago]

No problem. Let me know if you need further support. I’m curious about what you are building with Flowtime, I hope you could show me the work when done.

[kawof]

Hi @marcolago,

I tested the new code in codepen and it works as desired. Could you please push it to the master so it incorporates all the latest changes you did in the master as well?

Thanks a lot!

[marcolago]

Hi. I've just pushed to master the new version. I've also made a little improvement in brav1toolbox.js.

Just a note. I've seen that you have included in you original Codepen both brav1toolbox.js and flowtime.min.js. Mind that flowtime.min.j is a minified and concatenated file that already includes brav1toolbox.js.

Feel free to let me know any feedback or issue you run into. Thanks for your appreciation. marcolago

[kawof]

One question: did you push the Flowtime.updateNavigation( false ); into the master as well?

I am checking the code of the updated flowtime.js in line 1387 and I can't see that new add anywhere and that call is not working. Maybe it got lost in between the changes?

[marcolago]

I've rewritten the updateNavigation API but I forgot to update the documentation. The navigate parameter is not needed anymore.

I've tested this version of the FLowtime scipt with your code here: http://s.codepen.io/marcolago/debug/MaGBqz and everything is working fine.

Could you tell me what call is not working now? Thanks and sorry fo the inconvenience, I'll update the documentation ASAP.

[kawof]

I am not so sure yet what my issue is. Please check this codepen: http://codepen.io/anon/pen/avKKyL http://codepen.io/anon/debug/avKKyL

My logic is as it follows: I load a first page that contains only one section with one page. I add the following conditionals: if e.prevSection == false, prepend another slide on the left. if e.nextSection == false, append another slide to the right and updateNavigation() for both. I do this because I will be adding and deleting slides as long as the user navigate through the screen.

The problem is that I am getting e.prevSection == false and e.nextSection == false even though the new pages have been added and updateNavigation() has been called. Do you know why? I checked my code and it seems logical to me, but maybe I spent too much time in front of it already..

As a side note: There is also a difference in what's happening in codepen and my local server, and its that in my localserver the navigation event gets called as soon as the page is loaded, while in codepen I have to either touch one of my keys, resize the window or open inspector tools. I see that in codepen you added Flowtime.start(). Is that really needed?

[marcolago]

Uhm. Ok, I got it. I didn’t considered this specific case. Give me just a little time to check and I’ll let you know soon.

Flowtime.start(); force the init of the script. Flowtime also works if you don’t call the start method but if you have changed some default options, of if you need to force the initial navigation, because you want to start on a deep page and not at the first, or, just in your case, you need an initial navigation event, you have to call the start method.

I suggest to always call Flowtime.start() after setting the options (maybe I should be more explicit in the readme).

I’ll let you know something about the problem soon.

[marcolago]

Hi. I've worked on your last demo and I made some changes both to Flowtime and your code.

In Flowtime I've fixed a problem with the hash change and the event that causes the continuos event trigger.

In your code I changed some things to better manage the section cloning and to optimize the general flow.

You can find a new version of your last demo here: http://codepen.io/marcolago/pen/yYEqKK?editors=101

The code is commented to explain what I've done.

The main problem was that your version clones and prepend or append the section and call updateNavigation every single time and not only when really needed (i.e. you call updateNavigation bot when you prepend and when append at the same time.

Another problem was that you clone an entire jQuery object and not a single DOM node. The result was that after the first prepend, when you append what you've cloned, you append not only 1 section but 2 (the jQuery collection).

This is why I “hate” jQuery; it's not very predictable :P

You last example was very useful to identify some quirks in the update > navigate > event trigger flow. Now the flows is improved and more solid.

I've tested the demo and everything seems fine to me, but please double check because I'm not completely aware of the result you want to to achieve.

Let me know if is ok so I'll push this version to master or if you ran into other issues. Thanks for the patience. marcolago

[kawof]

Wow @marcolago thanks a lot for your amazing help. I am learning a lot here.

Just as a quick note, I actually put that clone code in there in order to make a very quick and dirty representation of my environment, but in my code I am not cloning the posts, as I am using wordpress and ajax to retrieve content dynamically. This was just an improvised solution to show you the endless loop. But I am learning a lot from your comments in the code, thanks a lot for that!

I think the idea to add a variable to help with the updateNavigation is very smart and also to check whether is overview or not - I didnt think about that before! many thanks. I am going to test again this code and let you know asap.

As a side comment, because I still have my doubts with Flowtime.start(). As soon as I add this line of code and if I check for example if dataSection == 'info', when loading the page it will always output the value first twice. This happen to me in my environment and it doesnt happen in codepen so I still have my doubts whether is something else I am adding somewhere. But if I remove Flowtime.start() it only outputs the value once as expected. So its not really clear to me how this function is altering my whole output yet. I probably have something else in my config file.

Thanks a lot for your help and your time. Very very much appreciated.

[marcolago]

Thanks for the appreciation.

It’s hard to say what could be wrong with Flowtime.start(); without looking at the differences between the codepen demo and your local code. If you could build a static version of you code and send me a zip I will take a look.

Maybe it’s just a matter of flow, but I created the start method because I wanted to let Flowtime starts itself as soon as possible AND to have a method to make an explicit initialization just in case you have to change the default configuration. At that moment it seems a good choice to me instead of create a Flowtime object passing the configuration options in a literal like other libraries do.

I never ran into problems because the “start“ method but if you have examples of some issues I will do my best to fix them.

Let me know.

[kawof]

The new code seems to be working well, I think you can push it to the master.

I debugged my code line by line and in fact, when I added Flowtime.start() the navigation would be updated twice, this also happened with other settings I had before (I specified something like if you come with certain url you should be redirected to a specific page, so I used Flowtime.gotoPage(target) and this was also updating navigation twice. I disabled both and my code seems to be working good now, so when I have a bit of time today or tomorrow I will make a static version and we can look into the details with more time if you want.

[marcolago]

Sure! Send me a static version when you want and I’ll take a look.

Pushed to master. Thanks for your requests, Flowtime is a better product thanks to user feedbacks.