Vertical timeline and json

[maba]

I have to create a "vertical" timeline made by photo posts, blog posts, gallery and other kinds of entries with the "load more" button at the bottom (to not refresh entire page). 

Press "load more" and see a new (old) month (February 2014, January 2014, December 2013 ans so on).

 

Probably I'll use Timeline plugin, from www.melonhtml5.com.

 

I would have a suggest about how achieve this. 

My json is like this (Timeline example):

 

var timeline_data = [
    {
        type:        'blog_post',
        date:        '2011-08-03',
        dateFormat:  'DD MMMM YYYY',
        title:       'Blog Post',
        width:       400,
        content:     '',
        image:       'xxxx.jpg',
        readmore:    'http://www.example.com'
    },
    {
        type:        'slider',
        date:        '2010-12-16',
        dateFormat:  'DD MMMM YYYY',
        width:       400,
        height:      200,
        images:      ['xxx.jpg', 'xxx.jpg'],
        speed:       5000
    }
];

I think that I should have a template that merge different pages in one array to create the json file (not all fields are homogeneous).

But.. what is the right way to manage "load more" feature in this case?

 

- use external json file (a template create it and save it in cache folder, like ModulesMananager does) 

- use Pages Web Service (calling the page that does the job every "load more") 

- other sort of pagination

- idea?

 

Thanks,

Marco

[chrizz]

I would create an AJAX service which returns the JSON you need for your timeline. This script is called by your timeline to load more data.

Within the script itself I would use $pages->find('whatever you need here'), iterate through the items and build the JSON in the format you need it (e.g. switch/case by entry type)

As far as I know PW I think there will be a possibility to paginate with $pages although I couldn't find anything in the documention. Perhaps you can try something like this: $pages->find('template=blog|photo|whatever, limit=10, offset=10')

[kongondo]

@chrizz - Not sure if I follow but we have pagination here: http://processwire.com/api/modules/markup-pager-nav/

and offset = start (http://processwire.com/api/selectors/#limit)

[diogo]

You can use PW's pagination modu... well, kongondo beat me at it

I can only add that you can apply a infinite scrolling plugin to the pagination http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

[chrizz]

@kongondo: yeah, that's what I meant with "as far as I know PW...". 

everything else would have surprised me