Mercurial > hip

changeset 17:e4c22ff801f9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
updated preview branch to include preview screens for google and map commands
author Maria Emerson <memerson@mozilla.com>
date Mon, 14 Jul 2008 11:40:01 -0700
parents 70f3c0c7d7e1
children 4f03bdb9ac5b
files hip.html preview/hip.css preview/hip.html preview/hip.js preview/querySource.js preview/verbs.js
diffstat 6 files changed, 255 insertions(+), 72 deletions(-) [+]
line wrap: on
line diff
--- a/hip.html	Mon Jul 14 09:30:28 2008 -0700
+++ b/hip.html	Mon Jul 14 11:40:01 2008 -0700
@@ -1,13 +1,12 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" type="text/css" media="all"
 href="hip.css" />
-<title></title>
+<title>HIP</title>
 </head>
 <body>
+<script>alert('blah');</script>
 <div id="status-line">Blah!</div>
 <input id="search-box" type="text" size="40" />
 <div id="autocomplete-popup"></div>
@@ -23,7 +22,6 @@
 <p>japanese</p>
 <p>opera</p>
 <p>mexico city</p>
-</body>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="nounClasses.js"></script>
 <script type="text/javascript" src="verbClasses.js"></script>
@@ -31,4 +29,5 @@
 <script type="text/javascript" src="verbs.js"></script>
 <script type="text/javascript" src="querySource.js"></script>
 <script type="text/javascript" src="hip.js"></script>
+</body>
 </html>
--- a/preview/hip.css	Mon Jul 14 09:30:28 2008 -0700
+++ b/preview/hip.css	Mon Jul 14 11:40:01 2008 -0700
@@ -1,22 +1,89 @@
 #search-box {
-    border: 1px solid #000000;
-    background: #ffffff;
-    font: 24pt Helvetica;
-    padding: 4px;
+  border: 1px solid #000000;
+  background: #ffffff;
+  font: 24pt Helvetica;
+  padding: 4px;
 }
 
 #autocomplete-popup {
-    display: none;
-    border: 1px solid #000000;
-    font: 14pt Helvetica;
-    padding: 4px;
+  display: none;
+  border: 1px solid #000000;
+  font: 14pt Helvetica;
+  padding-bottom: 2px;
+  padding-top: 2px;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
 .hilited {
-    background: #00aa00;
+  background: #00aa00;
+}
+.suggestion {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  border-top: thin solid #000000;
 }
 
 .needarg {
-    font-style: italic;
-    color: #999999;
-}
\ No newline at end of file
+  font-style: italic;
+  color: #999999;
+}
+
+.gresult {
+  margin-bottom: 10px;
+}
+.gresult a {
+  font-size: small;
+}
+.gresult-url {
+  font-size: x-small;
+  color: #00aa00;
+}
+.gresult-content {
+  width: 650px;
+  font-size: x-small;  
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#preview-pane {
+  width: 650px;
+  height: 130px;
+  padding: 7px;
+}
+
+#map {
+  width: 225px;
+  height: 130px;
+  float: left;
+}
+
+.gaddress {
+  font-size: small;
+  margin-bottom: 10px;
+}
+#address-list {
+  float: left;
+  margin: 10px;
+  width: 300px;
+  height: 120px;
+}
+#map-actions {
+  padding-left: 10px;
+  width: 100px;
+  float: left;
+  margin: 3px;
+}
+#map-accept-button {
+  position: relative;
+  bottom: -10px;
+  right: -25px;
+  font-size: small;
+  margin-top: 100px;
+}
+#gmaps-url {
+  float: right;
+  margin-top: 20px;
+  font-size: x-small;
+  color: #00aa00;
+}
--- a/preview/hip.html	Mon Jul 14 09:30:28 2008 -0700
+++ b/preview/hip.html	Mon Jul 14 11:40:01 2008 -0700
@@ -1,29 +1,23 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<html>
 <head>
-<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
-<link rel="stylesheet" type="text/css" media="all"
-href="hip.css" />
-<title></title>
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <link rel="stylesheet" type="text/css" media="all" href="hip.css" />
+  <title>hip</title>
+
+  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSsTL4WIgxhMZ0ZK_kHjwHeQuOD4xQJpBVbSrqNn69S6DOTv203MQ5ufA"
+          type="text/javascript">
+  </script>
 </head>
+
+
 <body>
-<div id="status-line">Blah!</div>
-<input id="search-box" type="text" size="40" />
-<div id="autocomplete-popup"></div>
-<hr/>
-<p>Pretend this box is your selection, OK?
-<input id="fake-selection" type="text" size="40" /></p>
-<p>Here is some stuff that you can select on this page!</p>
-<p>New York</p>
-<p>thunder@mozilla.com</p>
-<p>el pollo loco</p>
-<p>http://www.evilbrainjono.net</p>
-<p>Oku no hosomichi</p>
-<p>japanese</p>
-<p>opera</p>
-<p>mexico city</p>
-</body>
+ <div id="status-line">Blah!</div>
+  <input id="search-box" type="text" size="40" />
+  <div id="autocomplete-popup"></div>
+  <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="nounClasses.js"></script>
 <script type="text/javascript" src="verbClasses.js"></script>
@@ -31,4 +25,5 @@
 <script type="text/javascript" src="verbs.js"></script>
 <script type="text/javascript" src="querySource.js"></script>
 <script type="text/javascript" src="hip.js"></script>
-</html>
+</body>
+</html>
\ No newline at end of file
--- a/preview/hip.js	Mon Jul 14 09:30:28 2008 -0700
+++ b/preview/hip.js	Mon Jul 14 11:40:01 2008 -0700
@@ -71,38 +71,152 @@
 };
 
 
-var gQs = new QuerySource([ fly, define, google, go, close, open, translate, email, nuke, encrypt, wiki ],
+var gQs = new QuerySource([ fly, define, google, go, close, open, translate, email, map, nuke, encrypt, wiki ],
 			  [city, language, tab, person, application]);
 
 function makeSuggestionHtml( tagName, list, hilitedNumber ) {
   var result = "";
-  var openingTag = "";
-  var closingTag = "</" + tagName + ">";
 
   for (var i = 0; i < list.length; i++) {
     if ( i == hilitedNumber ) {
-      openingTag = "<" + tagName + " class=\"hilited\">";
+      result += "<" + tagName + " class=\"hilited suggestion\">" + list[i] + "</" + tagName + ">";
+      result += "<div id=\"preview-pane\"/>"
     } else {
-      openingTag = "<" + tagName + ">";
+      result += "<" + tagName + " class=\"suggestion\">" + list[i] + "</" + tagName + ">";
     }
-    result += (openingTag + list[i] + closingTag );
   }
   return result;
 }
 
+function loadMap(lat, lng) {
+  if (GBrowserIsCompatible()) {
+    var 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());
+  }
+}
+
+
+function setPreview(type, searchTerm) {
+  
+  if (type == "google") {
+    var url = "http://ajax.googleapis.com/ajax/services/search/web";
+    var params = "v=1.0&q=" + encodeURIComponent(searchTerm);   
+   
+    $.ajax( {
+      type: "GET",
+      url: url, 
+      data: params,
+      dataType: "jsonp",
+      success: function(jobj) {
+        var count = jobj.responseData.cursor.estimatedResultCount;
+        var numToDisplay = 3;
+        var results = jobj.responseData.results;
+
+        var html = "";
+
+        if (numToDisplay < count) {
+          for (var i=0; i<numToDisplay; i++) {
+            var title = results[i].title;
+            var content = results[i].content;
+            var url = results[i].url;
+            var visibleUrl = results[i].visibleUrl;
+      
+            html = html + "<div class=\"gresult\">" + 
+                          "<a href='" + url + "'>" + title + "</a>" +  
+                          "<div class=\"gresult-content\">" + content + "</div>" + 
+                          "<div class=\"gresult-url\">" + visibleUrl + 
+                          "</div></div>";
+          }
+        }
+        $("#preview-pane").html(html);   
+      }
+    });
+  }
+  
+  else if (type == "map") {
+  
+    var url = "http://maps.google.com/maps/geo";
+    var apikey = "ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSsTL4WIgxhMZ0ZK_kHjwHeQuOD4xQJpBVbSrqNn69S6DOTv203MQ5ufA";
+    var params = "key=" + apikey + "&q=" + encodeURIComponent(searchTerm);   
+
+    $.ajax( {
+      type: "GET",
+      url: url, 
+      data: params,
+      dataType: "jsonp",
+      success: function(jobj) {
+        var numToDisplay = 3;
+        
+        if (!jobj.Placemark) {
+          $("#preview-pane").height("0px");
+          return;
+        }
+
+        var placemark = jobj.Placemark[0];
+        var lng0 = placemark.Point.coordinates[0];
+        var lat0 = placemark.Point.coordinates[1];
+
+        var html = "<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>";
+          }
+        }
+        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\"\>"; 
+        $("#preview-pane").html(html);   
+
+        loadMap(lat0, lng0);
+      
+      } 
+
+    });
+    
+  }
+}
+
 function updateDisplay( number ) {
-   var suggestions = gQs.getSuggestionsAsHtml();
-   var hilitedSuggestion = gQs.getHilitedSuggestion();
-   var description = gQs.getDescriptionText();
-   $("#status-line").html( description );
-   if ( hilitedSuggestion == -1 ) {
-     // TODO set #search-box background to green, not sure how
-   } else {
-     // TODO set #search-box background to white, not sure how
-   }
-   var ac = $("#autocomplete-popup");
-   ac.html( makeSuggestionHtml( "div", suggestions, hilitedSuggestion ) );
-   ac.show();
+  var suggestions = gQs.getSuggestionsAsHtml();
+  var hilitedSuggestion = gQs.getHilitedSuggestion();
+  var selection = getSelection();
+  
+  var ac = $("#autocomplete-popup");
+  ac.html( makeSuggestionHtml( "div", suggestions, hilitedSuggestion ) );
+
+  // PREVIEW PANE STUFF
+  // This should be done based on command and sentence structure above, not string parsing... yuck
+  if (selection != "") {
+    var curSuggestion = suggestions[hilitedSuggestion];
+    if (curSuggestion) {
+      var object = curSuggestion.substring(curSuggestion.indexOf(" "));
+      
+      if (curSuggestion.match("google") && !object.match("needarg")) {
+        setPreview("google", object);
+      }
+      else if (curSuggestion.match("map") && !object.match("needarg")) {
+        setPreview("map", object);
+      }
+      else 
+        $("#preview-pane").height("0px");
+    }
+  }   
+   
+  var description = gQs.getDescriptionText();
+  $("#status-line").html( description );
+
+  ac.show();
 }
 
 function searchBoxQuery( event ) {
--- a/preview/querySource.js	Mon Jul 14 09:30:28 2008 -0700
+++ b/preview/querySource.js	Mon Jul 14 11:40:01 2008 -0700
@@ -27,24 +27,24 @@
     // noun-first matches
     if (this._suggestionList.length == 0 ){
       for (x in this._nounTypeList) {
-	nounType = this._nounTypeList[x];
-	if (nounType.match( words[0] ) ){
-	  for (y in this._verbList) {
-	    verb = this._verbList[y];
-	    var prefix = verb.canPossiblyUseNounType(nounType);
-	    if (prefix) {
-	      var betterSentence = prefix + " " + query;
-	      words = betterSentence.split( " " );
-	      completions = verb.getCompletions(words.slice(1));
-	      this._suggestionList = this._suggestionList.concat(completions);
-	    }
-	  }
-	}
+        nounType = this._nounTypeList[x];
+        if (nounType.match( words[0] ) ){
+          for (y in this._verbList) {
+            verb = this._verbList[y];
+            var prefix = verb.canPossiblyUseNounType(nounType);
+            if (prefix) {
+              var betterSentence = prefix + " " + query;
+              words = betterSentence.split( " " );
+              completions = verb.getCompletions(words.slice(1));
+              this._suggestionList = this._suggestionList.concat(completions);
+            }
+          }
+        }
       }
     }
 
     // TODO sort in order of match quality
-    this._hilitedSuggestion = 1; // hilight the first suggestion by default
+    this._hilitedSuggestion = 0; // hilight the first suggestion by default
   },
 
   getSuggestionsAsHtml : function() {
--- a/preview/verbs.js	Mon Jul 14 09:30:28 2008 -0700
+++ b/preview/verbs.js	Mon Jul 14 11:40:01 2008 -0700
@@ -18,6 +18,14 @@
     return "Search for the definition of a word.";
   }
 };
+var map = new Verb( "map", "word", anyWord, {} );
+map.getDescription = function( directObject, mods ) {
+  if (directObject ) {
+    return "Map &quot;" + directObject + "&quot;";
+  } else {
+    return "Map a loction";
+  }
+};
 var google = new Verb( "google", "word", anyWord, {} );
 google.getDescription = function( directObject, mods ) {
   if (directObject ) {