tombigel / detect-zoom Goto Github PK

/* Detect-zoom
 * -----------
 * Cross Browser Zoom and Pixel Ratio Detector
 * Version 1.0.4 | Apr 1 2013
 * dual-licensed under the WTFPL and MIT license
 * Maintained by https://github/tombigel
 * Original developer https://github.com/yonran
 */

export class DetectZoom {
  constructor(private window: Window) {}
  /**
   * Use devicePixelRatio if supported by the browser
   */
  get devicePixelRatio(): number {
    return this.window.devicePixelRatio || 1;
  }

  /**
   * Fallback function to set default values
   */
  private fallback() {
    return {
      zoom: 1,
      devicePxPerCssPx: 1,
    };
  }

  /**
   * IE 8 and 9: no trick needed!
   */
  private ie8() {
    const zoom = Math.round(((this.window.screen as any).deviceXDPI / (this.window.screen as any).logicalXDPI) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * For IE10 we need to change our technique again...
   * thanks https://github.com/stefanvanburen
   */
  private ie10() {
    const zoom = Math.round((this.window.document.documentElement.offsetHeight / this.window.innerHeight) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * For chrome
   */
  private chrome() {
    const zoom = Math.round((this.window.outerWidth / this.window.innerWidth) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * For safari (same as chrome)
   */
  private safari() {
    const zoom = Math.round((this.window.document.documentElement.clientWidth / this.window.innerWidth) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * Mobile WebKit
   * the trick: window.innerWIdth is in CSS pixels, while
   * screen.width and screen.height are in system pixels.
   * And there are no scrollbars to mess up the measurement.
   */
  private webkitMobile() {
    const deviceWidth = Math.abs(this.window.screen.orientation.angle) === 90 ? screen.height : screen.width;
    const zoom = deviceWidth / window.innerWidth;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * Desktop Webkit
   * the trick: an element's clientHeight is in CSS pixels, while you can
   * set its line-height in system pixels using font-size and
   * -webkit-text-size-adjust:none.
   * device-pixel-ratio: http://www.webkit.org/blog/55/high-dpi-web-sites/
   *
   * Previous trick (used before http://trac.webkit.org/changeset/100847):
   * documentElement.scrollWidth is in CSS pixels, while
   * document.width was in system pixels. Note that this is the
   * layout width of the document, which is slightly different from viewport
   * because document width does not include scrollbars and might be wider
   * due to big elements.
   */
  private webkit() {
    const important = str => str.replace(/;/g, ' !important;');

    const div = this.window.document.createElement('div');
    div.innerHTML = '1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>0';
    div.setAttribute(
      'style',
      important(
        'font: 100px/1em sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; height: auto; width: 1em; padding: 0; overflow: visible;'
      )
    );

    // The container exists so that the div will be laid out in its own flow
    // while not impacting the layout, viewport size, or display of the
    // webpage as a whole.
    // Add !important and relevant CSS rule resets
    // so that other rules cannot affect the results.
    const container = this.window.document.createElement('div');
    container.setAttribute('style', important('width:0; height:0; overflow:hidden; visibility:hidden; position: absolute;'));
    container.appendChild(div);

    document.body.appendChild(container);
    let zoom = 1000 / div.clientHeight;
    zoom = Math.round(zoom * 100) / 100;
    document.body.removeChild(container);

    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  /**
   * no real trick; device-pixel-ratio is the ratio of device dpi / css dpi.
   * (Note that this is a different interpretation than Webkit's device
   * pixel ratio, which is the ratio device dpi / system dpi).
   *
   * Also, for Mozilla, there is no difference between the zoom factor and the device ratio.
   */
  private firefox4() {
    const zoom = Math.round(this.mediaQueryBinarySearch('min--moz-device-pixel-ratio', '', 0, 10, 20, 0.0001) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom,
    };
  }

  /**
   * Firefox 18.x
   * Mozilla added support for devicePixelRatio to Firefox 18,
   * but it is affected by the zoom level, so, like in older
   * Firefox we can't tell if we are in zoom mode or in a device
   * with a different pixel ratio
   */
  private firefox18() {
    return {
      zoom: this.firefox4().zoom,
      devicePxPerCssPx: this.devicePixelRatio,
    };
  }

  /**
   * works starting Opera 11.11
   * the trick: outerWidth is the viewport width including scrollbars in
   * system px, while innerWidth is the viewport width including scrollbars
   * in CSS px
   */
  private opera11() {
    const zoom = Math.round((this.window.top.outerWidth / this.window.top.innerWidth) * 100) / 100;
    return {
      zoom: zoom,
      devicePxPerCssPx: zoom * this.devicePixelRatio,
    };
  }

  binarySearch(property: string, unit: string, a: number, b: number, maxIter: number, epsilon: number, matchMedia: any) {
    const mid = (a + b) / 2;
    if (maxIter <= 0 || b - a < epsilon) {
      return mid;
    }
    const query = '(' + property + ':' + mid + unit + ')';
    if (matchMedia(query).matches) {
      return this.binarySearch(property, unit, mid, b, maxIter - 1, epsilon, matchMedia);
    } else {
      return this.binarySearch(property, unit, a, mid, maxIter - 1, epsilon, matchMedia);
    }
  }

  /**
   * Use a binary search through media queries to find zoom level in Firefox
   */
  private mediaQueryBinarySearch(property: string, unit: string, a: number, b: number, maxIter: number, epsilon: number) {
    let matchMedia;
    let head, style, div;
    if (window.matchMedia) {
      matchMedia = window.matchMedia;
    } else {
      head = document.getElementsByTagName('head')[0];
      style = document.createElement('style');
      head.appendChild(style);

      div = document.createElement('div');
      div.className = 'mediaQueryBinarySearch';
      div.style.display = 'none';
      document.body.appendChild(div);

      matchMedia = function (query) {
        style.sheet.insertRule('@media ' + query + '{.mediaQueryBinarySearch ' + '{text-decoration: underline} }', 0);
        const matched = getComputedStyle(div, null).textDecoration === 'underline';
        style.sheet.deleteRule(0);
        return { matches: matched };
      };
    }
    const ratio = this.binarySearch(property, unit, a, b, maxIter, epsilon, matchMedia);
    if (div) {
      head.removeChild(style);
      document.body.removeChild(div);
    }
    return ratio;
  }

  private detect() {
    //IE8+
    if (!isNaN((this.window.screen as any).logicalXDPI) && !isNaN((this.window.screen as any).systemXDPI)) {
      return this.ie8();
    }
    // IE10+ / Touch
    else if (this.window.navigator.msMaxTouchPoints) {
      return this.ie10();
    }
    //chrome
    else if (!!(this.window as any).chrome && !(!!(this.window as any).opera || this.window.navigator.userAgent.indexOf(' Opera') >= 0)) {
      return this.chrome();
    }
    //safari
    else if (Object.prototype.toString.call((this.window as any).HTMLElement).indexOf('Constructor') > 0) {
      return this.safari();
    }
    //Mobile Webkit
    else if ('orientation' in this.window && 'webkitRequestAnimationFrame' in this.window) {
      return this.webkitMobile();
    }
    //WebKit
    else if ('webkitRequestAnimationFrame' in this.window) {
      return this.webkit();
    }
    //Opera
    else if ((this.window as any).navigator.userAgent.indexOf('Opera') >= 0) {
      return this.opera11();
    }
    //Last one is Firefox
    //FF 18.x
    else if ((this.window as any).devicePixelRatio) {
      return this.firefox18();
    }
    //FF 4.0 - 17.x
    else if (this.firefox4().zoom > 0.001) {
      return this.firefox4();
    }

    return this.fallback();
  }

  zoom() {
    return this.detect().zoom;
  }

  /**
   * Ratios.devicePxPerCssPx shorthand
   */
  device() {
    return this.detect().devicePxPerCssPx;
  }
}