lg-fullscreen.js 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. /*! lg-fullscreen - v1.0.0 - 2016-09-20
  2. * http://sachinchoolur.github.io/lightGallery
  3. * Copyright (c) 2016 Sachin N; Licensed GPLv3 */
  4. (function (root, factory) {
  5. if (typeof define === 'function' && define.amd) {
  6. // AMD. Register as an anonymous module unless amdModuleId is set
  7. define([], function () {
  8. return (factory());
  9. });
  10. } else if (typeof exports === 'object') {
  11. // Node. Does not work with strict CommonJS, but
  12. // only CommonJS-like environments that support module.exports,
  13. // like Node.
  14. module.exports = factory();
  15. } else {
  16. factory();
  17. }
  18. }(this, function () {
  19. (function($, window, document, undefined) {
  20. 'use strict';
  21. var defaults = {
  22. fullScreen: true
  23. };
  24. var Fullscreen = function(element) {
  25. // get lightGallery core plugin data
  26. this.core = $(element).data('lightGallery');
  27. this.$el = $(element);
  28. // extend module defalut settings with lightGallery core settings
  29. this.core.s = $.extend({}, defaults, this.core.s);
  30. this.init();
  31. return this;
  32. };
  33. Fullscreen.prototype.init = function() {
  34. var fullScreen = '';
  35. if (this.core.s.fullScreen) {
  36. // check for fullscreen browser support
  37. if (!document.fullscreenEnabled && !document.webkitFullscreenEnabled &&
  38. !document.mozFullScreenEnabled && !document.msFullscreenEnabled) {
  39. return;
  40. } else {
  41. fullScreen = '<span class="lg-fullscreen lg-icon"></span>';
  42. this.core.$outer.find('.lg-toolbar').append(fullScreen);
  43. this.fullScreen();
  44. }
  45. }
  46. };
  47. Fullscreen.prototype.requestFullscreen = function() {
  48. var el = document.documentElement;
  49. if (el.requestFullscreen) {
  50. el.requestFullscreen();
  51. } else if (el.msRequestFullscreen) {
  52. el.msRequestFullscreen();
  53. } else if (el.mozRequestFullScreen) {
  54. el.mozRequestFullScreen();
  55. } else if (el.webkitRequestFullscreen) {
  56. el.webkitRequestFullscreen();
  57. }
  58. };
  59. Fullscreen.prototype.exitFullscreen = function() {
  60. if (document.exitFullscreen) {
  61. document.exitFullscreen();
  62. } else if (document.msExitFullscreen) {
  63. document.msExitFullscreen();
  64. } else if (document.mozCancelFullScreen) {
  65. document.mozCancelFullScreen();
  66. } else if (document.webkitExitFullscreen) {
  67. document.webkitExitFullscreen();
  68. }
  69. };
  70. // https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
  71. Fullscreen.prototype.fullScreen = function() {
  72. var _this = this;
  73. $(document).on('fullscreenchange.lg webkitfullscreenchange.lg mozfullscreenchange.lg MSFullscreenChange.lg', function() {
  74. _this.core.$outer.toggleClass('lg-fullscreen-on');
  75. });
  76. this.core.$outer.find('.lg-fullscreen').on('click.lg', function() {
  77. if (!document.fullscreenElement &&
  78. !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
  79. _this.requestFullscreen();
  80. } else {
  81. _this.exitFullscreen();
  82. }
  83. });
  84. };
  85. Fullscreen.prototype.destroy = function() {
  86. // exit from fullscreen if activated
  87. this.exitFullscreen();
  88. $(document).off('fullscreenchange.lg webkitfullscreenchange.lg mozfullscreenchange.lg MSFullscreenChange.lg');
  89. };
  90. $.fn.lightGallery.modules.fullscreen = Fullscreen;
  91. })(jQuery, window, document);
  92. }));