update components
Conflicts: MediaBrowser.WebDashboard/dashboard-ui/bower_components/emby-webcomponents/.bower.json
This commit is contained in:
parent
d3f40bd6d9
commit
0c696294ae
42 changed files with 1514 additions and 361 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-overlay-behavior",
|
||||
"version": "1.1.2",
|
||||
"version": "1.2.0",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Provides a behavior for making an element an overlay",
|
||||
"private": true,
|
||||
|
@ -29,16 +29,16 @@
|
|||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": [],
|
||||
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
|
||||
"_release": "1.1.2",
|
||||
"_release": "1.2.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.2",
|
||||
"commit": "40e39a971474f48f5c2c8ee7b8568a0ad5426bd8"
|
||||
"tag": "v1.2.0",
|
||||
"commit": "1d8e1d29c601add9c135e5103c4d1d0d652dd957"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
@ -1,22 +1,25 @@
|
|||
language: node_js
|
||||
sudo: false
|
||||
before_script:
|
||||
- npm install web-component-tester
|
||||
- npm install bower
|
||||
- 'export PATH=$PWD/node_modules/.bin:$PATH'
|
||||
- npm install -g bower polylint web-component-tester
|
||||
- bower install
|
||||
- polylint
|
||||
env:
|
||||
global:
|
||||
- secure: H8AA9JkWfG/vc3MiimoIoYi45KD10hKzitLJnExkomgzFI/f5o9SGtwjCii5P8Kvf4xndftDjYwRgbYyJpSg0IJeq8rm1WS89cY8O6/1dlI/tK1j5xbVRrhqmRQncxUb3K4MAT6Z9br1jwEeamRa+NKmq+v+VEpQY5vwuQ/BHJw=
|
||||
- secure: EaE1AUVgWyn0Y6kqkb54z5r39RvTJzAOmeM0lRl7wXzr5k0mq3VGlxTksJqCVd1PdJESXEhy8eldBnlkwZir/imDTNQxKm13k7ZiFC0000XAzpLZElkH2cLlYCRWcuM+vS7dA9hytV0UcGK2VGqbxfpcesB20dPSneDEUuc5X64=
|
||||
node_js: 4
|
||||
- CXX=g++-4.8
|
||||
node_js: stable
|
||||
addons:
|
||||
firefox: latest
|
||||
apt:
|
||||
sources:
|
||||
- google-chrome
|
||||
- ubuntu-toolchain-r-test
|
||||
packages:
|
||||
- google-chrome-stable
|
||||
- g++-4.8
|
||||
sauce_connect: true
|
||||
script:
|
||||
- xvfb-run wct
|
||||
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-overlay-behavior",
|
||||
"version": "1.1.2",
|
||||
"version": "1.2.0",
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"description": "Provides a behavior for making an element an overlay",
|
||||
"private": true,
|
||||
|
@ -29,7 +29,7 @@
|
|||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
|
||||
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"web-component-tester": "polymer/web-component-tester#^3.4.0",
|
||||
"web-component-tester": "^4.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"ignore": []
|
||||
|
|
|
@ -85,13 +85,18 @@ Custom property | Description | Default
|
|||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'transitionend' : '_onTransitionend'
|
||||
},
|
||||
|
||||
/**
|
||||
* 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);
|
||||
this.style.zIndex = this._manager.currentOverlayZ() - 1;
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -109,9 +114,14 @@ Custom property | Description | Default
|
|||
* Hides the backdrop if needed.
|
||||
*/
|
||||
close: function() {
|
||||
// only need to make the backdrop invisible if this is called by the last overlay with a backdrop
|
||||
if (this._manager.getBackdrops().length < 2) {
|
||||
// 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) {
|
||||
this._setOpened(false);
|
||||
// complete() will be called after the transition is done.
|
||||
// If animations are disabled via custom-styles, user is expected to call
|
||||
// complete() after close()
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -123,6 +133,12 @@ Custom property | Description | Default
|
|||
if (this._manager.getBackdrops().length === 0 && this.parentNode) {
|
||||
Polymer.dom(this.parentNode).removeChild(this);
|
||||
}
|
||||
},
|
||||
|
||||
_onTransitionend: function (event) {
|
||||
if (event && event.target === this) {
|
||||
this.complete();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
@ -80,8 +80,8 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
* Set to true to display a backdrop behind the overlay.
|
||||
*/
|
||||
withBackdrop: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
observer: '_withBackdropChanged',
|
||||
type: Boolean
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -148,17 +148,13 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
* @type Node
|
||||
*/
|
||||
get backdropElement() {
|
||||
return this._backdrop;
|
||||
return this._manager.backdropElement;
|
||||
},
|
||||
|
||||
get _focusNode() {
|
||||
return Polymer.dom(this).querySelector('[autofocus]') || this;
|
||||
},
|
||||
|
||||
registered: function() {
|
||||
this._backdrop = document.createElement('iron-overlay-backdrop');
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
this._ensureSetup();
|
||||
},
|
||||
|
@ -172,7 +168,7 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
|
||||
detached: function() {
|
||||
this.opened = false;
|
||||
this._completeBackdrop();
|
||||
this._manager.trackBackdrop(this);
|
||||
this._manager.removeOverlay(this);
|
||||
},
|
||||
|
||||
|
@ -180,6 +176,7 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
* Toggle the opened state of the overlay.
|
||||
*/
|
||||
toggle: function() {
|
||||
this._setCanceled(false);
|
||||
this.opened = !this.opened;
|
||||
},
|
||||
|
||||
|
@ -187,16 +184,16 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
* Open the overlay.
|
||||
*/
|
||||
open: function() {
|
||||
this._setCanceled(false);
|
||||
this.opened = true;
|
||||
this.closingReason = {canceled: false};
|
||||
},
|
||||
|
||||
/**
|
||||
* Close the overlay.
|
||||
*/
|
||||
close: function() {
|
||||
this.opened = false;
|
||||
this._setCanceled(false);
|
||||
this.opened = false;
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -208,8 +205,8 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
return;
|
||||
}
|
||||
|
||||
this.opened = false;
|
||||
this._setCanceled(true);
|
||||
this.opened = false;
|
||||
},
|
||||
|
||||
_ensureSetup: function() {
|
||||
|
@ -226,6 +223,7 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
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
|
||||
|
@ -233,30 +231,32 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
this._callOpenedWhenReady = this.opened;
|
||||
return;
|
||||
}
|
||||
if (this._openChangedAsync) {
|
||||
this.cancelAsync(this._openChangedAsync);
|
||||
}
|
||||
|
||||
this._toggleListeners();
|
||||
this._manager.trackBackdrop(this);
|
||||
|
||||
if (this.opened) {
|
||||
this._prepareRenderOpened();
|
||||
}
|
||||
|
||||
// async here to allow overlay layer to become visible.
|
||||
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 transitions will go
|
||||
/** @suppress {suspiciousCode} */ this.offsetWidth;
|
||||
// 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() {
|
||||
|
@ -264,6 +264,21 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
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
|
||||
|
@ -280,30 +295,22 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
}
|
||||
},
|
||||
|
||||
_toggleListeners: function() {
|
||||
if (this._toggleListenersAsync) {
|
||||
this.cancelAsync(this._toggleListenersAsync);
|
||||
}
|
||||
// async so we don't auto-close immediately via a click.
|
||||
this._toggleListenersAsync = this.async(function() {
|
||||
this._toggleListener(this.opened, document, 'tap', this._boundOnCaptureClick, true);
|
||||
this._toggleListener(this.opened, document, 'keydown', this._boundOnCaptureKeydown, true);
|
||||
this._toggleListenersAsync = null;
|
||||
}, 1);
|
||||
_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);
|
||||
|
||||
if (this.withBackdrop) {
|
||||
this.backdropElement.prepare();
|
||||
this._manager.trackBackdrop(this);
|
||||
}
|
||||
|
||||
this._preparePositioning();
|
||||
this.fit();
|
||||
this._finishPositioning();
|
||||
|
||||
if (this.withBackdrop) {
|
||||
this.backdropElement.prepare();
|
||||
}
|
||||
},
|
||||
|
||||
// tasks which cause the overlay to actually open; typically play an
|
||||
|
@ -322,52 +329,24 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
this._finishRenderClosed();
|
||||
},
|
||||
|
||||
_onTransitionend: function(event) {
|
||||
// make sure this is our transition event.
|
||||
if (event && event.target !== this) {
|
||||
return;
|
||||
}
|
||||
if (this.opened) {
|
||||
this._finishRenderOpened();
|
||||
} else {
|
||||
this._finishRenderClosed();
|
||||
}
|
||||
},
|
||||
|
||||
_finishRenderOpened: function() {
|
||||
// focus the child node with [autofocus]
|
||||
if (!this.noAutoFocus) {
|
||||
this._focusNode.focus();
|
||||
}
|
||||
this._applyFocus();
|
||||
|
||||
this._observer = Polymer.dom(this).observeNodes(this.notifyResize);
|
||||
this.fire('iron-overlay-opened');
|
||||
|
||||
this._squelchNextResize = true;
|
||||
this.async(this.notifyResize);
|
||||
},
|
||||
|
||||
_finishRenderClosed: function() {
|
||||
// hide the overlay and remove the backdrop
|
||||
this.resetFit();
|
||||
this.style.display = 'none';
|
||||
this._completeBackdrop();
|
||||
this._manager.removeOverlay(this);
|
||||
|
||||
this._focusNode.blur();
|
||||
// focus the next overlay, if there is one
|
||||
this._manager.focusOverlay();
|
||||
this._applyFocus();
|
||||
|
||||
this.notifyResize();
|
||||
this.fire('iron-overlay-closed', this.closingReason);
|
||||
|
||||
this._squelchNextResize = true;
|
||||
this.async(this.notifyResize);
|
||||
},
|
||||
|
||||
_completeBackdrop: function() {
|
||||
if (this.withBackdrop) {
|
||||
this._manager.trackBackdrop(this);
|
||||
this.backdropElement.complete();
|
||||
}
|
||||
},
|
||||
|
||||
_preparePositioning: function() {
|
||||
|
@ -396,8 +375,8 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
},
|
||||
|
||||
_onCaptureClick: function(event) {
|
||||
if (!this.noCancelOnOutsideClick &&
|
||||
this._manager.currentOverlay() === this &&
|
||||
if (this._manager.currentOverlay() === this &&
|
||||
!this.noCancelOnOutsideClick &&
|
||||
Polymer.dom(event).path.indexOf(this) === -1) {
|
||||
this.cancel();
|
||||
}
|
||||
|
@ -405,18 +384,14 @@ context. You should place this element as a child of `<body>` whenever possible.
|
|||
|
||||
_onCaptureKeydown: function(event) {
|
||||
var ESC = 27;
|
||||
if (!this.noCancelOnEscKey && (event.keyCode === ESC)) {
|
||||
if (this._manager.currentOverlay() === this &&
|
||||
!this.noCancelOnEscKey &&
|
||||
event.keyCode === ESC) {
|
||||
this.cancel();
|
||||
event.stopPropagation();
|
||||
event.stopImmediatePropagation();
|
||||
}
|
||||
},
|
||||
|
||||
_onIronResize: function() {
|
||||
if (this._squelchNextResize) {
|
||||
this._squelchNextResize = false;
|
||||
return;
|
||||
}
|
||||
if (this.opened) {
|
||||
this.refit();
|
||||
}
|
||||
|
|
|
@ -12,104 +12,148 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
<script>
|
||||
|
||||
Polymer.IronOverlayManager = {
|
||||
|
||||
_overlays: [],
|
||||
|
||||
// iframes have a default z-index of 100, so this default should be at least
|
||||
// that.
|
||||
_minimumZ: 101,
|
||||
|
||||
_backdrops: [],
|
||||
|
||||
_applyOverlayZ: function(overlay, aboveZ) {
|
||||
this._setZ(overlay, aboveZ + 2);
|
||||
},
|
||||
|
||||
_setZ: function(element, z) {
|
||||
element.style.zIndex = z;
|
||||
},
|
||||
|
||||
// track overlays for z-index and focus managemant
|
||||
addOverlay: function(overlay) {
|
||||
var minimumZ = Math.max(this.currentOverlayZ(), this._minimumZ);
|
||||
this._overlays.push(overlay);
|
||||
var newZ = this.currentOverlayZ();
|
||||
if (newZ <= minimumZ) {
|
||||
this._applyOverlayZ(overlay, minimumZ);
|
||||
}
|
||||
},
|
||||
|
||||
removeOverlay: function(overlay) {
|
||||
var i = this._overlays.indexOf(overlay);
|
||||
if (i >= 0) {
|
||||
this._overlays.splice(i, 1);
|
||||
this._setZ(overlay, '');
|
||||
}
|
||||
},
|
||||
|
||||
currentOverlay: function() {
|
||||
var i = this._overlays.length - 1;
|
||||
while (this._overlays[i] && !this._overlays[i].opened) {
|
||||
--i;
|
||||
}
|
||||
return this._overlays[i];
|
||||
},
|
||||
|
||||
currentOverlayZ: function() {
|
||||
var z = this._minimumZ;
|
||||
var current = this.currentOverlay();
|
||||
if (current) {
|
||||
var z1 = window.getComputedStyle(current).zIndex;
|
||||
if (!isNaN(z1)) {
|
||||
z = Number(z1);
|
||||
}
|
||||
}
|
||||
return z;
|
||||
},
|
||||
|
||||
/**
|
||||
* @struct
|
||||
* @constructor
|
||||
*/
|
||||
Polymer.IronOverlayManagerClass = function() {
|
||||
this._overlays = [];
|
||||
/**
|
||||
* Ensures that the minimum z-index of new overlays is at least `minimumZ`.
|
||||
* This does not effect the z-index of any existing overlays.
|
||||
*
|
||||
* @param {number} minimumZ
|
||||
* iframes have a default z-index of 100, so this default should be at least
|
||||
* that.
|
||||
* @private {number}
|
||||
*/
|
||||
ensureMinimumZ: function(minimumZ) {
|
||||
this._minimumZ = Math.max(this._minimumZ, minimumZ);
|
||||
},
|
||||
this._minimumZ = 101;
|
||||
|
||||
focusOverlay: function() {
|
||||
var current = this.currentOverlay();
|
||||
// We have to be careful to focus the next overlay _after_ any current
|
||||
// transitions are complete (due to the state being toggled prior to the
|
||||
// transition). Otherwise, we risk infinite recursion when a transitioning
|
||||
// (closed) overlay becomes the current overlay.
|
||||
//
|
||||
// NOTE: We make the assumption that any overlay that completes a transition
|
||||
// will call into focusOverlay to kick the process back off. Currently:
|
||||
// transitionend -> _applyFocus -> focusOverlay.
|
||||
if (current && !current.transitioning) {
|
||||
current._applyFocus();
|
||||
}
|
||||
},
|
||||
|
||||
trackBackdrop: function(element) {
|
||||
// backdrops contains the overlays with a backdrop that are currently
|
||||
// visible
|
||||
if (element.opened) {
|
||||
this._backdrops.push(element);
|
||||
} else {
|
||||
var index = this._backdrops.indexOf(element);
|
||||
if (index >= 0) {
|
||||
this._backdrops.splice(index, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
getBackdrops: function() {
|
||||
return this._backdrops;
|
||||
}
|
||||
this._backdrops = [];
|
||||
}
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype._applyOverlayZ = function(overlay, aboveZ) {
|
||||
this._setZ(overlay, aboveZ + 2);
|
||||
};
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype._setZ = function(element, z) {
|
||||
element.style.zIndex = z;
|
||||
};
|
||||
|
||||
/**
|
||||
* track overlays for z-index and focus managemant
|
||||
*/
|
||||
Polymer.IronOverlayManagerClass.prototype.addOverlay = function(overlay) {
|
||||
var minimumZ = Math.max(this.currentOverlayZ(), this._minimumZ);
|
||||
this._overlays.push(overlay);
|
||||
var newZ = this.currentOverlayZ();
|
||||
if (newZ <= minimumZ) {
|
||||
this._applyOverlayZ(overlay, minimumZ);
|
||||
}
|
||||
};
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype.removeOverlay = function(overlay) {
|
||||
var i = this._overlays.indexOf(overlay);
|
||||
if (i >= 0) {
|
||||
this._overlays.splice(i, 1);
|
||||
this._setZ(overlay, '');
|
||||
}
|
||||
};
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype.currentOverlay = function() {
|
||||
var i = this._overlays.length - 1;
|
||||
while (this._overlays[i] && !this._overlays[i].opened) {
|
||||
--i;
|
||||
}
|
||||
return this._overlays[i];
|
||||
};
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype.currentOverlayZ = function() {
|
||||
return this._getOverlayZ(this.currentOverlay());
|
||||
};
|
||||
|
||||
/**
|
||||
* Ensures that the minimum z-index of new overlays is at least `minimumZ`.
|
||||
* This does not effect the z-index of any existing overlays.
|
||||
*
|
||||
* @param {number} minimumZ
|
||||
*/
|
||||
Polymer.IronOverlayManagerClass.prototype.ensureMinimumZ = function(minimumZ) {
|
||||
this._minimumZ = Math.max(this._minimumZ, minimumZ);
|
||||
};
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype.focusOverlay = function() {
|
||||
var current = this.currentOverlay();
|
||||
// We have to be careful to focus the next overlay _after_ any current
|
||||
// transitions are complete (due to the state being toggled prior to the
|
||||
// transition). Otherwise, we risk infinite recursion when a transitioning
|
||||
// (closed) overlay becomes the current overlay.
|
||||
//
|
||||
// NOTE: We make the assumption that any overlay that completes a transition
|
||||
// will call into focusOverlay to kick the process back off. Currently:
|
||||
// transitionend -> _applyFocus -> focusOverlay.
|
||||
if (current && !current.transitioning) {
|
||||
current._applyFocus();
|
||||
}
|
||||
};
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype.trackBackdrop = function(element) {
|
||||
// backdrops contains the overlays with a backdrop that are currently
|
||||
// visible
|
||||
var index = this._backdrops.indexOf(element);
|
||||
if (element.opened && element.withBackdrop) {
|
||||
// no duplicates
|
||||
if (index === -1) {
|
||||
this._backdrops.push(element);
|
||||
}
|
||||
} else if (index >= 0) {
|
||||
this._backdrops.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
Object.defineProperty(Polymer.IronOverlayManagerClass.prototype, "backdropElement", {
|
||||
get: function() {
|
||||
if (!this._backdropElement) {
|
||||
this._backdropElement = document.createElement('iron-overlay-backdrop');
|
||||
}
|
||||
return this._backdropElement;
|
||||
}
|
||||
});
|
||||
|
||||
Polymer.IronOverlayManagerClass.prototype.getBackdrops = function() {
|
||||
return this._backdrops;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the z-index for the backdrop.
|
||||
*/
|
||||
Polymer.IronOverlayManagerClass.prototype.backdropZ = function() {
|
||||
return this._getOverlayZ(this._overlayWithBackdrop()) - 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the first opened overlay that has a backdrop.
|
||||
*/
|
||||
Polymer.IronOverlayManagerClass.prototype._overlayWithBackdrop = function() {
|
||||
for (var i = 0; i < this._overlays.length; i++) {
|
||||
if (this._overlays[i].opened && this._overlays[i].withBackdrop) {
|
||||
return this._overlays[i];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Calculates the minimum z-index for the overlay.
|
||||
*/
|
||||
Polymer.IronOverlayManagerClass.prototype._getOverlayZ = function(overlay) {
|
||||
var z = this._minimumZ;
|
||||
if (overlay) {
|
||||
var z1 = Number(window.getComputedStyle(overlay).zIndex);
|
||||
// Check if is a number
|
||||
// Number.isNaN not supported in IE 10+
|
||||
if (z1 === z1) {
|
||||
z = z1;
|
||||
}
|
||||
}
|
||||
return z;
|
||||
};
|
||||
|
||||
Polymer.IronOverlayManager = new Polymer.IronOverlayManagerClass();
|
||||
|
||||
</script>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
<!DOCTYPE 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
|
||||
|
@ -7,9 +6,7 @@ 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
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
--><html><head>
|
||||
|
||||
<title>iron-overlay-behavior tests</title>
|
||||
|
||||
|
@ -23,12 +20,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
WCT.loadSuites([
|
||||
'iron-overlay-behavior.html',
|
||||
'iron-overlay-behavior.html?dom=shadow'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
|
@ -22,6 +22,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<script src="../../web-component-tester/browser.js"></script>
|
||||
<link rel="import" href="../../iron-test-helpers/iron-test-helpers.html">
|
||||
<link rel="import" href="test-overlay.html">
|
||||
<link rel="import" href="test-overlay2.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
@ -79,6 +80,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="backdrop-different-elements">
|
||||
<template>
|
||||
<test-overlay with-backdrop class="overlay-1">
|
||||
Overlay 1 with backdrop
|
||||
</test-overlay>
|
||||
<test-overlay2 with-backdrop class="overlay-2">
|
||||
Overlay 2 with backdrop
|
||||
</test-overlay2>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
function runAfterOpen(overlay, cb) {
|
||||
|
@ -113,8 +125,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
overlay = fixture('opened');
|
||||
overlay.addEventListener('iron-overlay-opened', function() {
|
||||
var s = getComputedStyle(overlay);
|
||||
assert.isTrue(parseFloat(s.left) === (window.innerWidth - overlay.offsetWidth)/2, 'centered horizontally');
|
||||
assert.isTrue(parseFloat(s.top) === (window.innerHeight - overlay.offsetHeight)/2, 'centered vertically');
|
||||
assert.equal(parseFloat(s.left), (window.innerWidth - overlay.offsetWidth)/2, 'centered horizontally');
|
||||
assert.equal(parseFloat(s.top), (window.innerHeight - overlay.offsetHeight)/2, 'centered vertically');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
@ -136,6 +148,60 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
overlay.opened = true;
|
||||
});
|
||||
|
||||
test('open overlay refits on iron-resize', function() {
|
||||
var overlay = fixture('opened');
|
||||
var spy = sinon.spy(overlay, 'refit');
|
||||
overlay.fire('iron-resize');
|
||||
assert.isTrue(spy.called, 'overlay should refit');
|
||||
});
|
||||
|
||||
test('closed overlay does not refit on iron-resize', function() {
|
||||
var spy = sinon.spy(overlay, 'refit');
|
||||
overlay.fire('iron-resize');
|
||||
assert.isFalse(spy.called, 'overlay should not refit');
|
||||
});
|
||||
|
||||
test('open() triggers iron-resize', function(done) {
|
||||
// Ignore iron-resize triggered by window resize.
|
||||
var callCount = 0;
|
||||
window.addEventListener('resize', function() { callCount--; }, true);
|
||||
overlay.addEventListener('iron-resize', function () { callCount++; });
|
||||
runAfterOpen(overlay, function () {
|
||||
assert.equal(callCount, 1, 'iron-resize should be called once');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('closed overlay does not trigger iron-resize when its content changes', function(done) {
|
||||
// Ignore iron-resize triggered by window resize.
|
||||
var callCount = 0;
|
||||
window.addEventListener('resize', function() { callCount--; }, true);
|
||||
overlay.addEventListener('iron-resize', function () { callCount++; });
|
||||
var child = document.createElement('div');
|
||||
child.innerHTML = 'hi';
|
||||
Polymer.dom(overlay).appendChild(child);
|
||||
overlay.async(function () {
|
||||
assert.equal(callCount, 0, 'iron-resize should not be called');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
|
||||
test('open overlay triggers iron-resize when its content changes', function(done) {
|
||||
runAfterOpen(overlay, function () {
|
||||
// Ignore iron-resize triggered by window resize.
|
||||
var callCount = 0;
|
||||
window.addEventListener('resize', function() { callCount--; }, true);
|
||||
overlay.addEventListener('iron-resize', function () { callCount++; });
|
||||
var child = document.createElement('div');
|
||||
child.innerHTML = 'hi';
|
||||
Polymer.dom(overlay).appendChild(child);
|
||||
overlay.async(function () {
|
||||
assert.equal(callCount, 1, 'iron-resize should be called once');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
||||
test('close an overlay quickly after open', function(done) {
|
||||
// first, open the overlay
|
||||
overlay.open();
|
||||
|
@ -169,11 +235,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
test('clicking an overlay does not close it', function(done) {
|
||||
runAfterOpen(overlay, function() {
|
||||
overlay.addEventListener('iron-overlay-closed', function() {
|
||||
assert('iron-overlay-closed should not fire');
|
||||
});
|
||||
var spy = sinon.stub();
|
||||
overlay.addEventListener('iron-overlay-closed', spy);
|
||||
overlay.fire('click');
|
||||
setTimeout(function() {
|
||||
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
|
@ -211,13 +277,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
overlay.addEventListener('iron-overlay-canceled', function(event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
var closedListener = function(event) {
|
||||
throw new Error('iron-overlay-closed should not fire');
|
||||
};
|
||||
overlay.addEventListener('iron-overlay-closed', closedListener);
|
||||
var spy = sinon.stub();
|
||||
overlay.addEventListener('iron-overlay-closed', spy);
|
||||
MockInteractions.tap(document.body);
|
||||
setTimeout(function() {
|
||||
overlay.removeEventListener('iron-overlay-closed', closedListener);
|
||||
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
|
@ -249,11 +313,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
test('no-cancel-on-outside-click property', function(done) {
|
||||
overlay.noCancelOnOutsideClick = true;
|
||||
runAfterOpen(overlay, function() {
|
||||
overlay.addEventListener('iron-overlay-closed', function() {
|
||||
assert('iron-overlay-closed should not fire');
|
||||
});
|
||||
var spy = sinon.stub();
|
||||
overlay.addEventListener('iron-overlay-closed', spy);
|
||||
MockInteractions.tap(document.body);
|
||||
setTimeout(function() {
|
||||
assert.isFalse(spy.called, 'iron-overlay-closed should not fire');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
|
@ -262,13 +326,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
test('no-cancel-on-esc-key property', function(done) {
|
||||
overlay.noCancelOnEscKey = true;
|
||||
runAfterOpen(overlay, function() {
|
||||
overlay.addEventListener('iron-overlay-closed', function() {
|
||||
assert('iron-overlay-cancel should not fire');
|
||||
});
|
||||
var spy = sinon.stub();
|
||||
overlay.addEventListener('iron-overlay-closed', spy);
|
||||
fireEvent('keydown', {
|
||||
keyCode: 27
|
||||
}, document);
|
||||
setTimeout(function() {
|
||||
assert.isFalse(spy.called, 'iron-overlay-cancel should not fire');
|
||||
done();
|
||||
}, 10);
|
||||
});
|
||||
|
@ -383,6 +447,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
Polymer.dom(backdrop.parentNode).removeChild(backdrop);
|
||||
Polymer.dom.flush();
|
||||
assert.isNull(backdrop.parentNode, 'backdrop is removed from DOM');
|
||||
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), (0));
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
@ -393,6 +458,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('manager backdrops immediately updated on opened changes', function() {
|
||||
overlays[0].opened = true;
|
||||
assert.equal(overlays[0]._manager.getBackdrops().length, 1, 'overlay added to manager backdrops');
|
||||
overlays[0].opened = false;
|
||||
assert.equal(overlays[0]._manager.getBackdrops().length, 0, 'overlay removed from manager backdrops');
|
||||
});
|
||||
});
|
||||
|
||||
suite('multiple overlays with backdrop', function() {
|
||||
|
@ -419,8 +491,72 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
});
|
||||
});
|
||||
|
||||
test('updating with-backdrop to false closes backdrop', function(done) {
|
||||
runAfterOpen(overlays[0], function() {
|
||||
overlays[0].withBackdrop = false;
|
||||
// Don't wait for animations.
|
||||
overlays[0].backdropElement.complete();
|
||||
|
||||
assert.isFalse(overlays[0].backdropElement.opened, 'backdrop is closed');
|
||||
assert.isNotObject(overlays[0].backdropElement.parentNode, 'backdrop is removed from document');
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('updating with-backdrop updates z-index', function(done) {
|
||||
runAfterOpen(overlays[0], function() {
|
||||
runAfterOpen(overlays[1], function() {
|
||||
overlays[0].withBackdrop = false;
|
||||
var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10);
|
||||
var style1Z = parseInt(window.getComputedStyle(overlays[1]).zIndex, 10);
|
||||
var bgStyleZ = parseInt(window.getComputedStyle(overlays[0].backdropElement).zIndex, 10);
|
||||
assert.isTrue(style1Z > bgStyleZ, 'overlays[1] has higher z-index than backdrop');
|
||||
assert.isTrue(styleZ < bgStyleZ, 'overlays[0] has lower z-index than backdrop');
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
suite('multiple overlays with backdrop implemented in different elements', function () {
|
||||
var overlays;
|
||||
|
||||
setup(function() {
|
||||
overlays = fixture('backdrop-different-elements');
|
||||
});
|
||||
|
||||
test('multiple overlays share the same backdrop', function() {
|
||||
assert.equal(overlays[0].backdropElement, overlays[1].backdropElement);
|
||||
});
|
||||
|
||||
test('when overlays close, the backdrop is closed', function(done) {
|
||||
runAfterOpen(overlays[0], function () {
|
||||
assert.lengthOf(document.querySelectorAll('iron-overlay-backdrop'), 1);
|
||||
|
||||
// After second overlay is closed, both backdrops should be hidden
|
||||
overlays[1].addEventListener('iron-overlay-closed', function() {
|
||||
Polymer.Base.async(function () {
|
||||
assert.isFalse(overlays[1].backdropElement.opened, 'second overlay backdrop is closed');
|
||||
assert.isFalse(overlays[0].backdropElement.opened, 'first overlay backdrop is closed');
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
// After second overlay is opened, immediately close it
|
||||
overlays[1].addEventListener('iron-overlay-opened', function() {
|
||||
Polymer.Base.async(function () {
|
||||
overlays[1].close();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
// Immediately close first overlay and open the other one
|
||||
overlays[0].close();
|
||||
overlays[1].open();
|
||||
});
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
suite('a11y', function() {
|
||||
|
||||
test('overlay has aria-hidden=true when opened', function() {
|
||||
|
|
49
dashboard-ui/bower_components/iron-overlay-behavior/test/test-overlay2.html
vendored
Normal file
49
dashboard-ui/bower_components/iron-overlay-behavior/test/test-overlay2.html
vendored
Normal file
|
@ -0,0 +1,49 @@
|
|||
<!--
|
||||
@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-overlay-behavior.html">
|
||||
|
||||
<dom-module id="test-overlay2">
|
||||
|
||||
<style>
|
||||
|
||||
:host {
|
||||
background: white;
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<content></content>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'test-overlay2',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronOverlayBehavior
|
||||
]
|
||||
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
</script>
|
Loading…
Add table
Add a link
Reference in a new issue