Touch Based Article Navigation Snippets

article_touch_end.coffee

touchEnd: (event) ->
    limit = window.innerWidth/3
    if @slideTo > 0 and Math.abs(@slideTo) >= limit
      @moveTo(window.innerWidth)
    else if @slideTo < 0 and Math.abs(@slideTo) >= limit
      @moveTo(-window.innerWidth)
    else
      @moveTo(0)

article_translate.coffee

  # Note: We use 3D transforms when possible to support hardware
  # acceleration in webkit.
  translate: (xPos) ->
    if Modernizr.csstransforms3d
      @element.style[Modernizr.prefixed('transform')] = "translate3d(#{xPos}px, 0, 0)"
    else if Modernizr.csstransforms
      @element.style[Modernizr.prefixed('transform')] = "translate(#{xPos}px, 0)"
    this

constants_example.coffee

# Using a constant.
if pageSlider.direction == PageSlider.DIRECTION_LEFT then console.log "More readable."

# Using some arbitrary value.
if pageSlider.direction == 1 then console.log "Less readable."

direction_broadcast.coffee

        # Set direction to right and broadcast the event if it's happened.
        # We want to ensure we only do this once as the resulting listeners
        # may or may not write to the DOM which get's expensive during 
        # transitions.
        if @slideTo > 0 and @direction != PageSlider.DIRECTION_RIGHT
          @direction = PageSlider.DIRECTION_RIGHT
          radio(PageSlider.DIRECTION_CHANGE).broadcast(@direction)
        
        # If they're moving to the left we'll do the same thing.
        else if @slideTo < 0 and @direction != PageSlider.DIRECTION_LEFT
          @direction = PageSlider.DIRECTION_LEFT
          radio(PageSlider.DIRECTION_CHANGE).broadcast(@direction)

page_slider_constants.coffee

class @PageSlider
  
  # Some oh so useful class level constants.
  @DIRECTION_CHANGE   = "PageSlideDirectionChangeEvent"
  @DIRECTION_FINISHED = "PageSlideDirectionChangeFinished"
  @DIRECTION_UNKNOWN  = 0
  @DIRECTION_LEFT     = 1
  @DIRECTION_RIGHT    = 2

page_slider_constructor.coffee

# The constructor takes in an element and an article. The touchTarget listens 
# for touches while the article is the element being translated.
constructor: (params={}) ->
  @touchTarget  = params['touchTarget'] || document.body
  
  # Use the article passed in as our @article.
  @setArticle(params['article'])
  
  # If the browser doesn't support touch or we're missing any of the essentials
  # we'll just avoid doing anything at all.
  if Modernizr.touch and @article? and @touchTarget?
    @touchTarget.addEventListener("touchstart",
    ((event) => @touchStart(event)),
    false)

    @touchTarget.addEventListener("touchmove",
    ((event) => @touchMove(event)),
    false)
    
    @touchTarget.addEventListener("touchend",
    ((event) => @touchEnd(event)),
    false)

    @touchTarget.addEventListener("touchcancel",
    ((event) => @touchCancel(event)), 
    false)

page_slider_if_scroll_y_greater.coffee

      # Some minor attempt to prevent swiping from disabling scrolling.
      event.preventDefault() if xOffset > 10
      if xOffset > yOffset
        
        # The first thing to do is determine where we're going by getting the 
        # actual offset.
        @slideTo = event.touches[0].pageX - @slideStartX

page_slider_touch_move.coffee

touchMove: (event) ->
  # If they're using more than one finger we're just not going to count
  # that. Sorry, one finger swipes only.
  if event.touches.length == 1
    
    # Grab the absolute value of the X and Y offset so that we can get an
    # idea of whether or not the user is trying to scroll or swipe.
    xOffset = Math.abs(event.touches[0].pageX - @slideStartX)
    yOffset = Math.abs(event.touches[0].pageY - @slideStartY)

page_slider_touch_move_recap.coffee

touchMove: (event) ->
  if event.touches.length == 1
    #
    # ...checked to see if scrolling or swiping...
    #
    if xOffset > yOffset
      @slideTo = event.touches[0].pageX - @slideStartX
      #
      # ...dispatched direction change event and set current direction...
      #
  else
     # We reset @slideTo to prevent any movement if the user 
     # uses more than one finger.
    @slideTo = 0
  
  # The article model has a translate method which applies
  # a CSS translation to the dom element containing the
  # article.
  @article.translate(@slideTo)

page_slider_touch_start.coffee

# When the touch begins we want to reset the direction. We also want to track the 
# initial position of the touch as we'll be using that to calculate the delta as
# their finger moves.
touchStart: (event) ->
  @article.disableTransition()
  if event.touches.length == 1
    @direction    = PageSlider.DIRECTION_UNKNOWN
    @slideStartX  = event.touches[0].pageX
    @slideStartY  = event.touches[0].pageY