Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695
  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. 'use strict';
  9. var _createClass = (function () {
  10. function defineProperties(target, props) {
  11. for (var i = 0; i < props.length; i++) {
  12. var descriptor = props[i];
  13. descriptor.enumerable = descriptor.enumerable || false;
  14. descriptor.configurable = true;
  15. if ('value' in descriptor) descriptor.writable = true;
  16. Object.defineProperty(target, descriptor.key, descriptor);
  17. }
  18. }
  19. return function (Constructor, protoProps, staticProps) {
  20. if (protoProps) defineProperties(Constructor.prototype, protoProps);
  21. if (staticProps) defineProperties(Constructor, staticProps);
  22. return Constructor;
  23. };
  24. })();
  25. function _classCallCheck(instance, Constructor) {
  26. if (!(instance instanceof Constructor)) {
  27. throw new TypeError('Cannot call a class as a function');
  28. }
  29. }
  30. var Lightbox = (function ($) {
  31. var NAME = 'ekkoLightbox';
  32. var JQUERY_NO_CONFLICT = $.fn[NAME];
  33. var Default = {
  34. title: '',
  35. footer: '',
  36. maxWidth: 9999,
  37. maxHeight: 9999,
  38. showArrows: true, //display the left / right arrows or not
  39. wrapping: true, //if true, gallery loops infinitely
  40. type: null, //force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it
  41. alwaysShowClose: false, //always show the close button, even if there is no title
  42. loadingMessage: '<div class="ekko-lightbox-loader"><div><div></div><div></div></div></div>', // http://tobiasahlin.com/spinkit/
  43. leftArrow: '<span>&#10094;</span>',
  44. rightArrow: '<span>&#10095;</span>',
  45. strings: {
  46. close: 'Close',
  47. fail: 'Failed to load image:',
  48. type: 'Could not detect remote target type. Force the type using data-type'
  49. },
  50. doc: document, // if in an iframe can specify top.document
  51. onShow: function onShow() {
  52. },
  53. onShown: function onShown() {
  54. },
  55. onHide: function onHide() {
  56. },
  57. onHidden: function onHidden() {
  58. },
  59. onNavigate: function onNavigate() {
  60. },
  61. onContentLoaded: function onContentLoaded() {
  62. }
  63. };
  64. var Lightbox = (function () {
  65. _createClass(Lightbox, null, [{
  66. key: 'Default',
  67. /**
  68. Class properties:
  69. _$element: null -> the <a> element currently being displayed
  70. _$modal: The bootstrap modal generated
  71. _$modalDialog: The .modal-dialog
  72. _$modalContent: The .modal-content
  73. _$modalBody: The .modal-body
  74. _$modalHeader: The .modal-header
  75. _$modalFooter: The .modal-footer
  76. _$lightboxContainerOne: Container of the first lightbox element
  77. _$lightboxContainerTwo: Container of the second lightbox element
  78. _$lightboxBody: First element in the container
  79. _$modalArrows: The overlayed arrows container
  80. _$galleryItems: Other <a>'s available for this gallery
  81. _galleryName: Name of the current data('gallery') showing
  82. _galleryIndex: The current index of the _$galleryItems being shown
  83. _config: {} the options for the modal
  84. _modalId: unique id for the current lightbox
  85. _padding / _border: CSS properties for the modal container; these are used to calculate the available space for the content
  86. */
  87. get: function get() {
  88. return Default;
  89. }
  90. }]);
  91. function Lightbox($element, config) {
  92. var _this = this;
  93. _classCallCheck(this, Lightbox);
  94. this._config = $.extend({}, Default, config);
  95. this._$modalArrows = null;
  96. this._galleryIndex = 0;
  97. this._galleryName = null;
  98. this._padding = null;
  99. this._border = null;
  100. this._titleIsShown = false;
  101. this._footerIsShown = false;
  102. this._wantedWidth = 0;
  103. this._wantedHeight = 0;
  104. this._touchstartX = 0;
  105. this._touchendX = 0;
  106. this._modalId = 'ekkoLightbox-' + Math.floor(Math.random() * 1000 + 1);
  107. this._$element = $element instanceof jQuery ? $element : $($element);
  108. this._isBootstrap3 = $.fn.modal.Constructor.VERSION[0] == 3;
  109. var h4 = '<h4 class="modal-title">' + (this._config.title || "&nbsp;") + '</h4>';
  110. var btn = '<button type="button" class="close" data-dismiss="modal" aria-label="' + this._config.strings.close + '"><span aria-hidden="true">&times;</span></button>';
  111. var header = '<div class="modal-header' + (this._config.title || this._config.alwaysShowClose ? '' : ' hide') + '">' + (this._isBootstrap3 ? btn + h4 : h4 + btn) + '</div>';
  112. var footer = '<div class="modal-footer' + (this._config.footer ? '' : ' hide') + '">' + (this._config.footer || "&nbsp;") + '</div>';
  113. 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>';
  114. var dialog = '<div class="modal-dialog" role="document"><div class="modal-content">' + header + body + footer + '</div></div>';
  115. $(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>');
  116. this._$modal = $('#' + this._modalId, this._config.doc);
  117. this._$modalDialog = this._$modal.find('.modal-dialog').first();
  118. this._$modalContent = this._$modal.find('.modal-content').first();
  119. this._$modalBody = this._$modal.find('.modal-body').first();
  120. this._$modalHeader = this._$modal.find('.modal-header').first();
  121. this._$modalFooter = this._$modal.find('.modal-footer').first();
  122. this._$lightboxContainer = this._$modalBody.find('.ekko-lightbox-container').first();
  123. this._$lightboxBodyOne = this._$lightboxContainer.find('> div:first-child').first();
  124. this._$lightboxBodyTwo = this._$lightboxContainer.find('> div:last-child').first();
  125. this._border = this._calculateBorders();
  126. this._padding = this._calculatePadding();
  127. this._galleryName = this._$element.data('gallery');
  128. if (this._galleryName) {
  129. this._$galleryItems = $(document.body).find('*[data-gallery="' + this._galleryName + '"]');
  130. this._galleryIndex = this._$galleryItems.index(this._$element);
  131. $(document).on('keydown.ekkoLightbox', this._navigationalBinder.bind(this));
  132. // add the directional arrows to the modal
  133. if (this._config.showArrows && this._$galleryItems.length > 1) {
  134. this._$lightboxContainer.append('<div class="ekko-lightbox-nav-overlay"><a href="#">' + this._config.leftArrow + '</a><a href="#">' + this._config.rightArrow + '</a></div>');
  135. this._$modalArrows = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay').first();
  136. this._$lightboxContainer.on('click', 'a:first-child', function (event) {
  137. event.preventDefault();
  138. return _this.navigateLeft();
  139. });
  140. this._$lightboxContainer.on('click', 'a:last-child', function (event) {
  141. event.preventDefault();
  142. return _this.navigateRight();
  143. });
  144. this.updateNavigation();
  145. }
  146. }
  147. this._$modal.on('show.bs.modal', this._config.onShow.bind(this)).on('shown.bs.modal', function () {
  148. _this._toggleLoading(true);
  149. _this._handle();
  150. return _this._config.onShown.call(_this);
  151. }).on('hide.bs.modal', this._config.onHide.bind(this)).on('hidden.bs.modal', function () {
  152. if (_this._galleryName) {
  153. $(document).off('keydown.ekkoLightbox');
  154. $(window).off('resize.ekkoLightbox');
  155. }
  156. _this._$modal.remove();
  157. return _this._config.onHidden.call(_this);
  158. }).modal(this._config);
  159. $(window).on('resize.ekkoLightbox', function () {
  160. _this._resize(_this._wantedWidth, _this._wantedHeight);
  161. });
  162. this._$lightboxContainer.on('touchstart', function () {
  163. _this._touchstartX = event.changedTouches[0].screenX;
  164. }).on('touchend', function () {
  165. _this._touchendX = event.changedTouches[0].screenX;
  166. _this._swipeGesure();
  167. });
  168. }
  169. _createClass(Lightbox, [{
  170. key: 'element',
  171. value: function element() {
  172. return this._$element;
  173. }
  174. }, {
  175. key: 'modal',
  176. value: function modal() {
  177. return this._$modal;
  178. }
  179. }, {
  180. key: 'navigateTo',
  181. value: function navigateTo(index) {
  182. if (index < 0 || index > this._$galleryItems.length - 1) return this;
  183. this._galleryIndex = index;
  184. this.updateNavigation();
  185. this._$element = $(this._$galleryItems.get(this._galleryIndex));
  186. this._handle();
  187. }
  188. }, {
  189. key: 'navigateLeft',
  190. value: function navigateLeft() {
  191. if (!this._$galleryItems) return;
  192. if (this._$galleryItems.length === 1) return;
  193. if (this._galleryIndex === 0) {
  194. if (this._config.wrapping) this._galleryIndex = this._$galleryItems.length - 1; else return;
  195. } else //circular
  196. this._galleryIndex--;
  197. this._config.onNavigate.call(this, 'left', this._galleryIndex);
  198. return this.navigateTo(this._galleryIndex);
  199. }
  200. }, {
  201. key: 'navigateRight',
  202. value: function navigateRight() {
  203. if (!this._$galleryItems) return;
  204. if (this._$galleryItems.length === 1) return;
  205. if (this._galleryIndex === this._$galleryItems.length - 1) {
  206. if (this._config.wrapping) this._galleryIndex = 0; else return;
  207. } else //circular
  208. this._galleryIndex++;
  209. this._config.onNavigate.call(this, 'right', this._galleryIndex);
  210. return this.navigateTo(this._galleryIndex);
  211. }
  212. }, {
  213. key: 'updateNavigation',
  214. value: function updateNavigation() {
  215. if (!this._config.wrapping) {
  216. var $nav = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay');
  217. if (this._galleryIndex === 0) $nav.find('a:first-child').addClass('disabled'); else $nav.find('a:first-child').removeClass('disabled');
  218. if (this._galleryIndex === this._$galleryItems.length - 1) $nav.find('a:last-child').addClass('disabled'); else $nav.find('a:last-child').removeClass('disabled');
  219. }
  220. }
  221. }, {
  222. key: 'close',
  223. value: function close() {
  224. return this._$modal.modal('hide');
  225. }
  226. // helper private methods
  227. }, {
  228. key: '_navigationalBinder',
  229. value: function _navigationalBinder(event) {
  230. event = event || window.event;
  231. if (event.keyCode === 39) return this.navigateRight();
  232. if (event.keyCode === 37) return this.navigateLeft();
  233. }
  234. // type detection private methods
  235. }, {
  236. key: '_detectRemoteType',
  237. value: function _detectRemoteType(src, type) {
  238. type = type || false;
  239. if (!type && this._isImage(src)) type = 'image';
  240. if (!type && this._getYoutubeId(src)) type = 'youtube';
  241. if (!type && this._getVimeoId(src)) type = 'vimeo';
  242. if (!type && this._getInstagramId(src)) type = 'instagram';
  243. if (!type || ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(type) < 0) type = 'url';
  244. return type;
  245. }
  246. }, {
  247. key: '_isImage',
  248. value: function _isImage(string) {
  249. return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
  250. }
  251. }, {
  252. key: '_containerToUse',
  253. value: function _containerToUse() {
  254. var _this2 = this;
  255. // if currently showing an image, fade it out and remove
  256. var $toUse = this._$lightboxBodyTwo;
  257. var $current = this._$lightboxBodyOne;
  258. if (this._$lightboxBodyTwo.hasClass('in')) {
  259. $toUse = this._$lightboxBodyOne;
  260. $current = this._$lightboxBodyTwo;
  261. }
  262. $current.removeClass('in show');
  263. setTimeout(function () {
  264. if (!_this2._$lightboxBodyTwo.hasClass('in')) _this2._$lightboxBodyTwo.empty();
  265. if (!_this2._$lightboxBodyOne.hasClass('in')) _this2._$lightboxBodyOne.empty();
  266. }, 500);
  267. $toUse.addClass('in show');
  268. return $toUse;
  269. }
  270. }, {
  271. key: '_handle',
  272. value: function _handle() {
  273. var $toUse = this._containerToUse();
  274. this._updateTitleAndFooter();
  275. var currentRemote = this._$element.attr('data-remote') || this._$element.attr('href');
  276. var currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false);
  277. if (['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(currentType) < 0) return this._error(this._config.strings.type);
  278. switch (currentType) {
  279. case 'image':
  280. this._preloadImage(currentRemote, $toUse);
  281. this._preloadImageByIndex(this._galleryIndex, 3);
  282. break;
  283. case 'youtube':
  284. this._showYoutubeVideo(currentRemote, $toUse);
  285. break;
  286. case 'vimeo':
  287. this._showVimeoVideo(this._getVimeoId(currentRemote), $toUse);
  288. break;
  289. case 'instagram':
  290. this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);
  291. break;
  292. case 'video':
  293. this._showHtml5Video(currentRemote, $toUse);
  294. break;
  295. default:
  296. // url
  297. this._loadRemoteContent(currentRemote, $toUse);
  298. break;
  299. }
  300. return this;
  301. }
  302. }, {
  303. key: '_getYoutubeId',
  304. value: function _getYoutubeId(string) {
  305. if (!string) return false;
  306. var matches = string.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
  307. return matches && matches[2].length === 11 ? matches[2] : false;
  308. }
  309. }, {
  310. key: '_getVimeoId',
  311. value: function _getVimeoId(string) {
  312. return string && string.indexOf('vimeo') > 0 ? string : false;
  313. }
  314. }, {
  315. key: '_getInstagramId',
  316. value: function _getInstagramId(string) {
  317. return string && string.indexOf('instagram') > 0 ? string : false;
  318. }
  319. // layout private methods
  320. }, {
  321. key: '_toggleLoading',
  322. value: function _toggleLoading(show) {
  323. show = show || false;
  324. if (show) {
  325. this._$modalDialog.css('display', 'none');
  326. this._$modal.removeClass('in show');
  327. $('.modal-backdrop').append(this._config.loadingMessage);
  328. } else {
  329. this._$modalDialog.css('display', 'block');
  330. this._$modal.addClass('in show');
  331. $('.modal-backdrop').find('.ekko-lightbox-loader').remove();
  332. }
  333. return this;
  334. }
  335. }, {
  336. key: '_calculateBorders',
  337. value: function _calculateBorders() {
  338. return {
  339. top: this._totalCssByAttribute('border-top-width'),
  340. right: this._totalCssByAttribute('border-right-width'),
  341. bottom: this._totalCssByAttribute('border-bottom-width'),
  342. left: this._totalCssByAttribute('border-left-width')
  343. };
  344. }
  345. }, {
  346. key: '_calculatePadding',
  347. value: function _calculatePadding() {
  348. return {
  349. top: this._totalCssByAttribute('padding-top'),
  350. right: this._totalCssByAttribute('padding-right'),
  351. bottom: this._totalCssByAttribute('padding-bottom'),
  352. left: this._totalCssByAttribute('padding-left')
  353. };
  354. }
  355. }, {
  356. key: '_totalCssByAttribute',
  357. value: function _totalCssByAttribute(attribute) {
  358. return parseInt(this._$modalDialog.css(attribute), 10) + parseInt(this._$modalContent.css(attribute), 10) + parseInt(this._$modalBody.css(attribute), 10);
  359. }
  360. }, {
  361. key: '_updateTitleAndFooter',
  362. value: function _updateTitleAndFooter() {
  363. var title = this._$element.data('title') || "";
  364. var caption = this._$element.data('footer') || "";
  365. this._titleIsShown = false;
  366. if (title || this._config.alwaysShowClose) {
  367. this._titleIsShown = true;
  368. this._$modalHeader.css('display', '').find('.modal-title').html(title || "&nbsp;");
  369. } else this._$modalHeader.css('display', 'none');
  370. this._footerIsShown = false;
  371. if (caption) {
  372. this._footerIsShown = true;
  373. this._$modalFooter.css('display', '').html(caption);
  374. } else this._$modalFooter.css('display', 'none');
  375. return this;
  376. }
  377. }, {
  378. key: '_showYoutubeVideo',
  379. value: function _showYoutubeVideo(remote, $containerForElement) {
  380. var id = this._getYoutubeId(remote);
  381. var query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : '';
  382. var width = this._$element.data('width') || 560;
  383. var height = this._$element.data('height') || width / (560 / 315);
  384. return this._showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + query, width, height, $containerForElement);
  385. }
  386. }, {
  387. key: '_showVimeoVideo',
  388. value: function _showVimeoVideo(id, $containerForElement) {
  389. var width = this._$element.data('width') || 500;
  390. var height = this._$element.data('height') || width / (560 / 315);
  391. return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement);
  392. }
  393. }, {
  394. key: '_showInstagramVideo',
  395. value: function _showInstagramVideo(id, $containerForElement) {
  396. // instagram load their content into iframe's so this can be put straight into the element
  397. var width = this._$element.data('width') || 612;
  398. var height = width + 80;
  399. id = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash
  400. $containerForElement.html('<iframe width="' + width + '" height="' + height + '" src="' + id + 'embed/" frameborder="0" allowfullscreen></iframe>');
  401. this._resize(width, height);
  402. this._config.onContentLoaded.call(this);
  403. if (this._$modalArrows) //hide the arrows when showing video
  404. this._$modalArrows.css('display', 'none');
  405. this._toggleLoading(false);
  406. return this;
  407. }
  408. }, {
  409. key: '_showVideoIframe',
  410. value: function _showVideoIframe(url, width, height, $containerForElement) {
  411. // should be used for videos only. for remote content use loadRemoteContent (data-type=url)
  412. height = height || width; // default to square
  413. $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>');
  414. this._resize(width, height);
  415. this._config.onContentLoaded.call(this);
  416. if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
  417. this._toggleLoading(false);
  418. return this;
  419. }
  420. }, {
  421. key: '_showHtml5Video',
  422. value: function _showHtml5Video(url, $containerForElement) {
  423. // should be used for videos only. for remote content use loadRemoteContent (data-type=url)
  424. var width = this._$element.data('width') || 560;
  425. var height = this._$element.data('height') || width / (560 / 315);
  426. $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>');
  427. this._resize(width, height);
  428. this._config.onContentLoaded.call(this);
  429. if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
  430. this._toggleLoading(false);
  431. return this;
  432. }
  433. }, {
  434. key: '_loadRemoteContent',
  435. value: function _loadRemoteContent(url, $containerForElement) {
  436. var _this3 = this;
  437. var width = this._$element.data('width') || 560;
  438. var height = this._$element.data('height') || 560;
  439. var disableExternalCheck = this._$element.data('disableExternalCheck') || false;
  440. this._toggleLoading(false);
  441. // external urls are loading into an iframe
  442. // local ajax can be loaded into the container itself
  443. if (!disableExternalCheck && !this._isExternal(url)) {
  444. $containerForElement.load(url, $.proxy(function () {
  445. return _this3._$element.trigger('loaded.bs.modal');
  446. l;
  447. }));
  448. } else {
  449. $containerForElement.html('<iframe src="' + url + '" frameborder="0" allowfullscreen></iframe>');
  450. this._config.onContentLoaded.call(this);
  451. }
  452. if (this._$modalArrows) //hide the arrows when remote content
  453. this._$modalArrows.css('display', 'none');
  454. this._resize(width, height);
  455. return this;
  456. }
  457. }, {
  458. key: '_isExternal',
  459. value: function _isExternal(url) {
  460. var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
  461. if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) return true;
  462. if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(':(' + ({
  463. "http:": 80,
  464. "https:": 443
  465. })[location.protocol] + ')?$'), "") !== location.host) return true;
  466. return false;
  467. }
  468. }, {
  469. key: '_error',
  470. value: function _error(message) {
  471. console.error(message);
  472. this._containerToUse().html(message);
  473. this._resize(300, 300);
  474. return this;
  475. }
  476. }, {
  477. key: '_preloadImageByIndex',
  478. value: function _preloadImageByIndex(startIndex, numberOfTimes) {
  479. if (!this._$galleryItems) return;
  480. var next = $(this._$galleryItems.get(startIndex), false);
  481. if (typeof next == 'undefined') return;
  482. var src = next.attr('data-remote') || next.attr('href');
  483. if (next.attr('data-type') === 'image' || this._isImage(src)) this._preloadImage(src, false);
  484. if (numberOfTimes > 0) return this._preloadImageByIndex(startIndex + 1, numberOfTimes - 1);
  485. }
  486. }, {
  487. key: '_preloadImage',
  488. value: function _preloadImage(src, $containerForImage) {
  489. var _this4 = this;
  490. $containerForImage = $containerForImage || false;
  491. var img = new Image();
  492. if ($containerForImage) {
  493. (function () {
  494. // if loading takes > 200ms show a loader
  495. var loadingTimeout = setTimeout(function () {
  496. $containerForImage.append(_this4._config.loadingMessage);
  497. }, 200);
  498. img.onload = function () {
  499. if (loadingTimeout) clearTimeout(loadingTimeout);
  500. loadingTimeout = null;
  501. var image = $('<img />');
  502. image.attr('src', img.src);
  503. image.addClass('img-fluid');
  504. // backward compatibility for bootstrap v3
  505. image.css('width', '100%');
  506. $containerForImage.html(image);
  507. if (_this4._$modalArrows) _this4._$modalArrows.css('display', ''); // remove display to default to css property
  508. _this4._resize(img.width, img.height);
  509. _this4._toggleLoading(false);
  510. return _this4._config.onContentLoaded.call(_this4);
  511. };
  512. img.onerror = function () {
  513. _this4._toggleLoading(false);
  514. return _this4._error(_this4._config.strings.fail + (' ' + src));
  515. };
  516. })();
  517. }
  518. img.src = src;
  519. return img;
  520. }
  521. }, {
  522. key: '_swipeGesure',
  523. value: function _swipeGesure() {
  524. if (this._touchendX < this._touchstartX) {
  525. return this.navigateRight();
  526. }
  527. if (this._touchendX > this._touchstartX) {
  528. return this.navigateLeft();
  529. }
  530. }
  531. }, {
  532. key: '_resize',
  533. value: function _resize(width, height) {
  534. height = height || width;
  535. this._wantedWidth = width;
  536. this._wantedHeight = height;
  537. var imageAspecRatio = width / height;
  538. // if width > the available space, scale down the expected width and height
  539. var widthBorderAndPadding = this._padding.left + this._padding.right + this._border.left + this._border.right;
  540. // force 10px margin if window size > 575px
  541. var addMargin = this._config.doc.body.clientWidth > 575 ? 20 : 0;
  542. var discountMargin = this._config.doc.body.clientWidth > 575 ? 0 : 20;
  543. var maxWidth = Math.min(width + widthBorderAndPadding, this._config.doc.body.clientWidth - addMargin, this._config.maxWidth);
  544. if (width + widthBorderAndPadding > maxWidth) {
  545. height = (maxWidth - widthBorderAndPadding - discountMargin) / imageAspecRatio;
  546. width = maxWidth;
  547. } else width = width + widthBorderAndPadding;
  548. var headerHeight = 0,
  549. footerHeight = 0;
  550. // as the resize is performed the modal is show, the calculate might fail
  551. // if so, default to the default sizes
  552. if (this._footerIsShown) footerHeight = this._$modalFooter.outerHeight(true) || 55;
  553. if (this._titleIsShown) headerHeight = this._$modalHeader.outerHeight(true) || 67;
  554. var borderPadding = this._padding.top + this._padding.bottom + this._border.bottom + this._border.top;
  555. //calculated each time as resizing the window can cause them to change due to Bootstraps fluid margins
  556. var margins = parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom'));
  557. var maxHeight = Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight, this._config.maxHeight - borderPadding - headerHeight - footerHeight);
  558. if (height > maxHeight) {
  559. // if height > the available height, scale down the width
  560. width = Math.ceil(maxHeight * imageAspecRatio) + widthBorderAndPadding;
  561. }
  562. this._$lightboxContainer.css('height', maxHeight);
  563. this._$modalDialog.css('flex', 1).css('maxWidth', width);
  564. var modal = this._$modal.data('bs.modal');
  565. if (modal) {
  566. // v4 method is mistakenly protected
  567. try {
  568. modal._handleUpdate();
  569. } catch (Exception) {
  570. modal.handleUpdate();
  571. }
  572. }
  573. return this;
  574. }
  575. }], [{
  576. key: '_jQueryInterface',
  577. value: function _jQueryInterface(config) {
  578. var _this5 = this;
  579. config = config || {};
  580. return this.each(function () {
  581. var $this = $(_this5);
  582. var _config = $.extend({}, Lightbox.Default, $this.data(), typeof config === 'object' && config);
  583. new Lightbox(_this5, _config);
  584. });
  585. }
  586. }]);
  587. return Lightbox;
  588. })();
  589. $.fn[NAME] = Lightbox._jQueryInterface;
  590. $.fn[NAME].Constructor = Lightbox;
  591. $.fn[NAME].noConflict = function () {
  592. $.fn[NAME] = JQUERY_NO_CONFLICT;
  593. return Lightbox._jQueryInterface;
  594. };
  595. return Lightbox;
  596. })(jQuery);
  597. //# sourceMappingURL=ekko-lightbox.js.map
  598. }(jQuery);