pixeldensitymonitor.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181
  1. // Copyright 2013 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview Utility class that monitors pixel density ratio changes.
  16. *
  17. * @see ../demos/pixeldensitymonitor.html
  18. */
  19. goog.provide('goog.labs.style.PixelDensityMonitor');
  20. goog.provide('goog.labs.style.PixelDensityMonitor.Density');
  21. goog.provide('goog.labs.style.PixelDensityMonitor.EventType');
  22. goog.require('goog.events');
  23. goog.require('goog.events.EventTarget');
  24. /**
  25. * Monitors the window for changes to the ratio between device and screen
  26. * pixels, e.g. when the user moves the window from a high density screen to a
  27. * screen with normal density. Dispatches
  28. * goog.labs.style.PixelDensityMonitor.EventType.CHANGE events when the density
  29. * changes between the two predefined values NORMAL and HIGH.
  30. *
  31. * This class uses the window.devicePixelRatio value which is supported in
  32. * WebKit and FF18. If the value does not exist, it will always return a
  33. * NORMAL density. It requires support for MediaQueryList to detect changes to
  34. * the devicePixelRatio.
  35. *
  36. * @param {!goog.dom.DomHelper=} opt_domHelper The DomHelper which contains the
  37. * document associated with the window to listen to. Defaults to the one in
  38. * which this code is executing.
  39. * @constructor
  40. * @extends {goog.events.EventTarget}
  41. * @final
  42. */
  43. goog.labs.style.PixelDensityMonitor = function(opt_domHelper) {
  44. goog.labs.style.PixelDensityMonitor.base(this, 'constructor');
  45. /**
  46. * @type {Window}
  47. * @private
  48. */
  49. this.window_ = opt_domHelper ? opt_domHelper.getWindow() : window;
  50. /**
  51. * The last density that was reported so that changes can be detected.
  52. * @type {goog.labs.style.PixelDensityMonitor.Density}
  53. * @private
  54. */
  55. this.lastDensity_ = this.getDensity();
  56. /**
  57. * @type {function (MediaQueryList)}
  58. * @private
  59. */
  60. this.listener_ = goog.bind(this.handleMediaQueryChange_, this);
  61. /**
  62. * The media query list for a query that detects high density, if supported
  63. * by the browser. Because matchMedia returns a new object for every call, it
  64. * needs to be saved here so the listener can be removed when disposing.
  65. * @type {?MediaQueryList}
  66. * @private
  67. */
  68. this.mediaQueryList_ = this.window_.matchMedia ?
  69. this.window_.matchMedia(
  70. goog.labs.style.PixelDensityMonitor.HIGH_DENSITY_QUERY_) :
  71. null;
  72. };
  73. goog.inherits(goog.labs.style.PixelDensityMonitor, goog.events.EventTarget);
  74. /**
  75. * The two different pixel density modes on which the various ratios between
  76. * physical and device pixels are mapped.
  77. * @enum {number}
  78. */
  79. goog.labs.style.PixelDensityMonitor.Density = {
  80. /**
  81. * Mode for older portable devices and desktop screens, defined as having a
  82. * device pixel ratio of less than 1.5.
  83. */
  84. NORMAL: 1,
  85. /**
  86. * Mode for newer portable devices with a high resolution screen, defined as
  87. * having a device pixel ratio of more than 1.5.
  88. */
  89. HIGH: 2
  90. };
  91. /**
  92. * The events fired by the PixelDensityMonitor.
  93. * @enum {string}
  94. */
  95. goog.labs.style.PixelDensityMonitor.EventType = {
  96. /**
  97. * Dispatched when density changes between NORMAL and HIGH.
  98. */
  99. CHANGE: goog.events.getUniqueId('change')
  100. };
  101. /**
  102. * Minimum ratio between device and screen pixel needed for high density mode.
  103. * @type {number}
  104. * @private
  105. */
  106. goog.labs.style.PixelDensityMonitor.HIGH_DENSITY_RATIO_ = 1.5;
  107. /**
  108. * Media query that matches for high density.
  109. * @type {string}
  110. * @private
  111. */
  112. goog.labs.style.PixelDensityMonitor.HIGH_DENSITY_QUERY_ =
  113. '(min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5)';
  114. /**
  115. * Starts monitoring for changes in pixel density.
  116. */
  117. goog.labs.style.PixelDensityMonitor.prototype.start = function() {
  118. if (this.mediaQueryList_) {
  119. this.mediaQueryList_.addListener(this.listener_);
  120. }
  121. };
  122. /**
  123. * @return {goog.labs.style.PixelDensityMonitor.Density} The density for the
  124. * window.
  125. */
  126. goog.labs.style.PixelDensityMonitor.prototype.getDensity = function() {
  127. if (this.window_.devicePixelRatio >=
  128. goog.labs.style.PixelDensityMonitor.HIGH_DENSITY_RATIO_) {
  129. return goog.labs.style.PixelDensityMonitor.Density.HIGH;
  130. } else {
  131. return goog.labs.style.PixelDensityMonitor.Density.NORMAL;
  132. }
  133. };
  134. /**
  135. * Handles a change to the media query and checks whether the density has
  136. * changed since the last call.
  137. * @param {MediaQueryList} mql The list of changed media queries.
  138. * @private
  139. */
  140. goog.labs.style.PixelDensityMonitor.prototype.handleMediaQueryChange_ =
  141. function(mql) {
  142. var newDensity = this.getDensity();
  143. if (this.lastDensity_ != newDensity) {
  144. this.lastDensity_ = newDensity;
  145. this.dispatchEvent(goog.labs.style.PixelDensityMonitor.EventType.CHANGE);
  146. }
  147. };
  148. /** @override */
  149. goog.labs.style.PixelDensityMonitor.prototype.disposeInternal = function() {
  150. if (this.mediaQueryList_) {
  151. this.mediaQueryList_.removeListener(this.listener_);
  152. }
  153. goog.labs.style.PixelDensityMonitor.base(this, 'disposeInternal');
  154. };