mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-18 19:38:20 -07:00
0c696294ae
Conflicts: MediaBrowser.WebDashboard/dashboard-ui/bower_components/emby-webcomponents/.bower.json
423 lines
12 KiB
HTML
423 lines
12 KiB
HTML
<!--
|
|
@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">
|
|
<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
|
|
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.
|
|
|
|
### 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,
|
|
value: false,
|
|
notify: true
|
|
},
|
|
|
|
/**
|
|
* 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: {
|
|
observer: '_withBackdropChanged',
|
|
type: Boolean
|
|
},
|
|
|
|
/**
|
|
* 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
|
|
},
|
|
|
|
_manager: {
|
|
type: Object,
|
|
value: Polymer.IronOverlayManager
|
|
},
|
|
|
|
_boundOnCaptureClick: {
|
|
type: Function,
|
|
value: function() {
|
|
return this._onCaptureClick.bind(this);
|
|
}
|
|
},
|
|
|
|
_boundOnCaptureKeydown: {
|
|
type: Function,
|
|
value: function() {
|
|
return this._onCaptureKeydown.bind(this);
|
|
}
|
|
}
|
|
|
|
},
|
|
|
|
listeners: {
|
|
'iron-resize': '_onIronResize'
|
|
},
|
|
|
|
/**
|
|
* The backdrop element.
|
|
* @type Node
|
|
*/
|
|
get backdropElement() {
|
|
return this._manager.backdropElement;
|
|
},
|
|
|
|
get _focusNode() {
|
|
return Polymer.dom(this).querySelector('[autofocus]') || this;
|
|
},
|
|
|
|
ready: function() {
|
|
this._ensureSetup();
|
|
},
|
|
|
|
attached: function() {
|
|
// Call _openedChanged here so that position can be computed correctly.
|
|
if (this._callOpenedWhenReady) {
|
|
this._openedChanged();
|
|
}
|
|
},
|
|
|
|
detached: function() {
|
|
this.opened = false;
|
|
this._manager.trackBackdrop(this);
|
|
this._manager.removeOverlay(this);
|
|
},
|
|
|
|
/**
|
|
* Toggle the opened state of the overlay.
|
|
*/
|
|
toggle: function() {
|
|
this._setCanceled(false);
|
|
this.opened = !this.opened;
|
|
},
|
|
|
|
/**
|
|
* Open the overlay.
|
|
*/
|
|
open: function() {
|
|
this._setCanceled(false);
|
|
this.opened = true;
|
|
},
|
|
|
|
/**
|
|
* Close the overlay.
|
|
*/
|
|
close: function() {
|
|
this._setCanceled(false);
|
|
this.opened = false;
|
|
},
|
|
|
|
/**
|
|
* Cancels the overlay.
|
|
*/
|
|
cancel: function() {
|
|
var cancelEvent = this.fire('iron-overlay-canceled', undefined, {cancelable: true});
|
|
if (cancelEvent.defaultPrevented) {
|
|
return;
|
|
}
|
|
|
|
this._setCanceled(true);
|
|
this.opened = false;
|
|
},
|
|
|
|
_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');
|
|
Polymer.dom(this).unobserveNodes(this._observer);
|
|
}
|
|
|
|
// wait to call after ready only if we're initially open
|
|
if (!this._overlaySetup) {
|
|
this._callOpenedWhenReady = this.opened;
|
|
return;
|
|
}
|
|
|
|
this._manager.trackBackdrop(this);
|
|
|
|
if (this.opened) {
|
|
this._prepareRenderOpened();
|
|
}
|
|
|
|
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.
|
|
this._openChangedAsync = this.async(function() {
|
|
// overlay becomes visible here
|
|
this.style.display = '';
|
|
// Force layout to ensure transition will go. Set offsetWidth to itself
|
|
// so that compilers won't remove it.
|
|
this.offsetWidth = this.offsetWidth;
|
|
if (this.opened) {
|
|
this._renderOpened();
|
|
} else {
|
|
this._renderClosed();
|
|
}
|
|
this._toggleListeners();
|
|
this._openChangedAsync = null;
|
|
}, 1);
|
|
},
|
|
|
|
_canceledChanged: function() {
|
|
this.closingReason = this.closingReason || {};
|
|
this.closingReason.canceled = this.canceled;
|
|
},
|
|
|
|
_withBackdropChanged: function() {
|
|
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();
|
|
}
|
|
}
|
|
},
|
|
|
|
_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, 'keydown', this._boundOnCaptureKeydown, true);
|
|
},
|
|
|
|
// tasks which must occur before opening; e.g. making the element visible
|
|
_prepareRenderOpened: function() {
|
|
this._manager.addOverlay(this);
|
|
|
|
this._preparePositioning();
|
|
this.fit();
|
|
this._finishPositioning();
|
|
|
|
if (this.withBackdrop) {
|
|
this.backdropElement.prepare();
|
|
}
|
|
},
|
|
|
|
// 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() {
|
|
// focus the child node with [autofocus]
|
|
this._applyFocus();
|
|
|
|
this._observer = Polymer.dom(this).observeNodes(this.notifyResize);
|
|
this.fire('iron-overlay-opened');
|
|
},
|
|
|
|
_finishRenderClosed: function() {
|
|
// hide the overlay and remove the backdrop
|
|
this.resetFit();
|
|
this.style.display = 'none';
|
|
this._manager.removeOverlay(this);
|
|
|
|
this._applyFocus();
|
|
|
|
this.notifyResize();
|
|
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 = '';
|
|
},
|
|
|
|
_finishPositioning: function() {
|
|
this.style.display = 'none';
|
|
this.style.transform = this.style.webkitTransform = '';
|
|
// force layout to avoid application of transform
|
|
/** @suppress {suspiciousCode} */ this.offsetWidth;
|
|
this.style.transition = this.style.webkitTransition = '';
|
|
},
|
|
|
|
_applyFocus: function() {
|
|
if (this.opened) {
|
|
if (!this.noAutoFocus) {
|
|
this._focusNode.focus();
|
|
}
|
|
} else {
|
|
this._focusNode.blur();
|
|
this._manager.focusOverlay();
|
|
}
|
|
},
|
|
|
|
_onCaptureClick: function(event) {
|
|
if (this._manager.currentOverlay() === this &&
|
|
!this.noCancelOnOutsideClick &&
|
|
Polymer.dom(event).path.indexOf(this) === -1) {
|
|
this.cancel();
|
|
}
|
|
},
|
|
|
|
_onCaptureKeydown: function(event) {
|
|
var ESC = 27;
|
|
if (this._manager.currentOverlay() === this &&
|
|
!this.noCancelOnEscKey &&
|
|
event.keyCode === ESC) {
|
|
this.cancel();
|
|
}
|
|
},
|
|
|
|
_onIronResize: function() {
|
|
if (this.opened) {
|
|
this.refit();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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
|
|
*/
|
|
|
|
/**
|
|
* Fired after the `iron-overlay` closes.
|
|
* @event iron-overlay-closed
|
|
* @param {{canceled: (boolean|undefined)}} set to the `closingReason` attribute
|
|
*/
|
|
};
|
|
|
|
/** @polymerBehavior */
|
|
Polymer.IronOverlayBehavior = [Polymer.IronFitBehavior, Polymer.IronResizableBehavior, Polymer.IronOverlayBehaviorImpl];
|
|
|
|
|
|
</script>
|