https://spets-santehnika.ru/g/libs/jquery-popover/0.0.4/jquery.popover.js

1/*
2 ** Определяет глобальную переменную myo
3 **
4 ** Пример использования:
5 **      myo.open({html: '<strong>hellow world</strong>'} );
6 **      myo.open({text: 'hellow world'});
7 **      myo.open({elem: '#content'});
8 **      myo.open({ajax: '/url'});
9 **      myo.open({iframe: '/url'});
10 **
11 ** Дополнительные опции:
12 **      wrapClass - класс для обертки всплывающего окна
13 **      width - ширина для обертки всплывающего окна
14 **      data - объект, передача данных для ajax и iframe
15 **
16 ** Коллбеки: beforeOpen, afterOpen, beforeClose, afterClose, onLoad (для ajax и iframe)
17 ** для ф-ции beforeOpen, afterOpen, beforeClose, afterClose первым аргументом передается
18 ** объект всплывающего окна. В нем есть свойства bodyDiv, wrapDiv и т.д.
19 */
20
21/* правим функцию requestAnimationFrame */
22var myo = (function(window, document, undefined) {
23	var
24		$win = $(window),
25		stack = [],
26		isInited = false,
27		isOpened = false,
28		containerDiv = null,
29		dimDiv = null,
30		scrollLeft,
31		Wins;
32
33	Wins = {
34		open: function(options) {
35			var win = new PopoverWin(options);
36
37			if (!isInited) init();
38			if (!isOpened) showDim();
39			if (stack.length) Wins.winLast().disable();
40
41			stack.push(win);
42			win.scrollDiv.appendTo(containerDiv);
43
44			if (stack.length === 1) freezeBody();
45
46			win.open();
47			isOpened = true;
48		},
49		close: function( callback ) {
50			if (stack.length) {
51				Wins.winLast().close();
52				stack.pop();
53			};
54
55			if (!stack.length) {
56				hideDim();
57				isOpened = false;
58				unfreezeBody();
59			} else {
60				Wins.winLast().enable();
61			}
62		},
63		winLast: function () {
64			return stack[stack.length-1];
65		},
66		winFirst: function () {
67			return stack[0];
68		},
69		win: function (ind) {
70			return stack[ind];
71		}
72	};
73
74
75	/* конструктор окон */
76	{
77		PopoverWin = function ( options ) {
78			this.options = options || {};
79			this.scrollDiv;
80			this.wrapDiv;
81			this.bodyDiv;
82			this.loadDiv;
83			this.closDiv;
84			this.isHidden;
85			this.timerId;
86			this.init();
87		};
88		PopoverWin.prototype.init = function() {
89			var self = this;
90
91			self.scrollDiv = $('<div class="popover-scrolling"></div>');
92			self.wrapDiv = $('<div class="popover-wrap"></div>').appendTo(self.scrollDiv);
93			self.bodyDiv = $('<div class="popover-body"></div>').appendTo(self.wrapDiv);
94			self.loadDiv = $('<div class="popover-loader"></div>').appendTo(self.wrapDiv);
95			self.closDiv = $('<div class="popover-close"></div>').appendTo(self.wrapDiv);
96
97			self.scrollDiv.on("click", function (e) {
98				if (e.eventPhase===2 || $(e.target).is(self.scrollDiv)) Wins.close();
99			});
100			self.closDiv.on("click", function (){ Wins.close(); });
101			self.loadDiv.on("click", function (){ Wins.close(); });
102		};
103		PopoverWin.prototype.enable = function() {
104			this.scrollDiv.removeClass("disable");
105		};
106		PopoverWin.prototype.disable = function() {
107			this.scrollDiv.addClass("disable");
108		};
109		PopoverWin.prototype.open = function() {
110			var
111				self = this,
112				options = this.options,
113				width = options.width || null,
114				html = options.html || null,
115				text = options.text || null,
116				elem = options.elem || null,
117				wrapClass = options.wrapClass || null,
118				ajax = options.ajax || null,
119				json = options.json || null,
120				data = options.data || {},
121				iframe = options.iframe || null,
122				onLoad = options.onLoad || null,
123				beforeOpen = options.beforeOpen || null,
124				afterOpen = options.afterOpen || null;
125
126			if (wrapClass) self.wrapDiv.addClass(wrapClass);
127			if (width) self.wrapDiv.width(width);
128
129			if (html) {
130				self.bodyDiv.html(html);
131			} else if (text) {
132				self.bodyDiv.text(text);
133			} else if (elem) {
134				self.htmlElem = elem = $(elem);
135				self.bodyDiv.append(elem.contents());
136			} else if (json) {
137				self.loadDiv.show();
138				$.ajax({
139					url: json,
140					dataType: 'json',
141					data: data,
142					success: function (data) {
143						var args = Array.prototype.slice.call(arguments,0);
144
145						self.loadDiv.hide();
146						if (data.result && data.result.html) {
147							self.bodyDiv.html(data.result.html);
148						}
149
150						if (onLoad && $.isFunction(onLoad)) {
151							onLoad.apply(self, args);
152						};
153					},
154					error: function (jqXHR, textStatus, errorThrown) {
155						self.loadDiv.hide();
156						self.bodyDiv.html(textStatus);
157					}
158				});
159			} else if (ajax) {
160				self.loadDiv.show();
161				$.ajax({
162					url: ajax,
163					data: data,
164					success: function (data) {
165						var args = Array.prototype.slice.call(arguments,0);
166
167						self.loadDiv.hide();
168						if (typeof data === 'object') {
169							// xapi
170							data = data.result.html;
171						}
172						self.bodyDiv.html(data);
173
174						if (onLoad && $.isFunction(onLoad)) {
175							onLoad.apply(self, args);
176						};
177					},
178					error: function (jqXHR, textStatus, errorThrown) {
179						self.loadDiv.hide();
180						self.bodyDiv.html(textStatus);
181					}
182				});
183			} else if (iframe) {
184				(function () {
185					var data_arr, key;
186
187					data_arr = ["iframe=1"];
188
189					for (key in data) {
190						if (data.hasOwnProperty(key)) {
191							data_arr.push(key + "=" + encodeURI(data[key]));
192						};
193					}
194
195					function onIframeLoad () {
196						var win, doc;
197
198						try {
199							win = iframeElem.contentWindow || iframeElem.contentDocument.parentWindow;
200							doc = win.document;
201
202							if (width) {
203								width = width -
204								parseInt(self.bodyDiv.css("padding-left"), 10) -
205								parseInt(self.bodyDiv.css("padding-left"), 10) -
206								parseInt(self.bodyDiv.css("border-left-width"), 10) -
207								parseInt(self.bodyDiv.css("border-right-width"), 10);
208								iframeElem.width = width;
209							}
210
211							function getDimension (name) {
212								var arr = ["scroll", "client", "offset"],
213									i,
214									value = 0,
215									propertyName;
216
217								for (i = arr.length - 1; i >= 0; i--) {
218									value = Math.max(value, (doc.documentElement[ arr[i] + name ] || 0), (doc.body[ arr[i] + name ] || 0));
219								};
220
221								return value;
222							}
223
224							function setWidthHeight () {
225								clearTimeout(self.iframeTimerId);
226								self.iframeTimerId = setTimeout(function () {
227									var frameWidth = getDimension("Width"),
228										frameHeight = getDimension("Height");
229
230									if (frameHeight > 0) iframeElem.height = frameHeight;
231									if (!width && frameWidth > 0) iframeElem.width = frameWidth;
232
233									requestAnimationFrame(setWidthHeight);
234								}, 1000);
235							}
236							setWidthHeight();
237
238						} catch (e) {
239							self.bodyDiv.html("<h4>" + e.name + "</h4><p>" + e.message + "</p>");
240						} finally {
241							self.loadDiv.hide();
242							iframeElem.style.visibility = "visible";
243							if (onLoad && $.isFunction(onLoad)) {
244								onLoad.call(self, iframeElem);
245							};
246						}
247					};
248
249					iframeElem = document.createElement("iframe");
250					iframeElem.frameBorder = 0;
251					iframeElem.src = iframe + "?" + data_arr.join("&");
252					iframeElem.style.visible = "hidden";
253					iframeElem.onload = onIframeLoad;
254
255					self.bodyDiv.html(iframeElem);
256					self.loadDiv.show();
257				}());
258			};
259
260			if ($.isFunction(beforeOpen)) {
261				beforeOpen.call(self);
262			};
263
264			self.scrollDiv.show();
265			self.wrapDiv.fadeIn(300, function () {
266				self.isOpened = true;
267				if ($.isFunction(afterOpen)) {
268					afterOpen.call(self);
269				};
270			});
271		};
272		PopoverWin.prototype.close = function() {
273			var options = this.options,
274				beforeClose = options.beforeClose || null,
275				afterClose = options.afterClose || null;
276
277			if ($.isFunction(beforeClose)) {
278				beforeClose.call(this);
279			};
280			if (this.htmlElem) {
281				this.bodyDiv.contents().appendTo(this.htmlElem);
282				this.htmlElem = false;

283			} else {
284				this.bodyDiv.empty();
285			}
286			if (options.iframe) {
287				clearTimeout(this.iframeTimerId);
288			}
289			this.scrollDiv.hide();
290			this.scrollDiv.remove();
291			this.isOpened = false;
292			if ($.isFunction(afterClose)) {
293				afterClose.call(this);
294			};
295		};
296	}
297
298
299	/* вспомогательные функции */
300
301	function init () {
302
303		containerDiv = $('<div class="popover-container" id="popover-container"></div>').appendTo("body");
304		dimDiv = $('<div class="popover-dim"></div>').appendTo(containerDiv);
305
306		dimDiv.on("click", Wins.close);
307
308		$(document).on("keydown", function (e) {
309			if (e.keyCode===27 && isOpened) {
310				Wins.close();
311			};
312		});
313
314		isInited = true;
315	}
316	function showDim () {
317		if (!dimDiv.length) return false;
318
319		dimDiv.css("display", "block").stop().animate({opacity: 0.5}, 100);
320	}
321	function hideDim () {
322		if (!dimDiv.length) return false;
323
324		dimDiv.stop().animate({opacity: 0}, 100, function() {
325			dimDiv.css("display", "none");
326		});
327	}
328	function freezeBody () {
329		var scrollLeftOld, scrollLeftNew, docWidth, deltaWidth;
330
331		scrollLeftOld = Math.max( document.documentElement.scrollLeft, document.body.scrollLeft);
332		docWidth = document.documentElement.clientWidth;
333		document.documentElement.style.overflow = "visible";
334		document.body.style.overflow = "hidden";
335		deltaWidth = document.documentElement.clientWidth - docWidth;
336		scrollLeftNew = Math.max( document.documentElement.scrollLeft, document.body.scrollLeft);
337		scrollLeft = scrollLeftOld-scrollLeftNew;
338
339		document.body.style.borderRight = deltaWidth + "px" + " solid transparent";
340		window.scrollBy(scrollLeftOld-scrollLeftNew, 0);
341
342		document.body.scrollLeft += 1;  // fix repaint
343		document.body.scrollLeft += -1; // in chrome
344	}
345	function unfreezeBody () {
346		document.documentElement.style.overflow = "";
347		document.body.style.overflow = "";
348		document.body.style.borderRight = "";
349		window.scrollBy(scrollLeft, 0);
350	}
351
352	return Wins;
353}(window, document));
354
355
356(function() {
357	var lastTime = 0;
358	var vendors = ['ms', 'moz', 'webkit', 'o'];
359	for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
360		window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
361		window.cancelAnimationFrame  = window[vendors[x]+'CancelAnimationFrame']
362		|| window[vendors[x]+'CancelRequestAnimationFrame'];
363	}
364
365	if (!window.requestAnimationFrame)
366		window.requestAnimationFrame = function(callback, element) {
367			var currTime = new Date().getTime();
368			var timeToCall = Math.max(0, 16 - (currTime - lastTime));
369			var id = window.setTimeout(function() { callback(currTime + timeToCall); },
370				timeToCall);
371			lastTime = currTime + timeToCall;
372			return id;
373		};
374
375	if (!window.cancelAnimationFrame)
376		window.cancelAnimationFrame = function(id) {
377			clearTimeout(id);
378		};
379}());