2015-06-19 09:36:51 -07:00
|
|
|
<!--
|
|
|
|
|
@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
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
<link rel="import" href="../polymer/polymer.html">
|
2016-02-22 12:31:28 -07:00
|
|
|
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
2015-06-19 09:36:51 -07:00
|
|
|
<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">
|
|
|
|
|
<link rel="import" href="iron-overlay-manager.html">
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
|
|
### Closing and canceling
|
|
|
|
|
|
|
|
|
|
A dialog 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
|
2015-10-01 23:14:04 -07:00
|
|
|
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.
|
2015-06-19 09:36:51 -07:00
|
|
|
|
|
|
|
|
### 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.
|
|
|
|
|
|
|
|
|
|
### 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 Polymer.IronOverlayBehavior
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
Polymer.IronOverlayBehaviorImpl = {
|
|
|
|
|
|
|
|
|
|
properties: {
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* True if the overlay is currently displayed.
|
|
|
|
|
*/
|
|
|
|
|
opened: {
|
|
|
|
|
observer: '_openedChanged',
|
|
|
|
|
type: Boolean,
|
2015-06-25 18:13:51 -07:00
|
|
|
value: false,
|
|
|
|
|
notify: true
|
2015-06-19 09:36:51 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* True if the overlay was canceled when it was last closed.
|
|
|
|
|
*/
|
|
|
|
|
canceled: {
|
|
|
|
|
observer: '_canceledChanged',
|
|
|
|
|
readOnly: true,
|
|
|
|
|
type: Boolean,
|
|
|
|
|
value: false
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Set to true to display a backdrop behind the overlay.
|
|
|
|
|
*/
|
|
|
|
|
withBackdrop: {
|
2016-01-29 19:43:11 -07:00
|
|
|
observer: '_withBackdropChanged',
|
|
|
|
|
type: Boolean
|
2015-06-19 09:36:51 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Set to true to disable auto-focusing the overlay or child nodes with
|
|
|
|
|
* the `autofocus` attribute` when the overlay is opened.
|
|
|
|
|
*/
|
|
|
|
|
noAutoFocus: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
value: false
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Set to true to disable canceling the overlay with the ESC key.
|
|
|
|
|
*/
|
|
|
|
|
noCancelOnEscKey: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
value: false
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Set to true to disable canceling the overlay by clicking outside it.
|
|
|
|
|
*/
|
|
|
|
|
noCancelOnOutsideClick: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
value: false
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Returns the reason this dialog was last closed.
|
|
|
|
|
*/
|
|
|
|
|
closingReason: {
|
|
|
|
|
// was a getter before, but needs to be a property so other
|
|
|
|
|
// behaviors can override this.
|
|
|
|
|
type: Object
|
|
|
|
|
},
|
|
|
|
|
|
2016-02-22 12:31:28 -07:00
|
|
|
/**
|
|
|
|
|
* The HTMLElement that will be firing relevant KeyboardEvents.
|
|
|
|
|
* Used for capturing esc and tab. Overridden from `IronA11yKeysBehavior`.
|
|
|
|
|
*/
|
|
|
|
|
keyEventTarget: {
|
|
|
|
|
type: Object,
|
|
|
|
|
value: document
|
|
|
|
|
},
|
|
|
|
|
|
2016-02-23 22:36:48 -07:00
|
|
|
/**
|
|
|
|
|
* Set to true to enable restoring of focus when overlay is closed.
|
|
|
|
|
*/
|
|
|
|
|
restoreFocusOnClose: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
value: false
|
|
|
|
|
},
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
_manager: {
|
|
|
|
|
type: Object,
|
|
|
|
|
value: Polymer.IronOverlayManager
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_boundOnCaptureClick: {
|
|
|
|
|
type: Function,
|
|
|
|
|
value: function() {
|
|
|
|
|
return this._onCaptureClick.bind(this);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2016-02-05 23:33:34 -07:00
|
|
|
_boundOnCaptureFocus: {
|
|
|
|
|
type: Function,
|
|
|
|
|
value: function() {
|
|
|
|
|
return this._onCaptureFocus.bind(this);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2016-02-22 12:31:28 -07:00
|
|
|
/**
|
|
|
|
|
* The node being focused.
|
|
|
|
|
* @type {?Node}
|
|
|
|
|
*/
|
2016-02-05 23:33:34 -07:00
|
|
|
_focusedChild: {
|
|
|
|
|
type: Object
|
2015-06-19 09:36:51 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
2016-02-22 12:31:28 -07:00
|
|
|
keyBindings: {
|
|
|
|
|
'esc': '__onEsc',
|
|
|
|
|
'tab': '__onTab'
|
|
|
|
|
},
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
listeners: {
|
|
|
|
|
'iron-resize': '_onIronResize'
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* The backdrop element.
|
2016-02-22 12:31:28 -07:00
|
|
|
* @type {Node}
|
2015-06-19 09:36:51 -07:00
|
|
|
*/
|
|
|
|
|
get backdropElement() {
|
2016-01-29 19:43:11 -07:00
|
|
|
return this._manager.backdropElement;
|
2015-06-19 09:36:51 -07:00
|
|
|
},
|
|
|
|
|
|
2016-02-22 12:31:28 -07:00
|
|
|
/**
|
|
|
|
|
* Returns the node to give focus to.
|
|
|
|
|
* @type {Node}
|
|
|
|
|
*/
|
2015-06-19 09:36:51 -07:00
|
|
|
get _focusNode() {
|
2016-02-23 22:36:48 -07:00
|
|
|
return this._focusedChild || Polymer.dom(this).querySelector('[autofocus]') || this;
|
2016-02-22 12:31:28 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 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];`
|
|
|
|
|
* @type {[Node]}
|
|
|
|
|
* @protected
|
|
|
|
|
*/
|
|
|
|
|
get _focusableNodes() {
|
|
|
|
|
// Elements that can be focused even if they have [disabled] attribute.
|
|
|
|
|
var FOCUSABLE_WITH_DISABLED = [
|
|
|
|
|
'a[href]',
|
|
|
|
|
'area[href]',
|
|
|
|
|
'iframe',
|
|
|
|
|
'[tabindex]',
|
|
|
|
|
'[contentEditable=true]'
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// Elements that cannot be focused if they have [disabled] attribute.
|
|
|
|
|
var FOCUSABLE_WITHOUT_DISABLED = [
|
|
|
|
|
'input',
|
|
|
|
|
'select',
|
|
|
|
|
'textarea',
|
|
|
|
|
'button'
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// Discard elements with tabindex=-1 (makes them not focusable).
|
|
|
|
|
var selector = FOCUSABLE_WITH_DISABLED.join(':not([tabindex="-1"]),') +
|
|
|
|
|
':not([tabindex="-1"]),' +
|
|
|
|
|
FOCUSABLE_WITHOUT_DISABLED.join(':not([disabled]):not([tabindex="-1"]),') +
|
|
|
|
|
':not([disabled]):not([tabindex="-1"])';
|
|
|
|
|
|
|
|
|
|
var focusables = Polymer.dom(this).querySelectorAll(selector);
|
|
|
|
|
if (this.tabIndex >= 0) {
|
|
|
|
|
// Insert at the beginning because we might have all elements with tabIndex = 0,
|
|
|
|
|
// and the overlay should be the first of the list.
|
|
|
|
|
focusables.splice(0, 0, this);
|
|
|
|
|
}
|
|
|
|
|
// Sort by tabindex.
|
|
|
|
|
return focusables.sort(function (a, b) {
|
|
|
|
|
if (a.tabIndex === b.tabIndex) {
|
|
|
|
|
return 0;
|
|
|
|
|
}
|
|
|
|
|
if (a.tabIndex === 0 || a.tabIndex > b.tabIndex) {
|
|
|
|
|
return 1;
|
|
|
|
|
}
|
|
|
|
|
return -1;
|
|
|
|
|
});
|
2015-06-19 09:36:51 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
ready: function() {
|
2016-03-08 11:47:36 -07:00
|
|
|
// Used to skip calls to notifyResize and refit while the overlay is animating.
|
|
|
|
|
this.__isAnimating = false;
|
2016-02-23 22:36:48 -07:00
|
|
|
// with-backdrop needs tabindex to be set in order to trap the focus.
|
2016-02-05 23:33:34 -07:00
|
|
|
// If it is not set, IronOverlayBehavior will set it, and remove it if with-backdrop = false.
|
|
|
|
|
this.__shouldRemoveTabIndex = false;
|
2016-02-22 12:31:28 -07:00
|
|
|
// Used for wrapping the focus on TAB / Shift+TAB.
|
|
|
|
|
this.__firstFocusableNode = this.__lastFocusableNode = null;
|
2015-06-19 09:36:51 -07:00
|
|
|
this._ensureSetup();
|
2015-12-14 08:43:03 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
attached: function() {
|
|
|
|
|
// Call _openedChanged here so that position can be computed correctly.
|
2016-02-23 22:36:48 -07:00
|
|
|
if (this.opened) {
|
2015-06-19 09:36:51 -07:00
|
|
|
this._openedChanged();
|
|
|
|
|
}
|
2016-02-22 10:20:38 -07:00
|
|
|
this._observer = Polymer.dom(this).observeNodes(this._onNodesChange);
|
2015-06-19 09:36:51 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
detached: function() {
|
2016-02-22 10:20:38 -07:00
|
|
|
Polymer.dom(this).unobserveNodes(this._observer);
|
|
|
|
|
this._observer = null;
|
2015-06-19 09:36:51 -07:00
|
|
|
this.opened = false;
|
2016-01-29 19:43:11 -07:00
|
|
|
this._manager.trackBackdrop(this);
|
2015-06-19 09:36:51 -07:00
|
|
|
this._manager.removeOverlay(this);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Toggle the opened state of the overlay.
|
|
|
|
|
*/
|
|
|
|
|
toggle: function() {
|
2016-01-29 19:43:11 -07:00
|
|
|
this._setCanceled(false);
|
2015-06-19 09:36:51 -07:00
|
|
|
this.opened = !this.opened;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Open the overlay.
|
|
|
|
|
*/
|
|
|
|
|
open: function() {
|
2016-01-29 19:43:11 -07:00
|
|
|
this._setCanceled(false);
|
2015-06-19 09:36:51 -07:00
|
|
|
this.opened = true;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Close the overlay.
|
|
|
|
|
*/
|
|
|
|
|
close: function() {
|
|
|
|
|
this._setCanceled(false);
|
2016-01-29 19:43:11 -07:00
|
|
|
this.opened = false;
|
2015-06-19 09:36:51 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
2016-02-22 10:20:38 -07:00
|
|
|
* Cancels the overlay.
|
2016-02-18 11:20:10 -07:00
|
|
|
* @param {?Event} event The original event
|
2015-06-19 09:36:51 -07:00
|
|
|
*/
|
2016-02-18 11:20:10 -07:00
|
|
|
cancel: function(event) {
|
|
|
|
|
var cancelEvent = this.fire('iron-overlay-canceled', event, {cancelable: true});
|
2015-10-01 23:14:04 -07:00
|
|
|
if (cancelEvent.defaultPrevented) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
this._setCanceled(true);
|
2016-01-29 19:43:11 -07:00
|
|
|
this.opened = false;
|
2015-06-19 09:36:51 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_ensureSetup: function() {
|
|
|
|
|
if (this._overlaySetup) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
this._overlaySetup = true;
|
|
|
|
|
this.style.outline = 'none';
|
|
|
|
|
this.style.display = 'none';
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_openedChanged: function() {
|
|
|
|
|
if (this.opened) {
|
|
|
|
|
this.removeAttribute('aria-hidden');
|
|
|
|
|
} else {
|
|
|
|
|
this.setAttribute('aria-hidden', 'true');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// wait to call after ready only if we're initially open
|
|
|
|
|
if (!this._overlaySetup) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2016-01-29 19:43:11 -07:00
|
|
|
this._manager.trackBackdrop(this);
|
2015-06-19 09:36:51 -07:00
|
|
|
|
2016-03-08 11:47:36 -07:00
|
|
|
this.__isAnimating = true;
|
2015-06-19 09:36:51 -07:00
|
|
|
if (this.opened) {
|
|
|
|
|
this._prepareRenderOpened();
|
|
|
|
|
}
|
|
|
|
|
|
2016-01-29 19:43:11 -07:00
|
|
|
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.
|
2015-06-19 09:36:51 -07:00
|
|
|
this._openChangedAsync = this.async(function() {
|
|
|
|
|
// overlay becomes visible here
|
|
|
|
|
this.style.display = '';
|
2016-01-29 19:43:11 -07:00
|
|
|
// Force layout to ensure transition will go. Set offsetWidth to itself
|
|
|
|
|
// so that compilers won't remove it.
|
|
|
|
|
this.offsetWidth = this.offsetWidth;
|
2015-06-19 09:36:51 -07:00
|
|
|
if (this.opened) {
|
|
|
|
|
this._renderOpened();
|
|
|
|
|
} else {
|
|
|
|
|
this._renderClosed();
|
|
|
|
|
}
|
2016-01-29 19:43:11 -07:00
|
|
|
this._toggleListeners();
|
2015-06-19 09:36:51 -07:00
|
|
|
this._openChangedAsync = null;
|
2016-01-29 19:43:11 -07:00
|
|
|
}, 1);
|
2015-06-19 09:36:51 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_canceledChanged: function() {
|
|
|
|
|
this.closingReason = this.closingReason || {};
|
|
|
|
|
this.closingReason.canceled = this.canceled;
|
|
|
|
|
},
|
|
|
|
|
|
2016-01-29 19:43:11 -07:00
|
|
|
_withBackdropChanged: function() {
|
2016-02-05 23:33:34 -07:00
|
|
|
// If tabindex is already set, no need to override it.
|
|
|
|
|
if (this.withBackdrop && !this.hasAttribute('tabindex')) {
|
|
|
|
|
this.setAttribute('tabindex', '-1');
|
|
|
|
|
this.__shouldRemoveTabIndex = true;
|
|
|
|
|
} else if (this.__shouldRemoveTabIndex) {
|
|
|
|
|
this.removeAttribute('tabindex');
|
|
|
|
|
this.__shouldRemoveTabIndex = false;
|
|
|
|
|
}
|
2016-01-29 19:43:11 -07:00
|
|
|
if (this.opened) {
|
|
|
|
|
this._manager.trackBackdrop(this);
|
|
|
|
|
if (this.withBackdrop) {
|
|
|
|
|
this.backdropElement.prepare();
|
|
|
|
|
// Give time to be added to document.
|
|
|
|
|
this.async(function(){
|
|
|
|
|
this.backdropElement.open();
|
|
|
|
|
}, 1);
|
|
|
|
|
} else {
|
|
|
|
|
this.backdropElement.close();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
_toggleListener: function(enable, node, event, boundListener, capture) {
|
|
|
|
|
if (enable) {
|
2015-09-24 22:15:29 -07:00
|
|
|
// enable document-wide tap recognizer
|
|
|
|
|
if (event === 'tap') {
|
|
|
|
|
Polymer.Gestures.add(document, 'tap', null);
|
|
|
|
|
}
|
2015-06-19 09:36:51 -07:00
|
|
|
node.addEventListener(event, boundListener, capture);
|
|
|
|
|
} else {
|
2015-09-24 22:15:29 -07:00
|
|
|
// disable document-wide tap recognizer
|
|
|
|
|
if (event === 'tap') {
|
|
|
|
|
Polymer.Gestures.remove(document, 'tap', null);
|
|
|
|
|
}
|
2015-06-19 09:36:51 -07:00
|
|
|
node.removeEventListener(event, boundListener, capture);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2016-02-22 12:31:28 -07:00
|
|
|
_toggleListeners: function() {
|
2016-01-29 19:43:11 -07:00
|
|
|
this._toggleListener(this.opened, document, 'tap', this._boundOnCaptureClick, true);
|
2016-02-05 23:33:34 -07:00
|
|
|
this._toggleListener(this.opened, document, 'focus', this._boundOnCaptureFocus, true);
|
2015-06-19 09:36:51 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// tasks which must occur before opening; e.g. making the element visible
|
|
|
|
|
_prepareRenderOpened: function() {
|
2016-02-18 11:20:10 -07:00
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
this._manager.addOverlay(this);
|
|
|
|
|
|
2016-02-22 10:20:38 -07:00
|
|
|
// Needed to calculate the size of the overlay so that transitions on its size
|
|
|
|
|
// will have the correct starting points.
|
2015-06-19 09:36:51 -07:00
|
|
|
this._preparePositioning();
|
2016-03-08 11:47:36 -07:00
|
|
|
this.refit();
|
2015-06-19 09:36:51 -07:00
|
|
|
this._finishPositioning();
|
2016-01-29 19:43:11 -07:00
|
|
|
|
|
|
|
|
if (this.withBackdrop) {
|
|
|
|
|
this.backdropElement.prepare();
|
|
|
|
|
}
|
2016-02-18 11:20:10 -07:00
|
|
|
|
|
|
|
|
// Safari will apply the focus to the autofocus element when displayed for the first time,
|
|
|
|
|
// so we blur it. Later, _applyFocus will set the focus if necessary.
|
|
|
|
|
if (this.noAutoFocus && document.activeElement === this._focusNode) {
|
|
|
|
|
this._focusNode.blur();
|
|
|
|
|
}
|
2015-06-19 09:36:51 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// tasks which cause the overlay to actually open; typically play an
|
|
|
|
|
// animation
|
|
|
|
|
_renderOpened: function() {
|
|
|
|
|
if (this.withBackdrop) {
|
|
|
|
|
this.backdropElement.open();
|
|
|
|
|
}
|
|
|
|
|
this._finishRenderOpened();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_renderClosed: function() {
|
|
|
|
|
if (this.withBackdrop) {
|
|
|
|
|
this.backdropElement.close();
|
|
|
|
|
}
|
|
|
|
|
this._finishRenderClosed();
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_finishRenderOpened: function() {
|
2016-02-22 10:20:38 -07:00
|
|
|
// Focus the child node with [autofocus]
|
2016-01-29 19:43:11 -07:00
|
|
|
this._applyFocus();
|
2015-06-19 09:36:51 -07:00
|
|
|
|
2016-03-08 11:47:36 -07:00
|
|
|
this.notifyResize();
|
|
|
|
|
this.__isAnimating = false;
|
2015-06-19 09:36:51 -07:00
|
|
|
this.fire('iron-overlay-opened');
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_finishRenderClosed: function() {
|
2016-02-22 10:20:38 -07:00
|
|
|
// Hide the overlay and remove the backdrop.
|
2015-06-19 09:36:51 -07:00
|
|
|
this.style.display = 'none';
|
|
|
|
|
this._manager.removeOverlay(this);
|
|
|
|
|
|
2016-01-29 19:43:11 -07:00
|
|
|
this._applyFocus();
|
2016-02-22 10:20:38 -07:00
|
|
|
|
2016-03-08 11:47:36 -07:00
|
|
|
this.notifyResize();
|
|
|
|
|
this.__isAnimating = false;
|
2015-06-19 09:36:51 -07:00
|
|
|
this.fire('iron-overlay-closed', this.closingReason);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_preparePositioning: function() {
|
|
|
|
|
this.style.transition = this.style.webkitTransition = 'none';
|
|
|
|
|
this.style.transform = this.style.webkitTransform = 'none';
|
|
|
|
|
this.style.display = '';
|
|
|
|
|
},
|
|
|
|
|
|
2015-06-25 18:13:51 -07:00
|
|
|
_finishPositioning: function() {
|
2015-06-19 09:36:51 -07:00
|
|
|
this.style.display = 'none';
|
|
|
|
|
this.style.transform = this.style.webkitTransform = '';
|
2016-02-22 10:20:38 -07:00
|
|
|
// Force layout layout to avoid application of transform.
|
|
|
|
|
// Set offsetWidth to itself so that compilers won't remove it.
|
|
|
|
|
this.offsetWidth = this.offsetWidth;
|
2015-06-19 09:36:51 -07:00
|
|
|
this.style.transition = this.style.webkitTransition = '';
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_applyFocus: function() {
|
|
|
|
|
if (this.opened) {
|
|
|
|
|
if (!this.noAutoFocus) {
|
|
|
|
|
this._focusNode.focus();
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this._focusNode.blur();
|
2016-02-22 10:20:38 -07:00
|
|
|
this._focusedChild = null;
|
2015-06-19 09:36:51 -07:00
|
|
|
this._manager.focusOverlay();
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
_onCaptureClick: function(event) {
|
2016-01-29 19:43:11 -07:00
|
|
|
if (this._manager.currentOverlay() === this &&
|
2015-12-14 08:43:03 -07:00
|
|
|
Polymer.dom(event).path.indexOf(this) === -1) {
|
2016-02-05 23:33:34 -07:00
|
|
|
if (this.noCancelOnOutsideClick) {
|
|
|
|
|
this._applyFocus();
|
|
|
|
|
} else {
|
2016-02-18 11:20:10 -07:00
|
|
|
this.cancel(event);
|
2016-02-05 23:33:34 -07:00
|
|
|
}
|
2015-06-19 09:36:51 -07:00
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2016-02-05 23:33:34 -07:00
|
|
|
_onCaptureFocus: function (event) {
|
2016-02-22 12:31:28 -07:00
|
|
|
if (this._manager.currentOverlay() === this && this.withBackdrop) {
|
2016-02-05 23:33:34 -07:00
|
|
|
var path = Polymer.dom(event).path;
|
|
|
|
|
if (path.indexOf(this) === -1) {
|
|
|
|
|
event.stopPropagation();
|
|
|
|
|
this._applyFocus();
|
|
|
|
|
} else {
|
|
|
|
|
this._focusedChild = path[0];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
_onIronResize: function() {
|
2016-03-08 11:47:36 -07:00
|
|
|
if (this.__isAnimating) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2015-06-19 09:36:51 -07:00
|
|
|
if (this.opened) {
|
|
|
|
|
this.refit();
|
|
|
|
|
}
|
2016-02-22 10:20:38 -07:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @protected
|
|
|
|
|
* Will call notifyResize if overlay is opened.
|
|
|
|
|
* Can be overridden in order to avoid multiple observers on the same node.
|
|
|
|
|
*/
|
|
|
|
|
_onNodesChange: function() {
|
2016-03-08 11:47:36 -07:00
|
|
|
if (this.opened && !this.__isAnimating) {
|
2016-02-22 10:20:38 -07:00
|
|
|
this.notifyResize();
|
|
|
|
|
}
|
2016-02-22 12:31:28 -07:00
|
|
|
// Store it so we don't query too much.
|
|
|
|
|
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;
|
|
|
|
|
}
|
2015-06-19 09:36:51 -07:00
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
/** @polymerBehavior */
|
2016-02-22 12:31:28 -07:00
|
|
|
Polymer.IronOverlayBehavior = [Polymer.IronA11yKeysBehavior, Polymer.IronFitBehavior, Polymer.IronResizableBehavior, Polymer.IronOverlayBehaviorImpl];
|
2015-06-19 09:36:51 -07:00
|
|
|
|
2016-02-23 22:36:48 -07:00
|
|
|
/**
|
|
|
|
|
* Fired after the `iron-overlay` opens.
|
|
|
|
|
* @event iron-overlay-opened
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Fired when the `iron-overlay` is canceled, but before it is closed.
|
|
|
|
|
* Cancel the event to prevent the `iron-overlay` from closing.
|
|
|
|
|
* @event iron-overlay-canceled
|
|
|
|
|
* @param {Event} event The closing of the `iron-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 `iron-overlay`).
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Fired after the `iron-overlay` closes.
|
|
|
|
|
* @event iron-overlay-closed
|
|
|
|
|
* @param {{canceled: (boolean|undefined)}} closingReason Contains `canceled` (whether the overlay was canceled).
|
|
|
|
|
*/
|
2015-06-19 09:36:51 -07:00
|
|
|
|
|
|
|
|
</script>
|
