<!DOCTYPE html>
<html>
<!--
Copyright 2010 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>goog.ui.HoverCard</title>
<script src="../base.js"></script>
<script>
goog.require('goog.debug.DivConsole');
goog.require('goog.debug.LogManager');
goog.require('goog.log');
goog.require('goog.positioning.AnchoredPosition');
goog.require('goog.positioning.Corner');
goog.require('goog.ui.Component.EventType');
goog.require('goog.ui.HoverCard');
</script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/hovercard.css">
<style>
#personEmail {
font-style: italic;
}
.anchor {
font: bold;
color: white;
background-color: gray;
padding: 20px;
margin: 20px;
}
</style>
</head>
<body>
<h1>goog.ui.HoverCard</h1>
<p>
Show by mouse position:<br><br><br>
<span class="anchor" email="tom@gmail.com">Tom Smith</span>
<span class="anchor" email="dick@gmail.com">Dick Jones</span>
<span class="anchor" email="harry@gmail.com">Harry Brown</span>
<br><br><br>Show hovercard to the right:<br><br><br>
<span class="anchor" config="right" email="tom@gmail.com">Tom Smith</span>
<span class="anchor" config="right" email="dick@gmail.com">Dick Jones</span>
<span class="anchor" config="right"
email="harry@gmail.com">Harry Brown</span>
<br><br><br>Show hovercard below:<br><br><br>
<span class="anchor" config="down" email="tom@gmail.com">Tom Smith</span>
<span class="anchor" config="down" email="dick@gmail.com">Dick Jones</span>
<span class="anchor" config="down"
email="harry@gmail.com">Harry Brown</span>
<br><br><br>
</p>
<div id='profileCard' style="display:none;position:absolute">
<div style="position:relative;left:2px;z-index:100">
<table class="goog-hovercard-icons">
<tr>
<td>Email</td>
<td>Chat</td>
<td>More</td>
</tr>
</table>
<table class="goog-hovercard-content">
<tr>
<td valign="top">
<span id='personName'> </span><br />
<span id='personEmail'> </span>
</td>
</tr>
</table>
</div>
<script>
function writeDiv(top, left) {
var width = 300 + 10;
var height = 115 + 10;
document.write(
'<div class="goog-shadow" style="position:absolute;left:' +
left + 'px;top:' + top + 'px;width:' +
width + 'px;height:' + height + 'px;z-index:10" ></div>\n');
}
var y = 0;
var left = 0;
var size = 6;
for (var i = 0; i < size; ++i) {
for (var j = 0; j < size; ++j) {
writeDiv(y + i, left + j);
}
}
</script>
</div>
<!-- Event log. -->
<fieldset class="goog-debug-panel">
<legend>Event Log</legend>
<div id="log"></div>
</fieldset>
<br>
<div id="perf"></div>
<script>
var timer = goog.now();
// Set up a logger.
goog.debug.LogManager.getRoot().setLevel(goog.log.Level.ALL);
var logger = goog.log.getLogger('demo');
var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
logconsole.setCapturing(true);
var EVENTS = goog.object.getValues(goog.ui.HoverCard.EventType);
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
function logEvent(e) {
goog.log.info(logger, 'HoverCard dispatched: ' + e.type);
}
// Initialize hovercard object.
var hc;
hc = new goog.ui.HoverCard({SPAN: 'email'});
hc.setElement(goog.dom.getElement('profileCard'));
goog.events.listen(hc, goog.ui.HoverCard.EventType.TRIGGER,
onTrigger);
goog.events.listen(hc, goog.ui.HoverCard.EventType.BEFORE_SHOW,
onBeforeShow);
hc.className = 'goog-hovercard';
var config = {
'right': goog.positioning.Corner.TOP_RIGHT,
'down': goog.positioning.Corner.BOTTOM_LEFT
}
function onTrigger(event) {
// Usually, you will only need to respond to the TRIGGER event if
// you want hovercard triggers to have different behaviors.
var trigger = event.anchor;
var conf = trigger.getAttribute("config");
var pos = null;
if (conf) {
pos = new goog.positioning.AnchoredPosition(trigger, config[conf]);
}
hc.setPosition(pos);
return true;
}
function onBeforeShow() {
// This is where you typically set the contents of your hovercard,
// based on the triggering element.
var trigger = hc.getAnchorElement();
var email = trigger.getAttribute("email");
var name = trigger.innerHTML;
var emailEl = goog.dom.getElement('personEmail');
emailEl.innerHTML = email;
var nameEl = goog.dom.getElement('personName');
nameEl.innerHTML = name;
return true;
}
goog.events.listen(hc, EVENTS, logEvent);
goog.dom.setTextContent(goog.dom.getElement('perf'),
(goog.now() - timer) + 'ms');
</script>
</body>
</html>