https://druck-werkstatt.ch/public/js/jquery.modal.js

1/*
2    A simple jQuery modal (http://github.com/kylefox/jquery-modal)
3    Version 0.5.5
4    2015.02.18 : Animation
5*/
6(function($) {
7
8  var current = null;
9
10  $.modal = function(el, options) {
11    $.modal.close(); // Close any open modals.
12    var remove, target;
13    this.$body = $('body');
14    this.options = $.extend({}, $.modal.defaults, options);
15    this.options.doFade = !isNaN(parseInt(this.options.fadeDuration, 10));
16    if (el.is('a')) {
17      target = el.attr('href');
18      //Select element by id from href
19      if (/^#/.test(target)) {
20        this.$elm = $(target);
21        if (this.$elm.length !== 1) return null;
22        this.open();
23      //AJAX
24      } else {
25        this.$elm = $('<div>');
26        this.$body.append(this.$elm);
27        remove = function(event, modal) { modal.elm.remove(); };
28        this.showSpinner();
29        el.trigger($.modal.AJAX_SEND);
30        $.get(target).done(function(html) {
31          if (!current) return;
32          el.trigger($.modal.AJAX_SUCCESS);
33          current.$elm.empty().append(html).on($.modal.CLOSE, remove);
34          current.hideSpinner();
35          current.open();
36          el.trigger($.modal.AJAX_COMPLETE);
37        }).fail(function() {
38          el.trigger($.modal.AJAX_FAIL);
39          current.hideSpinner();
40          el.trigger($.modal.AJAX_COMPLETE);
41        });
42      }
43    } else {
44      this.$elm = el;
45      this.$body.append(this.$elm);
46      this.open();
47    }
48  };
49
50  $.modal.prototype = {
51    constructor: $.modal,
52
53    open: function() {
54      var m = this;
55      if(this.options.doFade) {
56        this.block();
57        setTimeout(function() {
58          m.show();
59        }, this.options.fadeDuration * this.options.fadeDelay);
60      } else {
61        this.block();
62        this.show();
63      }
64      if (this.options.escapeClose) {
65        $(document).on('keydown.modal', function(event) {
66          if (event.which == 27) $.modal.close();
67        });
68      }
69      if (this.options.clickClose) this.blocker.click($.modal.close);
70    },
71
72    close: function() {
73      this.unblock();
74      this.hide();
75      $(document).off('keydown.modal');
76    },
77
78    block: function() {
79      var initialOpacity = this.options.doFade ? 0 : this.options.opacity;
80      this.$elm.trigger($.modal.BEFORE_BLOCK, [this._ctx()]);
81      this.blocker = $('<div class="jquery-modal blocker"></div>').css({
82        top: 0, right: 0, bottom: 0, left: 0,
83        width: "100%", height: "100%",
84        position: "fixed",
85        zIndex: this.options.zIndex,
86        background: this.options.overlay,
87        opacity: initialOpacity
88      });
89      this.$body.append(this.blocker);
90      if(this.options.doFade) {
91        this.blocker.animate({opacity: this.options.opacity}, this.options.fadeDuration);
92      }
93      this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
94    },
95
96    unblock: function() {
97      if(this.options.doFade) {
98        this.blocker.fadeOut(this.options.fadeDuration, function() {
99          $(this).remove();
100        });
101      } else {
102        this.blocker.remove();
103      }
104    },
105
106    show: function() {
107      this.$elm.trigger($.modal.BEFORE_OPEN, [this._ctx()]);
108      if (this.options.showClose) {
109        this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal ' + this.options.closeClass + '">' + this.options.closeText + '</a>');
110        this.$elm.append(this.closeButton);
111      }
112      this.$elm.addClass(this.options.modalClass + ' current');
113      this.center();
114      if(this.options.doFade) {
115        this.$elm.fadeIn(this.options.fadeDuration);
116        this.modalanimate();
117      } else {
118        this.$elm.show();
119        this.modalanimate();
120      }
121      this.$elm.trigger($.modal.OPEN, [this._ctx()]);
122    },
123
124    hide: function() {
125      this.$elm.trigger($.modal.BEFORE_CLOSE, [this._ctx()]);
126      if (this.closeButton) this.closeButton.remove();
127      this.$elm.removeClass('current');
128
129      if(this.options.doFade) {
130        this.$elm.fadeOut(this.options.fadeDuration);
131      } else {
132        this.$elm.hide();
133      }
134      this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
135    },
136
137    showSpinner: function() {
138      if (!this.options.showSpinner) return;
139      this.spinner = this.spinner || $('<div class="' + this.options.modalClass + '-spinner"></div>')
140        .append(this.options.spinnerHtml);
141      this.$body.append(this.spinner);
142      this.spinner.show();
143    },
144
145    hideSpinner: function() {
146      if (this.spinner) this.spinner.remove();
147    },
148
149    center: function() {
150
151      this.$elm.css({
152        position: 'fixed',
153        top: "0",
154        left: "50%",
155        //marginTop: - (this.$elm.outerHeight() / 2),
156        marginTop: - (this.$elm.outerHeight()),
157        marginLeft: - (this.$elm.outerWidth() / 2),
158        opacity: 0.1,
159        zIndex: this.options.zIndex + 1
160      });
161
162      
163    },
164
165    modalanimate: function() {
166       this.$elm.animate({opacity: 1, top: "50%", marginTop: - (this.$elm.outerHeight() / 2)}, this.options.positionDuration);
167    },
168
169    //Return context for custom events
170    _ctx: function() {
171      return { elm: this.$elm, blocker: this.blocker, options: this.options };
172    }
173  };
174
175  //resize is alias for center for now
176  $.modal.prototype.resize = $.modal.prototype.center;
177
178  $.modal.close = function(event) {
179    if (!current) return;
180    if (event) event.preventDefault();
181    current.close();
182    var that = current.$elm;
183    current = null;
184    return that;
185  };
186
187  $.modal.resize = function() {
188    if (!current) return;
189    current.resize();
190  };
191
192  // Returns if there currently is an active modal
193  $.modal.isActive = function () {
194    return current ? true : false;

195  }
196
197  $.modal.defaults = {
198    overlay: "#000",
199    opacity: 0.75,
200    zIndex: 10000,
201    escapeClose: true,
202    clickClose: true,
203    closeText: 'Close',
204    closeClass: '',
205    modalClass: "modal",
206    spinnerHtml: null,
207    showSpinner: true,
208    showClose: true,
209    positionDuration: 500,   // position animation
210    fadeDuration: null,   // Number of milliseconds the fade animation takes.
211    fadeDelay: 1.0        // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
212  };
213
214  // Event constants
215  $.modal.BEFORE_BLOCK = 'modal:before-block';
216  $.modal.BLOCK = 'modal:block';
217  $.modal.BEFORE_OPEN = 'modal:before-open';
218  $.modal.OPEN = 'modal:open';
219  $.modal.BEFORE_CLOSE = 'modal:before-close';
220  $.modal.CLOSE = 'modal:close';
221  $.modal.AJAX_SEND = 'modal:ajax:send';
222  $.modal.AJAX_SUCCESS = 'modal:ajax:success';
223  $.modal.AJAX_FAIL = 'modal:ajax:fail';
224  $.modal.AJAX_COMPLETE = 'modal:ajax:complete';
225
226  $.fn.modal = function(options){
227    if (this.length === 1) {
228      current = new $.modal(this, options);
229    }
230    return this;
231  };
232
233  // Automatically bind links with rel="modal:close" to, well, close the modal.
234  $(document).on('click.modal', 'a[rel="modal:close"]', $.modal.close);
235  $(document).on('click.modal', 'a[rel="modal:open"]', function(event) {
236    event.preventDefault();
237    $(this).modal();
238  });
239})(jQuery);