Отладка этого кода jade+coffeescript на сервере Express4

Question

Я ищу некоторую помощь, поскольку я не знаю, насколько плохи эти строки кодов.

Я пытаюсь адаптировать эту оригинальную работу Codepen.io ( http://codepen.io/ettrics/pen/Jdjdzp/, Ettrics) для одного из моих учебных проектов. Я запускаю свою веб-страницу на сервере узла Express4+Stylus+Coffescript.

Файл CoffeeScript:

# Each popup takes the entire window, so it is a modal
Modal = ->
  # Make it easier for yourself by not having to type as much to select an element (QuerySelectorAll)
  $qsa = (el) ->
    document.querySelectorAll(el)

  trigger = $qsa('.modal__trigger') # What you click to activate the modal
  modals = $qsa('.modal') # The entire modal (takes up entire window)
  modalsbg = $qsa('.modal__bg') # The entire modal (takes up entire window)
  content = $qsa('.modal__content') # The inner content of the modal
  closers = $qsa('.modal__close') # An element used to close the modal
  isOpen = false
  contentDelay = 100 # Duration after you click the button and wait for the content to show
  len = trigger.length

  getId = (event) ->
    event.preventDefault()
    # Get the value of the data-modal attribute from the button
    modalId = this.dataset.modal
    # Remove the '#' from the string
    len = modalId.length
    modalId = modalId.substring(1, len)
    # Select the modal we want to activate
    modal = document.getElementById(modalId)
    # Execute function that creates the temporary expanding div named fakeDiv
    makefakeDiv(this, modal)

  makefakeDiv = (self, modal) ->
    fakeDiv = document.getElementById('modal__temp');

    # If there isn't a 'fakeDiv', create one and append it to the button that was
    # clicked. after that execute the function 'moveTrigger' which handles the animations.
    if fakeDiv?
      fakeDiv = document.createElement('div')
      fakeDiv.id = 'modal__temp'
      self.appendChild(fakeDiv)
      moveTrigger(self, modal, fakeDiv)

  moveTrigger = (trigger, modal, div) ->
    triggerProps = trigger.getBoundingClientRect()
    modalProps = modal.querySelector('.modal__content').getBoundingClientRect()
    xc = window.innerWidth / 2
    yc = window.innerHeight / 2

    ######## VOIR LE CSS !!
    # This class increases z-index value so the button goes overtop the other buttons
    trigger.classList.add('modal__trigger--active')

    # These values are used for scale the fakeDiv div to the same size as the modal
    scaleX = modalProps.width / triggerProps.width
    scaleY = modalProps.height / triggerProps.height

    scaleX = scaleX.toFixed(3) # Round to 3 decimal places
    scaleY = scaleY.toFixed(3)

    # These values are used to move the button to the center of the window (to pepare the ease out effect)
    transX = Math.round(xc - triggerProps.left - triggerProps.width / 2)
    transY = Math.round(yc - triggerProps.top - triggerProps.height / 2)

    # If the modal is aligned to the top then move the button to the center-y of the modal instead of the window
    if modal.classList.contains('modal--align-top')
      transY = Math.round(modalProps.height / 2 + modalProps.top - triggerProps.top - triggerProps.height / 2)

    # Translate button to center of screen
    trigger.style.transform = 'translate(' + transX + 'px, ' + transY + 'px)'
    trigger.style.webkitTransform = 'translate(' + transX + 'px, ' + transY + 'px)'
    # Expand fakeDiv to the same size as the modal
    div.style.transform = 'scale(' + scaleX + ',' + scaleY + ')';
    div.style.webkitTransform = 'scale(' + scaleX + ',' + scaleY + ')'

    # Smart animation API used to open
    window.setTimeout( ->
      window.requestAnimationFrame(open(modal, div))
    , contentDelay)

  open = (modal, div) ->
    if !isOpen
      # Select the content inside the modal
      content = modal.querySelector('.modal__content')
      # Reveal the modal
      modal.classList.add('modal--active')
      # Reveal the modal content
      content.classList.add('modal__content--active')

      ###
       # When the modal content is finished transitioning, fadeout expanding
       # fakeDiv so when the window resizes it isn't visible ( it doesn't
       # move with the window).
      ###

      content.addEventListener('transitionend', hidefakeDiv, false)

      isOpen = true

    hidefakeDiv = ->
      # Fadeout fakeDiv so that it can't be seen when the window is resized
      div.style.opacity = '0'
      content.removeEventListener('transitionend', hidefakeDiv, false)

  close = (event) ->
    event.preventDefault()
    event.stopImmediatePropagation()

    target = event.target
    div = document.getElementById('modal__temp')

    ###
     # Make sure the modal__bg or modal__close was clicked, we don't
     # want to be able to click inside the modal and have it close.
    ###

    if isOpen and target.classList.contains('modal__bg') or target.classList.contains('modal__close')
      # Make the hidden div visible again and remove the transforms so it scales back to its original size
      div.style.opacity = '1'
      div.removeAttribute('style')

      ###
       # Iterate through the modals, modal contents and triggers to remove their active classes.
       # Remove the inline css from the trigger to move it back into its original position.
      ###

      for i in [0..len]
        modals[i].classList.remove('modal--active')
        content[i].classList.remove('modal__content--active')
        trigger[i].style.transform = 'none'
        trigger[i].style.webkitTransform = 'none'
        trigger[i].classList.remove('modal__trigger--active')

      # When fakeDiv opacity is 1 again, we want to remove it from the dom
      div.addEventListener('transitionend', removeDiv, false)

      isOpen = false

    removeDiv = ->
      setTimeout( ->
        window.requestAnimationFrame(div.remove())
      , contentDelay - 50)


  bindActions = ->
    for i in [0..len]
      trigger[i].addEventListener('click', getId, false)
      closers[i].addEventListener('click', close, false)
      modalsbg[i].addEventListener('click', close, false)

  init = ->
    bindActions()

  {init: init}

window.onload = Modal.init

Этот файл coffeescript вызывается в jade с помощью сценария сценария (src='javascripts/coffee-script.js') (src='javascripts/modal.coffee', type='text/coffeescript')

Я не мог использовать журналы компилятора CoffeeScript из-за ошибки "window.onload = Modal.init", которая вернула ошибку "окно не определено". Но консоль браузера не возвращает ошибок, Codepen тоже.

Я должен признаться, что я начал изучать эти 4 языка 3 дня назад. Так что я в принципе ничего не знаю ни о чем... Я даже не знаю, правильные ли настройки моего приложения.

Кто-нибудь может мне помочь? Большое спасибо!:)