Trang chủ Khám phá Trợ giúp
Đăng nhập
fgm
/
js__geolocation
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0
Browse Source

Improved error handling, more consistent UI.

Frederic G. MARAND 10 năm trước cách đây
mục cha
a588250db3
commit
e4532dadc5
12 tập tin đã thay đổi với 230 bổ sung và 24 xóa
Split View Hiển thị tình trạng sai khác
  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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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
Xem Tập Tin 

@@ -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>