diff options
Diffstat (limited to 'contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/css3button.html.svn-base')
| -rw-r--r-- | contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/css3button.html.svn-base | 166 |
1 files changed, 166 insertions, 0 deletions
diff --git a/contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/css3button.html.svn-base b/contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/css3button.html.svn-base new file mode 100644 index 0000000..e58bc60 --- /dev/null +++ b/contexts/data/lib/closure-library/closure/goog/demos/.svn/text-base/css3button.html.svn-base @@ -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.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> |