Home Explore Help
Register Sign In
fgm
/
js__geolocation
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

Improved error handling, more consistent UI.

Frederic G. MARAND 9 years ago
parent
a588250db3
commit
e4532dadc5
12 changed files with 230 additions and 24 deletions
Split View Show Diff Stats
  1. 36 0
      .gitignore
  2. 15 0
      geo.css
  3. 2 6
      geo1.html
  4. 11 0
      geo1.js
  5. 19 6
      geo2.html
  6. 18 3
      geo2.js
  7. 30 1
      geo3/Geo.js
  8. 15 0
      geo3/geo.css
  9. 22 6
      geo3/index.html
  10. 30 1
      geo4/Geo.js
  11. 15 0
      geo4/geo.css
  12. 17 1
      geo4/index.html

+ 36 - 0
.gitignore
View File 

@@ -0,0 +1,36 @@
 
+# Created by .gitignore support plugin (hsz.mobi)
 
+
 
+### JetBrains template
 
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm
 
+
 
+## Directory-based project format
 
+.idea/
 
+/*.iml
 
+# if you remove the above rule, at least ignore user-specific stuff:
 
+# .idea/workspace.xml
 
+# .idea/tasks.xml
 
+# .idea/dictionaries
 
+# and these sensitive or high-churn files:
 
+# .idea/dataSources.ids
 
+# .idea/dataSources.xml
 
+# .idea/sqlDataSources.xml
 
+# .idea/dynamic.xml
 
+# and, if using gradle::
 
+# .idea/gradle.xml
 
+# .idea/libraries
 
+
 
+## File-based project format
 
+*.ipr
 
+*.iws
 
+
 
+## Additional for IntelliJ
 
+out/
 
+
 
+# generated by mpeltonen/sbt-idea plugin
 
+.idea_modules/
 
+
 
+# generated by JIRA plugin
 
+atlassian-ide-plugin.xml
 
+
 
+# generated by Crashlytics plugin (for Android Studio and Intellij)
 
+com_crashlytics_export_strings.xml

+ 15 - 0
geo.css
View File 

@@ -0,0 +1,15 @@
 
+.navbar ul {
 
+  display: inline;
 
+}
 
+
 
+.navbar ul li {
 
+  display: inline;
 
+}
 
+
 
+.navbar ul li:before {
 
+  content: " | ";
 
+}
 
+
 
+.navbar ul li:first-child:before {
 
+  content: "";
 
+}

+ 2 - 6
geo1.html
View File 

@@ -8,15 +8,11 @@
 
     <h1>Step 1: check availability of the Geolocation API</h1>
 
     <p>As a first step, let us just check whether the HTML5 Geolocation API is
 
       present in this browser or not.</p>
 
-
 
     <div id="geo"></div>
 
 
     <p><a href="geo2.html">Next</a></p>
 
     </body>
 
 
-  <script>
 
-    document.getElementById('geo').innerHTML = navigator.geolocation ?
 
-      'Geolocation API is available' :
 
-      'Geolocation API is not available';
 
-    </script>
 
+  <p><a href="geo1.js">JavaScript source</a></p>
 
+  <script src="geo1.js"></script>
 
   </html>

+ 11 - 0
geo1.js
View File 

@@ -0,0 +1,11 @@
 
+/**
 
+ * @file
 
+ *
 
+ *
 
+ * User: marand
 
+ * Date: 12/09/14
 
+ * Time: 09:49
 
+ */
 
+document.getElementById('geo').innerHTML = navigator.geolocation ?
 
+  'Geolocation API is available' :
 
+  'Geolocation API is not available';

+ 19 - 6
geo2.html
View File 

@@ -2,17 +2,30 @@
 
   <head>
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
     <title>Geolocation demo step 2</title>
 
-    </head>
 
+    <link rel="stylesheet" href="geo.css" />
 
+  </head>
 
 
   <body>
 
     <h1>Step 2: request current location</h1>
 
     <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>
 
-
 
+    <h2>Results</h2>
 
     <div id="geo"></div>
 
-    </body>
 
 
-  <script src="geo2.js"></script>
 
-  </html>
 
+    <h2>Sources</h2>
 
+    <p><a href="geo2.js">Script</a></p>
 
+
 
+    <script src="geo2.js"></script>
 
+
 
+
 
+    <div class="navbar">
 
+      <h2>Navigation</h2>
 
+      <ul>
 
+        <li><a href="geo1">Previous</a></li>
 
+        <li><a href="geo3">Next</a></li>
 
+      </ul>
 
+    </div>
 
+
 
+  </body>
 
+</html>

+ 18 - 3
geo2.js
View File 

@@ -10,7 +10,7 @@ function setMessage(message) {
 
     geo.innerHTML = message;
 
   }
 
   else {
 
-    console.log("message:", message);
 
+    console.log("setMessage()", message);
 
   }
 
 }
 
 
@@ -38,12 +38,27 @@ function getPositionMessage(position) {
 
 
 function showPositionMessage(position) {
 
   "use strict";
 
-  setMessage(getPositionMessage(position));
 
+  setMessage("showPositionMessage()", getPositionMessage(position));
 
 }
 
 
 function showPositionError(error) {
 
   "use strict";
 
-  setMessage(error);
 
+  var reason;
 
+  switch (error.code) {
 
+    case error.POSITION_UNAVAILABLE:
 
+      reason = "Position unavailable";
 
+      break;
 
+    case error.PERMISSION_DENIED:
 
+      reason = "Permission denied";
 
+      break;
 
+    case error.TIMEOUT:
 
+      reason = "Timeout"
 
+      break;
 
+    default:
 
+      reason = "Unknown position error (" + error.code + ")";
 
+      break;
 
+  }
 
+  setMessage(reason + ": " + error.message);
 
 }
 
 
 if (isGeoAvailable()) {

+ 30 - 1
geo3/Geo.js
View File 

@@ -26,11 +26,40 @@ function Geo() {
 
         area.set(that.getPositionMessage(position));
 
       },
 
       function (error) {
 
-        area.set(error);
 
+        area.set(that.getPositionError(error));
 
       }
 
     );
 
   };
 
 
+  /**
 
+   * Build a string representation of a Geolocation PositionError.
 
+   *
 
+   * @param {PositionError} error
 
+   *
 
+   * @returns {*}
 
+   */
 
+  this.getPositionError = function(error) {
 
+    "use strict";
 
+    var reason;
 
+    switch (error.code) {
 
+      case error.POSITION_UNAVAILABLE:
 
+        reason = "Position unavailable";
 
+        break;
 
+      case error.PERMISSION_DENIED:
 
+        reason = "Permission denied";
 
+        break;
 
+      case error.TIMEOUT:
 
+        reason = "Timeout"
 
+        break;
 
+      default:
 
+        reason = "Unknown position error (" + error.code + ")";
 
+        break;
 
+    }
 
+
 
+    var ret = reason + ": " + error.message;
 
+    return ret;
 
+  };
 
+
 
   /**
 
    * Build a HTML-formatted representation of a position information.
 
    *

+ 15 - 0
geo3/geo.css
View File 

@@ -0,0 +1,15 @@
 
+.navbar ul {
 
+  display: inline;
 
+}
 
+
 
+.navbar ul li {
 
+  display: inline;
 
+}
 
+
 
+.navbar ul li:before {
 
+  content: " | ";
 
+}
 
+
 
+.navbar ul li:first-child:before {
 
+  content: "";
 
+}

+ 22 - 6
geo3/index.html
View File 

@@ -2,6 +2,7 @@
 
   <head>
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
     <title>Demo géolocalisation 2</title>
 
+    <link rel="stylesheet" href="geo.css" />
 
     </head>
 
 
   <body>
 
@@ -9,12 +10,27 @@
 
     <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>
 
-
 
+    <h2>Results</h2>
 
     <div id="geo"></div>
 
-  </body>
 
 
-  <script src="Geo.js"></script>
 
-  <script src="MessageElement.js"></script>
 
-  <script src="geo3.js"></script>
 
+    <script src="Geo.js"></script>
 
+    <script src="MessageElement.js"></script>
 
+    <script src="geo3.js"></script>
 
+
 
+    <h2>Sources</h2>
 
+    <ul>
 
+      <li><a href="Geo.js">Geo object</a></li>
 
+      <li><a href="MessageElement.js">MessageElement object</a></li>
 
+      <li><a href="geo3.js">Wrapper script</a></li>
 
+    </ul>
 
+
 
+    <div class="navbar">
 
+      <h2>Navigation</h2>
 
+      <ul>
 
+        <li><a href="../geo2">Previous</a></li>
 
+        <li><a href="../geo4">Next</a></li>
 
+      </ul>
 
+    </div>
 
+
 
+    </body>
 
   </html>

+ 30 - 1
geo4/Geo.js
View File 

@@ -26,11 +26,40 @@ function Geo() {
 
         area.set(that.getPositionMessage(position));
 
       },
 
       function (error) {
 
-        area.set(error);
 
+        area.set(that.getPositionError(error));
 
       }
 
     );
 
   };
 
 
+  /**
 
+   * Build a string representation of a Geolocation PositionError.
 
+   *
 
+   * @param {PositionError} error
 
+   *
 
+   * @returns {*}
 
+   */
 
+  this.getPositionError = function(error) {
 
+    "use strict";
 
+    var reason;
 
+    switch (error.code) {
 
+      case error.POSITION_UNAVAILABLE:
 
+        reason = "Position unavailable";
 
+        break;
 
+      case error.PERMISSION_DENIED:
 
+        reason = "Permission denied";
 
+        break;
 
+      case error.TIMEOUT:
 
+        reason = "Timeout"
 
+        break;
 
+      default:
 
+        reason = "Unknown position error (" + error.code + ")";
 
+        break;
 
+    }
 
+
 
+    var ret = reason + ": " + error.message;
 
+    return ret;
 
+  };
 
+
 
   /**
 
    * Build a HTML-formatted representation of a position information.
 
    *

+ 15 - 0
geo4/geo.css
View File 

@@ -0,0 +1,15 @@
 
+.navbar ul {
 
+  display: inline;
 
+}
 
+
 
+.navbar ul li {
 
+  display: inline;
 
+}
 
+
 
+.navbar ul li:before {
 
+  content: " | ";
 
+}
 
+
 
+.navbar ul li:first-child:before {
 
+  content: "";
 
+}

+ 17 - 1
geo4/index.html
View File 

@@ -2,6 +2,7 @@
 
   <head>
 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
     <title>Demo géolocalisation 4</title>
 
+    <link rel="stylesheet" href="geo.css" />
 
     <script data-main="geo4" src="require.min.js"></script>
 
     </head>
 
 
@@ -12,7 +13,22 @@
 
       for dependency inclusion: this minimizes the amount of JavaScript code
 
       embedded in the HTML.</p>
 
 
+    <h2>Results</h2>
 
     <div id="geo"></div>
 
-    </body>
 
 
+    <h2>Sources</h2>
 
+    <ul>
 
+      <li><a href="Geo.js">Geo object</a></li>
 
+      <li><a href="MessageElement.js">MessageElement object</a></li>
 
+      <li><a href="geo4.js">Wrapper script</a></li>
 
+    </ul>
 
+
 
+    <div class="navbar">
 
+      <h2>Navigation</h2>
 
+      <ul>
 
+        <li><a href="../geo3">Previous</a></li>
 
+      </ul>
 
+    </div>
 
+
 
+    </body>
 
   </html>