JAVASCRIPT   20

ajaxoverlay

Guest on 21st June 2022 01:55:11 AM

  1. /*
  2.  date created  17/01by matt andrews
  3.  date modified 11/07 by matt andrews - v1.6
  4.  
  5.  requires /common/styles/ajaxoverlay.css
  6.  
  7.  example usage:
  8.  jQ('a.ajax-link').ajaxoverlay();
  9.  jQ('.magic-button').ajaxoverlay({ 'columnwidth' : 'two-col', 'background' : 'red' });
  10.  
  11.  changelog:
  12.     23/06 - added a plethora of callback functions and unbinding events
  13.     11/07 - now supports form submission for ajax content
  14. */
  15.  
  16. (function ($) {
  17.  
  18.     $.fn.ajaxoverlay = function (settings) {
  19.  
  20.         // all options are optional
  21.         var options = {
  22.             'overlay'               : true,                 // allow users to remove the overlay bg
  23.             'background'            : '#000',               // background colour of the div for the overlay
  24.             'showclosebutton'       : true,                 // show a close button, auto bound to closing the box
  25.             'recursiveselector'     : false,                // pass a selector and any links inside the loaded popup with this class will be loaded into the popup
  26.             'width'                 : '450',                // default width of the popup (number only, no px)
  27.             'height'                : '',                   // default height of the popup (number only, no px)
  28.             'extraclass'            : '',                   // added to the overlay/popup if you want to change default styling
  29.             'opacity'               : 0.7,                  // default opacity of overlay bg
  30.             'columnwidth'           : '',                   // used to override width if set
  31.             'closebuttonselector'   : '',                   // used if the popup needs a custom close button
  32.             'source'                : '',                   // allows user to pass an existing div rather than url to get content from - should be a string, not jquery object
  33.             'dobeforeopen'              : function() {},        // callback function - fires before the container has appeared
  34.             'doafteropen'               : function() {},        // callback function - fires after the container has appeared
  35.             'dobeforeclose'         : function() {},    // callback function - fires before everything is about to be hidden
  36.             'doafterclose'              : function() {},        // callback function - fires after everything has been hidden
  37.             'form'                  : {                 // specify a selector for a form which the plugin will automatically submit via ajax into the overlay
  38.                                         selector: '',   // the selector of the form itself (required if 'form' is specified)
  39.                                         trigger: '',    // a custom selector to trigger the form submit (optional, falls back to the form.submit() event)
  40.                                         url: '',            // optional, falls back to the form's default action
  41.                                         customField: '' // optional, if specified, this key will be sent (with a value of "1") along with the form submit.
  42.                                                                 // this could be useful to pass an "is_ajax" parameter so a form controller can return different results
  43.             },
  44.             'debugmode'                 : false                 // if enabled, logs messages about function calls to the console
  45.         };
  46.  
  47.         var $current_item; // used to hold a reference to the element we're operating upon
  48.  
  49.         var methods = {
  50.  
  51.             debug : function (msg) {
  52.                 if (options.debugmode) {
  53.                     console.log(msg);
  54.                 }
  55.             },
  56.  
  57.             init : function (elm) {
  58.                 var event = this;
  59.  
  60.                 methods.debug('initialising overlay');
  61.  
  62.                 if (!options.source && !options.form.selector) {
  63.                     var click_url = $(elm).attr('href');
  64.                     methods.spawnOverlay();
  65.  
  66.                     $.ajax({
  67.                         type: 'get',
  68.                         url: click_url,
  69.                         success: function (content) {
  70.                             methods.spawnPopup(content, methods.bindEvents);
  71.                         },
  72.                         error: function () {
  73.                             methods.removeEverything(false);
  74.                         }
  75.                     });
  76.                 } else if (options.source) { // the user passed an existing jquery element
  77.                     methods.spawnOverlay();
  78.                     methods.spawnPopup($(options.source), methods.bindEvents);
  79.                 } else if (options.form.selector) { // the user passed a form to submit
  80.  
  81.                     var form = $(options.form.selector);
  82.                     var url = form.attr('action');
  83.  
  84.                     if (options.form.url) {
  85.                         url = options.form.url;
  86.                     }
  87.  
  88.                     if (options.form.trigger) { // user specified a custom form submit event
  89.                         $(options.form.trigger).live('click', function(){
  90.                             methods.interceptFormViaAjax(form, url);
  91.                         });
  92.                     } else { // default to form.submit() instead
  93.                         form.live('submit', function(){
  94.                             methods.interceptFormViaAjax(form, url);
  95.                         });
  96.                     }
  97.  
  98.                 }
  99.  
  100.                 toggleHideOnPopupElements("hidden"); // gu-specific code, needs to be removed for open sourcing process
  101.  
  102.                 return event.preventDefault();
  103.             },
  104.  
  105.             interceptFormViaAjax : function (form, url) {
  106.  
  107.                 methods.debug('submitting form via ajax');
  108.  
  109.                 var data = form.serialize();
  110.                 if (options.form.customField) {
  111.                     data += '&' + options.form.customField + '=1';
  112.                 }
  113.  
  114.                 $.ajax({
  115.                     url: url,
  116.                     data: data,
  117.                     type: form.attr('method'),
  118.                     success: function(response) {
  119.                         var temp_form = $('#ajaxoverlay-formresponse-temp');
  120.                         temp_form.remove(); // in case it previous existed
  121.                         temp_form = $('<div id="ajaxoverlay-formresponse-temp">'+response+'</div>').appendTo('body');
  122.                         methods.spawnOverlay();
  123.                         methods.spawnPopup(temp_form, methods.bindEvents);
  124.                     },
  125.                     error: function () {
  126.                         methods.removeEverything(false);
  127.                     }
  128.                 });
  129.                 return false;
  130.             },
  131.  
  132.             spawnOverlay : function () {
  133.  
  134.                 // hide existing if necessary
  135.                 //methods.removeEverything(false);
  136.                 methods.removeEverything(true);
  137.  
  138.                 if (options.overlay) {
  139.  
  140.                     methods.debug('creating background overlay');
  141.  
  142.                     // create overlay bg first
  143.                     if (options.extraclass !== '') {
  144.                         options.extraclass = ' ' + options.extraclass;
  145.                     }
  146.  
  147.                     var pageheight = $(document).height();
  148.                     var overlay = $('<div class="ajax-overlay-bg' + options.extraclass + '"></div>');
  149.                     overlay.prependTo('body').css({ 'background' : options.background, 'height' : pageheight + 'px' }).fadeTo(0, options.opacity);
  150.  
  151.                 }
  152.  
  153.             },
  154.  
  155.             spawnPopup : function (content, callback) {
  156.  
  157.                 methods.debug('adding popup and positioning it onscreen');
  158.  
  159.                 // by default assume the popup should be inserted before the first element inside <body>
  160.                 var bottomlayer = $('body').children().first();
  161.  
  162.                 if (options.overlay) {
  163.                     // if we're using an overlay then insert the popup before that
  164.                     bottomlayer = 'div.ajax-overlay-bg';
  165.                 }
  166.  
  167.                 // add the popup div, set up its dimensions and hide it
  168.                 var popup = $('<div class="ajax-popup-window' + options.extraclass + ' ' + options.columnwidth + '"></div>');
  169.  
  170.                 // figure out a default width/height
  171.                 var css = { width: options.width + 'px' };
  172.  
  173.                 if (options.columnwidth) {
  174.                     css.width = '';
  175.                 }
  176.                 if (options.height) {
  177.                     css.height = options.height + 'px';
  178.                 }
  179.  
  180.                 // have to do these as separate steps or browser hangs
  181.                 popup.insertBefore(bottomlayer).css(css).hide();
  182.                 var c = $(content);
  183.                         c.appendTo(popup);
  184.                 popup.show();
  185.  
  186.                 if (options.dobeforeopen) {
  187.                     options.dobeforeopen.call($current_item); // receives the original link element as an argument
  188.                 }
  189.  
  190.                 if (options.source) {
  191.                     $(options.source).show(); // breaks popup
  192.                 }
  193.  
  194.                 // calculate center coords, then position and show it
  195.                 var top  = (($(window).height() - popup.outerHeight()) / 2 + $(window).scrollTop() + "px");
  196.                 var left = (($(window).width() - popup.outerWidth()) / 2 + $(window).scrollLeft() + "px");
  197.                 popup.css({top: top, left: left}).show();
  198.                
  199.                 if (options.showclosebutton) {
  200.                     popup.prepend('<div class="ajax-close-button"><a href="#">x</a></div>');
  201.                 }
  202.  
  203.                 popup.attr('tabindex', '-1').focus();
  204.  
  205.                 // call the event binder
  206.                 if (typeof callback === 'function') {
  207.                     callback.call(this);
  208.                 }
  209.  
  210.             },
  211.  
  212.             bindEvents : function () {
  213.  
  214.                 methods.debug('binding click events for close buttons etc');
  215.  
  216.                 // if recursive, bind on links inside the new div... careful.
  217.                 if (options.recursiveselector) {
  218.                     $('div.ajax-popup-window ' + options.recursiveselector).ajaxoverlay(settings);
  219.                 }
  220.  
  221.                 $('div.ajax-close-button a').live('click', function (event) {
  222.                     methods.removeEverything(true);
  223.                     return event.preventDefault();
  224.                 });
  225.  
  226.                 if (options.overlay) {
  227.                     $('div.ajax-overlay-bg').live('click', function (event) {
  228.                         methods.removeEverything(true);
  229.                         return event.preventDefault();
  230.                     });
  231.                 }
  232.  
  233.                 if (options.closebuttonselector) {
  234.                     $(options.closebuttonselector).live('click', function (event) {
  235.                         methods.removeEverything(true);
  236.                         return event.preventDefault();
  237.                     });
  238.                 }
  239.  
  240.                 $(document).keydown(function (event) {
  241.                     if (event.keyCode === 27) {
  242.                         methods.removeEverything(true);
  243.                     }
  244.                 });
  245.  
  246.                 if (options.doafteropen) {
  247.                     options.doafteropen.call($current_item); // receives the original link element as an argument
  248.                 }
  249.  
  250.             },
  251.  
  252.             removeEverything : function (use_callback) {
  253.  
  254.                 methods.debug('removing overlay elements from page and unbinding events');
  255.  
  256.                 if (options.dobeforeclose && use_callback) {
  257.                     options.dobeforeclose.call($current_item); // receives the original link element as an argument
  258.                 }
  259.  
  260.                 var content = $('.ajax-popup-window').children();
  261.  
  262.                 if (content.length !== 0) {
  263.                     $(content.get(1)).appendTo('body').hide();
  264.                 }
  265.                 $('.ajax-popup-window, .ajax-overlay-bg').remove();
  266.  
  267.                 if (options.doafterclose && use_callback) {
  268.                     options.doafterclose.call($current_item); // receives the original link element as an argument
  269.                 }
  270.  
  271.                 // remove original bindings
  272.                 //($current_item).unbind('mousedown');
  273.                 $('div.ajax-close-button a').die('click');
  274.                 if (options.overlay) { $('div.ajax-overlay-bg').die('click'); }
  275.                 if (options.closebuttonselector) { $(options.closebuttonselector).die('click'); }
  276.                 $(document).unbind('keydown');
  277.  
  278.                 // clear form bindings if set
  279.                 if (options.form.selector) { // the user passed a form to submit
  280.                     if (options.form.trigger) {
  281.                         $(options.form.trigger).die('click');
  282.                     } else {
  283.                         var form = $(options.form.selector);
  284.                         form.die('submit');
  285.                     }
  286.                 }
  287.  
  288.                 toggleHideOnPopupElements("visible"); // also gu-specific
  289.                 return false;
  290.             }
  291.  
  292.         };
  293.  
  294.         return this.each(function () {
  295.  
  296.             if (settings) {
  297.                 $.extend(options, settings);
  298.             }
  299.             var $me = $(this); // prevents confusion with 'this', the plugin itself
  300.  
  301.             $me.mousedown(function (e) {
  302.  
  303.                 methods.debug('user has clicked on element');
  304.  
  305.                 $current_item = $me; // store the current item for use later
  306.                 return methods.init.call(e, $current_item);
  307.             });
  308.  
  309.         });
  310.  
  311.     };
  312.  
  313. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.