/jqwicket/src/main/java/com/google/code/jqwicket/ui/prettypopin/js/jquery.prettyPopin.js

http://jqwicket.googlecode.com/ · JavaScript · 225 lines · 162 code · 41 blank · 22 comment · 16 complexity · 64826e58ff0b645e497ec8c3312d4697 MD5 · raw file

  1. /* ------------------------------------------------------------------------
  2. Class: prettyPopin
  3. Use: Alternative to popups
  4. Author: Stephane Caron (http://www.no-margin-for-errors.com)
  5. Version: 1.3
  6. ------------------------------------------------------------------------- */
  7. var _followScroll = false;
  8. var _readyBound = false;
  9. (function($) {
  10. $.fn.prettyPopin = function(settings) {
  11. settings = jQuery.extend({
  12. modal : false, /* true/false */
  13. width : false, /* false/integer */
  14. height: false, /* false/integer */
  15. opacity: 0.5, /* value from 0 to 1 */
  16. animationSpeed: 'fast', /* slow/medium/fast/integer */
  17. followScroll: true, /* true/false */
  18. loader_path: 'images/prettyPopin/loader.gif', /* path to your loading image */
  19. callback: function(){} /* callback called when closing the popin */
  20. }, settings);
  21. function bindReady(){ // To bind them only once
  22. if(_readyBound) return;
  23. _readyBound = true;
  24. $(window).scroll(function(){ _centerPopin(); });
  25. $(window).resize(function(){ _centerPopin(); });
  26. };
  27. bindReady();
  28. return this.each(function(){
  29. var popinWidth;
  30. var popinHeight;
  31. var $c;
  32. $(this).click(function(){
  33. buildoverlay();
  34. buildpopin();
  35. // Load the content
  36. $.get($(this).attr('href'),function(responseText){
  37. $('.prettyPopin .prettyContent .prettyContent-container').html(responseText);
  38. // This block of code is used to calculate the width/height of the popin
  39. popinWidth = settings.width || $('.prettyPopin .prettyContent .prettyContent-container').width() + parseFloat($('.prettyPopin .prettyContent .prettyContent-container').css('padding-left')) + parseFloat($('.prettyPopin .prettyContent .prettyContent-container').css('padding-right'));
  40. $('.prettyPopin').width(popinWidth);
  41. popinHeight = settings.height || $('.prettyPopin .prettyContent .prettyContent-container').height() + parseFloat($('.prettyPopin .prettyContent .prettyContent-container').css('padding-top')) + parseFloat($('.prettyPopin .prettyContent .prettyContent-container').css('padding-bottom'));
  42. $('.prettyPopin').height(popinHeight);
  43. // Now reset the width/height
  44. $('.prettyPopin').height(45).width(45);
  45. displayPopin();
  46. });
  47. return false;
  48. });
  49. var displayPopin = function() {
  50. var scrollPos = _getScroll();
  51. projectedTop = ($(window).height()/2) + scrollPos['scrollTop'] - (popinHeight/2);
  52. if(projectedTop < 0) {
  53. projectedTop = 10;
  54. _followScroll = false;
  55. }else{
  56. _followScroll = settings.followScroll;
  57. };
  58. $('.prettyPopin').animate({
  59. 'top': projectedTop,
  60. 'left': ($(window).width()/2) + scrollPos['scrollLeft'] - (popinWidth/2),
  61. 'width' : popinWidth,
  62. 'height' : popinHeight
  63. },settings.animationSpeed, function(){
  64. displayContent();
  65. });
  66. };
  67. var buildpopin = function() {
  68. $('body').append('<div class="prettyPopin"><a href="#" id="b_close" rel="close">Close</a><div class="prettyContent"><img src="'+settings.loader_path+'" alt="Loading" class="loader" /><div class="prettyContent-container"></div></div></div>');
  69. $c = $('.prettyPopin .prettyContent .prettyContent-container'); // The content container
  70. $('.prettyPopin a[rel=close]:eq(0)').click(function(){ closeOverlay(); return false; });
  71. var scrollPos = _getScroll();
  72. // Show the popin
  73. $('.prettyPopin').width(45).height(45).css({
  74. 'top': ($(window).height()/2) + scrollPos['scrollTop'],
  75. 'left': ($(window).width()/2) + scrollPos['scrollLeft']
  76. }).hide().fadeIn(settings.animationSpeed);
  77. };
  78. var buildoverlay = function() {
  79. $('body').append('<div id="overlay"></div>');
  80. // Set the proper height
  81. $('#overlay').css('height',$(document).height());
  82. // Fade it in
  83. $('#overlay').css('opacity',0).fadeTo(settings.animationSpeed,settings.opacity);
  84. if(!settings.modal){
  85. $('#overlay').click(function(){
  86. closeOverlay();
  87. });
  88. };
  89. };
  90. var displayContent = function() {
  91. $c.parent().find('.loader').hide();
  92. $c.parent().parent().find('#b_close').show();
  93. $c.fadeIn(function(){
  94. // Focus on the first form input if there's one
  95. $(this).find('input[type=text]:first').trigger('focus');
  96. // Check for paging
  97. $('.prettyPopin a[rel=internal]').click(function(){
  98. $link = $(this);
  99. // Fade out the current content
  100. $c.fadeOut(function(){
  101. $c.parent().find('.loader').show();
  102. // Submit the form
  103. $.get($link.attr('href'),function(responseText){
  104. // Replace the content
  105. $c.html(responseText);
  106. _refreshContent($c);
  107. });
  108. });
  109. return false;
  110. });
  111. // Submit the form in ajax
  112. $('.prettyPopin form').bind('submit',function(){
  113. $theForm = $(this);
  114. // Fade out the current content
  115. $c.fadeOut(function(){
  116. $c.parent().find('.loader').show();
  117. // Submit the form
  118. $.post($theForm.attr('action'), $theForm.serialize(),function(responseText){
  119. // Replace the content
  120. $c.html(responseText);
  121. _refreshContent($c);
  122. });
  123. });
  124. return false;
  125. });
  126. });
  127. $('.prettyPopin a[rel=close]:gt(0)').click(function(){ closeOverlay(); return false; });
  128. };
  129. var _refreshContent = function(){
  130. var scrollPos = _getScroll();
  131. if(!settings.width) popinWidth = $c.width() + parseFloat($c.css('padding-left')) + parseFloat($c.css('padding-right'));
  132. if(!settings.height) popinHeight = $c.height() + parseFloat($c.css('padding-top')) + parseFloat($c.css('padding-bottom'));
  133. projectedTop = ($(window).height()/2) + scrollPos['scrollTop'] - (popinHeight/2);
  134. if(projectedTop < 0) {
  135. projectedTop = 10;
  136. _followScroll = false;
  137. }else{
  138. _followScroll = settings.followScroll;
  139. };
  140. $('.prettyPopin').animate({
  141. 'top': projectedTop,
  142. 'left': ($(window).width()/2) + scrollPos['scrollLeft'] - (popinWidth/2),
  143. 'width' : popinWidth,
  144. 'height' : popinHeight
  145. }, settings.animationSpeed,function(){
  146. displayContent();
  147. });
  148. };
  149. var closeOverlay = function() {
  150. $('#overlay').fadeOut(settings.animationSpeed,function(){ $(this).remove(); });
  151. $('.prettyPopin').fadeOut(settings.animationSpeed,function(){ $(this).remove(); settings.callback() });
  152. };
  153. });
  154. function _centerPopin(){
  155. if(!_followScroll) return;
  156. // Make sure the popin exist
  157. if(!$('.prettyPopin')) return;
  158. var scrollPos = _getScroll();
  159. if($.browser.opera) {
  160. windowHeight = window.innerHeight;
  161. windowWidth = window.innerWidth;
  162. }else{
  163. windowHeight = $(window).height();
  164. windowWidth = $(window).width();
  165. };
  166. projectedTop = ($(window).height()/2) + scrollPos['scrollTop'] - ($('.prettyPopin').height()/2);
  167. if(projectedTop < 0) {
  168. projectedTop = 10;
  169. _followScroll = false;
  170. }else{
  171. _followScroll = true;
  172. };
  173. $('.prettyPopin').css({
  174. 'top': projectedTop,
  175. 'left': ($(window).width()/2) + scrollPos['scrollLeft'] - ($('.prettyPopin').width()/2)
  176. });
  177. };
  178. function _getScroll(){
  179. scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0;
  180. scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || 0;
  181. return {scrollTop:scrollTop,scrollLeft:scrollLeft};
  182. };
  183. };
  184. })(jQuery);