@polymer/iron-fit-behavior - npm Package Compare versions

Comparing version 3.0.0-pre.12 to 3.0.0-pre.13

demo/simple-fit.js

@@ -1,6 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { IronFitBehavior } from '../iron-fit-behavior.js';
-import '@polymer/paper-styles/color.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 /**
@@ -15,2 +10,8 @@ @license
 */
+import '../../polymer/polymer-legacy.js';
+
+import { IronFitBehavior } from '../iron-fit-behavior.js';
+import '../../paper-styles/color.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -29,6 +30,3 @@ _template: html`
   is: 'simple-fit',
-
-  behaviors: [
-    IronFitBehavior
-  ]
+  behaviors: [IronFitBehavior]
 });

iron-fit-behavior.js

@@ -1,4 +0,63 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+import '../polymer/polymer-legacy.js';
 
+import { dom } from '../polymer/lib/legacy/polymer.dom.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` set             | Element respects `max-height`
+  `max-width` set              | Element respects `max-width`
+
+  `Polymer.IronFitBehavior` can position an element into another element using
+  `verticalAlign` and `horizontalAlign`. This will override the element's css
+  position.
+
+        <div class="container">
+          <iron-fit-impl vertical-align="top" horizontal-align="auto">
+            Positioned into the container
+          </iron-fit-impl>
+        </div>
+
+  Use `noOverlap` to position the element around another element without
+  overlapping it.
+
+        <div class="container">
+          <iron-fit-impl no-overlap vertical-align="auto" horizontal-align="auto">
+            Positioned around the container
+          </iron-fit-impl>
+        </div>
+
+  Use `horizontalOffset, verticalOffset` to offset the element from its
+  `positionTarget`; `Polymer.IronFitBehavior` will collapse these in order to keep
+  the element within `fitInto` boundaries, while preserving the element's CSS
+  margin values.
+
+        <div class="container">
+          <iron-fit-impl vertical-align="top" vertical-offset="20">
+            With vertical offset
+          </iron-fit-impl>
+        </div>
+
+
+  @demo demo/index.html
+  @polymerBehavior
+ */
 export const IronFitBehavior = {
@@ -9,5 +68,5 @@
     /**
-     * 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.
+     * 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.
      * @type {!Element}
@@ -25,46 +84,37 @@ */
      */
-    fitInto: {
-      type: Object,
-      value: window
-    },
+    fitInto: {type: Object, value: window},
 
     /**
-     * Will position the element around the positionTarget without overlapping it.
+     * Will position the element around the positionTarget without overlapping
+     * it.
      */
-    noOverlap: {
-      type: Boolean
-    },
+    noOverlap: {type: Boolean},
 
     /**
-     * The element that should be used to position the element. If not set, it will
-     * default to the parent node.
+     * The element that should be used to position the element. If not set, it
+     * will default to the parent node.
      * @type {!Element}
      */
-    positionTarget: {
-      type: Element
-    },
+    positionTarget: {type: Element},
 
     /**
      * The orientation against which to align the element horizontally
-     * relative to the `positionTarget`. Possible values are "left", "right", "center", "auto".
+     * relative to the `positionTarget`. Possible values are "left", "right",
+     * "center", "auto".
      */
-    horizontalAlign: {
-      type: String
-    },
+    horizontalAlign: {type: String},
 
     /**
      * The orientation against which to align the element vertically
-     * relative to the `positionTarget`. Possible values are "top", "bottom", "middle", "auto".
+     * relative to the `positionTarget`. Possible values are "top", "bottom",
+     * "middle", "auto".
      */
-    verticalAlign: {
-      type: String
-    },
+    verticalAlign: {type: String},
 
     /**
-     * If true, it will use `horizontalAlign` and `verticalAlign` values as preferred alignment
-     * and if there's not enough space, it will pick the values which minimize the cropping.
+     * If true, it will use `horizontalAlign` and `verticalAlign` values as
+     * preferred alignment and if there's not enough space, it will pick the
+     * values which minimize the cropping.
      */
-    dynamicAlign: {
-      type: Boolean
-    },
+    dynamicAlign: {type: Boolean},
 
@@ -78,4 +128,4 @@ /**
      * If `horizontalAlign` is "left" or "center", this offset will increase or
-     * decrease the distance to the left side of the screen: a negative offset will
-     * move the dropdown to the left; a positive one, to the right.
+     * decrease the distance to the left side of the screen: a negative offset
+     * will move the dropdown to the left; a positive one, to the right.
      *
@@ -86,7 +136,3 @@ * Conversely if `horizontalAlign` is "right", this offset will increase
      */
-    horizontalOffset: {
-      type: Number,
-      value: 0,
-      notify: true
-    },
+    horizontalOffset: {type: Number, value: 0, notify: true},
 
@@ -100,4 +146,4 @@ /**
      * If `verticalAlign` is "top" or "middle", this offset will increase or
-     * decrease the distance to the top side of the screen: a negative offset will
-     * move the dropdown upwards; a positive one, downwards.
+     * decrease the distance to the top side of the screen: a negative offset
+     * will move the dropdown upwards; a positive one, downwards.
      *
@@ -108,7 +154,3 @@ * Conversely if `verticalAlign` is "bottom", this offset will increase
      */
-    verticalOffset: {
-      type: Number,
-      value: 0,
-      notify: true
-    },
+    verticalOffset: {type: Number, value: 0, notify: true},
 
@@ -118,11 +160,6 @@ /**
      */
-    autoFitOnAttach: {
-      type: Boolean,
-      value: false
-    },
+    autoFitOnAttach: {type: Boolean, value: false},
 
     /** @type {?Object} */
-    _fitInfo: {
-      type: Object
-    }
+    _fitInfo: {type: Object}
   },
@@ -206,3 +243,3 @@
     return (this.horizontalAlign || this.verticalAlign) &&
-      (this.horizontalAlign !== 'center' || this.verticalAlign !== 'middle');
+        (this.horizontalAlign !== 'center' || this.verticalAlign !== 'middle');
   },
@@ -271,6 +308,8 @@
       positionedBy: {
-        vertically: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
-          'bottom' : null),
-        horizontally: target.left !== 'auto' ? 'left' : (target.right !== 'auto' ?
-          'right' : null)
+        vertically: target.top !== 'auto' ?
+            'top' :
+            (target.bottom !== 'auto' ? 'bottom' : null),
+        horizontally: target.left !== 'auto' ?
+            'left' :
+            (target.right !== 'auto' ? 'right' : null)
       },
@@ -336,3 +375,4 @@ sizedBy: {
     this.sizingTarget.style.boxSizing = 'border-box';
-    // Set to 0, 0 in order to discover any offset caused by parent stacking contexts.
+    // Set to 0, 0 in order to discover any offset caused by parent stacking
+    // contexts.
     this.style.left = '0px';
@@ -353,4 +393,9 @@ this.style.top = '0px';
 
-    var position = this.__getPosition(this._localeHorizontalAlign, this.verticalAlign, size, rect, positionRect,
-      fitRect);
+    var position = this.__getPosition(
+        this._localeHorizontalAlign,
+        this.verticalAlign,
+        size,
+        rect,
+        positionRect,
+        fitRect);
 
@@ -366,10 +411,15 @@ var left = position.left + margin.left;
     // Keep left/top within fitInto respecting the margin.
-    left = Math.max(fitRect.left + margin.left,
-      Math.min(left, right - this._fitInfo.sizedBy.minWidth));
-    top = Math.max(fitRect.top + margin.top,
-      Math.min(top, bottom - this._fitInfo.sizedBy.minHeight));
+    left = Math.max(
+        fitRect.left + margin.left,
+        Math.min(left, right - this._fitInfo.sizedBy.minWidth));
+    top = Math.max(
+        fitRect.top + margin.top,
+        Math.min(top, bottom - this._fitInfo.sizedBy.minHeight));
 
-    // Use right/bottom to set maxWidth/maxHeight, and respect minWidth/minHeight.
-    this.sizingTarget.style.maxWidth = Math.max(right - left, this._fitInfo.sizedBy.minWidth) + 'px';
-    this.sizingTarget.style.maxHeight = Math.max(bottom - top, this._fitInfo.sizedBy.minHeight) + 'px';
+    // Use right/bottom to set maxWidth/maxHeight, and respect
+    // minWidth/minHeight.
+    this.sizingTarget.style.maxWidth =
+        Math.max(right - left, this._fitInfo.sizedBy.minWidth) + 'px';
+    this.sizingTarget.style.maxHeight =
+        Math.max(bottom - top, this._fitInfo.sizedBy.minHeight) + 'px';
 
@@ -392,3 +442,4 @@ // Remove the offset caused by any stacking context.
     var info = this._fitInfo;
-    // position at (0px, 0px) if not already positioned, so we can measure the natural size.
+    // position at (0px, 0px) if not already positioned, so we can measure the
+    // natural size.
     if (!info.positionedBy.vertically) {
@@ -408,6 +459,8 @@ this.style.position = 'fixed';
     if (!info.sizedBy.height) {
-      this.__sizeDimension(rect, info.positionedBy.vertically, 'top', 'bottom', 'Height');
+      this.__sizeDimension(
+          rect, info.positionedBy.vertically, 'top', 'bottom', 'Height');
     }
     if (!info.sizedBy.width) {
-      this.__sizeDimension(rect, info.positionedBy.horizontally, 'left', 'right', 'Width');
+      this.__sizeDimension(
+          rect, info.positionedBy.horizontally, 'left', 'right', 'Width');
     }
@@ -436,8 +489,9 @@ },
     var sizingOffset = this[offsetExtent] - this.sizingTarget[offsetExtent];
-    this.sizingTarget.style['max' + extent] = (max - margin - offset - sizingOffset) + 'px';
+    this.sizingTarget.style['max' + extent] =
+        (max - margin - offset - sizingOffset) + 'px';
   },
 
   /**
-   * Centers horizontally and vertically if not already positioned. This also sets
-   * `position:fixed`.
+   * Centers horizontally and vertically if not already positioned. This also
+   * sets `position:fixed`.
    */
@@ -494,32 +548,41 @@ center: function() {
   __getOffscreenArea: function(position, size, fitRect) {
-    var verticalCrop = Math.min(0, position.top) + Math.min(0, fitRect.bottom - (position.top + size.height));
-    var horizontalCrop = Math.min(0, position.left) + Math.min(0, fitRect.right - (position.left + size.width));
-    return Math.abs(verticalCrop) * size.width + Math.abs(horizontalCrop) * size.height;
+    var verticalCrop = Math.min(0, position.top) +
+        Math.min(0, fitRect.bottom - (position.top + size.height));
+    var horizontalCrop = Math.min(0, position.left) +
+        Math.min(0, fitRect.right - (position.left + size.width));
+    return Math.abs(verticalCrop) * size.width +
+        Math.abs(horizontalCrop) * size.height;
   },
 
 
-  __getPosition: function(hAlign, vAlign, size, sizeNoMargins, positionRect, fitRect) {
+  __getPosition: function(
+      hAlign, vAlign, size, sizeNoMargins, positionRect, fitRect) {
     // All the possible configurations.
     // Ordered as top-left, top-right, bottom-left, bottom-right.
-    var positions = [{
-      verticalAlign: 'top',
-      horizontalAlign: 'left',
-      top: positionRect.top + this.verticalOffset,
-      left: positionRect.left + this.horizontalOffset
-    }, {
-      verticalAlign: 'top',
-      horizontalAlign: 'right',
-      top: positionRect.top + this.verticalOffset,
-      left: positionRect.right - size.width - this.horizontalOffset
-    }, {
-      verticalAlign: 'bottom',
-      horizontalAlign: 'left',
-      top: positionRect.bottom - size.height - this.verticalOffset,
-      left: positionRect.left + this.horizontalOffset
-    }, {
-      verticalAlign: 'bottom',
-      horizontalAlign: 'right',
-      top: positionRect.bottom - size.height - this.verticalOffset,
-      left: positionRect.right - size.width - this.horizontalOffset
-    }];
+    var positions = [
+      {
+        verticalAlign: 'top',
+        horizontalAlign: 'left',
+        top: positionRect.top + this.verticalOffset,
+        left: positionRect.left + this.horizontalOffset
+      },
+      {
+        verticalAlign: 'top',
+        horizontalAlign: 'right',
+        top: positionRect.top + this.verticalOffset,
+        left: positionRect.right - size.width - this.horizontalOffset
+      },
+      {
+        verticalAlign: 'bottom',
+        horizontalAlign: 'left',
+        top: positionRect.bottom - size.height - this.verticalOffset,
+        left: positionRect.left + this.horizontalOffset
+      },
+      {
+        verticalAlign: 'bottom',
+        horizontalAlign: 'right',
+        top: positionRect.bottom - size.height - this.verticalOffset,
+        left: positionRect.right - size.width - this.horizontalOffset
+      }
+    ];
 
@@ -551,4 +614,6 @@ if (this.noOverlap) {
         horizontalAlign: 'center',
-        top: positionRect.top + this.verticalOffset + (this.noOverlap ? positionRect.height : 0),
-        left: positionRect.left - sizeNoMargins.width / 2 + positionRect.width / 2 + this.horizontalOffset
+        top: positionRect.top + this.verticalOffset +
+            (this.noOverlap ? positionRect.height : 0),
+        left: positionRect.left - sizeNoMargins.width / 2 +
+            positionRect.width / 2 + this.horizontalOffset
       });
@@ -558,4 +623,6 @@ positions.push({
         horizontalAlign: 'center',
-        top: positionRect.bottom - size.height - this.verticalOffset - (this.noOverlap ? positionRect.height : 0),
-        left: positionRect.left - sizeNoMargins.width / 2 + positionRect.width / 2 + this.horizontalOffset
+        top: positionRect.bottom - size.height - this.verticalOffset -
+            (this.noOverlap ? positionRect.height : 0),
+        left: positionRect.left - sizeNoMargins.width / 2 +
+            positionRect.width / 2 + this.horizontalOffset
       });
@@ -568,4 +635,6 @@ }
         horizontalAlign: 'left',
-        top: positionRect.top - sizeNoMargins.height / 2 + positionRect.height / 2 + this.verticalOffset,
-        left: positionRect.left + this.horizontalOffset + (this.noOverlap ? positionRect.width : 0)
+        top: positionRect.top - sizeNoMargins.height / 2 +
+            positionRect.height / 2 + this.verticalOffset,
+        left: positionRect.left + this.horizontalOffset +
+            (this.noOverlap ? positionRect.width : 0)
       });
@@ -575,4 +644,6 @@ positions.push({
         horizontalAlign: 'right',
-        top: positionRect.top - sizeNoMargins.height / 2 + positionRect.height / 2 + this.verticalOffset,
-        left: positionRect.right - size.width - this.horizontalOffset - (this.noOverlap ? positionRect.width : 0)
+        top: positionRect.top - sizeNoMargins.height / 2 +
+            positionRect.height / 2 + this.verticalOffset,
+        left: positionRect.right - size.width - this.horizontalOffset -
+            (this.noOverlap ? positionRect.width : 0)
       });
@@ -606,3 +677,4 @@ }
 
-      candidate.offscreenArea = this.__getOffscreenArea(candidate, size, fitRect);
+      candidate.offscreenArea =
+          this.__getOffscreenArea(candidate, size, fitRect);
       // If not cropped and respects the align requirements, keep it.
@@ -609,0 +681,0 @@ // This allows to prefer positions overlapping horizontally over the

package.json

@@ -17,11 +17,13 @@ {
     "bower": "^1.8.0",
-    "@polymer/iron-component-page": "3.0.0-pre.12",
-    "@polymer/iron-demo-helpers": "3.0.0-pre.12",
-    "wct-browser-legacy": "0.0.1-pre.11",
-    "@webcomponents/webcomponentsjs": "^1.0.0"
+    "webmat": "^0.2.0",
+    "@polymer/iron-component-page": "^3.0.0-pre.13",
+    "@polymer/iron-demo-helpers": "^3.0.0-pre.13",
+    "wct-browser-legacy": "^0.0.1-pre.11",
+    "@webcomponents/webcomponentsjs": "^2.0.0-0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir ."
+    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
+    "format": "webmat && npm run update-types"
   },
-  "version": "3.0.0-pre.12",
+  "version": "3.0.0-pre.13",
   "resolutions": {
@@ -36,4 +38,4 @@ "inherits": "2.0.3",
   "dependencies": {
-    "@polymer/polymer": "3.0.0-pre.12"
+    "@polymer/polymer": "^3.0.0-pre.13"
   }
 }

test/test-fit.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { IronFitBehavior } from '../iron-fit-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 /**
@@ -14,2 +10,7 @@ @license
 */
+import '../../polymer/polymer-legacy.js';
+
+import { IronFitBehavior } from '../iron-fit-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -29,6 +30,3 @@ _template: html`
   is: 'test-fit',
-
-  behaviors: [
-    IronFitBehavior
-  ]
+  behaviors: [IronFitBehavior]
 });

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

89929

increased by6.69%

Lines of code

694

increased by8.95%

Worsened metrics

Dev dependency count

7

increased by16.67%

Dependency changes

• + Added@polymer/polymer@3.5.1(transitive)

• - Removed@polymer/polymer@3.0.0-pre.12(transitive)

• - Removed@webcomponents/webcomponentsjs@1.3.3(transitive)

• Updated@polymer/polymer@^3.0.0-pre.13