modals.coffee

# Simple auto-centering for absolute-positioned elements
# ============================================================================
do ($ = jQuery, window, document) ->
  autoCentering = (element) ->
    @element   = element
    @_name     = pluginName
    @init()

  pluginName = "autoCentering"

  autoCentering:: =
    init: ->
      $el       = $(@element)
      boxWidth  = $el.outerWidth()
      boxHeight = $el.outerHeight()

      $el.css
        marginLeft: -(boxWidth / 2)
        marginTop:  -(boxHeight / 2)

  $.fn[pluginName] = ->
    @each ->
      $.data @, "plugin_" + pluginName, new autoCentering(@)  unless $.data(@, "plugin_" + pluginName)

  return # Prevent CoffeeScript from returning a value from plugin wrapper

do ($ = jQuery, window, document) -> $(document).ready ->

  # Utility functions
  # ===========================================================================
  window.getModal = (url, link) ->
    request = $.get url

    displayModalLoading()

    request.done (data) -> displayModal(data)
    request.fail        -> link.trigger "modal:error"

  displayModalLoading = () ->
    $('html').addClass('modal-active')
    data = $('<div class="modal-loading"><span>Loading...</span></div>').appendTo('body')
    data.trigger "modal:loading"

  closeModalLoading = () ->
    $('.modal-loading').remove()

  displayModal = (data) ->
    closeModalLoading()

    modal = $(data).appendTo('body')
    modal.trigger "modal:loaded"

    positionModal(modal.find('.window'))

  closeModal = (modal) ->
    $('html').removeClass('modal-active')
    modal.trigger "modal:closed"
    modal.remove()

  window.positionModal = (modalWindow) -> modalWindow.autoCentering()


  # Spinner - animated PNGs are better than animated GIFs
  # ===========================================================================
  $('body').on 'modal:loading', '.modal-loading', (event) ->
    el      = $(@)
    spinner = el.find('span')
    frames  = 19
    index   = 0

    do spin = ->
      spinner.css backgroundPosition: "0px -#{36*index}px"
      index += 1
      setTimeout ->
        spin()
      , 70


  # Click handler for modal triggers
  # ===========================================================================
  $('body').on 'click', 'a.modal-trigger', (event) ->
    event.preventDefault()

    link = $(@)
    url  = link.attr('href')

    unless link.data().disabled
      getModal(url, link)


  # Click handler for modal close buttons
  # ===========================================================================
  $('body').on 'click', '.modal a.close-button', (event) ->
    event.preventDefault()

    el    = $(@)
    modal = el.closest('.modal')

    closeModal(modal)


  # Center modal onload
  # ============================================================================
  positionModal($('.modal .window'))

modals.scss

@mixin overlay-background() {
     .rgba & { background: rgba(#000, 0.3); }
  .no-rgba & { background: image-url('transparencies/000000_30.png'); }
}

@mixin animationStart() {
  @include transform(scale(0.7));
  @include opacity(0);
}

@mixin animationEnd() {
  @include transform(scale(1));
  @include opacity(1);
}

@-moz-keyframes fadeInAndScale {
  0%    { @include animationStart(); }
  100%  { @include animationEnd(); }
}

@-webkit-keyframes fadeInAndScale {
  0%    { @include animationStart(); }
  100%  { @include animationEnd(); }
}

@-ms-keyframes fadeInAndScale {
  0%    { @include animationStart(); }
  100%  { @include animationEnd(); }
}

@-o-keyframes fadeInAndScale {
  0%    { @include animationStart(); }
  100%  { @include animationEnd(); }
}

// Loading screen
// ===========================================================================

.modal-loading {
  @include overlay-background;
  position: fixed;
  top:      0;
  right:    0;
  bottom:   0;
  left:     0;
  z-index:  1000;

  span {
    $width:      36px;
    $height:     36px;
    display:     block;
    text-align:  center;
    position:    absolute;
    top:         50%;
    left:        50%;
    width:       $width;
    height:      $height;
    margin-top:  -($height/2);
    margin-left: -($width/2);
    background:  image-url('ajax_loader_sprite_36x36_black.png');
    text-indent: -999em;

    $speed: 0.3s;

    -moz-animation:    fadeInAndScale $speed;
    -webkit-animation: fadeInAndScale $speed;
    -ms-animation:     fadeInAndScale $speed;
    -o-animation:      fadeInAndScale $speed;
  }
}

// Modal : base style
// ===========================================================================

.modal {
  position: fixed;
  top:      0;
  right:    0;
  bottom:   0;
  left:     0;
  z-index:  1000;

  .overlay {
    @include overlay-background;
    position:   absolute;
    top:        0;
    right:      0;
    bottom:     0;
    left:       0;
    z-index:    1;
  }

  // Modal : window
  // ===========================================================================

  .window {
    @include border-radius(5px);
    position: absolute;
    top:      50%;
    left:     50%;
    z-index:  2;
    width:    550px;
    color:    $mid-gray;

    $speed: 0.3s;

    -moz-animation:    fadeInAndScale $speed;
    -webkit-animation: fadeInAndScale $speed;
    -ms-animation:     fadeInAndScale $speed;
    -o-animation:      fadeInAndScale $speed;

       .rgba & { @include box-shadow(rgba(#000, 0.2) 0 2px 10px); }
    .no-rgba & { @include box-shadow(#cccccc         0 2px 10px); }

    a.close-button {
      @include text-replacement;
      position: absolute;
      top:      15px;
      right:    15px;
      z-index:  2;

      .icon:before {
        @include icofont-x;
        color:       #bebebe;
        text-shadow: 0px 1px 1px white;

        &:hover {
          color: #adadad;
        }
      }
    }

    .content {
      @include border-radius(5px);
      clear:      left;
      position:   relative;
      z-index:    1;
      padding:    14px 34px;
      background: #f0f0f0;

      header {
        @include box-shadow(#fff 0 1px 0);
        padding:       5px 0 12px;
        margin-bottom: 18px;
        border-bottom: 1px solid #b7b7b7;

        h2 {
          position:      relative;
          padding-left:  30px;
          color:         #666;

          &:before {
            @include icofont-calendar;
            display:     block;
            position:    absolute;
            top:         0;
            left:        -10px;
            font-size:   23px;
            line-height: 0.7em;
            color:       #e34841;
          }

          &       { font-family: $secondary-typeface;         font-style: italic; font-size: 16px; text-shadow:0px 1px 1px white;}
          & span  { font-family: $primary-typeface-semibold;  font-style: normal; font-size: 16px; width: 300px; display:inline-block;}

          span {
            text-transform: uppercase;
            color:          $primary-color;
            padding-left:   5px;
          }

          &, span { vertical-align: middle; }
        }
      }
    }
  }
}