Club Drupal

/**

 * @file

 *

 * Overrides for ctools modal.

 *

 */

(function ($) {

  /**

   * Override CTools modal show function so it can recognize the Bootstrap modal classes correctly

   */

  Drupal.CTools.Modal.show = function(choice) {

    var opts = {};

    if (choice && typeof choice === 'string' && Drupal.settings[choice]) {

      // This notation guarantees we are actually copying it.

      $.extend(true, opts, Drupal.settings[choice]);

    }

    else if (choice) {

      $.extend(true, opts, choice);

    }

    var defaults = {

      modalTheme: 'CToolsModalDialog',

      throbberTheme: 'CToolsModalThrobber',

      animation: 'show',

      animationSpeed: 'fast',

      modalSize: {

        type: 'scale',

        width: 0.8,

        height: 0.8,

        addWidth: 0,

        addHeight: 0,

        // How much to remove from the inner content to make space for the

        // theming.

        contentRight: 25,

        contentBottom: 45

      },

      modalOptions: {

        opacity: 0.55,

        background: '#fff'

      }

    };

    var settings = {};

    $.extend(true, settings, defaults, Drupal.settings.CToolsModal, opts);

    if (Drupal.CTools.Modal.currentSettings && Drupal.CTools.Modal.currentSettings !== settings) {

      Drupal.CTools.Modal.modal.remove();

      Drupal.CTools.Modal.modal = null;

    }

    Drupal.CTools.Modal.currentSettings = settings;

    var resize = function(e) {

      // When creating the modal, it actually exists only in a theoretical

      // place that is not in the DOM. But once the modal exists, it is in the

      // DOM so the context must be set appropriately.

      var context = e ? document : Drupal.CTools.Modal.modal;

      var width = 0;

      var height = 0;

      //  Handle fixed navbars. Grab the body top offset in pixels.

      var topOffset = parseInt($('body').css("padding-top"), 10);

      if (Drupal.CTools.Modal.currentSettings.modalSize.type === 'scale') {

        width = $(window).width() * Drupal.CTools.Modal.currentSettings.modalSize.width;

        height = ($(window).height() - topOffset) * Drupal.CTools.Modal.currentSettings.modalSize.height;

      }

      else {

        width = Drupal.CTools.Modal.currentSettings.modalSize.width;

        height = Drupal.CTools.Modal.currentSettings.modalSize.height;

      }

      // Add padding for the offset.

      $('#modalContent').css('padding-top', topOffset + 'px');

      // Use the additionol pixels for creating the width and height.

      $('div.ctools-modal-dialog', context).css({

        'width': width + Drupal.CTools.Modal.currentSettings.modalSize.addWidth + 'px',

        'height': height + Drupal.CTools.Modal.currentSettings.modalSize.addHeight + 'px'

      });

      $('div.ctools-modal-dialog .modal-body', context).css({

        'width': (width - Drupal.CTools.Modal.currentSettings.modalSize.contentRight) + 'px',

        'max-height': (height - Drupal.CTools.Modal.currentSettings.modalSize.contentBottom) + 'px'

      });

    };

    if (!Drupal.CTools.Modal.modal) {

      Drupal.CTools.Modal.modal = $(Drupal.theme(settings.modalTheme));

      if (settings.modalSize.type === 'scale') {

        $(window).bind('resize', resize);

      }

    }

    $('body').addClass('modal-open');

    resize();

    $('.modal-title', Drupal.CTools.Modal.modal).html(Drupal.CTools.Modal.currentSettings.loadingText);

    Drupal.CTools.Modal.modalContent(Drupal.CTools.Modal.modal, settings.modalOptions, settings.animation, settings.animationSpeed);

    $('#modalContent .modal-body').html(Drupal.theme(settings.throbberTheme));

  };

  /**

   * Remove modal class from body when closing modal.

   */

  $(document).on('CToolsDetachBehaviors', function() {

    $('body').removeClass('modal-open');

  });

  /**

   * Provide the HTML to create the modal dialog in the Bootstrap style.

   */

  Drupal.theme.prototype.CToolsModalDialog = function () {

    var html = '';

    html += '<div id="ctools-modal">';

    html += '  <div class="ctools-modal-dialog modal-dialog">';

    html += '    <div class="modal-content">';

    html += '      <div class="modal-header">';

    html += '        <button type="button" class="close ctools-close-modal" aria-hidden="true">&times;</button>';

    html += '        <h4 id="modal-title" class="modal-title">&nbsp;</h4>';

    html += '      </div>';

    html += '      <div id="modal-content" class="modal-body">';

    html += '      </div>';

    html += '    </div>';

    html += '  </div>';

    html += '</div>';

    return html;

  };

  /**

   * Provide the HTML to create a nice looking loading progress bar.

   */

  Drupal.theme.prototype.CToolsModalThrobber = function () {

    var html = '';

    html += '<div class="loading-spinner" style="width: 200px; margin: -20px 0 0 -100px; position: absolute; top: 45%; left: 50%">';

    html += '  <div class="progress progress-striped active">';

    html += '    <div class="progress-bar" style="width: 100%;"></div>';

    html += '  </div>';

    html += '</div>';

    return html;

  };

})(jQuery);