diff --git a/ctools_ajax_sample/ctools_ajax_sample.module b/ctools_ajax_sample/ctools_ajax_sample.module index 2a30c2a..27f88cc 100644 --- a/ctools_ajax_sample/ctools_ajax_sample.module +++ b/ctools_ajax_sample/ctools_ajax_sample.module @@ -137,6 +137,21 @@ function ctools_ajax_sample_page() { 'modalTheme' => 'CToolsSampleModal', 'throbber' => theme('image', array('path' => ctools_image_path('ajax-loader.gif', 'ctools_ajax_sample'), 'alt' => t('Loading...'), 'title' => t('Loading'))), ), + 'ctools-sample-style-dynamic' => array( + 'modalSize' => array( + 'type' => 'dynamic', + 'width' => 100, + 'height' => 100, + ), + 'modalOptions' => array( + 'opacity' => .5, + 'background-color' => '#000', + ), + 'animation' => 'slideDown', + 'speed' => 'fast', + 'modalTheme' => 'CToolsSampleModal', + 'throbber' => theme('image', array('path' => ctools_image_path('ajax-loader.gif', 'ctools_ajax_sample'), 'alt' => t('Loading...'), 'title' => t('Loading'))), + ), ); drupal_add_js($sample_style, 'setting'); @@ -164,6 +179,7 @@ function ctools_ajax_sample_page() { $links[] = l(t('Wizard (no modal)'), 'ctools_ajax_sample/nojs/animal'); $links[] = ctools_modal_text_button(t('Wizard (default modal)'), 'ctools_ajax_sample/nojs/animal', t('Pick an animal')); $links[] = ctools_modal_text_button(t('Wizard (custom modal)'), 'ctools_ajax_sample/nojs/animal', t('Pick an animal'), 'ctools-modal-ctools-sample-style'); + $links[] = ctools_modal_text_button(t('Wizard (dynamic modal)'), 'ctools_ajax_sample/nojs/animal', t('Pick an animal'), 'ctools-modal-ctools-sample-style-dynamic'); $links[] = drupal_render($button_form); $links[] = ctools_ajax_text_button(t('Hello world!'), "ctools_ajax_sample/nojs/hello", t('Replace text with "hello world"')); diff --git a/js/modal.js b/js/modal.js index 8006408..7caef51 100644 --- a/js/modal.js +++ b/js/modal.js @@ -32,7 +32,7 @@ var defaults = { modalTheme: 'CToolsModalDialog', throbberTheme: 'CToolsModalThrobber', - animation: 'show', + animation: 'fadeIn', animationSpeed: 'fast', modalSize: { type: 'scale', @@ -61,44 +61,16 @@ 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; - - if (Drupal.CTools.Modal.currentSettings.modalSize.type == 'scale') { - var width = $(window).width() * Drupal.CTools.Modal.currentSettings.modalSize.width; - var height = $(window).height() * Drupal.CTools.Modal.currentSettings.modalSize.height; - } - else { - var width = Drupal.CTools.Modal.currentSettings.modalSize.width; - var height = Drupal.CTools.Modal.currentSettings.modalSize.height; - } - - // Use the additionol pixels for creating the width and height. - $('div.ctools-modal-content', context).css({ - 'width': width + Drupal.CTools.Modal.currentSettings.modalSize.addWidth + 'px', - 'height': height + Drupal.CTools.Modal.currentSettings.modalSize.addHeight + 'px' - }); - $('div.ctools-modal-content .modal-content', context).css({ - 'width': (width - Drupal.CTools.Modal.currentSettings.modalSize.contentRight) + 'px', - '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); - } - } + }; - resize(); $('span.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-content').html(Drupal.theme(settings.throbberTheme)); + + $(window).trigger('resize'); }; /** @@ -273,6 +245,8 @@ } $('#modal-title').html(response.title); $('#modal-content').html(response.output); + // Trigger a resize event to make sure modal is in the right place. + $(window).trigger('resize'); Drupal.attachBehaviors(); } @@ -358,15 +332,6 @@ if ( $('#modalBackdrop')) $('#modalBackdrop').remove(); if ( $('#modalContent')) $('#modalContent').remove(); - // position code lifted from http://www.quirksmode.org/viewport/compatibility.html - if (self.pageYOffset) { // all except Explorer - var wt = self.pageYOffset; - } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict - var wt = document.documentElement.scrollTop; - } else if (document.body) { // all other Explorers - var wt = document.body.scrollTop; - } - // Get our dimensions // Get the docHeight and (ugly hack) add 50 pixels to make sure we dont have a *visible* border below our div @@ -379,6 +344,48 @@ // Create our divs $('body').append('