mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
parent
ffd37618d5
commit
ccf45da5f9
6 changed files with 274 additions and 214 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-overlay-behavior",
|
||||
"version": "1.4.3",
|
||||
"version": "1.5.0",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Provides a behavior for making an element an overlay",
|
||||
"private": true,
|
||||
|
@ -35,11 +35,11 @@
|
|||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
|
||||
"_release": "1.4.3",
|
||||
"_release": "1.5.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.4.3",
|
||||
"commit": "6b8662619fbd4e82c2cebce6a846425ff9fc610d"
|
||||
"tag": "v1.5.0",
|
||||
"commit": "700a82504db1c57757dbf4abd176954dcb74e6fb"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-overlay-behavior",
|
||||
"version": "1.4.3",
|
||||
"version": "1.5.0",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Provides a behavior for making an element an overlay",
|
||||
"private": true,
|
||||
|
|
|
@ -40,12 +40,14 @@ Custom property | Description | Default
|
|||
background-color: var(--iron-overlay-backdrop-background-color, #000);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
pointer-events: none;
|
||||
|
||||
@apply(--iron-overlay-backdrop);
|
||||
}
|
||||
|
||||
:host([opened]) {
|
||||
opacity: var(--iron-overlay-backdrop-opacity, 0.6);
|
||||
pointer-events: auto;
|
||||
|
||||
@apply(--iron-overlay-backdrop-opened);
|
||||
}
|
||||
|
@ -93,8 +95,6 @@ Custom property | Description | Default
|
|||
* Appends the backdrop to document body and sets its `z-index` to be below the latest overlay.
|
||||
*/
|
||||
prepare: function() {
|
||||
// Always update z-index
|
||||
this.style.zIndex = this._manager.backdropZ();
|
||||
if (!this.parentNode) {
|
||||
Polymer.dom(document.body).appendChild(this);
|
||||
}
|
||||
|
@ -114,8 +114,6 @@ Custom property | Description | Default
|
|||
* Hides the backdrop if needed.
|
||||
*/
|
||||
close: function() {
|
||||
// Always update z-index
|
||||
this.style.zIndex = this._manager.backdropZ();
|
||||
// close only if no element with backdrop is left
|
||||
if (this._manager.getBackdrops().length === 0) {
|
||||
// Read style before setting opened.
|
||||
|
|
|
@ -9,7 +9,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
<link rel="import" href="../iron-fit-behavior/iron-fit-behavior.html">
|
||||
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
|
||||
<link rel="import" href="iron-overlay-backdrop.html">
|
||||
|
@ -119,15 +118,6 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
type: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* The HTMLElement that will be firing relevant KeyboardEvents.
|
||||
* Used for capturing esc and tab. Overridden from `IronA11yKeysBehavior`.
|
||||
*/
|
||||
keyEventTarget: {
|
||||
type: Object,
|
||||
value: document
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to enable restoring of focus when overlay is closed.
|
||||
*/
|
||||
|
@ -146,20 +136,6 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
value: Polymer.IronOverlayManager
|
||||
},
|
||||
|
||||
_boundOnCaptureClick: {
|
||||
type: Function,
|
||||
value: function() {
|
||||
return this._onCaptureClick.bind(this);
|
||||
}
|
||||
},
|
||||
|
||||
_boundOnCaptureFocus: {
|
||||
type: Function,
|
||||
value: function() {
|
||||
return this._onCaptureFocus.bind(this);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* The node being focused.
|
||||
* @type {?Node}
|
||||
|
@ -170,11 +146,6 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
|
||||
},
|
||||
|
||||
keyBindings: {
|
||||
'esc': '__onEsc',
|
||||
'tab': '__onTab'
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'iron-resize': '_onIronResize'
|
||||
},
|
||||
|
@ -270,8 +241,10 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
Polymer.dom(this).unobserveNodes(this._observer);
|
||||
this._observer = null;
|
||||
this.opened = false;
|
||||
this._manager.trackBackdrop(this);
|
||||
this._manager.removeOverlay(this);
|
||||
if (this.withBackdrop) {
|
||||
// Allow user interactions right away.
|
||||
this.backdropElement.close();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -333,18 +306,20 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
return;
|
||||
}
|
||||
|
||||
this._manager.trackBackdrop(this);
|
||||
|
||||
this.__isAnimating = true;
|
||||
|
||||
if (this.opened) {
|
||||
this._prepareRenderOpened();
|
||||
} else {
|
||||
this._manager.removeOverlay(this);
|
||||
}
|
||||
|
||||
this._manager.trackBackdrop(this);
|
||||
|
||||
if (this._openChangedAsync) {
|
||||
this.cancelAsync(this._openChangedAsync);
|
||||
}
|
||||
// Async here to allow overlay layer to become visible, and to avoid
|
||||
// listeners to immediately close via a click.
|
||||
// Async here to allow overlay layer to become visible.
|
||||
this._openChangedAsync = this.async(function() {
|
||||
// overlay becomes visible here
|
||||
this.style.display = '';
|
||||
|
@ -356,7 +331,6 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
} else {
|
||||
this._renderClosed();
|
||||
}
|
||||
this._toggleListeners();
|
||||
this._openChangedAsync = null;
|
||||
}, 1);
|
||||
},
|
||||
|
@ -389,28 +363,10 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
}
|
||||
},
|
||||
|
||||
_toggleListener: function(enable, node, event, boundListener, capture) {
|
||||
if (enable) {
|
||||
// enable document-wide tap recognizer
|
||||
if (event === 'tap') {
|
||||
Polymer.Gestures.add(document, 'tap', null);
|
||||
}
|
||||
node.addEventListener(event, boundListener, capture);
|
||||
} else {
|
||||
// disable document-wide tap recognizer
|
||||
if (event === 'tap') {
|
||||
Polymer.Gestures.remove(document, 'tap', null);
|
||||
}
|
||||
node.removeEventListener(event, boundListener, capture);
|
||||
}
|
||||
},
|
||||
|
||||
_toggleListeners: function() {
|
||||
this._toggleListener(this.opened, document, 'tap', this._boundOnCaptureClick, true);
|
||||
this._toggleListener(this.opened, document, 'focus', this._boundOnCaptureFocus, true);
|
||||
},
|
||||
|
||||
// tasks which must occur before opening; e.g. making the element visible
|
||||
/**
|
||||
* tasks which must occur before opening; e.g. making the element visible.
|
||||
* @protected
|
||||
*/
|
||||
_prepareRenderOpened: function() {
|
||||
|
||||
this._manager.addOverlay(this);
|
||||
|
@ -432,8 +388,10 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
}
|
||||
},
|
||||
|
||||
// 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
|
||||
*/
|
||||
_renderOpened: function() {
|
||||
if (this.withBackdrop) {
|
||||
this.backdropElement.open();
|
||||
|
@ -441,6 +399,10 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
this._finishRenderOpened();
|
||||
},
|
||||
|
||||
/**
|
||||
* Tasks which cause the overlay to actually close; typically play an animation.
|
||||
* @protected
|
||||
*/
|
||||
_renderClosed: function() {
|
||||
if (this.withBackdrop) {
|
||||
this.backdropElement.close();
|
||||
|
@ -448,6 +410,10 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
this._finishRenderClosed();
|
||||
},
|
||||
|
||||
/**
|
||||
* Tasks to be performed at the end of open action. Will fire `iron-overlay-opened`.
|
||||
* @protected
|
||||
*/
|
||||
_finishRenderOpened: function() {
|
||||
// Focus the child node with [autofocus]
|
||||
this._applyFocus();
|
||||
|
@ -457,10 +423,13 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
this.fire('iron-overlay-opened');
|
||||
},
|
||||
|
||||
/**
|
||||
* Tasks to be performed at the end of close action. Will fire `iron-overlay-closed`.
|
||||
* @protected
|
||||
*/
|
||||
_finishRenderClosed: function() {
|
||||
// Hide the overlay and remove the backdrop.
|
||||
this.style.display = 'none';
|
||||
this._manager.removeOverlay(this);
|
||||
|
||||
this._applyFocus();
|
||||
|
||||
|
@ -484,6 +453,10 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
this.style.transition = this.style.webkitTransition = '';
|
||||
},
|
||||
|
||||
/**
|
||||
* Applies focus according to the opened state.
|
||||
* @protected
|
||||
*/
|
||||
_applyFocus: function() {
|
||||
if (this.opened) {
|
||||
if (!this.noAutoFocus) {
|
||||
|
@ -496,19 +469,26 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Cancels (closes) the overlay. Call when click happens outside the overlay.
|
||||
* @param {!Event} event
|
||||
* @protected
|
||||
*/
|
||||
_onCaptureClick: function(event) {
|
||||
if (this._manager.currentOverlay() === this &&
|
||||
Polymer.dom(event).path.indexOf(this) === -1) {
|
||||
if (this.noCancelOnOutsideClick) {
|
||||
this._applyFocus();
|
||||
} else {
|
||||
if (!this.noCancelOnOutsideClick) {
|
||||
this.cancel(event);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Keeps track of the focused child. If withBackdrop, traps focus within overlay.
|
||||
* @param {!Event} event
|
||||
* @protected
|
||||
*/
|
||||
_onCaptureFocus: function (event) {
|
||||
if (this._manager.currentOverlay() === this && this.withBackdrop) {
|
||||
if (!this.withBackdrop) {
|
||||
return;
|
||||
}
|
||||
var path = Polymer.dom(event).path;
|
||||
if (path.indexOf(this) === -1) {
|
||||
event.stopPropagation();
|
||||
|
@ -516,9 +496,42 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
} else {
|
||||
this._focusedChild = path[0];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handles the ESC key event and cancels (closes) the overlay.
|
||||
* @param {!Event} event
|
||||
* @protected
|
||||
*/
|
||||
_onCaptureEsc: function(event) {
|
||||
if (!this.noCancelOnEscKey) {
|
||||
this.cancel(event);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Handles TAB key events to track focus changes.
|
||||
* Will wrap focus for overlays withBackdrop.
|
||||
* @param {!Event} event
|
||||
* @protected
|
||||
*/
|
||||
_onCaptureTab: function(event) {
|
||||
// TAB wraps from last to first focusable.
|
||||
// Shift + TAB wraps from first to last focusable.
|
||||
var shift = event.shiftKey;
|
||||
var nodeToCheck = shift ? this.__firstFocusableNode : this.__lastFocusableNode;
|
||||
var nodeToSet = shift ? this.__lastFocusableNode : this.__firstFocusableNode;
|
||||
if (this.withBackdrop && this._focusedChild === nodeToCheck) {
|
||||
// We set here the _focusedChild so that _onCaptureFocus will handle the
|
||||
// wrapping of the focus (the next event after tab is focus).
|
||||
this._focusedChild = nodeToSet;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Refits if the overlay is opened and not animating.
|
||||
* @protected
|
||||
*/
|
||||
_onIronResize: function() {
|
||||
if (this.__isAnimating) {
|
||||
return;
|
||||
|
@ -530,9 +543,9 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
},
|
||||
|
||||
/**
|
||||
* @protected
|
||||
* Will call notifyResize if overlay is opened.
|
||||
* Can be overridden in order to avoid multiple observers on the same node.
|
||||
* @protected
|
||||
*/
|
||||
_onNodesChange: function() {
|
||||
if (this.opened && !this.__isAnimating) {
|
||||
|
@ -542,33 +555,6 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
var focusableNodes = this._focusableNodes;
|
||||
this.__firstFocusableNode = focusableNodes[0];
|
||||
this.__lastFocusableNode = focusableNodes[focusableNodes.length - 1];
|
||||
},
|
||||
|
||||
__onEsc: function(event) {
|
||||
// Not opened or not on top, so return.
|
||||
if (this._manager.currentOverlay() !== this) {
|
||||
return;
|
||||
}
|
||||
if (!this.noCancelOnEscKey) {
|
||||
this.cancel(event);
|
||||
}
|
||||
},
|
||||
|
||||
__onTab: function(event) {
|
||||
// Not opened or not on top, so return.
|
||||
if (this._manager.currentOverlay() !== this) {
|
||||
return;
|
||||
}
|
||||
// TAB wraps from last to first focusable.
|
||||
// Shift + TAB wraps from first to last focusable.
|
||||
var shift = event.detail.keyboardEvent.shiftKey;
|
||||
var nodeToCheck = shift ? this.__firstFocusableNode : this.__lastFocusableNode;
|
||||
var nodeToSet = shift ? this.__lastFocusableNode : this.__firstFocusableNode;
|
||||
if (this.withBackdrop && this._focusedChild === nodeToCheck) {
|
||||
// We set here the _focusedChild so that _onCaptureFocus will handle the
|
||||
// wrapping of the focus (the next event after tab is focus).
|
||||
this._focusedChild = nodeToSet;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -9,6 +9,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
-->
|
||||
|
||||
<link rel="import" href="../polymer/polymer.html">
|
||||
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
|
||||
<script>
|
||||
|
||||
|
@ -24,12 +25,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
*/
|
||||
this._overlays = [];
|
||||
|
||||
/**
|
||||
* Used to keep track of the last focused node before an overlay gets opened.
|
||||
* @private {Array<Element>}
|
||||
*/
|
||||
this._lastFocusedNodes = [];
|
||||
|
||||
/**
|
||||
* iframes have a default z-index of 100,
|
||||
* so this default should be at least that.
|
||||
|
@ -37,17 +32,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
*/
|
||||
this._minimumZ = 101;
|
||||
|
||||
/**
|
||||
* Used to keep track of the opened overlays with backdrop.
|
||||
* @private {Array<Element>}
|
||||
*/
|
||||
this._backdrops = [];
|
||||
|
||||
/**
|
||||
* Memoized backdrop element.
|
||||
* @private {Element|null}
|
||||
*/
|
||||
this._backdropElement = null;
|
||||
|
||||
// Enable document-wide tap recognizer.
|
||||
Polymer.Gestures.add(document, 'tap', null);
|
||||
// We should be using only 'tap', but this would be a breaking change.
|
||||
var tapEvent = ('ontouchstart' in window) ? 'tap' : 'click';
|
||||
document.addEventListener(tapEvent, this._onCaptureClick.bind(this), true);
|
||||
document.addEventListener('focus', this._onCaptureFocus.bind(this), true);
|
||||
document.addEventListener('keydown', this._onCaptureKeyDown.bind(this), true);
|
||||
};
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype = {
|
||||
|
@ -67,54 +64,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
/**
|
||||
* The deepest active element.
|
||||
* @type {Element|undefined} activeElement the active element
|
||||
* @type {Element} activeElement the active element
|
||||
*/
|
||||
get deepActiveElement() {
|
||||
var active = document.activeElement;
|
||||
// document.activeElement can be null
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
|
||||
while (active && active.root && Polymer.dom(active.root).activeElement) {
|
||||
// In case of null, default it to document.body.
|
||||
var active = document.activeElement || document.body;
|
||||
while (active.root && Polymer.dom(active.root).activeElement) {
|
||||
active = Polymer.dom(active.root).activeElement;
|
||||
}
|
||||
return active;
|
||||
},
|
||||
|
||||
/**
|
||||
* If a node is contained in an overlay.
|
||||
* @param {Element=} node
|
||||
* @return {boolean}
|
||||
* @private
|
||||
*/
|
||||
_isChildOfOverlay: function(node) {
|
||||
while (node && node !== document.body) {
|
||||
// Use logical parentNode, or native ShadowRoot host.
|
||||
node = Polymer.dom(node).parentNode || node.host;
|
||||
// Check if it is an overlay.
|
||||
if (node && node.behaviors && node.behaviors.indexOf(Polymer.IronOverlayBehaviorImpl) !== -1) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Element} overlay
|
||||
* @param {number} aboveZ
|
||||
* @private
|
||||
*/
|
||||
_applyOverlayZ: function(overlay, aboveZ) {
|
||||
this._setZ(overlay, aboveZ + 2);
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Element} element
|
||||
* @param {number|string} z
|
||||
* @private
|
||||
*/
|
||||
_setZ: function(element, z) {
|
||||
element.style.zIndex = z;
|
||||
},
|
||||
|
||||
/**
|
||||
* Tracks overlays for z-index and focus management.
|
||||
* @param {Element} overlay
|
||||
|
@ -127,11 +89,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
this._applyOverlayZ(overlay, minimumZ);
|
||||
}
|
||||
var element = this.deepActiveElement;
|
||||
// If already in other overlay, don't reset focus there.
|
||||
if (this._isChildOfOverlay(element)) {
|
||||
element = null;
|
||||
}
|
||||
this._lastFocusedNodes.push(element);
|
||||
overlay.restoreFocusNode = this._overlayParent(element) ? null : element;
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -143,31 +101,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
this._overlays.splice(i, 1);
|
||||
this._setZ(overlay, '');
|
||||
|
||||
var node = this._lastFocusedNodes[i];
|
||||
// Focus only if still contained in document.body
|
||||
if (overlay.restoreFocusOnClose && node && Polymer.dom(document.body).deepContains(node)) {
|
||||
var node = overlay.restoreFocusOnClose ? overlay.restoreFocusNode : null;
|
||||
overlay.restoreFocusNode = null;
|
||||
// Focus back only if still contained in document.body
|
||||
if (node && Polymer.dom(document.body).deepContains(node)) {
|
||||
node.focus();
|
||||
}
|
||||
this._lastFocusedNodes.splice(i, 1);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @return {Element|undefined} overlay The current overlay.
|
||||
* Returns the current overlay.
|
||||
* @return {Element|undefined}
|
||||
*/
|
||||
currentOverlay: function() {
|
||||
var i = this._overlays.length - 1;
|
||||
while (this._overlays[i] && !this._overlays[i].opened) {
|
||||
--i;
|
||||
}
|
||||
return this._overlays[i];
|
||||
},
|
||||
|
||||
/**
|
||||
* @return {number} zIndex the current overlay z-index.
|
||||
* Returns the current overlay z-index.
|
||||
* @return {number}
|
||||
*/
|
||||
currentOverlayZ: function() {
|
||||
return this._getOverlayZ(this.currentOverlay());
|
||||
return this._getZ(this.currentOverlay());
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -198,38 +155,38 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
* @param {Element} overlay The overlay that updated its withBackdrop.
|
||||
*/
|
||||
trackBackdrop: function(overlay) {
|
||||
var index = this._backdrops.indexOf(overlay);
|
||||
if (overlay.opened && overlay.withBackdrop) {
|
||||
// no duplicates
|
||||
if (index === -1) {
|
||||
this._backdrops.push(overlay);
|
||||
}
|
||||
} else if (index >= 0) {
|
||||
this._backdrops.splice(index, 1);
|
||||
}
|
||||
this.backdropElement.style.zIndex = this.backdropZ();
|
||||
},
|
||||
|
||||
/**
|
||||
* @return {Array<Element>} backdrops
|
||||
* @return {Array<Element>}
|
||||
*/
|
||||
getBackdrops: function() {
|
||||
return this._backdrops;
|
||||
var backdrops = [];
|
||||
for (var i = 0; i < this._overlays.length; i++) {
|
||||
if (this._overlays[i].withBackdrop) {
|
||||
backdrops.push(this._overlays[i]);
|
||||
}
|
||||
}
|
||||
return backdrops;
|
||||
},
|
||||
|
||||
/**
|
||||
* @return {number} index The z-index for the backdrop.
|
||||
* Returns the z-index for the backdrop.
|
||||
* @return {number}
|
||||
*/
|
||||
backdropZ: function() {
|
||||
return this._getOverlayZ(this._overlayWithBackdrop()) - 1;
|
||||
return this._getZ(this._overlayWithBackdrop()) - 1;
|
||||
},
|
||||
|
||||
/**
|
||||
* @return {Element|undefined} overlay The first opened overlay that has a backdrop.
|
||||
* Returns the first opened overlay that has a backdrop.
|
||||
* @return {Element|undefined}
|
||||
* @private
|
||||
*/
|
||||
_overlayWithBackdrop: function() {
|
||||
for (var i = 0; i < this._overlays.length; i++) {
|
||||
if (this._overlays[i].opened && this._overlays[i].withBackdrop) {
|
||||
if (this._overlays[i].withBackdrop) {
|
||||
return this._overlays[i];
|
||||
}
|
||||
}
|
||||
|
@ -240,7 +197,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
* @param {Element=} overlay
|
||||
* @private
|
||||
*/
|
||||
_getOverlayZ: function(overlay) {
|
||||
_getZ: function(overlay) {
|
||||
var z = this._minimumZ;
|
||||
if (overlay) {
|
||||
var z1 = Number(window.getComputedStyle(overlay).zIndex);
|
||||
|
@ -251,6 +208,84 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}
|
||||
}
|
||||
return z;
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Element} element
|
||||
* @param {number|string} z
|
||||
* @private
|
||||
*/
|
||||
_setZ: function(element, z) {
|
||||
element.style.zIndex = z;
|
||||
},
|
||||
|
||||
/**
|
||||
* @param {Element} overlay
|
||||
* @param {number} aboveZ
|
||||
* @private
|
||||
*/
|
||||
_applyOverlayZ: function(overlay, aboveZ) {
|
||||
this._setZ(overlay, aboveZ + 2);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the overlay containing the provided node. If the node is an overlay,
|
||||
* it returns the node.
|
||||
* @param {Element=} node
|
||||
* @return {Element|undefined}
|
||||
* @private
|
||||
*/
|
||||
_overlayParent: function(node) {
|
||||
while (node && node !== document.body) {
|
||||
// Check if it is an overlay.
|
||||
if (node._manager === this) {
|
||||
return node;
|
||||
}
|
||||
// Use logical parentNode, or native ShadowRoot host.
|
||||
node = Polymer.dom(node).parentNode || node.host;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Ensures the click event is delegated to the right overlay.
|
||||
* @param {!Event} event
|
||||
* @private
|
||||
*/
|
||||
_onCaptureClick: function(event) {
|
||||
var overlay = /** @type {?} */ (this.currentOverlay());
|
||||
// Check if clicked outside of any overlay.
|
||||
var target = Polymer.dom(event).rootTarget;
|
||||
if (overlay && this._overlayParent(target) !== overlay) {
|
||||
overlay._onCaptureClick(event);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Ensures the focus event is delegated to the right overlay.
|
||||
* @param {!Event} event
|
||||
* @private
|
||||
*/
|
||||
_onCaptureFocus: function(event) {
|
||||
var overlay = /** @type {?} */ (this.currentOverlay());
|
||||
if (overlay) {
|
||||
overlay._onCaptureFocus(event);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Ensures TAB and ESC keyboard events are delegated to the right overlay.
|
||||
* @param {!Event} event
|
||||
* @private
|
||||
*/
|
||||
_onCaptureKeyDown: function(event) {
|
||||
var overlay = /** @type {?} */ (this.currentOverlay());
|
||||
if (overlay) {
|
||||
if (Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(event, 'esc')) {
|
||||
overlay._onCaptureEsc(event);
|
||||
} else if (Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(event, 'tab')) {
|
||||
overlay._onCaptureTab(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -186,27 +186,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
});
|
||||
});
|
||||
|
||||
test('closed overlay does not trigger iron-resize when its content changes', function(done) {
|
||||
test('closed overlay does not trigger iron-resize when its content changes', function() {
|
||||
// Ignore iron-resize triggered by window resize.
|
||||
var callCount = 0;
|
||||
window.addEventListener('resize', function() { callCount--; }, true);
|
||||
overlay.addEventListener('iron-resize', function() { callCount++; });
|
||||
Polymer.dom(overlay).appendChild(document.createElement('div'));
|
||||
overlay.async(function() {
|
||||
Polymer.dom.flush();
|
||||
assert.equal(callCount, 0, 'iron-resize should not be called');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
|
||||
test('open overlay triggers iron-resize when its content changes', function(done) {
|
||||
test('open overlay triggers iron-resize when its content changes', function() {
|
||||
runAfterOpen(overlay, function() {
|
||||
var spy = sinon.stub();
|
||||
overlay.addEventListener('iron-resize', spy);
|
||||
Polymer.dom(overlay).appendChild(document.createElement('div'));
|
||||
overlay.async(function() {
|
||||
Polymer.dom.flush();
|
||||
assert.equal(spy.callCount, 1, 'iron-resize should be called once');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -334,6 +330,38 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
});
|
||||
|
||||
suite('keyboard event listener', function() {
|
||||
var overlay;
|
||||
|
||||
var preventKeyDown = function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
suiteSetup(function() {
|
||||
// Worst case scenario: listener with useCapture = true that prevents & stops propagation
|
||||
// added before the overlay is initialized.
|
||||
document.addEventListener('keydown', preventKeyDown, true);
|
||||
});
|
||||
|
||||
setup(function() {
|
||||
overlay = fixture('basic');
|
||||
});
|
||||
|
||||
suiteTeardown(function() {
|
||||
document.removeEventListener('keydown', preventKeyDown, true);
|
||||
});
|
||||
|
||||
test('cancel an overlay with esc key even if event is prevented by other listeners', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
overlay.addEventListener('iron-overlay-canceled', function(event) {
|
||||
done();
|
||||
});
|
||||
MockInteractions.pressAndReleaseKeyOn(document, 27);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('opened overlay', function() {
|
||||
var overlay;
|
||||
|
||||
|
@ -369,7 +397,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
done();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('focus handling', function() {
|
||||
|
@ -632,7 +659,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
runAfterOpen(overlay, function() {
|
||||
runAfterClose(overlay, function() {
|
||||
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
|
||||
assert.isNull(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
|
||||
assert.isNotOk(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
|
||||
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'no backdrop elements on body');
|
||||
done();
|
||||
});
|
||||
|
@ -642,12 +669,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
test('backdrop is removed when the element is removed from DOM', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
Polymer.dom(overlay).parentNode.removeChild(overlay);
|
||||
// Wait enough so detached is executed.
|
||||
Polymer.Base.async(function() {
|
||||
assert.isNull(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
|
||||
// Ensure detached is executed.
|
||||
Polymer.dom.flush();
|
||||
assert.isFalse(overlay.backdropElement.opened, 'backdrop is closed');
|
||||
assert.isNotOk(overlay.backdropElement.parentNode, 'backdrop is removed from the DOM');
|
||||
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 0, 'no backdrop elements on body');
|
||||
assert.isNotOk(overlay._manager.currentOverlay(), 'currentOverlay ok');
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -676,7 +704,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
done();
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('multiple overlays', function() {
|
||||
|
@ -819,6 +846,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
});
|
||||
});
|
||||
|
||||
test('click events handled only by top overlay', function(done) {
|
||||
var btn = document.createElement('button');
|
||||
btn.addEventListener('tap', overlay2.close.bind(overlay2));
|
||||
Polymer.dom(overlay2).appendChild(btn);
|
||||
runAfterOpen(overlay1, function() {
|
||||
runAfterOpen(overlay2, function() {
|
||||
MockInteractions.tap(btn);
|
||||
assert.isFalse(overlay2.opened, 'overlay2 closed');
|
||||
assert.isTrue(overlay1.opened, 'overlay1 still opened');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('updating with-backdrop updates z-index', function(done) {
|
||||
runAfterOpen(overlay1, function() {
|
||||
runAfterOpen(overlay2, function() {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue