diff --git a/ctools_ajax_sample/ctools_ajax_sample.module b/ctools_ajax_sample/ctools_ajax_sample.module index 4638ac3..cb4fe83 100644 --- a/ctools_ajax_sample/ctools_ajax_sample.module +++ b/ctools_ajax_sample/ctools_ajax_sample.module @@ -14,10 +14,10 @@ */ function ctools_ajax_sample_menu() { $items['ctools_ajax_sample'] = array( - 'title' => 'Chaos Tools AJAX Demo', - 'page callback' => 'ctools_ajax_sample_page', - 'access callback' => TRUE, - 'type' => MENU_NORMAL_ITEM, + 'title' => 'Chaos Tools AJAX Demo', + 'page callback' => 'ctools_ajax_sample_page', + 'access callback' => TRUE, + 'type' => MENU_NORMAL_ITEM, ); $items['ctools_ajax_sample/simple_form'] = array( 'title' => 'Simple Form', @@ -26,39 +26,39 @@ function ctools_ajax_sample_menu() { 'type' => MENU_CALLBACK, ); $items['ctools_ajax_sample/%ctools_js/hello'] = array( - 'title' => 'Hello World', - 'page callback' => 'ctools_ajax_sample_hello', - 'page arguments' => array(1), - 'access callback' => TRUE, - 'type' => MENU_CALLBACK, + 'title' => 'Hello World', + 'page callback' => 'ctools_ajax_sample_hello', + 'page arguments' => array(1), + 'access callback' => TRUE, + 'type' => MENU_CALLBACK, ); $items['ctools_ajax_sample/%ctools_js/tablenix/%'] = array( - 'title' => 'Hello World', - 'page callback' => 'ctools_ajax_sample_tablenix', - 'page arguments' => array(1, 3), - 'access callback' => TRUE, - 'type' => MENU_CALLBACK, + 'title' => 'Hello World', + 'page callback' => 'ctools_ajax_sample_tablenix', + 'page arguments' => array(1, 3), + 'access callback' => TRUE, + 'type' => MENU_CALLBACK, ); $items['ctools_ajax_sample/%ctools_js/login'] = array( - 'title' => 'Login', - 'page callback' => 'ctools_ajax_sample_login', - 'page arguments' => array(1), - 'access callback' => TRUE, - 'type' => MENU_CALLBACK, + 'title' => 'Login', + 'page callback' => 'ctools_ajax_sample_login', + 'page arguments' => array(1), + 'access callback' => TRUE, + 'type' => MENU_CALLBACK, ); $items['ctools_ajax_sample/%ctools_js/animal'] = array( - 'title' => 'Animal', - 'page callback' => 'ctools_ajax_sample_animal', - 'page arguments' => array(1), - 'access callback' => TRUE, - 'type' => MENU_CALLBACK, + 'title' => 'Animal', + 'page callback' => 'ctools_ajax_sample_animal', + 'page arguments' => array(1), + 'access callback' => TRUE, + 'type' => MENU_CALLBACK, ); $items['ctools_ajax_sample/%ctools_js/login/%'] = array( - 'title' => 'Post-Login Action', - 'page callback' => 'ctools_ajax_sample_login_success', - 'page arguments' => array(1, 3), - 'access callback' => TRUE, - 'type' => MENU_CALLBACK, + 'title' => 'Post-Login Action', + 'page callback' => 'ctools_ajax_sample_login_success', + 'page arguments' => array(1, 3), + 'access callback' => TRUE, + 'type' => MENU_CALLBACK, ); $items['ctools_ajax_sample/jumped'] = array( 'title' => 'Successful Jumping', @@ -137,9 +137,44 @@ 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-ui-dialog' => array( + 'library' => 'ui.dialog', + //'modalTheme' => 'CToolsSampleModal', + 'throbber' => theme('image', array('path' => ctools_image_path('ajax-loader.gif', 'ctools_ajax_sample'), 'alt' => t('Loading...'), 'title' => t('Loading'))), + // This is jQuery's dialog default values not required, just for reference + 'options' => array( + 'disabled' => TRUE, + 'autoOpen' => TRUE, // Not the default! + //'buttons' => new stdClass(), + 'closeOnEscape' => TRUE, + 'closeText' => t('Close'), + 'dialogClass' => '', + 'draggable' => TRUE, + 'height' => 'auto', + 'hide' => NULL, + 'maxHeight' => FALSE, + 'maxWidth' => FALSE, + 'minHeight' => 300, + 'minWidth' => 600, + 'modal' => FALSE, + 'position' => FALSE, + 'resizable' => TRUE, + 'show' => 'fade', + 'stack' => TRUE, + //'title' => '', + 'width' => 300, + 'zIndex' => 1000, + ), + 'modalSize' => array( + 'type' => 'scale', + 'width' => 0.8, + 'height' => 0.8, + ), + ), ); drupal_add_js($sample_style, 'setting'); + drupal_add_library('system', 'ui.dialog'); // Since we have our js, css and images in well-known named directories, // CTools makes it easy for us to just use them without worrying about @@ -157,6 +192,8 @@ function ctools_ajax_sample_page() { // The extra class points to the info in ctools-sample-style which we added // to the settings, prefixed with 'ctools-modal'. $links[] = ctools_modal_text_button(t('Modal Login (custom style)'), 'ctools_ajax_sample/nojs/login', t('Login via modal'), 'ctools-modal-ctools-sample-style'); + // jQuery UI Dialog style + $links[] = ctools_modal_text_button(t('Modal Login (jQuery dialog'), 'ctools_ajax_sample/nojs/login', t('Login via modal'), 'ctools-modal-ctools-ui-dialog'); } // Four ways to do our animal picking wizard. @@ -164,6 +201,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 (jQuery dialog)'), 'ctools_ajax_sample/nojs/animal', t('Pick an animal'), 'ctools-modal-ctools-ui-dialog'); $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 634595f..1bac047 100644 --- a/js/modal.js +++ b/js/modal.js @@ -13,12 +13,16 @@ Drupal.CTools = Drupal.CTools || {}; Drupal.CTools.Modal = Drupal.CTools.Modal || {}; + + var ctoolsModal = Drupal.CTools.Modal; + var modalJQuery = null; + /** * Display the modal * * @todo -- document the settings. */ - Drupal.CTools.Modal.show = function(choice) { + ctoolsModal.show = function(choice) { var opts = {}; if (choice && typeof choice == 'string' && Drupal.settings[choice]) { @@ -30,6 +34,7 @@ } var defaults = { + library: null, modalTheme: 'CToolsModalDialog', throbberTheme: 'CToolsModalThrobber', animation: 'show', @@ -49,47 +54,61 @@ opacity: .55, background: '#fff' }, + options: {}, modalClass: 'default' }; 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; + if (ctoolsModal.currentSettings && ctoolsModal.currentSettings != settings) { + ctoolsModal.modal.remove(); + ctoolsModal.modal = null; } - Drupal.CTools.Modal.currentSettings = settings; + ctoolsModal.currentSettings = settings; + + // Set the library for jQuery UI + modalJQuery = ctoolsModal.currentSettings['library'] == 'ui.dialog'; + + if (modalJQuery) { + + if (ctoolsModal.modal && ('dialog' in ctoolsModal.modal)) { + ctoolsModal.modal.dialog('close'); + ctoolsModal.modal = null; + } + ctoolsModal.modalContent(Drupal.theme(settings.throbberTheme), settings); + return; + } 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 context = e ? document : ctoolsModal.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; + if (ctoolsModal.currentSettings.modalSize.type == 'scale') { + var width = $(window).width() * ctoolsModal.currentSettings.modalSize.width; + var height = $(window).height() * ctoolsModal.currentSettings.modalSize.height; } else { - var width = Drupal.CTools.Modal.currentSettings.modalSize.width; - var height = Drupal.CTools.Modal.currentSettings.modalSize.height; + var width = ctoolsModal.currentSettings.modalSize.width; + var height = ctoolsModal.currentSettings.modalSize.height; } - // Use the additionol pixels for creating the width and height. + // Use the additional 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' + 'width': width + ctoolsModal.currentSettings.modalSize.addWidth + 'px', + 'height': height + ctoolsModal.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' + 'width': (width - ctoolsModal.currentSettings.modalSize.contentRight) + 'px', + 'height': (height - ctoolsModal.currentSettings.modalSize.contentBottom) + 'px' }); } - if (!Drupal.CTools.Modal.modal) { - Drupal.CTools.Modal.modal = $(Drupal.theme(settings.modalTheme)); + if (!ctoolsModal.modal) { + ctoolsModal.modal = $(Drupal.theme(settings.modalTheme)); if (settings.modalSize.type == 'scale') { $(window).bind('resize', resize); } @@ -97,8 +116,8 @@ 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, settings.modalClass); + $('span.modal-title', ctoolsModal.modal).html(ctoolsModal.currentSettings.loadingText); + ctoolsModal.modalContent(Drupal.CTools.Modal.modal, settings.modalOptions, settings.animation, settings.animationSpeed, settings.modalClass); $('#modalContent .modal-content').html(Drupal.theme(settings.throbberTheme)).addClass('ctools-modal-loading'); // Position autocomplete results based on the scroll position of the modal. @@ -110,9 +129,9 @@ /** * Hide the modal */ - Drupal.CTools.Modal.dismiss = function() { - if (Drupal.CTools.Modal.modal) { - Drupal.CTools.Modal.unmodalContent(Drupal.CTools.Modal.modal); + ctoolsModal.dismiss = function() { + if (ctoolsModal.modal) { + ctoolsModal.unmodalContent(ctoolsModal.modal); } }; @@ -125,7 +144,7 @@ html += '