Commits

Daniel Davis committed 1175e9d

Added list of preset places.

Comments (0)

Files changed (4)

   <description xml:lang="en">Fake your location by overriding your browser's geolocation data. Set your coordinates and accuracy you desire in the Preferences. A good test site is: http://html5demos.com/geo</description>
   <author href="http://people.opera.com/danield/">Daniel Davis (@ourmaninjapan)</author>
   <icon src="images/icon_64.png"/>
-  <preference name="latitude" value="59.928312848885064"/>
-  <preference name="longitude" value="10.754767656326294"/>
+  <preference name="latitude" value="59.928312"/>
+  <preference name="longitude" value="10.754767"/>
   <preference name="accuracy" value="100"/>
+  <preference name="latitude_user" value=""/>
+  <preference name="longitude_user" value=""/>
+  <preference name="accuracy_user" value="100"/>
 </widget>
 <form id="prefs">
     <fieldset>
         <legend>I'm Not Here: Preferences</legend>
-        <label for="txt_latitude">Latitude:</label> <input type="text" id="txt_latitude">
-        <label for="txt_longitude">Longitude:</label> <input type="text" id="txt_longitude">
-        <label for="txt_accuracy">Accuracy:</label> <input type="text" id="txt_accuracy">
+        <label for="sel_places">Places:</label> <select id="sel_places"></select>
+        <label for="txt_latitude">Latitude:</label> <input type="text" id="txt_latitude" name="txt_latitude" required>
+        <label for="txt_longitude">Longitude:</label> <input type="text" id="txt_longitude" name="txt_latitude" required>
+        <label for="txt_accuracy">Accuracy:</label> <input type="number" id="txt_accuracy" name="txt_accuracy" required>
         <button id="btn_save"><img src="images/save.png" width="24" height="24" alt="Save"> Save</button>
     </fieldset>
 </form>
 
-<div class="help">You can get coordinates from: <a href="http://www.itouchmap.com/latlong.html">iTouchMap.com</a></div>
+<div class="help">
+    <p>You can get coordinates from <a href="http://www.itouchmap.com/latlong.html">iTouchMap.com</a></p>
+    <p>You can test it's working at <a href="http://html5demos.com/geo">html5demos.com</a></p>
+</div>
 
+<script src="scripts/places.js"></script>
 <script src="scripts/options.js"></script>
 </body>
 </html>

scripts/options.js

 window.addEventListener('DOMContentLoaded', function() {
-    var btn_save = document.getElementById('btn_save');
-    var options = ['latitude', 'longitude', 'accuracy'];
-    
-    for (var i = 0, option; option = options[i]; i++) {
-        document.getElementById('txt_' + option).value = widget.preferences[option];
+    // Load list of places in select box
+    var sel_places = document.getElementById('sel_places');
+    var option;
+    for (var i = 0, place; place = places[i]; i++) {
+        option = document.createElement('option');
+        option.value = place.name.toLowerCase().replace(/[^a-zA-Z0-9\-_]/g, '');
+        option.text = place.name;
+        if (place.latitude == widget.preferences['latitude'] && place.longitude == widget.preferences['longitude']) {
+            option.selected = true;
+        }
+        sel_places.appendChild(option);
     }
     
-    /*
-    var txt_latitude = document.getElementById('txt_latitude');
-    var txt_longitude = document.getElementById('txt_longitude');
-    var txt_accuracy = document.getElementById('txt_accuracy');
+    sel_places.onchange = function(event) {
+        var place = places[this.selectedIndex];
+        var txt_latitude = document.getElementById('txt_latitude');
+        var txt_longitude = document.getElementById('txt_longitude');
+        if (this.selectedIndex === 0) {
+            txt_latitude.value = widget.preferences['latitude_user'];
+            txt_longitude.value = widget.preferences['longitude_user'];
+            txt_latitude.disabled = false;
+            txt_longitude.disabled = false;
+            txt_latitude.focus();
+        } else {
+            txt_latitude.value = place.latitude;
+            txt_longitude.value = place.longitude;
+            txt_latitude.disabled = true;
+            txt_longitude.disabled = true;
+        }
+        if (txt_latitude.value === '') {
+        } else {
+        }
+        if (txt_longitude.value === '') {
+        } else {
+        }
+        
+    };
     
-    txt_latitude.value = widget.preferences['latitude'];
-    txt_longitude.value = widget.preferences['longitude'];
-    */
+    var btn_save = document.getElementById('btn_save');
+    var prefs = ['latitude', 'longitude', 'accuracy'];
+    
+    for (var i = 0, pref; pref = prefs[i]; i++) {
+        document.getElementById('txt_' + pref).value = widget.preferences[pref];
+        if (sel_places.selectedIndex === 0) {
+            document.getElementById('txt_' + pref).value = widget.preferences[pref + '_user'];
+        } else if (pref !== 'accuracy') {
+            document.getElementById('txt_' + pref).disabled = true;
+        }
+    }
     
     function doSave() {
-        //widget.preferences['latitude'] = txt_latitude.value;
-        //widget.preferences['longitude'] = txt_longitude.value;
-        
-        for (var i = 0, option; option = options[i]; i++) {
-            widget.preferences[option] = document.getElementById('txt_' + option).value;
+        for (var i = 0, pref; pref = prefs[i]; i++) {
+            widget.preferences[pref] = document.getElementById('txt_' + pref).value;
+            // Save user-defined preferences separately as well
+            if (document.getElementById('sel_places').selectedIndex === 0) {
+                widget.preferences[pref + '_user'] = document.getElementById('txt_' + pref).value;
+            }
         }
     }
     

styles/options.css

 label, input, button, output {
     font-size:1.5em;
 }
+select {
+    font-size:1.2em;
+}
 fieldset {
     margin:20px auto;
     width:50%;
 label, button {
     display:block;
 }
-input {
+input, select {
     margin-bottom:20px;
 }
 button {
     vertical-align:middle;
 }
 .help {
-    background:url(../images/help.png) 25px 0px no-repeat;
+    background:url(../images/help.png) 30px 0px no-repeat;
+    line-height:1.5;
     margin:0 auto;
     min-height:24px;
-    padding:3px 0 0 55px;
+    padding:0px 0 0 65px;
     width:50%;
 }