| <!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> |
