hip
changeset 17:e4c22ff801f9
updated preview branch to include preview screens for google and map commands
| author | Maria Emerson <memerson@mozilla.com> |
|---|---|
| date | Mon Jul 14 11:40:01 2008 -0700 (3 years ago) |
| parents | 70f3c0c7d7e1 |
| children | 4f03bdb9ac5b |
| files | hip.html preview/hip.css preview/hip.html preview/hip.js preview/querySource.js preview/verbs.js |
line diff
1.1 --- a/hip.html Mon Jul 14 09:30:28 2008 -0700
1.2 +++ b/hip.html Mon Jul 14 11:40:01 2008 -0700
1.3 @@ -1,13 +1,12 @@
1.4 -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
1.5 - "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1.6 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
1.7 <head>
1.8 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
1.9 <link rel="stylesheet" type="text/css" media="all"
1.10 href="hip.css" />
1.11 -<title></title>
1.12 +<title>HIP</title>
1.13 </head>
1.14 <body>
1.15 +<script>alert('blah');</script>
1.16 <div id="status-line">Blah!</div>
1.17 <input id="search-box" type="text" size="40" />
1.18 <div id="autocomplete-popup"></div>
1.19 @@ -23,7 +22,6 @@
1.20 <p>japanese</p>
1.21 <p>opera</p>
1.22 <p>mexico city</p>
1.23 -</body>
1.24 <script type="text/javascript" src="jquery.js"></script>
1.25 <script type="text/javascript" src="nounClasses.js"></script>
1.26 <script type="text/javascript" src="verbClasses.js"></script>
1.27 @@ -31,4 +29,5 @@
1.28 <script type="text/javascript" src="verbs.js"></script>
1.29 <script type="text/javascript" src="querySource.js"></script>
1.30 <script type="text/javascript" src="hip.js"></script>
1.31 +</body>
1.32 </html>
2.1 --- a/preview/hip.css Mon Jul 14 09:30:28 2008 -0700
2.2 +++ b/preview/hip.css Mon Jul 14 11:40:01 2008 -0700
2.3 @@ -1,22 +1,89 @@
2.4 #search-box {
2.5 - border: 1px solid #000000;
2.6 - background: #ffffff;
2.7 - font: 24pt Helvetica;
2.8 - padding: 4px;
2.9 + border: 1px solid #000000;
2.10 + background: #ffffff;
2.11 + font: 24pt Helvetica;
2.12 + padding: 4px;
2.13 }
2.14
2.15 #autocomplete-popup {
2.16 - display: none;
2.17 - border: 1px solid #000000;
2.18 - font: 14pt Helvetica;
2.19 - padding: 4px;
2.20 + display: none;
2.21 + border: 1px solid #000000;
2.22 + font: 14pt Helvetica;
2.23 + padding-bottom: 2px;
2.24 + padding-top: 2px;
2.25 + padding-left: 4px;
2.26 + padding-right: 4px;
2.27 }
2.28
2.29 .hilited {
2.30 - background: #00aa00;
2.31 + background: #00aa00;
2.32 +}
2.33 +.suggestion {
2.34 + padding-top: 2px;
2.35 + padding-bottom: 2px;
2.36 + border-top: thin solid #000000;
2.37 }
2.38
2.39 .needarg {
2.40 - font-style: italic;
2.41 - color: #999999;
2.42 -}
2.43 \ No newline at end of file
2.44 + font-style: italic;
2.45 + color: #999999;
2.46 +}
2.47 +
2.48 +.gresult {
2.49 + margin-bottom: 10px;
2.50 +}
2.51 +.gresult a {
2.52 + font-size: small;
2.53 +}
2.54 +.gresult-url {
2.55 + font-size: x-small;
2.56 + color: #00aa00;
2.57 +}
2.58 +.gresult-content {
2.59 + width: 650px;
2.60 + font-size: x-small;
2.61 + white-space: nowrap;
2.62 + overflow: hidden;
2.63 +}
2.64 +
2.65 +#preview-pane {
2.66 + width: 650px;
2.67 + height: 130px;
2.68 + padding: 7px;
2.69 +}
2.70 +
2.71 +#map {
2.72 + width: 225px;
2.73 + height: 130px;
2.74 + float: left;
2.75 +}
2.76 +
2.77 +.gaddress {
2.78 + font-size: small;
2.79 + margin-bottom: 10px;
2.80 +}
2.81 +#address-list {
2.82 + float: left;
2.83 + margin: 10px;
2.84 + width: 300px;
2.85 + height: 120px;
2.86 +}
2.87 +#map-actions {
2.88 + padding-left: 10px;
2.89 + width: 100px;
2.90 + float: left;
2.91 + margin: 3px;
2.92 +}
2.93 +#map-accept-button {
2.94 + position: relative;
2.95 + bottom: -10px;
2.96 + right: -25px;
2.97 + font-size: small;
2.98 + margin-top: 100px;
2.99 +}
2.100 +#gmaps-url {
2.101 + float: right;
2.102 + margin-top: 20px;
2.103 + font-size: x-small;
2.104 + color: #00aa00;
2.105 +}
3.1 --- a/preview/hip.html Mon Jul 14 09:30:28 2008 -0700
3.2 +++ b/preview/hip.html Mon Jul 14 11:40:01 2008 -0700
3.3 @@ -1,29 +1,23 @@
3.4 -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3.5 - "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3.6 -<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3.7 +<html>
3.8 <head>
3.9 -<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
3.10 -<link rel="stylesheet" type="text/css" media="all"
3.11 -href="hip.css" />
3.12 -<title></title>
3.13 + <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
3.14 + <link rel="stylesheet" type="text/css" media="all" href="hip.css" />
3.15 + <title>hip</title>
3.16 +
3.17 + <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSsTL4WIgxhMZ0ZK_kHjwHeQuOD4xQJpBVbSrqNn69S6DOTv203MQ5ufA"
3.18 + type="text/javascript">
3.19 + </script>
3.20 </head>
3.21 +
3.22 +
3.23 <body>
3.24 -<div id="status-line">Blah!</div>
3.25 -<input id="search-box" type="text" size="40" />
3.26 -<div id="autocomplete-popup"></div>
3.27 -<hr/>
3.28 -<p>Pretend this box is your selection, OK?
3.29 -<input id="fake-selection" type="text" size="40" /></p>
3.30 -<p>Here is some stuff that you can select on this page!</p>
3.31 -<p>New York</p>
3.32 -<p>thunder@mozilla.com</p>
3.33 -<p>el pollo loco</p>
3.34 -<p>http://www.evilbrainjono.net</p>
3.35 -<p>Oku no hosomichi</p>
3.36 -<p>japanese</p>
3.37 -<p>opera</p>
3.38 -<p>mexico city</p>
3.39 -</body>
3.40 + <div id="status-line">Blah!</div>
3.41 + <input id="search-box" type="text" size="40" />
3.42 + <div id="autocomplete-popup"></div>
3.43 + <p>Pretend this box is your selection, OK?
3.44 + <input id="fake-selection" type="text" size="40" />
3.45 + </p>
3.46 +
3.47 <script type="text/javascript" src="jquery.js"></script>
3.48 <script type="text/javascript" src="nounClasses.js"></script>
3.49 <script type="text/javascript" src="verbClasses.js"></script>
3.50 @@ -31,4 +25,5 @@
3.51 <script type="text/javascript" src="verbs.js"></script>
3.52 <script type="text/javascript" src="querySource.js"></script>
3.53 <script type="text/javascript" src="hip.js"></script>
3.54 -</html>
3.55 +</body>
3.56 +</html>
3.57 \ No newline at end of file
4.1 --- a/preview/hip.js Mon Jul 14 09:30:28 2008 -0700
4.2 +++ b/preview/hip.js Mon Jul 14 11:40:01 2008 -0700
4.3 @@ -71,38 +71,152 @@
4.4 };
4.5
4.6
4.7 -var gQs = new QuerySource([ fly, define, google, go, close, open, translate, email, nuke, encrypt, wiki ],
4.8 +var gQs = new QuerySource([ fly, define, google, go, close, open, translate, email, map, nuke, encrypt, wiki ],
4.9 [city, language, tab, person, application]);
4.10
4.11 function makeSuggestionHtml( tagName, list, hilitedNumber ) {
4.12 var result = "";
4.13 - var openingTag = "";
4.14 - var closingTag = "</" + tagName + ">";
4.15
4.16 for (var i = 0; i < list.length; i++) {
4.17 if ( i == hilitedNumber ) {
4.18 - openingTag = "<" + tagName + " class=\"hilited\">";
4.19 + result += "<" + tagName + " class=\"hilited suggestion\">" + list[i] + "</" + tagName + ">";
4.20 + result += "<div id=\"preview-pane\"/>"
4.21 } else {
4.22 - openingTag = "<" + tagName + ">";
4.23 + result += "<" + tagName + " class=\"suggestion\">" + list[i] + "</" + tagName + ">";
4.24 }
4.25 - result += (openingTag + list[i] + closingTag );
4.26 }
4.27 return result;
4.28 }
4.29
4.30 +function loadMap(lat, lng) {
4.31 + if (GBrowserIsCompatible()) {
4.32 + var map = new GMap2(document.getElementById("map"));
4.33 + var point = new GLatLng(lat, lng);
4.34 + map.setCenter(point, 13);
4.35 + map.addOverlay(new GMarker(point));
4.36 + map.addControl(new GSmallMapControl());
4.37 + }
4.38 +}
4.39 +
4.40 +
4.41 +function setPreview(type, searchTerm) {
4.42 +
4.43 + if (type == "google") {
4.44 + var url = "http://ajax.googleapis.com/ajax/services/search/web";
4.45 + var params = "v=1.0&q=" + encodeURIComponent(searchTerm);
4.46 +
4.47 + $.ajax( {
4.48 + type: "GET",
4.49 + url: url,
4.50 + data: params,
4.51 + dataType: "jsonp",
4.52 + success: function(jobj) {
4.53 + var count = jobj.responseData.cursor.estimatedResultCount;
4.54 + var numToDisplay = 3;
4.55 + var results = jobj.responseData.results;
4.56 +
4.57 + var html = "";
4.58 +
4.59 + if (numToDisplay < count) {
4.60 + for (var i=0; i<numToDisplay; i++) {
4.61 + var title = results[i].title;
4.62 + var content = results[i].content;
4.63 + var url = results[i].url;
4.64 + var visibleUrl = results[i].visibleUrl;
4.65 +
4.66 + html = html + "<div class=\"gresult\">" +
4.67 + "<a href='" + url + "'>" + title + "</a>" +
4.68 + "<div class=\"gresult-content\">" + content + "</div>" +
4.69 + "<div class=\"gresult-url\">" + visibleUrl +
4.70 + "</div></div>";
4.71 + }
4.72 + }
4.73 + $("#preview-pane").html(html);
4.74 + }
4.75 + });
4.76 + }
4.77 +
4.78 + else if (type == "map") {
4.79 +
4.80 + var url = "http://maps.google.com/maps/geo";
4.81 + var apikey = "ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSsTL4WIgxhMZ0ZK_kHjwHeQuOD4xQJpBVbSrqNn69S6DOTv203MQ5ufA";
4.82 + var params = "key=" + apikey + "&q=" + encodeURIComponent(searchTerm);
4.83 +
4.84 + $.ajax( {
4.85 + type: "GET",
4.86 + url: url,
4.87 + data: params,
4.88 + dataType: "jsonp",
4.89 + success: function(jobj) {
4.90 + var numToDisplay = 3;
4.91 +
4.92 + if (!jobj.Placemark) {
4.93 + $("#preview-pane").height("0px");
4.94 + return;
4.95 + }
4.96 +
4.97 + var placemark = jobj.Placemark[0];
4.98 + var lng0 = placemark.Point.coordinates[0];
4.99 + var lat0 = placemark.Point.coordinates[1];
4.100 +
4.101 + var html = "<div id=\"address-list\">";
4.102 + for (var i=0; i<numToDisplay; i++) {
4.103 + if (jobj.Placemark[i]) {
4.104 + var address = jobj.Placemark[i].address;
4.105 + var lng = jobj.Placemark[i].Point.coordinates[0];
4.106 + var lat = jobj.Placemark[i].Point.coordinates[1];
4.107 +
4.108 + html = html + "<div class=\"gaddress\">" +
4.109 + "<a href=# onclick=\"loadMap(" + lat + ", " + lng + ");\">" +
4.110 + address + "</a></div>";
4.111 + }
4.112 + }
4.113 + html = html + "<a id=\"gmaps-url\" href=\"http://maps.google.com/maps?key=" + apikey + "&q=" + encodeURIComponent(searchTerm) + "\">" +
4.114 + "Go to google maps</a>" +
4.115 + "</div>" +
4.116 + "<div id=\"map\"></div>" +
4.117 + "<input type=\"button\" id=\"map-accept-button\" value=\"Use this map\"\>";
4.118 + $("#preview-pane").html(html);
4.119 +
4.120 + loadMap(lat0, lng0);
4.121 +
4.122 + }
4.123 +
4.124 + });
4.125 +
4.126 + }
4.127 +}
4.128 +
4.129 function updateDisplay( number ) {
4.130 - var suggestions = gQs.getSuggestionsAsHtml();
4.131 - var hilitedSuggestion = gQs.getHilitedSuggestion();
4.132 - var description = gQs.getDescriptionText();
4.133 - $("#status-line").html( description );
4.134 - if ( hilitedSuggestion == -1 ) {
4.135 - // TODO set #search-box background to green, not sure how
4.136 - } else {
4.137 - // TODO set #search-box background to white, not sure how
4.138 - }
4.139 - var ac = $("#autocomplete-popup");
4.140 - ac.html( makeSuggestionHtml( "div", suggestions, hilitedSuggestion ) );
4.141 - ac.show();
4.142 + var suggestions = gQs.getSuggestionsAsHtml();
4.143 + var hilitedSuggestion = gQs.getHilitedSuggestion();
4.144 + var selection = getSelection();
4.145 +
4.146 + var ac = $("#autocomplete-popup");
4.147 + ac.html( makeSuggestionHtml( "div", suggestions, hilitedSuggestion ) );
4.148 +
4.149 + // PREVIEW PANE STUFF
4.150 + // This should be done based on command and sentence structure above, not string parsing... yuck
4.151 + if (selection != "") {
4.152 + var curSuggestion = suggestions[hilitedSuggestion];
4.153 + if (curSuggestion) {
4.154 + var object = curSuggestion.substring(curSuggestion.indexOf(" "));
4.155 +
4.156 + if (curSuggestion.match("google") && !object.match("needarg")) {
4.157 + setPreview("google", object);
4.158 + }
4.159 + else if (curSuggestion.match("map") && !object.match("needarg")) {
4.160 + setPreview("map", object);
4.161 + }
4.162 + else
4.163 + $("#preview-pane").height("0px");
4.164 + }
4.165 + }
4.166 +
4.167 + var description = gQs.getDescriptionText();
4.168 + $("#status-line").html( description );
4.169 +
4.170 + ac.show();
4.171 }
4.172
4.173 function searchBoxQuery( event ) {
5.1 --- a/preview/querySource.js Mon Jul 14 09:30:28 2008 -0700
5.2 +++ b/preview/querySource.js Mon Jul 14 11:40:01 2008 -0700
5.3 @@ -27,24 +27,24 @@
5.4 // noun-first matches
5.5 if (this._suggestionList.length == 0 ){
5.6 for (x in this._nounTypeList) {
5.7 - nounType = this._nounTypeList[x];
5.8 - if (nounType.match( words[0] ) ){
5.9 - for (y in this._verbList) {
5.10 - verb = this._verbList[y];
5.11 - var prefix = verb.canPossiblyUseNounType(nounType);
5.12 - if (prefix) {
5.13 - var betterSentence = prefix + " " + query;
5.14 - words = betterSentence.split( " " );
5.15 - completions = verb.getCompletions(words.slice(1));
5.16 - this._suggestionList = this._suggestionList.concat(completions);
5.17 - }
5.18 - }
5.19 - }
5.20 + nounType = this._nounTypeList[x];
5.21 + if (nounType.match( words[0] ) ){
5.22 + for (y in this._verbList) {
5.23 + verb = this._verbList[y];
5.24 + var prefix = verb.canPossiblyUseNounType(nounType);
5.25 + if (prefix) {
5.26 + var betterSentence = prefix + " " + query;
5.27 + words = betterSentence.split( " " );
5.28 + completions = verb.getCompletions(words.slice(1));
5.29 + this._suggestionList = this._suggestionList.concat(completions);
5.30 + }
5.31 + }
5.32 + }
5.33 }
5.34 }
5.35
5.36 // TODO sort in order of match quality
5.37 - this._hilitedSuggestion = 1; // hilight the first suggestion by default
5.38 + this._hilitedSuggestion = 0; // hilight the first suggestion by default
5.39 },
5.40
5.41 getSuggestionsAsHtml : function() {
6.1 --- a/preview/verbs.js Mon Jul 14 09:30:28 2008 -0700
6.2 +++ b/preview/verbs.js Mon Jul 14 11:40:01 2008 -0700
6.3 @@ -18,6 +18,14 @@
6.4 return "Search for the definition of a word.";
6.5 }
6.6 };
6.7 +var map = new Verb( "map", "word", anyWord, {} );
6.8 +map.getDescription = function( directObject, mods ) {
6.9 + if (directObject ) {
6.10 + return "Map "" + directObject + """;
6.11 + } else {
6.12 + return "Map a loction";
6.13 + }
6.14 +};
6.15 var google = new Verb( "google", "word", anyWord, {} );
6.16 google.getDescription = function( directObject, mods ) {
6.17 if (directObject ) {