<!DOCTYPE html>
<html>
<!--
Copyright 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.
-->
<!--
File for testing bubble control.
-->
<head>
<title>goog.ui.Bubble</title>
<script src="../base.js"></script>
<script>
if (typeof goog == 'undefined') {
alert('Closure failed to load');
} else {
goog.require('goog.ui.Bubble');
}
</script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/bubble.css">
</head>
<body bgcolor="green">
<h1>goog.ui.Bubble</h1>
<table width="100%" align="center">
<tbody>
<tr>
<td>
<div align="left">
<form>
<input type="text" id="textField1"/>
<input type="button" id="button1" value="Click for a bubble!!!"
onclick="clickButton(button1, textField1);"/>
</form>
</div>
</td>
<td>
<div align="center">
<form>
<input type="text" id="textField2"/>
<input type="button" id="button2" value="Click for a bubble!!!"
onclick="clickButton(button2, textField2);"/>
</form>
</div>
</td>
<td>
<div align="right">
<form>
<input type="text" id="textField3"/>
<input type="button" id="button3" value="Click for a bubble!!!"
onclick="clickButton(button3, textField3);"/>
</form>
</div>
</td>
</tr>
<tr height>
<td>
<div align="left">
<form>
<input type="text" id="textField4"/>
<input type="button" id="button4" value="Click for a bubble!!!"
onclick="clickButton(button4, textField4);"/>
</form>
</div>
</td>
<td>
<br>
<div align="left">
<form>
<table>
<tbody>
<tr><td>X:</td>
<td><input type="text" id="xcoord" value="100"/></td>
</tr>
<tr><td>Y:</td>
<td><input type="text" id="ycoord" value="100"/></td>
</tr>
<tr><td>Corner orientation(0-3):</td>
<td><input type="text" id="corner" value="1"/></td>
</tr>
<tr><td>Auto-hide (true or false):</td>
<td><input type="text" id="autoHide" value="false"/></td>
</tr>
<tr><td>Timeout (ms):</td>
<td><input type="text" id="timeout" value="0"/></td>
<tr><td>Decorated</td>
<td><input type="checkbox" id="decorated"/></td>
<tr><td><input type="button" id="button5.0.0"
value="Click for a custom bubble!!!"
onclick=
"doCustom(xcoord, ycoord, corner, autoHide, timeout, decorated);"/>
</td><td><input type="button" id="button5.0.1"
value="Toggle custom button!"
onclick="toggleVisibility();"/>
</td>
</tr>
<tr><td><input type="button" id="button5.1"
value="Click for a random bubble!!!"
onclick="doRandom();"/>
</td></tr>
</tbody>
</table>
</form>
</div>
<br>
</td>
<td>
<div align="right">
<form>
<input type="text" id="textField6"/>
<input type="button" id="button6" value="Click for a bubble!!!"
onclick="clickButton(button6, textField6);"/>
</form>
</div>
</td>
</tr>
<tr>
<td height="30%">
<div align="left">
<form>
<input type="text" id="textField7"/>
<input type="button" id="button7" value="Click for a bubble!!!"
onclick="clickButton(button7, textField7);"/>
</form>
</div>
</td>
<td>
<div align="center">
<form>
<input type="text" id="textField8"/>
<input type="button" id="button8" value="Click for a bubble!!!"
onclick="clickButton(button8, textField8);"/>
</form>
</div>
</td>
<td>
<div align="right">
<form>
<input type="text" id="textField9"/>
<input type="button" id="button9" value="Click for a bubble!!!"
onclick="clickButton(button9, textField9);"/>
</form>
</div>
</td>
</tr>
</tbody>
</table>
<script>
var defaultTimeout = 10000;
var bubble = null;
function clickButton(anchor, textField) {
if (bubble) {
bubble.dispose();
bubble = null;
}
var textString = textField.value;
if (!textString) {
textString = 'Input here!';
anchor = textField;
}
bubble = new goog.ui.Bubble(textString);
bubble.setAutoHide(false);
bubble.setPosition(new goog.positioning.AnchoredPosition(anchor, null));
bubble.setTimeout(defaultTimeout);
bubble.render();
bubble.attach(anchor);
bubble.setVisible(true);
}
var decorated = false;
var bubbleC = null;
function doCustom(xcoord, ycoord, corner, autoHide, timeout, decorated) {
if (bubbleC) {
bubbleC.dispose();
bubbleC = null;
}
if (parseInt(xcoord.value) == NaN ||
parseInt(ycoord.value) == NaN ||
parseInt(corner.value) == NaN ||
parseInt(timeout.value) == NaN ||
(autoHide.value != "true" && autoHide.value != "false") ||
(corner.value < 0 || corner.value > 3)) {
alert('Incorrect input!');
return;
}
var internalElement = null;
if (decorated.checked) {
internalElement = goog.dom.createElement('div');
internalElement.innerHTML = '<table><tbody>' +
'<tr><td>One!</td><td>Two!</td></tr>' +
'<tr><td>Three!</td><td>Four!</td></tr>' +
'</tbody></table>';
} else {
internalElement = 'Random Bubble. La-la-la-la! La-la-la-la-la!!!';
}
bubbleC = new goog.ui.Bubble(internalElement);
bubbleC.setAutoHide(autoHide.value == "false" ? false : true);
bubbleC.setPinnedCorner(parseInt(corner.value));
bubbleC.setPosition(new goog.positioning.AbsolutePosition(
parseInt(xcoord.value), parseInt(ycoord.value)));
bubbleC.setTimeout(parseInt(timeout.value));
bubbleC.render();
bubbleC.setVisible(true);
}
function toggleVisibility () {
if (bubbleC) {
bubbleC.setVisible(!bubbleC.isVisible());
}
}
var timer = null;
function doRandom() {
if (timer) {
window.clearInterval(timer);
timer = null;
return;
}
doRandomClick();
timer = window.setInterval(doRandomClick, 2000);
}
function doRandomClick() {
for ( ; ; ) {
var number=Math.floor(Math.random()*9) + 1;
if (number != 5) {
break;
}
}
var button = document.getElementById("button" + number);
if (button) {
var defaultTimeoutSav = defaultTimeout;
defaultTimeout = 2000;
button.click ();
defaultTimeout = defaultTimeoutSav;
}
}
</script>
</body>
</html>
Codebase Browser
chromium