Skip to content

Instantly share code, notes, and snippets.

@dawsontoth

dawsontoth/InfiniteScrollableView.js

Created February 3, 2011 20:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dawsontoth/810171 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dawsontoth/810171 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dawsontoth created this gist Feb 3, 2011.
    110 changes: 110 additions & 0 deletions InfiniteScrollableView.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@
    /**
    * We're going to create an infinite scrollable list. In this case, we're going to show a date. When you swipe left,
    * you'll see yesterday. Then the day before yesterday, and so on. Swiping right shows you tomorrow, and so on.
    */
    var win = Ti.UI.createWindow({ backgroundColor: '#fff' });
    var isAndroid = Ti.Platform.osname === 'android';
    /**
    * Track where we are in the infinite scrollable views, and define how large of a step goes between each view.
    */
    var currentDate = new Date(), msIntervalBetweenViews = 1000/*ms*/ * 60/*s*/ * 60/*m*/ * 24/*h*/;

    /**
    * Create our UI elements.
    */
    var scrollable = Ti.UI.createScrollableView({ currentPage: 1, showPagingControls: true, pagingControlHeight: 30 }),
    containers = [
    Ti.UI.createView({ backgroundColor:'#fdd', top: 0, right: 0, bottom: 0, left: 0 }),
    Ti.UI.createView({ backgroundColor:'#dfd', top: 0, right: 0, bottom: 0, left: 0 }),
    Ti.UI.createView({ backgroundColor:'#ddf', top: 0, right: 0, bottom: 0, left: 0 })
    ];
    win.add(scrollable);
    scrollable.views = containers;

    /**
    * Loads data into the specified view based on the specified date.
    * @param view
    * @param date
    */
    function loadView(view, date) {
    // empty out any children
    if (view.children) {
    for (var c = view.children.length - 1; c >= 0; c--) {
    view.remove(view.children[c]);
    }
    }
    // add new children
    var label = Ti.UI.createLabel({
    text: date.toLocaleDateString(),
    color: '#000',
    width:'auto',
    height:'auto'
    });
    view.add(label);
    }

    /**
    * Whenever we scroll, manipulate our views so that the user is back to viewing the "middle" view with a buffer view on
    * either side, then make sure the buffer views are actually loaded and ready to go.
    */
    function scrollListener(evt) {
    // what is our current page?
    switch (evt.currentPage) {
    case 0: // scrolled to the left
    // so pop a view off the end, and put it at the start
    containers.unshift(containers.pop());
    if (isAndroid) {
    // temporarily remove our event listener (for Android's sake...)
    scrollable.removeEventListener('scroll', scrollListener);
    }
    // reset the counter so we are back in the middle
    scrollable.currentPage = 1;
    // reset our views array
    scrollable.views = containers;
    if (isAndroid) {
    // now we can add the event listener again
    scrollable.addEventListener('scroll', scrollListener);
    }
    // take a day from our currentDate
    currentDate.setDate(currentDate.getDate() - 1);
    // and now buffer load the view we reset
    loadView(containers[0], new Date(currentDate.getTime() - msIntervalBetweenViews));
    break;
    case 1:
    // they didn't go anywhere; should only happen the first time around
    break;
    case 2: // scrolled to the right
    // so shift a view off the start, and put it at the end
    containers.push(containers.shift());
    if (isAndroid) {
    // temporarily remove our event listener (for Android's sake...)
    scrollable.removeEventListener('scroll', scrollListener);
    }
    // reset the counter so we are back in the middle
    scrollable.currentPage = 1;
    // reset our views array
    scrollable.views = containers;
    if (isAndroid) {
    // now we can add the event listener again
    scrollable.addEventListener('scroll', scrollListener);
    }
    // add a day to our currentDate
    currentDate.setDate(currentDate.getDate() + 1);
    // and now buffer load the view we reset
    loadView(containers[2], new Date(currentDate.getTime() + msIntervalBetweenViews));
    break;
    }
    }
    scrollable.addEventListener('scroll', scrollListener);

    /**
    * Set up our initial views.
    */
    loadView(containers[0], new Date(currentDate.getTime() - msIntervalBetweenViews));
    loadView(containers[1], currentDate);
    loadView(containers[2], new Date(currentDate.getTime() + msIntervalBetweenViews));

    /**
    * That's it, we just need to open the window! Hope you enjoyed this.
    */
    win.open();