Mercurial > hip

changeset 22:4e85f2c5316d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
v1 map preview
author Maria Emerson <memerson@mozilla.com>
date Mon, 21 Jul 2008 12:04:08 -0700
parents 44550b8fd922
children 4d223fd05668
files preview/hip.css preview/hip.html preview/hip.js
diffstat 3 files changed, 166 insertions(+), 52 deletions(-) [+]
line wrap: on
line diff
--- a/preview/hip.css	Wed Jul 16 17:05:37 2008 -0700
+++ b/preview/hip.css	Mon Jul 21 12:04:08 2008 -0700
@@ -1,7 +1,8 @@
 #search-box {
   border: 1px solid #000000;
-  background: #ffffff;
+  background: #272727;
   font: 24pt Helvetica;
+  color: ffffff;
   padding: 4px;
 }
 
@@ -13,6 +14,8 @@
   padding-top: 2px;
   padding-left: 4px;
   padding-right: 4px;
+  color: ffffff;
+  background: #272727;
 }
 
 .hilited {
@@ -29,15 +32,30 @@
   color: #999999;
 }
 
+/* preview pane for google results and initial map preview */
+#preview-pane {
+  width: 650px;
+  height: 140px;
+  padding: 13px;
+  color: #bfbfbf;
+}
+#preview-pane-large {
+  width: 650px;
+  height: 300px;
+  padding: 13px;
+  color: #bfbfbf;
+}
+
+/* google search results */
 .gresult {
   margin-bottom: 10px;
 }
 .gresult a {
+  color: #0066cc;
   font-size: small;
 }
 .gresult-url {
   font-size: x-small;
-  color: #00aa00;
 }
 .gresult-content {
   width: 650px;
@@ -46,44 +64,71 @@
   overflow: hidden;
 }
 
-#preview-pane {
-  width: 650px;
-  height: 130px;
-  padding: 7px;
-}
-
+/* initial map preview */
 #map {
   width: 225px;
   height: 130px;
   float: left;
-}
-
-.gaddress {
-  font-size: small;
-  margin-bottom: 10px;
+  cursor: pointer;
+  border: 5px solid #0066cc;
+  -moz-border-radius: 5px 0px 5px 5px;
 }
 #address-list {
   float: left;
-  margin: 10px;
-  width: 300px;
+  /*width: 400px;*/
   height: 120px;
 }
-#map-actions {
-  padding-left: 10px;
-  width: 100px;
-  float: left;
-  margin: 3px;
+.gaddress, .gaddress-current {
+  font-size: small;
+  padding: 5px 5px 5px 25px;
+  margin-bottom: 5px;
+}
+.gaddress-current {
+  background-color: #0066cc;
+  border-width: 2px 2px 2px 0px;
+  border-style: solid solid solid none;
+  border-color: #0066cc; 
+  /*border: 5px solid #0066cc;*/
+  -moz-border-radius: 0px 5px 5px 0px;
+}
+.gaddress:hover {
+  border: thin solid #ffffff;
+}
+.gaddress a {
+  color: #bfbfbf;
+}
+.gaddress-current a {
+  color: #bfbfbf;
+  text-decoration: none;
 }
-#map-accept-button {
-  position: relative;
-  bottom: -10px;
-  right: -25px;
-  font-size: small;
-  margin-top: 100px;
+#goto-gmaps {
+  font-size: x-small;
+  margin-top: 40px;
+  padding-left: 20px;
+}
+#goto-gmaps a {
+  color: #0066cc;
 }
-#gmaps-url {
+
+/* secondary map preview */
+#selected-address {
+  color: #bfbfbf;
+  font-size: medium;  
+  padding-bottom: 5px;
+  width: 525px;
+  float: left;
+}
+.map-actions {
+  font-size: small;
   float: right;
-  margin-top: 20px;
-  font-size: x-small;
-  color: #00aa00;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+.map-action {
+  display: none;
 }
+.map-actions a {
+  color: #bfbfbf;
+  text-decoration: underline;
+  cursor: pointer;
+}
--- a/preview/hip.html	Wed Jul 16 17:05:37 2008 -0700
+++ b/preview/hip.html	Mon Jul 21 12:04:08 2008 -0700
@@ -17,6 +17,7 @@
   <p>Pretend this box is your selection, OK?
     <input id="fake-selection" type="text" size="40" />
   </p>
+  
    
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="date.js"></script>
--- a/preview/hip.js	Wed Jul 16 17:05:37 2008 -0700
+++ b/preview/hip.js	Mon Jul 21 12:04:08 2008 -0700
@@ -71,13 +71,8 @@
 };
 
 
-<<<<<<< local
-var gQs = new QuerySource([ fly, define, google, go, close, open, translate, email, nuke, encrypt, wiki, calendarize ],
-			  [city, language, tab, person, application, DateNounType, AddressNounType]);
-=======
 var gQs = new QuerySource([ fly, define, google, go, close, open, translate, email, map, nuke, encrypt, wiki ],
 			  [city, language, tab, person, application]);
->>>>>>> other
 
 function makeSuggestionHtml( tagName, list, hilitedNumber ) {
   var result = "";
@@ -93,16 +88,74 @@
   return result;
 }
 
-function loadMap(lat, lng) {
+var map;
+var mapControl = new GSmallMapControl();
+var mapType = new GMapTypeControl();
+
+function loadMap(lat, lng, index) {
+
+  var curAddress = document.getElementsByClassName("gaddress-current");
+  curAddress[0].className = "gaddress";
+
+  var addresses = document.getElementsByClassName("gaddress");
+  for (var i=0; i < addresses.length; i++) {
+    if (i == index)
+      addresses[i].className = "gaddress-current";
+    else 
+      addresses[i].className = "gaddress";
+  }
+
+  $(".map-actions").hide();
+  $("#selected-address").hide();
   if (GBrowserIsCompatible()) {
-    var map = new GMap2(document.getElementById("map"));
+    map = new GMap2(document.getElementById("map"));
     var point = new GLatLng(lat, lng);
     map.setCenter(point, 13);
     map.addOverlay(new GMarker(point));
-    map.addControl(new GSmallMapControl());
+    map.disableDragging();
+    GEvent.addListener(map, "click", function() {showMapPreview(map);});
   }
 }
 
+function showAddressPreview() {
+  $(".suggestion").show();
+  $(".map-actions").hide();
+  $("#selected-address").hide();
+  //$(".gaddress").show();
+  $("#address-list").show();
+  document.getElementById("preview-pane-large").id = "preview-pane";
+  $("#map").width("225px");
+  $("#map").height("130px");
+  $("#map").css("border","5px solid #0066cc");
+
+  map.removeControl(mapControl);
+  map.removeControl(mapType);
+  map.disableDragging();
+}
+
+function showMapPreview(map) {
+  $(".suggestion").hide();
+  $("#address-list").hide();
+  
+  $("#selected-address").show();
+  document.getElementById("preview-pane").id = "preview-pane-large";
+  $("#selected-address").text($(".gaddress-current").text());
+  
+  map.addControl(mapControl);
+  map.addControl(mapType);
+  map.enableDragging();
+
+  $("#map").width("100%");
+  $("#map").height("85%");
+  $("#map").css("border-width","0px");
+  $("#map").css("border-style","none");
+  //$("#map").animate({ 
+  //  width: "100%",
+  //  height: "80%",
+  //}, 150);
+  $(".map-actions").show();
+  //setTimeout("$(\".map-actions\").show()", 175);  
+}
 
 function setPreview(type, searchTerm) {
   
@@ -163,35 +216,48 @@
         var placemark = jobj.Placemark[0];
         var lng0 = placemark.Point.coordinates[0];
         var lat0 = placemark.Point.coordinates[1];
-
-        var html = "<div id=\"address-list\">";
+        
+        
+        var html = "<div>" + "<div id=\"selected-address\"></div>" + 
+                   "<div class=\"map-actions\"> <a class=\"hand\" onclick=\"window.print();\" >Print</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class=\"hand\" onclick=\"alert('Call email command');\">Send</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class=\"hand\" >Link</a> </div>" + 
+                   "</div>" + 
+                   "<div id=\"map\" class=\"hand\" ></div>" + 
+                   "<div id=\"address-list\">";
         for (var i=0; i<numToDisplay; i++) {
           if (jobj.Placemark[i]) {
             var address = jobj.Placemark[i].address;
             var lng = jobj.Placemark[i].Point.coordinates[0];
             var lat = jobj.Placemark[i].Point.coordinates[1]; 
           
-            html = html + "<div class=\"gaddress\">" + 
-                          "<a href=# onclick=\"loadMap(" + lat + ", " + lng + ");\">" + 
-                          address + "</a></div>";
+            if (i == 0) {
+              html = html + "<div class=\"gaddress-current\">" + 
+                            "<a href=# onclick=\"loadMap(" + lat + ", " + lng + ", " + i + ");\">" + 
+                            address + "</a></div>";
+            }
+            else {
+              html = html + "<div class=\"gaddress\">" +  
+                            "<a href=# onclick=\"loadMap(" + lat + ", " + lng + ", " + i + ");\">" + 
+                            address + "</a></div>";
+            }
           }
         }
-        html = html + "<a id=\"gmaps-url\" href=\"http://maps.google.com/maps?key=" + apikey + "&q=" + encodeURIComponent(searchTerm) + "\">" + 
-                          "Go to google maps</a>" + 
-                      "</div>" + 
-                      "<div id=\"map\"></div>" + 
-                        "<input type=\"button\" id=\"map-accept-button\" value=\"Use this map\"\>"; 
+        
+        var googleMapsUrl = "http://maps.google.com/?q=" + encodeURIComponent(searchTerm);
+        html = html + "<div id=\"goto-gmaps\">&nbsp;&nbsp;&nbsp;<a href=" + googleMapsUrl + ">Open in Google Maps</a></div>";
+        
+        html = html + "</div>" + 
+                      "<div class=\"map-actions\"><a class=\"hand\" onclick=\"showAddressPreview();\" >Back</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a class=\"hand\" onclick=\"alert('Call current map command');\">Insert map in page</a></div>";
+                      
         $("#preview-pane").html(html);   
 
-        loadMap(lat0, lng0);
-      
+        loadMap(lat0, lng0, 0);
       } 
-
     });
-    
   }
 }
 
+
+
 function updateDisplay( number ) {
   var suggestions = gQs.getSuggestionsAsHtml();
   var hilitedSuggestion = gQs.getHilitedSuggestion();
@@ -271,6 +337,8 @@
         "width",
         $("#search-box").css("width")
     );
+    
+
 });
 
 /* Where to go next: