1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2016-03-11 22:29:37 -05:00
parent 1f41a29864
commit ba749de15d
18 changed files with 482 additions and 369 deletions

View file

@ -16,12 +16,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.1.33",
"_release": "1.1.33",
"version": "1.1.37",
"_release": "1.1.37",
"_resolution": {
"type": "version",
"tag": "1.1.33",
"commit": "9933aefe464ffcf5a3a29851ec0f34ff088d0ff5"
"tag": "1.1.37",
"commit": "7235838b8cff53a9bb2aea7d6c6418160728cd3a"
},
"_source": "git://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "~1.1.5",

View file

@ -99,6 +99,7 @@
browser.web0s = userAgent.toLowerCase().indexOf('Web0S'.toLowerCase()) != -1;
browser.tv = isTv();
browser.operaTv = browser.tv && userAgent.toLowerCase().indexOf('opr/') != -1;
return browser;
});

View file

@ -88,6 +88,12 @@ define(['browser'], function (browser) {
// Unfortunately there's no real way to detect mkv support
if (browser.chrome) {
// Not supported on opera tv
if (browser.operaTv) {
return false;
}
return true;
}
@ -125,6 +131,15 @@ define(['browser'], function (browser) {
case 'wmv':
supported = browser.tizen || browser.web0s;
break;
case 'ts':
supported = browser.tizen || browser.web0s;
if (supported) {
return {
Container: 'ts,mpegts',
Type: 'Video'
};
}
break;
default:
break;
}
@ -231,17 +246,8 @@ define(['browser'], function (browser) {
});
}
if (canPlayTs) {
profile.DirectPlayProfiles.push({
Container: 'ts,mpegts',
Type: 'Video',
VideoCodec: 'h264',
AudioCodec: videoAudioCodecs.join(',')
});
}
// These are formats we can't test for but some devices will support
['m2ts', 'wmv'].map(getDirectPlayProfileForVideoContainer).filter(function (i) {
['m2ts', 'wmv', 'ts'].map(getDirectPlayProfileForVideoContainer).filter(function (i) {
return i != null;
}).forEach(function (i) {

View file

@ -5,8 +5,8 @@ define(['visibleinviewport', 'imageFetcher'], function (visibleinviewport, image
var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
function isVisible(elem) {
return visibleinviewport(elem, true, thresholdX, thresholdY);
function isVisible(elem, windowSize) {
return visibleinviewport(elem, true, thresholdX, thresholdY, windowSize);
}
var self = {};
@ -56,6 +56,11 @@ define(['visibleinviewport', 'imageFetcher'], function (visibleinviewport, image
var anyFound = false;
var out = false;
var windowSize = {
innerHeight: window.innerHeight,
innerWidth: window.innerWidth
};
// TODO: This out construct assumes left to right, top to bottom
for (var i = 0, length = images.length; i < length; i++) {
@ -64,7 +69,7 @@ define(['visibleinviewport', 'imageFetcher'], function (visibleinviewport, image
return;
}
var img = images[i];
if (!out && isVisible(img)) {
if (!out && isVisible(img, windowSize)) {
anyFound = true;
fillImage(img);
} else {

View file

@ -1,31 +1,54 @@
define(['focusManager'], function (focusManager) {
function getOffset(elem) {
function getOffsets(elems) {
var doc = document;
var box = { top: 0, left: 0 };
var results = [];
if (!doc) {
return box;
return results;
}
var docElem = doc.documentElement;
var docElemValues = {
clientTop: docElem.clientTop,
clientLeft: docElem.clientLeft
};
var win = doc.defaultView;
var winValues = {
pageXOffset: win.pageXOffset,
pageYOffset: win.pageYOffset
};
var box;
var elem;
for (var i = 0, length = elems.length; i < length; i++) {
elem = elems[i];
// Support: BlackBerry 5, iOS 3 (original iPhone)
// If we don't have gBCR, just use 0,0 rather than error
if (elem.getBoundingClientRect) {
box = elem.getBoundingClientRect();
} else {
box = { top: 0, left: 0 };
}
var win = doc.defaultView;
return {
top: box.top + win.pageYOffset - docElem.clientTop,
left: box.left + win.pageXOffset - docElem.clientLeft
results[i] = {
top: box.top + winValues.pageYOffset - docElemValues.clientTop,
left: box.left + winValues.pageXOffset - docElemValues.clientLeft
};
}
return results;
}
function getPosition(scrollContainer, item, horizontal) {
var slideeOffset = getOffset(scrollContainer);
var itemOffset = getOffset(item);
var offsets = getOffsets([scrollContainer, item]);
var slideeOffset = offsets[0];
var itemOffset = offsets[1];
var offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
var size = item[horizontal ? 'offsetWidth' : 'offsetHeight'];

View file

@ -10,18 +10,23 @@
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
function visibleInViewport(elem, partial, thresholdX, thresholdY) {
function visibleInViewport(elem, partial, thresholdX, thresholdY, windowSize) {
thresholdX = thresholdX || 0;
thresholdY = thresholdY || 0;
var vpWidth = window.innerWidth,
vpHeight = window.innerHeight;
if (!elem.getBoundingClientRect){
if (!elem.getBoundingClientRect) {
return true;
}
windowSize = windowSize || {
innerHeight: window.innerHeight,
innerWidth: window.innerWidth
};
var vpWidth = windowSize.innerWidth,
vpHeight = windowSize.innerHeight;
// Use this native browser method, if available.
var rec = elem.getBoundingClientRect(),
tViz = rec.top >= 0 && rec.top < vpHeight + thresholdY,

View file

@ -1,6 +1,6 @@
{
"name": "iron-dropdown",
"version": "1.2.0",
"version": "1.3.0",
"description": "An unstyled element that works similarly to a native browser select",
"authors": [
"The Polymer Authors"
@ -36,11 +36,11 @@
"iron-image": "polymerelements/iron-image#^1.0.0"
},
"ignore": [],
"_release": "1.2.0",
"_release": "1.3.0",
"_resolution": {
"type": "version",
"tag": "v1.2.0",
"commit": "f864191c6ffbd3aaddea8102102ab40137046327"
"tag": "v1.3.0",
"commit": "9d6bb9e7a8150430e61559f5a0827526d2eefaa4"
},
"_source": "git://github.com/polymerelements/iron-dropdown.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "iron-dropdown",
"version": "1.2.0",
"version": "1.3.0",
"description": "An unstyled element that works similarly to a native browser select",
"authors": [
"The Polymer Authors"

View file

@ -175,9 +175,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
},
_scrollInteractionHandler: function(event) {
var scrolledElement =
/** @type {HTMLElement} */(Polymer.dom(event).rootTarget);
if (Polymer
.IronDropdownScrollManager
.elementIsScrollLocked(Polymer.dom(event).rootTarget)) {
.elementIsScrollLocked(scrolledElement)) {
if (event.type === 'keydown' &&
!Polymer.IronDropdownScrollManager._isScrollingKeypress(event)) {
return;

View file

@ -143,8 +143,7 @@ method is called on the element.
* it is opened.
*/
positionTarget: {
type: Object,
observer: '_positionTargetChanged'
type: Object
},
/**
@ -189,15 +188,6 @@ method is called on the element.
allowOutsideScroll: {
type: Boolean,
value: false
},
/**
* We memoize the positionTarget bounding rectangle so that we can
* limit the number of times it is queried per resize / relayout.
* @type {?Object}
*/
_positionRectMemo: {
type: Object
}
},
@ -206,13 +196,13 @@ method is called on the element.
},
observers: [
'_updateOverlayPosition(verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)'
'_updateOverlayPosition(positionTarget, verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)'
],
attached: function() {
if (this.positionTarget === undefined) {
this.positionTarget = this._defaultPositionTarget;
}
this.positionTarget = this.positionTarget || this._defaultPositionTarget;
// Memoize this to avoid expensive calculations & relayouts.
this._isRTL = window.getComputedStyle(this).direction == 'rtl';
},
/**
@ -230,13 +220,6 @@ method is called on the element.
return this.focusTarget || this.containedElement;
},
/**
* Whether the text direction is RTL
*/
_isRTL: function() {
return window.getComputedStyle(this).direction == 'rtl';
},
/**
* The element that should be used to position the dropdown when
* it opens, if no position target is configured.
@ -252,31 +235,32 @@ method is called on the element.
},
/**
* The bounding rect of the position target.
* The horizontal align value, accounting for the RTL/LTR text direction.
*/
get _positionRect() {
if (!this._positionRectMemo && this.positionTarget) {
this._positionRectMemo = this.positionTarget.getBoundingClientRect();
get _localeHorizontalAlign() {
// In RTL, "left" becomes "right".
if (this._isRTL) {
return this.horizontalAlign === 'right' ? 'left' : 'right';
} else {
return this.horizontalAlign;
}
return this._positionRectMemo;
},
/**
* The horizontal offset value used to position the dropdown.
* @param {ClientRect} dropdownRect
* @param {ClientRect} positionRect
* @param {boolean=false} fromRight
* @return {number} pixels
* @private
*/
get _horizontalAlignTargetValue() {
_horizontalAlignTargetValue: function(dropdownRect, positionRect, fromRight) {
var target;
// In RTL, the direction flips, so what is "right" in LTR becomes "left".
var isRTL = this._isRTL();
if ((!isRTL && this.horizontalAlign === 'right') ||
(isRTL && this.horizontalAlign === 'left')) {
target = document.documentElement.clientWidth - this._positionRect.right;
if (fromRight) {
target = document.documentElement.clientWidth - positionRect.right - (this._fitWidth - dropdownRect.right);
} else {
target = this._positionRect.left;
target = positionRect.left - dropdownRect.left;
}
target += this.horizontalOffset;
return Math.max(target, 0);
@ -284,33 +268,24 @@ method is called on the element.
/**
* The vertical offset value used to position the dropdown.
* @param {ClientRect} dropdownRect
* @param {ClientRect} positionRect
* @param {boolean=false} fromBottom
* @return {number} pixels
* @private
*/
get _verticalAlignTargetValue() {
_verticalAlignTargetValue: function(dropdownRect, positionRect, fromBottom) {
var target;
if (this.verticalAlign === 'bottom') {
target = document.documentElement.clientHeight - this._positionRect.bottom;
if (fromBottom) {
target = document.documentElement.clientHeight - positionRect.bottom - (this._fitHeight - dropdownRect.bottom);
} else {
target = this._positionRect.top;
target = positionRect.top - dropdownRect.top;
}
target += this.verticalOffset;
return Math.max(target, 0);
},
/**
* The horizontal align value, accounting for the RTL/LTR text direction.
*/
get _localeHorizontalAlign() {
// In RTL, "left" becomes "right".
if (this._isRTL()) {
return this.horizontalAlign === 'right' ? 'left' : 'right';
} else {
return this.horizontalAlign;
}
},
/**
* Called when the value of `opened` changes.
*
@ -321,7 +296,8 @@ method is called on the element.
this.cancel();
} else {
this.cancelAnimation();
this._prepareDropdown();
this.sizingTarget = this.containedElement || this.sizingTarget;
this._updateAnimationConfig();
Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
}
},
@ -335,6 +311,9 @@ method is called on the element.
}
if (!this.noAnimations && this.animationConfig && this.animationConfig.open) {
if (this.withBackdrop) {
this.backdropElement.open();
}
this.$.contentWrapper.classList.add('animating');
this.playAnimation('open');
} else {
@ -348,6 +327,9 @@ method is called on the element.
_renderClosed: function() {
Polymer.IronDropdownScrollManager.removeScrollLock(this);
if (!this.noAnimations && this.animationConfig && this.animationConfig.close) {
if (this.withBackdrop) {
this.backdropElement.close();
}
this.$.contentWrapper.classList.add('animating');
this.playAnimation('close');
} else {
@ -364,44 +346,12 @@ method is called on the element.
_onNeonAnimationFinish: function() {
this.$.contentWrapper.classList.remove('animating');
if (this.opened) {
Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this);
Polymer.IronOverlayBehaviorImpl._finishRenderOpened.apply(this);
} else {
Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this);
Polymer.IronOverlayBehaviorImpl._finishRenderClosed.apply(this);
}
},
/**
* Called when an `iron-resize` event fires.
*/
_onIronResize: function() {
var containedElement = this.containedElement;
var scrollTop;
var scrollLeft;
if (this.opened && containedElement) {
scrollTop = containedElement.scrollTop;
scrollLeft = containedElement.scrollLeft;
}
if (this.opened) {
this._updateOverlayPosition();
}
Polymer.IronOverlayBehaviorImpl._onIronResize.apply(this, arguments);
if (this.opened && containedElement) {
containedElement.scrollTop = scrollTop;
containedElement.scrollLeft = scrollLeft;
}
},
/**
* Called when the `positionTarget` property changes.
*/
_positionTargetChanged: function() {
this._updateOverlayPosition();
},
/**
* Constructs the final animation config from different properties used
* to configure specific parts of the opening and closing animations.
@ -434,43 +384,73 @@ method is called on the element.
},
/**
* Prepares the dropdown for opening by updating measured layout
* values.
* Updates the overlay position based on configured horizontal
* and vertical alignment.
*/
_prepareDropdown: function() {
this.sizingTarget = this.containedElement || this.sizingTarget;
this._updateAnimationConfig();
this._updateOverlayPosition();
_updateOverlayPosition: function() {
if (this.isAttached) {
// This triggers iron-resize, and iron-overlay-behavior will call refit if needed.
this.notifyResize();
}
},
/**
* Updates the overlay position based on configured horizontal
* and vertical alignment, and re-memoizes these values for the sake
* of behavior in `IronFitBehavior`.
* Useful to call this after the element, the window, or the `fitInfo`
* element has been resized. Will maintain the scroll position.
*/
_updateOverlayPosition: function() {
this._positionRectMemo = null;
if (!this.positionTarget) {
return;
refit: function () {
if (!this.opened) {
return
}
var containedElement = this.containedElement;
var scrollTop;
var scrollLeft;
this.style[this._localeHorizontalAlign] =
this._horizontalAlignTargetValue + 'px';
this.style[this.verticalAlign] =
this._verticalAlignTargetValue + 'px';
// NOTE(cdata): We re-memoize inline styles here, otherwise
// calling `refit` from `IronFitBehavior` will reset inline styles
// to whatever they were when the dropdown first opened.
if (this._fitInfo) {
this._fitInfo.inlineStyle[this.horizontalAlign] =
this.style[this.horizontalAlign];
this._fitInfo.inlineStyle[this.verticalAlign] =
this.style[this.verticalAlign];
if (containedElement) {
scrollTop = containedElement.scrollTop;
scrollLeft = containedElement.scrollLeft;
}
Polymer.IronFitBehavior.refit.apply(this, arguments);
if (containedElement) {
containedElement.scrollTop = scrollTop;
containedElement.scrollLeft = scrollLeft;
}
},
/**
* Resets the target element's position and size constraints, and clear
* the memoized data.
*/
resetFit: function() {
Polymer.IronFitBehavior.resetFit.apply(this, arguments);
var hAlign = this._localeHorizontalAlign;
var vAlign = this.verticalAlign;
// Set to 0, 0 in order to discover any offset caused by parent stacking contexts.
this.style[hAlign] = this.style[vAlign] = '0px';
var dropdownRect = this.getBoundingClientRect();
var positionRect = this.positionTarget.getBoundingClientRect();
var horizontalValue = this._horizontalAlignTargetValue(dropdownRect, positionRect, hAlign === 'right');
var verticalValue = this._verticalAlignTargetValue(dropdownRect, positionRect, vAlign === 'bottom');
this.style[hAlign] = horizontalValue + 'px';
this.style[vAlign] = verticalValue + 'px';
},
/**
* Overridden from `IronFitBehavior`.
* Ensure positionedBy has correct values for horizontally & vertically.
*/
_discoverInfo: function() {
Polymer.IronFitBehavior._discoverInfo.apply(this, arguments);
// Note(valdrin): in Firefox, an element with style `position: fixed; bottom: 90vh; height: 20vh`
// would have `getComputedStyle(element).top < 0` (instead of being `auto`) http://jsbin.com/cofired/3/edit?html,output
// This would cause IronFitBehavior's `constrain` to wrongly calculate sizes
// (it would use `top` instead of `bottom`), so we ensure we give the correct values.
this._fitInfo.positionedBy.horizontally = this._localeHorizontalAlign;
this._fitInfo.positionedBy.vertically = this.verticalAlign;
},
/**

View file

@ -28,13 +28,38 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
margin: 0;
padding: 0;
}
.container {
display: block;
position: relative;
width: 100px;
height: 100px;
background-color: yellow;
}
.positioned {
position: absolute;
top: 40px;
left: 40px;
}
.dropdown-content {
width: 50px;
height: 50px;
background-color: orange;
}
.full-screen {
width: 100vw;
height: 100vh;
}
</style>
<body>
<test-fixture id="TrivialDropdown">
<template>
<iron-dropdown>
<div class="dropdown-content">Hello!</div>
<div class="dropdown-content"></div>
</iron-dropdown>
</template>
</test-fixture>
@ -49,9 +74,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<test-fixture id="AlignedDropdown">
<template>
<div style="display: block; position: relative; width: 100px; height: 100px;">
<div class="container">
<iron-dropdown horizontal-align="right" vertical-align="top">
<div class="dropdown-content">Hello!</div>
<div class="dropdown-content full-screen"></div>
</iron-dropdown>
</div>
</template>
@ -60,9 +85,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<!-- Absolutely position the dropdown so that it has enough space to move around -->
<test-fixture id="OffsetDropdownTopLeft">
<template>
<div style="display: block; position: absolute; top: 40px; left: 40px; width: 100px; height: 100px;">
<div class="container positioned">
<iron-dropdown>
<div class="dropdown-content">Hello!</div>
<div class="dropdown-content"></div>
</iron-dropdown>
</div>
</template>
@ -70,9 +95,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<test-fixture id="OffsetDropdownBottomRight">
<template>
<div style="display: block; position: absolute; top: 40px; left: 40px; width: 100px; height: 100px;">
<div class="container positioned">
<iron-dropdown horizontal-align="right" vertical-align="bottom">
<div class="dropdown-content">Hello!</div>
<div class="dropdown-content"></div>
</iron-dropdown>
</div>
</template>
@ -90,9 +115,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<test-fixture id="RTLDropdownLeft">
<template>
<div dir="rtl" style="display: block; position: relative; width: 100px; height: 100px;">
<div dir="rtl" class="container">
<iron-dropdown>
<div class="dropdown-content">Hello!</div>
<div class="dropdown-content"></div>
</iron-dropdown>
</div>
</template>
@ -100,9 +125,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<test-fixture id="RTLDropdownRight">
<template>
<div dir="rtl" style="display: block; position: relative; width: 100px; height: 100px;">
<div dir="rtl" class="container">
<iron-dropdown horizontal-align="right">
<div class="dropdown-content">Hello!</div>
<div class="dropdown-content"></div>
</iron-dropdown>
</div>
</template>
@ -240,11 +265,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
runAfterOpen(dropdown, function () {
dropdownRect = dropdown.getBoundingClientRect();
parentRect = parent.getBoundingClientRect();
// NOTE(cdata): IE10 / 11 have minor rounding errors in this case,
// so we assert with `closeTo` and a tight threshold:
expect(dropdownRect.top).to.be.closeTo(parentRect.top, 0.1);
expect(dropdownRect.right).to.be.closeTo(parentRect.right, 0.1);
assert.equal(dropdownRect.top, parentRect.top, 'top ok');
assert.equal(dropdownRect.left, 0, 'left ok');
assert.equal(dropdownRect.bottom, document.documentElement.clientHeight, 'bottom ok');
assert.equal(dropdownRect.right, parentRect.right, 'right ok');
done();
});
});
@ -257,11 +281,26 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
runAfterOpen(dropdown, function () {
parentRect = parent.getBoundingClientRect();
dropdownRect = dropdown.getBoundingClientRect();
assert.equal(dropdownRect.top, 0, 'top ok');
assert.equal(dropdownRect.left, 0, 'left ok');
assert.equal(dropdownRect.bottom, parentRect.bottom, 'bottom ok');
assert.equal(dropdownRect.right, parentRect.right, 'right ok');
done();
});
});
// NOTE(cdata): IE10 / 11 have minor rounding errors in this case,
// so we assert with `closeTo` and a tight threshold:
expect(dropdownRect.bottom).to.be.closeTo(parentRect.bottom, 0.1);
expect(dropdownRect.right).to.be.closeTo(parentRect.right, 0.1);
test('handles parent\'s stacking context', function(done) {
var parentRect;
var dropdownRect;
// This will create a new stacking context.
parent.style.transform = 'translateZ(0)';
runAfterOpen(dropdown, function () {
dropdownRect = dropdown.getBoundingClientRect();
parentRect = parent.getBoundingClientRect();
assert.equal(dropdownRect.top, parentRect.top, 'top ok');
assert.equal(dropdownRect.left, 0, 'left ok');
assert.equal(dropdownRect.bottom, document.documentElement.clientHeight, 'bottom ok');
assert.equal(dropdownRect.right, parentRect.right, 'right ok');
done();
});
});
@ -285,9 +324,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
offsetDropdownRect = dropdown.getBoundingClientRect();
// verticalAlign is top, so a positive offset moves down.
expect(dropdownRect.top + 10).to.be.closeTo(offsetDropdownRect.top, 0.1);
assert.equal(dropdownRect.top + 10, offsetDropdownRect.top, 'top ok');
// horizontalAlign is left, so a positive offset moves to the right.
expect(dropdownRect.left + 10).to.be.closeTo(offsetDropdownRect.left, 0.1);
assert.equal(dropdownRect.left + 10, offsetDropdownRect.left, 'left ok');
done();
});
});
@ -301,9 +340,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
offsetDropdownRect = dropdown.getBoundingClientRect();
// verticalAlign is top, so a negative offset moves up.
expect(dropdownRect.top - 10).to.be.closeTo(offsetDropdownRect.top, 0.1);
assert.equal(dropdownRect.top - 10, offsetDropdownRect.top, 'top ok');
// horizontalAlign is left, so a negative offset moves to the left.
expect(dropdownRect.left - 10).to.be.closeTo(offsetDropdownRect.left, 0.1);
assert.equal(dropdownRect.left - 10, offsetDropdownRect.left, 'left ok');
done();
});
});
@ -327,9 +366,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
offsetDropdownRect = dropdown.getBoundingClientRect();
// verticalAlign is bottom, so a positive offset moves up.
expect(dropdownRect.bottom - 10).to.be.closeTo(offsetDropdownRect.bottom, 0.1);
assert.equal(dropdownRect.bottom - 10, offsetDropdownRect.bottom, 'bottom ok');
// horizontalAlign is right, so a positive offset moves to the left.
expect(dropdownRect.right - 10).to.be.closeTo(offsetDropdownRect.right, 0.1);
assert.equal(dropdownRect.right - 10, offsetDropdownRect.right, 'right ok');
done();
});
});
@ -343,9 +382,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
offsetDropdownRect = dropdown.getBoundingClientRect();
// verticalAlign is bottom, so a negative offset moves down.
expect(dropdownRect.bottom + 10).to.be.closeTo(offsetDropdownRect.bottom, 0.1);
assert.equal(dropdownRect.bottom + 10, offsetDropdownRect.bottom, 'bottom ok');
// horizontalAlign is right, so a positive offset moves to the right.
expect(dropdownRect.right + 10).to.be.closeTo(offsetDropdownRect.right, 0.1);
assert.equal(dropdownRect.right + 10, offsetDropdownRect.right, 'right ok');
done();
});
});

View file

@ -32,14 +32,14 @@
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-icon",
"homepage": "https://github.com/polymerelements/iron-icon",
"_release": "1.0.8",
"_resolution": {
"type": "version",
"tag": "v1.0.8",
"commit": "f36b38928849ef3853db727faa8c9ef104d611eb"
},
"_source": "git://github.com/PolymerElements/iron-icon.git",
"_source": "git://github.com/polymerelements/iron-icon.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-icon"
"_originalSource": "polymerelements/iron-icon"
}

View file

@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
"version": "1.4.2",
"version": "1.4.3",
"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.2",
"_release": "1.4.3",
"_resolution": {
"type": "version",
"tag": "v1.4.2",
"commit": "565869d04433fb1065210ca30d81e7b7c4af73f8"
"tag": "v1.4.3",
"commit": "6b8662619fbd4e82c2cebce6a846425ff9fc610d"
},
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
"_target": "^1.0.0",

View file

@ -1,6 +1,6 @@
{
"name": "iron-overlay-behavior",
"version": "1.4.2",
"version": "1.4.3",
"license": "http://polymer.github.io/LICENSE.txt",
"description": "Provides a behavior for making an element an overlay",
"private": true,

View file

@ -136,6 +136,11 @@ context. You should place this element as a child of `<body>` whenever possible.
value: false
},
/**
* Shortcut to access to the overlay manager.
* @private
* @type {Polymer.IronOverlayManagerClass}
*/
_manager: {
type: Object,
value: Polymer.IronOverlayManager
@ -176,7 +181,7 @@ context. You should place this element as a child of `<body>` whenever possible.
/**
* The backdrop element.
* @type {Node}
* @type {Element}
*/
get backdropElement() {
return this._manager.backdropElement;
@ -197,7 +202,7 @@ context. You should place this element as a child of `<body>` whenever possible.
*
* 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]}
* @type {Array<Node>}
* @protected
*/
get _focusableNodes() {
@ -295,7 +300,7 @@ context. You should place this element as a child of `<body>` whenever possible.
/**
* Cancels the overlay.
* @param {?Event} event The original event
* @param {Event=} event The original event
*/
cancel: function(event) {
var cancelEvent = this.fire('iron-overlay-canceled', event, {cancelable: true});

View file

@ -15,38 +15,61 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
/**
* @struct
* @constructor
* @private
*/
Polymer.IronOverlayManagerClass = function() {
/**
* Used to keep track of the opened overlays.
* @private {Array<Element>}
*/
this._overlays = [];
// Used to keep track of the last focused node before an overlay gets opened.
/**
* 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.
* iframes have a default z-index of 100,
* so this default should be at least that.
* @private {number}
*/
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;
Object.defineProperty(this, 'backdropElement', {
get: function() {
};
Polymer.IronOverlayManagerClass.prototype = {
constructor: Polymer.IronOverlayManagerClass,
/**
* The shared backdrop element.
* @type {Element} backdropElement
*/
get backdropElement() {
if (!this._backdropElement) {
this._backdropElement = document.createElement('iron-overlay-backdrop');
}
return this._backdropElement;
}.bind(this)
});
},
/**
* The deepest active element.
* returns {?Node} element the active element
* @type {Element|undefined} activeElement the active element
*/
this.deepActiveElement = null;
Object.defineProperty(this, 'deepActiveElement', {
get: function() {
get deepActiveElement() {
var active = document.activeElement;
// document.activeElement can be null
// https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
@ -54,17 +77,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
active = Polymer.dom(active.root).activeElement;
}
return active;
}.bind(this)
});
};
},
/**
* If a node is contained in an overlay.
* @param {Element=} node
* @return {boolean}
* @private
* @param {Node} node
* @returns {Boolean}
*/
Polymer.IronOverlayManagerClass.prototype._isChildOfOverlay = function(node) {
_isChildOfOverlay: function(node) {
while (node && node !== document.body) {
// Use logical parentNode, or native ShadowRoot host.
node = Polymer.dom(node).parentNode || node.host;
@ -74,20 +95,31 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
}
return false;
};
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
* @param {Element} overlay
* @param {number} aboveZ
* @private
*/
Polymer.IronOverlayManagerClass.prototype.addOverlay = function(overlay) {
_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
*/
addOverlay: function(overlay) {
var minimumZ = Math.max(this.currentOverlayZ(), this._minimumZ);
this._overlays.push(overlay);
var newZ = this.currentOverlayZ();
@ -100,9 +132,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
element = null;
}
this._lastFocusedNodes.push(element);
};
},
Polymer.IronOverlayManagerClass.prototype.removeOverlay = function(overlay) {
/**
* @param {Element} overlay
*/
removeOverlay: function(overlay) {
var i = this._overlays.indexOf(overlay);
if (i >= 0) {
this._overlays.splice(i, 1);
@ -115,32 +150,37 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
this._lastFocusedNodes.splice(i, 1);
}
};
},
Polymer.IronOverlayManagerClass.prototype.currentOverlay = function() {
/**
* @return {Element|undefined} overlay The current overlay.
*/
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 {number} zIndex the current overlay z-index.
*/
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) {
ensureMinimumZ: function(minimumZ) {
this._minimumZ = Math.max(this._minimumZ, minimumZ);
};
},
Polymer.IronOverlayManagerClass.prototype.focusOverlay = function() {
var current = this.currentOverlay();
focusOverlay: function() {
var current = /** @type {?} */ (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
@ -152,48 +192,55 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
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) {
/**
* @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(element);
this._backdrops.push(overlay);
}
} else if (index >= 0) {
this._backdrops.splice(index, 1);
}
};
},
Polymer.IronOverlayManagerClass.prototype.getBackdrops = function() {
/**
* @return {Array<Element>} backdrops
*/
getBackdrops: function() {
return this._backdrops;
};
},
/**
* Returns the z-index for the backdrop.
* @return {number} index The z-index for the backdrop.
*/
Polymer.IronOverlayManagerClass.prototype.backdropZ = function() {
backdropZ: function() {
return this._getOverlayZ(this._overlayWithBackdrop()) - 1;
};
},
/**
* Returns the first opened overlay that has a backdrop.
* @return {Element|undefined} overlay The first opened overlay that has a backdrop.
* @private
*/
Polymer.IronOverlayManagerClass.prototype._overlayWithBackdrop = function() {
_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.
* @param {Element=} overlay
* @private
*/
Polymer.IronOverlayManagerClass.prototype._getOverlayZ = function(overlay) {
_getOverlayZ: function(overlay) {
var z = this._minimumZ;
if (overlay) {
var z1 = Number(window.getComputedStyle(overlay).zIndex);
@ -204,8 +251,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
}
return z;
}
};
Polymer.IronOverlayManager = new Polymer.IronOverlayManagerClass();
</script>

View file

@ -45,7 +45,7 @@
"tag": "v1.0.11",
"commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
},
"_source": "git://github.com/polymerelements/paper-behaviors.git",
"_source": "git://github.com/PolymerElements/paper-behaviors.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/paper-behaviors"
"_originalSource": "PolymerElements/paper-behaviors"
}

View file

@ -32,14 +32,14 @@
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
},
"ignore": [],
"homepage": "https://github.com/polymerelements/paper-ripple",
"homepage": "https://github.com/PolymerElements/paper-ripple",
"_release": "1.0.5",
"_resolution": {
"type": "version",
"tag": "v1.0.5",
"commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
},
"_source": "git://github.com/polymerelements/paper-ripple.git",
"_source": "git://github.com/PolymerElements/paper-ripple.git",
"_target": "^1.0.0",
"_originalSource": "polymerelements/paper-ripple"
"_originalSource": "PolymerElements/paper-ripple"
}