Touch Based Article Navigation Snippets 2

article_constructor.coffee

constructor: (params={}) ->
    # Store the href for reference. We'll need it for history.pushState.
    @href = params["href"]
    
    # Create a temp element to store and parse the response content.
    tempElement = document.createElement("div")
    tempElement.innerHTML = params['html']
    
    # Grab and assign the article.
    if params['element']?
      @element = params['element']
    else
      @element = tempElement.querySelector("article")
    
    ...
    
    # Grab next and previous hrefs.
    if tempElement.querySelector("#next a")?
      @nextURL = tempElement.querySelector("#next a").href
    if tempElement.querySelector("#previous a")?
      @prevURL = tempElement.querySelector("#previous a").href
    
    # Grab the title of the article.
    if tempElement.querySelector("h1 a")?
      @title   = tempElement.querySelector("h1 a").innerHTML
    
    ...
    
    # Remove temporary element.
    tempElement = null
    
    # By default an article is not 'staged' or 'current'
    @staged   = false
    @current  = false

article_controller_constructore.coffee

constructor: () ->
  
  ...
  
  # Setup the current article based on the current document.
  @setCurrentArticle(new Article(
    html:     document.body.innerHTML
    element:  document.querySelector("article.post")
    href:     window.location
  ))

article_transitions.coffee

  # We enable the and disable the transition with these two helpers
  # only because it's obnoxious to actually translate the page directly
  # to your finger with a transition applied. However, we do want it to
  # slide back into place once the user removes their finger. Either off
  # the screen or simply back into the middle.
  enableTransition: ->
    @element.style[Modernizr.prefixed('transition')] = Article.TRANSITION
    this
  
  disableTransition: ->
    @element.style[Modernizr.prefixed('transition')] = ""
    this

contained_class.css

body.contained {
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
}

dom_ready.coffee

domready ->
  
  ...
  
  # We'll only setup the article controller if no archives are present.
  # This way I can preserve scrolling on the Table of Contents page.
  if !document.querySelector(".archives")
    
    # The contained class traps the overflow of the body. This prevents
    # some unwanted horizontal inertial scrolling on iOS.
    document.body.className = "contained"
      
    # The article controller fetches and manages the presentation 
    # of articles. This is a custom class I wrote in coffee script.
    # See article_controller.coffee to view the source.
    articleController = new ArticleController()

page_slider_moveto_method.coffee

  moveTo: (@slideTo) ->
    @article.enableTransition()
    
    # Wonder why this isn't just built into Modernizr.prefixed()...
    # http://modernizr.com/docs/#prefixed
    transEndEventNames =
        'WebkitTransition' : 'webkitTransitionEnd'
        'MozTransition'    : 'transitionend'
        'OTransition'      : 'oTransitionEnd'
        'msTransition'     : 'MSTransitionEnd'
        'transition'       : 'transitionend'

    @article.element.addEventListener(transEndEventNames[ Modernizr.prefixed('transition') ], => 
      radio(PageSlider.DIRECTION_FINISHED).broadcast((@slideTo != 0))
    )
    
    @article.translate(@slideTo)

temp_element.coffee

    # Create a temp element to store and parse the response content.
    tempElement = document.createElement("div")
    tempElement.innerHTML = params['html']
    
    # Grab and assign the article.
    if params['element']?
      @element = params['element']
    else
      @element = tempElement.querySelector("article")