Skip to content

Instantly share code, notes, and snippets.

@raulriera

raulriera/PagingControl.js

Created April 19, 2012 02:13
Show Gist options
  • Save raulriera/2417902 to your computer and use it in GitHub Desktop.
Save raulriera/2417902 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. raulriera revised this gist Jun 11, 2012. 1 changed file with 15 additions and 17 deletions.
    32 changes: 15 additions & 17 deletions PagingControl.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,10 +2,6 @@
    // in scrollableViews, so I hacked my own
    // -----

    var pages = [];
    var page;
    var numberOfPages = 0;

    // Configuration
    var pageColor = "#c99ed5";

    @@ -14,13 +10,13 @@ PagingControl = function(scrollableView){
    height: 60
    });
    // Keep a global reference of the available pages
    numberOfPages = scrollableView.getViews().length;
    var numberOfPages = scrollableView.getViews().length;

    pages = []; // without this, the current page won't work on future references of the module
    var pages = []; // without this, the current page won't work on future references of the module

    // Go through each of the current pages available in the scrollableView
    for (var i = 0; i < numberOfPages; i++) {
    page = Titanium.UI.createView({
    var page = Titanium.UI.createView({
    borderRadius: 4,
    width: 8,
    height: 8,
    @@ -36,20 +32,22 @@ PagingControl = function(scrollableView){

    // Mark the initial selected page
    pages[scrollableView.getCurrentPage()].setOpacity(1);

    // Callbacks
    onScroll = function(event){
    // Go through each and reset it's opacity
    for (var i = 0; i < numberOfPages; i++) {
    pages[i].setOpacity(0.5);
    }
    // Bump the opacity of the new current page
    pages[event.currentPage].setOpacity(1);

    };

    // Attach the scroll event to this scrollableView, so we know when to update things
    scrollableView.addEventListener("scroll", onScroll);

    return container;
    };

    onScroll = function(event){
    // Go through each and reset it's opacity
    for (var i = 0; i < numberOfPages; i++) {
    pages[i].setOpacity(0.5);
    }
    // Bump the opacity of the new current page
    pages[event.currentPage].setOpacity(1);

    };

    module.exports = PagingControl;
  2. raulriera renamed this gist Apr 19, 2012. 1 changed file with 0 additions and 0 deletions.
    0 PagingControl → PagingControl.js
    View file
    File renamed without changes.
  3. raulriera created this gist Apr 19, 2012.
    55 changes: 55 additions & 0 deletions PagingControl
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    // I was unhappy about there was close to no control over the "pageControl"
    // in scrollableViews, so I hacked my own
    // -----

    var pages = [];
    var page;
    var numberOfPages = 0;

    // Configuration
    var pageColor = "#c99ed5";

    PagingControl = function(scrollableView){
    var container = Titanium.UI.createView({
    height: 60
    });
    // Keep a global reference of the available pages
    numberOfPages = scrollableView.getViews().length;

    pages = []; // without this, the current page won't work on future references of the module

    // Go through each of the current pages available in the scrollableView
    for (var i = 0; i < numberOfPages; i++) {
    page = Titanium.UI.createView({
    borderRadius: 4,
    width: 8,
    height: 8,
    left: 15 * i,
    backgroundColor: pageColor,
    opacity: 0.5
    });
    // Store a reference to this view
    pages.push(page);
    // Add it to the container
    container.add(page);
    }

    // Mark the initial selected page
    pages[scrollableView.getCurrentPage()].setOpacity(1);
    // Attach the scroll event to this scrollableView, so we know when to update things
    scrollableView.addEventListener("scroll", onScroll);

    return container;
    };

    onScroll = function(event){
    // Go through each and reset it's opacity
    for (var i = 0; i < numberOfPages; i++) {
    pages[i].setOpacity(0.5);
    }
    // Bump the opacity of the new current page
    pages[event.currentPage].setOpacity(1);

    };

    module.exports = PagingControl;