Campus Page Code

campus.coffee

jQuery ->
  ######################################
  # BACKBONE CODE
  ######################################
  # INITIALIZES Campus OBJ SO WE CAN CREATE ALL THE COMPONENTS ON IT
  Campus = {}

  ######################################
  # CODE FOR THE SIDEBAR AND MAP
  ######################################
  Campus.FloatingMenuView = Backbone.View.extend
    el: '#floating-sidebar'
    events:
      'mouseenter .sidebar-link': 'hoverLink'
      'mouseleave .sidebar-link': 'hoverOutLink'
      'click .sidebar-link': 'clickedLink'
      'click .menu-toggle-bt': 'clickedToggle'
    initialize: ->
      _.bindAll @, 'clickedLink', 'hoverLink', 'hoverOutLink', 'clickedToggle'
      # EVERYTIME THE MODEL CHANGES IT'S active OR highlighted ATTRIBUTES, IT FIRES RENDER METHOD
      @$el.addClass 'expanded' if jQuery(window).width() > 880
      @model.on 'change', @render, @
      @render()

    render: ->
      # CLEARS PREVIOUS highlighted AND active ELEMENTS AND SETS THOSE CLASSES TO NEW active AND highlighted ELEMENTS
      @$('.sidebar-link.active, .sidebar-link.hover-building').removeClass 'active hover-building'
      @$(".sidebar-link[data-target=#{@model.get('activeSection')}]").addClass 'active'
      @$(".sidebar-link[data-target=#{@model.get('highlighted')}]").addClass 'hover-building'

    hoverLink: (e)->
      linkHovering = e.currentTarget.getAttribute('href')
      linkHovering = linkHovering.replace '#', ''
      @model.set 'highlighted', linkHovering

    hoverOutLink: ->
      @model.set 'highlighted', null

    clickedLink: (e)->
      e.preventDefault()
      href = e.currentTarget.getAttribute('href')
      window.campusPage.router.navigate "#{href.replace('#', '')}/content", true
      @$el.removeClass 'expanded' if jQuery(window).width() <= 880

    clickedToggle: (e)->
      e.preventDefault()
      @$el.toggleClass 'expanded'

  Campus.MapVideoView = Backbone.View.extend
    initialize: ->
      _.bindAll this, 'initVideo', 'render', 'initVideoLoaded', 'replaceImageWithVideo'
      @parent = jQuery '#campus'
      if screen.width > 880 and !jQuery('html').hasClass('lt-ie9')
        @initVideo()
      else
        @parent.find('.map-hovers-list').first().remove()

    initVideo: ->
      @parent.prepend '<div id="loader-animation">' unless @loader?
      @loader = @parent.find('#loader-animation')
      @replaceImageWithVideo()
      @initVideoLoaded()

    initVideoLoaded: ->
      if @el.readyState == 4
        @video = Popcorn @el
        @model.on 'change:activeSection', @render, @
        @loader.remove()
        @video.cue 2, =>
          @video.pause() if @model.get('activeSection') == 'campus'
        @render()
      else
        setTimeout @initVideo, 20

    replaceImageWithVideo: ->
      $image = jQuery('#map-image')
      if $image.length > 0
        src = $image.attr 'src'
        $image.remove()
        @parent.append(
          "<video id=\"map-video\">
            <source src=\"#{src.replace '.png', '.mp4'}\" type=\"video/mp4\">
            <source src=\"#{src.replace '.png', '.ogv'}\" type=\"video/ogg\">
            <source src=\"#{src.replace '.png', '.webm'}\" type=\"video/webm\">
          </video>"
        )
        @el = document.getElementById 'map-video'

    render: ->
      if @model.get('activeSection') == 'campus'
        @video.currentTime(0)
        setTimeout =>
          @video.play()
        , 700
      else
        @video.play()

  Campus.MapBuildingsView = Backbone.View.extend
    el: '.map-hovers-list'
    events:
      'mouseenter .map-building-item': 'hoverBuilding'
      'mouseleave .map-building-item': 'hoverOutBuilding'

    initialize: ->
      # EVERYTIME THE MODEL CHANGES IT'S highlighted ATTRIBUTE, IT FIRES RENDER METHOD
      @model.on 'change', @render, @

    render: ->
      # HIGHLIGHTS BUILDING BEEN SELECTED IN THE SIDEBAR
      @$('.map-building-item.hover-building').removeClass 'hover-building'
      @$(".map-building-item[data-target=#{@model.get('highlighted')}]").addClass 'hover-building'

    # INSIDE #campus-map ELEMENT, WHEN USER HOVERS/HOVER-OUT A .scroll-link, SENDS THE LINK INFORMATION TO SIDEBAR MODEL
    hoverBuilding: (e)->
      buildHovering = jQuery(e.currentTarget).find('.map-building-link').attr('href').replace '#', ''
      buildHovering = buildHovering.replace '/content', ''
      @model.set 'highlighted', buildHovering

    hoverOutBuilding: ->
      @model.set 'highlighted', null


  ######################################
  # CODE FOR THE CONTENT SECTIONS
  ######################################
  Campus.BuildingSection = Backbone.View.extend
    # SET LISTENER TO CLICK EVENT IN THE CONTINUE-READING BT
    events:
      'click .expand-text-link': 'toggleExpandText'
      'click .expand-text-link': 'toggleExpandText'
    initialize: ->
      # BINDS 'THIS' ELEMENT TO THE TOGGLE-EXPAND METHOD
      _.bindAll this, 'toggleExpandText'
      @$('.highlighted-text')[0].insertAdjacentHTML 'afterend', "<a href=\"#\" class=\"expand-text-link\">&nbsp;</a>"

    # WHEN USER CLICKS ON CONTINUE READING LINK, THE TEXT EXPANDS
    toggleExpandText: (e)->
      # FINDS THE PARENT ELEMENT AND ADDS 'expanded' TO IT'S CLASSES, TOGGLE THE CONTINUE-READING BT TELLING IT IF THE PARENT IS EXPANDED OR NOT
      e.preventDefault()
      @$el.toggleClass 'expanded'

  ######################################
  # CODE FOR THE GALLERIES
  ######################################
  Campus.GalleryView = Backbone.View.extend
    events:
      'click .gallery-img-thumb': 'setCurrentImage'

    thumbMargin: 50
    maxHeight: 768

    initialize: ->
      _.bindAll this, 'render', 'initializeCurrentImage', 'setCurrentImage', 'changedWindowHeight', 'changedWindowWidth', 'renderLayout', 'moveThumbs', 'bringThumbsLeft', 'bringThumbsRight'
      @mouseInterval = false
      @thumbnailRow = @$('.thumbnail-row')
      @firstThumb = @$('.gallery-img-thumb').first()
      @initializeCurrentImage()
      @initializeListeners()
      @changedWindowWidth()
      @renderLayout()
      @render()

    render: ->
      @model.on 'change:current', @render, @
      @model.get('pageModel').on 'change:height', @changedWindowHeight, @
      @model.get('pageModel').on 'change:width', @changedWindowWidth, @
      @$('.gallery-img-thumb.active').removeClass 'active'
      $el = @$('.gallery-img-thumb').eq(@model.get('current'))
      $el.addClass 'active'
      @currentImage.attr 'src', $el.attr('src')

    initializeListeners:->
      @$('.gallery-arrow').on 'mousedown', (e)=>
        @moveThumbs e.currentTarget
        false
      jQuery('body').on 'mouseup', (e)=>
        @stopMovingThumbs()
      @$('.gallery-arrow').on 'click', ->
        false

    changedWindowHeight: ->
      @renderLayout()

    changedWindowWidth: ->
      @rowWidth = @thumbnailRow.outerWidth()
      @rowHiddenWidth = @thumbnailRow[0].scrollWidth
      if @rowHiddenWidth > @rowWidth
        @$el.addClass('thumb-overflow')
      else
        @$el.removeClass('thumb-overflow')

    renderLayout: ->
      newHeight = @model.get('pageModel').get('height')-260
      @$('.gallery-current-image').css('height', newHeight) if newHeight <= @maxHeight
      @$('.gallery-current-image').css('width', newHeight*1.3333) if newHeight <= @maxHeight

    initializeCurrentImage: ->
      @$('.gallery-current-image').append "<img src=\"#\" class=\"current-img-element\" />"      
      @currentImage = @$('.current-img-element')

    setCurrentImage: (e)->
      n = jQuery(e.currentTarget).data 'number'
      @model.set 'current', n-1

    moveThumbs: (target)->
      if @$el.hasClass 'thumb-overflow'
        if jQuery(target).hasClass 'arrow-left'
          @mouseInterval = setInterval @bringThumbsRight, 15
        else
          @mouseInterval = setInterval @bringThumbsLeft, 15
      false

    stopMovingThumbs: ->
      clearInterval @mouseInterval unless @mouseInterval == false
      @mouseInterval = false

    bringThumbsLeft: ->
      minMargin =  @rowWidth - @rowHiddenWidth - @thumbMargin - 15
      margin = parseInt(@firstThumb.css('margin-left').replace('px', '')) - 8
      @firstThumb.css('margin-left',  margin) if margin > minMargin

    bringThumbsRight: ->
      margin = parseInt(@firstThumb.css('margin-left').replace('px', '')) + 8
      @firstThumb.css('margin-left', margin) if margin < @thumbMargin

  Campus.GalleryModel = Backbone.Model.extend
    defaults:
      current: 0
      children: 1

    keyPressed: (keyCode)->
      # IF RIGHT KEY, GO TO NEXT IMAGE, IF LEFT KEY, GO TO PREVIOUS
      @nextImage() if keyCode == 39
      @prevImage() if keyCode == 37

    nextImage: ->
      @set 'current', @endlessArray(@get('current')+1)

    prevImage: ->
      @set 'current', @endlessArray(@get('current')-1)

    endlessArray: (n)->
      # ADJUSTS NUMBER ACCORDING TO GALLERY CHILDREN'S LENGHT, MAKING A LOOP IN THE ARRAY
      if n < 0 then @get('children')-1 else if n > @get('children')-1 then 0 else n

  Campus.TargetAreaView = Backbone.View.extend
    events:
      'click .image-gallery-link': 'openGallery'
      'click .close-gallery-link': 'closeGallery'

    initialize: ->
      _.bindAll this, 'render', 'initializeChildren', 'openGallery', 'closeGallery', 'detectKey'
      @model.on 'change:activeSection', @render, @
      @model.on 'change:galleryActive', @render, @
      @model.on 'keypressed', @detectKey, @
      @initializeChildren()
      @render()

    render: ->
      dur = if @model.previous('activeSection') == 'campus' and @model.get('activeSection') != 'campus' then 2000 else 700
      @$el.removeClass 'active-gallery'
      @$el.addClass 'transitioning' unless @model.get('activeSection') == @el.id
      if @model.get('galleryActive') == true && @model.get('activeSection') == @el.id
        @$el.addClass 'active-gallery'
      setTimeout =>
        @$el.removeClass 'transitioning'
        if @model.get('activeSection') == @el.id
          @$el.addClass 'active'
        else
          @$el.removeClass 'active'
      , dur

    openGallery: (e)->
      e.preventDefault() if e
      window.campusPage.router.navigate "#{@el.id}/gallery", true

    closeGallery: (e)->
      e.preventDefault() if e
      window.campusPage.router.navigate "#{@el.id}/content", true

    initializeChildren: ->
      $gallery = @$('.gallery-section')
      if @$el.hasClass 'building-section'
        galleryModel = new Campus.GalleryModel
          children: $gallery.find('.gallery-img-thumb').length
          pageModel: @model
        @gallery = new Campus.GalleryView
          model: galleryModel
          el: $gallery.first()
        @buildingContent = new Campus.BuildingSection { el: @el }

    detectKey: (keyCode)->
      if keyCode == 27
        @closeGallery(null) if @$el.hasClass 'active-gallery'
      else
        @gallery.model.keyPressed(keyCode) if @gallery? and @$el.hasClass 'active-gallery'
      

  ######################################
  # THIS IS THE RESPONSIBLE FOR ALL THE INTERACTION IN THIS PAGE AND FOR DEALING WITH EVERY BACKBONE OBJECT
  ######################################
  Campus.PageModel = Backbone.Model.extend
    defaults:
      highlighted: null
      galleryActive: false

    initialize: ->
      _.bindAll this, 'keyPressed', 'nextSection', 'prevSection', 'endlessArray'
      @sections = _.map jQuery('.target-area'), (area)=>
        area.id

    activateFromURL: (section, state)->
      @set 'activeSection', section
      state = if state == 'content' then false else true
      @set 'galleryActive', state

    keyPressed: (keyCode)->
      @nextSection() if keyCode == 40
      @prevSection() if keyCode == 38

    nextSection: ->
      window.campusPage.router.navigate "#{@sections[@endlessArray(+1)]}/content", true

    prevSection: ->
      window.campusPage.router.navigate "#{@sections[@endlessArray(-1)]}/content", true

    endlessArray: (diff)->
      index = jQuery.inArray(@get('activeSection'), @sections) + diff
      if index < 0 then @sections.length-1 else if index > @sections.length-1 then 0 else index

  Campus.Router = Backbone.Router.extend
    routes:
      ':section/:state': 'showCurrentSection'

    initialize: (options)->
      _.bindAll this, 'showCurrentSection'
      if options and options.pageModel
        @model = options.pageModel

    showCurrentSection: (section, state)->
      @model.activateFromURL(section, state)

  Campus.Page = Backbone.View.extend
    initialize: ->
      _.bindAll this, 'render', 'detectKeyUp', 'detectResize', 'initializeListeners'
      @model = new Campus.PageModel
        width: jQuery(window).width()
        height: jQuery(window).height()
        router: @router
      @router = new Campus.Router { pageModel: @model }
      Backbone.history.start()
      @initializeListeners()
      @initializeObjs()

    initializeListeners: ->
      @model.on 'change:activeSection', @setCurrentSection, this
      jQuery(window).on 'keyup', @detectKeyUp
      jQuery(window).on 'resize', @detectResize

    initializeObjs: ->
      for link in jQuery('.map-building-link', '#campus')
        jQuery(link).attr 'href', "#{jQuery(link).attr 'href'}/content"
      @sidebar = new Campus.FloatingMenuView { model: @model }
      @mapVideo = new Campus.MapVideoView { model: @model }
      @mapBuildings = new Campus.MapBuildingsView { model: @model }
      @targetAreas = []
      for targetArea in jQuery('.target-area')
        @targetAreas.push new Campus.TargetAreaView { el: targetArea, model: @model }

      if Backbone.history.fragment.indexOf('/') == -1
        @router.navigate "campus/content", true

    detectKeyUp: (e)->
      if e.keyCode == 39 or e.keyCode == 37 or e.keyCode == 27
        @model.trigger 'keypressed', e.keyCode
      if e.keyCode == 38 or e.keyCode == 40
        @model.keyPressed e.keyCode
        false

    detectResize: ->
      @model.set 'width', jQuery(window).width()
      @model.set 'height', jQuery(window).height()

    setCurrentSection: ->


  # INITIALIZES ALL THE BACKBONE CODE WITH THIS CLASS
  window.campusPage = new Campus.Page