@polymer/iron-overlay-behavior
Advanced tools
Comparing version 3.0.0-pre.12 to 3.0.0-pre.13
@@ -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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
194900
2162
9
+ Added@polymer/iron-a11y-keys-behavior@3.0.1(transitive)
+ Added@polymer/iron-fit-behavior@3.1.0(transitive)
+ Added@polymer/iron-resizable-behavior@3.0.1(transitive)
+ Added@polymer/polymer@3.5.1(transitive)
- Removed@polymer/iron-a11y-keys-behavior@3.0.0-pre.12(transitive)
- Removed@polymer/iron-fit-behavior@3.0.0-pre.12(transitive)
- Removed@polymer/iron-resizable-behavior@3.0.0-pre.12(transitive)
- Removed@polymer/polymer@3.0.0-pre.12(transitive)
- Removed@webcomponents/webcomponentsjs@1.3.3(transitive)