Socket
Socket
Sign inDemoInstall

@polymer/iron-overlay-behavior

Package Overview
Dependencies
Maintainers
9
Versions
35
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

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

iron-focusables-helper.d.ts
iron-overlay-backdrop.d.ts
iron-overlay-behavior.d.ts
iron-overlay-manager.d.ts
iron-scroll-manager.d.ts

18

demo/simple-overlay.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 { IronOverlayBehavior } from '../iron-overlay-behavior.js';
import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import {Polymer} from '@polymer/polymer/lib/legacy/polymer-fn.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
import {IronOverlayBehavior} from '../iron-overlay-behavior.js';
Polymer({

@@ -17,0 +19,0 @@ _template: html`

13

iron-focusables-helper.js
/**
@license
Copyright (c) 2016 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 { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';

@@ -14,0 +15,0 @@ var p = Element.prototype;

35

iron-overlay-backdrop.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 {Polymer} 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';
/*
`iron-overlay-backdrop` is a backdrop used by `Polymer.IronOverlayBehavior`. It should be a
singleton.
`iron-overlay-backdrop` is a backdrop used by `Polymer.IronOverlayBehavior`. It
should be a singleton.

@@ -20,17 +27,7 @@ ### Styling

-------------------------------------------|------------------------|---------
`--iron-overlay-backdrop-background-color` | Backdrop background color | #000
`--iron-overlay-backdrop-opacity` | Backdrop opacity | 0.6
`--iron-overlay-backdrop-background-color` | Backdrop background color | #000
`--iron-overlay-backdrop-opacity` | Backdrop opacity | 0.6
`--iron-overlay-backdrop` | Mixin applied to `iron-overlay-backdrop`. | {}
`--iron-overlay-backdrop-opened` | Mixin applied to `iron-overlay-backdrop` when it is displayed | {}
*/
/*
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 { Polymer } 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';
Polymer({

@@ -37,0 +34,0 @@ _template: html`

81

iron-overlay-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 { IronFitBehavior } from '@polymer/iron-fit-behavior/iron-fit-behavior.js';
import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import { IronOverlayManager } from './iron-overlay-manager.js';
import { removeScrollLock, pushScrollLock } from './iron-scroll-manager.js';
import { IronFocusablesHelper } from './iron-focusables-helper.js';
import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
import { useShadow } from '@polymer/polymer/lib/utils/settings.js';
import {IronFitBehavior} from '@polymer/iron-fit-behavior/iron-fit-behavior.js';
import {IronResizableBehavior} from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
import {useShadow} from '@polymer/polymer/lib/utils/settings.js';
import {IronFocusablesHelper} from './iron-focusables-helper.js';
import {IronOverlayManager} from './iron-overlay-manager.js';
import {pushScrollLock, removeScrollLock} from './iron-scroll-manager.js';
/** @polymerBehavior */

@@ -124,3 +126,3 @@ export const IronOverlayBehaviorImpl = {

* @private
* @type {!Polymer.IronOverlayManagerClass}
* @type {!IronOverlayManagerClass}
*/

@@ -159,4 +161,3 @@ _manager: {

get _focusNode() {
return this._focusedChild ||
dom(this).querySelector('[autofocus]') || this;
return this._focusedChild || dom(this).querySelector('[autofocus]') || this;
},

@@ -757,6 +758,6 @@

/**
Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or
shown, and displays on top of other content. It includes an optional backdrop,
and can be used to implement a variety of UI controls including dialogs and drop
downs. Multiple overlays may be displayed at once.
Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden
or shown, and displays on top of other content. It includes an optional
backdrop, and can be used to implement a variety of UI controls including
dialogs and drop downs. Multiple overlays may be displayed at once.

@@ -770,10 +771,11 @@ See the [demo source

An overlay may be hidden by closing or canceling. The difference between close
and cancel is user intent. Closing generally implies that the user acknowledged
the content on the overlay. By default, it will cancel whenever the user taps
outside it or presses the escape key. This behavior is configurable with the
`no-cancel-on-esc-key` and the `no-cancel-on-outside-click` properties.
`close()` should be called explicitly by the implementer when the user interacts
with a control in the overlay element. When the dialog is canceled, the overlay
fires an 'iron-overlay-canceled' event. Call `preventDefault` on this event to
prevent the overlay from closing.
and cancel is user intent. Closing generally implies that the user
acknowledged the content on the overlay. By default, it will cancel whenever
the user taps outside it or presses the escape key. This behavior is
configurable with the `no-cancel-on-esc-key` and the
`no-cancel-on-outside-click` properties. `close()` should be called explicitly
by the implementer when the user interacts with a control in the overlay
element. When the dialog is canceled, the overlay fires an
'iron-overlay-canceled' event. Call `preventDefault` on this event to prevent
the overlay from closing.

@@ -788,8 +790,8 @@ ### Positioning

Set the `with-backdrop` attribute to display a backdrop behind the overlay. The
backdrop is appended to `<body>` and is of type `<iron-overlay-backdrop>`. See
its doc page for styling options.
Set the `with-backdrop` attribute to display a backdrop behind the overlay.
The backdrop is appended to `<body>` and is of type `<iron-overlay-backdrop>`.
See its doc page for styling options.
In addition, `with-backdrop` will wrap the focus within the content in the light
DOM. Override the [`_focusableNodes`
In addition, `with-backdrop` will wrap the focus within the content in the
light DOM. Override the [`_focusableNodes`
getter](#Polymer.IronOverlayBehavior:property-_focusableNodes) to achieve a

@@ -800,6 +802,6 @@ different behavior.

The element is styled to appear on top of other content by setting its `z-index`
property. You must ensure no element has a stacking context with a higher
`z-index` than its parent stacking context. You should place this element as a
child of `<body>` whenever possible.
The element is styled to appear on top of other content by setting its
`z-index` property. You must ensure no element has a stacking context with a
higher `z-index` than its parent stacking context. You should place this
element as a child of `<body>` whenever possible.

@@ -809,7 +811,4 @@ @demo demo/index.html

*/
export const IronOverlayBehavior = [
IronFitBehavior,
IronResizableBehavior,
IronOverlayBehaviorImpl
];
export const IronOverlayBehavior =
[IronFitBehavior, IronResizableBehavior, IronOverlayBehaviorImpl];

@@ -816,0 +815,0 @@ /**

20

iron-overlay-manager.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 './iron-overlay-backdrop.js';
import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
import './iron-overlay-backdrop.js';
import {IronA11yKeysBehavior} from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
import * as gestures from '@polymer/polymer/lib/utils/gestures.js';
import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';

@@ -369,4 +370,3 @@ /**

overlay._onCaptureEsc(event);
} else if (IronA11yKeysBehavior.keyboardEventMatchesKeys(
event, 'tab')) {
} else if (IronA11yKeysBehavior.keyboardEventMatchesKeys(event, 'tab')) {
overlay._onCaptureTab(event);

@@ -373,0 +373,0 @@ }

37

iron-scroll-manager.js
/**
@license
Copyright (c) 2017 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 { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
import {dom} from '@polymer/polymer/lib/legacy/polymer.dom.js';
/**

@@ -61,3 +62,3 @@ * Used to calculate the scroll direction during touch events.

*/
export { currentLockingElement };
export {currentLockingElement};

@@ -121,4 +122,3 @@ /**

_lockingElements.push(element);
currentLockingElement =
_lockingElements[_lockingElements.length - 1];
currentLockingElement = _lockingElements[_lockingElements.length - 1];

@@ -146,4 +146,3 @@ _lockedElementCache = [];

_lockingElements.splice(index, 1);
currentLockingElement =
_lockingElements[_lockingElements.length - 1];
currentLockingElement = _lockingElements[_lockingElements.length - 1];

@@ -190,4 +189,3 @@ _lockedElementCache = [];

++contentIndex) {
distributedNodes =
dom(contentElements[contentIndex]).getDistributedNodes();
distributedNodes = dom(contentElements[contentIndex]).getDistributedNodes();

@@ -225,3 +223,3 @@ for (nodeIndex = 0; nodeIndex < distributedNodes.length; ++nodeIndex) {

*/
export { _boundScrollHandler };
export {_boundScrollHandler};

@@ -235,5 +233,3 @@ export function _lockScrollInteractions() {

document.addEventListener(
scrollEvents[i],
_boundScrollHandler,
{capture: true, passive: false});
scrollEvents[i], _boundScrollHandler, {capture: true, passive: false});
}

@@ -247,5 +243,3 @@ }

document.removeEventListener(
scrollEvents[i],
_boundScrollHandler,
{capture: true, passive: false});
scrollEvents[i], _boundScrollHandler, {capture: true, passive: false});
}

@@ -283,4 +277,3 @@ }

// Prevent if there is no child that can scroll.
return !_getScrollingNode(
lastScrollableNodes, info.deltaX, info.deltaY);
return !_getScrollingNode(lastScrollableNodes, info.deltaX, info.deltaY);
}

@@ -287,0 +280,0 @@

32

package.json

@@ -16,32 +16,24 @@ {

"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",
"@polymer/iron-demo-helpers": "^3.0.0-pre.21",
"@polymer/iron-flex-layout": "^3.0.0-pre.21",
"@polymer/iron-test-helpers": "^3.0.0-pre.21",
"@polymer/iron-demo-helpers": "^3.0.0-pre.20",
"@polymer/iron-flex-layout": "^3.0.0-pre.20",
"@polymer/iron-test-helpers": "^3.0.0-pre.20",
"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-overlay-behavior.js",
"author": "The Polymer Authors",
"dependencies": {
"@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.21",
"@polymer/iron-fit-behavior": "^3.0.0-pre.21",
"@polymer/iron-resizable-behavior": "^3.0.0-pre.21",
"@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.20",
"@polymer/iron-fit-behavior": "^3.0.0-pre.20",
"@polymer/iron-resizable-behavior": "^3.0.0-pre.20",
"@polymer/polymer": "^3.0.0"
}
}

68

README.md

@@ -0,20 +1,14 @@

[![Published on NPM](https://img.shields.io/npm/v/@polymer/iron-overlay-behavior.svg)](https://www.npmjs.com/package/@polymer/iron-overlay-behavior)
[![Build status](https://travis-ci.org/PolymerElements/iron-overlay-behavior.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-overlay-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/PolymerElements/iron-overlay-behavior)
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/iron-overlay-behavior)
_[Demo and API docs](https://elements.polymer-project.org/elements/iron-overlay-behavior)_
## IronOverlayBehavior
## Polymer.IronOverlayBehavior
Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or shown, and displays
Use `IronOverlayBehavior` to implement an element that can be hidden or shown, and displays
on top of other content. It includes an optional backdrop, and can be used to implement a variety
of UI controls including dialogs and drop downs. Multiple overlays may be displayed at once.
See the [demo source code](https://github.com/PolymerElements/iron-overlay-behavior/blob/master/demo/simple-overlay.html)
See the [demo source code](https://github.com/PolymerElements/iron-overlay-behavior/blob/master/demo/simple-overlay.js)
for an example.
### Changes in 2.0
- Focus wrapping is not guaranteed to work for elements with `tabindex > 0`, see more details [here](https://github.com/PolymerElements/iron-overlay-behavior/pull/241).
Consider overriding [`_focusableNodes`](http://jsbin.com/siwutox/1/edit) or using the [Blocking Elements polyfill](https://github.com/PolymerLabs/blockingElements).
### Closing and canceling

@@ -67,2 +61,54 @@

See: [Documentation](https://www.webcomponents.org/element/@polymer/iron-overlay-behavior),
[Demo](https://www.webcomponents.org/element/@polymer/iron-overlay-behavior/demo/demo/index.html).
## Usage
### Installation
```
npm install --save @polymer/iron-overlay-behavior
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
import {IronOverlayBehavior} from '@polymer/iron-overlay-behavior/iron-overlay-behavior.js';
class SampleElement extends mixinBehaviors(IronOverlayBehavior, PolymerElement) {
static get template() {
return html`
<style>
:host {
background: white;
}
</style>
<p>Overlay Content</p>
`;
}
}
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-overlay-behavior
cd iron-overlay-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
```
.github/CODEOWNERS
.github/ISSUE_TEMPLATE.md
.travis.yml
index.html
test/index.html
test/iron-focusables-helper.html
test/iron-overlay-backdrop.html
test/iron-overlay-behavior-scroll-actions.html
test/iron-overlay-behavior.html
test/iron-scroll-manager.html
test/test-buttons-wrapper.js
test/test-buttons.js
test/test-menu-button.js
test/test-overlay.js
test/test-overlay2.js
test/test-scrollable.js
test/x-scrollable-element.js
wct.conf.json
demo/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc