123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181 |
- // Copyright 2013 The Closure Library Authors. All Rights Reserved.
- //
- // Licensed under the Apache License, Version 2.0 (the "License");
- // you may not use this file except in compliance with the License.
- // You may obtain a copy of the License at
- //
- // http://www.apache.org/licenses/LICENSE-2.0
- //
- // Unless required by applicable law or agreed to in writing, software
- // distributed under the License is distributed on an "AS-IS" BASIS,
- // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- // See the License for the specific language governing permissions and
- // limitations under the License.
- /**
- * @fileoverview Utility class that monitors pixel density ratio changes.
- *
- * @see ../demos/pixeldensitymonitor.html
- */
- goog.provide('goog.labs.style.PixelDensityMonitor');
- goog.provide('goog.labs.style.PixelDensityMonitor.Density');
- goog.provide('goog.labs.style.PixelDensityMonitor.EventType');
- goog.require('goog.events');
- goog.require('goog.events.EventTarget');
- /**
- * Monitors the window for changes to the ratio between device and screen
- * pixels, e.g. when the user moves the window from a high density screen to a
- * screen with normal density. Dispatches
- * goog.labs.style.PixelDensityMonitor.EventType.CHANGE events when the density
- * changes between the two predefined values NORMAL and HIGH.
- *
- * This class uses the window.devicePixelRatio value which is supported in
- * WebKit and FF18. If the value does not exist, it will always return a
- * NORMAL density. It requires support for MediaQueryList to detect changes to
- * the devicePixelRatio.
- *
- * @param {!goog.dom.DomHelper=} opt_domHelper The DomHelper which contains the
- * document associated with the window to listen to. Defaults to the one in
- * which this code is executing.
- * @constructor
- * @extends {goog.events.EventTarget}
- * @final
- */
- goog.labs.style.PixelDensityMonitor = function(opt_domHelper) {
- goog.labs.style.PixelDensityMonitor.base(this, 'constructor');
- /**
- * @type {Window}
- * @private
- */
- this.window_ = opt_domHelper ? opt_domHelper.getWindow() : window;
- /**
- * The last density that was reported so that changes can be detected.
- * @type {goog.labs.style.PixelDensityMonitor.Density}
- * @private
- */
- this.lastDensity_ = this.getDensity();
- /**
- * @type {function (MediaQueryList)}
- * @private
- */
- this.listener_ = goog.bind(this.handleMediaQueryChange_, this);
- /**
- * The media query list for a query that detects high density, if supported
- * by the browser. Because matchMedia returns a new object for every call, it
- * needs to be saved here so the listener can be removed when disposing.
- * @type {?MediaQueryList}
- * @private
- */
- this.mediaQueryList_ = this.window_.matchMedia ?
- this.window_.matchMedia(
- goog.labs.style.PixelDensityMonitor.HIGH_DENSITY_QUERY_) :
- null;
- };
- goog.inherits(goog.labs.style.PixelDensityMonitor, goog.events.EventTarget);
- /**
- * The two different pixel density modes on which the various ratios between
- * physical and device pixels are mapped.
- * @enum {number}
- */
- goog.labs.style.PixelDensityMonitor.Density = {
- /**
- * Mode for older portable devices and desktop screens, defined as having a
- * device pixel ratio of less than 1.5.
- */
- NORMAL: 1,
- /**
- * Mode for newer portable devices with a high resolution screen, defined as
- * having a device pixel ratio of more than 1.5.
- */
- HIGH: 2
- };
- /**
- * The events fired by the PixelDensityMonitor.
- * @enum {string}
- */
- goog.labs.style.PixelDensityMonitor.EventType = {
- /**
- * Dispatched when density changes between NORMAL and HIGH.
- */
- CHANGE: goog.events.getUniqueId('change')
- };
- /**
- * Minimum ratio between device and screen pixel needed for high density mode.
- * @type {number}
- * @private
- */
- goog.labs.style.PixelDensityMonitor.HIGH_DENSITY_RATIO_ = 1.5;
- /**
- * Media query that matches for high density.
- * @type {string}
- * @private
- */
- goog.labs.style.PixelDensityMonitor.HIGH_DENSITY_QUERY_ =
- '(min-resolution: 1.5dppx), (-webkit-min-device-pixel-ratio: 1.5)';
- /**
- * Starts monitoring for changes in pixel density.
- */
- goog.labs.style.PixelDensityMonitor.prototype.start = function() {
- if (this.mediaQueryList_) {
- this.mediaQueryList_.addListener(this.listener_);
- }
- };
- /**
- * @return {goog.labs.style.PixelDensityMonitor.Density} The density for the
- * window.
- */
- goog.labs.style.PixelDensityMonitor.prototype.getDensity = function() {
- if (this.window_.devicePixelRatio >=
- goog.labs.style.PixelDensityMonitor.HIGH_DENSITY_RATIO_) {
- return goog.labs.style.PixelDensityMonitor.Density.HIGH;
- } else {
- return goog.labs.style.PixelDensityMonitor.Density.NORMAL;
- }
- };
- /**
- * Handles a change to the media query and checks whether the density has
- * changed since the last call.
- * @param {MediaQueryList} mql The list of changed media queries.
- * @private
- */
- goog.labs.style.PixelDensityMonitor.prototype.handleMediaQueryChange_ =
- function(mql) {
- var newDensity = this.getDensity();
- if (this.lastDensity_ != newDensity) {
- this.lastDensity_ = newDensity;
- this.dispatchEvent(goog.labs.style.PixelDensityMonitor.EventType.CHANGE);
- }
- };
- /** @override */
- goog.labs.style.PixelDensityMonitor.prototype.disposeInternal = function() {
- if (this.mediaQueryList_) {
- this.mediaQueryList_.removeListener(this.listener_);
- }
- goog.labs.style.PixelDensityMonitor.base(this, 'disposeInternal');
- };
|