modal.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710
  1. /**
  2. * @file
  3. *
  4. * Implement a modal form.
  5. *
  6. * @see modal.inc for documentation.
  7. *
  8. * This javascript relies on the CTools ajax responder.
  9. */
  10. (function ($) {
  11. // Make sure our objects are defined.
  12. Drupal.CTools = Drupal.CTools || {};
  13. Drupal.CTools.Modal = Drupal.CTools.Modal || {};
  14. /**
  15. * Display the modal
  16. *
  17. * @todo -- document the settings.
  18. */
  19. Drupal.CTools.Modal.show = function(choice) {
  20. var opts = {};
  21. if (choice && typeof choice == 'string' && Drupal.settings[choice]) {
  22. // This notation guarantees we are actually copying it.
  23. $.extend(true, opts, Drupal.settings[choice]);
  24. }
  25. else if (choice) {
  26. $.extend(true, opts, choice);
  27. }
  28. var defaults = {
  29. modalTheme: 'CToolsModalDialog',
  30. throbberTheme: 'CToolsModalThrobber',
  31. animation: 'show',
  32. animationSpeed: 'fast',
  33. modalSize: {
  34. type: 'scale',
  35. width: .8,
  36. height: .8,
  37. addWidth: 0,
  38. addHeight: 0,
  39. // How much to remove from the inner content to make space for the
  40. // theming.
  41. contentRight: 25,
  42. contentBottom: 45
  43. },
  44. modalOptions: {
  45. opacity: .55,
  46. background: '#fff'
  47. },
  48. modalClass: 'default'
  49. };
  50. var settings = {};
  51. $.extend(true, settings, defaults, Drupal.settings.CToolsModal, opts);
  52. if (Drupal.CTools.Modal.currentSettings && Drupal.CTools.Modal.currentSettings != settings) {
  53. Drupal.CTools.Modal.modal.remove();
  54. Drupal.CTools.Modal.modal = null;
  55. }
  56. Drupal.CTools.Modal.currentSettings = settings;
  57. var resize = function(e) {
  58. // When creating the modal, it actually exists only in a theoretical
  59. // place that is not in the DOM. But once the modal exists, it is in the
  60. // DOM so the context must be set appropriately.
  61. var context = e ? document : Drupal.CTools.Modal.modal;
  62. if (Drupal.CTools.Modal.currentSettings.modalSize.type == 'scale') {
  63. var width = $(window).width() * Drupal.CTools.Modal.currentSettings.modalSize.width;
  64. var height = $(window).height() * Drupal.CTools.Modal.currentSettings.modalSize.height;
  65. }
  66. else {
  67. var width = Drupal.CTools.Modal.currentSettings.modalSize.width;
  68. var height = Drupal.CTools.Modal.currentSettings.modalSize.height;
  69. }
  70. // Use the additionol pixels for creating the width and height.
  71. $('div.ctools-modal-content', context).css({
  72. 'width': width + Drupal.CTools.Modal.currentSettings.modalSize.addWidth + 'px',
  73. 'height': height + Drupal.CTools.Modal.currentSettings.modalSize.addHeight + 'px'
  74. });
  75. $('div.ctools-modal-content .modal-content', context).css({
  76. 'width': (width - Drupal.CTools.Modal.currentSettings.modalSize.contentRight) + 'px',
  77. 'height': (height - Drupal.CTools.Modal.currentSettings.modalSize.contentBottom) + 'px'
  78. });
  79. }
  80. if (!Drupal.CTools.Modal.modal) {
  81. Drupal.CTools.Modal.modal = $(Drupal.theme(settings.modalTheme));
  82. if (settings.modalSize.type == 'scale') {
  83. $(window).bind('resize', resize);
  84. }
  85. }
  86. resize();
  87. $('span.modal-title', Drupal.CTools.Modal.modal).html(Drupal.CTools.Modal.currentSettings.loadingText);
  88. Drupal.CTools.Modal.modalContent(Drupal.CTools.Modal.modal, settings.modalOptions, settings.animation, settings.animationSpeed, settings.modalClass);
  89. $('#modalContent .modal-content').html(Drupal.theme(settings.throbberTheme)).addClass('ctools-modal-loading');
  90. // Position autocomplete results based on the scroll position of the modal.
  91. $('#modalContent .modal-content').delegate('input.form-autocomplete', 'keyup', function() {
  92. $('#autocomplete').css('top', $(this).position().top + $(this).outerHeight() + $(this).offsetParent().filter('#modal-content').scrollTop());
  93. });
  94. };
  95. /**
  96. * Hide the modal
  97. */
  98. Drupal.CTools.Modal.dismiss = function() {
  99. if (Drupal.CTools.Modal.modal) {
  100. Drupal.CTools.Modal.unmodalContent(Drupal.CTools.Modal.modal);
  101. }
  102. };
  103. /**
  104. * Provide the HTML to create the modal dialog.
  105. */
  106. Drupal.theme.prototype.CToolsModalDialog = function () {
  107. var html = ''
  108. html += '<div id="ctools-modal">'
  109. html += ' <div class="ctools-modal-content">' // panels-modal-content
  110. html += ' <div class="modal-header">';
  111. html += ' <a class="close" href="#">';
  112. html += Drupal.CTools.Modal.currentSettings.closeText + Drupal.CTools.Modal.currentSettings.closeImage;
  113. html += ' </a>';
  114. html += ' <span id="modal-title" class="modal-title">&nbsp;</span>';
  115. html += ' </div>';
  116. html += ' <div id="modal-content" class="modal-content">';
  117. html += ' </div>';
  118. html += ' </div>';
  119. html += '</div>';
  120. return html;
  121. }
  122. /**
  123. * Provide the HTML to create the throbber.
  124. */
  125. Drupal.theme.prototype.CToolsModalThrobber = function () {
  126. var html = '';
  127. html += '<div id="modal-throbber">';
  128. html += ' <div class="modal-throbber-wrapper">';
  129. html += Drupal.CTools.Modal.currentSettings.throbber;
  130. html += ' </div>';
  131. html += '</div>';
  132. return html;
  133. };
  134. /**
  135. * Figure out what settings string to use to display a modal.
  136. */
  137. Drupal.CTools.Modal.getSettings = function (object) {
  138. var match = $(object).attr('class').match(/ctools-modal-(\S+)/);
  139. if (match) {
  140. return match[1];
  141. }
  142. }
  143. /**
  144. * Click function for modals that can be cached.
  145. */
  146. Drupal.CTools.Modal.clickAjaxCacheLink = function () {
  147. Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
  148. return Drupal.CTools.AJAX.clickAJAXCacheLink.apply(this);
  149. };
  150. /**
  151. * Handler to prepare the modal for the response
  152. */
  153. Drupal.CTools.Modal.clickAjaxLink = function () {
  154. Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(this));
  155. return false;
  156. };
  157. /**
  158. * Submit responder to do an AJAX submit on all modal forms.
  159. */
  160. Drupal.CTools.Modal.submitAjaxForm = function(e) {
  161. var $form = $(this);
  162. var url = $form.attr('action');
  163. setTimeout(function() { Drupal.CTools.AJAX.ajaxSubmit($form, url); }, 1);
  164. return false;
  165. }
  166. /**
  167. * Bind links that will open modals to the appropriate function.
  168. */
  169. Drupal.behaviors.ZZCToolsModal = {
  170. attach: function(context) {
  171. // Bind links
  172. // Note that doing so in this order means that the two classes can be
  173. // used together safely.
  174. /*
  175. * @todo remimplement the warm caching feature
  176. $('a.ctools-use-modal-cache', context).once('ctools-use-modal', function() {
  177. $(this).click(Drupal.CTools.Modal.clickAjaxCacheLink);
  178. Drupal.CTools.AJAX.warmCache.apply(this);
  179. });
  180. */
  181. $('area.ctools-use-modal, a.ctools-use-modal', context).once('ctools-use-modal', function() {
  182. var $this = $(this);
  183. $this.click(Drupal.CTools.Modal.clickAjaxLink);
  184. // Create a drupal ajax object
  185. var element_settings = {};
  186. if ($this.attr('href')) {
  187. element_settings.url = $this.attr('href');
  188. element_settings.event = 'click';
  189. element_settings.progress = { type: 'throbber' };
  190. }
  191. var base = $this.attr('href');
  192. Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
  193. });
  194. // Bind buttons
  195. $('input.ctools-use-modal, button.ctools-use-modal', context).once('ctools-use-modal', function() {
  196. var $this = $(this);
  197. $this.click(Drupal.CTools.Modal.clickAjaxLink);
  198. var button = this;
  199. var element_settings = {};
  200. // AJAX submits specified in this manner automatically submit to the
  201. // normal form action.
  202. element_settings.url = Drupal.CTools.Modal.findURL(this);
  203. if (element_settings.url == '') {
  204. element_settings.url = $(this).closest('form').attr('action');
  205. }
  206. element_settings.event = 'click';
  207. element_settings.setClick = true;
  208. var base = $this.attr('id');
  209. Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
  210. // Make sure changes to settings are reflected in the URL.
  211. $('.' + $(button).attr('id') + '-url').change(function() {
  212. Drupal.ajax[base].options.url = Drupal.CTools.Modal.findURL(button);
  213. });
  214. });
  215. // Bind our custom event to the form submit
  216. $('#modal-content form', context).once('ctools-use-modal', function() {
  217. var $this = $(this);
  218. var element_settings = {};
  219. element_settings.url = $this.attr('action');
  220. element_settings.event = 'submit';
  221. element_settings.progress = { 'type': 'throbber' }
  222. var base = $this.attr('id');
  223. Drupal.ajax[base] = new Drupal.ajax(base, this, element_settings);
  224. Drupal.ajax[base].form = $this;
  225. $('input[type=submit], button', this).click(function(event) {
  226. Drupal.ajax[base].element = this;
  227. this.form.clk = this;
  228. // Stop autocomplete from submitting.
  229. if (Drupal.autocompleteSubmit && !Drupal.autocompleteSubmit()) {
  230. return false;
  231. }
  232. // An empty event means we were triggered via .click() and
  233. // in jquery 1.4 this won't trigger a submit.
  234. // We also have to check jQuery version to prevent
  235. // IE8 + jQuery 1.4.4 to break on other events
  236. // bound to the submit button.
  237. if (jQuery.fn.jquery.substr(0, 3) === '1.4' && typeof event.bubbles === "undefined") {
  238. $(this.form).trigger('submit');
  239. return false;
  240. }
  241. });
  242. });
  243. // Bind a click handler to allow elements with the 'ctools-close-modal'
  244. // class to close the modal.
  245. $('.ctools-close-modal', context).once('ctools-close-modal')
  246. .click(function() {
  247. Drupal.CTools.Modal.dismiss();
  248. return false;
  249. });
  250. }
  251. };
  252. // The following are implementations of AJAX responder commands.
  253. /**
  254. * AJAX responder command to place HTML within the modal.
  255. */
  256. Drupal.CTools.Modal.modal_display = function(ajax, response, status) {
  257. if ($('#modalContent').length == 0) {
  258. Drupal.CTools.Modal.show(Drupal.CTools.Modal.getSettings(ajax.element));
  259. }
  260. $('#modal-title').html(response.title);
  261. // Simulate an actual page load by scrolling to the top after adding the
  262. // content. This is helpful for allowing users to see error messages at the
  263. // top of a form, etc.
  264. $('#modal-content').html(response.output).scrollTop(0);
  265. // Attach behaviors within a modal dialog.
  266. var settings = response.settings || ajax.settings || Drupal.settings;
  267. Drupal.attachBehaviors($('#modalContent'), settings);
  268. if ($('#modal-content').hasClass('ctools-modal-loading')) {
  269. $('#modal-content').removeClass('ctools-modal-loading');
  270. }
  271. else {
  272. // If the modal was already shown, and we are simply replacing its
  273. // content, then focus on the first focusable element in the modal.
  274. // (When first showing the modal, focus will be placed on the close
  275. // button by the show() function called above.)
  276. $('#modal-content :focusable:first').focus();
  277. }
  278. }
  279. /**
  280. * AJAX responder command to dismiss the modal.
  281. */
  282. Drupal.CTools.Modal.modal_dismiss = function(command) {
  283. Drupal.CTools.Modal.dismiss();
  284. $('link.ctools-temporary-css').remove();
  285. }
  286. /**
  287. * Display loading
  288. */
  289. //Drupal.CTools.AJAX.commands.modal_loading = function(command) {
  290. Drupal.CTools.Modal.modal_loading = function(command) {
  291. Drupal.CTools.Modal.modal_display({
  292. output: Drupal.theme(Drupal.CTools.Modal.currentSettings.throbberTheme),
  293. title: Drupal.CTools.Modal.currentSettings.loadingText
  294. });
  295. }
  296. /**
  297. * Find a URL for an AJAX button.
  298. *
  299. * The URL for this gadget will be composed of the values of items by
  300. * taking the ID of this item and adding -url and looking for that
  301. * class. They need to be in the form in order since we will
  302. * concat them all together using '/'.
  303. */
  304. Drupal.CTools.Modal.findURL = function(item) {
  305. var url = '';
  306. var url_class = '.' + $(item).attr('id') + '-url';
  307. $(url_class).each(
  308. function() {
  309. var $this = $(this);
  310. if (url && $this.val()) {
  311. url += '/';
  312. }
  313. url += $this.val();
  314. });
  315. return url;
  316. };
  317. /**
  318. * modalContent
  319. * @param content string to display in the content box
  320. * @param css obj of css attributes
  321. * @param animation (fadeIn, slideDown, show)
  322. * @param speed (valid animation speeds slow, medium, fast or # in ms)
  323. * @param modalClass class added to div#modalContent
  324. */
  325. Drupal.CTools.Modal.modalContent = function(content, css, animation, speed, modalClass) {
  326. // If our animation isn't set, make it just show/pop
  327. if (!animation) {
  328. animation = 'show';
  329. }
  330. else {
  331. // If our animation isn't "fadeIn" or "slideDown" then it always is show
  332. if (animation != 'fadeIn' && animation != 'slideDown') {
  333. animation = 'show';
  334. }
  335. }
  336. if (!speed && 0 !== speed) {
  337. speed = 'fast';
  338. }
  339. // Build our base attributes and allow them to be overriden
  340. css = jQuery.extend({
  341. position: 'absolute',
  342. left: '0px',
  343. margin: '0px',
  344. background: '#000',
  345. opacity: '.55'
  346. }, css);
  347. // Add opacity handling for IE.
  348. css.filter = 'alpha(opacity=' + (100 * css.opacity) + ')';
  349. content.hide();
  350. // If we already have modalContent, remove it.
  351. if ($('#modalBackdrop').length) $('#modalBackdrop').remove();
  352. if ($('#modalContent').length) $('#modalContent').remove();
  353. // position code lifted from http://www.quirksmode.org/viewport/compatibility.html
  354. if (self.pageYOffset) { // all except Explorer
  355. var wt = self.pageYOffset;
  356. } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
  357. var wt = document.documentElement.scrollTop;
  358. } else if (document.body) { // all other Explorers
  359. var wt = document.body.scrollTop;
  360. }
  361. // Get our dimensions
  362. // Get the docHeight and (ugly hack) add 50 pixels to make sure we dont have a *visible* border below our div
  363. var docHeight = $(document).height() + 50;
  364. var docWidth = $(document).width();
  365. var winHeight = $(window).height();
  366. var winWidth = $(window).width();
  367. if( docHeight < winHeight ) docHeight = winHeight;
  368. // Create our divs
  369. $('body').append('<div id="modalBackdrop" class="backdrop-' + modalClass + '" style="z-index: 1000; display: none;"></div><div id="modalContent" class="modal-' + modalClass + '" style="z-index: 1001; position: absolute;">' + $(content).html() + '</div>');
  370. // Get a list of the tabbable elements in the modal content.
  371. var getTabbableElements = function () {
  372. var tabbableElements = $('#modalContent :tabbable'),
  373. radioButtons = tabbableElements.filter('input[type="radio"]');
  374. // The list of tabbable elements from jQuery is *almost* right. The
  375. // exception is with groups of radio buttons. The list from jQuery will
  376. // include all radio buttons, when in fact, only the selected radio button
  377. // is tabbable, and if no radio buttons in a group are selected, then only
  378. // the first is tabbable.
  379. if (radioButtons.length > 0) {
  380. // First, build up an index of which groups have an item selected or not.
  381. var anySelected = {};
  382. radioButtons.each(function () {
  383. var name = this.name;
  384. if (typeof anySelected[name] === 'undefined') {
  385. anySelected[name] = radioButtons.filter('input[name="' + name + '"]:checked').length !== 0;
  386. }
  387. });
  388. // Next filter out the radio buttons that aren't really tabbable.
  389. var found = {};
  390. tabbableElements = tabbableElements.filter(function () {
  391. var keep = true;
  392. if (this.type == 'radio') {
  393. if (anySelected[this.name]) {
  394. // Only keep the selected one.
  395. keep = this.checked;
  396. }
  397. else {
  398. // Only keep the first one.
  399. if (found[this.name]) {
  400. keep = false;
  401. }
  402. found[this.name] = true;
  403. }
  404. }
  405. return keep;
  406. });
  407. }
  408. return tabbableElements.get();
  409. };
  410. // Keyboard and focus event handler ensures only modal elements gain focus.
  411. modalEventHandler = function( event ) {
  412. target = null;
  413. if ( event ) { //Mozilla
  414. target = event.target;
  415. } else { //IE
  416. event = window.event;
  417. target = event.srcElement;
  418. }
  419. var parents = $(target).parents().get();
  420. for (var i = 0; i < parents.length; ++i) {
  421. var position = $(parents[i]).css('position');
  422. if (position == 'absolute' || position == 'fixed') {
  423. return true;
  424. }
  425. }
  426. if ($(target).is('#modalContent, body') || $(target).filter('*:visible').parents('#modalContent').length) {
  427. // Allow the event only if target is a visible child node
  428. // of #modalContent.
  429. return true;
  430. }
  431. else {
  432. getTabbableElements()[0].focus();
  433. }
  434. event.preventDefault();
  435. };
  436. $('body').bind( 'focus', modalEventHandler );
  437. $('body').bind( 'keypress', modalEventHandler );
  438. // Keypress handler Ensures you can only TAB to elements within the modal.
  439. // Based on the psuedo-code from WAI-ARIA 1.0 Authoring Practices section
  440. // 3.3.1 "Trapping Focus".
  441. modalTabTrapHandler = function (evt) {
  442. // We only care about the TAB key.
  443. if (evt.which != 9) {
  444. return true;
  445. }
  446. var tabbableElements = getTabbableElements(),
  447. firstTabbableElement = tabbableElements[0],
  448. lastTabbableElement = tabbableElements[tabbableElements.length - 1],
  449. singleTabbableElement = firstTabbableElement == lastTabbableElement,
  450. node = evt.target;
  451. // If this is the first element and the user wants to go backwards, then
  452. // jump to the last element.
  453. if (node == firstTabbableElement && evt.shiftKey) {
  454. if (!singleTabbableElement) {
  455. lastTabbableElement.focus();
  456. }
  457. return false;
  458. }
  459. // If this is the last element and the user wants to go forwards, then
  460. // jump to the first element.
  461. else if (node == lastTabbableElement && !evt.shiftKey) {
  462. if (!singleTabbableElement) {
  463. firstTabbableElement.focus();
  464. }
  465. return false;
  466. }
  467. // If this element isn't in the dialog at all, then jump to the first
  468. // or last element to get the user into the game.
  469. else if ($.inArray(node, tabbableElements) == -1) {
  470. // Make sure the node isn't in another modal (ie. WYSIWYG modal).
  471. var parents = $(node).parents().get();
  472. for (var i = 0; i < parents.length; ++i) {
  473. var position = $(parents[i]).css('position');
  474. if (position == 'absolute' || position == 'fixed') {
  475. return true;
  476. }
  477. }
  478. if (evt.shiftKey) {
  479. lastTabbableElement.focus();
  480. }
  481. else {
  482. firstTabbableElement.focus();
  483. }
  484. }
  485. };
  486. $('body').bind('keydown', modalTabTrapHandler);
  487. // Create our content div, get the dimensions, and hide it
  488. var modalContent = $('#modalContent').css('top','-1000px');
  489. var $modalHeader = modalContent.find('.modal-header');
  490. var mdcTop = wt + Math.max((winHeight / 2) - (modalContent.outerHeight() / 2), 0);
  491. var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
  492. $('#modalBackdrop').css(css).css('top', 0).css('height', docHeight + 'px').css('width', docWidth + 'px').show();
  493. modalContent.css({top: mdcTop + 'px', left: mdcLeft + 'px'}).hide()[animation](speed);
  494. // Bind a click for closing the modalContent
  495. modalContentClose = function(){close(); return false;};
  496. $('.close', $modalHeader).bind('click', modalContentClose);
  497. // Bind a keypress on escape for closing the modalContent
  498. modalEventEscapeCloseHandler = function(event) {
  499. if (event.keyCode == 27) {
  500. close();
  501. return false;
  502. }
  503. };
  504. $(document).bind('keydown', modalEventEscapeCloseHandler);
  505. // Per WAI-ARIA 1.0 Authoring Practices, initial focus should be on the
  506. // close button, but we should save the original focus to restore it after
  507. // the dialog is closed.
  508. var oldFocus = document.activeElement;
  509. $('.close', $modalHeader).focus();
  510. // Close the open modal content and backdrop
  511. function close() {
  512. // Unbind the events
  513. $(window).unbind('resize', modalContentResize);
  514. $('body').unbind( 'focus', modalEventHandler);
  515. $('body').unbind( 'keypress', modalEventHandler );
  516. $('body').unbind( 'keydown', modalTabTrapHandler );
  517. $('.close', $modalHeader).unbind('click', modalContentClose);
  518. $(document).unbind('keydown', modalEventEscapeCloseHandler);
  519. $(document).trigger('CToolsDetachBehaviors', $('#modalContent'));
  520. // Closing animation.
  521. switch (animation) {
  522. case 'fadeIn':
  523. modalContent.fadeOut(speed, modalContentRemove);
  524. break;
  525. case 'slideDown':
  526. modalContent.slideUp(speed, modalContentRemove);
  527. break;
  528. case 'show':
  529. modalContent.hide(speed, modalContentRemove);
  530. break;
  531. }
  532. }
  533. // Remove the content.
  534. modalContentRemove = function () {
  535. $('#modalContent').remove();
  536. $('#modalBackdrop').remove();
  537. // Restore focus to where it was before opening the dialog.
  538. $(oldFocus).focus();
  539. };
  540. // Move and resize the modalBackdrop and modalContent on window resize.
  541. modalContentResize = function () {
  542. // Reset the backdrop height/width to get accurate document size.
  543. $('#modalBackdrop').css('height', '').css('width', '');
  544. // Position code lifted from:
  545. // http://www.quirksmode.org/viewport/compatibility.html
  546. if (self.pageYOffset) { // all except Explorer
  547. var wt = self.pageYOffset;
  548. } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
  549. var wt = document.documentElement.scrollTop;
  550. } else if (document.body) { // all other Explorers
  551. var wt = document.body.scrollTop;
  552. }
  553. // Get our heights
  554. var docHeight = $(document).height();
  555. var docWidth = $(document).width();
  556. var winHeight = $(window).height();
  557. var winWidth = $(window).width();
  558. if( docHeight < winHeight ) docHeight = winHeight;
  559. // Get where we should move content to
  560. var modalContent = $('#modalContent');
  561. var mdcTop = wt + Math.max((winHeight / 2) - (modalContent.outerHeight() / 2), 0);
  562. var mdcLeft = ( winWidth / 2 ) - ( modalContent.outerWidth() / 2);
  563. // Apply the changes
  564. $('#modalBackdrop').css('height', docHeight + 'px').css('width', docWidth + 'px').show();
  565. modalContent.css('top', mdcTop + 'px').css('left', mdcLeft + 'px').show();
  566. };
  567. $(window).bind('resize', modalContentResize);
  568. };
  569. /**
  570. * unmodalContent
  571. * @param content (The jQuery object to remove)
  572. * @param animation (fadeOut, slideUp, show)
  573. * @param speed (valid animation speeds slow, medium, fast or # in ms)
  574. */
  575. Drupal.CTools.Modal.unmodalContent = function(content, animation, speed)
  576. {
  577. // If our animation isn't set, make it just show/pop
  578. if (!animation) { var animation = 'show'; } else {
  579. // If our animation isn't "fade" then it always is show
  580. if (( animation != 'fadeOut' ) && ( animation != 'slideUp')) animation = 'show';
  581. }
  582. // Set a speed if we dont have one
  583. if ( !speed ) var speed = 'fast';
  584. // Unbind the events we bound
  585. $(window).unbind('resize', modalContentResize);
  586. $('body').unbind('focus', modalEventHandler);
  587. $('body').unbind('keypress', modalEventHandler);
  588. $('body').unbind( 'keydown', modalTabTrapHandler );
  589. var $modalContent = $('#modalContent');
  590. var $modalHeader = $modalContent.find('.modal-header');
  591. $('.close', $modalHeader).unbind('click', modalContentClose);
  592. $('body').unbind('keypress', modalEventEscapeCloseHandler);
  593. $(document).trigger('CToolsDetachBehaviors', $modalContent);
  594. // jQuery magic loop through the instances and run the animations or removal.
  595. content.each(function(){
  596. if ( animation == 'fade' ) {
  597. $('#modalContent').fadeOut(speed, function() {
  598. $('#modalBackdrop').fadeOut(speed, function() {
  599. $(this).remove();
  600. });
  601. $(this).remove();
  602. });
  603. } else {
  604. if ( animation == 'slide' ) {
  605. $('#modalContent').slideUp(speed,function() {
  606. $('#modalBackdrop').slideUp(speed, function() {
  607. $(this).remove();
  608. });
  609. $(this).remove();
  610. });
  611. } else {
  612. $('#modalContent').remove();
  613. $('#modalBackdrop').remove();
  614. }
  615. }
  616. });
  617. };
  618. $(function() {
  619. Drupal.ajax.prototype.commands.modal_display = Drupal.CTools.Modal.modal_display;
  620. Drupal.ajax.prototype.commands.modal_dismiss = Drupal.CTools.Modal.modal_dismiss;
  621. });
  622. })(jQuery);