Browse files

HTML5 Full Screen API

  • Loading branch information...
1 parent a57e4e1 commit c6ede24d108bf1cf7e94ec53cb86058d91643a2c @fredj committed Nov 25, 2011
Showing with 70 additions and 1 deletion.
  1. +1 −1 css/fullscreen.css
  2. +69 −0 lib/OpenLayers/Control/FullScreen.js
View
2 css/fullscreen.css
@@ -1,4 +1,4 @@
-.olMap.fullscreen {
+.olMap.fullscreen, .olMap:-webkit-full-screen {
height: 100% !important;
width: 100% !important;
position: fixed;
View
69 lib/OpenLayers/Control/FullScreen.js
@@ -13,8 +13,22 @@ OpenLayers.Control.FullScreen = OpenLayers.Class(OpenLayers.Control, {
fullscreenClass: 'fullscreen',
+ setMap: function(map) {
+ OpenLayers.Control.prototype.setMap.apply(this, arguments);
+
+ // handle 'Esc' key press
+ OpenLayers.Event.observe(this.map.div, fullScreenApi.fullScreenEventName, OpenLayers.Function.bind(function() {
+ if (fullScreenApi.isFullScreen() === false) {
+ this.deactivate();
+ }
+ }, this));
+ },
+
activate: function() {
if (OpenLayers.Control.prototype.activate.apply(this, arguments)) {
+ if (fullScreenApi.supportsFullScreen) {
+ fullScreenApi.requestFullScreen(this.map.div);
+ }
OpenLayers.Element.addClass(this.map.div, this.fullscreenClass);
this.map.updateSize();
return true;
@@ -25,6 +39,9 @@ OpenLayers.Control.FullScreen = OpenLayers.Class(OpenLayers.Control, {
deactivate: function() {
if (OpenLayers.Control.prototype.deactivate.apply(this, arguments)) {
+ if (fullScreenApi.supportsFullScreen) {
+ fullScreenApi.cancelFullScreen();
+ }
OpenLayers.Element.removeClass(this.map.div, this.fullscreenClass);
this.map.updateSize();
return true;
@@ -35,3 +52,55 @@ OpenLayers.Control.FullScreen = OpenLayers.Class(OpenLayers.Control, {
CLASS_NAME: "OpenLayers.Control.FullScreen"
});
+
+
+// from http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
+(function() {
+ var fullScreenApi = {
+ supportsFullScreen: false,
+ isFullScreen: function() { return false; },
+ requestFullScreen: function() {},
+ cancelFullScreen: function() {},
+ fullScreenEventName: '',
+ prefix: ''
+ }
+ var browserPrefixes = 'webkit moz o ms khtml'.split(' ');
+
+ // check for native support
+ if (typeof document.cancelFullScreen != 'undefined') {
+ fullScreenApi.supportsFullScreen = true;
+ } else {
+ // check for fullscreen support by vendor prefix
+ for (var i = 0, il = browserPrefixes.length; i < il; i++) {
+ fullScreenApi.prefix = browserPrefixes[i];
+ if (typeof document[fullScreenApi.prefix + 'CancelFullScreen'] != 'undefined') {
+ fullScreenApi.supportsFullScreen = true;
+ break;
+ }
+ }
+ }
+
+ // update methods to do something useful
+ if (fullScreenApi.supportsFullScreen) {
+ fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
+ fullScreenApi.isFullScreen = function() {
+ switch (this.prefix) {
+ case '':
+ return document.fullScreen;
+ case 'webkit':
+ return document.webkitIsFullScreen;
+ default:
+ return document[this.prefix + 'FullScreen'];
+ }
+ }
+ fullScreenApi.requestFullScreen = function(el) {
+ return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
+ }
+ fullScreenApi.cancelFullScreen = function(el) {
+ return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
+ }
+ }
+
+ // export api
+ window.fullScreenApi = fullScreenApi;
+})();

0 comments on commit c6ede24

Please sign in to comment.