pixeldensitymonitor.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!doctype html>
  2. <html>
  3. <!--
  4. Copyright 2013 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <head>
  9. <title>goog.labs.style.PixelDensityMonitor</title>
  10. <script src="../base.js"></script>
  11. <script>
  12. goog.require('goog.debug.DivConsole');
  13. goog.require('goog.events');
  14. goog.require('goog.labs.style.PixelDensityMonitor');
  15. goog.require('goog.labs.style.PixelDensityMonitor.Density');
  16. goog.require('goog.log');
  17. </script>
  18. <link rel="stylesheet" href="css/demo.css">
  19. </head>
  20. <body>
  21. <h1>goog.labs.style.PixelDensityMonitor</h1>
  22. <div>
  23. Move between high dpi and normal screens to see density change events.
  24. </div>
  25. <fieldset class="goog-debug-panel">
  26. <legend>Event log</legend>
  27. <div class="log" id="log"></div>
  28. </fieldset>
  29. <script>
  30. var logger = goog.log.getLogger('PixelDensityMonitor');
  31. new goog.debug.DivConsole(goog.dom.getElement('log')).setCapturing(true);
  32. var monitor = new goog.labs.style.PixelDensityMonitor();
  33. monitor.start();
  34. var densityMap = goog.object.create(
  35. goog.labs.style.PixelDensityMonitor.Density.NORMAL, 'NORMAL',
  36. goog.labs.style.PixelDensityMonitor.Density.HIGH, 'HIGH');
  37. goog.events.listen(monitor,
  38. goog.labs.style.PixelDensityMonitor.EventType.CHANGE,
  39. function() {
  40. goog.log.info(logger, 'Density change: ' + densityMap[monitor.getDensity()]);
  41. });
  42. goog.log.info(logger, 'Starting density: ' + densityMap[monitor.getDensity()]);
  43. </script>
  44. </body>
  45. </html>