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

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