Allow the modal to be more customizable

// Removed this reply because it was badly implemented by me therefor the error showed.

// New reply:

I need to add some additional pixels to the calculated width and height of $('div.ctools-modal-content', context).css. So i define the new settings.

	drupal_add_js(array(
		'face-style' => array(
		  'modalSize' => array(
			'type' => 'scale',
			'width' => .7,
			'height' => .6,
		  ),
		  'modalOptions' => array(
			'opacity' => 0,
		  ),
		  'animation' => 'fadeIn',
		  'modalTheme' => 'CtoolsFaceStyle',
		),
	  ), 'setting');

Now the width and height are set to fluid with .7 and .6. But now i need to add the pixels.
modal.js

$('div.ctools-modal-content', context).css({
  'width': width + 70 + 'px', // here you see how i should get it for my theme, with the additional 70px (or whatever px) now this is hacked just to make my question clear.
  'height': height + 70 + 'px' // here you see how i should get it for my theme, with the additional 70px (or whatever px) now this is hacked just to make my question clear.
});

So when the width and height are calculated i additionally need to add some pixels, because i'm using a table that has some images as 'borders'. When the extra pixels are not added the borders are hidden.

I hope my question is clear... Anyway the patch works, so i don't know if i may change this but i will set it to reviewd.

Again i am unable the create patches, so here is the new javascript file. This lets us define a addWidth and addHeight. So now we can add extra width and height on div.ctools-modal-content, good for themeing. Using:

'face-style' => array(
		  'modalSize' => array(
			'type' => 'scale',
			'width' => .7,
			'height' => .6,
			'addWidth' => 70,
			'addHeight' => 70
		  ),

merlinofchaos: i don't know if you want to keep the variable names the way they are or if you even want to go with this option, any input?

ok i guess there always has to be a first time. I will try to create a patch trough cvs.

well it is a patch tough it just doesn't seem good. It first delets everything and then adds it...

sounds like that could be the case since i'm on a windows machine.

no idea on how to convert this to unix. I read http://drupal.org/node/324 which states cvs diff [options] file_to_diff | unix2dos -u > file_to_diff.patch

So after trying
diff -up js/modal.js js/@modal.js | unix2dos -U > modal-customizable-altered.patch
i got a error, read the unix2dos --help and it stated i cant use -U with unix2dos. So tried
diff -up js/modal.js js/@modal.js | dos2unix -U > modal-customizable-altered.patch

Everything i tried return the same patch as i uploaded here.

Ok got this working by basically opening the original file (unix linebreaks), saving it. And the creating the patch. So here's the patch.

Merlin: got some time to take a look at this, and if so, what do you think of it. Does it need a explanation for why this would be needed?

ok great.

lasac's patch needed to be rerolled to apply directly to head (use cvs diff -up > patchname.patch) to patch against head, not diff with the patched version of a module.

I applied those changes and also reworked the height calculation from 'height': (height - 35) + 'px' to 'height': (height - 45) + 'px' because 45 was reliably creating a size that would overlap the wrapper. I haven't tested that part enough to ensure that's not partly related to our theming...

tizzo: thanks i tried to create it against head but that command line didn't work for me. i keep getting the error that my root is not set.

cvs diff: No CVSROOT specified!  Please use the `-d' option
cvs [diff aborted]: or set the CVSROOT environment variable.

This is how i try to set it:

cvs -z6 -d:pserver:anonymous:anonymous@cvs.drupal.org:/cvs/drupal-contrib checkout contributions/modules/ctools/

i try to set it with anonymous but just can't get it to work. I don't really get why the height should be 10 px less but ill check it out. Again thanks for re-creating this.

@17: i totally agree.

Some issues that have to do with these options:

• I keep getting this error after the patch:
  

  Fout: this[0] is undefined
  Bronbestand: http://##.##.nl/sites/all/modules/ctools/js/dimensions.js?f
  Regel: 128
      

• Another issue is that when you change the theme for the Throbber it only uses the theme for loading the modal. But after submitting the modal there's also a Throbber but that does not get seem to adapt the theme somehow.

I can write a documentation, tough i haven't done that before. Could we wait for one more day so that i can try to find out what that this[0] is undefined problem is?

everything works.

Great, when will actually the next stable release be?

Hey lasac and merlinofchaos, thanks for doing this. I think this is what I'm looking for for making a modal's width and height more customizable. Yet I am not exactly sure how your latest patch is suppose to be used. Is one still suppose to follow the instructions for writing PHP to add a JS call to Drupal? What I am trying to do is, using the SimpleNews module's form for subscribing anonymous users for a newsletter, I want the subscription form to popup in a modal. So in my own module's code I load "simplenews_block_form_1" form ("1" is the Taxonomy of the Newsletter to subscribe to) by calling ctools. This works, but alas the modal is huge for the 3 fields I want to pop up. So, using this as a scenario, what would I need to do with ctools and making a customized JS file? Here is what my module does to call ctools:

function mymodule_subscription_popup() {
  ctools_include('ajax');
  ctools_include('modal');
  
  $form_state = array('ajax' => TRUE);
  $output = ctools_modal_form_wrapper('simplenews_block_form_1', $form_state); 
  if (!$output) {  
    $output = array();
    $output[] = ctools_ajax_command_replace('#modal-message', '<div id="modal-message">' . $form_state['message'] . '</div>');
    $output[] = ctools_modal_command_dismiss();
  }
  ctools_ajax_render($output);
}

Any thoughts what I can do to customize this? Appreciate the help.

The reason this is confusing is that in the first few comments, the first druapl_add_js() has "my-module-style" and then the next time that doesn't exist, but there is "face-style"....yet in the first post it said to set the link's class as "ctools-modal-my-modal-style". While you said that the class and JS name just have to match, yours doesn't match your original description of how to use what you are doing. So should I *ONLY* use the final drupal_add_js() code in this thread, or is that a build up of the original?

Ok, just to be complete, here is my callback function that generates the pages which contains the link to popup the subscripton box. Am I do this right? (I am using the latest dev version of ctools....assumed that was patched with all this):

function mymodule_test_page() {
  ctools_include('ajax');
  ctools_include('modal');
  ctools_modal_add_js();
  
  $output = ctools_modal_text_button(t('Click to Subscribe'), 'modal_test/form', t('Subscribe'), "ctools-use-modal ctools-modal-face-style");
  $output .= '<div id="modal-message">&nbsp</div>';
  ctools_include('plugins');
  drupal_set_message(ctools_get_plugins('email', 'test'));

  drupal_add_js(array(
'face-style' => array(
  'modalSize' => array(
'type' => 'scale',
'width' => .7,
'height' => .6,
'addWidth' => 70,
'addHeight' => 70
  ),
  'modalOptions' => array(
  'opacity' => 0,
  ),
  'animation' => 'fadeIn',
  'modalTheme' => 'CtoolsFaceStyle',
  ),
  ), 'setting');

  return $output;
}

This is using the drupal_add_js() from above with the name "face-style" as you see I set as the class when calling ctools_modal_text_button().

Am I doing this right? I see no change in the modal window's width and height. Arghh!!

Please wait for the documentation. Merlin will bring one out ASAP.

In the meanwhile i can provide you with what i'm working with:

function drupal_glue_login_callback($type, $js) {
  switch ($type) {
    case 'login':
      $title = t('Inloggen');
      $form_id = 'user_login';
      break;
    case 'register':
      $title = t('Aanmelden');
      $form_id = 'user_register';
      break;
  }

  if ($js) {
    ctools_include('modal');
    ctools_include('ajax');
    $form_state = array(
      'ajax' => TRUE,
      'title' => $title,
    );
    $commands = array();
    $commands = ctools_modal_form_wrapper($form_id, $form_state);
    if (empty($commands)) {
	  $commands[] = ctools_modal_command_loading();
      $commands[] = array('command' => 'reload');
    }
    ctools_ajax_render($commands);
  }
  else {
    return drupal_get_form($form_id);
  }
}

And

function drupal_glue_preprocess_page(&$variables) {
	drupal_add_js(array(
		'face-style' => array(
		  'modalSize' => array(
			'type' => 'scale',
			'width' => .7,
			'height' => .6,
			'addWidth' => 20,
			'addHeight' => 15
		  ),
		  'modalOptions' => array(
			'opacity' => 0.2,
			'background' => '#001438'
		  ),
		  'animation' => 'fadeIn',
		  'modalTheme' => 'CtoolsFaceStyle',
		  'throbberTheme' => 'CtoolsFaceStyleThrobber',
		  'throbber' => theme('image', './sites/all/themes/##/assets/js/ctools-theme/ajax-loader.gif', t('Loading...'), t('Loading'))
		),
	  ), 'setting');
}

Hi,
I am looking for a way to avoid throbber. Now every time I click on any links I get a throbber working, which breaks my layout in many pages. Is there a way to disable throbber?

Im not sure but wouldnt it work with css?

I can't find the documentation about this.. could you point where it is? (UX!..)

I am not developing a module using cTools, I'm attempting to theme core modals in a different way..

I inserted this bit in my template.php:

  $settings = array(
    'ctools-foo-bar' => array(
      'loadingText' => t('...'),
      'closeText' => '',
      'closeImage' => theme('image', array(
        'path' => $base_theme_path . '/images/icon-close-window.png',
        'title' => t('Close window'),
        'alt' => t('Close window'),
      )),
      'throbber' => theme('image', array(
        'path' => ctools_image_path('throbber.gif'),
        'title' => t('Loading...'),
        'alt' => t('Loading'),
      )),
      'modalOptions' => array(
        'opacity' => .8,
        'background' => '#000',
      ),
      'modalSize' => array(
        'type' => 'fixed',
        'width' => 500,
        'height' => 500,
      ),
    ),
  );

but I didn't get a ..ctools-foo-bar class in the modal popup .. Am I missing something?

ps: There's a mention of an "advanced help" documentation in your last message,

Posted by merlinofchaos on September 9, 2010 at 1:28am
Documentation is now committed in the advanced help.

I guess it was for the 6.x branch?