GPQAPP

Форк
0
668 строк · 24.4 Кб
1
/*!
2
 * Lightbox for Bootstrap by @ashleydw
3
 * https://github.com/ashleydw/lightbox
4
 *
5
 * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
6
 */
7
+function ($) {
8

9
'use strict';
10

11
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
12

13
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
14

15
var Lightbox = (function ($) {
16

17
	var NAME = 'ekkoLightbox';
18
	var JQUERY_NO_CONFLICT = $.fn[NAME];
19

20
	var Default = {
21
		title: '',
22
		footer: '',
23
		maxWidth: 9999,
24
		maxHeight: 9999,
25
		showArrows: true, //display the left / right arrows or not
26
		wrapping: true, //if true, gallery loops infinitely
27
		type: null, //force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it
28
		alwaysShowClose: false, //always show the close button, even if there is no title
29
		loadingMessage: '<div class="ekko-lightbox-loader"><div><div></div><div></div></div></div>', // http://tobiasahlin.com/spinkit/
30
		leftArrow: '<span>&#10094;</span>',
31
		rightArrow: '<span>&#10095;</span>',
32
		strings: {
33
			close: 'Close',
34
			fail: 'Failed to load image:',
35
			type: 'Could not detect remote target type. Force the type using data-type'
36
		},
37
		doc: document, // if in an iframe can specify top.document
38
		onShow: function onShow() {},
39
		onShown: function onShown() {},
40
		onHide: function onHide() {},
41
		onHidden: function onHidden() {},
42
		onNavigate: function onNavigate() {},
43
		onContentLoaded: function onContentLoaded() {}
44
	};
45

46
	var Lightbox = (function () {
47
		_createClass(Lightbox, null, [{
48
			key: 'Default',
49

50
			/**
51
       Class properties:
52
   	 _$element: null -> the <a> element currently being displayed
53
    _$modal: The bootstrap modal generated
54
       _$modalDialog: The .modal-dialog
55
       _$modalContent: The .modal-content
56
       _$modalBody: The .modal-body
57
       _$modalHeader: The .modal-header
58
       _$modalFooter: The .modal-footer
59
    _$lightboxContainerOne: Container of the first lightbox element
60
    _$lightboxContainerTwo: Container of the second lightbox element
61
    _$lightboxBody: First element in the container
62
    _$modalArrows: The overlayed arrows container
63
   	 _$galleryItems: Other <a>'s available for this gallery
64
    _galleryName: Name of the current data('gallery') showing
65
    _galleryIndex: The current index of the _$galleryItems being shown
66
   	 _config: {} the options for the modal
67
    _modalId: unique id for the current lightbox
68
    _padding / _border: CSS properties for the modal container; these are used to calculate the available space for the content
69
   	 */
70

71
			get: function get() {
72
				return Default;
73
			}
74
		}]);
75

76
		function Lightbox($element, config) {
77
			var _this = this;
78

79
			_classCallCheck(this, Lightbox);
80

81
			this._config = $.extend({}, Default, config);
82
			this._$modalArrows = null;
83
			this._galleryIndex = 0;
84
			this._galleryName = null;
85
			this._padding = null;
86
			this._border = null;
87
			this._titleIsShown = false;
88
			this._footerIsShown = false;
89
			this._wantedWidth = 0;
90
			this._wantedHeight = 0;
91
			this._touchstartX = 0;
92
			this._touchendX = 0;
93

94
			this._modalId = 'ekkoLightbox-' + Math.floor(Math.random() * 1000 + 1);
95
			this._$element = $element instanceof jQuery ? $element : $($element);
96

97
			this._isBootstrap3 = $.fn.modal.Constructor.VERSION[0] == 3;
98

99
			var h4 = '<h4 class="modal-title">' + (this._config.title || "&nbsp;") + '</h4>';
100
			var btn = '<button type="button" class="close" data-dismiss="modal" aria-label="' + this._config.strings.close + '"><span aria-hidden="true">&times;</span></button>';
101

102
			var header = '<div class="modal-header' + (this._config.title || this._config.alwaysShowClose ? '' : ' hide') + '">' + (this._isBootstrap3 ? btn + h4 : h4 + btn) + '</div>';
103
			var footer = '<div class="modal-footer' + (this._config.footer ? '' : ' hide') + '">' + (this._config.footer || "&nbsp;") + '</div>';
104
			var body = '<div class="modal-body"><div class="ekko-lightbox-container"><div class="ekko-lightbox-item fade in show"></div><div class="ekko-lightbox-item fade"></div></div></div>';
105
			var dialog = '<div class="modal-dialog" role="document"><div class="modal-content">' + header + body + footer + '</div></div>';
106
			$(this._config.doc.body).append('<div id="' + this._modalId + '" class="ekko-lightbox modal fade" tabindex="-1" tabindex="-1" role="dialog" aria-hidden="true">' + dialog + '</div>');
107

108
			this._$modal = $('#' + this._modalId, this._config.doc);
109
			this._$modalDialog = this._$modal.find('.modal-dialog').first();
110
			this._$modalContent = this._$modal.find('.modal-content').first();
111
			this._$modalBody = this._$modal.find('.modal-body').first();
112
			this._$modalHeader = this._$modal.find('.modal-header').first();
113
			this._$modalFooter = this._$modal.find('.modal-footer').first();
114

115
			this._$lightboxContainer = this._$modalBody.find('.ekko-lightbox-container').first();
116
			this._$lightboxBodyOne = this._$lightboxContainer.find('> div:first-child').first();
117
			this._$lightboxBodyTwo = this._$lightboxContainer.find('> div:last-child').first();
118

119
			this._border = this._calculateBorders();
120
			this._padding = this._calculatePadding();
121

122
			this._galleryName = this._$element.data('gallery');
123
			if (this._galleryName) {
124
				this._$galleryItems = $(document.body).find('*[data-gallery="' + this._galleryName + '"]');
125
				this._galleryIndex = this._$galleryItems.index(this._$element);
126
				$(document).on('keydown.ekkoLightbox', this._navigationalBinder.bind(this));
127

128
				// add the directional arrows to the modal
129
				if (this._config.showArrows && this._$galleryItems.length > 1) {
130
					this._$lightboxContainer.append('<div class="ekko-lightbox-nav-overlay"><a href="#">' + this._config.leftArrow + '</a><a href="#">' + this._config.rightArrow + '</a></div>');
131
					this._$modalArrows = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay').first();
132
					this._$lightboxContainer.on('click', 'a:first-child', function (event) {
133
						event.preventDefault();
134
						return _this.navigateLeft();
135
					});
136
					this._$lightboxContainer.on('click', 'a:last-child', function (event) {
137
						event.preventDefault();
138
						return _this.navigateRight();
139
					});
140
					this.updateNavigation();
141
				}
142
			}
143

144
			this._$modal.on('show.bs.modal', this._config.onShow.bind(this)).on('shown.bs.modal', function () {
145
				_this._toggleLoading(true);
146
				_this._handle();
147
				return _this._config.onShown.call(_this);
148
			}).on('hide.bs.modal', this._config.onHide.bind(this)).on('hidden.bs.modal', function () {
149
				if (_this._galleryName) {
150
					$(document).off('keydown.ekkoLightbox');
151
					$(window).off('resize.ekkoLightbox');
152
				}
153
				_this._$modal.remove();
154
				return _this._config.onHidden.call(_this);
155
			}).modal(this._config);
156

157
			$(window).on('resize.ekkoLightbox', function () {
158
				_this._resize(_this._wantedWidth, _this._wantedHeight);
159
			});
160
			this._$lightboxContainer.on('touchstart', function () {
161
				_this._touchstartX = event.changedTouches[0].screenX;
162
			}).on('touchend', function () {
163
				_this._touchendX = event.changedTouches[0].screenX;
164
				_this._swipeGesure();
165
			});
166
		}
167

168
		_createClass(Lightbox, [{
169
			key: 'element',
170
			value: function element() {
171
				return this._$element;
172
			}
173
		}, {
174
			key: 'modal',
175
			value: function modal() {
176
				return this._$modal;
177
			}
178
		}, {
179
			key: 'navigateTo',
180
			value: function navigateTo(index) {
181

182
				if (index < 0 || index > this._$galleryItems.length - 1) return this;
183

184
				this._galleryIndex = index;
185

186
				this.updateNavigation();
187

188
				this._$element = $(this._$galleryItems.get(this._galleryIndex));
189
				this._handle();
190
			}
191
		}, {
192
			key: 'navigateLeft',
193
			value: function navigateLeft() {
194

195
				if (!this._$galleryItems) return;
196

197
				if (this._$galleryItems.length === 1) return;
198

199
				if (this._galleryIndex === 0) {
200
					if (this._config.wrapping) this._galleryIndex = this._$galleryItems.length - 1;else return;
201
				} else //circular
202
					this._galleryIndex--;
203

204
				this._config.onNavigate.call(this, 'left', this._galleryIndex);
205
				return this.navigateTo(this._galleryIndex);
206
			}
207
		}, {
208
			key: 'navigateRight',
209
			value: function navigateRight() {
210

211
				if (!this._$galleryItems) return;
212

213
				if (this._$galleryItems.length === 1) return;
214

215
				if (this._galleryIndex === this._$galleryItems.length - 1) {
216
					if (this._config.wrapping) this._galleryIndex = 0;else return;
217
				} else //circular
218
					this._galleryIndex++;
219

220
				this._config.onNavigate.call(this, 'right', this._galleryIndex);
221
				return this.navigateTo(this._galleryIndex);
222
			}
223
		}, {
224
			key: 'updateNavigation',
225
			value: function updateNavigation() {
226
				if (!this._config.wrapping) {
227
					var $nav = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay');
228
					if (this._galleryIndex === 0) $nav.find('a:first-child').addClass('disabled');else $nav.find('a:first-child').removeClass('disabled');
229

230
					if (this._galleryIndex === this._$galleryItems.length - 1) $nav.find('a:last-child').addClass('disabled');else $nav.find('a:last-child').removeClass('disabled');
231
				}
232
			}
233
		}, {
234
			key: 'close',
235
			value: function close() {
236
				return this._$modal.modal('hide');
237
			}
238

239
			// helper private methods
240
		}, {
241
			key: '_navigationalBinder',
242
			value: function _navigationalBinder(event) {
243
				event = event || window.event;
244
				if (event.keyCode === 39) return this.navigateRight();
245
				if (event.keyCode === 37) return this.navigateLeft();
246
			}
247

248
			// type detection private methods
249
		}, {
250
			key: '_detectRemoteType',
251
			value: function _detectRemoteType(src, type) {
252

253
				type = type || false;
254

255
				if (!type && this._isImage(src)) type = 'image';
256
				if (!type && this._getYoutubeId(src)) type = 'youtube';
257
				if (!type && this._getVimeoId(src)) type = 'vimeo';
258
				if (!type && this._getInstagramId(src)) type = 'instagram';
259

260
				if (!type || ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(type) < 0) type = 'url';
261

262
				return type;
263
			}
264
		}, {
265
			key: '_isImage',
266
			value: function _isImage(string) {
267
				return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
268
			}
269
		}, {
270
			key: '_containerToUse',
271
			value: function _containerToUse() {
272
				var _this2 = this;
273

274
				// if currently showing an image, fade it out and remove
275
				var $toUse = this._$lightboxBodyTwo;
276
				var $current = this._$lightboxBodyOne;
277

278
				if (this._$lightboxBodyTwo.hasClass('in')) {
279
					$toUse = this._$lightboxBodyOne;
280
					$current = this._$lightboxBodyTwo;
281
				}
282

283
				$current.removeClass('in show');
284
				setTimeout(function () {
285
					if (!_this2._$lightboxBodyTwo.hasClass('in')) _this2._$lightboxBodyTwo.empty();
286
					if (!_this2._$lightboxBodyOne.hasClass('in')) _this2._$lightboxBodyOne.empty();
287
				}, 500);
288

289
				$toUse.addClass('in show');
290
				return $toUse;
291
			}
292
		}, {
293
			key: '_handle',
294
			value: function _handle() {
295

296
				var $toUse = this._containerToUse();
297
				this._updateTitleAndFooter();
298

299
				var currentRemote = this._$element.attr('data-remote') || this._$element.attr('href');
300
				var currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false);
301

302
				if (['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(currentType) < 0) return this._error(this._config.strings.type);
303

304
				switch (currentType) {
305
					case 'image':
306
						this._preloadImage(currentRemote, $toUse);
307
						this._preloadImageByIndex(this._galleryIndex, 3);
308
						break;
309
					case 'youtube':
310
						this._showYoutubeVideo(currentRemote, $toUse);
311
						break;
312
					case 'vimeo':
313
						this._showVimeoVideo(this._getVimeoId(currentRemote), $toUse);
314
						break;
315
					case 'instagram':
316
						this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);
317
						break;
318
					case 'video':
319
						this._showHtml5Video(currentRemote, $toUse);
320
						break;
321
					default:
322
						// url
323
						this._loadRemoteContent(currentRemote, $toUse);
324
						break;
325
				}
326

327
				return this;
328
			}
329
		}, {
330
			key: '_getYoutubeId',
331
			value: function _getYoutubeId(string) {
332
				if (!string) return false;
333
				var matches = string.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
334
				return matches && matches[2].length === 11 ? matches[2] : false;
335
			}
336
		}, {
337
			key: '_getVimeoId',
338
			value: function _getVimeoId(string) {
339
				return string && string.indexOf('vimeo') > 0 ? string : false;
340
			}
341
		}, {
342
			key: '_getInstagramId',
343
			value: function _getInstagramId(string) {
344
				return string && string.indexOf('instagram') > 0 ? string : false;
345
			}
346

347
			// layout private methods
348
		}, {
349
			key: '_toggleLoading',
350
			value: function _toggleLoading(show) {
351
				show = show || false;
352
				if (show) {
353
					this._$modalDialog.css('display', 'none');
354
					this._$modal.removeClass('in show');
355
					$('.modal-backdrop').append(this._config.loadingMessage);
356
				} else {
357
					this._$modalDialog.css('display', 'block');
358
					this._$modal.addClass('in show');
359
					$('.modal-backdrop').find('.ekko-lightbox-loader').remove();
360
				}
361
				return this;
362
			}
363
		}, {
364
			key: '_calculateBorders',
365
			value: function _calculateBorders() {
366
				return {
367
					top: this._totalCssByAttribute('border-top-width'),
368
					right: this._totalCssByAttribute('border-right-width'),
369
					bottom: this._totalCssByAttribute('border-bottom-width'),
370
					left: this._totalCssByAttribute('border-left-width')
371
				};
372
			}
373
		}, {
374
			key: '_calculatePadding',
375
			value: function _calculatePadding() {
376
				return {
377
					top: this._totalCssByAttribute('padding-top'),
378
					right: this._totalCssByAttribute('padding-right'),
379
					bottom: this._totalCssByAttribute('padding-bottom'),
380
					left: this._totalCssByAttribute('padding-left')
381
				};
382
			}
383
		}, {
384
			key: '_totalCssByAttribute',
385
			value: function _totalCssByAttribute(attribute) {
386
				return parseInt(this._$modalDialog.css(attribute), 10) + parseInt(this._$modalContent.css(attribute), 10) + parseInt(this._$modalBody.css(attribute), 10);
387
			}
388
		}, {
389
			key: '_updateTitleAndFooter',
390
			value: function _updateTitleAndFooter() {
391
				var title = this._$element.data('title') || "";
392
				var caption = this._$element.data('footer') || "";
393

394
				this._titleIsShown = false;
395
				if (title || this._config.alwaysShowClose) {
396
					this._titleIsShown = true;
397
					this._$modalHeader.css('display', '').find('.modal-title').html(title || "&nbsp;");
398
				} else this._$modalHeader.css('display', 'none');
399

400
				this._footerIsShown = false;
401
				if (caption) {
402
					this._footerIsShown = true;
403
					this._$modalFooter.css('display', '').html(caption);
404
				} else this._$modalFooter.css('display', 'none');
405

406
				return this;
407
			}
408
		}, {
409
			key: '_showYoutubeVideo',
410
			value: function _showYoutubeVideo(remote, $containerForElement) {
411
				var id = this._getYoutubeId(remote);
412
				var query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : '';
413
				var width = this._$element.data('width') || 560;
414
				var height = this._$element.data('height') || width / (560 / 315);
415
				return this._showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + query, width, height, $containerForElement);
416
			}
417
		}, {
418
			key: '_showVimeoVideo',
419
			value: function _showVimeoVideo(id, $containerForElement) {
420
				var width = this._$element.data('width') || 500;
421
				var height = this._$element.data('height') || width / (560 / 315);
422
				return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement);
423
			}
424
		}, {
425
			key: '_showInstagramVideo',
426
			value: function _showInstagramVideo(id, $containerForElement) {
427
				// instagram load their content into iframe's so this can be put straight into the element
428
				var width = this._$element.data('width') || 612;
429
				var height = width + 80;
430
				id = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash
431
				$containerForElement.html('<iframe width="' + width + '" height="' + height + '" src="' + id + 'embed/" frameborder="0" allowfullscreen></iframe>');
432
				this._resize(width, height);
433
				this._config.onContentLoaded.call(this);
434
				if (this._$modalArrows) //hide the arrows when showing video
435
					this._$modalArrows.css('display', 'none');
436
				this._toggleLoading(false);
437
				return this;
438
			}
439
		}, {
440
			key: '_showVideoIframe',
441
			value: function _showVideoIframe(url, width, height, $containerForElement) {
442
				// should be used for videos only. for remote content use loadRemoteContent (data-type=url)
443
				height = height || width; // default to square
444
				$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>');
445
				this._resize(width, height);
446
				this._config.onContentLoaded.call(this);
447
				if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
448
				this._toggleLoading(false);
449
				return this;
450
			}
451
		}, {
452
			key: '_showHtml5Video',
453
			value: function _showHtml5Video(url, $containerForElement) {
454
				// should be used for videos only. for remote content use loadRemoteContent (data-type=url)
455
				var width = this._$element.data('width') || 560;
456
				var height = this._$element.data('height') || width / (560 / 315);
457
				$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><video width="' + width + '" height="' + height + '" src="' + url + '" preload="auto" autoplay controls class="embed-responsive-item"></video></div>');
458
				this._resize(width, height);
459
				this._config.onContentLoaded.call(this);
460
				if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
461
				this._toggleLoading(false);
462
				return this;
463
			}
464
		}, {
465
			key: '_loadRemoteContent',
466
			value: function _loadRemoteContent(url, $containerForElement) {
467
				var _this3 = this;
468

469
				var width = this._$element.data('width') || 560;
470
				var height = this._$element.data('height') || 560;
471

472
				var disableExternalCheck = this._$element.data('disableExternalCheck') || false;
473
				this._toggleLoading(false);
474

475
				// external urls are loading into an iframe
476
				// local ajax can be loaded into the container itself
477
				if (!disableExternalCheck && !this._isExternal(url)) {
478
					$containerForElement.load(url, $.proxy(function () {
479
						return _this3._$element.trigger('loaded.bs.modal');l;
480
					}));
481
				} else {
482
					$containerForElement.html('<iframe src="' + url + '" frameborder="0" allowfullscreen></iframe>');
483
					this._config.onContentLoaded.call(this);
484
				}
485

486
				if (this._$modalArrows) //hide the arrows when remote content
487
					this._$modalArrows.css('display', 'none');
488

489
				this._resize(width, height);
490
				return this;
491
			}
492
		}, {
493
			key: '_isExternal',
494
			value: function _isExternal(url) {
495
				var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
496
				if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) return true;
497

498
				if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(':(' + ({
499
					"http:": 80,
500
					"https:": 443
501
				})[location.protocol] + ')?$'), "") !== location.host) return true;
502

503
				return false;
504
			}
505
		}, {
506
			key: '_error',
507
			value: function _error(message) {
508
				console.error(message);
509
				this._containerToUse().html(message);
510
				this._resize(300, 300);
511
				return this;
512
			}
513
		}, {
514
			key: '_preloadImageByIndex',
515
			value: function _preloadImageByIndex(startIndex, numberOfTimes) {
516

517
				if (!this._$galleryItems) return;
518

519
				var next = $(this._$galleryItems.get(startIndex), false);
520
				if (typeof next == 'undefined') return;
521

522
				var src = next.attr('data-remote') || next.attr('href');
523
				if (next.attr('data-type') === 'image' || this._isImage(src)) this._preloadImage(src, false);
524

525
				if (numberOfTimes > 0) return this._preloadImageByIndex(startIndex + 1, numberOfTimes - 1);
526
			}
527
		}, {
528
			key: '_preloadImage',
529
			value: function _preloadImage(src, $containerForImage) {
530
				var _this4 = this;
531

532
				$containerForImage = $containerForImage || false;
533

534
				var img = new Image();
535
				if ($containerForImage) {
536
					(function () {
537

538
						// if loading takes > 200ms show a loader
539
						var loadingTimeout = setTimeout(function () {
540
							$containerForImage.append(_this4._config.loadingMessage);
541
						}, 200);
542

543
						img.onload = function () {
544
							if (loadingTimeout) clearTimeout(loadingTimeout);
545
							loadingTimeout = null;
546
							var image = $('<img />');
547
							image.attr('src', img.src);
548
							image.addClass('img-fluid');
549

550
							// backward compatibility for bootstrap v3
551
							image.css('width', '100%');
552

553
							$containerForImage.html(image);
554
							if (_this4._$modalArrows) _this4._$modalArrows.css('display', ''); // remove display to default to css property
555

556
							_this4._resize(img.width, img.height);
557
							_this4._toggleLoading(false);
558
							return _this4._config.onContentLoaded.call(_this4);
559
						};
560
						img.onerror = function () {
561
							_this4._toggleLoading(false);
562
							return _this4._error(_this4._config.strings.fail + ('  ' + src));
563
						};
564
					})();
565
				}
566

567
				img.src = src;
568
				return img;
569
			}
570
		}, {
571
			key: '_swipeGesure',
572
			value: function _swipeGesure() {
573
				if (this._touchendX < this._touchstartX) {
574
					return this.navigateRight();
575
				}
576
				if (this._touchendX > this._touchstartX) {
577
					return this.navigateLeft();
578
				}
579
			}
580
		}, {
581
			key: '_resize',
582
			value: function _resize(width, height) {
583

584
				height = height || width;
585
				this._wantedWidth = width;
586
				this._wantedHeight = height;
587

588
				var imageAspecRatio = width / height;
589

590
				// if width > the available space, scale down the expected width and height
591
				var widthBorderAndPadding = this._padding.left + this._padding.right + this._border.left + this._border.right;
592

593
				// force 10px margin if window size > 575px
594
				var addMargin = this._config.doc.body.clientWidth > 575 ? 20 : 0;
595
				var discountMargin = this._config.doc.body.clientWidth > 575 ? 0 : 20;
596

597
				var maxWidth = Math.min(width + widthBorderAndPadding, this._config.doc.body.clientWidth - addMargin, this._config.maxWidth);
598

599
				if (width + widthBorderAndPadding > maxWidth) {
600
					height = (maxWidth - widthBorderAndPadding - discountMargin) / imageAspecRatio;
601
					width = maxWidth;
602
				} else width = width + widthBorderAndPadding;
603

604
				var headerHeight = 0,
605
				    footerHeight = 0;
606

607
				// as the resize is performed the modal is show, the calculate might fail
608
				// if so, default to the default sizes
609
				if (this._footerIsShown) footerHeight = this._$modalFooter.outerHeight(true) || 55;
610

611
				if (this._titleIsShown) headerHeight = this._$modalHeader.outerHeight(true) || 67;
612

613
				var borderPadding = this._padding.top + this._padding.bottom + this._border.bottom + this._border.top;
614

615
				//calculated each time as resizing the window can cause them to change due to Bootstraps fluid margins
616
				var margins = parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom'));
617

618
				var maxHeight = Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight, this._config.maxHeight - borderPadding - headerHeight - footerHeight);
619

620
				if (height > maxHeight) {
621
					// if height > the available height, scale down the width
622
					width = Math.ceil(maxHeight * imageAspecRatio) + widthBorderAndPadding;
623
				}
624

625
				this._$lightboxContainer.css('height', maxHeight);
626
				this._$modalDialog.css('flex', 1).css('maxWidth', width);
627

628
				var modal = this._$modal.data('bs.modal');
629
				if (modal) {
630
					// v4 method is mistakenly protected
631
					try {
632
						modal._handleUpdate();
633
					} catch (Exception) {
634
						modal.handleUpdate();
635
					}
636
				}
637
				return this;
638
			}
639
		}], [{
640
			key: '_jQueryInterface',
641
			value: function _jQueryInterface(config) {
642
				var _this5 = this;
643

644
				config = config || {};
645
				return this.each(function () {
646
					var $this = $(_this5);
647
					var _config = $.extend({}, Lightbox.Default, $this.data(), typeof config === 'object' && config);
648

649
					new Lightbox(_this5, _config);
650
				});
651
			}
652
		}]);
653

654
		return Lightbox;
655
	})();
656

657
	$.fn[NAME] = Lightbox._jQueryInterface;
658
	$.fn[NAME].Constructor = Lightbox;
659
	$.fn[NAME].noConflict = function () {
660
		$.fn[NAME] = JQUERY_NO_CONFLICT;
661
		return Lightbox._jQueryInterface;
662
	};
663

664
	return Lightbox;
665
})(jQuery);
666
//# sourceMappingURL=ekko-lightbox.js.map
667

668
}(jQuery);
669

Использование cookies

Мы используем файлы cookie в соответствии с Политикой конфиденциальности и Политикой использования cookies.

Нажимая кнопку «Принимаю», Вы даете АО «СберТех» согласие на обработку Ваших персональных данных в целях совершенствования нашего веб-сайта и Сервиса GitVerse, а также повышения удобства их использования.

Запретить использование cookies Вы можете самостоятельно в настройках Вашего браузера.