Campus Page Old JS

campus.coffee

jQuery ->
  ######################################
  # PLUGINS
  ######################################
  # VERIFIES IF OBJECT IS ON BROWSERS VIEWPORT
  jQuery.fn.isOnScreen = (offsetTop = 0, offsetLeft = 0)->
    win = $(window)
    viewport = {
      top: win.scrollTop() + offsetTop
      left: win.scrollLeft() + offsetLeft
    }
    viewport.right = viewport.left + win.width()
    viewport.bottom = viewport.top + win.height()
    bounds = this.offset()
    bounds.right = bounds.left + this.outerWidth()
    bounds.bottom = bounds.top + this.outerHeight()
    !(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)
  
  # WHEN THIS ELEMENT IS CLICKED IT SCROLLS SMOOTHLY TO IT'S ANCHOR OR THE TOP OF THE PAGE WITH GIVEN SPEED
  jQuery.fn.smoothScroll = (dur = 350)->
    this.on 'click', (e)->
      e.preventDefault()
      anchor = jQuery(e.currentTarget).attr 'href'
      # IF NO ANCHOR IS GIVEN, LIKE WHEN "#", THEN THE TARGET IS THE TOP OF THE PAGE
      offsetToGo = if anchor? then jQuery(anchor).offset().top else 0
      jQuery('html, body').clearQueue().animate
        scrollTop: offsetToGo + 'px'
      ,
        duration: dur

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

  ######################################
  # CODE FOR THE SIDEBAR AND MAP
  ######################################
  Campus.FloatingMenuModel = Backbone.Model.extend
    # SIDEBAR MODEL STARTS AT THE CAMPUS PAGE IF THERE WAS NO SCROLL YET
    defaults:
      active: 'campus'
      highlighted: null

  Campus.FloatingMenuView = Backbone.View.extend
    el: '#floating-sidebar'
    events:
      'mouseenter .scroll-link': 'hoverLink'
      'mouseleave .scroll-link': 'hoverOutLink'
    initialize: ->
      # EVERYTIME THE MODEL CHANGES IT'S active OR highlighted ATTRIBUTES, IT FIRES RENDER METHOD
      @model.on 'change', @render, @

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

  Campus.MapView = Backbone.View.extend
    el: '#campus-map'
    events:
      'mouseenter .scroll-link': 'hoverBuilding'
      'mouseleave .scroll-link': '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
      @$('.scroll-link.hover-building').removeClass 'hover-building'
      @$(".scroll-link[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 = e.currentTarget.getAttribute('href')
      buildHovering = buildHovering.replace '#', ''
      @model.set 'highlighted', buildHovering

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


  ######################################
  # CODE FOR THE CONTENT SECTIONS
  ######################################
  Campus.ContentView = Backbone.View.extend
    el: '.two-columns-container .right-column'
    # SET LISTENER TO CLICK EVENT IN THE CONTINUE-READING BT
    events:
      'click .continue-reading': 'toggleExpandText'
    initialize: ->
      # BINDS 'THIS' ELEMENT TO THE TOGGLE-EXPAND METHOD
      _.bindAll(this, 'toggleExpandText')
      # ARRAY OF TEXTS TO INSERT IN THE CONTINUE READING BT
      @captions = ["Continue Reading", "Collapse Text"]
      # WILL JUST ADD THE CONTINUE-READING BT IF TEXT IS TALLER THAN maxHeight
      maxHeight = 302
      $bottomText = @$('.bottom-text')[0]
      if $bottomText.offsetHeight >= maxHeight
        # ADDS A CLASS FOR CSS ANIMATIONS AND PROPERTIES AND ADDS THE CONTINUE-READING BT ITSELF WITH FIRST TEXT IN @capition ARRAY
        @$el.addClass 'expandable-text'
        $bottomText.insertAdjacentHTML 'afterend', "<a href=\"#\" class=\"continue-reading arrow-link fade-in move-up\">#{@captions[0]}</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 = jQuery(e.currentTarget).closest('.expandable-text')
      $bt = $el.find('.continue-reading').first()[0]
      $el.toggleClass 'expanded'
      @toggleButton $bt, $el[0].classList.contains('expanded')

    toggleButton: ($bt, expanded)->
      # CHANGES THE CAPTION OF THE BUTTON ACCORDING TO THE BOOLEAN - PARENT IS EXPANDED? - RECEIVED
      # FORCES THE BOOLEAN TO A NUMBER WITH +expanded, 0 IF FALSE AND 1 IF TRUE
      $bt.innerHTML @captions[+expanded]


  ######################################
  # CODE FOR THE GALLERIES
  ######################################
  Campus.GalleryView = Backbone.View.extend
    initialize: ->
      # SAVES DE ELEMENT TO SET LISTENERS AND ADD CONTEXT TO IT'S RENDER
      @el = jQuery("##{@model.get('id')}")
      # WHEN INITIALIZED OR WHEN THE MODEL CHANGES, RENDER THE GALLERY
      @model.on 'change', @render, @
      @render()
      # LISTEN TO CLICKS IN IT'S ARROWS TO FIRE NEXT AND PREVIOUS IMAGE IN GALLERY MODEL ACCORDING TO ARROW'S CLASS
      jQuery('.gallery-arrow',@el).on 'click', (e)=>
        if jQuery(e.currentTarget).hasClass 'arrow-next' then @model.nextImage() else @model.prevImage()
        false

    render: ->
      # SETS CLASSES TO THE CURRENT, NEXT AND PREVIOUS IMAGES AND LET CSS TAKE CARE OF THE TRANSICTIONS
      jQuery('.gallery-img', @el).removeClass 'current-img next-img prev-img'
      jQuery('.gallery-img', @el).eq(@model.get('current')).addClass 'current-img'
      jQuery('.gallery-img', @el).eq(@model.get('previous')).addClass 'prev-img'
      jQuery('.gallery-img', @el).eq(@model.get('next')).addClass 'next-img'

  Campus.GalleryItem = Backbone.Model.extend
    # INITIALIZES WITH THE CURRENT IMAGE AT 0
    defaults:
      current: 0

    initialize: ->
      # CALLS THIS FUNCTION TO INITIALIZE NEXT AND PREVIOUS IMAGES AND CALLS IT EVERYTIME THE CURRENT ATTR IS CHANGED
      @setNextPrev()
      @on 'change:current', @setNextPrev, @

    setNextPrev: ->
      # WHEN CURRENT'S CHANGED, IT ADJUSTS NEXT AND PREVIOUS ATTR
      @set 'next', @endlessArray(@get('current') + 1)
      @set 'previous', @endlessArray(@get('current') - 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') else if n > @get('children') then 0 else n

  Campus.GalleryItems = Backbone.Collection.extend
    # GALLERY ITEMS EXTENDS THE GALLERY ITEM MODEL
    model: Campus.GalleryItem

  Campus.GalleriesView = Backbone.View.extend
    # WHEN A COLLECTIONS IS PASSED TO THIS CollectionView, IT CREATED ONE MODEL FOR EACH GALLERY
    initialize: ->
      @collection.on 'reset', @addAll, @
    # SEPARATES addALL AND addOne JUST IN CASE WE NEED TO ADD A GALLERY DINAMICALLY IN THE FUTURE
    addAll: ->
      @collection.forEach @addOne, @
    addOne: (galleryItem)->
      galleryView = new Campus.GalleryView { model: galleryItem }


  ######################################
  # THIS IS THE RESPONSIBLE FOR ALL THE INTERACTION IN THIS PAGE AND FOR DEALING WITH EVERY BACKBONE OBJECT
  ######################################
  Campus.Page = Backbone.View.extend
    initialize: ->
      # PASSES THIS OBJECT (Campus.Page) AS THE "THIS" ELEMENT IN THE FOLLOWING FUNCTIONS
      _.bindAll(this, 'detectScroll', 'detectKeyUp')
      # INITIALIZES SOME CONFIGS AND VARS, THAN EVENT LISTENERS AND THEN BACKBONE OBJECTS
      @initializeConfigs()
      @initializeListeners()
      @initializeObjs()

    initializeConfigs: ->
      # WHEN ANY LINK WITH .scroll-link CLASS IS CLICKED, IT SMOOTHLY SCROLLS TO THE TARGET USING THE SMOOTHSCROLL PLUGIN ABOVE
      jQuery('a.scroll-link').smoothScroll()

    initializeListeners: ->
      jQuery(window).on 'scroll', @detectScroll
      jQuery(window).on 'keyup', @detectKeyUp

    initializeObjs: ->
      # SAVES BACKGROUND CLOUDS TO MAKE A SIMPLE PARALLAX EFFECT
      @bgClouds = jQuery("#clouds-wrapper")
      # INITIALIZES THE SIDEBAR MODEL AND VIEW, MAP VIEW WITH SIDEBAR MODEL, TEXT CONTENTS VIEWS AND GALLERIES
      sidebarModel = new Campus.FloatingMenuModel
      @sidebar = new Campus.FloatingMenuView { model: sidebarModel }
      @map = new Campus.MapView { model: sidebarModel }
      @texts = new Campus.ContentView
      # LOOPS THRU ALL THE GALLERIES AND SAVES THEM AS A COLLECTION WITH THEIR RESPECTIVE ID'S AND CHILDREN LENGTH
      galleriesArray = _.map jQuery('.gallery-section'), (el)->
        id: el.id
        children: jQuery(el).find('.gallery-img').length-1
      @galleriesCollection = new Campus.GalleryItems
      @galleries = new Campus.GalleriesView
        collection: @galleriesCollection
      # CHANGES THE COLLECTION AT THIS POINT - AFTER INITIALIZATION - TO FIRE RESET EVENT IN THE CollectionView
      @galleriesCollection.reset galleriesArray

    detectKeyUp: (e)->
      # GETS THE SAVED (CURRENT) GALLERY MODEL TO CHANGE ITS CURRENT ATTRIBUTE IF LEFT OR RIGHT KEYS WERE PRESSED AND SENDS THE KEYCODE TO THE MODEL
      if e.keyCode == 39 or e.keyCode == 37
        gallery = @galleries.collection.get @currentGallery if @currentGallery?
        if gallery?
          gallery.keyPressed(e.keyCode)

    # DEPENDING ON THE POSITION OF THE SCROLL IT SAYS WHICH AREA OR GALLERY ARE VISIBLE
    detectScroll: ->
      # SIMPLE PARALLAX EFFECT TO THE BACKGROUND CLOUDS
      # THIS ONE MIGHT BE RUINING THE PERFORMANCE THOUGH
      @bgClouds.css 'background-position', "0 -#{jQuery(window).scrollTop()/15}px"
      # LOOPS THROUGH ALL THE CONTENT AREAS AND BREAKS THE LOOP WHEN IT FINDS THE FIRST ONE ONSCREEN, THAN TRIGGERS A CHANGE IN THE SIDEBAR MODEL
      for area in jQuery('.target-area')
        if jQuery(area).isOnScreen(100)
          @sidebar.model.set 'active', area.id
          false
      # LOOPS THROUGH ALL THE GALLERIES AND BREAKS THE LOOP WHEN IT FINDS THE FIRST ONE ONSCREEN, THAN IT SAVES THE GALLERY AS THE CURRENT TO RESPOND TO KEYBOARD EVENTS LATER ON
      for gallery in jQuery('.gallery-section')
        if jQuery(gallery).isOnScreen()
          @currentGallery = gallery.id
          false

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