Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,78 @@
|
||||
<!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.AdvancedTooltip</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.events.EventType');
|
||||
goog.require('goog.ui.AdvancedTooltip');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<style>
|
||||
.goog-tooltip {
|
||||
background: lightyellow;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
padding: 1px;
|
||||
font: menu;
|
||||
}
|
||||
.tooltip {
|
||||
background: lightyellow;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
font: menu;
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.AdvancedTooltip</h1>
|
||||
<fieldset class="goog-debug-panel" style="display:none">
|
||||
<legend>Event Log</legend>
|
||||
<div id="log"></div>
|
||||
</fieldset>
|
||||
|
||||
<p>
|
||||
<button id="btn">Hover me</button>
|
||||
</p>
|
||||
|
||||
<script>
|
||||
var tooltip = new goog.ui.AdvancedTooltip('btn');
|
||||
tooltip.className = 'tooltip';
|
||||
tooltip.setHtml(
|
||||
"<h2>AdvancedTooltip</h2>" +
|
||||
"<ul><li>Move cursor towards the tooltip (<em>that's me!</em>) " +
|
||||
"and see that it remains open.</li>" +
|
||||
"<li>Before reaching it start moving the cursor in another " +
|
||||
"direction...</li>" +
|
||||
"<li>Once the cursor reaches the tooltip the cursor tracking is turned " +
|
||||
"off and a 10px 'padding' around it gets added. As long as the cursor " +
|
||||
"stays inside the box formed by the tooltip and the padding it remains " +
|
||||
"open.</li></ul><hr/><div style=\"text-align: center;\">" +
|
||||
"<button id=\"btn-nest\">Hover me</button> " +
|
||||
"<button id=\"btn-close\">Close</button></div>", true);
|
||||
tooltip.setHotSpotPadding(new goog.math.Box(5, 5, 5, 5));
|
||||
tooltip.setCursorTracking(true);
|
||||
tooltip.setMargin(new goog.math.Box(100, 0, 0, 100));
|
||||
tooltip.setHideDelayMs(250);
|
||||
|
||||
new goog.ui.AdvancedTooltip('btn-nest').setHtml(
|
||||
'Clicking<br> this<br> button<br> has no effect.');
|
||||
new goog.ui.Tooltip('btn-close', 'Closes tooltip');
|
||||
|
||||
goog.events.listen(document.getElementById('btn-close'),
|
||||
goog.events.EventType.CLICK, function(e) {
|
||||
tooltip.setVisible(false);
|
||||
}
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,149 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2007 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>
|
||||
<script src="../base.js"></script>
|
||||
|
||||
<script>
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.fx');
|
||||
goog.require('goog.fx.dom');
|
||||
goog.require('goog.fx.AnimationQueue');
|
||||
</script>
|
||||
<script>
|
||||
var sx = 5;
|
||||
var sy = 5;
|
||||
|
||||
var isForward = false;
|
||||
|
||||
var parallelForward;
|
||||
var parallelBackward;
|
||||
var serialForward;
|
||||
var serialBackward;
|
||||
var currentlyPlaying;
|
||||
|
||||
function createAnimations() {
|
||||
parallelForward = new goog.fx.AnimationParallelQueue();
|
||||
parallelBackward = new goog.fx.AnimationParallelQueue();
|
||||
serialForward = new goog.fx.AnimationSerialQueue();
|
||||
serialBackward = new goog.fx.AnimationSerialQueue();
|
||||
|
||||
// move forward at the same time
|
||||
parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block1"),
|
||||
[5, 5], [55, 50], 2000, goog.fx.easing.easeOut));
|
||||
parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block2"),
|
||||
[10, 5], [60, 50], 2000, goog.fx.easing.easeOut));
|
||||
parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block3"),
|
||||
[15, 5], [65, 50], 2000, goog.fx.easing.easeOut));
|
||||
parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block4"),
|
||||
[20, 5], [70, 50], 2000, goog.fx.easing.easeOut));
|
||||
parallelForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block5"),
|
||||
[25, 5], [75, 50], 2000, goog.fx.easing.easeOut));
|
||||
|
||||
// move backward at the same time
|
||||
parallelBackward.add(new goog.fx.dom.Slide(
|
||||
goog.dom.getElement("block1"),
|
||||
[55, 50], [5, 5], 2000, goog.fx.easing.easeOut));
|
||||
parallelBackward.add(new goog.fx.dom.Slide(
|
||||
goog.dom.getElement("block2"),
|
||||
[60, 50], [10, 5], 2000, goog.fx.easing.easeOut));
|
||||
parallelBackward.add(new goog.fx.dom.Slide
|
||||
(goog.dom.getElement("block3"),
|
||||
[65, 50], [15, 5], 2000, goog.fx.easing.easeOut));
|
||||
parallelBackward.add(new goog.fx.dom.Slide(
|
||||
goog.dom.getElement("block4"),
|
||||
[70, 50], [20, 5], 2000, goog.fx.easing.easeOut));
|
||||
parallelBackward.add(new goog.fx.dom.Slide(
|
||||
goog.dom.getElement("block5"),
|
||||
[75, 50], [25, 5], 2000, goog.fx.easing.easeOut));
|
||||
|
||||
// move forward in order
|
||||
serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block1"),
|
||||
[5, 5], [55, 50], 400, goog.fx.easing.easeOut));
|
||||
serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block2"),
|
||||
[10, 5], [60, 50], 400, goog.fx.easing.easeOut));
|
||||
serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block3"),
|
||||
[15, 5], [65, 50], 400, goog.fx.easing.easeOut));
|
||||
serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block4"),
|
||||
[20, 5], [70, 50], 400, goog.fx.easing.easeOut));
|
||||
serialForward.add(new goog.fx.dom.Slide(goog.dom.getElement("block5"),
|
||||
[25, 5], [75, 50], 400, goog.fx.easing.easeOut));
|
||||
|
||||
// move backward in order
|
||||
serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block1"),
|
||||
[55, 50], [5, 5], 400, goog.fx.easing.easeOut));
|
||||
serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block2"),
|
||||
[60, 50], [10, 5], 400, goog.fx.easing.easeOut));
|
||||
serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block3"),
|
||||
[65, 50], [15, 5], 400, goog.fx.easing.easeOut));
|
||||
serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block4"),
|
||||
[70, 50], [20, 5], 400, goog.fx.easing.easeOut));
|
||||
serialBackward.add(new goog.fx.dom.Slide(goog.dom.getElement("block5"),
|
||||
[75, 50], [25, 5], 400, goog.fx.easing.easeOut));
|
||||
}
|
||||
|
||||
function demoParallel() {
|
||||
if (isForward) {
|
||||
parallelBackward.play();
|
||||
currentlyPlaying = parallelBackward;
|
||||
} else {
|
||||
parallelForward.play();
|
||||
currentlyPlaying = parallelForward;
|
||||
}
|
||||
isForward = !isForward;
|
||||
}
|
||||
|
||||
function demoSerial() {
|
||||
if (isForward) {
|
||||
serialBackward.play();
|
||||
currentlyPlaying = serialBackward;
|
||||
} else {
|
||||
serialForward.play();
|
||||
currentlyPlaying = serialForward;
|
||||
}
|
||||
isForward = !isForward;
|
||||
}
|
||||
|
||||
function pause() {
|
||||
currentlyPlaying.pause();
|
||||
}
|
||||
|
||||
function resume(doRestart) {
|
||||
currentlyPlaying.play(doRestart);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.block {
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="block1" class="block" style="left: 5px; top: 5px"></div>
|
||||
<div id="block2" class="block" style="left: 10px; top: 5px"></div>
|
||||
<div id="block3" class="block" style="left: 15px; top: 5px"></div>
|
||||
<div id="block4" class="block" style="left: 20px; top: 5px"></div>
|
||||
<div id="block5" class="block" style="left: 25px; top: 5px"></div>
|
||||
|
||||
<script>
|
||||
createAnimations();
|
||||
</script>
|
||||
|
||||
<div style="margin-top:70px">
|
||||
<a href="javascript:demoParallel();">play parallel</a> |
|
||||
<a href="javascript:demoSerial();">play serial</a> | <br/>
|
||||
<a href="javascript:pause();">pause</a> |
|
||||
<a href="javascript:resume(false);">resume</a> |
|
||||
<a href="javascript:resume(true);">resume + restart</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!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.ac</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.ui.ac');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/autocomplete.css">
|
||||
<style>
|
||||
small {
|
||||
color: #999;
|
||||
font-size: x-small;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.ac</h1>
|
||||
<p>
|
||||
Tom Cruise Film Finder:<br>
|
||||
<input id="txtInput1" style="width:500px" /> <button>Go</button>
|
||||
</p>
|
||||
<p>
|
||||
Multi-Tom Cruise Film Finder:<br>
|
||||
<textarea id="txtInput2" style="width:500px"></textarea>
|
||||
<button>Go</button><br>
|
||||
<small>Data from Google Sets! Not my personal DVD collection!!!</small>
|
||||
</p>
|
||||
<script type="text/javascript">
|
||||
var tcMovies = [
|
||||
"Mission Impossible", "Top Gun","Jerry McGuire","Rain Man",
|
||||
"Days of Thunder", "Risky Business","Interview With The Vampire",
|
||||
"Eyes Wide Shut","Far And Away", "Jerry Maguire","The Firm","Cocktail",
|
||||
"A Few Good Men","Legend","Taps", "The Outsiders","Losin' It",
|
||||
"Endless Love","The Color Of Money", "All The Right Moves",
|
||||
"Minority Report","Magnolia","Mission Impossible 2",
|
||||
"Mission Impossible 3","Vanilla Sky","Ghost Soldiers","Few Good Men A",
|
||||
"Color of Money The","Firm The","Mission Impossible II","Outsiders The",
|
||||
"Young Guns","Top Gun DVD","Days of Thunder DVD","Coctail",
|
||||
"Mission Impossible DVD","Fallen Angels Vol 1","Don't Look at Me",
|
||||
"Young Guns uncredited"];
|
||||
|
||||
var ac1 = goog.ui.ac.createSimpleAutoComplete(
|
||||
tcMovies, document.getElementById('txtInput1'), false);
|
||||
var ac2 = goog.ui.ac.createSimpleAutoComplete(
|
||||
tcMovies, document.getElementById('txtInput2'), true);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2007 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.ac.Remote</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.ui.ac.AutoComplete');
|
||||
goog.require('goog.ui.ac.InputHandler');
|
||||
goog.require('goog.ui.ac.Renderer');
|
||||
goog.require('goog.ui.ac.RemoteArrayMatcher');
|
||||
goog.require('goog.ui.ac.CachingMatcher');
|
||||
goog.require('goog.ui.ac.Remote');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/autocomplete.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.ac.Remote</h1>
|
||||
|
||||
Google Buzzwords:<br>
|
||||
<input type="text" id="txtInput" style="width:500px"><br>
|
||||
<p>
|
||||
This data is being pulled from the server at
|
||||
<a href="autocompleteremotedata.js">autocompleteremotedata.js</a>.
|
||||
</p>
|
||||
<p>
|
||||
Ideally the server would perform a search on the query and would only
|
||||
return relevant results; however, this response is static.
|
||||
</p>
|
||||
|
||||
<script>
|
||||
var input = document.getElementById('txtInput');
|
||||
var ac = new goog.ui.ac.Remote('autocompleteremotedata.js',
|
||||
input);
|
||||
</script>
|
||||
|
||||
<h1>goog.ui.ac.CachingMatcher on top of goog.ui.ac.RemoteArrayMatcher</h1>
|
||||
|
||||
Google Buzzwords:<br>
|
||||
<input type="text" id="txtInput2" style="width:500px"><br>
|
||||
<p>
|
||||
This data is being pulled from the server at
|
||||
<a href="autocompleteremotedata.js">autocompleteremotedata.js</a>.
|
||||
</p>
|
||||
<p>
|
||||
This sets up a client-side cache of suggestions from the server, and matches
|
||||
against the client cache when the user types, while simultaneously making
|
||||
requests to the server in the background. The result feels more responsive
|
||||
than the goog.ui.ac.Remote, which has no client cache.
|
||||
</p>
|
||||
|
||||
<script>
|
||||
var input = document.getElementById('txtInput2');
|
||||
|
||||
var matcher = new goog.ui.ac.CachingMatcher(
|
||||
new goog.ui.ac.RemoteArrayMatcher('autocompleteremotedata.js'));
|
||||
// Note - we specify a very low throttle time (10ms) because we are serving
|
||||
// these responses directly from the client cache. By default, the
|
||||
// CachingMatcher already throttles the requests to its underlying matcher
|
||||
// to 1 request every 300ms.
|
||||
var inputHandler = new goog.ui.ac.InputHandler(null, null, false, 10);
|
||||
var renderer = new goog.ui.ac.Renderer();
|
||||
|
||||
var autoComplete = new goog.ui.ac.AutoComplete(
|
||||
matcher, renderer, inputHandler);
|
||||
inputHandler.attachAutoComplete(autoComplete);
|
||||
inputHandler.attachInputs(input);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,18 @@
|
||||
// Copyright 2010 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// 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.
|
||||
|
||||
/** @nocompile */
|
||||
|
||||
['Big Table', 'Googlebot', 'Instant Indexing', 'Mustang', 'Page Rank',
|
||||
'Proto Buffer']
|
||||
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2007 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.ac.RichRemote</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require("goog.array");
|
||||
goog.require("goog.dom");
|
||||
goog.require("goog.ui.ac.RichRemote");
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/autocomplete.css">
|
||||
<style type="text/css">
|
||||
.apple {
|
||||
background-color: #990033;
|
||||
color: #FFFFFF;
|
||||
margin: 3px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.citrus {
|
||||
background-color: #CCCC33;
|
||||
color: #FFFFFF;
|
||||
margin: 3px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.berry {
|
||||
background-color: #009933;
|
||||
color: #FFFFFF;
|
||||
margin: 3px;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.ac.RichRemote</h1>
|
||||
<p>
|
||||
Fruit Selector:<br>
|
||||
<input type="text" id="txtInput" style="width:500px"/>
|
||||
<input type="checkbox" id="berryAllergy" onclick="setFilter()"/>
|
||||
<label for="berryAllergy">berry allergy</label>
|
||||
<input type="checkbox" id="setHighlighting"
|
||||
onclick="setHighlighting()"/>
|
||||
<label for="setHighlighting">standard highlighting</label>
|
||||
<p>
|
||||
This data is being pulled from the server at
|
||||
<a href="autocompleterichremotedata.js">autocompleterichremotedata.js</a>.
|
||||
</p>
|
||||
<p>
|
||||
Ideally the server would perform a search on the query and would only
|
||||
return relevant results; however, this response is static.
|
||||
</p>
|
||||
</p>
|
||||
|
||||
<iframe id="wikipedia" width="900" height="600"></iframe>
|
||||
|
||||
<script>
|
||||
var makeRichRow_ = function(item, itemType, itemClassName) {
|
||||
item.type = itemType;
|
||||
|
||||
item.render = function(node, token) {
|
||||
var dom_ = goog.dom.getDomHelper(node);
|
||||
var typeNode = dom_.createDom("span", itemClassName);
|
||||
dom_.appendChild(typeNode, dom_.createTextNode(itemType));
|
||||
|
||||
var nameNode = dom_.createDom("span");
|
||||
dom_.appendChild(nameNode, dom_.createTextNode(item.name));
|
||||
|
||||
dom_.appendChild(node, typeNode);
|
||||
dom_.appendChild(node, nameNode);
|
||||
};
|
||||
|
||||
item.select = function(target) {
|
||||
target.value = item.name;
|
||||
wikipedia.src = item.url;
|
||||
};
|
||||
|
||||
return item;
|
||||
};
|
||||
|
||||
var apple = function(item) {
|
||||
return makeRichRow_(item, "Apple", "apple");
|
||||
};
|
||||
|
||||
var citrus = function(item) {
|
||||
return makeRichRow_(item, "Citrus", "citrus");
|
||||
};
|
||||
|
||||
var berry = function(item) {
|
||||
return makeRichRow_(item, "Berry", "berry");
|
||||
};
|
||||
|
||||
var input = document.getElementById("txtInput");
|
||||
var wikipedia = document.getElementById("wikipedia");
|
||||
var ac = new goog.ui.ac.RichRemote("autocompleterichremotedata.js",
|
||||
input);
|
||||
|
||||
// Set the autocomplete"s rowFilter appropriately
|
||||
var setFilter = function() {
|
||||
var checkbox = document.getElementById("berryAllergy");
|
||||
if (checkbox.checked) {
|
||||
ac.setRowFilter(filterOutBerries);
|
||||
} else {
|
||||
ac.setRowFilter();
|
||||
}
|
||||
};
|
||||
|
||||
// Set the autocomplete"s standard highlighting
|
||||
var setHighlighting = function() {
|
||||
var checkbox = document.getElementById("setHighlighting");
|
||||
ac.setUseStandardHighlighting(checkbox.checked);
|
||||
};
|
||||
|
||||
// Do not include berries in the search results
|
||||
var filterOutBerries = function(rows) {
|
||||
var filterFunction = function(item) { return item.type != "Berry"; };
|
||||
return goog.array.filter(rows, filterFunction);
|
||||
};
|
||||
|
||||
// When the page loads, make sure to set the filter appropriately
|
||||
window.onload = function() {
|
||||
setFilter();
|
||||
setHighlighting();
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
// Copyright 2010 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// 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.
|
||||
|
||||
/** @nocompile */
|
||||
|
||||
[
|
||||
['apple',
|
||||
{name: 'Fuji', url: 'http://www.google.com/images?q=fuji+apple'},
|
||||
{name: 'Gala', url: 'http://www.google.com/images?q=gala+apple'},
|
||||
{name: 'Golden Delicious',
|
||||
url: 'http://www.google.com/images?q=golden delicious+apple'}
|
||||
],
|
||||
['citrus',
|
||||
{name: 'Lemon', url: 'http://www.google.com/images?q=lemon+fruit'},
|
||||
{name: 'Orange', url: 'http://www.google.com/images?q=orange+fruit'}
|
||||
],
|
||||
['berry',
|
||||
{name: 'Strawberry', url: 'http://www.google.com/images?q=strawberry+fruit'},
|
||||
{name: 'Blueberry', url: 'http://www.google.com/images?q=blueberry+fruit'},
|
||||
{name: 'Blackberry', url: 'http://www.google.com/images?q=blackberry+fruit'}
|
||||
]
|
||||
]
|
||||
@@ -0,0 +1,72 @@
|
||||
<!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.BidiInput</title>
|
||||
<script type="text/javascript" src="../base.js"></script>
|
||||
<script type="text/javascript">
|
||||
goog.require('goog.ui.BidiInput');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.BidiInput</h1>
|
||||
|
||||
<p>
|
||||
The direction of the input field changes automatically to RTL (right to left)
|
||||
if the contents is in an RTL language (e.g. Hebrew or Arabic).
|
||||
</p>
|
||||
|
||||
<fieldset>
|
||||
<legend>A decorated input: </legend>
|
||||
Text: <input type='text' id='c1' />
|
||||
<script type='text/javascript'>
|
||||
var c1 = new goog.ui.BidiInput();
|
||||
c1.decorate(goog.dom.getElement('c1'));
|
||||
</script>
|
||||
</fieldset>
|
||||
|
||||
<br />
|
||||
|
||||
<fieldset>
|
||||
<legend>An input created programmatically: </legend>
|
||||
Text: <span id='c2'></span> !
|
||||
|
||||
<script type='text/javascript'>
|
||||
var c2 = new goog.ui.BidiInput();
|
||||
c2.render(goog.dom.getElement('c2'));
|
||||
</script>
|
||||
</fieldset>
|
||||
|
||||
|
||||
<br />
|
||||
|
||||
<fieldset>
|
||||
<legend>A decorated textarea: </legend>
|
||||
<textarea id='c3'></textarea>
|
||||
<script type='text/javascript'>
|
||||
var c3 = new goog.ui.BidiInput();
|
||||
c3.decorate(goog.dom.getElement('c3'));
|
||||
</script>
|
||||
</fieldset>
|
||||
|
||||
<br />
|
||||
|
||||
<div dir='rtl'>
|
||||
<fieldset>
|
||||
<legend>Right to left div: </legend>
|
||||
<textarea id='c4'></textarea>
|
||||
<script type='text/javascript'>
|
||||
var c4 = new goog.ui.BidiInput();
|
||||
c4.decorate(goog.dom.getElement('c4'));
|
||||
</script>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2011 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.crypt.BlobHasher</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.crypt');
|
||||
goog.require('goog.crypt.BlobHasher');
|
||||
goog.require('goog.crypt.Md5');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.crypt.BlobHasher</h1>
|
||||
<table>
|
||||
<tr><td>File:</td><td>
|
||||
<input type="file" onchange="computeMD5(this.files[0]);">
|
||||
<input type="button" value="Abort" onclick="abort();">
|
||||
</td></tr>
|
||||
<tr><td>MD5:</td><td><div id="output" style="font-family:courier new,fixed" /></td></tr>
|
||||
</table>
|
||||
<script>
|
||||
|
||||
var hashFn = new goog.crypt.Md5();
|
||||
var blobHasher = new goog.crypt.BlobHasher(hashFn);
|
||||
var startTime = 0;
|
||||
|
||||
function computeMD5(file) {
|
||||
goog.events.listen(blobHasher, goog.crypt.BlobHasher.EventType.COMPLETE,
|
||||
function() {
|
||||
var hash = goog.crypt.byteArrayToHex(blobHasher.getHash());
|
||||
var time = goog.now() - startTime;
|
||||
display(hash + ' (' + time/1000 + 's)');
|
||||
});
|
||||
goog.events.listen(blobHasher, goog.crypt.BlobHasher.EventType.ABORT,
|
||||
function() {
|
||||
display('Aborted');
|
||||
});
|
||||
display('Computing...');
|
||||
startTime = goog.now();
|
||||
blobHasher.hash(file);
|
||||
}
|
||||
|
||||
function abort() {
|
||||
blobHasher.abort();
|
||||
}
|
||||
|
||||
function display(message) {
|
||||
document.getElementById('output').innerHTML = message;
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,250 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2007 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>
|
||||
@@ -0,0 +1,395 @@
|
||||
<!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.Button and goog.ui.ToggleButton</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.array');
|
||||
goog.require('goog.debug.DivConsole');
|
||||
goog.require('goog.debug.LogManager');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.events.EventType');
|
||||
goog.require('goog.log');
|
||||
goog.require('goog.object');
|
||||
goog.require('goog.ui.Button');
|
||||
goog.require('goog.ui.ButtonRenderer');
|
||||
goog.require('goog.ui.ButtonSide');
|
||||
goog.require('goog.ui.CustomButton');
|
||||
goog.require('goog.ui.CustomButtonRenderer');
|
||||
goog.require('goog.ui.FlatButtonRenderer');
|
||||
goog.require('goog.ui.LinkButtonRenderer');
|
||||
goog.require('goog.ui.ToggleButton');
|
||||
goog.require('goog.ui.decorate');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/button.css">
|
||||
<link rel="stylesheet" href="../css/custombutton.css">
|
||||
<link rel="stylesheet" href="../css/flatbutton.css">
|
||||
<link rel="stylesheet" href="../css/linkbutton.css">
|
||||
<style>
|
||||
/* Base class for all icon elements. */
|
||||
.icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 0 1px;
|
||||
background-image: url(../images/toolbar_icons.gif);
|
||||
background-repeat: no-repeat;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* "Highlight" icon. */
|
||||
.highlight-icon{
|
||||
background-position: -64px;
|
||||
}
|
||||
|
||||
/* "Insert Image" icon. */
|
||||
.insert-image-icon {
|
||||
background-position: -80px;
|
||||
}
|
||||
|
||||
/* Custom style for the "default" button. */
|
||||
.default-button {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.Button</h1>
|
||||
<fieldset>
|
||||
<legend>
|
||||
The first <strong>Button</strong> was created programmatically,
|
||||
the second by decorating an <strong><input></strong> element:
|
||||
</legend>
|
||||
<div id="b1"></div>
|
||||
<label>
|
||||
Enable button:<input type="checkbox" id="b1_enable" checked/>
|
||||
</label>
|
||||
<br/>
|
||||
<br/>
|
||||
<input type="button" id="b2" title="Tooltip extracted from title"
|
||||
value="My Button" disabled="true"/><br/>
|
||||
<label>Enable button:<input type="checkbox" id="b2_enable"/></label>
|
||||
<br/>
|
||||
</fieldset>
|
||||
<br/>
|
||||
|
||||
<h2>goog.ui.FlatButtonRenderer</h2>
|
||||
<fieldset>
|
||||
<legend>
|
||||
Buttons made with <strong><div></strong>'s instead of
|
||||
<strong><input></strong>'s or <strong><button></strong>'s
|
||||
The first rendered, the second decorated:
|
||||
</legend>
|
||||
<div id="fb1"></div>
|
||||
<label>
|
||||
Enable button:<input type="checkbox" id="fb1_enable" checked/>
|
||||
</label>
|
||||
<br/>
|
||||
<br/>
|
||||
<div id="fb2" class="goog-flat-button goog-flat-button-disabled"
|
||||
title="Tooltip extracted from title">My Flat Button</div><br/>
|
||||
<label>Enable button:<input type="checkbox" id="fb2_enable"/></label>
|
||||
<br/>
|
||||
<br/>
|
||||
<div id="fb3" class="goog-flat-button goog-flat-button-collapse-right">
|
||||
Combined
|
||||
</div><div id="fb4" class="goog-flat-button goog-flat-button-collapse-left">
|
||||
Buttons
|
||||
</div>
|
||||
<br/>
|
||||
</fieldset>
|
||||
<br/>
|
||||
|
||||
<h2>goog.ui.LinkButtonRenderer</h2>
|
||||
<fieldset>
|
||||
<legend>
|
||||
Like FlatButtonRenderer, except the style makes the button appear to be a
|
||||
link.
|
||||
</legend>
|
||||
<div id="lb"></div>
|
||||
<label>
|
||||
Enable button:<input type="checkbox" id="lb_enable" checked/>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<h2>goog.ui.CustomButton & goog.ui.ToggleButton</h2>
|
||||
<fieldset>
|
||||
<legend>
|
||||
These buttons were rendered using <strong>goog.ui.CustomButton</strong>:
|
||||
|
||||
</legend>
|
||||
<br/>
|
||||
These buttons were created programmatically:<br/>
|
||||
<div id="cb1"></div>
|
||||
<br/>
|
||||
These buttons were created by decorating some DIVs, and they dispatch
|
||||
state transition events (watch the event log):<br/>
|
||||
<div id="cb2">
|
||||
<!-- On FF2, if you don't enclose the contents of the button in a SPAN,
|
||||
the bold element isn't rendered. Works on every other browser. -->
|
||||
<div id="foo" class="goog-custom-button" title="Title specified in HTML">
|
||||
<span>Decorated <b>Button</b>, yay!</span>
|
||||
</div>
|
||||
<div id="bar" class="goog-custom-button goog-custom-button-disabled"
|
||||
title="Initialized to DISABLED in HTML...">Decorated Disabled</div>
|
||||
<div id="fee" class="goog-custom-button">Another Button</div>
|
||||
<div id="btn1"
|
||||
class="goog-custom-button goog-custom-button-collapse-right">
|
||||
Archive
|
||||
</div><div id="btn2" class="goog-custom-button goog-custom-button-collapse-right goog-custom-button-collapse-left">
|
||||
Delete
|
||||
</div><div id="btn3"
|
||||
class="goog-custom-button goog-custom-button-collapse-left">
|
||||
Report Spam
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
Use these <strong>ToggleButton</strong>s to hide/show and enable/disable
|
||||
the middle button:<br/>
|
||||
<div id="toggleEnable" class="goog-toggle-button"
|
||||
title="Click here to enable/disable the button above">Enable</div>
|
||||
|
||||
<div id="hideShow"
|
||||
class="goog-toggle-button goog-custom-button-checked"
|
||||
title="Click here to hide/show the button above">Show</div>
|
||||
<br/><br/>
|
||||
Combined toggle buttons:<br/>
|
||||
<div id="btn4" class="goog-toggle-button goog-custom-button-collapse-right">
|
||||
Bold
|
||||
</div><div id="btn5" class="goog-toggle-button goog-custom-button-collapse-right goog-custom-button-collapse-left">
|
||||
Italics
|
||||
</div><div id="btn6" class="goog-toggle-button goog-custom-button-collapse-left goog-custom-button-checked">
|
||||
Underlined
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
These buttons have icons, and the second one has an extra CSS class:<br/>
|
||||
<div id="iconbuttons"></div>
|
||||
<br/>
|
||||
<span class="hint">
|
||||
The button with the <span style="font-weight:bold;color:orange;">orange
|
||||
outline</span> has keyboard focus. Hit Enter to activate focused buttons.
|
||||
</span>
|
||||
</fieldset>
|
||||
<br/>
|
||||
<div id="perf"></div>
|
||||
<!-- Event log. -->
|
||||
<fieldset class="goog-debug-panel">
|
||||
<legend>Event Log</legend>
|
||||
<div id="log"></div>
|
||||
</fieldset>
|
||||
<script type="text/javascript">
|
||||
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.Component.EventType);
|
||||
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
||||
|
||||
function logEvent(e) {
|
||||
goog.log.info(logger, '"' + e.target.getCaption() + '" dispatched: ' + e.type);
|
||||
}
|
||||
|
||||
// Create the first button programmatically.
|
||||
var b1 = new goog.ui.Button('Hello!');
|
||||
b1.render(goog.dom.getElement('b1'));
|
||||
b1.setTooltip('I changed the tooltip using setTooltip() ' +
|
||||
'after the button was rendered.');
|
||||
goog.events.listen(b1, EVENTS, logEvent);
|
||||
|
||||
goog.events.listen(goog.dom.getElement('b1_enable'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
b1.setEnabled(e.target.checked);
|
||||
});
|
||||
|
||||
goog.events.listen(b1, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
var newCaption = window.prompt('Enter new caption for button:');
|
||||
b1.setCaption(newCaption || 'Empty');
|
||||
});
|
||||
|
||||
// Create the second button by decorating an element.
|
||||
var b2 = new goog.ui.Button();
|
||||
b2.decorate(goog.dom.getElement('b2'));
|
||||
goog.events.listen(b2, EVENTS, logEvent);
|
||||
|
||||
goog.events.listen(goog.dom.getElement('b2_enable'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
b2.setEnabled(e.target.checked);
|
||||
});
|
||||
|
||||
goog.events.listen(b2, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
alert('The value of the button is: ' + b2.getValue());
|
||||
});
|
||||
|
||||
|
||||
// Create flat buttons that use divs instead of button or input elements.
|
||||
// Render 1st flat button.
|
||||
var fb1 = new goog.ui.Button('Hello!',
|
||||
goog.ui.FlatButtonRenderer.getInstance());
|
||||
fb1.render(goog.dom.getElement('fb1'));
|
||||
fb1.setTooltip('I changed the tooltip using setTooltip() ' +
|
||||
'after the button was rendered.');
|
||||
goog.events.listen(fb1, EVENTS, logEvent);
|
||||
|
||||
goog.events.listen(goog.dom.getElement('fb1_enable'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
fb1.setEnabled(e.target.checked);
|
||||
});
|
||||
|
||||
goog.events.listen(fb1, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
var newCaption = window.prompt('Enter new caption for button:');
|
||||
fb1.setCaption(newCaption || 'Empty');
|
||||
});
|
||||
|
||||
// Decorate 2nd flat button.
|
||||
var fb2 = goog.ui.decorate(goog.dom.getElement('fb2'));
|
||||
goog.events.listen(fb2, EVENTS, logEvent);
|
||||
|
||||
goog.events.listen(goog.dom.getElement('fb2_enable'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
fb2.setEnabled(e.target.checked);
|
||||
});
|
||||
|
||||
goog.events.listen(fb2, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
alert('The caption of the button is: ' + fb2.getCaption());
|
||||
});
|
||||
|
||||
// Decorate 3rd and 4th flat buttons.
|
||||
goog.ui.decorate(goog.dom.getElement('fb3'));
|
||||
goog.ui.decorate(goog.dom.getElement('fb4'));
|
||||
|
||||
// Create buttons that look like links.
|
||||
var lb = new goog.ui.Button('Hello!',
|
||||
goog.ui.LinkButtonRenderer.getInstance());
|
||||
lb.render(goog.dom.getElement('lb'));
|
||||
lb.setTooltip('I changed the tooltip using setTooltip() ' +
|
||||
'after the button was rendered.');
|
||||
goog.events.listen(lb, EVENTS, logEvent);
|
||||
|
||||
goog.events.listen(goog.dom.getElement('lb_enable'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
lb.setEnabled(e.target.checked);
|
||||
});
|
||||
|
||||
goog.events.listen(lb, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
var newCaption = window.prompt('Enter new caption for button:');
|
||||
lb.setCaption(newCaption || 'Empty');
|
||||
});
|
||||
|
||||
// Create some custom buttons.
|
||||
var disabledButton, leftButton, centerButton, rightButton;
|
||||
var customButtons = [
|
||||
new goog.ui.CustomButton('Button'),
|
||||
new goog.ui.CustomButton('Another Button'),
|
||||
disabledButton = new goog.ui.CustomButton('Disabled Button'),
|
||||
new goog.ui.CustomButton('Yet Another Button'),
|
||||
leftButton = new goog.ui.CustomButton('Left'),
|
||||
centerButton = new goog.ui.CustomButton('Center'),
|
||||
rightButton = new goog.ui.CustomButton('Right'),
|
||||
];
|
||||
disabledButton.setEnabled(false);
|
||||
leftButton.setCollapsed(goog.ui.ButtonSide.END);
|
||||
centerButton.setCollapsed(goog.ui.ButtonSide.BOTH);
|
||||
rightButton.setCollapsed(goog.ui.ButtonSide.START);
|
||||
goog.array.forEach(customButtons, function(b) {
|
||||
b.render(goog.dom.getElement('cb1'));
|
||||
goog.events.listen(b, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
var newCaption = window.prompt('Enter new caption for button:');
|
||||
b.setCaption(newCaption || 'Empty');
|
||||
});
|
||||
goog.events.listen(b, EVENTS, logEvent);
|
||||
});
|
||||
|
||||
// Decorate some custom buttons.
|
||||
var cb2 = [];
|
||||
var decoratedButtons = goog.array.map(
|
||||
['foo', 'bar', 'fee', 'btn1', 'btn2', 'btn3'],
|
||||
goog.dom.getElement);
|
||||
goog.array.forEach(decoratedButtons, function(element) {
|
||||
// Since the elements to be decorated each have the correct "marker" CSS
|
||||
// class ("goog-custom-button"), we can use the renderer registry to get
|
||||
// the appropriate control instance to decorate them.
|
||||
var button = goog.ui.decorate(element);
|
||||
button.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
cb2.push(button);
|
||||
goog.events.listen(button, EVENTS, logEvent);
|
||||
});
|
||||
|
||||
// Decorate toggle buttons.
|
||||
var toggleEnableElem = goog.dom.getElement('toggleEnable');
|
||||
var toggleEnable = goog.ui.decorate(toggleEnableElem);
|
||||
toggleEnable.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
goog.events.listen(toggleEnable, EVENTS, logEvent);
|
||||
|
||||
goog.events.listen(toggleEnable, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
cb2[1].setEnabled(e.target.isChecked());
|
||||
});
|
||||
|
||||
var hideShowElem = goog.dom.getElement('hideShow');
|
||||
var hideShow = new goog.ui.decorate(hideShowElem);
|
||||
hideShow.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
goog.events.listen(hideShow, EVENTS, logEvent);
|
||||
|
||||
goog.events.listen(hideShow, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
cb2[1].setVisible(e.target.isChecked());
|
||||
});
|
||||
|
||||
// Decorate combined toggle buttons.
|
||||
var cb3 = [];
|
||||
var combinedButtons = goog.array.map(['btn4', 'btn5', 'btn6'],
|
||||
goog.dom.getElement);
|
||||
goog.array.forEach(combinedButtons, function(element) {
|
||||
var button = goog.ui.decorate(element);
|
||||
button.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
cb3.push(button);
|
||||
goog.events.listen(button, EVENTS, logEvent);
|
||||
});
|
||||
|
||||
|
||||
// Use a DIV with a background image as the icon, and a SPAN as the caption.
|
||||
var iconbutton1 = new goog.ui.ToggleButton([
|
||||
goog.dom.createDom('div', 'icon insert-image-icon goog-inline-block'),
|
||||
goog.dom.createDom('span', {'style': 'vertical-align:middle'},
|
||||
'Insert Image')
|
||||
]);
|
||||
iconbutton1.render(goog.dom.getElement('iconbuttons'));
|
||||
goog.events.listen(iconbutton1, EVENTS, logEvent);
|
||||
|
||||
// Add a custom style, too.
|
||||
var iconbutton2 = new goog.ui.ToggleButton([
|
||||
goog.dom.createDom('div', 'icon highlight-icon goog-inline-block'),
|
||||
goog.dom.createDom('span', {'style': 'vertical-align:middle'},
|
||||
'Highlight Text')
|
||||
]);
|
||||
iconbutton2.addClassName('default-button');
|
||||
iconbutton2.render(goog.dom.getElement('iconbuttons'));
|
||||
goog.events.listen(iconbutton2, EVENTS, logEvent);
|
||||
|
||||
goog.dom.setTextContent(goog.dom.getElement('perf'),
|
||||
(goog.now() - timer) + 'ms');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,57 @@
|
||||
<!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.CharCounter</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.ui.CharCounter');
|
||||
goog.require('goog.ui.CharCounter.Display');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.CharCounter</h1>
|
||||
|
||||
<p>
|
||||
<input type="text" id="input1">
|
||||
<span id="counter1"></span> character(s) remaining
|
||||
</p>
|
||||
<p>
|
||||
<input type="text" id="input2">
|
||||
You have entered <span id="counter2"></span> character(s) of a maximum 160.
|
||||
</p>
|
||||
<p>
|
||||
<input type="text" id="input3">
|
||||
<span id="counter3"></span> character(s) remaining
|
||||
<button onclick="c3.setMaxLength(10);">setMaxLength(10)</button>
|
||||
<button onclick="c3.setMaxLength(20);">setMaxLength(20)</button>
|
||||
</p>
|
||||
<p>
|
||||
<textarea id="input4"></textarea>
|
||||
<span id="counter4"></span> character(s) remaining
|
||||
</p>
|
||||
|
||||
<script>
|
||||
|
||||
var c1 = new goog.ui.CharCounter(document.getElementById('input1'),
|
||||
document.getElementById('counter1'), 160);
|
||||
|
||||
var c2 = new goog.ui.CharCounter(document.getElementById('input2'),
|
||||
document.getElementById('counter2'), 160,
|
||||
goog.ui.CharCounter.Display.INCREMENTAL);
|
||||
|
||||
var c3 = new goog.ui.CharCounter(document.getElementById('input3'),
|
||||
document.getElementById('counter3'), 10);
|
||||
|
||||
var c4 = new goog.ui.CharCounter(document.getElementById('input4'),
|
||||
document.getElementById('counter4'), 255);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!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.CharPicker</title>
|
||||
<meta charset=utf-8>
|
||||
<!-- common css used by all closure demos; not required for char picker -->
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
|
||||
<!-- used only for button in this page; not required for char picker-->
|
||||
<link rel="stylesheet" href="../css/menubutton.css">
|
||||
|
||||
<!-- only required css for char picker -->
|
||||
<link rel="stylesheet" href="../css/charpicker.css">
|
||||
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.i18n.CharPickerData');
|
||||
goog.require('goog.i18n.uChar.LocalNameFetcher');
|
||||
goog.require('goog.ui.CharPicker');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#p1_value {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
p {
|
||||
height: 2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>goog.ui.CharPicker</h1>
|
||||
<p>You have selected: <span id="p1_value">none</span>
|
||||
<div id="char-picker"></div>
|
||||
|
||||
<script>
|
||||
var picker = new goog.ui.CharPicker(new goog.i18n.CharPickerData(),
|
||||
new goog.i18n.uChar.LocalNameFetcher(),
|
||||
["\uD869\uDED6", "a", "b", "c"], 10, 1);
|
||||
var el = goog.dom.getElement('char-picker');
|
||||
picker.decorate(el);
|
||||
|
||||
// Action on selection
|
||||
var selectionAction = function() {
|
||||
goog.dom.setTextContent(goog.dom.getElement('p1_value'),
|
||||
picker.getSelectedChar());
|
||||
};
|
||||
|
||||
// Get selected locale from the char picker.
|
||||
goog.events.listen(picker, 'action', function(e) { selectionAction(); });
|
||||
</script>
|
||||
<p>
|
||||
<input type="button" value="Dispose" onclick="picker.dispose()">
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!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.Checkbox</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.debug.DivConsole');
|
||||
goog.require('goog.debug.LogManager');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.log');
|
||||
goog.require('goog.ui.Checkbox');
|
||||
goog.require('goog.ui.Checkbox.State');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/checkbox.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.Checkbox</h1>
|
||||
<p>This is a tri-state checkbox.</p>
|
||||
<div>
|
||||
<span id="enable" class="goog-checkbox-checked"></span>Enable/disable</div>
|
||||
<br>
|
||||
<div><span id="all" class="goog-checkbox-undetermined"></span>root</div>
|
||||
<div style="margin-left: 1em;">
|
||||
<div><span id="leaf1" class="goog-checkbox-checked"></span>leaf 1</div>
|
||||
<div><span id="leaf2"></span>leaf 2</div>
|
||||
</div>
|
||||
<br>
|
||||
<div id="render">
|
||||
Created with render
|
||||
</div>
|
||||
<br>
|
||||
<div id="decorate">
|
||||
Created with decorate
|
||||
<span class="goog-checkbox"></span>
|
||||
<span class="goog-checkbox goog-checkbox-checked"></span>
|
||||
<span class="goog-checkbox goog-checkbox-undetermined"></span>
|
||||
<span class="goog-checkbox goog-checkbox-disabled"></span>
|
||||
</div>
|
||||
<br><br>
|
||||
<!-- Event log. -->
|
||||
<fieldset class="goog-debug-panel">
|
||||
<legend>Event Log for 'root', 'leaf1', 'leaf2'</legend>
|
||||
<div id="log" style="height: 500px"></div>
|
||||
</fieldset>
|
||||
<script type="text/javascript">
|
||||
// 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.Component.EventType);
|
||||
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
||||
function logEvent(name, e) {
|
||||
goog.log.info(logger, '"' + name + '" dispatched: ' + e.type);
|
||||
}
|
||||
|
||||
var all = new goog.ui.Checkbox();
|
||||
all.decorate(goog.dom.getElement('all'));
|
||||
all.setLabel(all.getElement().parentNode);
|
||||
goog.events.listen(all, EVENTS, goog.partial(logEvent, 'root'));
|
||||
|
||||
var leaf1 = new goog.ui.Checkbox();
|
||||
leaf1.decorate(goog.dom.getElement('leaf1'));
|
||||
leaf1.setLabel(leaf1.getElement().parentNode);
|
||||
goog.events.listen(leaf1, EVENTS, goog.partial(logEvent, 'leaf1'));
|
||||
|
||||
var leaf2 = new goog.ui.Checkbox();
|
||||
leaf2.decorate(goog.dom.getElement('leaf2'));
|
||||
leaf2.setLabel(leaf2.getElement().parentNode);
|
||||
goog.events.listen(leaf2, EVENTS, goog.partial(logEvent, 'leaf2'));
|
||||
|
||||
var enable = new goog.ui.Checkbox();
|
||||
enable.setLabel(goog.dom.getElement('enable').parentNode);
|
||||
enable.decorate(goog.dom.getElement('enable'));
|
||||
|
||||
var states = [false, true, null];
|
||||
goog.array.forEach(states, function(state) {
|
||||
new goog.ui.Checkbox(state).render(goog.dom.getElement('render'));
|
||||
});
|
||||
var checkbox = new goog.ui.Checkbox();
|
||||
checkbox.render(goog.dom.getElement('render'));
|
||||
checkbox.setEnabled(false);
|
||||
|
||||
var decorateNodes = goog.dom.getElementsByTagNameAndClass('span', null,
|
||||
goog.dom.getElement('decorate'));
|
||||
for (var i = 0, len = decorateNodes.length; i < len; i++) {
|
||||
goog.ui.decorate(decorateNodes[i]);
|
||||
}
|
||||
|
||||
function rootChanged(e) {
|
||||
leaf1.setChecked(all.getChecked());
|
||||
leaf2.setChecked(all.getChecked());
|
||||
}
|
||||
|
||||
function leafChanged(e) {
|
||||
var same = leaf1.getChecked() == leaf2.getChecked();
|
||||
all.setChecked(same ? leaf1.getChecked() :
|
||||
goog.ui.Checkbox.State.UNDETERMINED);
|
||||
}
|
||||
|
||||
function enableTree(enable) {
|
||||
all.setEnabled(enable);
|
||||
leaf1.setEnabled(enable);
|
||||
leaf2.setEnabled(enable);
|
||||
}
|
||||
|
||||
goog.events.listen(all, goog.ui.Component.EventType.CHANGE, rootChanged);
|
||||
goog.events.listen(leaf1, goog.ui.Component.EventType.CHANGE, leafChanged);
|
||||
goog.events.listen(leaf2, goog.ui.Component.EventType.CHANGE, leafChanged);
|
||||
goog.events.listen(enable, goog.ui.Component.EventType.CHANGE,
|
||||
function() { enableTree(enable.getChecked()); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,60 @@
|
||||
<!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>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Color Contrast Test</title>
|
||||
<style type="text/css" media="screen">
|
||||
#preview {
|
||||
margin-left: 1em;
|
||||
padding: 0.5em 1em;
|
||||
background: #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/javascript" src="../base.js"></script>
|
||||
|
||||
<p>
|
||||
#<input type="text" value="cccccc" id="color" size="6" maxlength="6">
|
||||
<input
|
||||
type="button"
|
||||
value="Black or White?"
|
||||
id="submit"
|
||||
onclick="blackOrWhite()">
|
||||
<span id="preview">This text should be readable</span>
|
||||
</p>
|
||||
<p>(Only choosing from black and white.)</p>
|
||||
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
goog.require('goog.color');
|
||||
|
||||
function blackOrWhite() {
|
||||
|
||||
var colorInput = document.getElementById('color');
|
||||
var previewElement = document.getElementById('preview');
|
||||
|
||||
var bgRgb = goog.color.hexToRgbStyle('#' + colorInput.value);
|
||||
var bgRgbArr = goog.color.parseRgb(bgRgb);
|
||||
|
||||
var bestColor = goog.color.highContrast(
|
||||
bgRgbArr, [[0, 0, 0], [255, 255, 255]]);
|
||||
|
||||
var bestColorHex = goog.color.rgbArrayToHex(bestColor);
|
||||
|
||||
console.info(bestColorHex + ' wins on sum');
|
||||
previewElement.style.backgroundColor = '#' + colorInput.value;
|
||||
previewElement.style.color = bestColorHex;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,218 @@
|
||||
<!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.ColorMenuButton</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.array');
|
||||
goog.require('goog.color');
|
||||
goog.require('goog.debug.DivConsole');
|
||||
goog.require('goog.debug.LogManager');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.log');
|
||||
goog.require('goog.object');
|
||||
goog.require('goog.ui.ColorMenuButton');
|
||||
goog.require('goog.ui.ColorMenuButtonRenderer');
|
||||
goog.require('goog.ui.Component.EventType');
|
||||
goog.require('goog.ui.CustomColorPalette');
|
||||
goog.require('goog.ui.Menu');
|
||||
goog.require('goog.ui.MenuItem');
|
||||
goog.require('goog.ui.Separator');
|
||||
goog.require('goog.ui.Toolbar');
|
||||
goog.require('goog.ui.ToolbarColorMenuButton');
|
||||
goog.require('goog.ui.ToolbarColorMenuButtonRenderer');
|
||||
goog.require('goog.ui.decorate');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/menu.css">
|
||||
<link rel="stylesheet" href="../css/menuitem.css">
|
||||
<link rel="stylesheet" href="../css/menuseparator.css">
|
||||
<link rel="stylesheet" href="../css/menubutton.css">
|
||||
<link rel="stylesheet" href="../css/custombutton.css">
|
||||
<link rel="stylesheet" href="../css/palette.css">
|
||||
<link rel="stylesheet" href="../css/colorpalette.css">
|
||||
<link rel="stylesheet" href="../css/colormenubutton.css">
|
||||
<link rel="stylesheet" href="../css/toolbar.css">
|
||||
<style>
|
||||
/* Text color. */
|
||||
.goog-text-color {
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
background: url(../images/toolbar_icons.gif) no-repeat -48px;
|
||||
}
|
||||
/* Background color. */
|
||||
.goog-bg-color {
|
||||
width: 15px;
|
||||
height: 13px;
|
||||
background: url(../images/toolbar_icons.gif) no-repeat -64px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>goog.ui.ColorMenuButton Demo</h2>
|
||||
<table border="0" cellpadding="0" cellspacing="4" width="100%">
|
||||
<tbody>
|
||||
<tr valign="top">
|
||||
<td width="67%">
|
||||
<fieldset>
|
||||
<legend><strong>goog.ui.ColorMenuButton</strong> demo:</legend>
|
||||
<div id="cmb1">This button was created programmatically: </div>
|
||||
<br>
|
||||
<div>
|
||||
This button decorates a <strong>DIV</strong>:
|
||||
<div id="cmb2" class="goog-color-menu-button"
|
||||
title="Decorated tooltip">Color</div>
|
||||
</div>
|
||||
<br>
|
||||
<div id="cmb3">This button has a custom color menu: </div>
|
||||
</fieldset>
|
||||
<br>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>
|
||||
<strong>goog.ui.ToolbarColorMenuButtonRenderer</strong> demo:
|
||||
</legend>
|
||||
<div id="tcmb1">
|
||||
This toolbar button was created programmatically:
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
This toolbar button decorates a <strong>DIV</strong>:
|
||||
<div id="tcmb2" class="goog-toolbar-color-menu-button"
|
||||
title="Decorated tooltip">Color</div>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
This is what these would look like in an actual toolbar, with
|
||||
icons instead of text captions:
|
||||
<br>
|
||||
<br>
|
||||
<div id="tb" class="goog-toolbar">
|
||||
<div id="textColor" class="goog-toolbar-color-menu-button"
|
||||
title="Text color">
|
||||
<div class="goog-text-color"></div>
|
||||
</div>
|
||||
<div id="bgColor" class="goog-toolbar-color-menu-button"
|
||||
title="Background color">
|
||||
<div class="goog-bg-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div dir="rtl">
|
||||
BiDi is all the rage these days
|
||||
<br>
|
||||
<br>
|
||||
<div id="tbRtl" class="goog-toolbar">
|
||||
<div id="textColorRtl" class="goog-toolbar-color-menu-button"
|
||||
title="Text color">
|
||||
<div class="goog-text-color"></div>
|
||||
</div>
|
||||
<div id="bgColorRtl" class="goog-toolbar-color-menu-button"
|
||||
title="Background color">
|
||||
<div class="goog-bg-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br>
|
||||
<br>
|
||||
</td>
|
||||
<td width="33%">
|
||||
<!-- Event log. -->
|
||||
<fieldset class="goog-debug-panel">
|
||||
<legend>Event Log</legend>
|
||||
<div id="log"></div>
|
||||
</fieldset>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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.Component.EventType);
|
||||
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
||||
|
||||
function logEvent(e) {
|
||||
var component = e.target;
|
||||
var caption = (typeof component.getCaption == 'function' &&
|
||||
component.getCaption()) || component.getId();
|
||||
goog.log.info(logger, '"' + caption + '" dispatched: ' + e.type);
|
||||
}
|
||||
|
||||
// Create the first ColorMenuButton programmatically.
|
||||
var cmb1 = new goog.ui.ColorMenuButton('Color');
|
||||
cmb1.setTooltip('Click to select color');
|
||||
cmb1.setSelectedColor('#FF0000');
|
||||
cmb1.render(goog.dom.getElement('cmb1'));
|
||||
goog.events.listen(cmb1, EVENTS, logEvent);
|
||||
|
||||
// Decorate the second ColorMenuButton.
|
||||
var cmb2 = goog.ui.decorate(goog.dom.getElement('cmb2'));
|
||||
cmb2.setSelectedColor('#0000FF');
|
||||
goog.events.listen(cmb2, EVENTS, logEvent);
|
||||
|
||||
// Create a custom palette and add it to a menu.
|
||||
var customColorPalette = new goog.ui.CustomColorPalette(
|
||||
['#FE1', '#ACD', '#119']);
|
||||
customColorPalette.setSize(8);
|
||||
var customColorMenu = new goog.ui.Menu();
|
||||
customColorMenu.addItem(new goog.ui.MenuItem(
|
||||
'None', goog.ui.ColorMenuButton.NO_COLOR));
|
||||
customColorMenu.addItem(new goog.ui.Separator());
|
||||
customColorMenu.addItem(customColorPalette);
|
||||
|
||||
// Create a ColorMenuButton with a custom menu.
|
||||
var cmb3 = new goog.ui.ColorMenuButton('Custom', customColorMenu);
|
||||
cmb3.setTooltip('Click to select a custom color');
|
||||
// Currently, the "add custom color" dialog created by CustomColorPalette
|
||||
// blurs the button unless we set it to non-focusable.
|
||||
cmb3.setSupportedState(goog.ui.Component.State.FOCUSED, false);
|
||||
cmb3.render(goog.dom.getElement('cmb3'));
|
||||
goog.events.listen(cmb3, EVENTS, logEvent);
|
||||
|
||||
// Create the first toolbar-style ColorMenuButton programmatically.
|
||||
var tcmb1 = new goog.ui.ColorMenuButton('Color',
|
||||
goog.ui.ColorMenuButton.newColorMenu(),
|
||||
goog.ui.ToolbarColorMenuButtonRenderer.getInstance());
|
||||
tcmb1.render(goog.dom.getElement('tcmb1'));
|
||||
tcmb1.setTooltip('Click to select color');
|
||||
tcmb1.setSelectedColor('#FF00FF');
|
||||
goog.events.listen(tcmb1, EVENTS, logEvent);
|
||||
|
||||
// Decorate the second toolbar-style ColorMenuButton.
|
||||
var tcmb2 = goog.ui.decorate(goog.dom.getElement('tcmb2'));
|
||||
tcmb2.setSelectedColor('#FFFF00');
|
||||
goog.events.listen(tcmb2, EVENTS, logEvent);
|
||||
|
||||
// Decorate the sample toolbar.
|
||||
var tb = new goog.ui.Toolbar();
|
||||
tb.decorate(goog.dom.getElement('tb'));
|
||||
goog.events.listen(tb, EVENTS, logEvent);
|
||||
|
||||
// Decorate the BiDi toolbar.
|
||||
var tbRtl = new goog.ui.Toolbar();
|
||||
tbRtl.decorate(goog.dom.getElement('tbRtl'));
|
||||
goog.events.listen(tbRtl, EVENTS, logEvent);
|
||||
|
||||
// Perf and clean up
|
||||
goog.dom.setTextContent(goog.dom.getElement('perf'),
|
||||
(goog.now() - timer) + 'ms');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!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.ColorPicker</title>
|
||||
<script src="../base.js"></script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/colorpicker-simplegrid.css">
|
||||
<script>
|
||||
goog.require('goog.ui.ColorPicker');
|
||||
goog.require('goog.dom');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.ColorPicker</h1>
|
||||
|
||||
<p>Simple Color Grid</p>
|
||||
<div id="colorpicker02"></div>
|
||||
<p id="picker02message"></p>
|
||||
|
||||
<script>
|
||||
var picker02 = new goog.ui.ColorPicker.createSimpleColorGrid();
|
||||
picker02.render(goog.dom.getElement('colorpicker02'));
|
||||
|
||||
goog.events.listen(picker02, goog.ui.ColorPicker.EventType.CHANGE,
|
||||
function(event) {
|
||||
var color = event.target.getSelectedColor() || '#000000';
|
||||
var el = goog.dom.getElement('picker02message');
|
||||
el.innerHTML = 'You selected: ' + color;
|
||||
el.style.color = color;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,160 @@
|
||||
<!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.ComboBox</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.ui.ComboBox');
|
||||
goog.require('goog.debug.DivConsole');
|
||||
goog.require('goog.dispose');
|
||||
goog.require('goog.dom');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/menu.css">
|
||||
<link rel="stylesheet" href="../css/menuitem.css">
|
||||
<link rel="stylesheet" href="../css/menuseparator.css">
|
||||
<link rel="stylesheet" href="../css/combobox.css">
|
||||
<style>
|
||||
|
||||
html, body {
|
||||
overflow:hidden;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#log {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
right: 0%;
|
||||
height: 50%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#c {
|
||||
margin-bottom: 10px;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
/* Size the combobox so that it is sufficiently small to demonstrate the menu
|
||||
being positioned to left-align with the control. */
|
||||
.goog-combobox input {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
text-align: initial;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.ComboBox</h1>
|
||||
<div id="c">cb.value = '<span id="v"></span>'</div>
|
||||
|
||||
<fieldset style="float:left">
|
||||
<legend>LTR</legend>
|
||||
<div class="combo"></div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset style="float:right">
|
||||
<legend>LTR</legend>
|
||||
<div class="combo"></div>
|
||||
</fieldset>
|
||||
|
||||
<div style="text-align:center">
|
||||
<fieldset>
|
||||
<legend>LTR</legend>
|
||||
<div class="combo"></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<fieldset dir="rtl" style="float:left">
|
||||
<legend>RTL</legend>
|
||||
<div class="combo"></div>
|
||||
</fieldset>
|
||||
|
||||
<fieldset dir="rtl" style="float:right">
|
||||
<legend>RTL</legend>
|
||||
<div class="combo"></div>
|
||||
</fieldset>
|
||||
|
||||
<div style="text-align:center">
|
||||
<fieldset dir="rtl">
|
||||
<legend>RTL</legend>
|
||||
<div class="combo"></div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
|
||||
<div style="clear:both"></div>
|
||||
|
||||
<a href="javascript:void(logconsole.clear())">Clear Log</a>
|
||||
<div id="log"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// Set up a logger to track responses
|
||||
goog.debug.LogManager.getRoot().setLevel(goog.debug.Logger.Level.ALL);
|
||||
var logconsole = new goog.debug.DivConsole(document.getElementById('log'));
|
||||
logconsole.setCapturing(true);
|
||||
|
||||
function createTestComboBox() {
|
||||
var cb = new goog.ui.ComboBox();
|
||||
cb.setUseDropdownArrow(true);
|
||||
cb.setDefaultText('Select a folder...');
|
||||
|
||||
var caption = new goog.ui.ComboBoxItem('Select folder...');
|
||||
caption.setSticky(true);
|
||||
caption.setEnabled(false);
|
||||
cb.addItem(caption);
|
||||
|
||||
cb.addItem(new goog.ui.ComboBoxItem('Inbox'));
|
||||
cb.addItem(new goog.ui.ComboBoxItem('Bills & statements'));
|
||||
cb.addItem(new goog.ui.ComboBoxItem('Cal alumni'));
|
||||
cb.addItem(new goog.ui.ComboBoxItem('Calendar Stuff'));
|
||||
cb.addItem(new goog.ui.ComboBoxItem('Design'));
|
||||
cb.addItem(new goog.ui.ComboBoxItem('Music'));
|
||||
cb.addItem(new goog.ui.ComboBoxItem('Netflix'));
|
||||
cb.addItem(new goog.ui.ComboBoxItem('Personal'));
|
||||
cb.addItem(new goog.ui.ComboBoxItem('Photos'));
|
||||
cb.addItem(new goog.ui.ComboBoxItem('Programming languages'));
|
||||
cb.addItem(new goog.ui.MenuSeparator());
|
||||
|
||||
var newfolder = new goog.ui.ComboBoxItem('New Folder...');
|
||||
newfolder.setSticky(true);
|
||||
cb.addItem(newfolder);
|
||||
|
||||
return cb;
|
||||
}
|
||||
|
||||
var controls = [];
|
||||
var containerEls = goog.dom.getElementsByClass(goog.getCssName('combo'));
|
||||
for (var i = 0; i < containerEls.length; i++) {
|
||||
var cb = createTestComboBox();
|
||||
cb.render(containerEls[i]);
|
||||
goog.events.listen(cb, 'change', handleChangeEvent);
|
||||
controls.push(cb);
|
||||
}
|
||||
|
||||
function handleChangeEvent(e) {
|
||||
goog.dom.setTextContent(document.getElementById('v'), e.target.getValue());
|
||||
}
|
||||
|
||||
window.onbeforeunload = function() {
|
||||
goog.disposeAll(controls);
|
||||
};
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,670 @@
|
||||
<!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.Container</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.array');
|
||||
goog.require('goog.debug.DivConsole');
|
||||
goog.require('goog.debug.LogManager');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.events.EventType');
|
||||
goog.require('goog.log');
|
||||
goog.require('goog.object');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.ui.Container');
|
||||
goog.require('goog.ui.ContainerScroller');
|
||||
goog.require('goog.ui.Control');
|
||||
goog.require('goog.ui.CustomButton');
|
||||
goog.require('goog.ui.Menu');
|
||||
goog.require('goog.ui.MenuButton');
|
||||
goog.require('goog.ui.Option');
|
||||
goog.require('goog.ui.Select');
|
||||
goog.require('goog.ui.Separator');
|
||||
goog.require('goog.ui.ToggleButton');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/button.css">
|
||||
<link rel="stylesheet" href="../css/menubutton.css">
|
||||
<style>
|
||||
/* Demo styles for goog.ui.Control. */
|
||||
.goog-control {
|
||||
position: relative;
|
||||
margin: 2px;
|
||||
border: 2px solid #036;
|
||||
padding: 2px;
|
||||
font: normal 9pt "Trebuchet MS", Tahoma, Arial, sans-serif;
|
||||
color: #036;
|
||||
background-color:#69c;
|
||||
cursor: pointer;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.goog-control-disabled {
|
||||
border-color: #888;
|
||||
color: #888;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.goog-control-hover {
|
||||
border-color: #369;
|
||||
color: #369;
|
||||
background-color: #9cf;
|
||||
}
|
||||
|
||||
.goog-control-active,
|
||||
.goog-control-selected,
|
||||
.goog-control-checked {
|
||||
border-color: #9cf;
|
||||
color: #9cf;
|
||||
background-color: #369;
|
||||
}
|
||||
|
||||
.goog-control-focused {
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
/* Demo styles for goog.ui.Container */
|
||||
.goog-container {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background-color: #eee;
|
||||
outline: none !important;
|
||||
zoom: 1; /* The container element must have layout on IE. */
|
||||
}
|
||||
|
||||
.goog-container-vertical {
|
||||
width: 25ex;
|
||||
border: 1px solid #888;
|
||||
}
|
||||
|
||||
.goog-container-horizontal {
|
||||
border-bottom: 1px solid #d5d5d5;
|
||||
background: #fafafa url(../images/toolbar-bg.png) repeat-x bottom left;
|
||||
}
|
||||
|
||||
/* Additional demo styles. */
|
||||
|
||||
.goog-month .goog-menu-button-caption {
|
||||
width: 18ex;
|
||||
}
|
||||
|
||||
.goog-year .goog-menu-button-caption {
|
||||
width: 6ex;
|
||||
}
|
||||
|
||||
.goog-edit-font .goog-menu-button-caption {
|
||||
width: 15ex;
|
||||
}
|
||||
|
||||
.goog-edit-font-size .goog-menu-button-caption {
|
||||
width: 5ex;
|
||||
}
|
||||
|
||||
.goog-edit-bold {
|
||||
width: 14px;
|
||||
background: url(../images/toolbar_icons.gif) no-repeat -1px;
|
||||
}
|
||||
|
||||
.goog-edit-italic {
|
||||
width: 14px;
|
||||
background: url(../images/toolbar_icons.gif) no-repeat -17px;
|
||||
}
|
||||
|
||||
.goog-edit-underline {
|
||||
width: 14px;
|
||||
background: url(../images/toolbar_icons.gif) no-repeat -33px;
|
||||
}
|
||||
|
||||
#tb4_highlight_links span {
|
||||
border: 1px solid #888;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h2>goog.ui.Container</h2>
|
||||
<p><b>goog.ui.Container</b> is a base class for menus and toolbars.</p>
|
||||
<fieldset>
|
||||
<legend>These containers were created programmatically:</legend>
|
||||
<table border="0" cellpadding="8" cellspacing="0" width="100%">
|
||||
<tbody>
|
||||
<tr valign="top">
|
||||
<td width="50%" id="vc">
|
||||
Vertical container example:
|
||||
</td>
|
||||
<td width="50%" id="hc">
|
||||
Horizontal container example:
|
||||
</td>
|
||||
</tr>
|
||||
<tr valign="top">
|
||||
<td>
|
||||
<label>
|
||||
Show vertical container:
|
||||
<input type="checkbox" id="show_vc" checked>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Enable vertical container:
|
||||
<input type="checkbox" id="enable_vc" checked>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
Show Porthos:
|
||||
<input type="checkbox" id="show_porthos" checked>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Enable Porthos:
|
||||
<input type="checkbox" id="enable_porthos">
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
Enable transition events:
|
||||
<input type="checkbox" id="enable_vc_events" checked>
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<label>
|
||||
Show horizontal container:
|
||||
<input type="checkbox" id="show_hc" checked>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Enable horizontal container:
|
||||
<input type="checkbox" id="enable_hc" checked>
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
Show Doc:
|
||||
<input type="checkbox" id="show_doc" checked>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Enable Doc:
|
||||
<input type="checkbox" id="enable_doc">
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
Enable transition events:
|
||||
<input type="checkbox" id="enable_hc_events" checked>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<span class="hint">Try enabling and disabling containers with & without
|
||||
state transition events, and compare performance!</span>
|
||||
</fieldset>
|
||||
<br>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Non-focusable container with focusable controls:</legend>
|
||||
In this case, the container itself isn't focusable, but each control is:<br>
|
||||
<div id="nfc"></div>
|
||||
</fieldset>
|
||||
<br>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>Another horizontal container:</legend>
|
||||
<label>
|
||||
This is starting to look useful... Enable toolbar:
|
||||
<input type="checkbox" id="enable_tb" checked>
|
||||
</label>
|
||||
<div id="tb"></div>
|
||||
</fieldset>
|
||||
<br>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>A decorated container:</legend>
|
||||
<label>
|
||||
It's much easier to decorate than to create programmatically...
|
||||
Enable decorated toolbar:
|
||||
<input type="checkbox" id="enable_tb2">
|
||||
</label>
|
||||
<div id="tb2" class="goog-container-horizontal goog-container-disabled">
|
||||
<div id="month" class="goog-month goog-select">
|
||||
Select month
|
||||
<div class="goog-menu">
|
||||
<div class="goog-option">January</div>
|
||||
<div class="goog-option">February</div>
|
||||
<div class="goog-option">March</div>
|
||||
<div class="goog-option">April</div>
|
||||
<div class="goog-option">May</div>
|
||||
<div class="goog-option">June</div>
|
||||
<div class="goog-option">July</div>
|
||||
<div class="goog-option">August</div>
|
||||
<div class="goog-option">September</div>
|
||||
<div class="goog-option">October</div>
|
||||
<div class="goog-option">November</div>
|
||||
<div class="goog-option">December</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="year" class="goog-year goog-select">
|
||||
Year
|
||||
<div class="goog-menu">
|
||||
<div class="goog-option">2001</div>
|
||||
<div class="goog-option">2002</div>
|
||||
<div class="goog-option">2003</div>
|
||||
<div class="goog-option">2004</div>
|
||||
<div class="goog-option">2005</div>
|
||||
<div class="goog-option">2006</div>
|
||||
<div class="goog-option">2007</div>
|
||||
<div class="goog-option">2008</div>
|
||||
<div class="goog-option">2009</div>
|
||||
<div class="goog-option">2010</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="foo" class="goog-toggle-button">
|
||||
Toggle Button
|
||||
</div>
|
||||
<div id="bar" class="goog-toggle-button">
|
||||
<div><b><i>Fancy</i></b> Toggle Button</div>
|
||||
</div>
|
||||
<div id="fee" class="goog-toggle-button">
|
||||
Another Button
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>The same container, right-to-left:</legend>
|
||||
<label>
|
||||
Show right-to-left toolbar:
|
||||
<input type="checkbox" id="show_tb3" checked>
|
||||
</label>
|
||||
<label>
|
||||
Enable right-to-left toolbar:
|
||||
<input type="checkbox" id="enable_tb3">
|
||||
</label>
|
||||
<div id="tb3" class="goog-container-horizontal goog-container-disabled"
|
||||
dir="rtl">
|
||||
<div class="goog-month goog-select">
|
||||
Select month
|
||||
<div class="goog-menu" dir="rtl">
|
||||
<div class="goog-option">January</div>
|
||||
<div class="goog-option">February</div>
|
||||
<div class="goog-option">March</div>
|
||||
<div class="goog-option">April</div>
|
||||
<div class="goog-option">May</div>
|
||||
<div class="goog-option">June</div>
|
||||
<div class="goog-option">July</div>
|
||||
<div class="goog-option">August</div>
|
||||
<div class="goog-option">September</div>
|
||||
<div class="goog-option">October</div>
|
||||
<div class="goog-option">November</div>
|
||||
<div class="goog-option">December</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goog-year goog-select" dir="rtl">
|
||||
Year
|
||||
<div class="goog-menu">
|
||||
<div class="goog-option">2001</div>
|
||||
<div class="goog-option">2002</div>
|
||||
<div class="goog-option">2003</div>
|
||||
<div class="goog-option">2004</div>
|
||||
<div class="goog-option">2005</div>
|
||||
<div class="goog-option">2006</div>
|
||||
<div class="goog-option">2007</div>
|
||||
<div class="goog-option">2008</div>
|
||||
<div class="goog-option">2009</div>
|
||||
<div class="goog-option">2010</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goog-toggle-button">
|
||||
Toggle Button
|
||||
</div>
|
||||
<div class="goog-toggle-button">
|
||||
<div><b><i>Fancy</i></b> Toggle Button</div>
|
||||
</div>
|
||||
<div class="goog-toggle-button">
|
||||
Another Button
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br>
|
||||
<br>
|
||||
<fieldset>
|
||||
<legend>A scrolling container:</legend>
|
||||
<label>
|
||||
This container scrolls so that the highlighted item is visible.
|
||||
Here's a mix of block items and inline block items, which both work.
|
||||
</label>
|
||||
<p>
|
||||
Put focus in the text box and use the arrow keys:
|
||||
<input id="tb4_key_target">
|
||||
</p>
|
||||
<p>
|
||||
Or quick jump to item:
|
||||
<span id="tb4_highlight_links">
|
||||
<span>0</span> <span>1</span> <span>2</span> <span>3</span>
|
||||
<span>4</span> <span>5</span> <span>6</span> <span>7</span>
|
||||
<span>8</span> <span>9</span> <span>10</span> <span>11</span>
|
||||
<span>12</span> <span>13</span> <span>14</span> <span>15</span>
|
||||
</span>
|
||||
</p>
|
||||
<div id="tb4" class="goog-container-vertical"
|
||||
style="height: 100px; overflow-y: scroll">
|
||||
<div class="goog-month goog-menuitem">menuitem 0</div>
|
||||
<div class="goog-month goog-menuitem">menuitem 1</div>
|
||||
<div class="goog-month goog-menuitem">menuitem 2</div>
|
||||
<div class="goog-month goog-menuitem">menuitem 3</div>
|
||||
<div class="goog-month goog-toggle-button">tog 4</div>
|
||||
<div class="goog-month goog-toggle-button">tog 5</div>
|
||||
<div class="goog-month goog-toggle-button">tog 6</div>
|
||||
<div class="goog-month goog-toggle-button">toggley 7</div>
|
||||
<div class="goog-month goog-toggle-button">toggley 8</div>
|
||||
<div class="goog-month goog-toggle-button">toggley 9</div>
|
||||
<div class="goog-month goog-toggle-button">toggley 10</div>
|
||||
<div class="goog-month goog-toggle-button">toggley 11</div>
|
||||
<div class="goog-month goog-toggle-button">toggley 12</div>
|
||||
<div class="goog-month goog-toggle-button">toggley 13</div>
|
||||
<div class="goog-month goog-menuitem">menuitem 14</div>
|
||||
<div class="goog-month goog-menuitem">menuitem 15</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br>
|
||||
<br>
|
||||
<!-- Event log. -->
|
||||
<fieldset class="goog-debug-panel">
|
||||
<legend>Event Log</legend>
|
||||
<div id="log"></div>
|
||||
</fieldset>
|
||||
<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.Component.EventType);
|
||||
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
||||
|
||||
function logEvent(e) {
|
||||
var source =
|
||||
typeof e.target.getCaption == 'function' && e.target.getCaption() ||
|
||||
e.target.getId();
|
||||
goog.log.info(logger, '"' + source + '" dispatched: ' + e.type);
|
||||
}
|
||||
|
||||
// Programmatically create a vertical container.
|
||||
var vc = new goog.ui.Container();
|
||||
vc.setId('Vertical Container');
|
||||
goog.array.forEach(
|
||||
['Athos', 'Porthos', 'Aramis', 'd\'Artagnan'],
|
||||
function(item) {
|
||||
var c = new goog.ui.Control(item);
|
||||
c.setId(item);
|
||||
// For demo purposes, have controls dispatch transition events.
|
||||
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
vc.addChild(c, true);
|
||||
});
|
||||
vc.addChildAt(new goog.ui.Separator(), 3, true);
|
||||
vc.getChild('Porthos').setEnabled(false);
|
||||
vc.render(goog.dom.getElement('vc'));
|
||||
goog.events.listen(vc, EVENTS, logEvent);
|
||||
|
||||
// Hook up checkboxes.
|
||||
goog.events.listen(goog.dom.getElement('show_vc'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
var t = goog.now();
|
||||
vc.setVisible(e.target.checked);
|
||||
goog.log.info(logger, (e.target.checked ? 'Showed' : 'Hid') +
|
||||
' vertical container in ' + (goog.now() - t) + 'ms');
|
||||
});
|
||||
goog.events.listen(goog.dom.getElement('enable_vc'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
var t = goog.now();
|
||||
vc.setEnabled(e.target.checked);
|
||||
// If the container as a whole is disabled, you can't enable/disable
|
||||
// child controls.
|
||||
goog.dom.getElement('enable_porthos').disabled = !vc.isEnabled();
|
||||
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
||||
' vertical container in ' + (goog.now() - t) + 'ms');
|
||||
});
|
||||
goog.events.listen(goog.dom.getElement('show_porthos'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
vc.getChild('Porthos').setVisible(e.target.checked);
|
||||
});
|
||||
goog.events.listen(goog.dom.getElement('enable_porthos'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
vc.getChild('Porthos').setEnabled(e.target.checked);
|
||||
});
|
||||
goog.events.listen(goog.dom.getElement('enable_vc_events'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
vc.forEachChild(function(c) {
|
||||
if (e.target.checked) {
|
||||
// Enable all transition events.
|
||||
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
} else {
|
||||
// Disable all transition events (except for HOVER, which is used
|
||||
// by containers internally).
|
||||
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, false);
|
||||
c.setDispatchTransitionEvents(goog.ui.Component.State.HOVER,
|
||||
true);
|
||||
}
|
||||
});
|
||||
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
||||
' state transition events for this container\'s children');
|
||||
});
|
||||
|
||||
// Programmatically create a horizontal container.
|
||||
var hc = new goog.ui.Container(goog.ui.Container.Orientation.HORIZONTAL);
|
||||
hc.setId('Horizontal Container');
|
||||
|
||||
// Pre-render the container, just to do something different.
|
||||
hc.render(goog.dom.getElement('hc'));
|
||||
goog.array.forEach(
|
||||
['Happy', 'Sleepy', 'Doc', 'Bashful', 'Sneezy', 'Grumpy', 'Dopey'],
|
||||
function(item) {
|
||||
var c = new goog.ui.Control(item);
|
||||
c.addClassName('goog-inline-block');
|
||||
c.setId(item);
|
||||
// For demo purposes, have controls dispatch transition events.
|
||||
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
hc.addChild(c, true);
|
||||
});
|
||||
hc.getChild('Doc').setEnabled(false);
|
||||
goog.events.listen(hc, EVENTS, logEvent);
|
||||
|
||||
// Hook up checkboxes.
|
||||
goog.events.listen(goog.dom.getElement('show_hc'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
var t = goog.now();
|
||||
hc.setVisible(e.target.checked);
|
||||
goog.log.info(logger, (e.target.checked ? 'Showed' : 'Hid') +
|
||||
' horizontal container in ' + (goog.now() - t) + 'ms');
|
||||
});
|
||||
goog.events.listen(goog.dom.getElement('enable_hc'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
var t = goog.now();
|
||||
hc.setEnabled(e.target.checked);
|
||||
// If the container as a whole is disabled, you can't enable/disable
|
||||
// child controls.
|
||||
goog.dom.getElement('enable_doc').disabled = !hc.isEnabled();
|
||||
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
||||
' horizontal container in ' + (goog.now() - t) + 'ms');
|
||||
});
|
||||
goog.events.listen(goog.dom.getElement('show_doc'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
hc.getChild('Doc').setVisible(e.target.checked);
|
||||
});
|
||||
goog.events.listen(goog.dom.getElement('enable_doc'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
hc.getChild('Doc').setEnabled(e.target.checked);
|
||||
});
|
||||
goog.events.listen(goog.dom.getElement('enable_hc_events'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
hc.forEachChild(function(c) {
|
||||
if (e.target.checked) {
|
||||
// Enable all transition events.
|
||||
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
} else {
|
||||
// Disable all transition events (except for HOVER, which is used
|
||||
// by containers internally).
|
||||
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, false);
|
||||
c.setDispatchTransitionEvents(goog.ui.Component.State.HOVER,
|
||||
true);
|
||||
}
|
||||
});
|
||||
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
||||
' state transition events for this container\'s children');
|
||||
});
|
||||
|
||||
// Programmatically create a non-focusable container.
|
||||
var nfc = new goog.ui.Container(goog.ui.Container.Orientation.HORIZONTAL);
|
||||
nfc.setId('NonFocusableContainer');
|
||||
nfc.setFocusable(false);
|
||||
goog.array.forEach(['Vicky', 'Cristina', 'Barcelona'], function(item) {
|
||||
var c = new goog.ui.Control(item);
|
||||
c.setId(item);
|
||||
c.addClassName('goog-inline-block');
|
||||
// For demo purposes, have controls dispatch transition events.
|
||||
c.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
nfc.addChild(c, /* opt_render */ true);
|
||||
// Since the container itself is non-focusable, we need to make each
|
||||
// child individually focusable; this has to happen *after* addChild().
|
||||
// See e.g. bug http://b/1359754.
|
||||
c.setSupportedState(goog.ui.Component.State.FOCUSED, true);
|
||||
});
|
||||
nfc.render(goog.dom.getElement('nfc'));
|
||||
goog.events.listen(nfc, EVENTS, logEvent);
|
||||
|
||||
// Programmatically create a toolbar.
|
||||
var tb = new goog.ui.Container(goog.ui.Container.Orientation.HORIZONTAL);
|
||||
tb.setId('Toolbar');
|
||||
|
||||
// Programmatically create & add toolbar items.
|
||||
var fontMenu = new goog.ui.Select('Select font');
|
||||
fontMenu.setId('Font Menu');
|
||||
fontMenu.setTooltip('Font');
|
||||
fontMenu.addItem(new goog.ui.Option('Arial', 'Arial, sans-serif'));
|
||||
fontMenu.addItem(new goog.ui.Option('Courier', 'Courier, monospace'));
|
||||
fontMenu.addItem(new goog.ui.Option('Times', 'Times, serif'));
|
||||
fontMenu.addClassName('goog-edit-font');
|
||||
tb.addChild(fontMenu, true);
|
||||
|
||||
var sizeMenu = new goog.ui.Select(null);
|
||||
sizeMenu.setId('Font Size Menu');
|
||||
sizeMenu.setTooltip('Font Size');
|
||||
sizeMenu.addItem(new goog.ui.Option('8pt'));
|
||||
sizeMenu.addItem(new goog.ui.Option('10pt'));
|
||||
sizeMenu.addItem(new goog.ui.Option('12pt'));
|
||||
sizeMenu.addItem(new goog.ui.Option('16pt'));
|
||||
sizeMenu.setSelectedIndex(1);
|
||||
sizeMenu.addClassName('goog-edit-font-size');
|
||||
tb.addChild(sizeMenu, true);
|
||||
|
||||
var boldButton = new goog.ui.ToggleButton(goog.dom.createDom('div',
|
||||
'goog-edit-bold', '\u00A0'));
|
||||
boldButton.setId('Bold Button');
|
||||
boldButton.setTooltip('Bold');
|
||||
tb.addChild(boldButton, true);
|
||||
|
||||
var italicButton = new goog.ui.ToggleButton(goog.dom.createDom('div',
|
||||
'goog-edit-italic', '\u00A0'));
|
||||
italicButton.setId('Italic Button');
|
||||
italicButton.setTooltip('Italic');
|
||||
tb.addChild(italicButton, true);
|
||||
|
||||
var underlineButton = new goog.ui.ToggleButton(goog.dom.createDom('div',
|
||||
'goog-edit-underline', '\u00A0'));
|
||||
underlineButton.setId('Underline Button');
|
||||
underlineButton.setTooltip('Underline');
|
||||
tb.addChild(underlineButton, true);
|
||||
|
||||
tb.render(goog.dom.getElement('tb'));
|
||||
goog.events.listen(tb, EVENTS, logEvent);
|
||||
|
||||
// Hook up checkbox.
|
||||
goog.events.listen(goog.dom.getElement('enable_tb'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
var t = goog.now();
|
||||
tb.setEnabled(e.target.checked);
|
||||
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
||||
' toolbar in ' + (goog.now() - t) + 'ms');
|
||||
});
|
||||
|
||||
var tb2 = new goog.ui.Container();
|
||||
tb2.decorate(goog.dom.getElement('tb2'));
|
||||
goog.events.listen(tb2, EVENTS, logEvent);
|
||||
|
||||
// Hook up checkbox.
|
||||
goog.events.listen(goog.dom.getElement('enable_tb2'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
var t = goog.now();
|
||||
tb2.setEnabled(e.target.checked);
|
||||
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
||||
' toolbar in ' + (goog.now() - t) + 'ms');
|
||||
});
|
||||
|
||||
// BiDi container example:
|
||||
var tb3 = new goog.ui.Container();
|
||||
tb3.decorate(goog.dom.getElement('tb3'));
|
||||
goog.events.listen(tb3, EVENTS, logEvent);
|
||||
|
||||
// Hook up checkboxes.
|
||||
goog.events.listen(goog.dom.getElement('enable_tb3'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
var t = goog.now();
|
||||
tb3.setEnabled(e.target.checked);
|
||||
goog.log.info(logger, (e.target.checked ? 'Enabled' : 'Disabled') +
|
||||
' toolbar in ' + (goog.now() - t) + 'ms');
|
||||
});
|
||||
goog.events.listen(goog.dom.getElement('show_tb3'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
var t = goog.now();
|
||||
tb3.setVisible(e.target.checked);
|
||||
goog.log.info(logger, (e.target.checked ? 'Showed' : 'Hid') +
|
||||
' content element in ' + (goog.now() - t) + 'ms');
|
||||
});
|
||||
|
||||
// Scrolling container.
|
||||
var tb4 = new goog.ui.Container();
|
||||
tb4.decorate(goog.dom.getElement('tb4'));
|
||||
tb4.setKeyEventTarget(goog.dom.getElement('tb4_key_target'));
|
||||
tb4.setFocusable(true);
|
||||
new goog.ui.ContainerScroller(tb4);
|
||||
|
||||
goog.events.listen(goog.dom.getElement('tb4_highlight_links'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(event) {
|
||||
var index = parseInt(event.target.innerHTML, 10);
|
||||
if (!isNaN(index)) {
|
||||
tb4.getChildAt(index).setHighlighted(true);
|
||||
}
|
||||
});
|
||||
|
||||
goog.dom.setTextContent(goog.dom.getElement('perf'),
|
||||
(goog.now() - timer) + 'ms');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,477 @@
|
||||
<!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.Control Demo</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.array');
|
||||
goog.require('goog.debug.DivConsole');
|
||||
goog.require('goog.debug.LogManager');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.events.EventType');
|
||||
goog.require('goog.log');
|
||||
goog.require('goog.object');
|
||||
goog.require('goog.ui.Control');
|
||||
goog.require('goog.ui.ControlRenderer');
|
||||
goog.require('goog.ui.decorate');
|
||||
goog.require('goog.ui.registry');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<style>
|
||||
/* Demo styles for goog.ui.Control. */
|
||||
.goog-control {
|
||||
position: relative;
|
||||
width: 20ex;
|
||||
margin: 2px;
|
||||
border: 2px solid #036;
|
||||
padding: 2px;
|
||||
font: normal 9pt "Trebuchet MS", Tahoma, Arial, sans-serif;
|
||||
color: #036;
|
||||
background-color:#69c;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
-moz-outline: none;
|
||||
}
|
||||
|
||||
.goog-control-disabled {
|
||||
border-color: #888;
|
||||
color: #888;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.goog-control-hover {
|
||||
border-color: #369;
|
||||
color: #369;
|
||||
background-color: #9cf;
|
||||
}
|
||||
|
||||
.goog-control-active,
|
||||
.goog-control-selected,
|
||||
.goog-control-checked {
|
||||
border-color: #9cf;
|
||||
color: #9cf;
|
||||
background-color: #369;
|
||||
}
|
||||
|
||||
.goog-control-focused {
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
/* Custom control styles. */
|
||||
.goog-custom-control {
|
||||
position: relative;
|
||||
width: 25ex;
|
||||
margin: 4px 0;
|
||||
border: 2px solid #eee;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
outline: none;
|
||||
-moz-outline: none;
|
||||
}
|
||||
|
||||
.goog-custom-control-outer-box {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border: 2px solid #ddd;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.goog-custom-control-inner-box {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border: 2px solid #ccc;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.goog-custom-control-content {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
border: 2px solid #bbb;
|
||||
padding: 4px;
|
||||
font-family: Georgia, Times, serif;
|
||||
color: #ddd;
|
||||
background-color: #aaa;
|
||||
}
|
||||
|
||||
.goog-custom-control-hover {
|
||||
border-color: #eef;
|
||||
}
|
||||
|
||||
.goog-custom-control-hover .goog-custom-control-outer-box {
|
||||
border-color: #ddf;
|
||||
}
|
||||
|
||||
.goog-custom-control-hover .goog-custom-control-inner-box {
|
||||
border-color: #ccf;
|
||||
}
|
||||
|
||||
.goog-custom-control-hover .goog-custom-control-content {
|
||||
border-color: #bbf;
|
||||
background-color: #aaf;
|
||||
}
|
||||
|
||||
.goog-custom-control-active .goog-custom-control-content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.goog-custom-control-focused {
|
||||
border-style: dashed;
|
||||
border-color: orange;
|
||||
}
|
||||
|
||||
/* "Insert" button styles. */
|
||||
.goog-edit-insert-icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
background: url(../images/toolbar_icons.gif) no-repeat -80px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.goog-edit-insert-caption {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0 2px;
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Extra CSS styles. */
|
||||
.extra-red {
|
||||
border: 1px solid red;
|
||||
background-color: #fcc;
|
||||
}
|
||||
|
||||
.extra-blue {
|
||||
border: 1px solid blue;
|
||||
background-color: #ccf;
|
||||
}
|
||||
|
||||
.extra-thick-border {
|
||||
border-width: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.Control</h1>
|
||||
<table border="0" cellpadding="0" cellspacing="4" width="100%">
|
||||
<tbody>
|
||||
<tr valign="top">
|
||||
<td width="67%">
|
||||
<!-- Left pane -->
|
||||
<fieldset>
|
||||
<legend>This control was created programmatically: </legend>
|
||||
<div id="c1"></div>
|
||||
<br/>
|
||||
This control dispatches ENTER, LEAVE, and ACTION events on
|
||||
mouseover, mouseout, and mouseup, respectively. It supports
|
||||
keyboard focus.
|
||||
</fieldset>
|
||||
<br/>
|
||||
<fieldset>
|
||||
<legend>This was created by decorating a SPAN: </legend>
|
||||
<span id="c2"
|
||||
class="goog-inline-block goog-control goog-control-disabled"
|
||||
style="vertical-align:middle;">
|
||||
Decorated Example
|
||||
</span>
|
||||
<br/>
|
||||
<span id="hint" class="hint">
|
||||
You need to enable this component first.
|
||||
</span>
|
||||
<br/>
|
||||
<br/>
|
||||
This control is configured to dispatch state transition events in
|
||||
addition to ENTER, LEAVE, and ACTION. It also supports keyboard
|
||||
focus. Watch the event log as you interact with this component.
|
||||
<br/>
|
||||
<br/>
|
||||
<label>
|
||||
Click here to toggle the component's enabled status:
|
||||
<input type="checkbox" id="enable"/>
|
||||
</label>
|
||||
<br/>
|
||||
<label>
|
||||
Click here to toggle the component's visiblity:
|
||||
<input type="checkbox" id="visible" checked/>
|
||||
</label>
|
||||
</fieldset>
|
||||
<br/>
|
||||
<h3>Custom Renderers</h3>
|
||||
<fieldset>
|
||||
<legend>
|
||||
This control was created using a custom renderer:
|
||||
</legend>
|
||||
<div id="c3"></div>
|
||||
</fieldset>
|
||||
<br/>
|
||||
<fieldset>
|
||||
<legend>
|
||||
This was created by decorating a DIV via a custom renderer:
|
||||
</legend>
|
||||
<div id="c4" class="goog-custom-control">
|
||||
<span class="goog-inline-block goog-edit-insert-icon">
|
||||
|
||||
</span>
|
||||
<span class="goog-inline-block goog-edit-insert-caption">
|
||||
Insert Picture
|
||||
</span>
|
||||
</div>
|
||||
</fieldset>
|
||||
<br/>
|
||||
<h3>Extra CSS Styling</h3>
|
||||
<fieldset>
|
||||
<legend>
|
||||
These controls have extra CSS classes applied:
|
||||
</legend>
|
||||
<div id="c5"></div>
|
||||
<div id="c6"></div>
|
||||
<br/>
|
||||
Use the <b>addClassName</b> API to add additional CSS class names
|
||||
to controls, before or after they're rendered or decorated.
|
||||
</fieldset>
|
||||
<br/>
|
||||
<h3>Right-to-Left Rendering</h3>
|
||||
<fieldset>
|
||||
<legend>
|
||||
These controls are rendered right-to-left:
|
||||
</legend>
|
||||
<p>These right-to-left controls were progammatically created:</p>
|
||||
<div id="bidi" style="position:relative;background-color:#ccc;"
|
||||
dir="rtl"></div>
|
||||
<p>These right-to-left controls were decorated:</p>
|
||||
<div style="position:relative;background-color:#ccc;" dir="rtl">
|
||||
<div id="c9" class="goog-inline-block goog-control">
|
||||
Hello, world
|
||||
</div><div id="c10" class="goog-inline-block goog-control">
|
||||
Sample control
|
||||
</div>
|
||||
</div>
|
||||
<p class="hint">
|
||||
On pre-FF3 Gecko, <b>margin-left</b> and <b>margin-right</b> are
|
||||
ignored, so controls render right next to each other.
|
||||
A workaround is to include some <b>&nbsp;</b>s in between
|
||||
controls.
|
||||
</p>
|
||||
</fieldset>
|
||||
</td>
|
||||
<td width="33%">
|
||||
<!-- Event log. -->
|
||||
<fieldset class="goog-debug-panel">
|
||||
<legend>Event Log</legend>
|
||||
<div id="log"></div>
|
||||
</fieldset>
|
||||
<br/>
|
||||
<span class="hint">
|
||||
The control with the
|
||||
<span style="font-weight:bold;color:orange;">orange outline</span>
|
||||
has keyboard focus.
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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.Component.EventType);
|
||||
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
||||
|
||||
function logEvent(e) {
|
||||
goog.log.info(logger, '"' + e.target.getCaption() + '" dispatched: ' + e.type);
|
||||
}
|
||||
|
||||
// Create the first control programmatically, and make it focusable.
|
||||
var c1 = new goog.ui.Control(
|
||||
goog.dom.createDom('span', null, 'Hello, ',
|
||||
goog.dom.createDom('b', null, 'world'),
|
||||
'!'));
|
||||
c1.render(goog.dom.getElement('c1'));
|
||||
goog.events.listen(c1, EVENTS, logEvent);
|
||||
|
||||
// Create the second control by decorating an existing element. We can
|
||||
// use goog.ui.decorate to get a Control instance and have it
|
||||
// decorate the element, since the element to be decorated has the
|
||||
// appropriate "marker" class name.
|
||||
var c2 = goog.ui.decorate(goog.dom.getElement('c2'));
|
||||
c2.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
goog.events.listen(c2, EVENTS, logEvent);
|
||||
|
||||
// Define a simple custom renderer for the third control.
|
||||
function SampleCustomRenderer() {
|
||||
goog.ui.ControlRenderer.call(this);
|
||||
}
|
||||
goog.inherits(SampleCustomRenderer, goog.ui.ControlRenderer);
|
||||
|
||||
// See goog.ui.ControlRenderer#createDom for documentation.
|
||||
SampleCustomRenderer.prototype.createDom = function(control) {
|
||||
var baseClass = this.getCssClass();
|
||||
var classNames = this.getClassNamesForState(control.getState());
|
||||
var dom = control.dom_;
|
||||
return dom.createDom('div', classNames.join(' '),
|
||||
dom.createDom('div', baseClass + '-outer-box',
|
||||
dom.createDom('div', baseClass + '-inner-box',
|
||||
dom.createDom('div', baseClass + '-content',
|
||||
control.getContent()))));
|
||||
};
|
||||
|
||||
// See goog.ui.ControlRenderer#decorate for documentation.
|
||||
SampleCustomRenderer.prototype.decorate = function(control, element) {
|
||||
var baseClass = this.getCssClass();
|
||||
var dom = control.dom_;
|
||||
element.appendChild(
|
||||
dom.createDom('div', baseClass + '-outer-box',
|
||||
dom.createDom('div', baseClass + '-inner-box',
|
||||
dom.createDom('div', baseClass + '-content',
|
||||
element.childNodes))));
|
||||
return SampleCustomRenderer.superClass_.decorate.call(this, control,
|
||||
element);
|
||||
};
|
||||
|
||||
// See goog.ui.ControlRenderer#getContent for documentation.
|
||||
SampleCustomRenderer.prototype.getContent = function(element) {
|
||||
if (element) {
|
||||
return SampleCustomRenderer.superClass_.getContent.call(this,
|
||||
goog.dom.getElementsByTagNameAndClass('div',
|
||||
this.getCssClass() + '-content', element)[0]);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// See goog.ui.ControlRenderer#setContent for documentation.
|
||||
SampleCustomRenderer.prototype.setContent = function(element, content) {
|
||||
if (element) {
|
||||
return SampleCustomRenderer.superClass_.setContent.call(this,
|
||||
goog.dom.getElementsByTagNameAndClass('div',
|
||||
this.getCssClass() + '-content', element)[0],
|
||||
content);
|
||||
}
|
||||
};
|
||||
|
||||
// See goog.ui.ControlRenderer#getCssClass for documentation.
|
||||
SampleCustomRenderer.prototype.getCssClass = function() {
|
||||
return 'goog-custom-control';
|
||||
};
|
||||
|
||||
// Create the singleton instance of our custom renderer.
|
||||
var customRenderer = new SampleCustomRenderer();
|
||||
|
||||
// Create the third control using the custom renderer.
|
||||
var c3 = new goog.ui.Control('Custom Renderer', customRenderer);
|
||||
c3.render(goog.dom.getElement('c3'));
|
||||
goog.events.listen(c3, EVENTS, logEvent);
|
||||
|
||||
// Register a decorator factory function for controls to be decorated using
|
||||
// our custom renderer.
|
||||
goog.ui.registry.setDecoratorByClassName('goog-custom-control', function() {
|
||||
// Elements that have the 'goog-custom-control' marker class will be
|
||||
// decorated by instances of goog.ui.Control using our custom renderer.
|
||||
return new goog.ui.Control(null, customRenderer);
|
||||
});
|
||||
|
||||
// Create the fourth control by decorating a DIV.
|
||||
var customElem = goog.dom.getElement('c4');
|
||||
// getDecorator will use the decorator factory function registered above to
|
||||
// create a control to decorate our element.
|
||||
var c4 = goog.ui.registry.getDecorator(customElem);
|
||||
c4.addClassName('extra-red');
|
||||
c4.addClassName('extra-thick-border');
|
||||
c4.decorate(customElem);
|
||||
goog.events.listen(c4, EVENTS, logEvent);
|
||||
|
||||
var c5 = new goog.ui.Control('Custom Red');
|
||||
c5.addClassName('extra-red');
|
||||
c5.render(goog.dom.getElement('c5'));
|
||||
goog.events.listen(c5, EVENTS, logEvent);
|
||||
|
||||
var c6 = new goog.ui.Control('Custom Blue');
|
||||
c6.addClassName('extra-blue');
|
||||
c6.render(goog.dom.getElement('c6'));
|
||||
c6.addClassName('extra-thick-border');
|
||||
goog.events.listen(c6, EVENTS, logEvent);
|
||||
|
||||
// BiDi examples:
|
||||
var c7 = new goog.ui.Control('Hello, world');
|
||||
c7.addClassName('goog-inline-block');
|
||||
c7.render(goog.dom.getElement('bidi'));
|
||||
goog.events.listen(c7, EVENTS, logEvent);
|
||||
|
||||
var c8 = new goog.ui.Control('Sample control');
|
||||
c8.addClassName('goog-inline-block');
|
||||
c8.render(goog.dom.getElement('bidi'));
|
||||
goog.events.listen(c8, EVENTS, logEvent);
|
||||
|
||||
var c9 = goog.ui.decorate(goog.dom.getElement('c9'));
|
||||
goog.events.listen(c9, EVENTS, logEvent);
|
||||
|
||||
var c10 = goog.ui.decorate(goog.dom.getElement('c10'));
|
||||
goog.events.listen(c10, EVENTS, logEvent);
|
||||
|
||||
// Add some event handling to the second control, which dispatches state
|
||||
// transition events.
|
||||
|
||||
goog.events.listen(c2, goog.ui.Component.EventType.HIGHLIGHT,
|
||||
function(e) {
|
||||
goog.dom.setTextContent(goog.dom.getElement('hint'),
|
||||
'Click to activate.');
|
||||
});
|
||||
|
||||
goog.events.listen(c2, [goog.ui.Component.EventType.ENABLE,
|
||||
goog.ui.Component.EventType.UNHIGHLIGHT],
|
||||
function(e) {
|
||||
goog.dom.setTextContent(goog.dom.getElement('hint'),
|
||||
'Mouse over for instructions.');
|
||||
});
|
||||
|
||||
goog.events.listen(c2, goog.ui.Component.EventType.DISABLE,
|
||||
function(e) {
|
||||
goog.dom.setTextContent(goog.dom.getElement('hint'),
|
||||
'You need to enable this component first.');
|
||||
});
|
||||
|
||||
goog.events.listen(c2, goog.ui.Component.EventType.ACTIVATE,
|
||||
function(e) {
|
||||
goog.dom.setTextContent(goog.dom.getElement('hint'),
|
||||
'Release the mouse button to deactivate.');
|
||||
});
|
||||
|
||||
goog.events.listen(c2, goog.ui.Component.EventType.DEACTIVATE,
|
||||
function(e) {
|
||||
goog.dom.setTextContent(goog.dom.getElement('hint'), 'You got it!');
|
||||
});
|
||||
|
||||
goog.events.listen(goog.dom.getElement('enable'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
c2.setEnabled(e.target.checked);
|
||||
});
|
||||
|
||||
goog.events.listen(goog.dom.getElement('visible'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
c2.setVisible(e.target.checked);
|
||||
});
|
||||
|
||||
goog.dom.setTextContent(goog.dom.getElement('perf'),
|
||||
(goog.now() - timer) + 'ms');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
/*
|
||||
* Copyright 2007 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.
|
||||
*/
|
||||
|
||||
/* Author: attila@google.com (Attila Bodis) */
|
||||
|
||||
|
||||
@import url(../../css/common.css);
|
||||
|
||||
|
||||
body {
|
||||
background-color: #ffe;
|
||||
font: normal 10pt Arial, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
/* Misc. styles used for logging and debugging. */
|
||||
fieldset {
|
||||
padding: 4px 8px;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
font-weight: bold;
|
||||
color: #036;
|
||||
}
|
||||
|
||||
label, input {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size: 90%;
|
||||
color: #369;
|
||||
}
|
||||
|
||||
.goog-debug-panel {
|
||||
border: 1px solid #369;
|
||||
}
|
||||
|
||||
.goog-debug-panel .logdiv {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 8em;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.goog-debug-panel .logdiv .logmsg {
|
||||
font: normal 10px "Lucida Sans Typewriter", "Courier New", Courier, fixed;
|
||||
}
|
||||
|
||||
.perf {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 4px;
|
||||
font: italic 95% Arial, sans-serif;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#perf {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
text-align: right;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 4px;
|
||||
font: italic 95% Arial, sans-serif;
|
||||
color: #999;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/*
|
||||
* Copyright 2007 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.
|
||||
*/
|
||||
|
||||
/* Author: dalewis@google.com (Darren Lewis) */
|
||||
|
||||
/* Styles used in the emojipicker demo */
|
||||
.goog-ui-popupemojipicker {
|
||||
position: absolute;
|
||||
-moz-outline: 0;
|
||||
outline: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.goog-palette-cell {
|
||||
padding: 2px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.goog-palette-cell div {
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.goog-palette-cell-wrapper {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.goog-palette-cell-hover {
|
||||
background: lightblue;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/* This file is autogenerated. To regenerate, do:
|
||||
cd google3/javascript/closure/demos/emoji
|
||||
/home/build/static/projects/sitespeed optisprite *.gif
|
||||
|
||||
This will generate an optimal sprite in /usr/local/google/tmp/bestsprite.tar.gz.
|
||||
|
||||
Rename the optimal sprite to "sprite.png" (from sprite_XX.png), rename the css
|
||||
to "sprite.css" (from sprite_XX.css), then change all the URLs in sprite.css to
|
||||
point to sprite.png in google3/javascript/closure/demos/emoji, and cp the
|
||||
sprite.png into that directory.
|
||||
*/
|
||||
|
||||
.SPRITE_200{background:no-repeat url(../emoji/sprite.png) -18px 0;width:18px;height:18px}
|
||||
.SPRITE_201{background:no-repeat url(../emoji/sprite.png) 0 -234px;width:18px;height:18px}
|
||||
.SPRITE_202{background:no-repeat url(../emoji/sprite.png) -18px -338px;width:18px;height:18px}
|
||||
.SPRITE_203{background:no-repeat url(../emoji/sprite.png) -36px 0;width:18px;height:18px}
|
||||
.SPRITE_204{background:no-repeat url(../emoji/sprite.png) 0 -305px;width:18px;height:19px}
|
||||
.SPRITE_205{background:no-repeat url(../emoji/sprite.png) -36px -126px;width:18px;height:18px}
|
||||
.SPRITE_206{background:no-repeat url(../emoji/sprite.png) -36px -36px;width:18px;height:18px}
|
||||
.SPRITE_2BC{background:no-repeat url(../emoji/sprite.png) -18px -144px;width:18px;height:18px}
|
||||
.SPRITE_2BD{background:no-repeat url(../emoji/sprite.png) 0 -18px;width:18px;height:18px}
|
||||
.SPRITE_2BE{background:no-repeat url(../emoji/sprite.png) -36px -54px;width:18px;height:18px}
|
||||
.SPRITE_2BF{background:no-repeat url(../emoji/sprite.png) 0 -126px;width:18px;height:18px}
|
||||
.SPRITE_2C0{background:no-repeat url(../emoji/sprite.png) -18px -305px;width:18px;height:18px}
|
||||
.SPRITE_2C1{background:no-repeat url(../emoji/sprite.png) 0 -287px;width:18px;height:18px}
|
||||
.SPRITE_2C2{background:no-repeat url(../emoji/sprite.png) -18px -126px;width:18px;height:18px}
|
||||
.SPRITE_2C3{background:no-repeat url(../emoji/sprite.png) -36px -234px;width:18px;height:20px}
|
||||
.SPRITE_2C4{background:no-repeat url(../emoji/sprite.png) -36px -72px;width:18px;height:18px}
|
||||
.SPRITE_2C5{background:no-repeat url(../emoji/sprite.png) -54px -54px;width:18px;height:18px}
|
||||
.SPRITE_2C6{background:no-repeat url(../emoji/sprite.png) 0 -72px;width:18px;height:18px}
|
||||
.SPRITE_2C7{background:no-repeat url(../emoji/sprite.png) -18px -180px;width:18px;height:18px}
|
||||
.SPRITE_2C8{background:no-repeat url(../emoji/sprite.png) -36px -198px;width:18px;height:18px}
|
||||
.SPRITE_2C9{background:no-repeat url(../emoji/sprite.png) -36px -287px;width:18px;height:18px}
|
||||
.SPRITE_2CB{background:no-repeat url(../emoji/sprite.png) -54px -252px;width:18px;height:18px}
|
||||
.SPRITE_2CC{background:no-repeat url(../emoji/sprite.png) -54px -288px;width:18px;height:16px}
|
||||
.SPRITE_2CD{background:no-repeat url(../emoji/sprite.png) -36px -162px;width:18px;height:18px}
|
||||
.SPRITE_2CE{background:no-repeat url(../emoji/sprite.png) 0 -269px;width:18px;height:18px}
|
||||
.SPRITE_2CF{background:no-repeat url(../emoji/sprite.png) -36px -108px;width:18px;height:18px}
|
||||
.SPRITE_2D0{background:no-repeat url(../emoji/sprite.png) -36px -338px;width:18px;height:18px}
|
||||
.SPRITE_2D1{background:no-repeat url(../emoji/sprite.png) 0 -338px;width:18px;height:18px}
|
||||
.SPRITE_2D2{background:no-repeat url(../emoji/sprite.png) -54px -36px;width:18px;height:16px}
|
||||
.SPRITE_2D3{background:no-repeat url(../emoji/sprite.png) -36px -305px;width:18px;height:18px}
|
||||
.SPRITE_2D4{background:no-repeat url(../emoji/sprite.png) -36px -18px;width:18px;height:18px}
|
||||
.SPRITE_2D5{background:no-repeat url(../emoji/sprite.png) -18px -108px;width:18px;height:18px}
|
||||
.SPRITE_2D6{background:no-repeat url(../emoji/sprite.png) -36px -144px;width:18px;height:18px}
|
||||
.SPRITE_2D7{background:no-repeat url(../emoji/sprite.png) 0 -36px;width:18px;height:18px}
|
||||
.SPRITE_2D8{background:no-repeat url(../emoji/sprite.png) -54px -126px;width:18px;height:18px}
|
||||
.SPRITE_2D9{background:no-repeat url(../emoji/sprite.png) -18px -287px;width:18px;height:18px}
|
||||
.SPRITE_2DA{background:no-repeat url(../emoji/sprite.png) -54px -216px;width:18px;height:18px}
|
||||
.SPRITE_2DB{background:no-repeat url(../emoji/sprite.png) -36px -180px;width:18px;height:18px}
|
||||
.SPRITE_2DC{background:no-repeat url(../emoji/sprite.png) 0 -54px;width:18px;height:18px}
|
||||
.SPRITE_2DD{background:no-repeat url(../emoji/sprite.png) -18px -72px;width:18px;height:18px}
|
||||
.SPRITE_2DE{background:no-repeat url(../emoji/sprite.png) -36px -90px;width:18px;height:18px}
|
||||
.SPRITE_2DF{background:no-repeat url(../emoji/sprite.png) -54px -108px;width:18px;height:18px}
|
||||
.SPRITE_2E0{background:no-repeat url(../emoji/sprite.png) -18px -198px;width:18px;height:18px}
|
||||
.SPRITE_2E1{background:no-repeat url(../emoji/sprite.png) 0 -180px;width:18px;height:18px}
|
||||
.SPRITE_2E2{background:no-repeat url(../emoji/sprite.png) -54px -338px;width:18px;height:18px}
|
||||
.SPRITE_2E4{background:no-repeat url(../emoji/sprite.png) -54px -198px;width:18px;height:18px}
|
||||
.SPRITE_2E5{background:no-repeat url(../emoji/sprite.png) 0 -162px;width:18px;height:18px}
|
||||
.SPRITE_2E6{background:no-repeat url(../emoji/sprite.png) -54px -270px;width:18px;height:18px}
|
||||
.SPRITE_2E7{background:no-repeat url(../emoji/sprite.png) 0 -108px;width:18px;height:18px}
|
||||
.SPRITE_2E8{background:no-repeat url(../emoji/sprite.png) 0 -198px;width:18px;height:18px}
|
||||
.SPRITE_2E9{background:no-repeat url(../emoji/sprite.png) -54px 0;width:18px;height:18px}
|
||||
.SPRITE_2EA{background:no-repeat url(../emoji/sprite.png) -54px -144px;width:18px;height:18px}
|
||||
.SPRITE_2EB{background:no-repeat url(../emoji/sprite.png) -18px -36px;width:18px;height:18px}
|
||||
.SPRITE_2EC{background:no-repeat url(../emoji/sprite.png) -18px -18px;width:18px;height:18px}
|
||||
.SPRITE_2ED{background:no-repeat url(../emoji/sprite.png) -36px -269px;width:18px;height:18px}
|
||||
.SPRITE_2EE{background:no-repeat url(../emoji/sprite.png) -18px -90px;width:18px;height:18px}
|
||||
.SPRITE_2F0{background:no-repeat url(../emoji/sprite.png) 0 0;width:18px;height:18px}
|
||||
.SPRITE_2F2{background:no-repeat url(../emoji/sprite.png) -54px -234px;width:18px;height:18px}
|
||||
.SPRITE_2F3{background:no-repeat url(../emoji/sprite.png) 0 -144px;width:18px;height:18px}
|
||||
.SPRITE_2F4{background:no-repeat url(../emoji/sprite.png) 0 -252px;width:18px;height:17px}
|
||||
.SPRITE_2F5{background:no-repeat url(../emoji/sprite.png) -54px -321px;width:18px;height:14px}
|
||||
.SPRITE_2F6{background:no-repeat url(../emoji/sprite.png) -36px -254px;width:18px;height:15px}
|
||||
.SPRITE_2F7{background:no-repeat url(../emoji/sprite.png) -18px -54px;width:18px;height:18px}
|
||||
.SPRITE_2F8{background:no-repeat url(../emoji/sprite.png) 0 -216px;width:18px;height:18px}
|
||||
.SPRITE_2F9{background:no-repeat url(../emoji/sprite.png) -18px -234px;width:18px;height:18px}
|
||||
.SPRITE_2FA{background:no-repeat url(../emoji/sprite.png) -18px -216px;width:18px;height:18px}
|
||||
.SPRITE_2FB{background:no-repeat url(../emoji/sprite.png) -36px -216px;width:18px;height:18px}
|
||||
.SPRITE_2FC{background:no-repeat url(../emoji/sprite.png) -54px -162px;width:18px;height:18px}
|
||||
.SPRITE_2FD{background:no-repeat url(../emoji/sprite.png) 0 -90px;width:18px;height:18px}
|
||||
.SPRITE_2FE{background:no-repeat url(../emoji/sprite.png) -54px -305px;width:18px;height:16px}
|
||||
.SPRITE_2FF{background:no-repeat url(../emoji/sprite.png) -54px -72px;width:18px;height:16px}
|
||||
.SPRITE_none{background:no-repeat url(../emoji/sprite.png) -54px -180px;width:18px;height:18px}
|
||||
.SPRITE_unknown{background:no-repeat url(../emoji/sprite.png) -36px -323px;width:14px;height:15px}
|
||||
@@ -0,0 +1,166 @@
|
||||
<!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.Css3ButtonRenderer Demo
|
||||
</title>
|
||||
<script type="text/javascript" src="../base.js"></script>
|
||||
<script type="text/javascript">
|
||||
goog.require('goog.array');
|
||||
goog.require('goog.debug.DivConsole');
|
||||
goog.require('goog.debug.LogManager');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.log');
|
||||
goog.require('goog.object');
|
||||
goog.require('goog.ui.Css3ButtonRenderer');
|
||||
goog.require('goog.ui.CustomButton');
|
||||
goog.require('goog.ui.ToggleButton');
|
||||
goog.require('goog.ui.decorate');
|
||||
</script>
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/common.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/css3button.css">
|
||||
</head>
|
||||
<body>
|
||||
<h2>Demo of goog.ui.Css3ButtonRenderer</h2>
|
||||
<fieldset>
|
||||
<legend>
|
||||
These buttons were rendered using
|
||||
<strong>goog.ui.Css3ButtonRenderer</strong>:
|
||||
</legend>
|
||||
<br/>
|
||||
These buttons were created programmatically:<br/>
|
||||
<div id="cb1"></div>
|
||||
<br/>
|
||||
These buttons were created by decorating some DIVs, and they dispatch
|
||||
state transition events (watch the event log):<br/>
|
||||
<div id="cb2">
|
||||
<div id="foo" class="goog-css3-button" title="Title specified in HTML">
|
||||
Decorated <b>Button</b>, yay!
|
||||
</div><div id="bar" class="goog-css3-button goog-css3-button-disabled"
|
||||
title="Initialized to DISABLED in HTML...">Decorated Disabled
|
||||
</div><div id="fee" class="goog-css3-button">Another Button</div><div id="btn1"
|
||||
class="goog-css3-button goog-css3-button-collapse-right">
|
||||
Archive
|
||||
</div><div id="btn2"
|
||||
class="goog-css3-button goog-css3-button-collapse-right goog-css3-button-collapse-left">
|
||||
Delete
|
||||
</div><div id="btn3"
|
||||
class="goog-css3-button goog-css3-button-collapse-left">
|
||||
Report Spam
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
Use these <strong>ToggleButton</strong>s to hide/show and enable/disable
|
||||
the middle button:<br/>
|
||||
<div id="toggleEnable" class="goog-css3-toggle-button"
|
||||
title="Click here to enable/disable the button above">Enable</div>
|
||||
<div id="hideShow"
|
||||
class="goog-css3-toggle-button goog-css3-button-checked"
|
||||
title="Click here to hide/show the button above">Show</div>
|
||||
<br/><br/>
|
||||
Combined toggle buttons<br/>
|
||||
<div id="btn4" class="goog-css3-toggle-button goog-css3-button-collapse-right">
|
||||
Bold
|
||||
</div><div id="btn5" class="goog-css3-toggle-button goog-css3-button-collapse-right goog-css3-button-collapse-left">
|
||||
Italics
|
||||
</div><div id="btn6" class="goog-css3-toggle-button goog-css3-button-collapse-left goog-css3-button-checked">
|
||||
Underlined
|
||||
</div>
|
||||
</fieldset>
|
||||
<br/>
|
||||
<div id="perf"></div>
|
||||
<!-- Event log. -->
|
||||
<fieldset class="goog-debug-panel">
|
||||
<legend>Event Log</legend>
|
||||
<div id="log"></div>
|
||||
</fieldset>
|
||||
|
||||
<script type="text/javascript">
|
||||
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.Component.EventType);
|
||||
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
||||
|
||||
function logEvent(e) {
|
||||
goog.log.info(logger, '"' + e.target.getCaption() + '" dispatched: ' + e.type);
|
||||
}
|
||||
|
||||
// Create some buttons using CustomButton with the
|
||||
// Css3ButtonRenderer renderer.
|
||||
var disabledButton;
|
||||
var customButtons = [
|
||||
new goog.ui.CustomButton('Button',
|
||||
goog.ui.Css3ButtonRenderer.getInstance()),
|
||||
new goog.ui.CustomButton('Another Button',
|
||||
goog.ui.Css3ButtonRenderer.getInstance()),
|
||||
disabledButton = new goog.ui.CustomButton('Disabled Button',
|
||||
goog.ui.Css3ButtonRenderer.getInstance()),
|
||||
new goog.ui.CustomButton('Yet Another Button',
|
||||
goog.ui.Css3ButtonRenderer.getInstance())
|
||||
];
|
||||
disabledButton.setEnabled(false);
|
||||
goog.array.forEach(customButtons, function(b) {
|
||||
b.render(goog.dom.getElement('cb1'));
|
||||
goog.events.listen(b, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
var newCaption = window.prompt('Enter new caption for button:');
|
||||
b.setCaption(newCaption || 'Empty');
|
||||
});
|
||||
goog.events.listen(b, EVENTS, logEvent);
|
||||
});
|
||||
|
||||
// Decorate some buttons.
|
||||
var cb2 = [];
|
||||
var decoratedButtons = goog.array.map([
|
||||
'foo', 'bar', 'fee', 'btn1', 'btn2', 'btn3', 'btn4', 'btn5', 'btn6'
|
||||
], goog.dom.getElement);
|
||||
goog.array.forEach(decoratedButtons, function(element) {
|
||||
// Since the elements to be decorated each have the correct "marker" CSS
|
||||
// class ("goog-css3-custom-button"), we can use the renderer
|
||||
// registry to get the appropriate control instance to decorate them.
|
||||
var button = goog.ui.decorate(element);
|
||||
button.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
cb2.push(button);
|
||||
goog.events.listen(button, EVENTS, logEvent);
|
||||
});
|
||||
|
||||
// Decorate toggle buttons.
|
||||
var toggleEnableElem = goog.dom.getElement('toggleEnable');
|
||||
var toggleEnable = goog.ui.decorate(toggleEnableElem);
|
||||
toggleEnable.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
|
||||
goog.events.listen(toggleEnable, EVENTS, logEvent);
|
||||
|
||||
goog.events.listen(toggleEnable, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
cb2[1].setEnabled(e.target.isChecked());
|
||||
});
|
||||
|
||||
var hideShowElem = goog.dom.getElement('hideShow');
|
||||
var hideShow = new goog.ui.decorate(hideShowElem);
|
||||
hideShow.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
goog.events.listen(hideShow, EVENTS, logEvent);
|
||||
|
||||
goog.events.listen(hideShow, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
cb2[1].setVisible(e.target.isChecked());
|
||||
});
|
||||
|
||||
goog.dom.setTextContent(goog.dom.getElement('perf'),
|
||||
(goog.now() - timer) +'ms');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,285 @@
|
||||
<!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.Css3MenuButtonRenderer Demo</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.array');
|
||||
goog.require('goog.debug.DivConsole');
|
||||
goog.require('goog.debug.LogManager');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.events.EventType');
|
||||
goog.require('goog.log');
|
||||
goog.require('goog.object');
|
||||
goog.require('goog.ui.Css3MenuButtonRenderer');
|
||||
goog.require('goog.ui.Menu');
|
||||
goog.require('goog.ui.MenuButton');
|
||||
goog.require('goog.ui.MenuItem');
|
||||
goog.require('goog.ui.Separator');
|
||||
goog.require('goog.ui.decorate');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/menu.css">
|
||||
<link rel="stylesheet" href="../css/menuitem.css">
|
||||
<link rel="stylesheet" href="../css/menuseparator.css">
|
||||
<link rel="stylesheet" href="../css/menubutton.css">
|
||||
<link rel="stylesheet" href="../css/css3button.css">
|
||||
<link rel="stylesheet" href="../css/css3menubutton.css">
|
||||
<style>
|
||||
/* Base class for all icon elements. */
|
||||
.icon {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
margin: 0 1px;
|
||||
background-image: url(../images/toolbar_icons.gif);
|
||||
background-repeat: no-repeat;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* "Format" icon. */
|
||||
.format-icon{
|
||||
background-position: -64px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.Css3MenuButtonRenderer</h1>
|
||||
<table border="0" cellpadding="0" cellspacing="4" width="100%">
|
||||
<tbody>
|
||||
<tr valign="top">
|
||||
<td width="67%">
|
||||
<fieldset>
|
||||
<legend>
|
||||
These <strong>MenuButton</strong>s were created programmatically:
|
||||
|
||||
</legend>
|
||||
<table border="0" cellpadding="0" cellspacing="4">
|
||||
<tbody>
|
||||
<tr valign="middle">
|
||||
<td>
|
||||
<div id="menuButtons"></div>
|
||||
</td>
|
||||
<td>
|
||||
Enable first button:
|
||||
<input type="checkbox" id="b1_enable" checked>
|
||||
|
||||
Show second button:
|
||||
<input type="checkbox" id="b2_show" checked>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<label>
|
||||
</label>
|
||||
<br>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>
|
||||
This <strong>MenuButton</strong> decorates an element:
|
||||
</legend>
|
||||
<table border="0" cellpadding="0" cellspacing="4">
|
||||
<tbody>
|
||||
<tr valign="middle">
|
||||
<td>
|
||||
<div id="formatButton" class="goog-css3-menu-button"
|
||||
title="Format">
|
||||
<!-- These elements will become the button's caption. -->
|
||||
<div class="icon format-icon goog-inline-block"></div>
|
||||
<span style="vertical-align:middle">Format</span>
|
||||
<!-- This DIV will be auto-decorated with a menu. -->
|
||||
<div id="formatMenu" class="goog-menu">
|
||||
<div class="goog-menuitem">Bold</div>
|
||||
<div class="goog-menuitem">Italic</div>
|
||||
<div class="goog-menuitem">Underline</div>
|
||||
<div class="goog-menuseparator"></div>
|
||||
<div class="goog-menuitem goog-menuitem-disabled">
|
||||
Strikethrough
|
||||
</div>
|
||||
<div class="goog-menuseparator"></div>
|
||||
<div class="goog-menuitem">Font...</div>
|
||||
<div class="goog-menuitem">Color...</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
Enable button:
|
||||
<input type="checkbox" id="formatButton_enable" checked>
|
||||
|
||||
Show button:
|
||||
<input type="checkbox" id="formatButton_show" checked>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<label>
|
||||
</label>
|
||||
<br>
|
||||
</fieldset>
|
||||
</td>
|
||||
<td width="33%">
|
||||
<!-- Event log. -->
|
||||
<fieldset class="goog-debug-panel">
|
||||
<legend>Event Log</legend>
|
||||
<div id="log"></div>
|
||||
</fieldset>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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.Component.EventType);
|
||||
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
||||
|
||||
function logEvent(e) {
|
||||
var component = e.target;
|
||||
var caption = (typeof component.getCaption == 'function') ?
|
||||
component.getCaption() : component.getId();
|
||||
goog.log.info(logger, '"' + caption + '" dispatched: ' + e.type);
|
||||
}
|
||||
|
||||
// Create a sample menu.
|
||||
var m1 = new goog.ui.Menu();
|
||||
m1.setId('FileMenu');
|
||||
goog.array.forEach(['New', 'Open', 'Save', 'Save as', null, 'Change label'],
|
||||
function(label) {
|
||||
var item;
|
||||
if (label) {
|
||||
item = new goog.ui.MenuItem(label + '...');
|
||||
item.setId(label);
|
||||
item.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
if (label == 'Save as') {
|
||||
item.setEnabled(false);
|
||||
}
|
||||
} else {
|
||||
item = new goog.ui.MenuSeparator();
|
||||
}
|
||||
m1.addItem(item);
|
||||
});
|
||||
|
||||
// Create the first button programmatically.
|
||||
var b1 = new goog.ui.MenuButton('File', m1,
|
||||
new goog.ui.Css3MenuButtonRenderer());
|
||||
b1.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
b1.setId('FileButton');
|
||||
b1.render(goog.dom.getElement('menuButtons'));
|
||||
b1.setTooltip('File menu demo');
|
||||
goog.events.listen(b1, EVENTS, logEvent);
|
||||
|
||||
goog.events.listen(goog.dom.getElement('b1_enable'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
b1.setEnabled(e.target.checked);
|
||||
});
|
||||
|
||||
goog.events.listen(b1, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
if (e.target && e.target.getCaption() == 'Change label...') {
|
||||
var label = window.prompt('Enter new menu label:', b1.getCaption());
|
||||
b1.setCaption(label || 'Empty');
|
||||
}
|
||||
});
|
||||
|
||||
// Create another sample menu.
|
||||
var m2 = new goog.ui.Menu();
|
||||
m2.setId('EditMenu');
|
||||
goog.array.forEach(['Cut', 'Copy', 'Paste', null, 'Paste special'],
|
||||
function(label) {
|
||||
var item;
|
||||
if (label) {
|
||||
item = new goog.ui.MenuItem(label + '...');
|
||||
item.setId(label);
|
||||
item.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
} else {
|
||||
item = new goog.ui.MenuSeparator();
|
||||
}
|
||||
m2.addItem(item);
|
||||
});
|
||||
|
||||
// Create the second button programmatically.
|
||||
var b2 = new goog.ui.MenuButton('Edit', m2,
|
||||
new goog.ui.Css3MenuButtonRenderer());
|
||||
b2.setId('EditButton');
|
||||
b2.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
b2.render(goog.dom.getElement('menuButtons'));
|
||||
b2.setTooltip('Edit menu demo');
|
||||
goog.events.listen(b2, EVENTS, logEvent);
|
||||
|
||||
goog.events.listen(goog.dom.getElement('b2_show'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
b2.setVisible(e.target.checked);
|
||||
});
|
||||
|
||||
// Create another sample menu.
|
||||
var m3 = new goog.ui.Menu();
|
||||
m3.setId('WindowMenu');
|
||||
goog.array.forEach(['Tile', 'Cascade', null, 'Zoom in', 'Zoom out'],
|
||||
function(label) {
|
||||
var item;
|
||||
if (label) {
|
||||
item = new goog.ui.MenuItem(label + '...');
|
||||
item.setId(label);
|
||||
item.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
} else {
|
||||
item = new goog.ui.MenuSeparator();
|
||||
}
|
||||
m3.addItem(item);
|
||||
});
|
||||
var unhighlightable = new goog.ui.MenuItem('Zoom control:');
|
||||
// Disabled implies unhighlightable, unless the menu is specifically set
|
||||
// to allow highlighting disabled items (but it doesn't by default).
|
||||
unhighlightable.setEnabled(false);
|
||||
unhighlightable.setId('unhighlightable');
|
||||
m3.addItemAt(unhighlightable, 3);
|
||||
|
||||
// Create a third button programmatically.
|
||||
var b3 = new goog.ui.MenuButton('Window', m3,
|
||||
new goog.ui.Css3MenuButtonRenderer());
|
||||
b3.setId('WindowButton');
|
||||
b3.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);
|
||||
b3.render(goog.dom.getElement('menuButtons'));
|
||||
b3.setTooltip('Windowm menu demo');
|
||||
goog.events.listen(b3, EVENTS, logEvent);
|
||||
|
||||
// Decorate a menu button. Note that since one of the child nodes of the
|
||||
// menu button element can be decorated as a menu, it is auto-decorated and
|
||||
// attached to the button.
|
||||
var formatButton = goog.ui.decorate(goog.dom.getElement('formatButton'));
|
||||
|
||||
goog.events.listen(goog.dom.getElement('formatButton_show'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
formatButton.setVisible(e.target.checked);
|
||||
});
|
||||
|
||||
goog.events.listen(goog.dom.getElement('formatButton_enable'),
|
||||
goog.events.EventType.CLICK,
|
||||
function(e) {
|
||||
formatButton.setEnabled(e.target.checked);
|
||||
});
|
||||
|
||||
goog.events.listen(formatButton, EVENTS, logEvent);
|
||||
|
||||
goog.dom.setTextContent(goog.dom.getElement('perf'),
|
||||
(goog.now() - timer) + 'ms');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!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>CssSpriteAnimation demo</title>
|
||||
<script type="text/javascript" src="../base.js"></script>
|
||||
<script type="text/javascript">
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.fx.Animation');
|
||||
goog.require('goog.fx.CssSpriteAnimation');
|
||||
goog.require('goog.math.Box');
|
||||
goog.require('goog.math.Size');
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.icon {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background-image: url(../images/offlineicons.png);
|
||||
}
|
||||
|
||||
#test1,
|
||||
#test3 {
|
||||
background-position: 0 -11px;
|
||||
}
|
||||
|
||||
#test2 {
|
||||
background-position: 0 -132px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>The following just runs and runs...</p>
|
||||
<div class=icon id=test1></div>
|
||||
|
||||
<p>The animation is just an ordinary animation so you can pause it etc.
|
||||
<div class=icon id=test2></div>
|
||||
|
||||
<p>
|
||||
<button onclick="sa2.play()">Play</button>
|
||||
<button onclick="sa2.pause()">Pause</button>
|
||||
</p>
|
||||
|
||||
<p>The animation can be played once by stopping it after it finishes for the
|
||||
first time.
|
||||
|
||||
<div class=icon id=test3></div>
|
||||
|
||||
<script>
|
||||
|
||||
var size = new goog.math.Size(11, 11);
|
||||
|
||||
var el = document.getElementById('test1');
|
||||
var sa = new goog.fx.CssSpriteAnimation(el, size,
|
||||
new goog.math.Box(11, 11, 99, 0), 1200);
|
||||
sa.play();
|
||||
|
||||
var el2 = document.getElementById('test2');
|
||||
var sa2 = new goog.fx.CssSpriteAnimation(el2, size,
|
||||
new goog.math.Box(132, 11, 132 + 11 * 8, 0), 1200);
|
||||
sa2.play();
|
||||
|
||||
var el3 = document.getElementById('test3');
|
||||
var sa3 = new goog.fx.CssSpriteAnimation(el3, size,
|
||||
new goog.math.Box(11, 11, 99, 0), 8000);
|
||||
goog.events.listen(sa3, goog.fx.Transition.EventType.FINISH, function() {
|
||||
sa3.stop();
|
||||
});
|
||||
sa3.play();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,311 @@
|
||||
<!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>
|
||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||
<title>goog.ui.DatePicker</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.date');
|
||||
goog.require('goog.i18n.DateTimeSymbols');
|
||||
goog.require('goog.i18n.DateTimeSymbols_en_ISO');
|
||||
goog.require('goog.i18n.DateTimeSymbols_en_US');
|
||||
goog.require('goog.i18n.DateTimeSymbols_de');
|
||||
goog.require('goog.i18n.DateTimeSymbols_ml');
|
||||
goog.require('goog.i18n.DateTimeSymbols_ar_YE');
|
||||
goog.require('goog.i18n.DateTimeSymbols_th');
|
||||
goog.require('goog.i18n.DateTimeSymbols_ja');
|
||||
goog.require('goog.i18n.DateTimePatterns');
|
||||
goog.require('goog.i18n.DateTimePatterns_en_US');
|
||||
goog.require('goog.i18n.DateTimePatterns_de');
|
||||
goog.require('goog.i18n.DateTimePatterns_ml');
|
||||
goog.require('goog.i18n.DateTimePatterns_ar_YE');
|
||||
goog.require('goog.i18n.DateTimePatterns_th');
|
||||
goog.require('goog.i18n.DateTimePatterns_ja');
|
||||
goog.require('goog.ui.DatePicker');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/datepicker.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.DatePicker</h1>
|
||||
|
||||
<table width="100%" summary="for laying out datepickers"><tr><td valign="top">
|
||||
<h2>Default: ISO 8601</h2>
|
||||
<div id="widget_iso_8601"></div>
|
||||
<div style="clear: both;"> </div>
|
||||
<span id="label_iso_8601"></span>
|
||||
<br><br>
|
||||
<h2>Custom</h2>
|
||||
<input type="checkbox" id="ck-0"
|
||||
onclick="allShowFixedNumWeeks(this.checked);" checked><label
|
||||
for="ck-0">ShowFixedNumWeeks</label><br>
|
||||
<input type="checkbox" id="ck-1"
|
||||
onclick="allShowOtherMonths(this.checked);" checked><label
|
||||
for="ck-1">ShowOtherMonths</label><br>
|
||||
<input type="checkbox" id="ck-2"
|
||||
onclick="allExtraWeekAtEnd(this.checked);" checked><label
|
||||
for="ck-2">ExtraWeekAtEnd</label><br>
|
||||
<input type="checkbox" id="ck-3"
|
||||
onclick="allShowWeekNum(this.checked);" checked><label
|
||||
for="ck-3">ShowWeekNum</label><br>
|
||||
<input type="checkbox" id="ck-4"
|
||||
onclick="allShowWeekdays(this.checked);" checked><label
|
||||
for="ck-4">ShowWeekdays</label><br>
|
||||
<input type="checkbox" id="ck-5"
|
||||
onclick="allAllowNone(this.checked);" checked><label
|
||||
for="ck-5">AllowNone</label><br>
|
||||
<input type="checkbox" id="ck-6"
|
||||
onclick="allShowToday(this.checked);" checked><label
|
||||
for="ck-6">ShowToday</label><br>
|
||||
<input type="checkbox" id="ck-7"
|
||||
onclick="allUseNarrowWeekdayNames(this.checked);"><label
|
||||
for="ck-7">UseNarrowWeekdayNames</label><br>
|
||||
<input type="checkbox" id="ck-8"
|
||||
onclick="allUseSimpleNavigationMenu(this.checked);"><label
|
||||
for="ck-8">UseSimpleNavigationMenu</label><br>
|
||||
<input type="checkbox" id="ck-9"
|
||||
onclick="allLongDateFormat(this.checked);"><label
|
||||
for="ck-9">LongDateFormat</label><br>
|
||||
<br>
|
||||
<div id="widget_custom"></div>
|
||||
<div style="clear: both;"> </div>
|
||||
<span id="label_custom"></span>
|
||||
</td>
|
||||
<td valign="top">
|
||||
|
||||
<h2>English (US)</h2>
|
||||
<div id="widget_en_US"></div>
|
||||
<div style="clear: both;"> </div>
|
||||
<span id="label_en_US"></span>
|
||||
<br><br>
|
||||
|
||||
<h2>German</h2>
|
||||
<div id="widget_de"></div>
|
||||
<div style="clear: both;"> </div>
|
||||
<span id="label_de"></span>
|
||||
<br><br>
|
||||
|
||||
<h2>Malayalam</h2>
|
||||
<div id="widget_ml"></div>
|
||||
<div style="clear: both;"> </div>
|
||||
<span id="label_ml"></span>
|
||||
<br><br>
|
||||
|
||||
</td>
|
||||
<td valign="top">
|
||||
|
||||
<h2>Arabic (Yemen)</h2>
|
||||
<div dir=rtl id="widget_ar_YE"></div>
|
||||
<div style="clear: both;"> </div>
|
||||
<span id="label_ar_YE"></span>
|
||||
<br><br>
|
||||
|
||||
<h2>Thai</h2>
|
||||
<div id="widget_th"></div>
|
||||
<div style="clear: both;"> </div>
|
||||
<span id="label_th"></span>
|
||||
<br><br>
|
||||
|
||||
<h2>Japanese</h2>
|
||||
<div id="widget_ja"></div>
|
||||
<div style="clear: both;"> </div>
|
||||
<span id="label_ja"></span>
|
||||
<br><br>
|
||||
|
||||
</td></tr></table>
|
||||
|
||||
<script type="text/javascript">
|
||||
// Standard: ISO 8601
|
||||
goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_en_ISO;
|
||||
var dp_iso_8601 = new goog.ui.DatePicker();
|
||||
dp_iso_8601.render(document.getElementById('widget_iso_8601'));
|
||||
|
||||
goog.events.listen(dp_iso_8601,
|
||||
goog.ui.DatePicker.Events.CHANGE, function(event) {
|
||||
goog.dom.setTextContent(document.getElementById('label_iso_8601'),
|
||||
event.date ?
|
||||
event.date.toIsoString(true) : 'none');
|
||||
});
|
||||
|
||||
goog.dom.setTextContent(document.getElementById('label_iso_8601'),
|
||||
dp_iso_8601.getDate().toIsoString(true));
|
||||
|
||||
// Custom
|
||||
var dp_custom = new goog.ui.DatePicker(new goog.date.Date(2006, 0, 1));
|
||||
dp_custom.render(document.getElementById('widget_custom'));
|
||||
|
||||
goog.events.listen(dp_custom, goog.ui.DatePicker.Events.CHANGE,
|
||||
function(event) {
|
||||
goog.dom.setTextContent(document.getElementById('label_custom'),
|
||||
event.date ?
|
||||
event.date.toIsoString(true) : 'none');
|
||||
});
|
||||
|
||||
goog.dom.setTextContent(document.getElementById('label_custom'),
|
||||
dp_custom.getDate().toIsoString(true));
|
||||
|
||||
// English (US)
|
||||
goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_en_US;
|
||||
goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_en_US;
|
||||
|
||||
var dp_en_US = new goog.ui.DatePicker();
|
||||
dp_en_US.render(document.getElementById('widget_en_US'));
|
||||
|
||||
goog.events.listen(dp_en_US, goog.ui.DatePicker.Events.CHANGE,
|
||||
function(event) {
|
||||
goog.dom.setTextContent(document.getElementById('label_en_US'), event.date ?
|
||||
event.date.toIsoString(true) : 'none');
|
||||
});
|
||||
|
||||
goog.dom.setTextContent(document.getElementById('label_en_US'),
|
||||
dp_en_US.getDate().toIsoString(true));
|
||||
|
||||
// German
|
||||
goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_de;
|
||||
goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_de;
|
||||
|
||||
dp_de = new goog.ui.DatePicker();
|
||||
dp_de.render(document.getElementById('widget_de'));
|
||||
|
||||
goog.events.listen(dp_de, goog.ui.DatePicker.Events.CHANGE, function(event) {
|
||||
goog.dom.setTextContent(document.getElementById('label_de'), event.date ?
|
||||
event.date.toIsoString(true) : 'none');
|
||||
});
|
||||
|
||||
goog.dom.setTextContent(document.getElementById('label_de'),
|
||||
dp_de.getDate().toIsoString(true));
|
||||
|
||||
// Malayalam
|
||||
goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_ml;
|
||||
goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_ml;
|
||||
|
||||
var dp_ml = new goog.ui.DatePicker();
|
||||
dp_ml.render(document.getElementById('widget_ml'));
|
||||
|
||||
goog.events.listen(dp_ml, goog.ui.DatePicker.Events.CHANGE, function(event) {
|
||||
goog.dom.setTextContent(document.getElementById('label_ml'), event.date ?
|
||||
event.date.toIsoString(true) : 'none');
|
||||
});
|
||||
|
||||
goog.dom.setTextContent(document.getElementById('label_ml'),
|
||||
dp_ml.getDate().toIsoString(true));
|
||||
|
||||
// Arabic (Yemen)
|
||||
goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_ar_YE;
|
||||
var dp_ar_YE = new goog.ui.DatePicker(null, goog.i18n.DateTimeSymbols_ar_YE);
|
||||
|
||||
dp_ar_YE.render(document.getElementById('widget_ar_YE'));
|
||||
|
||||
goog.events.listen(dp_ar_YE, goog.ui.DatePicker.Events.CHANGE,
|
||||
function(event) {
|
||||
goog.dom.setTextContent(document.getElementById('label_ar_YE'), event.date ?
|
||||
event.date.toIsoString(true) : 'none');
|
||||
});
|
||||
|
||||
goog.dom.setTextContent(document.getElementById('label_ar_YE'),
|
||||
dp_ar_YE.getDate().toIsoString(true));
|
||||
|
||||
// Russian
|
||||
goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_th;
|
||||
goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_th;
|
||||
|
||||
var dp_th = new goog.ui.DatePicker();
|
||||
dp_th.render(document.getElementById('widget_th'));
|
||||
|
||||
goog.events.listen(dp_th, goog.ui.DatePicker.Events.CHANGE, function(event) {
|
||||
goog.dom.setTextContent(document.getElementById('label_th'), event.date ?
|
||||
event.date.toIsoString(true) : 'none');
|
||||
});
|
||||
|
||||
goog.dom.setTextContent(document.getElementById('label_th'),
|
||||
dp_th.getDate().toIsoString(true));
|
||||
|
||||
// Japanese
|
||||
goog.i18n.DateTimeSymbols = goog.i18n.DateTimeSymbols_ja;
|
||||
goog.i18n.DateTimePatterns = goog.i18n.DateTimePatterns_ja;
|
||||
|
||||
var dp_ja = new goog.ui.DatePicker();
|
||||
dp_ja.render(document.getElementById('widget_ja'));
|
||||
|
||||
goog.events.listen(dp_ja, goog.ui.DatePicker.Events.CHANGE, function(event) {
|
||||
goog.dom.setTextContent(document.getElementById('label_ja'), event.date ?
|
||||
event.date.toIsoString(true) : 'none');
|
||||
});
|
||||
|
||||
goog.dom.setTextContent(document.getElementById('label_ja'),
|
||||
dp_ja.getDate().toIsoString(true));
|
||||
|
||||
// We update all pickers, for all languages
|
||||
var allPickers = [dp_iso_8601, dp_custom, dp_en_US,
|
||||
dp_de, dp_ml, dp_ar_YE, dp_th, dp_ja];
|
||||
|
||||
function allShowFixedNumWeeks(enabled) {
|
||||
for (var i = 0; i < allPickers.length; ++i) {
|
||||
allPickers[i].setShowFixedNumWeeks(enabled);
|
||||
}
|
||||
}
|
||||
|
||||
function allShowOtherMonths(enabled) {
|
||||
for (var i = 0; i < allPickers.length; ++i) {
|
||||
allPickers[i].setShowOtherMonths(enabled);
|
||||
}
|
||||
}
|
||||
|
||||
function allExtraWeekAtEnd(enabled) {
|
||||
for (var i = 0; i < allPickers.length; ++i) {
|
||||
allPickers[i].setExtraWeekAtEnd(enabled);
|
||||
}
|
||||
}
|
||||
|
||||
function allShowWeekNum(enabled) {
|
||||
for (var i = 0; i < allPickers.length; ++i) {
|
||||
allPickers[i].setShowWeekNum(enabled);
|
||||
}
|
||||
}
|
||||
|
||||
function allShowWeekdays(enabled) {
|
||||
for (var i = 0; i < allPickers.length; ++i) {
|
||||
allPickers[i].setShowWeekdayNames(enabled);
|
||||
}
|
||||
}
|
||||
|
||||
function allAllowNone(enabled) {
|
||||
for (var i = 0; i < allPickers.length; ++i) {
|
||||
allPickers[i].setAllowNone(enabled);
|
||||
}
|
||||
}
|
||||
|
||||
function allShowToday(enabled) {
|
||||
for (var i = 0; i < allPickers.length; ++i) {
|
||||
allPickers[i].setShowToday(enabled);
|
||||
}
|
||||
}
|
||||
|
||||
function allUseNarrowWeekdayNames(enabled) {
|
||||
for (var i = 0; i < allPickers.length; ++i) {
|
||||
allPickers[i].setUseNarrowWeekdayNames(enabled);
|
||||
}
|
||||
}
|
||||
|
||||
function allUseSimpleNavigationMenu(enabled) {
|
||||
for (var i = 0; i < allPickers.length; ++i) {
|
||||
allPickers[i].setUseSimpleNavigationMenu(enabled);
|
||||
}
|
||||
}
|
||||
|
||||
function allLongDateFormat(enabled) {
|
||||
for (var i = 0; i < allPickers.length; ++i) {
|
||||
allPickers[i].setLongDateFormat(enabled);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2007 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>Debug</title>
|
||||
<script type="text/javascript" src="../base.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
goog.require('goog.debug');
|
||||
goog.require('goog.debug.FancyWindow');
|
||||
goog.require('goog.log');
|
||||
/**
|
||||
* Person - a sample person object.
|
||||
* @param {string} name The name
|
||||
* @param {number} age The age
|
||||
*/
|
||||
var Person = function(name, age) {
|
||||
this.name_ = name;
|
||||
this.age_ = age;
|
||||
this.address_ = null;
|
||||
this.kids_ = [];
|
||||
|
||||
/**
|
||||
* Set the address.
|
||||
* @param {string} address The address to set
|
||||
*/
|
||||
this.setAddress = function(address) {
|
||||
this.address_ = address;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a child.
|
||||
* @param {Object} child The child to add
|
||||
*/
|
||||
this.addChild = function(child) {
|
||||
this.kids_.push(child);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a string representation of the object.
|
||||
* @return {string} The object as a string
|
||||
*/
|
||||
this.toString = function() {
|
||||
return 'Person name: ' + this.name_ + ' Age: ' + this.age_;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Demonstrate the debug options.
|
||||
*/
|
||||
var demoDebug = function() {
|
||||
// Create the debug window.
|
||||
var debugWindow = new goog.debug.FancyWindow('main');
|
||||
debugWindow.setEnabled(true);
|
||||
debugWindow.init();
|
||||
|
||||
// Create a logger.
|
||||
var theLogger = goog.log.getLogger('demo');
|
||||
goog.log.info(theLogger, 'Logging examples');
|
||||
|
||||
// Create a simple object.
|
||||
var someone = {'name': 'joe',
|
||||
'age': 33,
|
||||
'gender': 'm',
|
||||
'kids': ['jen', 'sam', 'oliver'],
|
||||
'address': '233 Great Road, Axtonhammer, MD'};
|
||||
|
||||
// Show the object, note that it will output '[object Object]'.
|
||||
goog.log.info(theLogger, someone);
|
||||
// Use expose to walk through the object and show all data.
|
||||
goog.log.info(theLogger, 'Person: '+ goog.debug.expose(someone));
|
||||
|
||||
// Now create a Person object to demonstrate expose w/functions.
|
||||
var pObj = new Person('fred', 2);
|
||||
// Add a child, and an address.
|
||||
pObj.addChild(someone);
|
||||
pObj.setAddress('1 broadway, ny, ny');
|
||||
|
||||
// The toString will be called.
|
||||
goog.log.info(theLogger, 'toString: '+ pObj);
|
||||
// Does not show the functions by default.
|
||||
goog.log.info(theLogger, 'expose (no functions): ' + goog.debug.expose(pObj));
|
||||
// You can specify false if you really want to.
|
||||
goog.log.info(theLogger, 'expose (no functions): ' + goog.debug.expose(pObj, false));
|
||||
// Shows the functions as well.
|
||||
goog.log.info(theLogger, 'expose (w/functions): ' + goog.debug.expose(pObj, true));
|
||||
|
||||
// Show deepExpose, which walks recursively through data.
|
||||
goog.log.info(theLogger, 'deepExpose (no functions): '+ goog.debug.deepExpose(pObj));
|
||||
// You can specify false if you really want to.
|
||||
goog.log.info(theLogger, 'deepExpose (no functions): '+
|
||||
goog.debug.deepExpose(pObj, false));
|
||||
goog.log.info(theLogger, 'deepExpose (w/functions): '+
|
||||
goog.debug.deepExpose(pObj, true));
|
||||
|
||||
goog.log.log(theLogger, goog.log.Level.SHOUT, 'shout');
|
||||
goog.log.error(theLogger, 'severe');
|
||||
goog.log.warning(theLogger, 'warning');
|
||||
goog.log.info(theLogger, 'info');
|
||||
goog.log.fine(theLogger, 'fine');
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<body>
|
||||
Look in the log window for debugging examples.
|
||||
</body>
|
||||
<script>
|
||||
// Call the demo method.
|
||||
demoDebug();
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<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>Deps Tree</title>
|
||||
<script type="text/javascript" src="../base.js"></script>
|
||||
<script type="text/javascript">
|
||||
goog.require('goog.object');
|
||||
goog.require('goog.array');
|
||||
goog.require('goog.debug');
|
||||
goog.require('goog.events');
|
||||
</script>
|
||||
<style type="text/css">
|
||||
|
||||
h1 {
|
||||
font: bold 24px verdana,sans-serif;
|
||||
margin: 0px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
font: normal 9px verdana,sans-serif;
|
||||
padding: 3px;
|
||||
margin: 5px;
|
||||
background-color: #EEE;
|
||||
border: 1px solid #999;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
div.hover {
|
||||
background-color: #EE6;
|
||||
border: 1px solid #990;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
div.hilite {
|
||||
background-color: #AFA;
|
||||
border: 1px solid #090;
|
||||
}
|
||||
|
||||
div.infile {
|
||||
background-color: #FFA;
|
||||
border: 1px solid #990;
|
||||
}
|
||||
|
||||
div.required {
|
||||
background-color: #FAA;
|
||||
border: 1px solid #900;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Closure Dependency Graph</h1>
|
||||
<script type="text/javascript">
|
||||
|
||||
// HackHack
|
||||
// Hacked together quickly to provide a quick visible analysis. Not meant to be
|
||||
// a complete or long lived tool.
|
||||
|
||||
var levels = [];
|
||||
var visited = [];
|
||||
|
||||
var change = true;
|
||||
var i = 0;
|
||||
while (change) {
|
||||
change = false;
|
||||
levels[i] = [];
|
||||
var newVisited = goog.array.clone(visited);
|
||||
goog.object.forEach(goog.dependencies_.nameToPath, function(path, ns) {
|
||||
var deps = goog.object.clone(goog.dependencies_.requires[path]);
|
||||
goog.array.forEach(newVisited, function(value) {
|
||||
goog.object.remove(deps, value);
|
||||
});
|
||||
|
||||
if (goog.object.getCount(deps) == 0 && !goog.object.contains(visited, ns)) {
|
||||
change = true;
|
||||
levels[i].push(ns);
|
||||
visited.push(ns);
|
||||
}
|
||||
});
|
||||
i++;
|
||||
}
|
||||
|
||||
var errors = [];
|
||||
goog.object.forEach(goog.dependencies_.nameToPath, function(path, ns) {
|
||||
if (!goog.array.contains(visited, ns)) {
|
||||
errors.push(ns);
|
||||
}
|
||||
});
|
||||
if (errors.length > 0) {
|
||||
alert('The following files were not added to dependency graph: \n' +
|
||||
errors.join('\n'));
|
||||
}
|
||||
|
||||
document.write('<table><tr>')
|
||||
goog.array.forEach(levels, function(level) {
|
||||
document.write('<td>');
|
||||
goog.array.forEach(level, function(ns) {
|
||||
document.write(
|
||||
goog.getMsg('<div id="{$ns}" class="dep">{$ns}</div>', {ns:ns}));
|
||||
});
|
||||
});
|
||||
document.write('</tr></table>')
|
||||
|
||||
|
||||
var currentTarget = null;
|
||||
var hilited = [];
|
||||
var required = [];
|
||||
var infile = [];
|
||||
goog.events.listen(document, 'mouseover', handleMouse);
|
||||
goog.events.listen(document, 'keydown', handleKeys);
|
||||
|
||||
|
||||
function handleMouse(e) {
|
||||
highlightElement(e.target);
|
||||
}
|
||||
|
||||
function handleKeys(e) {
|
||||
if (currentTarget) {
|
||||
switch (e.keyCode) {
|
||||
case 40:
|
||||
highlightElement(currentTarget.nextSibling);
|
||||
break;
|
||||
|
||||
case 38:
|
||||
highlightElement(currentTarget.previousSibling);
|
||||
break;
|
||||
|
||||
case 39:
|
||||
// right
|
||||
break;
|
||||
|
||||
case 37:
|
||||
// left
|
||||
break;
|
||||
|
||||
default:
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function highlightElement(el) {
|
||||
if (el && el.id) {
|
||||
|
||||
goog.array.forEach(hilited.concat(required).concat(infile), function(ns) {
|
||||
document.getElementById(ns).className = 'dep';
|
||||
});
|
||||
hilited.length = 0;
|
||||
required.length = 0;
|
||||
infile.length = 0;
|
||||
|
||||
if (currentTarget) {
|
||||
currentTarget.className = 'dep';
|
||||
}
|
||||
|
||||
highlightDeps(el.id);
|
||||
highlightRequired(el.id);
|
||||
highlightFile(el.id);
|
||||
|
||||
el.className = 'dep hover';
|
||||
currentTarget = el;
|
||||
}
|
||||
}
|
||||
|
||||
function highlightFile(ns) {
|
||||
var names = goog.dependencies_.pathToNames[goog.dependencies_.nameToPath[ns]];
|
||||
goog.object.forEach(names, function(value, name) {
|
||||
document.getElementById(name).className = 'dep infile';
|
||||
infile.push(name);
|
||||
});
|
||||
}
|
||||
|
||||
function highlightRequired(ns) {
|
||||
goog.object.forEach(goog.dependencies_.requires, function(value, key) {
|
||||
if (goog.object.containsKey(value, ns)) {
|
||||
var names = goog.dependencies_.pathToNames[key];
|
||||
goog.object.forEach(names, function(val, id) {
|
||||
if (!goog.array.contains(required, id)) {
|
||||
document.getElementById(id).className = 'dep required';
|
||||
required.push(id);
|
||||
highlightRequired(id);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function highlightDeps(ns) {
|
||||
var deps = goog.dependencies_.requires[goog.dependencies_.nameToPath[ns]];
|
||||
goog.object.forEach(deps, function(value, key) {
|
||||
if (!goog.array.contains(hilited, key)) {
|
||||
document.getElementById(key).className = 'dep hilite';
|
||||
hilited.push(key);
|
||||
highlightDeps(key);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<div class="hover">selected item</div>
|
||||
<div class="infile">...is in same file as the selected item</div>
|
||||
<div class="hilite">...is a dependency of the selected item</div>
|
||||
<div class="required">the selected item is a dependency of...</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,152 @@
|
||||
<!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.Dialog</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.events.EventType');
|
||||
goog.require('goog.ui.Dialog');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/dialog.css">
|
||||
<style>
|
||||
.modal-dialog {
|
||||
width: 430px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>goog.ui.Dialog</h1>
|
||||
<div><input id="openOnKeyDown" type="checkbox">
|
||||
<label>Enable open on keydown</label>
|
||||
<span>(use "Space" to open dialog with no Iframe, "Enter" to open with Iframe
|
||||
mask</span>
|
||||
</div>
|
||||
<div><input id="swapModalOnShift" type="checkbox">
|
||||
<label>Enable modal change with shift when the dialog is open</label>
|
||||
</div>
|
||||
<button onclick="showDialog(dialog1);">
|
||||
Open Dialog (no Iframe)</button>
|
||||
<br>
|
||||
<button onclick="showDialog(dialog2);">
|
||||
Open Dialog (w/ Iframe mask)
|
||||
</button>
|
||||
|
||||
|
||||
<fieldset style="margin-top: 2em;">
|
||||
<legend>A sample web page</legend>
|
||||
<h2>
|
||||
A World Beyond AJAX: Accessing Google's APIs from Flash and
|
||||
Non-JavaScript Environments
|
||||
</h2>
|
||||
<cite>Vadim Spivak (Google)</cite>
|
||||
|
||||
<p>
|
||||
AJAX isn't the only way to access Google APIs. Learn how to use Google's
|
||||
services from Flash and other non-JavaScript programming environments.
|
||||
We'll show you how easy it is to augment your site with dynamic search
|
||||
and feed data from non-JavaScript environments.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Participants should be familiar with general web application
|
||||
development.
|
||||
</p>
|
||||
|
||||
<p>Select Element:
|
||||
<select>
|
||||
<option>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<object width="425" height="344">
|
||||
<param name="movie"
|
||||
value="http://www.youtube.com/v/7fbz8WOec1g&hl=en&fs=1&"></param>
|
||||
<param name="allowFullScreen" value="true"></param>
|
||||
<param name="allowscriptaccess" value="always"></param>
|
||||
<embed
|
||||
src="http://www.youtube.com/v/7fbz8WOec1g&hl=en&fs=1&"
|
||||
type="application/x-shockwave-flash" allowscriptaccess="always"
|
||||
allowfullscreen="true" width="425" height="344"></embed>
|
||||
</object>
|
||||
</p>
|
||||
</fieldset>
|
||||
<script>
|
||||
goog.events.listen(document, goog.events.EventType.KEYDOWN, function(e) {
|
||||
var code = e.keyCode;
|
||||
if (goog.dom.getElement('openOnKeyDown').checked) {
|
||||
switch (code) {
|
||||
case goog.events.KeyCodes.MAC_ENTER:
|
||||
case goog.events.KeyCodes.ENTER:
|
||||
showDialog(dialog1);
|
||||
break;
|
||||
case goog.events.KeyCodes.SPACE:
|
||||
showDialog(dialog2);
|
||||
break;
|
||||
default:
|
||||
// no-op
|
||||
}
|
||||
}
|
||||
if (goog.dom.getElement('swapModalOnShift').checked) {
|
||||
switch (code) {
|
||||
case goog.events.KeyCodes.SHIFT:
|
||||
if (currDialog && currDialog.isVisible()) {
|
||||
currDialog.setModal(!currDialog.getModal());
|
||||
}
|
||||
break;
|
||||
default:
|
||||
// no-op
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var dialog1 = new goog.ui.Dialog();
|
||||
dialog1.setContent('<img src="http://images.icanhascheezburger.com/' +
|
||||
'completestore/2009/3/25/128825075025577352.jpg" ' +
|
||||
'width="400" height="255"><br>' +
|
||||
'Lorem ipsum dolor sit amet, consectetuer' +
|
||||
'adipiscing elit. Aenean sollicitudin ultrices urna. Proin vehicula ' +
|
||||
'mauris ac est. Ut scelerisque, risus ut facilisis dictum, est massa ' +
|
||||
'lacinia lorem, in fermentum purus ligula quis nunc. Duis porttitor ' +
|
||||
'euismod risus. Nam hendrerit lacus vehicula augue. Duis ante.');
|
||||
dialog1.setTitle('My favorite LOLCat');
|
||||
|
||||
dialog1.setButtonSet(goog.ui.Dialog.ButtonSet.CONTINUE_SAVE_CANCEL);
|
||||
|
||||
goog.events.listen(dialog1, goog.ui.Dialog.EventType.SELECT, function(e) {
|
||||
alert('You chose: ' + e.key);
|
||||
});
|
||||
|
||||
|
||||
var dialog2 = new goog.ui.Dialog(null, true);
|
||||
dialog2.setContent('Some windowed elements leak through standard divs so ' +
|
||||
'we add an iframe to mask the nasties.');
|
||||
dialog2.setTitle('I have an Iframe mask :)');
|
||||
|
||||
dialog2.setButtonSet(goog.ui.Dialog.ButtonSet.YES_NO_CANCEL);
|
||||
|
||||
goog.events.listen(dialog2, goog.ui.Dialog.EventType.SELECT, function(e) {
|
||||
alert('You chose: ' + e.key);
|
||||
});
|
||||
|
||||
var currDialog;
|
||||
|
||||
function showDialog(dialog) {
|
||||
currDialog = dialog;
|
||||
dialog.setVisible(true);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,104 @@
|
||||
<!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.DimensionPicker</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.debug.DivConsole');
|
||||
goog.require('goog.debug.LogManager');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.log');
|
||||
goog.require('goog.object');
|
||||
goog.require('goog.ui.Component.EventType');
|
||||
goog.require('goog.ui.DimensionPicker');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/dimensionpicker.css">
|
||||
<style>
|
||||
.goog-dimension-picker div.goog-dimension-picker-highlighted {
|
||||
background: url(../images/dimension-highlighted.png);
|
||||
}
|
||||
.goog-dimension-picker-unhighlighted {
|
||||
background: url(../images/dimension-unhighlighted.png);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.DimensionPicker</h1>
|
||||
<table border="0" cellpadding="0" cellspacing="4" width="100%">
|
||||
<tbody>
|
||||
<tr valign="top">
|
||||
<td width="67%">
|
||||
<fieldset>
|
||||
<legend>Demo of the <strong>goog.ui.DimensionPicker</strong>
|
||||
component:
|
||||
</legend>
|
||||
<br/>
|
||||
<label id="p1">This is a 10x8 picker:</label>
|
||||
<label>You selected <span id="p1_value">nothing</span></label><br/>
|
||||
<label>The below picker is a decorated DIV:</label>
|
||||
<div id="decorateTarget" class="goog-dimension-picker"></div>
|
||||
</fieldset>
|
||||
<br/>
|
||||
<br/>
|
||||
</td>
|
||||
<td width="33%">
|
||||
<!-- Event log. -->
|
||||
<fieldset class="goog-debug-panel">
|
||||
<legend>Event Log</legend>
|
||||
<div id="log"></div>
|
||||
</fieldset>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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.Component.EventType);
|
||||
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
||||
|
||||
function logEvent(e) {
|
||||
var component = e.target;
|
||||
var caption = (typeof component.getCaption == 'function' &&
|
||||
component.getCaption()) || component.getId();
|
||||
goog.log.info(logger, '"' + caption + '" dispatched: ' + e.type);
|
||||
}
|
||||
|
||||
var p1 = new goog.ui.DimensionPicker();
|
||||
p1.render(goog.dom.getElement('p1'));
|
||||
goog.events.listen(p1, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
var picker = e.target;
|
||||
var size = picker.getValue();
|
||||
|
||||
goog.dom.setTextContent(goog.dom.getElement('p1_value'),
|
||||
size.width + ' x ' + size.height);
|
||||
});
|
||||
goog.events.listen(p1, EVENTS, logEvent);
|
||||
|
||||
// Perf and clean up
|
||||
|
||||
goog.dom.setTextContent(goog.dom.getElement('perf'),
|
||||
(goog.now() - timer) + 'ms');
|
||||
|
||||
var p2 = new goog.ui.DimensionPicker();
|
||||
p2.decorate(goog.dom.getElement('decorateTarget'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,119 @@
|
||||
<!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.DimensionPicker</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.debug.DivConsole');
|
||||
goog.require('goog.debug.LogManager');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.log');
|
||||
goog.require('goog.object');
|
||||
goog.require('goog.ui.Component.EventType');
|
||||
goog.require('goog.ui.DimensionPicker');
|
||||
goog.require('goog.ui.Menu');
|
||||
goog.require('goog.ui.PopupMenu');
|
||||
goog.require('goog.ui.SubMenu');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/dimensionpicker.css">
|
||||
<link rel="stylesheet" href="../css/menu.css">
|
||||
<link rel="stylesheet" href="../css/menuitem.css">
|
||||
<link rel="stylesheet" href="../css/menuseparator.css">
|
||||
</head>
|
||||
<body dir="rtl">
|
||||
<h1>goog.ui.DimensionPicker</h1>
|
||||
<table border="0" cellpadding="0" cellspacing="4" width="100%">
|
||||
<tbody>
|
||||
<tr valign="top">
|
||||
<td width="33%">
|
||||
<!-- Event log. -->
|
||||
<fieldset class="goog-debug-panel">
|
||||
<legend>Event Log</legend>
|
||||
<div id="log"></div>
|
||||
</fieldset>
|
||||
</td>
|
||||
<td width="67%">
|
||||
<fieldset>
|
||||
<legend>Demo of the <strong>goog.ui.DimensionPicker</strong>
|
||||
component:
|
||||
</legend>
|
||||
<br/>
|
||||
<p ><button id="button">Open menu</button></p>
|
||||
<label id="p1">This is a 10x8 picker:</label>
|
||||
<label>You selected <span id="p1_value">nothing</span></label><br/>
|
||||
<label>The below picker is a decorated DIV:</label>
|
||||
<div id="decorateTarget" class="goog-dimension-picker"></div>
|
||||
</fieldset>
|
||||
<br/>
|
||||
<br/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<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.Component.EventType);
|
||||
goog.log.fine(logger, 'Listening for: ' + EVENTS.join(', ') + '.');
|
||||
|
||||
function logEvent(e) {
|
||||
var component = e.target;
|
||||
var caption = (typeof component.getCaption == 'function' &&
|
||||
component.getCaption()) || component.getId();
|
||||
goog.log.info(logger, '"' + caption + '" dispatched: ' + e.type);
|
||||
}
|
||||
|
||||
// Popup menu with sub menus
|
||||
var menu = new goog.ui.PopupMenu();
|
||||
menu.attach(document.getElementById('button'),
|
||||
goog.positioning.Corner.BOTTOM_START);
|
||||
|
||||
var subMenu = new goog.ui.SubMenu('Zero');
|
||||
var dimensionPicker = new goog.ui.DimensionPicker();
|
||||
dimensionPicker.setRightToLeft(true);
|
||||
var pickerMenu = new goog.ui.Menu();
|
||||
pickerMenu.addChild(dimensionPicker, true);
|
||||
subMenu.setMenu(pickerMenu);
|
||||
menu.addItem(subMenu);
|
||||
menu.render();
|
||||
|
||||
var p1 = new goog.ui.DimensionPicker();
|
||||
p1.setRightToLeft(true);
|
||||
p1.render(goog.dom.getElement('p1'));
|
||||
goog.events.listen(p1, goog.ui.Component.EventType.ACTION,
|
||||
function(e) {
|
||||
var picker = e.target;
|
||||
var size = picker.getValue();
|
||||
|
||||
goog.dom.setTextContent(goog.dom.getElement('p1_value'),
|
||||
size.width + ' x ' + size.height);
|
||||
});
|
||||
goog.events.listen(p1, EVENTS, logEvent);
|
||||
|
||||
// Perf and clean up
|
||||
|
||||
goog.dom.setTextContent(goog.dom.getElement('perf'),
|
||||
(goog.now() - timer) + 'ms');
|
||||
|
||||
var p2 = new goog.ui.DimensionPicker();
|
||||
p2.setRightToLeft(true);
|
||||
p2.decorate(goog.dom.getElement('decorateTarget'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,88 @@
|
||||
<!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></title>
|
||||
<style>
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.dom.selection');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
var $ = goog.dom.getElement;
|
||||
|
||||
var isSyncing = false;
|
||||
|
||||
function update(i) {
|
||||
isSyncing = true;
|
||||
var selectionStart = $('selectionStart' + i).value;
|
||||
var selectionEnd = $('selectionEnd' + i).value;
|
||||
var selectionText = $('selectionText' + i).value;
|
||||
var textField = $('textField' + i);
|
||||
textField.focus();
|
||||
|
||||
if (!isNaN(selectionStart)) {
|
||||
goog.dom.selection.setStart(textField, selectionStart);
|
||||
}
|
||||
|
||||
if (!isNaN(selectionEnd)) {
|
||||
goog.dom.selection.setEnd(textField, selectionEnd);
|
||||
}
|
||||
|
||||
selection.setText(textField, selectionText);
|
||||
isSyncing = false;
|
||||
sync(i);
|
||||
}
|
||||
|
||||
function sync(i) {
|
||||
isSyncing = true;
|
||||
var textField = $('textField' + i);
|
||||
$('selectionStart' + i).value = goog.dom.selection.getStart(textField);
|
||||
$('selectionEnd' + i).value = goog.dom.selection.getEnd(textField);
|
||||
$('selectionText' + i).value = goog.dom.selection.getText(textField);
|
||||
isSyncing = false;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<label>selectionStart <input type=text id=selectionStart1></label>
|
||||
<label>selectionEnd <input type=text id=selectionEnd1></label>
|
||||
<label>selectionText <input type=text id=selectionText1></label>
|
||||
<button onclick="update(1)">Update Textarea</button><br>
|
||||
|
||||
<textarea id=textField1 onkeydown="sync(1)" onkeyup="sync(1)"></textarea>
|
||||
|
||||
|
||||
<label>selectionStart <input type=text id=selectionStart2></label>
|
||||
<label>selectionEnd <input type=text id=selectionEnd2></label>
|
||||
<label>selectionText <input type=text id=selectionText2></label>
|
||||
<button onclick="update(2)">Update Input</button><br>
|
||||
<input type=text id=textField2 onkeydown="sync(2)" onkeyup="sync(2)">
|
||||
|
||||
<script>
|
||||
|
||||
window.onload = function() {
|
||||
sync(1);
|
||||
sync(2);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>goog.fx.Dragger</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.fx.Dragger');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.style');
|
||||
</script>
|
||||
<style>
|
||||
#frame {
|
||||
position: absolute;
|
||||
left: 99px;
|
||||
top: 99px;
|
||||
width: 802px;
|
||||
height: 502px;
|
||||
border: 1px solid #999;
|
||||
background-color: #F0F0F0;
|
||||
}
|
||||
|
||||
.window {
|
||||
position:absolute;
|
||||
left: 150px;
|
||||
top: 110px;
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
background-color: rgb(200,200,250);
|
||||
border: 1px solid #99F;
|
||||
font: bold 11px/18px arial;
|
||||
text-indent: 10px;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#win2 {
|
||||
top:250px;
|
||||
background-color: rgb(250,200,200);
|
||||
border: 1px solid #F99;
|
||||
}
|
||||
|
||||
#win3 {
|
||||
left:500px;
|
||||
background-color: rgb(150,200,150);
|
||||
border: 1px solid #6A6;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position:absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 300px;
|
||||
height: 20px;
|
||||
background-color: #99F;
|
||||
cursor: default;
|
||||
}
|
||||
#win2 .bar { background-color: #F99; }
|
||||
#win3 .bar { background-color: #6A6; }
|
||||
|
||||
#sliderback {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
top: 98px;
|
||||
height: 505px;
|
||||
width: 1px;
|
||||
font-size: 1px;
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
#slider {
|
||||
position: absolute;
|
||||
left: 35px;
|
||||
top: 98px;
|
||||
width: 30px;
|
||||
height: 13px;
|
||||
font: normal 10px verdana;
|
||||
background-color: #EEE;
|
||||
color: #000;
|
||||
text-align:center;
|
||||
border: 1px solid #999;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#ghostbox {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
top: 625px;
|
||||
width: 600px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.block {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 125px;
|
||||
height: 20px;
|
||||
font: bold 11px/18px arial;
|
||||
background-color: #AAA;
|
||||
color: #EEE;
|
||||
text-align: center;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
.ghost0 { left: 0px; }
|
||||
.ghost1 { left: 130px; }
|
||||
.ghost2 { left: 260px; }
|
||||
.ghost3 { left: 390px; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.fx.Dragger</h1>
|
||||
<p><strong>Demonstrations of the drag utiities</strong>.</p>
|
||||
|
||||
<div id="frame"></div>
|
||||
|
||||
<div id="win1" class="window"><div class="bar">Drag Me...</div></div>
|
||||
<div id="win2" class="window"><div class="bar">Drag Me...</div></div>
|
||||
<div id="win3" class="window"><div class="bar">Drag Me...</div></div>
|
||||
|
||||
<div id="sliderback"></div>
|
||||
<div id="slider">0</div>
|
||||
|
||||
|
||||
<script>
|
||||
|
||||
var $ = goog.dom.getElement;
|
||||
|
||||
// WINDOW EXAMPLE
|
||||
//================
|
||||
|
||||
var Z = 5;
|
||||
|
||||
var limits = new goog.math.Rect(100, 100, 500, 400) ;
|
||||
|
||||
var window1 = new goog.fx.Dragger($('win1'), $('win1').firstChild, limits);
|
||||
var window2 = new goog.fx.Dragger($('win2'), $('win2').firstChild, limits);
|
||||
var window3 = new goog.fx.Dragger($('win3'), $('win3').firstChild);
|
||||
|
||||
window3.setHysteresis(6);
|
||||
|
||||
function setZ(e) {
|
||||
this.target.style.zIndex = Z++;
|
||||
goog.style.setOpacity(this.target, 0.50);
|
||||
}
|
||||
|
||||
function end(e) {
|
||||
goog.style.setOpacity(this.target, 1);
|
||||
}
|
||||
|
||||
goog.events.listen(window1, 'start', setZ);
|
||||
goog.events.listen(window2, 'start', setZ);
|
||||
goog.events.listen(window3, 'start', setZ);
|
||||
|
||||
goog.events.listen(window1, 'end', end);
|
||||
goog.events.listen(window2, 'end', end);
|
||||
goog.events.listen(window3, 'end', end);
|
||||
|
||||
|
||||
// SLIDER EXAMPLE
|
||||
//================
|
||||
|
||||
var slider1 = new goog.fx.Dragger($('slider'), null,
|
||||
new goog.math.Rect(35, 98, 0, 490));
|
||||
|
||||
goog.events.listen(slider1, 'drag', function(e) {
|
||||
var percent = Math.round(100 * (e.top - e.dragger.limits.top) /
|
||||
e.dragger.limits.height);
|
||||
$('slider').innerHTML = percent;
|
||||
});
|
||||
|
||||
|
||||
goog.events.listen(window, 'unload', function(e) {
|
||||
window1.dispose();
|
||||
window2.dispose();
|
||||
window3.dispose();
|
||||
|
||||
slider1.dispose();
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</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.
|
||||
-->
|
||||
@@ -0,0 +1,263 @@
|
||||
<!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.fx.DragDrop</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.fx.DragDrop');
|
||||
goog.require('goog.fx.DragDropGroup');
|
||||
goog.require('goog.dom');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 10px;
|
||||
}
|
||||
ul {
|
||||
padding: 0px;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
li, div {
|
||||
font: menu;
|
||||
width: 20ex;
|
||||
border: 1px solid gray;
|
||||
margin: 1px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
background: silver;
|
||||
}
|
||||
.source {
|
||||
cursor: move;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
.drag {
|
||||
cursor: move;
|
||||
background: green;
|
||||
}
|
||||
.target {
|
||||
|
||||
}
|
||||
#list2 {
|
||||
margin: 0px 30px 30px 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.foo {
|
||||
position: absolute;
|
||||
background: pink;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.fx.DragDrop</h1>
|
||||
|
||||
List 1 (combined source/target, can be dropped on list 1, list 2, button 1 or
|
||||
button 2).
|
||||
<ul id="list1">
|
||||
<li>Item 1.1</li>
|
||||
<li>Item 1.2</li>
|
||||
<li>Item 1.3</li>
|
||||
<li>Item 1.4</li>
|
||||
<li>Item 1.5</li>
|
||||
<li>Item 1.6</li>
|
||||
<li>Item 1.7</li>
|
||||
<li>Item 1.8</li>
|
||||
<li>Item 1.9</li>
|
||||
<li>Item 1.10</li>
|
||||
<li>Item 1.11</li>
|
||||
<li>Item 1.12</li>
|
||||
<li>Item 1.13</li>
|
||||
<li>Item 1.14</li>
|
||||
<li>Item 1.15</li>
|
||||
</ul>
|
||||
|
||||
List 2 (source only, can be dropped on list 1 or button 2)
|
||||
<ul id="list2">
|
||||
<li>Item 2.1</li>
|
||||
<li>Item 2.2</li>
|
||||
<li>Item 2.3</li>
|
||||
<li>Item 2.4</li>
|
||||
<li>Item 2.5</li>
|
||||
<li>Item 2.6</li>
|
||||
<li>Item 2.7</li>
|
||||
<li>Item 2.8</li>
|
||||
<li>Item 2.9</li>
|
||||
<li>Item 2.10</li>
|
||||
<li>Item 2.11</li>
|
||||
<li>Item 2.12</li>
|
||||
<li>Item 2.13</li>
|
||||
<li>Item 2.14</li>
|
||||
<li>Item 2.15</li>
|
||||
</ul>
|
||||
|
||||
<div id="button1">
|
||||
Button 1 (combined source/target, can be dropped on list 1)
|
||||
</div>
|
||||
|
||||
<div id="button2">
|
||||
Button 2 (target only)
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
// Custom implementation demo. Overrides createDragElement and
|
||||
// positionDragElement.
|
||||
function FooDrag(element, opt_data) {
|
||||
goog.fx.DragDrop.call(this, element, opt_data);
|
||||
}
|
||||
goog.inherits(FooDrag, goog.fx.DragDrop);
|
||||
|
||||
FooDrag.prototype.createDragElement = function(sourceEl) {
|
||||
return goog.dom.createDom('div', 'foo', 'Custom drag element');
|
||||
};
|
||||
|
||||
FooDrag.prototype.getDragElementPosition = function(sourceEl, el, event) {
|
||||
return new goog.math.Coordinate(event.clientX, event.clientY);
|
||||
};
|
||||
|
||||
|
||||
var button1, button2, list1, list2, i, len, nodes, el;
|
||||
|
||||
// Create drop targets (either by id or element reference)
|
||||
button1 = new FooDrag(
|
||||
document.getElementById('button1'), 'button 1'
|
||||
);
|
||||
button2 = new goog.fx.DragDrop('button2', 'button 2');
|
||||
|
||||
// Create drag clusters (multiple elements shares the same
|
||||
// drag properties)
|
||||
list1 = new goog.fx.DragDropGroup();
|
||||
list2 = new goog.fx.DragDropGroup();
|
||||
|
||||
nodes = document.getElementById('list1').childNodes;
|
||||
len = nodes.length;
|
||||
for (i = 0; i < len; i++) {
|
||||
el = nodes[i];
|
||||
if ((el.nodeType == 1) && (el.nodeName == 'LI')) {
|
||||
list1.addItem(el, el.firstChild.nodeValue);
|
||||
}
|
||||
}
|
||||
|
||||
nodes = document.getElementById('list2').childNodes;
|
||||
len = nodes.length;
|
||||
for (i = 0; i < len; i++) {
|
||||
el = nodes[i];
|
||||
if ((el.nodeType == 1) && (el.nodeName == 'LI')) {
|
||||
list2.addItem(el, el.firstChild.nodeValue);
|
||||
}
|
||||
}
|
||||
|
||||
// Set valid targets for list1
|
||||
list1.addTarget(button1);
|
||||
list1.addTarget(button2);
|
||||
list1.addTarget(list1);
|
||||
|
||||
// Set valid targets for list2
|
||||
list2.addTarget(button2);
|
||||
list2.addTarget(list1);
|
||||
|
||||
// Set valid target for button1 (allow button1 to be dragged onto list1)
|
||||
button1.addTarget(list1);
|
||||
|
||||
// Set additional classes used to indicate dragging
|
||||
button1.setSourceClass('source');
|
||||
button1.setTargetClass('target');
|
||||
button1.setDragClass('drag');
|
||||
button2.setSourceClass('source');
|
||||
button2.setTargetClass('target');
|
||||
list1.setSourceClass('source');
|
||||
list1.setTargetClass('target');
|
||||
list2.setSourceClass('source');
|
||||
|
||||
// Init drag objects
|
||||
button1.init();
|
||||
button2.init();
|
||||
list1.init();
|
||||
list2.init();
|
||||
|
||||
// Set up event handlers
|
||||
goog.events.listen(list1, 'dragover', dragOver);
|
||||
goog.events.listen(list1, 'dragout', dragOut);
|
||||
goog.events.listen(list1, 'drop', dropList1);
|
||||
goog.events.listen(list1, 'drag', dragList1);
|
||||
goog.events.listen(list1, 'dragstart', dragStart);
|
||||
goog.events.listen(list1, 'dragend', dragEnd);
|
||||
|
||||
goog.events.listen(list2, 'dragover', dragOver);
|
||||
goog.events.listen(list2, 'dragout', dragOut);
|
||||
goog.events.listen(list2, 'drop', drop);
|
||||
goog.events.listen(list2, 'dragstart', dragStart);
|
||||
goog.events.listen(list2, 'dragend', dragEnd);
|
||||
|
||||
goog.events.listen(button1, 'dragover', dragOver);
|
||||
goog.events.listen(button1, 'dragout', dragOut);
|
||||
goog.events.listen(button1, 'drop', drop);
|
||||
goog.events.listen(button1, 'dragstart', dragStart);
|
||||
goog.events.listen(button1, 'dragend', dragEnd);
|
||||
|
||||
goog.events.listen(button2, 'dragover', dragOver);
|
||||
goog.events.listen(button2, 'dragout', dragOut);
|
||||
goog.events.listen(button2, 'drop', drop);
|
||||
|
||||
goog.events.listen(document.getElementById('button1'), 'click',
|
||||
function(e) { alert('click'); });
|
||||
|
||||
function dragOver(event) {
|
||||
event.dropTargetItem.element.style.background = 'red';
|
||||
}
|
||||
|
||||
function dragOut(event) {
|
||||
event.dropTargetItem.element.style.background = 'silver';
|
||||
}
|
||||
|
||||
function drop(event) {
|
||||
event.dropTargetItem.element.style.background = 'silver';
|
||||
var str = [
|
||||
event.dragSourceItem.data,
|
||||
' dropped onto ',
|
||||
event.dropTargetItem.data,
|
||||
' at ',
|
||||
event.viewportX,
|
||||
'x',
|
||||
event.viewportY
|
||||
];
|
||||
alert(str.join(''));
|
||||
}
|
||||
|
||||
function dropList1(event) {
|
||||
event.dropTargetItem.element.style.background = 'silver';
|
||||
var str = [
|
||||
event.dragSourceItem.data,
|
||||
' dropped onto ',
|
||||
event.dropTargetItem.data,
|
||||
' in list 1.'
|
||||
];
|
||||
alert(str.join(''));
|
||||
}
|
||||
|
||||
function dragList1(event) {
|
||||
var str = [
|
||||
event.dragSourceItem.data,
|
||||
' dragged from list 1'
|
||||
];
|
||||
alert(str.join(''));
|
||||
}
|
||||
|
||||
function dragStart(event) {
|
||||
goog.style.setOpacity(event.dragSourceItem.element, 0.5);
|
||||
}
|
||||
|
||||
function dragEnd(event) {
|
||||
goog.style.setOpacity(event.dragSourceItem.element, 1.0);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!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.DragDropDetector</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.ui.DragDropDetector');
|
||||
goog.require('goog.ui.DragDropDetector.EventType');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<link rel="stylesheet" href="../css/dragdropdetector.css">
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.ui.DragDropDetector</h1>
|
||||
<p>Try dropping images from other web pages on this page.</p>
|
||||
<script type="text/javascript">
|
||||
var detector = new goog.ui.DragDropDetector();
|
||||
goog.events.listen(detector,
|
||||
[
|
||||
goog.ui.DragDropDetector.EventType.IMAGE_DROPPED,
|
||||
goog.ui.DragDropDetector.EventType.LINK_DROPPED
|
||||
],
|
||||
function(e) {
|
||||
var str = 'Detected ' + e.getUrl();
|
||||
if (e.getPosition) {
|
||||
str += ' at ' + e.getPosition();
|
||||
}
|
||||
alert(str);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,17 @@
|
||||
<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>
|
||||
<style type="text/css">
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
@@ -0,0 +1,83 @@
|
||||
<!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.fx.Dragger</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.events.EventType');
|
||||
goog.require('goog.fx.Dragger');
|
||||
goog.require('goog.fx.Dragger.EventType');
|
||||
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<style>
|
||||
|
||||
#stopper {
|
||||
position: absolute;
|
||||
padding: 5px;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: pink;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
#out {
|
||||
display: inline;
|
||||
background: #eee;
|
||||
border: 1px solid #ddd;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>goog.fx.Dragger</h1>
|
||||
|
||||
<p>This demo shows how to use a dragger to capture mouse move events. It tests
|
||||
that you can drag things outside the window and that alerts ends the dragging.
|
||||
|
||||
<h2 id=test onclick="alert('Click')">Drag me</h2>
|
||||
<pre id=out>Status</pre>
|
||||
|
||||
<div id=stopper onmouseover="alert('Stop!')">Drag over me to generate an
|
||||
alert</div>
|
||||
|
||||
<script>
|
||||
|
||||
function update(e) {
|
||||
print(e.clientX + ', ' + e.clientY);
|
||||
}
|
||||
|
||||
function print(s) {
|
||||
document.getElementById('out').innerHTML = s;
|
||||
}
|
||||
|
||||
var testEl = document.getElementById('test');
|
||||
|
||||
goog.events.listen(testEl, goog.events.EventType.MOUSEDOWN, function(e) {
|
||||
|
||||
var d = new goog.fx.Dragger(testEl);
|
||||
d.addEventListener(goog.fx.Dragger.EventType.DRAG, function(e) {
|
||||
update(e);
|
||||
});
|
||||
d.addEventListener(goog.fx.Dragger.EventType.END, function(e) {
|
||||
print('finish');
|
||||
d.dispose();
|
||||
});
|
||||
d.startDrag(e);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,273 @@
|
||||
<!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.fx.DragListGroup</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.fx.DragListDirection');
|
||||
goog.require('goog.fx.DragListGroup');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: verdana, sans-serif;
|
||||
}
|
||||
|
||||
.hr_clear {
|
||||
float: none;
|
||||
clear: both;
|
||||
height: 0px;
|
||||
padding: 10px 0px 0px 0px;
|
||||
border: 0px;
|
||||
margin: 0px;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.bug {
|
||||
color: red;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.horiz1_class,
|
||||
.horiz3_class,
|
||||
.horiz5_class {
|
||||
padding: 8px 12px;
|
||||
/* box_height + 2 * (padding + border + margin) =
|
||||
50 + 2 * (5 + 2 + 4) = 72px */
|
||||
height: 72px;
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
.horiz1_class { float: left; }
|
||||
.horiz3_class { float: left; }
|
||||
.horiz5_class { float: left; }
|
||||
|
||||
.horiz1_class div { float: left; }
|
||||
.horiz3_class div { float: right; }
|
||||
.horiz5_class div { float: left; }
|
||||
|
||||
.horiz5_class {
|
||||
width: 288px;
|
||||
height: 216px;
|
||||
}
|
||||
|
||||
.vert_table td {
|
||||
vertical-align: top;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.vert1_class,
|
||||
.vert2_class {
|
||||
padding: 12px 8px;
|
||||
/* box_width + 2 * (padding + border + margin) =
|
||||
50 + 2 * (5 + 2 + 2) = 68px */
|
||||
width: 68px;
|
||||
border: 2px solid #000000;
|
||||
}
|
||||
|
||||
div.red_box,
|
||||
div.yellow_box,
|
||||
div.blue_box,
|
||||
div.purple_box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 5px;
|
||||
margin: 4px 2px;
|
||||
font-family: verdana, sans-serif;
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
div.red_box {
|
||||
border: 2px solid #CC0000;
|
||||
color: #CC0000;
|
||||
}
|
||||
div.yellow_box {
|
||||
border: 2px solid #CCCC00;
|
||||
color: #CCCC00;
|
||||
}
|
||||
div.blue_box {
|
||||
border: 2px solid #0000CC;
|
||||
color: #0000CC;
|
||||
}
|
||||
div.purple_box {
|
||||
border: 2px solid #993399;
|
||||
color: #993399;
|
||||
}
|
||||
|
||||
#test {
|
||||
background-color: #CCFFCC;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 13px;
|
||||
border: 11px solid #339933;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
/* The following styles are used in the JS. */
|
||||
|
||||
.cursor_pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cursor_move {
|
||||
cursor: move;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.opacity_40 {
|
||||
opacity: 0.4;
|
||||
-moz-opacity: 0.4;
|
||||
filter: alpha(opacity=40);
|
||||
}
|
||||
|
||||
.drag_hover_class {
|
||||
border-color: #009900;
|
||||
background-color: #CCFFCC;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>goog.fx.DragListGroup</h1>
|
||||
<h2>You can drag any squares into any of the first 4 lists.</h2>
|
||||
<hr class="hr_clear">
|
||||
|
||||
<h4>Horizontal list 1 (grows right):</h4>
|
||||
<div id="horiz1_div" class="horiz1_class">
|
||||
<div class="red_box">1</div>
|
||||
<div class="red_box">2</div>
|
||||
<div class="red_box">3</div>
|
||||
<div class="red_box">4</div>
|
||||
</div>
|
||||
<hr class="hr_clear">
|
||||
|
||||
<table class="vert_table">
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
<h4>Vertical list 1:</h4>
|
||||
<div id="vert1_div" class="vert1_class">
|
||||
<div class="blue_box">1</div>
|
||||
<div class="blue_box">2</div>
|
||||
<div class="blue_box">3</div>
|
||||
<div class="blue_box">4</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<h4>Vertical list 2 (style changes on drag hover):</h4>
|
||||
<div id="vert2_div" class="vert2_class">
|
||||
<div class="purple_box">1</div>
|
||||
<div class="purple_box">2</div>
|
||||
<div class="purple_box">3</div>
|
||||
<div class="purple_box">4</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
<hr class="hr_clear">
|
||||
<h4>Horizontal list 3 (grows left):</h4>
|
||||
<p class="bug">Bug: drop position is off by one.</p>
|
||||
<div id="horiz3_div" class="horiz3_class">
|
||||
<div class="yellow_box">1</div>
|
||||
<div class="yellow_box">2</div>
|
||||
<div class="yellow_box">3</div>
|
||||
<div class="yellow_box">4</div>
|
||||
</div>
|
||||
<hr class="hr_clear">
|
||||
|
||||
<h4>Horizontal list 5 (grows right, has multiple rows, hysteresis is enabled):</h4>
|
||||
<p class="bug">Bug: can't drop into the last row.</p>
|
||||
<div id="horiz5_div" class="horiz5_class">
|
||||
<div class="blue_box">11</div>
|
||||
<div class="blue_box">22</div>
|
||||
<div class="blue_box">33</div>
|
||||
<div class="blue_box">44</div>
|
||||
<div class="blue_box">55</div>
|
||||
<div class="blue_box">66</div>
|
||||
<div class="blue_box">77</div>
|
||||
<div class="blue_box">88</div>
|
||||
<div class="blue_box">99</div>
|
||||
</div>
|
||||
<hr class="hr_clear">
|
||||
|
||||
<h4>The items in this list can be moved around with shift-dragging:</h4>
|
||||
<div id="horiz6_div" class="horiz1_class">
|
||||
<div class="red_box">1</div>
|
||||
<div class="red_box">2</div>
|
||||
<div class="red_box">3</div>
|
||||
<div class="red_box">4</div>
|
||||
</div>
|
||||
<hr class="hr_clear">
|
||||
|
||||
<h4>The items have different width:</h4>
|
||||
<p class="bug">
|
||||
Bug: the drop positions are off.
|
||||
For example try moving box 1 a bit to the left.
|
||||
</p>
|
||||
<div id="horiz7_div" class="horiz1_class">
|
||||
<div class="red_box" style="width: 200px">1</div>
|
||||
<div class="red_box">2</div>
|
||||
<div class="red_box" style="width: 200px">3</div>
|
||||
<div class="red_box">4</div>
|
||||
</div>
|
||||
<hr class="hr_clear">
|
||||
<script>
|
||||
|
||||
var dlg = new goog.fx.DragListGroup();
|
||||
dlg.setDragItemHoverClass('cursor_move');
|
||||
dlg.setDraggerElClass('cursor_move opacity_40');
|
||||
|
||||
dlg.addDragList(goog.dom.getElement('horiz1_div'),
|
||||
goog.fx.DragListDirection.RIGHT);
|
||||
dlg.addDragList(goog.dom.getElement('horiz3_div'),
|
||||
goog.fx.DragListDirection.LEFT);
|
||||
dlg.addDragList(goog.dom.getElement('vert1_div'),
|
||||
goog.fx.DragListDirection.DOWN);
|
||||
dlg.addDragList(goog.dom.getElement('vert2_div'),
|
||||
goog.fx.DragListDirection.DOWN, true, 'drag_hover_class');
|
||||
|
||||
dlg.init();
|
||||
|
||||
var dlg2 = new goog.fx.DragListGroup();
|
||||
dlg2.setDragItemHoverClass('cursor_move');
|
||||
dlg2.setDraggerElClass('cursor_move opacity_40');
|
||||
dlg2.setCurrDragItemClass('opacity_40');
|
||||
dlg2.setIsCurrDragItemAlwaysDisplayed();
|
||||
dlg2.addDragList(goog.dom.getElement('horiz5_div'),
|
||||
goog.fx.DragListDirection.RIGHT_2D);
|
||||
dlg2.setHysteresis(5);
|
||||
dlg2.init();
|
||||
|
||||
var dlg3 = new goog.fx.DragListGroup();
|
||||
dlg3.setDragItemHoverClass('cursor_move');
|
||||
dlg3.setDraggerElClass('cursor_move opacity_40');
|
||||
dlg3.addDragList(goog.dom.getElement('horiz6_div'),
|
||||
goog.fx.DragListDirection.RIGHT);
|
||||
goog.events.listen(dlg3, goog.fx.DragListGroup.EventType.BEFOREDRAGSTART,
|
||||
function(e) {
|
||||
if (!e.event.shiftKey) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
dlg3.init();
|
||||
|
||||
var dlg4 = new goog.fx.DragListGroup();
|
||||
dlg4.setDragItemHoverClass('cursor_move');
|
||||
dlg4.setDraggerElClass('cursor_move opacity_40');
|
||||
dlg4.setIsCurrDragItemAlwaysDisplayed();
|
||||
dlg4.addDragList(goog.dom.getElement('horiz7_div'),
|
||||
goog.fx.DragListDirection.RIGHT);
|
||||
dlg4.init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,133 @@
|
||||
<!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.fx.DragScrollSupport</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.fx.DragDrop');
|
||||
goog.require('goog.fx.DragDropGroup');
|
||||
goog.require('goog.fx.DragScrollSupport');
|
||||
goog.require('goog.dom');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 10px;
|
||||
}
|
||||
ul {
|
||||
padding: 0px;
|
||||
}
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
li, div {
|
||||
font: menu;
|
||||
width: 20ex;
|
||||
border: 1px solid gray;
|
||||
margin: 1px;
|
||||
padding: 0px 2px 0px 2px;
|
||||
background: silver;
|
||||
}
|
||||
.source {
|
||||
cursor: move;
|
||||
-moz-user-select: none;
|
||||
}
|
||||
.drag {
|
||||
cursor: move;
|
||||
background: green;
|
||||
}
|
||||
.target {
|
||||
|
||||
}
|
||||
#list2 {
|
||||
margin: 0px 30px 30px 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
.foo {
|
||||
position: absolute;
|
||||
background: pink;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.fx.DragScrollSupport</h1>
|
||||
|
||||
List 1 in a scrollable area.
|
||||
<div id="list1-container" style="overflow:scroll; width: 100px; height: 300px;">
|
||||
<ul id="list1">
|
||||
<li>Item 1.1 ----------</li>
|
||||
<li>Item 1.2 ----------</li>
|
||||
<li>Item 1.3 ----------</li>
|
||||
<li>Item 1.4 ----------</li>
|
||||
<li>Item 1.5 ----------</li>
|
||||
<li>Item 1.6 ----------</li>
|
||||
<li>Item 1.7 ----------</li>
|
||||
<li>Item 1.8 ----------</li>
|
||||
<li>Item 1.9 ----------</li>
|
||||
<li>Item 1.10 ----------</li>
|
||||
<li>Item 1.11 ----------</li>
|
||||
<li>Item 1.12 ----------</li>
|
||||
<li>Item 1.13 ----------</li>
|
||||
<li>Item 1.14 ----------</li>
|
||||
<li>Item 1.15 ----------</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var scrollSupport = null;
|
||||
var list1 = new goog.fx.DragDropGroup();
|
||||
|
||||
var nodes = document.getElementById('list1').childNodes;
|
||||
var len = nodes.length;
|
||||
for (var i = 0; i < len; i++) {
|
||||
var el = nodes[i];
|
||||
if ((el.nodeType == 1) && (el.nodeName == 'LI')) {
|
||||
list1.addItem(el, el.firstChild.nodeValue);
|
||||
}
|
||||
}
|
||||
|
||||
list1.addScrollableContainer(goog.dom.getElement('list1-container'));
|
||||
list1.addTarget(list1);
|
||||
|
||||
// Set additional classes used to indicate dragging
|
||||
list1.setSourceClass('source');
|
||||
list1.setTargetClass('target');
|
||||
|
||||
// Init drag objects
|
||||
list1.init();
|
||||
|
||||
// Set up event handlers
|
||||
goog.events.listen(list1, 'dragover', dragOver);
|
||||
goog.events.listen(list1, 'dragout', dragOut);
|
||||
goog.events.listen(list1, 'dragstart', dragStart);
|
||||
goog.events.listen(list1, 'dragend', dragEnd);
|
||||
|
||||
function dragOver(event) {
|
||||
event.dropTargetItem.element.style.background = 'red';
|
||||
}
|
||||
|
||||
function dragOut(event) {
|
||||
event.dropTargetItem.element.style.background = 'silver';
|
||||
}
|
||||
|
||||
function dragStart(event) {
|
||||
goog.style.setOpacity(event.dragSourceItem.element, 0.5);
|
||||
scrollSupport = new goog.fx.DragScrollSupport(
|
||||
goog.dom.getElement('list1-container'));
|
||||
}
|
||||
|
||||
function dragEnd(event) {
|
||||
goog.style.setOpacity(event.dragSourceItem.element, 1.0);
|
||||
goog.dispose(scrollSupport);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
|
||||
"http://www.w3.org/TR/html4/loose.dtd">
|
||||
<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>Demo of DrilldownRow</title>
|
||||
<script type="text/javascript" src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.ui.DrilldownRow');
|
||||
</script>
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.toggle {
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
background-repeat: none;
|
||||
background-position: right;
|
||||
}
|
||||
|
||||
tr.goog-drilldown-expanded .toggle {
|
||||
background-image: url('../images/minus.png');
|
||||
}
|
||||
|
||||
tr.goog-drilldown-collapsed .toggle {
|
||||
background-image: url('../images/plus.png');
|
||||
}
|
||||
|
||||
tr.goog-drilldown-hover td {
|
||||
background-color: #CCCCFF;
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table id=table style="background-color: silver">
|
||||
<tr>
|
||||
<th>Column Head</th>
|
||||
<th>Second Head</th>
|
||||
</tr>
|
||||
<tr id=firstRow>
|
||||
<td>First row</td>
|
||||
<td>Second column</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
var ff = goog.dom.getElement('firstRow');
|
||||
var d = new goog.ui.DrilldownRow({});
|
||||
var d1 = new goog.ui.DrilldownRow(
|
||||
{html: '<tr><td>Second row</td><td>Second column</td></tr>'}
|
||||
);
|
||||
var d2 = new goog.ui.DrilldownRow(
|
||||
{html: '<tr><td>Third row</td><td>Second column</td></tr>'}
|
||||
);
|
||||
var d21 = new goog.ui.DrilldownRow(
|
||||
{html: '<tr><td>Fourth row</td><td>Second column</td></tr>'}
|
||||
);
|
||||
var d22 = new goog.ui.DrilldownRow(goog.ui.DrilldownRow.sampleProperties);
|
||||
d.decorate(ff);
|
||||
d.addChild(d1, true);
|
||||
d.addChild(d2, true);
|
||||
d2.addChild(d21, true);
|
||||
d2.addChild(d22, true);
|
||||
</script>
|
||||
</html>
|
||||
@@ -0,0 +1,21 @@
|
||||
// Copyright 2009 The Closure Library Authors.
|
||||
// All Rights Reserved.
|
||||
//
|
||||
// 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.
|
||||
//
|
||||
// This file has been auto-generated by GenJsDeps, please do not edit.
|
||||
|
||||
goog.addDependency('demos/editor/equationeditor.js', ['goog.demos.editor.EquationEditor'], ['goog.ui.equation.EquationEditorDialog']);
|
||||
goog.addDependency('demos/editor/helloworld.js', ['goog.demos.editor.HelloWorld'], ['goog.dom', 'goog.dom.TagName', 'goog.editor.Plugin']);
|
||||
goog.addDependency('demos/editor/helloworlddialog.js', ['goog.demos.editor.HelloWorldDialog', 'goog.demos.editor.HelloWorldDialog.OkEvent'], ['goog.dom.TagName', 'goog.events.Event', 'goog.string', 'goog.ui.editor.AbstractDialog', 'goog.ui.editor.AbstractDialog.Builder', 'goog.ui.editor.AbstractDialog.EventType']);
|
||||
goog.addDependency('demos/editor/helloworlddialogplugin.js', ['goog.demos.editor.HelloWorldDialogPlugin', 'goog.demos.editor.HelloWorldDialogPlugin.Command'], ['goog.demos.editor.HelloWorldDialog', 'goog.dom.TagName', 'goog.editor.plugins.AbstractDialogPlugin', 'goog.editor.range', 'goog.functions', 'goog.ui.editor.AbstractDialog.EventType']);
|
||||
@@ -0,0 +1,139 @@
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2009 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>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>goog.editor Demo</title>
|
||||
<script src="../../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.editor.Command');
|
||||
goog.require('goog.editor.Field');
|
||||
goog.require('goog.editor.plugins.BasicTextFormatter');
|
||||
goog.require('goog.editor.plugins.EnterHandler');
|
||||
goog.require('goog.editor.plugins.HeaderFormatter');
|
||||
goog.require('goog.editor.plugins.LinkBubble');
|
||||
goog.require('goog.editor.plugins.LinkDialogPlugin');
|
||||
goog.require('goog.editor.plugins.ListTabHandler');
|
||||
goog.require('goog.editor.plugins.LoremIpsum');
|
||||
goog.require('goog.editor.plugins.RemoveFormatting');
|
||||
goog.require('goog.editor.plugins.SpacesTabHandler');
|
||||
goog.require('goog.editor.plugins.UndoRedo');
|
||||
goog.require('goog.ui.editor.DefaultToolbar');
|
||||
goog.require('goog.ui.editor.ToolbarController');
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="../css/demo.css">
|
||||
|
||||
<link rel="stylesheet" href="../../css/button.css" />
|
||||
<link rel="stylesheet" href="../../css/dialog.css" />
|
||||
<link rel="stylesheet" href="../../css/linkbutton.css" />
|
||||
<link rel="stylesheet" href="../../css/menu.css">
|
||||
<link rel="stylesheet" href="../../css/menuitem.css">
|
||||
<link rel="stylesheet" href="../../css/menuseparator.css">
|
||||
<link rel="stylesheet" href="../../css/tab.css" />
|
||||
<link rel="stylesheet" href="../../css/tabbar.css" />
|
||||
<link rel="stylesheet" href="../../css/toolbar.css" />
|
||||
<link rel="stylesheet" href="../../css/colormenubutton.css" />
|
||||
<link rel="stylesheet" href="../../css/palette.css" />
|
||||
<link rel="stylesheet" href="../../css/colorpalette.css" />
|
||||
|
||||
<link rel="stylesheet" href="../../css/editor/bubble.css" />
|
||||
<link rel="stylesheet" href="../../css/editor/dialog.css" />
|
||||
<link rel="stylesheet" href="../../css/editor/linkdialog.css" />
|
||||
<link rel="stylesheet" href="../../css/editortoolbar.css" />
|
||||
|
||||
<style>
|
||||
#editMe {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
background-color: white;
|
||||
border: 1px solid grey;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>goog.editor Demo</h1>
|
||||
<p>This is a demonstration of a editable field, with installed plugins,
|
||||
hooked up to a toolbar.</p>
|
||||
<br>
|
||||
<div id='toolbar' style='width:602px'></div>
|
||||
<div id='editMe'></div>
|
||||
<hr>
|
||||
<p><b>Current field contents</b>
|
||||
(updates as contents of the editable field above change):<br>
|
||||
<textarea id="fieldContents" style="height:100px;width:400px;"></textarea><br>
|
||||
<input type="button" value="Set Field Contents"
|
||||
onclick="myField.setHtml(false, goog.dom.getElement('fieldContents').value);" />
|
||||
(Use to set contents of the editable field to the contents of this textarea)
|
||||
</p>
|
||||
|
||||
<script>
|
||||
function updateFieldContents() {
|
||||
goog.dom.getElement('fieldContents').value = myField.getCleanContents();
|
||||
}
|
||||
|
||||
// Create an editable field.
|
||||
var myField = new goog.editor.Field('editMe');
|
||||
|
||||
// Create and register all of the editing plugins you want to use.
|
||||
myField.registerPlugin(new goog.editor.plugins.BasicTextFormatter());
|
||||
myField.registerPlugin(new goog.editor.plugins.RemoveFormatting());
|
||||
myField.registerPlugin(new goog.editor.plugins.UndoRedo());
|
||||
myField.registerPlugin(new goog.editor.plugins.ListTabHandler());
|
||||
myField.registerPlugin(new goog.editor.plugins.SpacesTabHandler());
|
||||
myField.registerPlugin(new goog.editor.plugins.EnterHandler());
|
||||
myField.registerPlugin(new goog.editor.plugins.HeaderFormatter());
|
||||
myField.registerPlugin(
|
||||
new goog.editor.plugins.LoremIpsum('Click here to edit'));
|
||||
myField.registerPlugin(
|
||||
new goog.editor.plugins.LinkDialogPlugin());
|
||||
myField.registerPlugin(new goog.editor.plugins.LinkBubble());
|
||||
|
||||
// Specify the buttons to add to the toolbar, using built in default buttons.
|
||||
var buttons = [
|
||||
goog.editor.Command.BOLD,
|
||||
goog.editor.Command.ITALIC,
|
||||
goog.editor.Command.UNDERLINE,
|
||||
goog.editor.Command.FONT_COLOR,
|
||||
goog.editor.Command.BACKGROUND_COLOR,
|
||||
goog.editor.Command.FONT_FACE,
|
||||
goog.editor.Command.FONT_SIZE,
|
||||
goog.editor.Command.LINK,
|
||||
goog.editor.Command.UNDO,
|
||||
goog.editor.Command.REDO,
|
||||
goog.editor.Command.UNORDERED_LIST,
|
||||
goog.editor.Command.ORDERED_LIST,
|
||||
goog.editor.Command.INDENT,
|
||||
goog.editor.Command.OUTDENT,
|
||||
goog.editor.Command.JUSTIFY_LEFT,
|
||||
goog.editor.Command.JUSTIFY_CENTER,
|
||||
goog.editor.Command.JUSTIFY_RIGHT,
|
||||
goog.editor.Command.SUBSCRIPT,
|
||||
goog.editor.Command.SUPERSCRIPT,
|
||||
goog.editor.Command.STRIKE_THROUGH,
|
||||
goog.editor.Command.REMOVE_FORMAT
|
||||
];
|
||||
var myToolbar = goog.ui.editor.DefaultToolbar.makeToolbar(buttons,
|
||||
goog.dom.getElement('toolbar'));
|
||||
|
||||
// Hook the toolbar into the field.
|
||||
var myToolbarController =
|
||||
new goog.ui.editor.ToolbarController(myField, myToolbar);
|
||||
|
||||
// Watch for field changes, to display below.
|
||||
goog.events.listen(myField, goog.editor.Field.EventType.DELAYEDCHANGE,
|
||||
updateFieldContents);
|
||||
|
||||
myField.makeEditable();
|
||||
updateFieldContents();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!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>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>goog.editor.Field</title>
|
||||
<script src="../../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.editor.Field');
|
||||
</script>
|
||||
<link rel="stylesheet" href="../css/demo.css">
|
||||
<style>
|
||||
#editMe {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
background-color: white;
|
||||
border: 1px solid grey;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.editor.Field</h1>
|
||||
<p>This is a very basic demonstration of how to make a region editable.</p>
|
||||
<input type="button" value="Make Editable" onclick="makeFieldEditable();" />
|
||||
<input type="button" value="Make Uneditable"
|
||||
onclick="makeFieldUneditable();" />
|
||||
<br><br>
|
||||
<div id="editMe">I am a regular div. Click "Make Editable" above to transform me into an editable region.</div>
|
||||
<hr>
|
||||
<p><b>Current field contents</b>
|
||||
(updates as contents of the editable field above change):<br>
|
||||
<textarea id="fieldContents" style="height:100px;width:400px;"></textarea><br>
|
||||
<input type="button" value="Set Field Contents"
|
||||
onclick="myField.setHtml(false, goog.dom.getElement('fieldContents').value);" />
|
||||
(Use to set contents of the editable field to the contents of this textarea)
|
||||
</p>
|
||||
|
||||
<script>
|
||||
var myField = new goog.editor.Field('editMe');
|
||||
|
||||
function makeFieldEditable() {
|
||||
goog.events.listen(myField, goog.editor.Field.EventType.LOAD,
|
||||
handleFieldLoad);
|
||||
goog.events.listen(myField, goog.editor.Field.EventType.DELAYEDCHANGE,
|
||||
updateFieldContents);
|
||||
|
||||
myField.makeEditable();
|
||||
updateFieldContents();
|
||||
}
|
||||
|
||||
function makeFieldUneditable() {
|
||||
myField.makeUneditable();
|
||||
}
|
||||
|
||||
function handleFieldLoad() {
|
||||
// Not necessary, just demoing how to perform an action after the editable
|
||||
// field is loaded. This focuses the field and gives you a blinking cursor
|
||||
// at the start.
|
||||
myField.focusAndPlaceCursorAtStart();
|
||||
}
|
||||
|
||||
function updateFieldContents() {
|
||||
goog.dom.getElement('fieldContents').value = myField.getCleanContents();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,91 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copywrite 2009 Google Inc. All Rights Reserved.
|
||||
-->
|
||||
<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>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>goog.editor Hello World plugins Demo</title>
|
||||
<script src="../../base.js"></script>
|
||||
<script src="deps.js"></script>
|
||||
<script>
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.editor.Field');
|
||||
goog.require('goog.editor.Field.EventType');
|
||||
goog.require('goog.demos.editor.HelloWorld');
|
||||
goog.require('goog.demos.editor.HelloWorldDialogPlugin');
|
||||
</script>
|
||||
<link rel="stylesheet" href="../css/demo.css">
|
||||
<link rel="stylesheet" href="../../css/dialog.css" />
|
||||
<style>
|
||||
#editMe {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
background-color: white;
|
||||
border: 1px solid grey;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.editor Hello World plugins Demo</h1>
|
||||
<p>This is a demonstration of an editable field with the two sample plugins
|
||||
installed: goog.editor.plugins.HelloWorld and
|
||||
goog.editor.plugins.HelloWorldDialogPlugin.</p>
|
||||
<br>
|
||||
<button onclick='doHelloWorld()'>Hello World</button>
|
||||
<button onclick='doHelloWorldDialog()'>Hello World Dialog</button><br>
|
||||
<div id='editMe'><ul>
|
||||
<li>Click <b>Hello World</b> to insert "Hello World!".</li>
|
||||
<li>Click <b>Hello World Dialog</b> to open a dialog where you can customize
|
||||
your hello world message to be inserted.</li>
|
||||
</ul>The hello world message will be inserted at the cursor, or will replace
|
||||
the selected text.</div>
|
||||
<hr>
|
||||
<p><b>Current field contents</b>
|
||||
(updates as contents of the editable field above change):<br>
|
||||
<textarea id="fieldContents" style="height:100px;width:400px;"></textarea><br>
|
||||
<input type="button" value="Set Field Contents"
|
||||
onclick="myField.setHtml(false, goog.dom.getElement('fieldContents').value);" />
|
||||
(Use to set contents of the editable field to the contents of this textarea)
|
||||
</p>
|
||||
|
||||
<script>
|
||||
function doHelloWorld() {
|
||||
myField.execCommand(goog.demos.editor.HelloWorld.COMMAND.HELLO_WORLD);
|
||||
}
|
||||
|
||||
function doHelloWorldDialog() {
|
||||
myField.execCommand(
|
||||
goog.demos.editor.HelloWorldDialogPlugin.Command.HELLO_WORLD_DIALOG);
|
||||
}
|
||||
|
||||
function updateFieldContents() {
|
||||
goog.dom.getElement('fieldContents').value = myField.getCleanContents();
|
||||
}
|
||||
|
||||
// Create an editable field.
|
||||
var myField = new goog.editor.Field('editMe');
|
||||
|
||||
// Create and register all of the editing plugins you want to use.
|
||||
myField.registerPlugin(new goog.demos.editor.HelloWorld());
|
||||
myField.registerPlugin(new goog.demos.editor.HelloWorldDialogPlugin());
|
||||
|
||||
// Watch for field changes, to display below.
|
||||
goog.events.listen(myField, goog.editor.Field.EventType.DELAYEDCHANGE,
|
||||
updateFieldContents);
|
||||
|
||||
myField.makeEditable();
|
||||
updateFieldContents();
|
||||
|
||||
// Workaround for bug where on page load hello world doesn't work because
|
||||
// the field doesn't have focus yet.
|
||||
myField.focusAndPlaceCursorAtStart();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
// Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// 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.
|
||||
|
||||
/**
|
||||
* @fileoverview A simple plugin that inserts 'Hello World!' on command. This
|
||||
* plugin is intended to be an example of a very simple plugin for plugin
|
||||
* developers.
|
||||
*
|
||||
* @author gak@google.com (Gregory Kick)
|
||||
* @see helloworld.html
|
||||
*/
|
||||
|
||||
goog.provide('goog.demos.editor.HelloWorld');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.dom.TagName');
|
||||
goog.require('goog.editor.Plugin');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Plugin to insert 'Hello World!' into an editable field.
|
||||
* @constructor
|
||||
* @extends {goog.editor.Plugin}
|
||||
* @final
|
||||
*/
|
||||
goog.demos.editor.HelloWorld = function() {
|
||||
goog.editor.Plugin.call(this);
|
||||
};
|
||||
goog.inherits(goog.demos.editor.HelloWorld, goog.editor.Plugin);
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.demos.editor.HelloWorld.prototype.getTrogClassId = function() {
|
||||
return 'HelloWorld';
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Commands implemented by this plugin.
|
||||
* @enum {string}
|
||||
*/
|
||||
goog.demos.editor.HelloWorld.COMMAND = {
|
||||
HELLO_WORLD: '+helloWorld'
|
||||
};
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.demos.editor.HelloWorld.prototype.isSupportedCommand = function(
|
||||
command) {
|
||||
return command == goog.demos.editor.HelloWorld.COMMAND.HELLO_WORLD;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Executes a command. Does not fire any BEFORECHANGE, CHANGE, or
|
||||
* SELECTIONCHANGE events (these are handled by the super class implementation
|
||||
* of {@code execCommand}.
|
||||
* @param {string} command Command to execute.
|
||||
* @override
|
||||
* @protected
|
||||
*/
|
||||
goog.demos.editor.HelloWorld.prototype.execCommandInternal = function(
|
||||
command) {
|
||||
var domHelper = this.getFieldObject().getEditableDomHelper();
|
||||
var range = this.getFieldObject().getRange();
|
||||
range.removeContents();
|
||||
var newNode =
|
||||
domHelper.createDom(goog.dom.TagName.SPAN, null, 'Hello World!');
|
||||
range.insertNode(newNode, false);
|
||||
};
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<!--
|
||||
|
||||
@author gak@google.com (Gregory Kick)
|
||||
-->
|
||||
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2008 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>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Closure Unit Tests - goog.demos.editor.HelloWorld</title>
|
||||
<script type="text/javascript" src="../../base.js"></script>
|
||||
<script type="text/javascript" src="deps.js"></script>
|
||||
<script type="text/javascript">
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.demos.editor.HelloWorld');
|
||||
goog.require('goog.testing.editor.TestHelper');
|
||||
goog.require('goog.testing.editor.FieldMock');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="field"> </div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var FIELD = goog.dom.getElement('field');
|
||||
var plugin;
|
||||
var fieldMock;
|
||||
var testHelper = new goog.testing.editor.TestHelper(FIELD);
|
||||
|
||||
function setUp() {
|
||||
testHelper.setUpEditableElement();
|
||||
FIELD.focus();
|
||||
plugin = new goog.demos.editor.HelloWorld();
|
||||
fieldMock = new goog.testing.editor.FieldMock();
|
||||
plugin.registerFieldObject(fieldMock);
|
||||
}
|
||||
|
||||
function tearDown() {
|
||||
testHelper.tearDownEditableElement();
|
||||
}
|
||||
|
||||
function testIsSupportedCommand() {
|
||||
fieldMock.$replay();
|
||||
assertTrue('+helloWorld should be suported',
|
||||
plugin.isSupportedCommand('+helloWorld'));
|
||||
assertFalse('other commands should not be supported',
|
||||
plugin.isSupportedCommand('blah'));
|
||||
fieldMock.$verify();
|
||||
}
|
||||
|
||||
function testExecCommandInternal() {
|
||||
fieldMock.$replay();
|
||||
var result = plugin.execCommandInternal(
|
||||
goog.demos.editor.HelloWorld.COMMAND.HELLO_WORLD);
|
||||
assertUndefined(result);
|
||||
var spans = FIELD.getElementsByTagName('span');
|
||||
assertEquals(1, spans.length);
|
||||
var helloWorldSpan = spans.item(0);
|
||||
assertEquals('Hello World!', goog.dom.getTextContent(helloWorldSpan));
|
||||
fieldMock.$verify();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,173 @@
|
||||
// Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// 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.
|
||||
|
||||
/**
|
||||
* @fileoverview An example of how to write a dialog to be opened by a plugin.
|
||||
*
|
||||
*/
|
||||
|
||||
goog.provide('goog.demos.editor.HelloWorldDialog');
|
||||
goog.provide('goog.demos.editor.HelloWorldDialog.OkEvent');
|
||||
|
||||
goog.require('goog.dom.TagName');
|
||||
goog.require('goog.events.Event');
|
||||
goog.require('goog.string');
|
||||
goog.require('goog.ui.editor.AbstractDialog');
|
||||
|
||||
|
||||
// *** Public interface ***************************************************** //
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Creates a dialog to let the user enter a customized hello world message.
|
||||
* @param {goog.dom.DomHelper} domHelper DomHelper to be used to create the
|
||||
* dialog's dom structure.
|
||||
* @constructor
|
||||
* @extends {goog.ui.editor.AbstractDialog}
|
||||
* @final
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialog = function(domHelper) {
|
||||
goog.ui.editor.AbstractDialog.call(this, domHelper);
|
||||
};
|
||||
goog.inherits(goog.demos.editor.HelloWorldDialog,
|
||||
goog.ui.editor.AbstractDialog);
|
||||
|
||||
|
||||
// *** Event **************************************************************** //
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* OK event object for the hello world dialog.
|
||||
* @param {string} message Customized hello world message chosen by the user.
|
||||
* @constructor
|
||||
* @extends {goog.events.Event}
|
||||
* @final
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialog.OkEvent = function(message) {
|
||||
this.message = message;
|
||||
};
|
||||
goog.inherits(goog.demos.editor.HelloWorldDialog.OkEvent, goog.events.Event);
|
||||
|
||||
|
||||
/**
|
||||
* Event type.
|
||||
* @type {goog.ui.editor.AbstractDialog.EventType}
|
||||
* @override
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialog.OkEvent.prototype.type =
|
||||
goog.ui.editor.AbstractDialog.EventType.OK;
|
||||
|
||||
|
||||
/**
|
||||
* Customized hello world message chosen by the user.
|
||||
* @type {string}
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialog.OkEvent.prototype.message;
|
||||
|
||||
|
||||
// *** Protected interface ************************************************** //
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.demos.editor.HelloWorldDialog.prototype.createDialogControl = function() {
|
||||
var builder = new goog.ui.editor.AbstractDialog.Builder(this);
|
||||
/** @desc Title of the hello world dialog. */
|
||||
var MSG_HELLO_WORLD_DIALOG_TITLE = goog.getMsg('Add a Hello World message');
|
||||
builder.setTitle(MSG_HELLO_WORLD_DIALOG_TITLE).
|
||||
setContent(this.createContent_());
|
||||
return builder.build();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Creates and returns the event object to be used when dispatching the OK
|
||||
* event to listeners, or returns null to prevent the dialog from closing.
|
||||
* @param {goog.events.Event} e The event object dispatched by the wrapped
|
||||
* dialog.
|
||||
* @return {goog.demos.editor.HelloWorldDialog.OkEvent} The event object to be
|
||||
* used when dispatching the OK event to listeners.
|
||||
* @protected
|
||||
* @override
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialog.prototype.createOkEvent = function(e) {
|
||||
var message = this.getMessage_();
|
||||
if (message &&
|
||||
goog.demos.editor.HelloWorldDialog.isValidHelloWorld_(message)) {
|
||||
return new goog.demos.editor.HelloWorldDialog.OkEvent(message);
|
||||
} else {
|
||||
/** @desc Error message telling the user why their message was rejected. */
|
||||
var MSG_HELLO_WORLD_DIALOG_ERROR =
|
||||
goog.getMsg('Your message must contain the words "hello" and "world".');
|
||||
this.dom.getWindow().alert(MSG_HELLO_WORLD_DIALOG_ERROR);
|
||||
return null; // Prevents the dialog from closing.
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// *** Private implementation *********************************************** //
|
||||
|
||||
|
||||
/**
|
||||
* Input element where the user will type their hello world message.
|
||||
* @type {Element}
|
||||
* @private
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialog.prototype.input_;
|
||||
|
||||
|
||||
/**
|
||||
* Creates the DOM structure that makes up the dialog's content area.
|
||||
* @return {Element} The DOM structure that makes up the dialog's content area.
|
||||
* @private
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialog.prototype.createContent_ = function() {
|
||||
/** @desc Sample hello world message to prepopulate the dialog with. */
|
||||
var MSG_HELLO_WORLD_DIALOG_SAMPLE = goog.getMsg('Hello, world!');
|
||||
this.input_ = this.dom.createDom(goog.dom.TagName.INPUT,
|
||||
{size: 25, value: MSG_HELLO_WORLD_DIALOG_SAMPLE});
|
||||
/** @desc Prompt telling the user to enter a hello world message. */
|
||||
var MSG_HELLO_WORLD_DIALOG_PROMPT =
|
||||
goog.getMsg('Enter your Hello World message');
|
||||
return this.dom.createDom(goog.dom.TagName.DIV,
|
||||
null,
|
||||
[MSG_HELLO_WORLD_DIALOG_PROMPT, this.input_]);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Returns the hello world message currently typed into the dialog's input.
|
||||
* @return {?string} The hello world message currently typed into the dialog's
|
||||
* input, or null if called before the input is created.
|
||||
* @private
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialog.prototype.getMessage_ = function() {
|
||||
return this.input_ && this.input_.value;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Returns whether or not the given message contains the strings "hello" and
|
||||
* "world". Case-insensitive and order doesn't matter.
|
||||
* @param {string} message The message to be checked.
|
||||
* @return {boolean} Whether or not the given message contains the strings
|
||||
* "hello" and "world".
|
||||
* @private
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialog.isValidHelloWorld_ = function(message) {
|
||||
message = message.toLowerCase();
|
||||
return goog.string.contains(message, 'hello') &&
|
||||
goog.string.contains(message, 'world');
|
||||
};
|
||||
@@ -0,0 +1,100 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
|
||||
-->
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2008 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>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Closure Unit Tests - goog.demos.editor.HelloWorldDialog</title>
|
||||
<script src="../../base.js"></script>
|
||||
<script src="deps.js"></script>
|
||||
<script>
|
||||
goog.require('goog.demos.editor.HelloWorldDialog');
|
||||
goog.require('goog.demos.editor.HelloWorldDialog.OkEvent');
|
||||
goog.require('goog.dom.DomHelper');
|
||||
goog.require('goog.events.EventHandler');
|
||||
goog.require('goog.testing.LooseMock');
|
||||
goog.require('goog.testing.events');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.testing.mockmatchers.ArgumentMatcher');
|
||||
goog.require('goog.ui.editor.AbstractDialog.EventType');
|
||||
</script>
|
||||
<link rel="stylesheet" href="../css/dialog.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
||||
var dialog;
|
||||
var mockOkHandler;
|
||||
|
||||
var CUSTOM_MESSAGE = 'Hello, cruel world...';
|
||||
|
||||
function setUp() {
|
||||
mockOkHandler = new goog.testing.LooseMock(goog.events.EventHandler);
|
||||
}
|
||||
|
||||
function tearDown() {
|
||||
dialog.dispose();
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates and shows the dialog to be tested.
|
||||
*/
|
||||
function createAndShow() {
|
||||
dialog = new goog.demos.editor.HelloWorldDialog(new goog.dom.DomHelper());
|
||||
dialog.addEventListener(goog.ui.editor.AbstractDialog.EventType.OK,
|
||||
mockOkHandler);
|
||||
dialog.show();
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the mock event handler to expect an OK event with the given
|
||||
* message.
|
||||
* @param {string} message Hello world message the OK event is expected to
|
||||
* carry.
|
||||
*/
|
||||
function expectOk(message) {
|
||||
mockOkHandler.handleEvent(new goog.testing.mockmatchers.ArgumentMatcher(
|
||||
function(arg) {
|
||||
return arg.type == goog.ui.editor.AbstractDialog.EventType.OK &&
|
||||
arg.message == message;
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests that when you show the dialog, the input field has the correct
|
||||
* sample text in it.
|
||||
*/
|
||||
function testShow() {
|
||||
mockOkHandler.$replay();
|
||||
createAndShow();
|
||||
|
||||
assertEquals('Input field has incorrect sample text',
|
||||
'Hello, world!',
|
||||
dialog.input_.value);
|
||||
mockOkHandler.$verify();
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests that clicking OK dispatches an event carying the entered message.
|
||||
*/
|
||||
function testOk() {
|
||||
expectOk(CUSTOM_MESSAGE);
|
||||
mockOkHandler.$replay();
|
||||
createAndShow();
|
||||
|
||||
dialog.input_.value = CUSTOM_MESSAGE;
|
||||
goog.testing.events.fireClickSequence(dialog.getOkButtonElement());
|
||||
|
||||
mockOkHandler.$verify(); // Verifies OK is dispatched with correct message.
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,117 @@
|
||||
// Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// 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.
|
||||
|
||||
/**
|
||||
* @fileoverview An example of how to write a dialog plugin.
|
||||
*
|
||||
*/
|
||||
|
||||
goog.provide('goog.demos.editor.HelloWorldDialogPlugin');
|
||||
goog.provide('goog.demos.editor.HelloWorldDialogPlugin.Command');
|
||||
|
||||
goog.require('goog.demos.editor.HelloWorldDialog');
|
||||
goog.require('goog.dom.TagName');
|
||||
goog.require('goog.editor.plugins.AbstractDialogPlugin');
|
||||
goog.require('goog.editor.range');
|
||||
goog.require('goog.functions');
|
||||
goog.require('goog.ui.editor.AbstractDialog');
|
||||
|
||||
|
||||
// *** Public interface ***************************************************** //
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* A plugin that opens the hello world dialog.
|
||||
* @constructor
|
||||
* @extends {goog.editor.plugins.AbstractDialogPlugin}
|
||||
* @final
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialogPlugin = function() {
|
||||
goog.editor.plugins.AbstractDialogPlugin.call(this,
|
||||
goog.demos.editor.HelloWorldDialogPlugin.Command.HELLO_WORLD_DIALOG);
|
||||
};
|
||||
goog.inherits(goog.demos.editor.HelloWorldDialogPlugin,
|
||||
goog.editor.plugins.AbstractDialogPlugin);
|
||||
|
||||
|
||||
/**
|
||||
* Commands implemented by this plugin.
|
||||
* @enum {string}
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialogPlugin.Command = {
|
||||
HELLO_WORLD_DIALOG: 'helloWorldDialog'
|
||||
};
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.demos.editor.HelloWorldDialogPlugin.prototype.getTrogClassId =
|
||||
goog.functions.constant('HelloWorldDialog');
|
||||
|
||||
|
||||
// *** Protected interface ************************************************** //
|
||||
|
||||
|
||||
/**
|
||||
* Creates a new instance of the dialog and registers for the relevant events.
|
||||
* @param {goog.dom.DomHelper} dialogDomHelper The dom helper to be used to
|
||||
* create the dialog.
|
||||
* @return {goog.demos.editor.HelloWorldDialog} The dialog.
|
||||
* @override
|
||||
* @protected
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialogPlugin.prototype.createDialog = function(
|
||||
dialogDomHelper) {
|
||||
var dialog = new goog.demos.editor.HelloWorldDialog(dialogDomHelper);
|
||||
dialog.addEventListener(goog.ui.editor.AbstractDialog.EventType.OK,
|
||||
this.handleOk_,
|
||||
false,
|
||||
this);
|
||||
return dialog;
|
||||
};
|
||||
|
||||
|
||||
// *** Private implementation *********************************************** //
|
||||
|
||||
|
||||
/**
|
||||
* Handles the OK event from the dialog by inserting the hello world message
|
||||
* into the field.
|
||||
* @param {goog.demos.editor.HelloWorldDialog.OkEvent} e OK event object.
|
||||
* @private
|
||||
*/
|
||||
goog.demos.editor.HelloWorldDialogPlugin.prototype.handleOk_ = function(e) {
|
||||
// First restore the selection so we can manipulate the field's content
|
||||
// according to what was selected.
|
||||
this.restoreOriginalSelection();
|
||||
|
||||
// Notify listeners that the field's contents are about to change.
|
||||
this.getFieldObject().dispatchBeforeChange();
|
||||
|
||||
// Now we can clear out what was previously selected (if anything).
|
||||
var range = this.getFieldObject().getRange();
|
||||
range.removeContents();
|
||||
// And replace it with a span containing our hello world message.
|
||||
var createdNode = this.getFieldDomHelper().createDom(goog.dom.TagName.SPAN,
|
||||
null,
|
||||
e.message);
|
||||
createdNode = range.insertNode(createdNode, false);
|
||||
// Place the cursor at the end of the new text node (false == to the right).
|
||||
goog.editor.range.placeCursorNextTo(createdNode, false);
|
||||
|
||||
// Notify listeners that the field's selection has changed.
|
||||
this.getFieldObject().dispatchSelectionChangeEvent();
|
||||
// Notify listeners that the field's contents have changed.
|
||||
this.getFieldObject().dispatchChange();
|
||||
};
|
||||
@@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
|
||||
-->
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2008 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>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>Closure Unit Tests - goog.demos.editor.HelloWorldDialogPlugin</title>
|
||||
<script src="../../base.js"></script>
|
||||
<script src="deps.js"></script>
|
||||
<script>
|
||||
goog.require('goog.demos.editor.HelloWorldDialog');
|
||||
goog.require('goog.demos.editor.HelloWorldDialog.OkEvent');
|
||||
goog.require('goog.demos.editor.HelloWorldDialogPlugin');
|
||||
goog.require('goog.demos.editor.HelloWorldDialogPlugin.Command');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.dom.NodeType');
|
||||
goog.require('goog.testing.ExpectedFailures');
|
||||
goog.require('goog.testing.MockControl');
|
||||
goog.require('goog.testing.MockRange');
|
||||
goog.require('goog.testing.PropertyReplacer');
|
||||
goog.require('goog.testing.editor.FieldMock');
|
||||
goog.require('goog.testing.editor.TestHelper');
|
||||
goog.require('goog.testing.editor.dom');
|
||||
goog.require('goog.testing.events');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.testing.mockmatchers.ArgumentMatcher');
|
||||
goog.require('goog.userAgent');
|
||||
</script>
|
||||
<link rel="stylesheet" href="../css/dialog.css"/>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="myField"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var plugin;
|
||||
var mockCtrl;
|
||||
var mockField;
|
||||
var mockRange;
|
||||
var mockPlaceCursorNextTo;
|
||||
var stubs = new goog.testing.PropertyReplacer();
|
||||
|
||||
var fieldObj;
|
||||
|
||||
var CUSTOM_MESSAGE = 'Hello, cruel world...';
|
||||
|
||||
var expectedFailures = new goog.testing.ExpectedFailures();
|
||||
|
||||
|
||||
function setUp() {
|
||||
mockCtrl = new goog.testing.MockControl();
|
||||
|
||||
mockRange = new goog.testing.MockRange();
|
||||
mockCtrl.addMock(mockRange);
|
||||
|
||||
mockField =
|
||||
new goog.testing.editor.FieldMock(undefined, undefined, mockRange);
|
||||
mockCtrl.addMock(mockField);
|
||||
|
||||
mockPlaceCursorNextTo = mockCtrl.createFunctionMock('placeCursorNextTo');
|
||||
}
|
||||
|
||||
function tearDown() {
|
||||
plugin.dispose();
|
||||
tearDownRealEditableField();
|
||||
expectedFailures.handleTearDown();
|
||||
stubs.reset();
|
||||
goog.dom.getElement('myField').innerHTML = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests that the plugin's dialog is properly created.
|
||||
*/
|
||||
function testCreateDialog() {
|
||||
mockField.$replay();
|
||||
|
||||
plugin = new goog.demos.editor.HelloWorldDialogPlugin();
|
||||
plugin.registerFieldObject(mockField);
|
||||
|
||||
var dialog = plugin.createDialog(goog.dom.getDomHelper());
|
||||
assertTrue('Dialog should be of type goog.demos.editor.HelloWorldDialog',
|
||||
dialog instanceof goog.demos.editor.HelloWorldDialog);
|
||||
|
||||
mockField.$verify();
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests that when the OK event fires the editable field is properly updated.
|
||||
*/
|
||||
function testOk() {
|
||||
mockField.focus();
|
||||
mockField.dispatchBeforeChange();
|
||||
mockRange.removeContents();
|
||||
// Tests that an argument is a span with the custom message.
|
||||
var createdNodeMatcher = new goog.testing.mockmatchers.ArgumentMatcher(
|
||||
function(arg) {
|
||||
return arg.nodeType == goog.dom.NodeType.ELEMENT &&
|
||||
arg.tagName == goog.dom.TagName.SPAN &&
|
||||
goog.dom.getRawTextContent(arg) == CUSTOM_MESSAGE;
|
||||
});
|
||||
mockRange.insertNode(createdNodeMatcher, false);
|
||||
mockRange.$does(function(node, before) {
|
||||
return node;
|
||||
});
|
||||
mockPlaceCursorNextTo(createdNodeMatcher, false);
|
||||
stubs.set(goog.editor.range, 'placeCursorNextTo', mockPlaceCursorNextTo);
|
||||
mockField.dispatchSelectionChangeEvent();
|
||||
mockField.dispatchChange();
|
||||
mockCtrl.$replayAll();
|
||||
|
||||
plugin = new goog.demos.editor.HelloWorldDialogPlugin();
|
||||
plugin.registerFieldObject(mockField);
|
||||
var dialog = plugin.createDialog(goog.dom.getDomHelper());
|
||||
|
||||
// Mock of execCommand + clicking OK without actually opening the dialog.
|
||||
dialog.dispatchEvent(
|
||||
new goog.demos.editor.HelloWorldDialog.OkEvent(CUSTOM_MESSAGE));
|
||||
|
||||
mockCtrl.$verifyAll();
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup a real editable field (instead of a mock) and register the plugin to
|
||||
* it.
|
||||
*/
|
||||
function setUpRealEditableField() {
|
||||
fieldObj = new goog.editor.Field('myField', document);
|
||||
fieldObj.makeEditable();
|
||||
// Register the plugin to that field.
|
||||
plugin = new goog.demos.editor.HelloWorldDialogPlugin();
|
||||
fieldObj.registerPlugin(plugin);
|
||||
}
|
||||
|
||||
/**
|
||||
* Tear down the real editable field.
|
||||
*/
|
||||
function tearDownRealEditableField() {
|
||||
if (fieldObj) {
|
||||
fieldObj.makeUneditable();
|
||||
fieldObj.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Tests that the selection is cleared when the dialog opens and is
|
||||
* correctly restored after ok is clicked.
|
||||
*/
|
||||
function testRestoreSelectionOnOk() {
|
||||
setUpRealEditableField();
|
||||
|
||||
fieldObj.setHtml(false, '12345');
|
||||
var elem = fieldObj.getElement();
|
||||
var helper = new goog.testing.editor.TestHelper(elem);
|
||||
helper.select('12345', 1, '12345', 4); // Selects '234'.
|
||||
|
||||
assertEquals('Incorrect text selected before dialog is opened',
|
||||
'234',
|
||||
fieldObj.getRange().getText());
|
||||
plugin.execCommand(
|
||||
goog.demos.editor.HelloWorldDialogPlugin.Command.HELLO_WORLD_DIALOG);
|
||||
|
||||
// TODO(user): IE returns some bogus range when field doesn't have
|
||||
// selection. Remove the expectedFailure when robbyw fixes the issue.
|
||||
// NOTE(user): You can't remove the selection from a field in Opera without
|
||||
// blurring it.
|
||||
elem.parentNode.blur();
|
||||
expectedFailures.expectFailureFor(goog.userAgent.IE ||
|
||||
goog.userAgent.OPERA);
|
||||
try {
|
||||
assertNull('There should be no selection while dialog is open',
|
||||
fieldObj.getRange());
|
||||
} catch (e) {
|
||||
expectedFailures.handleException(e);
|
||||
}
|
||||
|
||||
goog.testing.events.fireClickSequence(
|
||||
plugin.dialog_.getOkButtonElement());
|
||||
assertEquals('No text should be selected after clicking ok',
|
||||
'',
|
||||
fieldObj.getRange().getText());
|
||||
|
||||
// Test that the caret is placed after the custom message.
|
||||
goog.testing.editor.dom.assertRangeBetweenText(
|
||||
'Hello, world!', '5', fieldObj.getRange());
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!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>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>goog.editor.SeamlessField</title>
|
||||
<script src="../../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.editor.SeamlessField');
|
||||
</script>
|
||||
<link rel="stylesheet" href="../css/demo.css">
|
||||
<style>
|
||||
#editMe {
|
||||
border: 1px solid grey;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
background-color: #87CEFA;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: courier;
|
||||
color: red;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
background-color: lightgrey;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: lower-greek;
|
||||
}
|
||||
|
||||
table p {
|
||||
margin: 3px;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.editor.SeamlessField</h1>
|
||||
<p>This is a very basic demonstration of how to make a region editable, that
|
||||
blends in with the surrounding page, even if the editable content is inside
|
||||
an iframe.</p>
|
||||
<input type="button" value="Make Editable" onclick="makeFieldEditable();" />
|
||||
<input type="button" value="Make Uneditable"
|
||||
onclick="makeFieldUneditable();" />
|
||||
<br>
|
||||
<div id="wrapper">
|
||||
<br><br>
|
||||
<div id="editMe">I am a regular div.
|
||||
Click <b>"Make Editable"</b> above to transform me into an editable region.
|
||||
I'll grow and shrink with my content!
|
||||
And I'll inherit styles from the parent document.
|
||||
|
||||
<h1>Heading styled by outer document.</h1>
|
||||
<ol>
|
||||
<li>And lists too! One!</li>
|
||||
<li>Two!</li>
|
||||
</ol>
|
||||
<p>Paragraph 1</p>
|
||||
<table><tr><td>
|
||||
<p>Inherited CSS works!</p>
|
||||
</td></tr></table>
|
||||
</div>
|
||||
<br><br>
|
||||
</div>
|
||||
<hr>
|
||||
<p><b>Current field contents</b>
|
||||
(updates as contents of the editable field above change):<br>
|
||||
<textarea id="fieldContents" style="height:100px;width:400px;"></textarea><br>
|
||||
<input type="button" value="Set Field Contents"
|
||||
onclick="myField.setHtml(false, goog.dom.getElement('fieldContents').value);" />
|
||||
(Use to set contents of the editable field to the contents of this textarea)
|
||||
</p>
|
||||
|
||||
<script>
|
||||
var myField = new goog.editor.SeamlessField('editMe');
|
||||
|
||||
function makeFieldEditable() {
|
||||
goog.events.listen(myField, goog.editor.Field.EventType.DELAYEDCHANGE,
|
||||
updateFieldContents);
|
||||
|
||||
myField.makeEditable();
|
||||
updateFieldContents();
|
||||
}
|
||||
|
||||
function makeFieldUneditable() {
|
||||
myField.makeUneditable();
|
||||
}
|
||||
|
||||
function updateFieldContents() {
|
||||
goog.dom.getElement('fieldContents').value = myField.getCleanContents();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,94 @@
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2009 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.
|
||||
-->
|
||||
<!--
|
||||
Author: nicksantos@google.com (Nick Santos)
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>goog.editor.plugins.TableEditor Demo</title>
|
||||
<script src="../../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.editor.Command');
|
||||
goog.require('goog.editor.Field');
|
||||
goog.require('goog.editor.plugins.TableEditor');
|
||||
goog.require('goog.ui.editor.DefaultToolbar');
|
||||
goog.require('goog.ui.editor.ToolbarController');
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="../css/demo.css">
|
||||
|
||||
<link rel="stylesheet" href="../../css/button.css" />
|
||||
<link rel="stylesheet" href="../../css/dialog.css" />
|
||||
<link rel="stylesheet" href="../../css/linkbutton.css" />
|
||||
<link rel="stylesheet" href="../../css/menu.css">
|
||||
<link rel="stylesheet" href="../../css/menuitem.css">
|
||||
<link rel="stylesheet" href="../../css/menuseparator.css">
|
||||
<link rel="stylesheet" href="../../css/tab.css" />
|
||||
<link rel="stylesheet" href="../../css/tabbar.css" />
|
||||
<link rel="stylesheet" href="../../css/toolbar.css" />
|
||||
<link rel="stylesheet" href="../../css/editortoolbar.css" />
|
||||
|
||||
<style>
|
||||
#editMe {
|
||||
width: 600px;
|
||||
height: 300px;
|
||||
background-color: white;
|
||||
border: 1px solid grey;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>goog.editor.plugins.TableEditor Demo</h1>
|
||||
<p>This is a demonstration of the table editor plugin for goog.editor.</p>
|
||||
<br>
|
||||
<div id='toolbar' style='width:602px'></div>
|
||||
<div id='editMe'></div>
|
||||
<hr>
|
||||
<p><b>Current field contents</b>
|
||||
(updates as contents of the editable field above change):<br>
|
||||
<textarea id="fieldContents" style="height:100px;width:400px;"></textarea><br>
|
||||
<input type="button" value="Set Field Contents"
|
||||
onclick="myField.setHtml(false, goog.dom.getElement('fieldContents').value);" />
|
||||
(Use to set contents of the editable field to the contents of this textarea)
|
||||
</p>
|
||||
|
||||
<script>
|
||||
function updateFieldContents() {
|
||||
goog.dom.getElement('fieldContents').value = myField.getCleanContents();
|
||||
}
|
||||
|
||||
var myField = new goog.editor.Field('editMe');
|
||||
|
||||
myField.registerPlugin(new goog.editor.plugins.TableEditor());
|
||||
|
||||
// Specify the buttons to add to the toolbar, using built in default buttons.
|
||||
var buttonIds = goog.object.getValues(
|
||||
goog.editor.plugins.TableEditor.COMMAND);
|
||||
var buttons = []
|
||||
for (var i = 0; i < buttonIds.length; i++) {
|
||||
var cmd = buttonIds[i];
|
||||
buttons[i] = goog.ui.editor.ToolbarFactory.makeButton(cmd, cmd, cmd);
|
||||
}
|
||||
var myToolbar = goog.ui.editor.DefaultToolbar.makeToolbar(buttons,
|
||||
goog.dom.getElement('toolbar'));
|
||||
|
||||
// Hook the toolbar into the field.
|
||||
var myToolbarController =
|
||||
new goog.ui.editor.ToolbarController(myField, myToolbar);
|
||||
|
||||
// Watch for field changes, to display below.
|
||||
goog.events.listen(myField, goog.editor.Field.EventType.DELAYEDCHANGE,
|
||||
updateFieldContents);
|
||||
|
||||
myField.makeEditable();
|
||||
updateFieldContents();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,162 @@
|
||||
<!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.fx.dom</title>
|
||||
<script src="../base.js"></script>
|
||||
<script>
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.fx');
|
||||
goog.require('goog.fx.dom');
|
||||
</script>
|
||||
<link rel="stylesheet" href="css/demo.css">
|
||||
<style>
|
||||
#test1 {
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
top: 100px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: rgb(0,0,0);
|
||||
}
|
||||
|
||||
button {
|
||||
font: normal 10px arial;
|
||||
width: 125px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>goog.fx.dom</h1>
|
||||
<p><strong>Demonstrations of the goog.fx.dom library</strong></p>
|
||||
|
||||
<p>
|
||||
<button id="but0" onclick="slide(0, 0);">Slide To 0x0</button><br>
|
||||
<button id="but1" onclick="slide(400, 40);">Slide To 400x40</button><br>
|
||||
<button id="but2" onclick="slide(300, 200);">Slide To 300x200</button><br>
|
||||
<button id="but3" onclick="slide(600, 100);">Slide To 600x100</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button id="but4" onclick="resize(50, 50);">Resize To 50x50</button><br>
|
||||
<button id="but5" onclick="resize(250, 50);">Resize To 250x50</button><br>
|
||||
<button id="but6" onclick="resize(5, 5);">Resize To 5x5</button><br>
|
||||
<button id="but7" onclick="resize(250, 250);">Resize To 250x250</button><br>
|
||||
<button id="but8" onclick="resize(1250, 1250);">Resize To 1250x1250</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button id="but9" onclick="fadeout();">Fade Out</button><br>
|
||||
<button id="but10" onclick="fadein();">Fade In</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button id="but11" onclick="color(200, 0, 0);">Transform to red</button><br>
|
||||
<button id="but12" onclick="color(180, 180, 180);">Transform to grey</button><br>
|
||||
<button id="but13" onclick="color(0, 0, 0);">Transform to black</button><br>
|
||||
<button id="but14" onclick="color(100, 100, 255);">Transform to blue</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button id="but15" onclick="toggleRequestAnimationFrame();"></button>
|
||||
<p>
|
||||
|
||||
|
||||
<div id="test1"><!-- This comment is an IE6 hack to fix height:20px --></div>
|
||||
|
||||
<script>
|
||||
var col = [0, 0, 0];
|
||||
var duration = 1000;
|
||||
|
||||
var el = document.getElementById('test1');
|
||||
|
||||
/**
|
||||
* Enables all buttons then disposes of the animation.
|
||||
* @param {!goog.events.Event} e goog.fx.Transition.EventType.END event with
|
||||
* the goog.fx.Animation object in its target.
|
||||
*/
|
||||
function enableButtons(e) {
|
||||
for (var i = 0; i <= 15; i++) {
|
||||
document.getElementById('but' + i).disabled = false;
|
||||
}
|
||||
e.target.dispose();
|
||||
}
|
||||
|
||||
function disableButtons() {
|
||||
for (var i = 0; i <= 15; i++) {
|
||||
document.getElementById('but' + i).disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
function slide(a, b) {
|
||||
var x = el.offsetLeft;
|
||||
var y = el.offsetTop;
|
||||
var anim = new goog.fx.dom.Slide(el, [x, y], [a, b], duration,
|
||||
goog.fx.easing.easeOut);
|
||||
goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN,
|
||||
disableButtons);
|
||||
goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons);
|
||||
anim.play();
|
||||
}
|
||||
|
||||
function resize(a, b) {
|
||||
var w = el.offsetWidth;
|
||||
var h = el.offsetHeight;
|
||||
var anim = new goog.fx.dom.Resize(el, [w, h], [a, b], duration,
|
||||
goog.fx.easing.easeOut);
|
||||
goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN,
|
||||
disableButtons);
|
||||
goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons);
|
||||
anim.play();
|
||||
}
|
||||
|
||||
function fadeout() {
|
||||
var anim = new goog.fx.dom.FadeOutAndHide(el, duration);
|
||||
goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN,
|
||||
disableButtons);
|
||||
goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons);
|
||||
anim.play();
|
||||
}
|
||||
|
||||
function fadein() {
|
||||
var anim = new goog.fx.dom.FadeInAndShow(el, duration);
|
||||
goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN,
|
||||
disableButtons);
|
||||
goog.events.listen(anim, goog.fx.Transition.EventType.END, enableButtons);
|
||||
anim.play();
|
||||
}
|
||||
|
||||
function color(r, g, b) {
|
||||
var anim = new goog.fx.dom.BgColorTransform(el, col, [r, g, b], duration);
|
||||
goog.events.listen(anim, goog.fx.Transition.EventType.BEGIN,
|
||||
disableButtons);
|
||||
goog.events.listen(anim, goog.fx.Transition.EventType.END, function(e) {
|
||||
col = [e.x, e.y, e.z];
|
||||
enableButtons();
|
||||
});
|
||||
anim.play();
|
||||
}
|
||||
|
||||
function toggleRequestAnimationFrame() {
|
||||
rafEnabled = !rafEnabled;
|
||||
goog.fx.Animation.setAnimationWindow(rafEnabled ? window : null);
|
||||
updateRafButton();
|
||||
}
|
||||
|
||||
function updateRafButton() {
|
||||
goog.dom.setTextContent(goog.dom.getElement('but15'),
|
||||
rafEnabled ?
|
||||
'Disable timing control API' : 'Enable timing control API');
|
||||
}
|
||||
|
||||
goog.fx.Animation.setAnimationWindow(window);
|
||||
var rafEnabled = goog.fx.Animation.animationWindow_;
|
||||
updateRafButton();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 941 B |
Binary file not shown.
|
After Width: | Height: | Size: 980 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 996 B |
Binary file not shown.
|
After Width: | Height: | Size: 1016 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 990 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 986 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 996 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 996 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 992 B |
Binary file not shown.
|
After Width: | Height: | Size: 977 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1022 B |
Binary file not shown.
|
After Width: | Height: | Size: 987 B |
Binary file not shown.
|
After Width: | Height: | Size: 997 B |
Binary file not shown.
|
After Width: | Height: | Size: 1012 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1014 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 884 B |
Binary file not shown.
|
After Width: | Height: | Size: 974 B |
Binary file not shown.
|
After Width: | Height: | Size: 920 B |
Binary file not shown.
|
After Width: | Height: | Size: 949 B |
Binary file not shown.
|
After Width: | Height: | Size: 949 B |
Binary file not shown.
|
After Width: | Height: | Size: 1000 B |
Binary file not shown.
|
After Width: | Height: | Size: 963 B |
Binary file not shown.
|
After Width: | Height: | Size: 865 B |
Binary file not shown.
|
After Width: | Height: | Size: 1018 B |
Binary file not shown.
|
After Width: | Height: | Size: 1004 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user