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

Comparing version 3.0.0-pre.21 to 3.0.0-pre.22

demo/src/x-app.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
+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 { IronResizableBehavior } from '../../iron-resizable-behavior.js';
+import './x-puck.js';
 
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-Polymer({
-  _template: html`
-    <style>
-      :host {
-        display: inline-block;
-        border: 3px solid lightblue;
-      }
-    </style>
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
 
-    <b>I'm a resize-aware, thirdifying puck at (<span>{{x}}</span> x <span>{{y}}</span>).</b>
-`,
+import {IronResizableBehavior} from '../../iron-resizable-behavior.js';
 
-  is: 'x-puck',
-  behaviors: [IronResizableBehavior],
-
-  properties: {
-    x: {type: Number, value: 0},
-
-    y: {type: Number, value: 0}
-  },
-
-  listeners: {'iron-resize': '_onIronResize'},
-
-  attached: function() {
-    this.async(this.notifyResize, 1);
-  },
-
-  get parent() {
-    if (this.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-      return this.parentNode.host;
-    }
-
-    return this.parentNode;
-  },
-
-  _onIronResize: function() {
-    var x = this.x = Math.floor(this.parent.offsetWidth / 3);
-    var y = this.y = Math.floor(this.parent.offsetHeight / 3);
-
-    this.translate3d(x + 'px', y + 'px', 0);
-  }
-});
 Polymer({
@@ -57,0 +19,0 @@ _template: html`

iron-resizable-behavior.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
+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/polymer-legacy.js';
 
-import { useShadow } from '@polymer/polymer/lib/utils/settings.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
+import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
+import {useShadow} from '@polymer/polymer/lib/utils/settings.js';
 
@@ -33,3 +34,3 @@ // Contains all connected resizables that do not have a parent.
  *
- * @polymerBehavior Polymer.IronResizableBehavior
+ * @polymerBehavior
  * @demo demo/index.html
@@ -42,3 +43,6 @@ **/
      */
-    _parentResizable: {type: Object, observer: '_parentResizableChanged'},
+    _parentResizable: {
+      type: Object,
+      observer: '_parentResizableChanged',
+    },
 
@@ -49,3 +53,6 @@ /**
      */
-    _notifyingDescendant: {type: Boolean, value: false}
+    _notifyingDescendant: {
+      type: Boolean,
+      value: false,
+    }
   },
@@ -62,2 +69,3 @@
     this._boundNotifyResize = this.notifyResize.bind(this);
+    this._boundOnDescendantIronResize = this._onDescendantIronResize.bind(this);
   },
@@ -112,3 +120,3 @@
       parentResizable._interestedResizables.push(this);
-      parentResizable.listen(this, 'iron-resize', '_onDescendantIronResize');
+      parentResizable._subscribeIronResize(this);
     }
@@ -126,3 +134,3 @@ },
       this._interestedResizables.splice(index, 1);
-      this.unlisten(target, 'iron-resize', '_onDescendantIronResize');
+      this._unsubscribeIronResize(target);
     }
@@ -132,2 +140,28 @@ },
   /**
+   * Subscribe this element to listen to iron-resize events on the given target.
+   *
+   * Preferred over target.listen because the property renamer does not
+   * understand to rename when the target is not specifically "this"
+   *
+   * @param {!HTMLElement} target Element to listen to for iron-resize events.
+   */
+  _subscribeIronResize: function(target) {
+    target.addEventListener('iron-resize', this._boundOnDescendantIronResize);
+  },
+
+  /**
+   * Unsubscribe this element from listening to to iron-resize events on the
+   * given target.
+   *
+   * Preferred over target.unlisten because the property renamer does not
+   * understand to rename when the target is not specifically "this"
+   *
+   * @param {!HTMLElement} target Element to listen to for iron-resize events.
+   */
+  _unsubscribeIronResize: function(target) {
+    target.removeEventListener(
+        'iron-resize', this._boundOnDescendantIronResize);
+  },
+
+  /**
    * This method can be overridden to filter nested elements that should or
@@ -151,5 +185,3 @@ * should not be notified by the current element. Return true if an element
 
-    // NOTE(cdata): In ShadowDOM, event retargeting makes echoing of the
-    // otherwise non-bubbling event "just work." We do it manually here for
-    // the case where Polymer is not using shadow roots for whatever reason:
+    // no need to use this during shadow dom because of event retargeting
     if (!useShadow) {
@@ -196,12 +228,6 @@ this._fireResize();
   _requestResizeNotifications: function() {
-    if (!this.isAttached)
+    if (!this.isAttached) {
       return;
+    }
 
-    // NOTE(valdrin) In CustomElements v1 with native HTMLImports, the order
-    // of imports affects the order of `attached` callbacks (see
-    // webcomponents/custom-elements#15). This might cause a child to notify
-    // parents too early (as the parent still has to be upgraded), resulting in
-    // a parent not able to keep track of the `_interestedResizables`. To solve
-    // this, we wait for the document to be done loading before firing the
-    // event.
     if (document.readyState === 'loading') {
@@ -208,0 +234,0 @@ var _requestResizeNotifications =

package.json

@@ -16,21 +16,13 @@ {
   "devDependencies": {
-    "@polymer/gen-typescript-declarations": "^1.2.2",
-    "bower": "^1.8.0",
     "webmat": "^0.2.0",
-    "@polymer/iron-component-page": "^3.0.0-pre.21",
     "wct-browser-legacy": "^1.0.1",
-    "@webcomponents/webcomponentsjs": "^2.0.0"
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "@polymer/gen-typescript-declarations": "^1.5.0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
-    "format": "webmat && npm run update-types"
+    "format": "webmat",
+    "generate-types": "gen-typescript-declarations --deleteExisting --outDir .",
+    "prepack": "npm run generate-types"
   },
-  "version": "3.0.0-pre.21",
-  "resolutions": {
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0",
-    "@webcomponents/webcomponentsjs": "2.0.0-beta.2"
-  },
+  "version": "3.0.0-pre.22",
   "main": "iron-resizable-behavior.js",
@@ -37,0 +29,0 @@ "author": "The Polymer Authors",

README.md

@@ -0,8 +1,7 @@
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-resizable-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-resizable-behavior)
 [![Build status](https://travis-ci.org/PolymerElements/iron-resizable-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-resizable-behavior)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-resizable-behavior)
 
-_[Demo and API docs](https://elements.polymer-project.org/elements/iron-resizable-behavior)_
+## IronResizableBehavior
 
-
-## Polymer.IronResizableBehavior
-
 `IronResizableBehavior` is a behavior that can be used in Polymer elements to
@@ -22,2 +21,77 @@ coordinate the flow of resize events between "resizers" (elements that control the
 
+See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-resizable-behavior),
+  [Demo](https://www.webcomponents.org/element/@polymer/iron-resizable-behavior/demo/demo/index.html).
 
+## Usage
+
+### Installation
+```
+npm install --save @polymer/iron-resizable-behavior
+```
+
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
+import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+
+class SampleElement extends mixinBehaviors([IronResizableBehavior], PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+        }
+      </style>
+      <span>width: [[width]] </span>
+      <span>height: [[height]]</span>
+    `;
+  }
+
+  static get properties() {
+    return {
+      width: Number,
+      height: Number,
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('iron-resize', this.onIronResize.bind(this));
+  }
+
+  onIronResize() {
+    this.width = this.offsetWidth;
+    this.height = this.offsetHeight;
+  }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/iron-resizable-behavior
+cd iron-resizable-behavior
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

4

decreased by-33.33%

Lines of code

463

increased by1.98%

Number of lines in readme file

96

increased by317.39%

Worsened metrics

Total package byte prevSize

20741

decreased by-46.01%

Number of package files

8

decreased by-57.89%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes