Socket
Socket
Sign inDemoInstall

@polymer/iron-overlay-behavior

Package Overview
Dependencies
Maintainers
1
Versions
35
Alerts
File Explorer

Advanced tools

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.12 to 3.0.0-pre.13

21

demo/simple-overlay.js

@@ -1,5 +0,15 @@

import '@polymer/polymer/polymer-legacy.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 { 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/lib/legacy/polymer-fn.js';
import { html } from '../../polymer/lib/utils/html-tag.js';

@@ -20,6 +30,3 @@ Polymer({

is: 'simple-overlay',
behaviors: [
IronOverlayBehavior
]
behaviors: [IronOverlayBehavior]
});

@@ -1,7 +0,17 @@

import '@polymer/polymer/polymer-legacy.js';
import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.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
*/
import '../polymer/polymer-legacy.js';
import { dom } from '../polymer/lib/legacy/polymer.dom.js';
var p = Element.prototype;
var matches = p.matches || p.matchesSelector || p.mozMatchesSelector ||
p.msMatchesSelector || p.oMatchesSelector || p.webkitMatchesSelector;
p.msMatchesSelector || p.oMatchesSelector || p.webkitMatchesSelector;

@@ -36,8 +46,8 @@ export const IronFocusablesHelper = {

// There isn't a definite list, it's up to the browser. The only
// standard we have is DOM Level 2 HTML https://www.w3.org/TR/DOM-Level-2-HTML/html.html,
// according to which the only elements that have a focus() method are
// HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement and
// HTMLAnchorElement. This notably omits HTMLButtonElement and
// HTMLAreaElement.
// Referring to these tests with tabbables in different browsers
// standard we have is DOM Level 2 HTML
// https://www.w3.org/TR/DOM-Level-2-HTML/html.html, according to which the
// only elements that have a focus() method are HTMLInputElement,
// HTMLSelectElement, HTMLTextAreaElement and HTMLAnchorElement. This
// notably omits HTMLButtonElement and HTMLAreaElement. Referring to these
// tests with tabbables in different browsers
// http://allyjs.io/data-tables/focusable.html

@@ -50,4 +60,4 @@

// Elements that can be focused even if they have [disabled] attribute.
return matches.call(element,
'a[href], area[href], iframe, [tabindex], [contentEditable]');
return matches.call(
element, 'a[href], area[href], iframe, [tabindex], [contentEditable]');
},

@@ -63,4 +73,4 @@

return this.isFocusable(element) &&
matches.call(element, ':not([tabindex="-1"])') &&
this._isVisible(element);
matches.call(element, ':not([tabindex="-1"])') &&
this._isVisible(element);
},

@@ -67,0 +77,0 @@

@@ -1,6 +0,35 @@

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';
/**
@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
*/
/*
`iron-overlay-backdrop` is a backdrop used by `Polymer.IronOverlayBehavior`. It should be a
singleton.
### Styling
The following custom properties and mixins are available for styling.
Custom property | Description | Default
-------------------------------------------|------------------------|---------
`--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-legacy.js';
import { Polymer } from '../polymer/lib/legacy/polymer-fn.js';
import { html } from '../polymer/lib/utils/html-tag.js';
import { dom } from '../polymer/lib/legacy/polymer.dom.js';
Polymer({

@@ -48,5 +77,3 @@ _template: html`

listeners: {
'transitionend': '_onTransitionend'
},
listeners: {'transitionend': '_onTransitionend'},

@@ -53,0 +80,0 @@ created: function() {

@@ -1,10 +0,21 @@

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';
/**
@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 { IronFitBehavior } from '../iron-fit-behavior/iron-fit-behavior.js';
import { IronResizableBehavior } from '../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 { dom } from '../polymer/lib/legacy/polymer.dom.js';
import { useShadow } from '../polymer/lib/utils/settings.js';
/** @polymerBehavior */
export const IronOverlayBehaviorImpl = {

@@ -17,8 +28,4 @@

*/
opened: {
observer: '_openedChanged',
type: Boolean,
value: false,
notify: true
},
opened:
{observer: '_openedChanged', type: Boolean, value: false, notify: true},

@@ -39,6 +46,3 @@ /**

*/
withBackdrop: {
observer: '_withBackdropChanged',
type: Boolean
},
withBackdrop: {observer: '_withBackdropChanged', type: Boolean},

@@ -49,6 +53,3 @@ /**

*/
noAutoFocus: {
type: Boolean,
value: false
},
noAutoFocus: {type: Boolean, value: false},

@@ -58,6 +59,3 @@ /**

*/
noCancelOnEscKey: {
type: Boolean,
value: false
},
noCancelOnEscKey: {type: Boolean, value: false},

@@ -67,11 +65,9 @@ /**

*/
noCancelOnOutsideClick: {
type: Boolean,
value: false
},
noCancelOnOutsideClick: {type: Boolean, value: false},
/**
* Contains the reason(s) this overlay was last closed (see `iron-overlay-closed`).
* `IronOverlayBehavior` provides the `canceled` reason; implementers of the
* behavior can provide other reasons in addition to `canceled`.
* Contains the reason(s) this overlay was last closed (see
* `iron-overlay-closed`). `IronOverlayBehavior` provides the `canceled`
* reason; implementers of the behavior can provide other reasons in
* addition to `canceled`.
*/

@@ -87,6 +83,3 @@ closingReason: {

*/
restoreFocusOnClose: {
type: Boolean,
value: false
},
restoreFocusOnClose: {type: Boolean, value: false},

@@ -98,5 +91,3 @@ /**

*/
allowClickThrough: {
type: Boolean
},
allowClickThrough: {type: Boolean},

@@ -106,16 +97,11 @@ /**

*/
alwaysOnTop: {
type: Boolean
},
alwaysOnTop: {type: Boolean},
/**
* Determines which action to perform when scroll outside an opened overlay happens.
* Possible values:
* lock - blocks scrolling from happening,
* refit - computes the new position on the overlay
* cancel - causes the overlay to close
* Determines which action to perform when scroll outside an opened overlay
* happens. Possible values: lock - blocks scrolling from happening, refit -
* computes the new position on the overlay cancel - causes the overlay to
* close
*/
scrollAction: {
type: String
},
scrollAction: {type: String},

@@ -127,6 +113,3 @@ /**

*/
_manager: {
type: Object,
value: IronOverlayManager
},
_manager: {type: Object, value: IronOverlayManager},

@@ -137,15 +120,9 @@ /**

*/
_focusedChild: {
type: Object
}
_focusedChild: {type: Object}
},
listeners: {
'iron-resize': '_onIronResize'
},
listeners: {'iron-resize': '_onIronResize'},
observers: [
'__updateScrollObservers(isAttached, opened, scrollAction)'
],
observers: ['__updateScrollObservers(isAttached, opened, scrollAction)'],

@@ -165,12 +142,14 @@ /**

get _focusNode() {
return this._focusedChild || dom(this).querySelector('[autofocus]') || this;
return this._focusedChild ||
dom(this).querySelector('[autofocus]') || this;
},
/**
* Array of nodes that can receive focus (overlay included), ordered by `tabindex`.
* This is used to retrieve which is the first and last focusable nodes in order
* to wrap the focus for overlays `with-backdrop`.
* Array of nodes that can receive focus (overlay included), ordered by
* `tabindex`. This is used to retrieve which is the first and last focusable
* nodes in order to wrap the focus for overlays `with-backdrop`.
*
* If you know what is your content (specifically the first and last focusable children),
* you can override this method to return only `[firstFocusable, lastFocusable];`
* If you know what is your content (specifically the first and last focusable
* children), you can override this method to return only `[firstFocusable,
* lastFocusable];`
* @return {!Array<!Node>}

@@ -187,6 +166,8 @@ * @protected

ready: function() {
// Used to skip calls to notifyResize and refit while the overlay is animating.
// Used to skip calls to notifyResize and refit while the overlay is
// animating.
this.__isAnimating = false;
// with-backdrop needs tabindex to be set in order to trap the focus.
// If it is not set, IronOverlayBehavior will set it, and remove it if with-backdrop = false.
// If it is not set, IronOverlayBehavior will set it, and remove it if
// with-backdrop = false.
this.__shouldRemoveTabIndex = false;

@@ -268,3 +249,4 @@ // Used for wrapping the focus on TAB / Shift+TAB.

cancel: function(event) {
var cancelEvent = this.fire('iron-overlay-canceled', event, {cancelable: true});
var cancelEvent =
this.fire('iron-overlay-canceled', event, {cancelable: true});
if (cancelEvent.defaultPrevented) {

@@ -279,4 +261,4 @@ return;

/**
* Invalidates the cached tabbable nodes. To be called when any of the focusable
* content changes (e.g. a button is disabled).
* Invalidates the cached tabbable nodes. To be called when any of the
* focusable content changes (e.g. a button is disabled).
*/

@@ -347,4 +329,4 @@ invalidateTabbables: function() {

// Needed to calculate the size of the overlay so that transitions on its size
// will have the correct starting points.
// Needed to calculate the size of the overlay so that transitions on its
// size will have the correct starting points.
this._preparePositioning();

@@ -363,3 +345,4 @@ this.refit();

/**
* Tasks which cause the overlay to actually open; typically play an animation.
* Tasks which cause the overlay to actually open; typically play an
* animation.
* @protected

@@ -372,3 +355,4 @@ */

/**
* Tasks which cause the overlay to actually close; typically play an animation.
* Tasks which cause the overlay to actually close; typically play an
* animation.
* @protected

@@ -381,3 +365,4 @@ */

/**
* Tasks to be performed at the end of open action. Will fire `iron-overlay-opened`.
* Tasks to be performed at the end of open action. Will fire
* `iron-overlay-opened`.
* @protected

@@ -393,3 +378,4 @@ */

/**
* Tasks to be performed at the end of close action. Will fire `iron-overlay-closed`.
* Tasks to be performed at the end of close action. Will fire
* `iron-overlay-closed`.
* @protected

@@ -437,6 +423,3 @@ */

}
}
else {
this._focusNode.blur();
this._focusedChild = null;
} else {
// Restore focus.

@@ -451,3 +434,3 @@ if (this.restoreFocusOnClose && this.__restoreFocusNode) {

if (activeElement === document.body ||
dom(this).deepContains(activeElement)) {
dom(this).deepContains(activeElement)) {
this.__restoreFocusNode.focus();

@@ -457,9 +440,4 @@ }

this.__restoreFocusNode = null;
// If many overlays get closed at the same time, one of them would still
// be the currentOverlay even if already closed, and would call _applyFocus
// infinitely, so we check for this not to be the current overlay.
var currentOverlay = this._manager.currentOverlay();
if (currentOverlay && this !== currentOverlay) {
currentOverlay._applyFocus();
}
this._focusNode.blur();
this._focusedChild = null;
}

@@ -480,7 +458,8 @@ },

/**
* Keeps track of the focused child. If withBackdrop, traps focus within overlay.
* Keeps track of the focused child. If withBackdrop, traps focus within
* overlay.
* @param {!Event} event
* @protected
*/
_onCaptureFocus: function (event) {
_onCaptureFocus: function(event) {
if (!this.withBackdrop) {

@@ -523,4 +502,6 @@ return;

var shift = event.shiftKey;
var nodeToCheck = shift ? this.__firstFocusableNode : this.__lastFocusableNode;
var nodeToSet = shift ? this.__lastFocusableNode : this.__firstFocusableNode;
var nodeToCheck =
shift ? this.__firstFocusableNode : this.__lastFocusableNode;
var nodeToSet =
shift ? this.__lastFocusableNode : this.__firstFocusableNode;
var shouldWrap = false;

@@ -704,5 +685,4 @@ if (nodeToCheck === nodeToSet) {

__isValidScrollAction: function(scrollAction) {
return scrollAction === 'lock' ||
scrollAction === 'refit' ||
scrollAction === 'cancel';
return scrollAction === 'lock' || scrollAction === 'refit' ||
scrollAction === 'cancel';
},

@@ -723,5 +703,5 @@

case 'lock':
// NOTE: scrolling might happen if a scroll event is not cancellable, or if
// user pressed keys that cause scrolling (they're not prevented in order not to
// break a11y features like navigate with arrow keys).
// NOTE: scrolling might happen if a scroll event is not cancellable, or
// if user pressed keys that cause scrolling (they're not prevented in
// order not to break a11y features like navigate with arrow keys).
this.__restoreScrollPosition();

@@ -748,4 +728,6 @@ break;

// Since we don't know if is the body or html, get max.
this.__scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
this.__scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
this.__scrollTop =
Math.max(document.documentElement.scrollTop, document.body.scrollTop);
this.__scrollLeft = Math.max(
document.documentElement.scrollLeft, document.body.scrollLeft);
}

@@ -764,4 +746,6 @@ },

// Since we don't know if is the body or html, set both.
document.documentElement.scrollTop = document.body.scrollTop = this.__scrollTop;
document.documentElement.scrollLeft = document.body.scrollLeft = this.__scrollLeft;
document.documentElement.scrollTop = document.body.scrollTop =
this.__scrollTop;
document.documentElement.scrollLeft = document.body.scrollLeft =
this.__scrollLeft;
}

@@ -772,2 +756,76 @@ },

export const IronOverlayBehavior = [IronFitBehavior, IronResizableBehavior, IronOverlayBehaviorImpl];
/**
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.
See the [demo source
code](https://github.com/PolymerElements/iron-overlay-behavior/blob/master/demo/simple-overlay.html)
for an example.
### Closing and canceling
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.
### Positioning
By default the element is sized and positioned to fit and centered inside the
window. You can position and size it manually using CSS. See
`Polymer.IronFitBehavior`.
### Backdrop
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`
getter](#Polymer.IronOverlayBehavior:property-_focusableNodes) to achieve a
different behavior.
### Limitations
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.
@demo demo/index.html
@polymerBehavior
*/
export const IronOverlayBehavior = [
IronFitBehavior,
IronResizableBehavior,
IronOverlayBehaviorImpl
];
/**
* Fired after the overlay opens.
* @event iron-overlay-opened
*/
/**
* Fired when the overlay is canceled, but before it is closed.
* @event iron-overlay-canceled
* @param {Event} event The closing of the overlay can be prevented
* by calling `event.preventDefault()`. The `event.detail` is the original event
* that originated the canceling (e.g. ESC keyboard event or click event outside
* the overlay).
*/
/**
* Fired after the overlay closes.
* @event iron-overlay-closed
* @param {Event} event The `event.detail` is the `closingReason` property
* (contains `canceled`, whether the overlay was canceled).
*/

@@ -1,7 +0,22 @@

import '@polymer/polymer/polymer-legacy.js';
import { IronA11yKeysBehavior } from '@polymer/iron-a11y-keys-behavior/iron-a11y-keys-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
*/
import '../polymer/polymer-legacy.js';
import { IronA11yKeysBehavior } from '../iron-a11y-keys-behavior/iron-a11y-keys-behavior.js';
import './iron-overlay-backdrop.js';
import * as gestures from '@polymer/polymer/lib/utils/gestures.js';
import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
import * as gestures from '../polymer/lib/utils/gestures.js';
import { dom } from '../polymer/lib/legacy/polymer.dom.js';
/**
* @struct
* @constructor
* @private
*/
export const IronOverlayManagerClass = function() {

@@ -87,3 +102,4 @@ /**

// Ensure always-on-top overlay stays on top.
if (currentOverlay && this._shouldBeBehindOverlay(overlay, currentOverlay)) {
if (currentOverlay &&
this._shouldBeBehindOverlay(overlay, currentOverlay)) {
lastI--;

@@ -110,4 +126,4 @@ }

/**
* Adds the overlay and updates its z-index if it's opened, or removes it if it's closed.
* Also updates the backdrop z-index.
* Adds the overlay and updates its z-index if it's opened, or removes it if
* it's closed. Also updates the backdrop z-index.
* @param {!Element} overlay

@@ -141,3 +157,4 @@ */

// Ensure always-on-top overlay stays on top.
if (currentOverlay && this._shouldBeBehindOverlay(overlay, currentOverlay)) {
if (currentOverlay &&
this._shouldBeBehindOverlay(overlay, currentOverlay)) {
// This bumps the z-index of +2.

@@ -265,3 +282,4 @@ this._applyOverlayZ(currentOverlay, minimumZ);

if (overlay) {
var z1 = Number(overlay.style.zIndex || window.getComputedStyle(overlay).zIndex);
var z1 = Number(
overlay.style.zIndex || window.getComputedStyle(overlay).zIndex);
// Check if is a number

@@ -317,7 +335,9 @@ // Number.isNaN not supported in IE 10+

var i = this._overlays.length - 1;
if (i === -1) return;
if (i === -1)
return;
var path = /** @type {!Array<!EventTarget>} */ (dom(event).path);
var overlay;
// Check if clicked outside of overlay.
while ((overlay = /** @type {?} */ (this._overlays[i])) && this._overlayInPath(path) !== overlay) {
while ((overlay = /** @type {?} */ (this._overlays[i])) &&
this._overlayInPath(path) !== overlay) {
overlay._onCaptureClick(event);

@@ -354,3 +374,4 @@ if (overlay.allowClickThrough) {

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

@@ -357,0 +378,0 @@ }

@@ -1,11 +0,18 @@

import '@polymer/polymer/polymer-legacy.js';
import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.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
*/
import '../polymer/polymer-legacy.js';
import { dom } from '../polymer/lib/legacy/polymer.dom.js';
/**
* Used to calculate the scroll direction during touch events.
* @type {!Object}
*/
var lastTouchPosition = {
pageX: 0,
pageY: 0
};
var lastTouchPosition = {pageX: 0, pageY: 0};
/**

@@ -35,2 +42,18 @@ * Used to avoid computing event.path and filter scrollable nodes (better perf).

/**
* The IronScrollManager is intended to provide a central source
* of authority and control over which elements in a document are currently
* allowed to scroll.
*
*/
`TODO(modulizer): A namespace named Polymer.IronScrollManager was
declared here. The surrounding comments should be reviewed,
and this string can then be deleted`;
/**
* The current element that defines the DOM boundaries of the
* scroll lock. This is always the most recently locking element.
*
* @return {!Node|undefined}
*/
export function currentLockingElement() {

@@ -40,2 +63,9 @@ return _lockingElements[_lockingElements.length - 1];

/**
* Returns true if the provided element is "scroll locked", which is to
* say that it cannot be scrolled via pointer or keyboard interactions.
*
* @param {!HTMLElement} element An HTML element instance which may or may
* not be scroll locked.
*/
export function elementIsScrollLocked(element) {

@@ -58,4 +88,4 @@ var currentLockingElement = currentLockingElement;

scrollLocked = !!currentLockingElement &&
currentLockingElement !== element &&
!_composedTreeContains(currentLockingElement, element);
currentLockingElement !== element &&
!_composedTreeContains(currentLockingElement, element);

@@ -71,2 +101,12 @@ if (scrollLocked) {

/**
* Push an element onto the current scroll lock stack. The most recently
* pushed element and its children will be considered scrollable. All
* other elements will not be scrollable.
*
* Scroll locking is implemented as a stack so that cases such as
* dropdowns within dropdowns are handled well.
*
* @param {!HTMLElement} element The element that should lock scroll.
*/
export function pushScrollLock(element) {

@@ -88,2 +128,11 @@ // Prevent pushing the same element twice

/**
* Remove an element from the scroll lock stack. The element being
* removed does not need to be the most recently pushed element. However,
* the scroll lock constraints only change when the most recently pushed
* element is removed.
*
* @param {!HTMLElement} element The element to remove from the scroll
* lock stack.
*/
export function removeScrollLock(element) {

@@ -107,4 +156,4 @@ var index = _lockingElements.indexOf(element);

export const _lockingElements = [];
export const _lockedElementCache = null;
export const _unlockedElementCache = null;
export let _lockedElementCache = null;
export let _unlockedElementCache = null;

@@ -137,9 +186,11 @@ export function _hasCachedLockedElement(element) {

for (contentIndex = 0; contentIndex < contentElements.length; ++contentIndex) {
for (contentIndex = 0; contentIndex < contentElements.length;
++contentIndex) {
distributedNodes =
dom(contentElements[contentIndex]).getDistributedNodes();
distributedNodes = dom(contentElements[contentIndex]).getDistributedNodes();
for (nodeIndex = 0; nodeIndex < distributedNodes.length; ++nodeIndex) {
// Polymer 2.x returns slot.assignedNodes which can contain text nodes.
if (distributedNodes[nodeIndex].nodeType !== Node.ELEMENT_NODE) continue;
if (distributedNodes[nodeIndex].nodeType !== Node.ELEMENT_NODE)
continue;

@@ -169,12 +220,17 @@ if (_composedTreeContains(distributedNodes[nodeIndex], child)) {

/**
* @private
*/
export { _boundScrollHandler };
export function _lockScrollInteractions() {
_boundScrollHandler = _boundScrollHandler ||
_scrollInteractionHandler.bind(Polymer.IronScrollManager);
_boundScrollHandler =
_boundScrollHandler || _scrollInteractionHandler.bind(Polymer.IronScrollManager);
for (var i = 0, l = scrollEvents.length; i < l; i++) {
// NOTE: browsers that don't support objects as third arg will
// interpret it as boolean, hence useCapture = true in this case.
document.addEventListener(scrollEvents[i], _boundScrollHandler, {
capture: true,
passive: false
});
// interpret it as boolean, hence useCapture = true in this case.
document.addEventListener(
scrollEvents[i],
_boundScrollHandler,
{capture: true, passive: false});
}

@@ -187,11 +243,18 @@ }

// interpret it as boolean, hence useCapture = true in this case.
document.removeEventListener(scrollEvents[i], _boundScrollHandler, {
capture: true,
passive: false
});
document.removeEventListener(
scrollEvents[i],
_boundScrollHandler,
{capture: true, passive: false});
}
}
/**
* Returns true if the event causes scroll outside the current locking
* element, e.g. pointer/keyboard interactions, or scroll "leaking"
* outside the locking element when it is already at its scroll boundaries.
* @param {!Event} event
* @return {boolean}
* @private
*/
export function _shouldPreventScrolling(event) {
// Update if root target changed. For touch events, ensure we don't

@@ -217,5 +280,13 @@ // update during touchmove.

// Prevent if there is no child that can scroll.
return !_getScrollingNode(lastScrollableNodes, info.deltaX, info.deltaY);
return !_getScrollingNode(
lastScrollableNodes, info.deltaX, info.deltaY);
}
/**
* Returns an array of scrollable nodes up to the current locking element,
* which is included too if scrollable.
* @param {!Array<!Node>} nodes
* @return {!Array<!Node>} scrollables
* @private
*/
export function _getScrollableNodes(nodes) {

@@ -243,2 +314,11 @@ var scrollables = [];

/**
* Returns the node that is scrolling. If there is no scrolling,
* returns undefined.
* @param {!Array<!Node>} nodes
* @param {number} deltaX Scroll delta on the x-axis
* @param {number} deltaY Scroll delta on the y-axis
* @return {!Node|undefined}
* @private
*/
export function _getScrollingNode(nodes, deltaX, deltaY) {

@@ -257,8 +337,10 @@ // No scroll.

// delta < 0 is scroll up, delta > 0 is scroll down.
canScroll = deltaY < 0 ? node.scrollTop > 0 :
node.scrollTop < node.scrollHeight - node.clientHeight;
canScroll = deltaY < 0 ?
node.scrollTop > 0 :
node.scrollTop < node.scrollHeight - node.clientHeight;
} else {
// delta < 0 is scroll left, delta > 0 is scroll right.
canScroll = deltaX < 0 ? node.scrollLeft > 0 :
node.scrollLeft < node.scrollWidth - node.clientWidth;
canScroll = deltaX < 0 ?
node.scrollLeft > 0 :
node.scrollLeft < node.scrollWidth - node.clientWidth;
}

@@ -271,7 +353,13 @@ if (canScroll) {

/**
* Returns scroll `deltaX` and `deltaY`.
* @param {!Event} event The scroll event
* @return {{deltaX: number, deltaY: number}} Object containing the
* x-axis scroll delta (positive: scroll right, negative: scroll left,
* 0: no scroll), and the y-axis scroll delta (positive: scroll down,
* negative: scroll up, 0: no scroll).
* @private
*/
export function _getScrollInfo(event) {
var info = {
deltaX: event.deltaX,
deltaY: event.deltaY
};
var info = {deltaX: event.deltaX, deltaY: event.deltaY};
// Already available.

@@ -278,0 +366,0 @@ if ('deltaX' in event) {

@@ -35,2 +35,3 @@ {

"Polymer.IronScrollManager._scrollInteractionHandler": "_scrollInteractionHandler",
"Polymer.IronScrollManager._boundScrollHandler": "_boundScrollHandler",
"Polymer.IronScrollManager._lockScrollInteractions": "_lockScrollInteractions",

@@ -37,0 +38,0 @@ "Polymer.IronScrollManager._unlockScrollInteractions": "_unlockScrollInteractions",

@@ -18,13 +18,15 @@ {

"bower": "^1.8.0",
"@polymer/iron-component-page": "3.0.0-pre.12",
"@polymer/iron-demo-helpers": "3.0.0-pre.12",
"@polymer/iron-flex-layout": "3.0.0-pre.12",
"@polymer/iron-test-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",
"@polymer/iron-flex-layout": "^3.0.0-pre.13",
"@polymer/iron-test-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": {

@@ -39,7 +41,7 @@ "inherits": "2.0.3",

"dependencies": {
"@polymer/iron-a11y-keys-behavior": "3.0.0-pre.12",
"@polymer/iron-fit-behavior": "3.0.0-pre.12",
"@polymer/iron-resizable-behavior": "3.0.0-pre.12",
"@polymer/polymer": "3.0.0-pre.12"
"@polymer/iron-a11y-keys-behavior": "^3.0.0-pre.13",
"@polymer/iron-fit-behavior": "^3.0.0-pre.13",
"@polymer/iron-resizable-behavior": "^3.0.0-pre.13",
"@polymer/polymer": "^3.0.0-pre.13"
}
}

@@ -1,5 +0,1 @@

import '@polymer/polymer/polymer-legacy.js';
import './test-buttons.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 './test-buttons.js';
import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
import { html } from '../../polymer/lib/utils/html-tag.js';
Polymer({

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

@@ -1,4 +0,1 @@

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';
/**

@@ -13,2 +10,6 @@ @license

*/
import '../../polymer/polymer-legacy.js';
import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
import { html } from '../../polymer/lib/utils/html-tag.js';
Polymer({

@@ -15,0 +16,0 @@ _template: html`

@@ -1,5 +0,15 @@

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

@@ -6,0 +16,0 @@ _template: html`

@@ -1,5 +0,15 @@

import '@polymer/polymer/polymer-legacy.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 { IronOverlayBehavior, IronOverlayBehaviorImpl } 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/lib/legacy/polymer-fn.js';
import { html } from '../../polymer/lib/utils/html-tag.js';

@@ -32,18 +42,6 @@ Polymer({

is: 'test-overlay',
properties: {animated: {type: Boolean, reflectToAttribute: true}},
behaviors: [IronOverlayBehavior],
listeners: {'transitionend': '__onTransitionEnd'},
properties: {
animated: {
type: Boolean,
reflectToAttribute: true
}
},
behaviors: [
IronOverlayBehavior
],
listeners: {
'transitionend': '__onTransitionEnd'
},
_renderOpened: function() {

@@ -50,0 +48,0 @@ if (this.animated) {

@@ -1,5 +0,15 @@

import '@polymer/polymer/polymer-legacy.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 { 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/lib/legacy/polymer-fn.js';
import { html } from '../../polymer/lib/utils/html-tag.js';

@@ -22,7 +32,4 @@ Polymer({

is: 'test-overlay2',
behaviors: [IronOverlayBehavior],
behaviors: [
IronOverlayBehavior
],
get _focusableNodes() {

@@ -29,0 +36,0 @@ return [this.$.first, this.$.last];

@@ -1,6 +0,15 @@

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

@@ -7,0 +16,0 @@ _template: html`

@@ -1,4 +0,1 @@

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';
/**

@@ -13,2 +10,6 @@ @license

*/
import '../../polymer/polymer-legacy.js';
import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
import { html } from '../../polymer/lib/utils/html-tag.js';
Polymer({

@@ -15,0 +16,0 @@ _template: html`

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc