node.js - Debugging this jade+coffeescript code on Express4 server -

i looking don't know how bad lines of codes are.

i trying adapt original codepen.io work (http://codepen.io/ettrics/pen/jdjdzp/ , ettrics) 1 of teaching project. run web page on express4+stylus+coffescript node's server.

the coffeescript file:

# each popup takes entire window, modal modal = ->   # make easier not having type select element (queryselectorall)   $qsa = (el) ->     document.queryselectorall(el)    trigger = $qsa('.modal__trigger') # click activate modal   modals = $qsa('.modal') # entire modal (takes entire window)   modalsbg = $qsa('.modal__bg') # entire modal (takes entire window)   content = $qsa('.modal__content') # inner content of modal   closers = $qsa('.modal__close') # element used close modal   isopen = false   contentdelay = 100 # duration after click button , wait content show   len = trigger.length    getid = (event) ->     event.preventdefault()     # value of data-modal attribute button     modalid = this.dataset.modal     # remove '#' string     len = modalid.length     modalid = modalid.substring(1, len)     # select modal want activate     modal = document.getelementbyid(modalid)     # execute function creates temporary expanding div named fakediv     makefakediv(this, modal)    makefakediv = (self, modal) ->     fakediv = document.getelementbyid('modal__temp');      # if there isn't 'fakediv', create 1 , append button     # clicked. after execute function 'movetrigger' handles 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 !!     # class increases z-index value button goes overtop other buttons     trigger.classlist.add('modal__trigger--active')      # these values used scale fakediv div same size modal     scalex = modalprops.width / triggerprops.width     scaley = modalprops.height / triggerprops.height      scalex = scalex.tofixed(3) # round 3 decimal places     scaley = scaley.tofixed(3)      # these values used move button center of window (to pepare ease out effect)     transx = math.round(xc - triggerprops.left - triggerprops.width / 2)     transy = math.round(yc - triggerprops.top - triggerprops.height / 2)      # if modal aligned top move button center-y of modal instead of window     if modal.classlist.contains('modal--align-top')       transy = math.round(modalprops.height / 2 + modalprops.top - triggerprops.top - triggerprops.height / 2)      # translate button center of screen     trigger.style.transform = 'translate(' + transx + 'px, ' + transy + 'px)'     trigger.style.webkittransform = 'translate(' + transx + 'px, ' + transy + 'px)'     # expand fakediv same size modal     div.style.transform = 'scale(' + scalex + ',' + scaley + ')';     div.style.webkittransform = 'scale(' + scalex + ',' + scaley + ')'      # smart animation api used open     window.settimeout( ->       window.requestanimationframe(open(modal, div))     , contentdelay)    open = (modal, div) ->     if !isopen       # select content inside modal       content = modal.queryselector('.modal__content')       # reveal modal       modal.classlist.add('modal--active')       # reveal modal content       content.classlist.add('modal__content--active')        ###        # when modal content finished transitioning, fadeout expanding        # fakediv when window resizes isn't visible ( doesn't        # move window).       ###        content.addeventlistener('transitionend', hidefakediv, false)        isopen = true      hidefakediv = ->       # fadeout fakediv can't seen when window 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 modal__bg or modal__close clicked, don't      # want able click inside modal , have close.     ###      if isopen , target.classlist.contains('modal__bg') or target.classlist.contains('modal__close')       # make hidden div visible again , remove transforms scales original size       div.style.opacity = '1'       div.removeattribute('style')        ###        # iterate through modals, modal contents , triggers remove active classes.        # remove inline css trigger move original position.       ###        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 1 again, want remove dom       div.addeventlistener('transitionend', removediv, false)        isopen = false      removediv = ->       settimeout( ->         window.requestanimationframe(div.remove())       , contentdelay - 50)     bindactions = ->     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 

this coffeescript file called in jade script(src='javascripts/coffee-script.js') script(src='javascripts/modal.coffee', type='text/coffeescript')

i not use coffeescript compiler logs because of 'window.onload = modal.init' returned "window not defined" error. browser console returns no error, codepen neither.

i have confess began learn these 4 languages 3 days ago. don't know anything... don't know if app settings right.

can give me hand on this? lot! :)