11 years ago · a588250db3
--- a/geo3/index.html
+++ b/geo3/index.html
@@ -9,6 +9,8 @@
 
															     <p>Same code as <a href="../geo2.html">geo2</a>, but refactored as independent
														
 
															       objects and a launcher for easier maintenance/testing.</p>
														
 
															+    <p><a href="../geo4">Next</a></p>
														
 
															+
														
 
															     <div id="geo"></div>
														
 
															   </body>
														
--- a/geo4/Geo.js
+++ b/geo4/Geo.js
@@ -0,0 +1,68 @@
 
															+/**
														
 
															+ * A wrapper around HTML5 Geolocation with helper methods.
														
 
															+ *
														
 
															+ * @constructor
														
 
															+ */
														
 
															+function Geo() {
														
 
															+  "use strict";
														
 
															+
														
 
															+  /**
														
 
															+   * @type {Geolocation}
														
 
															+   */
														
 
															+  var geo = navigator.geolocation;
														
 
															+
														
 
															+  this.getGeo = function () {
														
 
															+    return geo;
														
 
															+  };
														
 
															+
														
 
															+  /**
														
 
															+   *
														
 
															+   * @param {MessageElement} area
														
 
															+   */
														
 
															+  this.showLocation = function (area) {
														
 
															+    var that = this;
														
 
															+    geo.getCurrentPosition(
														
 
															+      function (position) {
														
 
															+        area.set(that.getPositionMessage(position));
														
 
															+      },
														
 
															+      function (error) {
														
 
															+        area.set(error);
														
 
															+      }
														
 
															+    );
														
 
															+  };
														
 
															+
														
 
															+  /**
														
 
															+   * Build a HTML-formatted representation of a position information.
														
 
															+   *
														
 
															+   * @param {Position} position
														
 
															+   * @returns {string}
														
 
															+   */
														
 
															+  this.getPositionMessage = function (position) {
														
 
															+    /**
														
 
															+     * @type {Coordinates}
														
 
															+     */
														
 
															+    var coords = position.coords;
														
 
															+
														
 
															+    var date = new Date(position.timestamp);
														
 
															+
														
 
															+    var message = "<p>Position: </p>\n" +
														
 
															+      "<ul>\n" +
														
 
															+      "  <li>Timestamp: " + position.timestamp + " = " + date.toLocaleString() + "</li>\n" +
														
 
															+      "  <li>Accuracy: " + coords.accuracy + " meters</li>\n" +
														
 
															+      "  <li>Latitude: " + coords.latitude + "</li>" +
														
 
															+      "  <li>Longitude: " + coords.longitude + "</li>" +
														
 
															+      "  <li>Altitude: " + (coords.altitude ? coords.altitude : "unknown") + "</li>" +
														
 
															+      "  <li>Altitude Accuracy: " + (coords.altitudeAccuracy ? coords.altitudeAccuracy : 0) + "</li>" +
														
 
															+      "  <li>Heading: " + (coords.heading ? coords.heading : "unknown") + "</li>\n" +
														
 
															+      "  <li>Speed: " + (coords.speed ? coords.speed : "unknown") + "</li>\n" +
														
 
															+      "  </ul>\n";
														
 
															+
														
 
															+    return message;
														
 
															+  };
														
 
															+
														
 
															+  this.init = function () {
														
 
															+    geo = navigator.geolocation || false;
														
 
															+  };
														
 
															+
														
 
															+  this.init();
														
 
															+}
														
--- a/geo4/MessageElement.js
+++ b/geo4/MessageElement.js
@@ -0,0 +1,36 @@
 
															+/**
														
 
															+ * Wrapper around a HTML element holding messages.
														
 
															+ *
														
 
															+ * @param id
														
 
															+ *   The DOM ID of the element.
														
 
															+ *
														
 
															+ * @constructor
														
 
															+ */
														
 
															+function MessageElement(id) {
														
 
															+  "use strict";
														
 
															+
														
 
															+  /**
														
 
															+   * Private reference to the DOM element holding messages.
														
 
															+   *
														
 
															+   * @type {HTMLElement}
														
 
															+   */
														
 
															+  var element;
														
 
															+
														
 
															+  /**
														
 
															+   * Private initializer.
														
 
															+   *
														
 
															+   * @param id
														
 
															+   */
														
 
															+  function init(id) {
														
 
															+    element = document.getElementById(id);
														
 
															+    if (!element) {
														
 
															+      throw new Error("Element id " + id + " not found in the DOM.");
														
 
															+    }
														
 
															+  }
														
 
															+
														
 
															+  this.set = function (message) {
														
 
															+    element.innerHTML = message;
														
 
															+  };
														
 
															+
														
 
															+  init(id);
														
 
															+}
														
--- a/geo4/geo4.js
+++ b/geo4/geo4.js
@@ -0,0 +1,13 @@
 
															+require(["Geo", "MessageElement"], function () {
														
 
															+  "use strict";
														
 
															+
														
 
															+  var geo = new Geo();
														
 
															+  var area = new MessageElement("geo");
														
 
															+
														
 
															+  if (geo.getGeo()) {
														
 
															+    geo.showLocation(area);
														
 
															+  }
														
 
															+  else {
														
 
															+    area.set("Geolocation API is not available.");
														
 
															+  }
														
 
															+});
														
--- a/geo4/index.html
+++ b/geo4/index.html
@@ -0,0 +1,18 @@
 
															+<html>
														
 
															+  <head>
														
 
															+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
														
 
															+    <title>Demo géolocalisation 4</title>
														
 
															+    <script data-main="geo4" src="require.min.js"></script>
														
 
															+    </head>
														
 
															+
														
 
															+  <body>
														
 
															+    <h1>Step 4: add Require.js</h1>
														
 
															+    <p>Same code as <a href="../geo3">geo3</a>, but uses
														
 
															+      <a href="http://requirejs.org/">RequireJS</a>
														
 
															+      for dependency inclusion: this minimizes the amount of JavaScript code
														
 
															+      embedded in the HTML.</p>
														
 
															+
														
 
															+    <div id="geo"></div>
														
 
															+    </body>
														
 
															+
														
 
															+  </html>
														
--- a/geo4/require.min.js
+++ b/geo4/require.min.js