Page indicators

The page indicators at the bottom of the screen appear on all except the last page. They’re slid off-screen just before the sixth page appears.

Parent layer for the page indicators

We’ll put the six indicators in a container layer so that we can move them off-screen by simply moving this parent layer.

# PAGE INDICATORS
# Container for the page indicators
indicatorsContainer = new Layer
    width: page.width, height: 6
    backgroundColor: null
    y: 551
    parent: container

Creating the page indicators

We first create an array to store them in, so that we can later refer to them by their index number in this allIndicators array.

# Array for the indicators
allIndicators = []

We create our six indicators by looping through a [0..5] range:

# Creating the page indicators
for i in [0..5]
    indicator = new Layer
        size: 6
        backgroundColor: "white"
        borderRadius: "50%"
        opacity: 0.5
        x: 119.5 + ( i * 15 )
        parent: indicatorsContainer

The first indicator is placed 119.5 points from the left side, and each successive indicator 15 points farther to the right.

All indicators have 50% opacity.

In the same loop we can give each indicator an active state (= full opacity), speed up the layer’s animation time to 0.5“, and then add the indicator to our allIndicators array.

    # Add an ‘active’ state
    indicator.states.active =
        opacity: 1
    # Speed up the animations
    indicator.animationOptions = time: 0.5
    # Store indicator in array
    allIndicators.push indicator

That’s that. We can already switch the first indicator to its active state.

# Set state of the first indicator
allIndicators[0].stateSwitch "active"

Making the correct page indicator active

At this point, we could set the active page indicator by adding more code to our page.onMove block (and calculate with page widths), but there’s a better option: the "change:currentPage" event signals when the PageComponent snaps to a page.

Add this new event handler to the end of the document:

# Page change event
page.on "change:currentPage", ->
    # Setting all indicators to default state
    indicator.animate "default" for indicator in allIndicators
    # Getting the current page index
    current = page.horizontalPageIndex page.currentPage
    # Making current page indicator active
    allIndicators[current].animate "active"

Here we first switch all the indicators to their default state. (This is, by the way, an alternative way of writing a for…in loop.)

Then we use horizontalPageIndex() to get the index for the currentPage, and use this value to animate the correct indicator in allIndicators to its "active" state.

Sliding the page indicators off-screen

And then there’s one more detail: all indicators together slide to the left when we scroll from page five to page six.

We accomplish this by moving their parent layer: indicatorsContainer.

indicatorsContainer.x = Utils.modulate page.scrollX,
                [page.width * 4, page.width * 5],
                [0, -page.width * 2], yes