angular-fullscreen.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. (function(window) {
  2. var createModule = function(angular) {
  3. var module = angular.module('FBAngular', []);
  4. module.factory('Fullscreen', ['$document', '$rootScope', function ($document,$rootScope) {
  5. var document = $document[0];
  6. // ensure ALLOW_KEYBOARD_INPUT is available and enabled
  7. var isKeyboardAvailbleOnFullScreen = (typeof Element !== 'undefined' && 'ALLOW_KEYBOARD_INPUT' in Element) && Element.ALLOW_KEYBOARD_INPUT;
  8. var emitter = $rootScope.$new();
  9. // listen event on document instead of element to avoid firefox limitation
  10. // see https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
  11. $document.on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function(){
  12. emitter.$emit('FBFullscreen.change', serviceInstance.isEnabled());
  13. });
  14. var serviceInstance = {
  15. $on: angular.bind(emitter, emitter.$on),
  16. all: function() {
  17. serviceInstance.enable( document.documentElement );
  18. },
  19. enable: function(element) {
  20. if(element.requestFullScreen) {
  21. element.requestFullScreen();
  22. } else if(element.mozRequestFullScreen) {
  23. element.mozRequestFullScreen();
  24. } else if(element.webkitRequestFullscreen) {
  25. // Safari temporary fix
  26. if (/Version\/[\d]{1,2}(\.[\d]{1,2}){1}(\.(\d){1,2}){0,1} Safari/.test(navigator.userAgent)) {
  27. element.webkitRequestFullscreen();
  28. } else {
  29. element.webkitRequestFullscreen(isKeyboardAvailbleOnFullScreen);
  30. }
  31. } else if (element.msRequestFullscreen) {
  32. element.msRequestFullscreen();
  33. }
  34. },
  35. cancel: function() {
  36. if(document.cancelFullScreen) {
  37. document.cancelFullScreen();
  38. } else if(document.mozCancelFullScreen) {
  39. document.mozCancelFullScreen();
  40. } else if(document.webkitExitFullscreen) {
  41. document.webkitExitFullscreen();
  42. } else if (document.msExitFullscreen) {
  43. document.msExitFullscreen();
  44. }
  45. },
  46. isEnabled: function(){
  47. var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
  48. return fullscreenElement ? true : false;
  49. },
  50. toggleAll: function(){
  51. serviceInstance.isEnabled() ? serviceInstance.cancel() : serviceInstance.all();
  52. },
  53. isSupported: function(){
  54. var docElm = document.documentElement;
  55. var requestFullscreen = docElm.requestFullScreen || docElm.mozRequestFullScreen || docElm.webkitRequestFullscreen || docElm.msRequestFullscreen;
  56. return requestFullscreen ? true : false;
  57. }
  58. };
  59. return serviceInstance;
  60. }]);
  61. module.directive('fullscreen', ['Fullscreen', function(Fullscreen) {
  62. return {
  63. link : function ($scope, $element, $attrs) {
  64. // Watch for changes on scope if model is provided
  65. if ($attrs.fullscreen) {
  66. $scope.$watch($attrs.fullscreen, function(value) {
  67. var isEnabled = Fullscreen.isEnabled();
  68. if (value && !isEnabled) {
  69. Fullscreen.enable($element[0]);
  70. $element.addClass('isInFullScreen');
  71. } else if (!value && isEnabled) {
  72. Fullscreen.cancel();
  73. $element.removeClass('isInFullScreen');
  74. }
  75. });
  76. // Listen on the `FBFullscreen.change`
  77. // the event will fire when anything changes the fullscreen mode
  78. var removeFullscreenHandler = Fullscreen.$on('FBFullscreen.change', function(evt, isFullscreenEnabled){
  79. if(!isFullscreenEnabled){
  80. $scope.$evalAsync(function(){
  81. $scope.$eval($attrs.fullscreen + '= false');
  82. $element.removeClass('isInFullScreen');
  83. });
  84. }
  85. });
  86. $scope.$on('$destroy', function() {
  87. removeFullscreenHandler();
  88. });
  89. } else {
  90. if ($attrs.onlyWatchedProperty !== undefined) {
  91. return;
  92. }
  93. $element.on('click', function (ev) {
  94. Fullscreen.enable( $element[0] );
  95. });
  96. }
  97. }
  98. };
  99. }]);
  100. return module;
  101. };
  102. if (typeof define === "function" && define.amd) {
  103. define("FBAngular", ['angular'], function (angular) { return createModule(angular); } );
  104. } else if (typeof module !== 'undefined' && module.exports) {
  105. module.exports = createModule(window.angular).name;
  106. } else {
  107. createModule(window.angular);
  108. }
  109. })(window);