DOMWindowOverlay CoffeeScript

overlay.coffee

class DOMWindow
  constructor: () ->
    @DOMWindowOverlay = '#DOMWindowOverlay'
    @_DOMWindowOverlay = @DOMWindowOverlay.replace(/^\#/,"")
    @DOMWindow = '#DOMWindow'
    @_DOMWindow = @DOMWindow.replace(/^\#/,"")

    @Lightbox = ".view"

  render: () ->
    $('body').append "<div id=\"#{@_DOMWindowOverlay}\"></div>"
    $(@DOMWindowOverlay).append "<div id=\"#{@_DOMWindow}\"></div>"

    $('html').css
      overflow: "hidden"
    $(@DOMWindowOverlay).css
      overflow: 'hidden'

    $(@DOMWindow).html "This sentence will be the view in the browser. Alternatively you can use Ajax (like $.ajax) to put contents."

    w = $(@DOMWindow).children().outerWidth()

    $(@DOMWindow).css
      position: 'fixed'
      top: document.documentElement.clientHeight
      'margin-left': -1*w/2


    $(@DOMWindow).animate
      top: 50
    , 400 , =>
      $(@DOMWindow).css
        position: 'absolute'
      $(@DOMWindowOverlay).css
        'overflow-x': 'auto'
        'overflow-y': 'scroll'

    # Bind event for Hide
    $(window).keydown (e) =>
      if e.which is 27  # ESC
        @hider()
    $(@DOMWindowOverlay + " .close").click (e) =>
      e.preventDefault()
      @hider()

  hider: () ->
    $(@DOMWindowOverlay).css
      overflow: 'hidden'
    $(@DOMWindow).addClass 'rotation'
    $(@DOMWindow).css
      position: 'fixed'
    $(@DOMWindow).animate
      top: document.documentElement.clientHeight + 50
    , 200, =>
      $('html').css
        overflow: 'auto'
      $(@DOMWindowOverlay).fadeOut 100, () =>
        $(@DOMWindowOverlay).remove()


$ ->
  dw = new DOMWindow()
  $(document).on "click", "#link-to-trigger-DOMWindow", (e) ->
    e.preventDefault()
    dw.render()