public
Last active

Instant Google+ Search with mustache.js

  • Download Gist
gistfile1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
<!--
* Copyright (c) 2011 Google Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<!doctype html>
<html><head>
<link href='//fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet'>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="//github.com/janl/mustache.js/raw/master/mustache.js"></script>
<style>
body { font-family: 'Droid Sans', sans-serif; background: #F1F1F1; }
ul { padding: 0; }
li { list-style-type: none; }
#request { text-align: center; font-size: 24pt; margin-top: 30px; }
#request input {
font-size: 24pt;
text-align: center;
color: #77a;
background: white url(http://www.google.com/images/icons/product/gplus-32.png) no-repeat left
}
#update {
border-top: 1px solid #EEE;
clear: both;
font-size: 13px;
line-height: 1.4;
padding: 0 20px;
position: relative;
box-sizing: border-box;
word-wrap: break-word;
}
#container {
background: white;
margin: 0 auto;
position: relative;
width: 960px;
}
</style>
<script>
var SEARCH_URL = "https://www.googleapis.com/plus/v1/activities?key=INSERT_GOOGLE_API_KEY&sortBy=best&query=";
var params = {dataType: 'jsonp'};
$(document).ready(function() {
var TEMPLATE = $('#update_template').html();
$('#message').keyup(function() {
params.url = SEARCH_URL + document.getElementById("message").value;
$.ajax(params).done(onData);
});
function onData(resp) {
if (resp.items) {
$('#updates').html(Mustache.to_html(TEMPLATE, resp));
}
}
});
</script>
</head>
<body>
<div id="request"><span><input id="message"/></span></div>
<div id="container"><ul id="updates"></ul></div>
<script id="update_template" type="text/x-mustache-tmpl">
{{%IMPLICIT-ITERATOR}}
{{#items}}
<li id="update">
{{#actor}}
<h3><span><img src="{{#image}}{{url}}{{/image}}?sz=48">
{{displayName}}
</span></h3>
{{/actor}}
{{#object}}
{{#attachments}}
{{#image}}<img src="{{url}}" />{{/image}}
{{/attachments}}
<div class="content">{{{content}}}</div>
{{/object}}
</li>
{{/items}}
</script>
</body></html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.