Frederic G. MARAND 10 лет назад
Родитель
Сommit
ee14011835
5 измененных файлов с 133 добавлено и 0 удалено
  1. 2 0
      geo2.html
  2. 68 0
      geo3/Geo.js
  3. 36 0
      geo3/MessageElement.js
  4. 9 0
      geo3/geo3.js
  5. 18 0
      geo3/index.html

+ 2 - 0
geo2.html

@@ -9,6 +9,8 @@
     <p>Since we can check the Geolocation API from <a href="geo1.html">step 1</a>,
       let us go one step further and use it to obtain geolocation information.</p>
 
+    <p><a href="../geo3">Next</a></p>
+
     <div id="geo"></div>
     </body>
 

+ 68 - 0
geo3/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();
+}

+ 36 - 0
geo3/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);
+}

+ 9 - 0
geo3/geo3.js

@@ -0,0 +1,9 @@
+var geo = new Geo();
+var area = new MessageElement("geo");
+
+if (geo.getGeo()) {
+  geo.showLocation(area);
+}
+else {
+  area.set("Geolocation API is not available.");
+}

+ 18 - 0
geo3/index.html

@@ -0,0 +1,18 @@
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Demo géolocalisation 2</title>
+    </head>
+
+  <body>
+    <h1>Step 3: object-oriented refactoring</h1>
+    <p>Same code as <a href="../geo2.html">geo2</a>, but refactored as independent
+      objects and a launcher for easier maintenance/testing.</p>
+
+    <div id="geo"></div>
+  </body>
+
+  <script src="Geo.js"></script>
+  <script src="MessageElement.js"></script>
+  <script src="geo3.js"></script>
+  </html>