@polymer/paper-scroll-header-panel - npm Package Compare versions

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

demo/sample-content.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 } from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
 
-import { html as html$0 } from '@polymer/polymer/lib/utils/html-tag.js';
+import {html as html$0} from '@polymer/polymer/lib/utils/html-tag.js';
 
@@ -46,9 +47,3 @@ var strings = [
 
-  properties: {
-    size: {
-      type: Number,
-      value: 0,
-      observer: 'sizeChanged'
-    }
-  },
+  properties: {size: {type: Number, value: 0, observer: 'sizeChanged'}},
 
@@ -59,9 +54,12 @@ sizeChanged: function() {
       html +=
-        '<div style="border: 1px solid #bebebe; padding: 16px; margin: 16px; border-radius: 5px; background-color: #fff; color: #555;">' +
-        '<div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #666; text-align: center;">'+ randomLetter() + '</div>' +
-        '<div style="font-size: 22px; padding: 8px 0 16px; color: #888;">' + randomString() + '</div>' +
-        '<div style="font-size: 16px; padding-bottom: 8px;">' + randomString() + '</div>' +
-        '<div style="font-size: 12px;">' + randomString() + '</div>' +
-        '<div style="font-size: 12px;">' + randomString() + '</div>' +
-        '</div>';
+          '<div style="border: 1px solid #bebebe; padding: 16px; margin: 16px; border-radius: 5px; background-color: #fff; color: #555;">' +
+          '<div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #666; text-align: center;">' +
+          randomLetter() + '</div>' +
+          '<div style="font-size: 22px; padding: 8px 0 16px; color: #888;">' +
+          randomString() + '</div>' +
+          '<div style="font-size: 16px; padding-bottom: 8px;">' +
+          randomString() + '</div>' +
+          '<div style="font-size: 12px;">' + randomString() + '</div>' +
+          '<div style="font-size: 12px;">' + randomString() + '</div>' +
+          '</div>';
       this.$.content.innerHTML = html;
@@ -68,0 +66,0 @@ }

package.json

@@ -14,51 +14,30 @@ {
   "name": "@polymer/paper-scroll-header-panel",
-  "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"
+  "license": "BSD-3-Clause",
+  "devDependencies": {
+    "webmat": "^0.2.0",
+    "@polymer/paper-styles": "^3.0.0-pre.20",
+    "@polymer/paper-toolbar": "^3.0.0-pre.20",
+    "@polymer/paper-drawer-panel": "^3.0.0-pre.20",
+    "@polymer/iron-flex-layout": "^3.0.0-pre.20",
+    "@polymer/iron-media-query": "^3.0.0-pre.20",
+    "@polymer/iron-icons": "^3.0.0-pre.20",
+    "@polymer/paper-icon-button": "^3.0.0-pre.20",
+    "@polymer/paper-input": "^3.0.0-pre.20",
+    "@polymer/test-fixture": "^3.0.0-pre.20",
+    "wct-browser-legacy": "^1.0.1",
+    "@webcomponents/webcomponentsjs": "^2.0.0",
+    "@polymer/gen-typescript-declarations": "^1.5.0"
   },
+  "scripts": {
+    "format": "webmat",
+    "generate-types": "gen-typescript-declarations --deleteExisting --outDir .",
+    "prepack": "npm run generate-types"
+  },
+  "version": "3.0.0-pre.22",
   "main": "paper-scroll-header-panel.js",
-  "contributors": [
-    "T",
-    "h",
-    "e",
-    " ",
-    "P",
-    "o",
-    "l",
-    "y",
-    "m",
-    "e",
-    "r",
-    " ",
-    "A",
-    "u",
-    "t",
-    "h",
-    "o",
-    "r",
-    "s"
-  ],
-  "license": "BSD-3-Clause",
+  "author": "The Polymer Authors",
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@polymer/iron-resizable-behavior": "^3.0.0-pre.21"
-  },
-  "devDependencies": {
-    "@polymer/paper-styles": "^3.0.0-pre.21",
-    "@polymer/paper-toolbar": "^3.0.0-pre.21",
-    "@polymer/paper-drawer-panel": "^3.0.0-pre.21",
-    "@polymer/iron-flex-layout": "^3.0.0-pre.21",
-    "@polymer/iron-media-query": "^3.0.0-pre.21",
-    "@polymer/iron-icons": "^3.0.0-pre.21",
-    "@polymer/paper-icon-button": "^3.0.0-pre.21",
-    "@polymer/paper-input": "^3.0.0-pre.21",
-    "@polymer/iron-component-page": "^3.0.0-pre.21",
-    "@polymer/test-fixture": "^3.0.0-pre.21",
-    "wct-browser-legacy": "^1.0.1",
-    "@webcomponents/webcomponentsjs": "^2.0.0"
+    "@polymer/iron-resizable-behavior": "^3.0.0-pre.20"
   }
 }

paper-scroll-header-panel.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 {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
+import {Polymer as Polymer$0} from '@polymer/polymer/lib/legacy/polymer-fn.js';
+import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
+import {html} from '@polymer/polymer/lib/utils/html-tag.js';
+
 /**
-**This element has been deprecated in favor of [app-layout](https://github.com/PolymerElements/app-layout).**
+**This element has been deprecated in favor of
+[app-layout](https://github.com/PolymerElements/app-layout).**
 
-Material design: [Scrolling techniques](https://www.google.com/design/spec/patterns/scrolling-techniques.html)
+Material design: [Scrolling
+techniques](https://www.google.com/design/spec/patterns/scrolling-techniques.html)
 
-`paper-scroll-header-panel` contains a header section and a content section.  The
+`paper-scroll-header-panel` contains a header section and a content section. The
 header is initially on the top part of the view but it scrolls away with the
@@ -21,5 +31,9 @@ rest of the scrollable content. Upon scrolling slightly up at any point, the
 
-__Important:__ The `paper-scroll-header-panel` will not display if its parent does not have a height.
+__Important:__ The `paper-scroll-header-panel` will not display if its parent
+does not have a height.
 
-Using [layout classes](https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes) or custom properties, you can easily make the `paper-scroll-header-panel` fill the screen
+Using [layout
+classes](https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes)
+or custom properties, you can easily make the `paper-scroll-header-panel` fill
+the screen
 
@@ -37,3 +51,4 @@ ```html
 
-or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-scroll-header-panel` a height of 100%:
+or, if you would prefer to do it in CSS, just give `html`, `body`, and
+`paper-scroll-header-panel` a height of 100%:
 
@@ -50,6 +65,7 @@ ```css
 
-`paper-scroll-header-panel` works well with `paper-toolbar` but can use any element
-that represents a header by adding a `paper-header` class to it.
+`paper-scroll-header-panel` works well with `paper-toolbar` but can use any
+element that represents a header by adding a `paper-header` class to it.
 
-Note: If the class `paper-header` is used, the header must be positioned relative or absolute. e.g.
+Note: If the class `paper-header` is used, the header must be positioned
+relative or absolute. e.g.
 
@@ -95,14 +111,2 @@ ```css
 */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-import '@polymer/polymer/polymer-legacy.js';
-
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { Polymer as Polymer$0 } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
-
 export const PaperScrollHeaderPanel = Polymer$0({
@@ -199,5 +203,3 @@ _template: html`
 
-  behaviors: [
-    IronResizableBehavior
-  ],
+  behaviors: [IronResizableBehavior],
 
@@ -210,6 +212,3 @@ properties: {
      */
-    condenses: {
-      type: Boolean,
-      value: false
-    },
+    condenses: {type: Boolean, value: false},
 
@@ -219,6 +218,3 @@ /**
      */
-    noDissolve: {
-      type: Boolean,
-      value: false
-    },
+    noDissolve: {type: Boolean, value: false},
 
@@ -228,6 +224,3 @@ /**
      */
-    noReveal: {
-      type: Boolean,
-      value: false
-    },
+    noReveal: {type: Boolean, value: false},
 
@@ -237,6 +230,3 @@ /**
      */
-    fixed: {
-      type: Boolean,
-      value: false
-    },
+    fixed: {type: Boolean, value: false},
 
@@ -246,6 +236,3 @@ /**
      */
-    keepCondensedHeader: {
-      type: Boolean,
-      value: false
-    },
+    keepCondensedHeader: {type: Boolean, value: false},
 
@@ -259,5 +246,3 @@ /**
      */
-    headerHeight: {
-      type: Number
-    },
+    headerHeight: {type: Number},
 
@@ -270,6 +255,3 @@ /**
      */
-    condensedHeaderHeight: {
-      type: Number,
-      value: 0
-    },
+    condensedHeaderHeight: {type: Number, value: 0},
 
@@ -281,10 +263,7 @@ /**
      */
-    scrollAwayTopbar: {
-      type: Boolean,
-      value: false
-    },
+    scrollAwayTopbar: {type: Boolean, value: false},
 
     /**
-     * The state of the header. Depending on the configuration and the `scrollTop` value,
-     * the header state could change to
+     * The state of the header. Depending on the configuration and the
+     * `scrollTop` value, the header state could change to
      *      Polymer.PaperScrollHeaderPanel.HEADER_STATE_EXPANDED
@@ -295,14 +274,6 @@ *      Polymer.PaperScrollHeaderPanel.HEADER_STATE_HIDDEN
      */
-    headerState: {
-      type: Number,
-      readOnly: true,
-      notify:true,
-      value: 0
-    },
+    headerState: {type: Number, readOnly: true, notify: true, value: 0},
 
     /** @type {number|null} */
-    _defaultCondsensedHeaderHeight: {
-      type: Number,
-      value: 0
-    }
+    _defaultCondsensedHeaderHeight: {type: Number, value: 0}
   },
@@ -317,5 +288,3 @@
 
-  listeners: {
-    'iron-resize': 'measureHeaderHeight'
-  },
+  listeners: {'iron-resize': 'measureHeaderHeight'},
 
@@ -395,4 +364,5 @@ ready: function() {
     // the scroll event will trigger _updateScrollState directly,
-    // However, _updateScrollState relies on the previous `scrollTop` to update the states.
-    // Calling _updateScrollState will ensure that the states are synced correctly.
+    // However, _updateScrollState relies on the previous `scrollTop` to update
+    // the states. Calling _updateScrollState will ensure that the states are
+    // synced correctly.
 
@@ -403,3 +373,3 @@ if (smooth) {
         t /= d;
-        return -c * t*(t-2) + b;
+        return -c * t * (t - 2) + b;
       };
@@ -423,6 +393,6 @@ var animationId = Math.random();
         } else if (this._currentAnimationId === animationId) {
-          this.scroller.scrollTop = easingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration);
+          this.scroller.scrollTop =
+              easingFn(elapsedTime, currentScrollTop, deltaScrollTop, duration);
           requestAnimationFrame(updateFrame.bind(this));
         }
-
       }).call(this);
@@ -437,7 +407,7 @@
   /**
-    * Condense the header.
-    *
-    * @method condense
-    * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
-    */
+   * Condense the header.
+   *
+   * @method condense
+   * @param {boolean} smooth true if the scroll position should be smoothly adjusted.
+   */
   condense: function(smooth) {
@@ -447,8 +417,11 @@ if (this.condenses && !this.fixed && !this.noReveal) {
         case 1:
-          this.scroll(this.scroller.scrollTop - (this._headerMaxDelta - this._headerMargin), smooth);
-        break;
+          this.scroll(
+              this.scroller.scrollTop -
+                  (this._headerMaxDelta - this._headerMargin),
+              smooth);
+          break;
         case 0:
         case 3:
           this.scroll(this._headerMargin, smooth);
-        break;
+          break;
       }
@@ -470,3 +443,3 @@ }
     if (this._defaultCondsensedHeaderHeight !== null) {
-      this._defaultCondsensedHeaderHeight = Math.round(headerHeight * 1/3);
+      this._defaultCondsensedHeaderHeight = Math.round(headerHeight * 1 / 3);
       this.condensedHeaderHeight = this._defaultCondsensedHeaderHeight;
@@ -504,6 +477,6 @@ }
           this._transformHeader(this._headerMaxDelta);
-        break;
+          break;
         case 2:
           this._transformHeader(this._headerMargin);
-        break;
+          break;
       }
@@ -520,8 +493,7 @@ }
 
-    this.fire('paper-header-transform',
-      { y: y,
-        height: this.headerHeight,
-        condensedHeight: this.condensedHeaderHeight
-      }
-    );
+    this.fire('paper-header-transform', {
+      y: y,
+      height: this.headerHeight,
+      condensedHeight: this.condensedHeaderHeight
+    });
   },
@@ -533,10 +505,11 @@
     // adjust top bar in paper-header so the top bar stays at the top
-    if (!this.scrollAwayTopbar && this.header && this.header.$ && this.header.$.topBar) {
-      this._translateY(this.header.$.topBar,
-          reset ? null : Math.min(y, this._headerMargin));
+    if (!this.scrollAwayTopbar && this.header && this.header.$ &&
+        this.header.$.topBar) {
+      this._translateY(
+          this.header.$.topBar, reset ? null : Math.min(y, this._headerMargin));
     }
     // transition header bg
     if (!this.noDissolve) {
-      this.$.headerBg.style.opacity = reset ? '' :
-          ( (this._headerMargin - y) / this._headerMargin);
+      this.$.headerBg.style.opacity =
+          reset ? '' : ((this._headerMargin - y) / this._headerMargin);
     }
@@ -547,4 +520,4 @@ // adjust header bg so it stays at the center
     if (!this.noDissolve) {
-      this.$.condensedHeaderBg.style.opacity = reset ? '' :
-          (y / this._headerMargin);
+      this.$.condensedHeaderBg.style.opacity =
+          reset ? '' : (y / this._headerMargin);
 
@@ -565,8 +538,3 @@ // adjust condensed header bg so it stays at the center
 
-      this.fire('content-scroll', {
-        target: this.scroller
-      },
-      {
-        cancelable: false
-      });
+      this.fire('content-scroll', {target: this.scroller}, {cancelable: false});
     }
@@ -573,0 +541,0 @@ },

README.md

@@ -1,20 +0,5 @@
-
-<!---
-
-This README is automatically generated from the comments in these files:
-paper-scroll-header-panel.html
-
-Edit those files, and our readme bot will duplicate them over here!
-Edit this file, and the bot will squash your changes :)
-
-The bot does some handling of markdown. Please file a bug if it does the wrong
-thing! https://github.com/PolymerLabs/tedium/issues
-
--->
-
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-scroll-header-panel.svg)](https://www.npmjs.com/package/@polymer/paper-scroll-header-panel)
 [![Build status](https://travis-ci.org/PolymerElements/paper-scroll-header-panel.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-scroll-header-panel)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-scroll-header-panel)
 
-_[Demo and API docs](https://elements.polymer-project.org/elements/paper-scroll-header-panel)_
-
-
 ## &lt;paper-scroll-header-panel&gt;
@@ -24,4 +9,2 @@
 
-Material design: [Scrolling techniques](https://www.google.com/design/spec/patterns/scrolling-techniques.html)
-
 `paper-scroll-header-panel` contains a header section and a content section.  The
@@ -35,27 +18,2 @@ header is initially on the top part of the view but it scrolls away with the
 
-Using [layout classes](https://www.polymer-project.org/1.0/docs/migration.html#layout-attributes) or custom properties, you can easily make the `paper-scroll-header-panel` fill the screen
-
-```html
-<body class="fullbleed layout vertical">
-  <paper-scroll-header-panel class="flex">
-    <paper-toolbar slot="header">
-      <div>Hello World!</div>
-    </paper-toolbar>
-    <div slot="content">Content goes here...</div>
-  </paper-scroll-header-panel>
-</body>
-```
-
-or, if you would prefer to do it in CSS, just give `html`, `body`, and `paper-scroll-header-panel` a height of 100%:
-
-```css
-html, body {
-  height: 100%;
-  margin: 0;
-}
-paper-scroll-header-panel {
-  height: 100%;
-}
-```
-
 `paper-scroll-header-panel` works well with `paper-toolbar` but can use any element
@@ -92,10 +50,86 @@ that represents a header by adding a `paper-header` class to it.
 
-### Changes in 2.0
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-scroll-header-panel),
+  [Demo](https://www.webcomponents.org/element/@polymer/paper-scroll-header-panel/demo/demo/index.html).
 
-Distribution is now done with `slot="header"` and `slot="content"` attributes (previously, `paper-toolbar` or another element with the `.paper-header` class would be distributed as the header, and other elements would be distributed as the content):
+## Usage
 
+### Installation
+```
+npm install --save @polymer/paper-scroll-header-panel
+```
+
+### In an html file
+```html
+<html>
+  <head>
+    <script type="module">
+      import '@polymer/paper-scroll-header-panel/paper-scroll-header-panel.js';
+      import '@polymer/paper-toolbar/paper-toolbar.js';
+    </script>
+    <style>
+      html, body {
+        margin: 0;
+      }
+      paper-scroll-header-panel {
+        height: 100vh;
+      }
+    </style>
+  </head>
+  <body>
     <paper-scroll-header-panel>
-      <div class="paper-header" slot="header">Header</div>
+      <paper-toolbar slot="header">
+        <div>Hello World!</div>
+      </paper-toolbar>
       <div slot="content">Content goes here...</div>
     </paper-scroll-header-panel>
-    
+  </body>
+</html>
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-scroll-header-panel/paper-scroll-header-panel.js';
+import '@polymer/paper-toolbar/paper-toolbar.js';
+
+class SampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        paper-scroll-header-panel {
+          height: 100vh;
+        }
+      </style>
+      <paper-scroll-header-panel>
+        <paper-toolbar slot="header">
+          <div>Hello World!</div>
+        </paper-toolbar>
+        <div slot="content">Content goes here...</div>
+      </paper-scroll-header-panel>
+    `;
+  }
+}
+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/paper-scroll-header-panel
+cd paper-scroll-header-panel
+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

Number of lines in readme file

133

increased by34.34%

Worsened metrics

Total package byte prevSize

365241

decreased by-6.15%

Dev dependency count

13

increased by8.33%

Number of package files

23

decreased by-28.12%

Lines of code

621

decreased by-5.48%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@polymer/iron-resizable-behavior@^3.0.0-pre.20