index.js

/* eslint wrap-iife: 0, no-var: 0 */
/* global define */
(function () {
  var prefix = ["", "O", "ms", "Webkit", "Moz"];
  function transform(el, param) {
    for (var i = 0, iLen = prefix.length; i < iLen; i++) {
      var prop = prefix[i] + "transform";
      el.style[prop] = param || "";
    }
  }

  function setSize(el, width, height) {
    el.style.width = width ? ("" + width + "px") : "";
    el.style.height = height ? ("" + height + "px") : "";
  }

  function PageScaleJs(el, options) {
    if (!el) {
      throw new Error("null element");
    }
    if (el === document.body) {
      throw new Error("element mustn't be body elements");
    }
    if (el.parentNode === document.body) {
      throw new Error("element must be wrapped by container");
    }
    if (!(this instanceof PageScaleJs)) {
      return new PageScaleJs(el, options);
    }
    this.init(el, options);
    return this;
  }

  PageScaleJs.prototype.init = function(el, options) {
    var opts = options || {};
    this.sizes = [];
    this.el = el;
    this.className = opts.className || "page-scale-js";
    if (opts.width && opts.height) {
      this.addRange(opts.width, opts.height, { from: opts.from, to: opts.to });
    }
    if (opts.ranges) {
      for (var i = 0, iLen = opts.ranges.length; i < iLen; i++) {
        var item = opts.ranges[i];
        this.addRange(item.width, item.height, { from: item.from, to: item.to });
      }
    }
    var handleId;
    var self = this;
    var resize = function() {
      handleId = null;
      var scale = self.onResize();
      opts.onChangeScale && opts.onChangeScale(scale);
    };
    this._onResize = function() {
      !handleId && clearTimeout(handleId);
      handleId = setTimeout(resize, opts.timeout || 500);
    };
    window.addEventListener("resize", this._onResize);
    resize();
  };

  PageScaleJs.prototype.addRange = function(width, height, opts) {
    if (!width || !height) {
      throw new Error("Needs correct arguments width adn height");
    }
    opts || (opts = {});
    this.sizes.push({
      from: opts.from || width,
      to: opts.to,
      width: width,
      height: height
    });
  };

  PageScaleJs.prototype.getSizeItem = function () {
    var w = window.innerWidth;
    for (var i = 0, item = null, iLen = this.sizes.length; i < iLen; i++) {
      item = this.sizes[i];
      if (item.from >= w) {
        if (!item.to || item.to <= w) {
          return {
            index: i,
            width: typeof item.width === "function" ? item.width() : item.width,
            height: typeof item.height === "function" ? item.height() : item.height
          };
        }
      }
    }
  };

  PageScaleJs.prototype.destroy = function() {
    window.removeEventListener("resize", this._onResize);
  };

  PageScaleJs.prototype.onResize = function() {
    var item = this.getSizeItem();
    var parentNode = this.el.parentNode;
    if (item) {
      var fixWidth = item.width;
      var fixHeight = item.height;
      var scale = window.innerWidth / fixWidth;
      var height = fixHeight * scale;
      var ratio = fixHeight / fixWidth;
      if (height < window.innerHeight) {
        height = window.innerHeight;
        ratio = window.innerHeight / (fixWidth * scale);
      }

      var x = (fixWidth - window.innerWidth) / -2;
      var y = x * ratio;
      transform(this.el,
        "scale(" + scale + ") translate(" + x/scale +
        "px, " + y/scale + "px)");
      setSize(this.el, fixWidth, height / scale);
      setSize(parentNode, fixWidth * scale, height);
      if (this.className) {
        parentNode.classList.add(this.className);
        parentNode.setAttribute("data-page-scale", item.index);
      }
      return scale;
    } else {
      transform(this.el);
      setSize(this.el);
      setSize(parentNode);
      if (this.className) {
        parentNode.classList.remove(this.className);
        parentNode.removeAttribute("data-page-scale");
      }
      return 1;
    }
  };

  if (typeof exports !== "undefined") {
    if (typeof module !== "undefined" && module.exports) {
      exports = module.exports = PageScaleJs;
    }
    exports.PageScaleJs = PageScaleJs;
  } else if (typeof define === "function" && define.amd) {
    define("PageScaleJs", [], function() {
      return PageScaleJs;
    });
  } else {
    window.PageScaleJs = PageScaleJs;
  }
})(this);