Rename polymer and cr_elements v0_8 to v1_0

third_party/polymer/v0_8/components-chromium/iron-fit-behavior/iron-fit-behavior-extracted.js

-
-
-/**
-Polymer.IronFitBehavior fits an element in another element using `max-height` and `max-width`, and
-optionally centers it in the window or another element.
-
-The element will only be sized and/or positioned if it has not already been sized and/or positioned
-by CSS.
-
-CSS properties               | Action
------------------------------|-------------------------------------------
-`position` set               | Element is not centered horizontally or vertically
-`top` or `bottom` set        | Element is not vertically centered
-`left` or `right` set        | Element is not horizontally centered
-`max-height` or `height` set | Element respects `max-height` or `height`
-`max-width` or `width` set   | Element respects `max-width` or `width`
-
-@demo demo/index.html
-@polymerBehavior
-*/
-
-  Polymer.IronFitBehavior = {
-
-    properties: {
-
-      /**
-       * The element that will receive a `max-height`/`width`. By default it is the same as `this`,
-       * but it can be set to a child element. This is useful, for example, for implementing a
-       * scrolling region inside the element.
-       */
-      sizingTarget: {
-        type: Object,
-        value: function() {
-          return this;
-        }
-      },
-
-      /**
-       * The element to fit `this` into.
-       */
-      fitInto: {
-        type: Object,
-        value: window
-      },
-
-      /**
-       * Set to true to auto-fit on attach.
-       */
-      autoFitOnAttach: {
-        type: Boolean,
-        value: false
-      },
-
-      _fitInfo: {
-        type: Object
-      }
-
-    },
-
-    get _fitWidth() {
-      var fitWidth;
-      if (this.fitInto === window) {
-        fitWidth = this.fitInto.innerWidth;
-      } else {
-        fitWidth = this.fitInto.getBoundingClientRect().width;
-      }
-      return fitWidth;
-    },
-
-    get _fitHeight() {
-      var fitHeight;
-      if (this.fitInto === window) {
-        fitHeight = this.fitInto.innerHeight;
-      } else {
-        fitHeight = this.fitInto.getBoundingClientRect().height;
-      }
-      return fitHeight;
-    },
-
-    attached: function() {
-      if (this.autoFitOnAttach) {
-        if (window.getComputedStyle(this).display === 'none') {
-          setTimeout(function() {
-            this.fit();
-          }.bind(this));
-        } else {
-          this.fit();
-        }
-      }
-    },
-
-    /**
-     * Fits and optionally centers the element into the window, or `fitInfo` if specified.
-     */
-    fit: function() {
-      this._discoverInfo();
-      this.constrain();
-      this.center();
-    },
-
-    /**
-     * Memoize information needed to position and size the target element.
-     */
-    _discoverInfo: function() {
-      if (this._fitInfo) {
-        return;
-      }
-      var target = window.getComputedStyle(this);
-      var sizer = window.getComputedStyle(this.sizingTarget);
-      this._fitInfo = {
-        positionedBy: {
-          vertically: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
-            'bottom' : null),
-          horizontally: target.left !== 'auto' ? 'left' : (target.right !== 'auto' ?
-            'right' : null),
-          css: target.position
-        },
-        sizedBy: {
-          height: sizer.maxHeight !== 'none',
-          width: sizer.maxWidth !== 'none'
-        },
-        margin: {
-          top: parseInt(target.marginTop, 10) || 0,
-          right: parseInt(target.marginRight, 10) || 0,
-          bottom: parseInt(target.marginBottom, 10) || 0,
-          left: parseInt(target.marginLeft, 10) || 0
-        }
-      };
-    },
-
-    /**
-     * Resets the target element's position and size constraints, and clear
-     * the memoized data.
-     */
-    resetFit: function() {
-      if (!this._fitInfo || !this._fitInfo.sizedBy.height) {
-        this.sizingTarget.style.maxHeight = '';
-        this.style.top = '';
-      }
-      if (!this._fitInfo || !this._fitInfo.sizedBy.width) {
-        this.sizingTarget.style.maxWidth = '';
-        this.style.left = '';
-      }
-      if (this._fitInfo) {
-        this.style.position = this._fitInfo.positionedBy.css;
-      }
-      this._fitInfo = null;
-    },
-
-    /**
-     * Equivalent to calling `resetFit()` and `fit()`. Useful to call this after the element,
-     * the window, or the `fitInfo` element has been resized.
-     */
-    refit: function() {
-      this.resetFit();
-      this.fit();
-    },
-
-    /**
-     * Constrains the size of the element to the window or `fitInfo` by setting `max-height`
-     * and/or `max-width`.
-     */
-    constrain: function() {
-      var info = this._fitInfo;
-      // position at (0px, 0px) if not already positioned, so we can measure the natural size.
-      if (!this._fitInfo.positionedBy.vertically) {
-        this.style.top = '0px';
-      }
-      if (!this._fitInfo.positionedBy.horizontally) {
-        this.style.left = '0px';
-      }
-      // need border-box for margin/padding
-      this.sizingTarget.style.boxSizing = 'border-box';
-      // constrain the width and height if not already set
-      var rect = this.getBoundingClientRect();
-      if (!info.sizedBy.height) {
-        this._sizeDimension(rect, info.positionedBy.vertically, 'top', 'bottom', 'Height');
-      }
-      if (!info.sizedBy.width) {
-        this._sizeDimension(rect, info.positionedBy.horizontally, 'left', 'right', 'Width');
-      }
-    },
-
-    _sizeDimension: function(rect, positionedBy, start, end, extent) {
-      var info = this._fitInfo;
-      var max = extent === 'Width' ? this._fitWidth : this._fitHeight;
-      var flip = (positionedBy === end);
-      var offset = flip ? max - rect[end] : rect[start];
-      var margin = info.margin[flip ? start : end];
-      var offsetExtent = 'offset' + extent;
-      var sizingOffset = this[offsetExtent] - this.sizingTarget[offsetExtent];
-      this.sizingTarget.style['max' + extent] = (max - margin - offset - sizingOffset) + 'px';
-    },
-
-    /**
-     * Centers horizontally and vertically if not already positioned. This also sets
-     * `position:fixed`.
-     */
-    center: function() {
-      if (!this._fitInfo.positionedBy.vertically || !this._fitInfo.positionedBy.horizontally) {
-        // need position:fixed to center
-        this.style.position = 'fixed';
-      }
-      if (!this._fitInfo.positionedBy.vertically) {
-        var top = (this._fitHeight - this.offsetHeight) / 2;
-        top -= this._fitInfo.margin.top;
-        this.style.top = top + 'px';
-      }
-      if (!this._fitInfo.positionedBy.horizontally) {
-        var left = (this._fitWidth - this.offsetWidth) / 2;
-        left -= this._fitInfo.margin.left;
-        this.style.left = left + 'px';
-      }
-    }
-
-  };
-