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