aboutsummaryrefslogtreecommitdiff
path: root/contexts/data/lib/closure-library/closure/goog/demos/css3button.html
diff options
context:
space:
mode:
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/css3button.html')
-rw-r--r--contexts/data/lib/closure-library/closure/goog/demos/css3button.html166
1 files changed, 0 insertions, 166 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/css3button.html b/contexts/data/lib/closure-library/closure/goog/demos/css3button.html
deleted file mode 100644
index e58bc60..0000000
--- a/contexts/data/lib/closure-library/closure/goog/demos/css3button.html
+++ /dev/null
@@ -1,166 +0,0 @@
-<!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.events');
- goog.require('goog.object');
- goog.require('goog.debug.DivConsole');
- goog.require('goog.debug.Logger');
- goog.require('goog.debug.LogManager');
- goog.require('goog.ui.CustomButton');
- goog.require('goog.ui.Css3ButtonRenderer');
- 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.debug.Logger.Level.ALL);
- var logger = goog.debug.Logger.getLogger('demo');
- var logconsole = new goog.debug.DivConsole(goog.dom.getElement('log'));
- logconsole.setCapturing(true);
-
- var EVENTS = goog.object.getValues(goog.ui.Component.EventType);
- logger.fine('Listening for: ' + EVENTS.join(', ') + '.');
-
- function logEvent(e) {
- logger.info('"' + 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>
generated by cgit v1.2.3 (git 2.39.1) at 2024-05-30 22:12:04 +0000