Add a fullscreen plugin

css/vgps3.css

@@ -10,6 +10,11 @@ body {
     font: 12px 'Nobile', verdana, sans-serif;
 }
 
+#fs {
+    width: 100%;
+    height: 100%;
+}
+
 #map-container {
     height: 80%;
 }
@@ -48,6 +53,12 @@ select {
     text-align: right;
     border-radius: 4px;
     opacity: 0.9;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 .vg-new {

src/vgps3/plugins/fullscreen/fullscreen.js

@@ -0,0 +1,152 @@
+/**
+ * Copyright Victor Berchet
+ *
+ * This file is part of VisuGps3
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ */
+
+/**
+ * @fileoverview Switch to fullscreen.
+ * @author Victor Berchet <victor@suumit.com>
+ */
+
+goog.provide('vgps3.fullscreen.Fullscreen');
+
+goog.require('vgps3.Control');
+goog.require('vgps3.Map');
+goog.require('vgps3.PluginBase');
+goog.require('vgps3.fullscreen.templates');
+
+
+
+/**
+ * @constructor
+ * @extends {vgps3.PluginBase}
+ */
+vgps3.fullscreen.Fullscreen = function() {
+  /**
+   *  @type {?{open: string, close: string}}
+   *  @private
+   */
+  this.fsFunctions_;
+
+  /**
+   * @type {Element} The element to display
+   * @private
+   */
+  this.fsElement_;
+
+  /**
+   * @type {vgps3.Control} The google map control
+   * @private
+   */
+  this.control_;
+
+  /**
+   * @type {boolean} FullScreen ?
+   * @private
+   */
+  this.fs_ = false;
+
+  goog.base(this);
+};
+goog.inherits(vgps3.fullscreen.Fullscreen, vgps3.PluginBase);
+
+
+/**
+ * @override
+ */
+vgps3.fullscreen.Fullscreen.prototype.init = function(vgps) {
+  goog.base(this, 'init', vgps);
+
+  this.fsElement_ = document.getElementById('fs');
+
+  if (null === this.fsElement_) {
+    return;
+  }
+
+  this.fsFunctions_ = this.getFsFunctions_(this.fsElement_);
+
+  if (null === this.fsFunctions_) {
+    return;
+  }
+
+  this.control_ = new vgps3.Control(
+      this.gMap_,
+      vgps3.fullscreen.templates.fsControl,
+      google.maps.ControlPosition.RIGHT_TOP
+      );
+
+  this.control_.update({'expand': true});
+  var ctrlEl = this.control_.getElement();
+  goog.style.setStyle(ctrlEl, 'cursor', 'pointer');
+  this.getHandler().listen(ctrlEl, 'mousedown', this.clickhandle_);
+};
+
+
+/**
+ * @param {Node} element The map container.
+ *
+ * @return {?{open: string, close: string}} The fs function
+ *
+ * @private
+ */
+vgps3.fullscreen.Fullscreen.prototype.getFsFunctions_ = function(element) {
+  if ('requestFullScreen' in element) {
+    return {
+      open: 'requestFullscreen',
+      close: 'exitFullscreen'
+    };
+  }
+
+  if ('mozRequestFullScreen' in element) {
+    return {
+      open: 'mozRequestFullScreen',
+      close: 'mozCancelFullScreen'
+    };
+  }
+
+  if ('webkitRequestFullScreen' in element) {
+    return {
+      open: 'webkitRequestFullscreen',
+      close: 'webkitExitFullscreen'
+    };
+  }
+
+  if ('msRequestFullScreen' in element) {
+    return {
+      open: 'msRequestFullscreen',
+      close: 'msExitFullscreen'
+    };
+  }
+
+
+  return null;
+};
+
+
+/**
+ * Toggles FullScreen
+ *
+ * @param {goog.events.Event} event
+ * @private
+ */
+vgps3.fullscreen.Fullscreen.prototype.clickhandle_ = function(event) {
+  this.control_.update({'expand': this.fs_});
+  this.fs_ = !this.fs_;
+  this.fs_ ? this.fsElement_[this.fsFunctions_.open]() : document[this.fsFunctions_.close]();
+};
+
+
+/**
+ * @override
+ */
+vgps3.fullscreen.Fullscreen.prototype.disposeInternal = function() {
+  goog.base(this, 'disposeInternal');
+  goog.dispose(this.control_);
+};
+
+goog.exportSymbol('vgps3.fullscreen.Fullscreen', vgps3.fullscreen.Fullscreen);

src/vgps3/plugins/fullscreen/templates.soy

@@ -0,0 +1,18 @@
+/**
+ * Copyright Victor Berchet
+ *
+ * This file is part of VisuGps3
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ */
+
+{namespace vgps3.fullscreen.templates}
+
+/**
+ * @param expand
+ */
+{template .fsControl}
+  <i class="fa  {if $expand}fa-expand{else}fa-compress{/if} fa-2x"></i>
+{/template}

src/vgps3/viewer.js

@@ -27,6 +27,7 @@ goog.require('vgps3.airspace.Airspace');
 goog.require('vgps3.chart.Chart');
 goog.require('vgps3.doarama.Doarama');
 goog.require('vgps3.earth.Earth');
+goog.require('vgps3.fullscreen.Fullscreen');
 goog.require('vgps3.path.Path');
 goog.require('vgps3.route.Route');
 goog.require('vgps3.skyways.Skyways');
@@ -67,7 +68,8 @@ vgps3.Viewer = function(mapContainer, chartContainer) {
     'path': new vgps3.path.Path(),
     'airspace': new vgps3.airspace.Airspace(),
     'skyways': new vgps3.skyways.Skyways(),
-    'doarama': new vgps3.doarama.Doarama()
+    'doarama': new vgps3.doarama.Doarama(),
+    'fs': new vgps3.fullscreen.Fullscreen()
   };
 
   /**

vgps3.dev.html

@@ -10,10 +10,12 @@
     <script type="text/javascript" src="http://localhost:9810/compile?id=vgps3-dev"></script>
 </head>
 <body>
-    <div id="map-container"></div>
-    <div id="charts-container">
-        <div id="charts"></div>
-        <div id="sliders"></div>
+    <div id="fs">
+        <div id="map-container"></div>
+        <div id="charts-container">
+            <div id="charts"></div>
+            <div id="sliders"></div>
+        </div>
     </div>
     <script type="text/javascript">
         viewer = new vgps3.Viewer(

vgps3.html

@@ -10,10 +10,12 @@
     <script type="text/javascript" src="dist/vgps3.js"></script>
 </head>
 <body>
-    <div id="map-container"></div>
-    <div id="charts-container">
-        <div id="charts"></div>
-        <div id="sliders"></div>
+    <div id="fs">
+        <div id="map-container"></div>
+        <div id="charts-container">
+            <div id="charts"></div>
+            <div id="sliders"></div>
+        </div>
     </div>
     <script type="text/javascript">
         viewer = new vgps3.Viewer(