https://hohenwarth.de/fileadmin/CI/js/jquery.modal.js

1/*
2    A simple jQuery modal (http://github.com/kylefox/jquery-modal)
3    Version 0.7.1
4*/
5
6(function (factory) {
7  // Making your jQuery plugin work better with npm tools
8  // http://blog.npmjs.org/post/112712169830/making-your-jquery-plugin-work-better-with-npm
9  if(typeof module === "object" && typeof module.exports === "object") {
10    factory(require("jquery"), window, document);
11  }
12  else {
13    factory(jQuery, window, document);
14  }
15}(function($, window, document, undefined) {
16
17  var modals = [],
18      getCurrent = function() {
19        return modals.length ? modals[modals.length - 1] : null;
20      },
21      selectCurrent = function() {
22        var i,
23            selected = false;
24        for (i=modals.length-1; i>=0; i--) {
25          if (modals[i].$blocker) {
26            modals[i].$blocker.toggleClass('current',!selected).toggleClass('behind',selected);
27            selected = true;
28          }
29        }
30      };
31
32  $.modal = function(el, options) {
33    var remove, target;
34    this.$body = $('body');
35    this.options = $.extend({}, $.modal.defaults, options);
36    this.options.doFade = !isNaN(parseInt(this.options.fadeDuration, 10));
37    this.$blocker = null;
38    if (this.options.closeExisting)
39      while ($.modal.isActive())
40        $.modal.close(); // Close any open modals.
41    modals.push(this);
42    if (el.is('a')) {
43      target = el.attr('href');
44      //Select element by id from href
45      if (/^#/.test(target)) {
46        this.$elm = $(target);
47        if (this.$elm.length !== 1) return null;
48        this.$body.append(this.$elm);
49        this.open();
50      //AJAX
51      } else {
52        this.$elm = $('<div>');
53        this.$body.append(this.$elm);
54        remove = function(event, modal) { modal.elm.remove(); };
55        this.showSpinner();
56        el.trigger($.modal.AJAX_SEND);
57        $.get(target).done(function(html) {
58          if (!$.modal.isActive()) return;
59          el.trigger($.modal.AJAX_SUCCESS);
60          var current = getCurrent();
61          current.$elm.empty().append(html).on($.modal.CLOSE, remove);
62          current.hideSpinner();
63          current.open();
64          el.trigger($.modal.AJAX_COMPLETE);
65        }).fail(function() {
66          el.trigger($.modal.AJAX_FAIL);
67          var current = getCurrent();
68          current.hideSpinner();
69          modals.pop(); // remove expected modal from the list
70          el.trigger($.modal.AJAX_COMPLETE);
71        });
72      }
73    } else {
74      this.$elm = el;
75      this.$body.append(this.$elm);
76      this.open();
77    }
78  };
79
80  $.modal.prototype = {
81    constructor: $.modal,
82
83    open: function() {
84      var m = this;
85      this.block();
86      if(this.options.doFade) {
87        setTimeout(function() {
88          m.show();
89        }, this.options.fadeDuration * this.options.fadeDelay);
90      } else {
91        this.show();
92      }
93      $(document).off('keydown.modal').on('keydown.modal', function(event) {
94        var current = getCurrent();
95        if (event.which == 27 && current.options.escapeClose) current.close();
96      });
97      if (this.options.clickClose)
98        this.$blocker.click(function(e) {
99          if (e.target==this)
100            $.modal.close();
101        });
102    },
103
104    close: function() {
105      modals.pop();
106      this.unblock();
107      this.hide();
108      if (!$.modal.isActive())
109        $(document).off('keydown.modal');
110    },
111
112    block: function() {
113      this.$elm.trigger($.modal.BEFORE_BLOCK, [this._ctx()]);
114      this.$body.css('overflow','hidden');
115      this.$blocker = $('<div class="jquery-modal blocker current"></div>').appendTo(this.$body);
116      selectCurrent();
117      if(this.options.doFade) {
118        this.$blocker.css('opacity',0).animate({opacity: 1}, this.options.fadeDuration);
119      }
120      this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
121    },
122
123    unblock: function(now) {
124      if (!now && this.options.doFade)
125        this.$blocker.fadeOut(this.options.fadeDuration, this.unblock.bind(this,true));
126      else {
127        this.$blocker.children().appendTo(this.$body);
128        this.$blocker.remove();
129        this.$blocker = null;
130        selectCurrent();
131        if (!$.modal.isActive())
132          this.$body.css('overflow','');
133      }
134    },
135
136    show: function() {
137      this.$elm.trigger($.modal.BEFORE_OPEN, [this._ctx()]);
138      if (this.options.showClose) {
139        this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal ' + this.options.closeClass + '">' + this.options.closeText + '</a>');
140        this.$elm.append(this.closeButton);
141      }
142      this.$elm.addClass(this.options.modalClass).appendTo(this.$blocker);
143      if(this.options.doFade) {
144        this.$elm.css('opacity',0).show().animate({opacity: 1}, this.options.fadeDuration);
145      } else {
146        this.$elm.show();
147      }
148      this.$elm.trigger($.modal.OPEN, [this._ctx()]);
149    },
150
151    hide: function() {
152      this.$elm.trigger($.modal.BEFORE_CLOSE, [this._ctx()]);
153      if (this.closeButton) this.closeButton.remove();
154      var _this = this;
155      if(this.options.doFade) {
156        this.$elm.fadeOut(this.options.fadeDuration, function () {
157          _this.$elm.trigger($.modal.AFTER_CLOSE, [_this._ctx()]);
158        });
159      } else {
160        this.$elm.hide(0, function () {
161          _this.$elm.trigger($.modal.AFTER_CLOSE, [_this._ctx()]);
162        });
163      }
164      this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
165    },
166
167    showSpinner: function() {
168      if (!this.options.showSpinner) return;
169      this.spinner = this.spinner || $('<div class="' + this.options.modalClass + '-spinner"></div>')
170        .append(this.options.spinnerHtml);
171      this.$body.append(this.spinner);
172      this.spinner.show();
173    },
174
175    hideSpinner: function() {
176      if (this.spinner) this.spinner.remove();
177    },
178
179    //Return context for custom events
180    _ctx: function() {
181      return { elm: this.$elm, $blocker: this.$blocker, options: this.options };
182    }
183  };
184
185  $.modal.close = function(event) {
186    if (!$.modal.isActive()) return;
187    if (event) event.preventDefault();
188    var current = getCurrent();
189    current.close();
190    return current.$elm;
191  };
192
193  // Returns if there currently is an active modal
194  $.modal.isActive = function () {
195    return modals.length > 0;
196  }
197
198  $.modal.defaults = {
199    closeExisting: true,
200    escapeClose: true,
201    clickClose: true,
202    closeText: 'Close',
203    closeClass: '',
204    modalClass: "modal",
205    spinnerHtml: null,
206    showSpinner: true,
207    showClose: true,
208    fadeDuration: null,   // Number of milliseconds the fade animation takes.
209    fadeDelay: 1.0        // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
210  };
211
212  // Event constants
213  $.modal.BEFORE_BLOCK = 'modal:before-block';
214  $.modal.BLOCK = 'modal:block';
215  $.modal.BEFORE_OPEN = 'modal:before-open';
216  $.modal.OPEN = 'modal:open';
217  $.modal.BEFORE_CLOSE = 'modal:before-close';
218  $.modal.CLOSE = 'modal:close';
219  $.modal.AFTER_CLOSE = 'modal:after-close';
220  $.modal.AJAX_SEND = 'modal:ajax:send';
221  $.modal.AJAX_SUCCESS = 'modal:ajax:success';
222  $.modal.AJAX_FAIL = 'modal:ajax:fail';
223  $.modal.AJAX_COMPLETE = 'modal:ajax:complete';
224
225  $.fn.modal = function(options){
226    if (this.length === 1) {
227      new $.modal(this, options);
228    }
229    return this;
230  };
231
232  // Automatically bind links with rel="modal:close" to, well, close the modal.
233  $(document).on('click.modal', 'a[rel="modal:close"]', $.modal.close);
234  $(document).on('click.modal', 'a[rel="modal:open"]', function(event) {
235    event.preventDefault();
236    $(this).modal();
237  });
238}));