mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update detail screens
This commit is contained in:
parent
7b42686295
commit
f5323ff3c2
34 changed files with 682 additions and 658 deletions
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-dropdown",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
@ -35,11 +35,11 @@
|
|||
"web-component-tester": "*",
|
||||
"iron-image": "polymerelements/iron-image#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.4",
|
||||
"_release": "1.0.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.4",
|
||||
"commit": "9a09e5ed5a4c6ee9643caba74022a01135c7878b"
|
||||
"tag": "v1.0.5",
|
||||
"commit": "9c300a14a5aeca1c02f085e9117521af814ce640"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-dropdown.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-dropdown",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
|
@ -85,7 +85,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<div class="horizontal-section flex layout horizontal">
|
||||
<x-select>
|
||||
<button class="dropdown-trigger">Basic</button>
|
||||
<ul class="dropdown-content">
|
||||
<ul class="dropdown-content" tabindex="0">
|
||||
<template is="dom-repeat" items="[[letters]]">
|
||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||
</template>
|
||||
|
@ -101,7 +101,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</x-select>
|
||||
<x-select vertical-align="bottom">
|
||||
<button class="dropdown-trigger">Bottom-left Aligned</button>
|
||||
<ul class="dropdown-content">
|
||||
<ul class="dropdown-content" tabindex="0">
|
||||
<template is="dom-repeat" items="[[letters]]">
|
||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||
</template>
|
||||
|
@ -109,7 +109,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</x-select>
|
||||
<x-select horizontal-align="right" vertical-align="top">
|
||||
<button class="dropdown-trigger">Top-right Aligned</button>
|
||||
<ul class="dropdown-content">
|
||||
<ul class="dropdown-content" tabindex="0">
|
||||
<template is="dom-repeat" items="[[dinosaurs]]">
|
||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||
</template>
|
||||
|
|
|
@ -145,6 +145,14 @@ method is called on the element.
|
|||
type: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* If provided, this will be the element that will be focused when
|
||||
* the dropdown opens.
|
||||
*/
|
||||
focusTarget: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable animations when opening and closing the
|
||||
* dropdown.
|
||||
|
@ -185,6 +193,17 @@ method is called on the element.
|
|||
return Polymer.dom(this.$.content).getDistributedNodes()[0];
|
||||
},
|
||||
|
||||
/**
|
||||
* The element that should be focused when the dropdown opens.
|
||||
*/
|
||||
get _focusTarget() {
|
||||
return this.focusTarget || this.containedElement;
|
||||
},
|
||||
|
||||
/**
|
||||
* The element that should be used to position the dropdown when
|
||||
* it opens, if no position target is configured.
|
||||
*/
|
||||
get _defaultPositionTarget() {
|
||||
var parent = Polymer.dom(this).parentNode;
|
||||
|
||||
|
@ -195,6 +214,9 @@ method is called on the element.
|
|||
return parent;
|
||||
},
|
||||
|
||||
/**
|
||||
* The bounding rect of the position target.
|
||||
*/
|
||||
get _positionRect() {
|
||||
if (!this._positionRectMemo && this.positionTarget) {
|
||||
this._positionRectMemo = this.positionTarget.getBoundingClientRect();
|
||||
|
@ -203,6 +225,9 @@ method is called on the element.
|
|||
return this._positionRectMemo;
|
||||
},
|
||||
|
||||
/**
|
||||
* The horizontal offset value used to position the dropdown.
|
||||
*/
|
||||
get _horizontalAlignTargetValue() {
|
||||
var target;
|
||||
|
||||
|
@ -217,6 +242,9 @@ method is called on the element.
|
|||
return Math.max(target, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* The vertical offset value used to position the dropdown.
|
||||
*/
|
||||
get _verticalAlignTargetValue() {
|
||||
var target;
|
||||
|
||||
|
@ -231,27 +259,41 @@ method is called on the element.
|
|||
return Math.max(target, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the value of `opened` changes.
|
||||
*
|
||||
* @param {boolean} opened True if the dropdown is opened.
|
||||
*/
|
||||
_openedChanged: function(opened) {
|
||||
if (opened && this.disabled) {
|
||||
this.cancel();
|
||||
} else {
|
||||
this._cancelAnimations();
|
||||
this.cancelAnimation();
|
||||
this._prepareDropdown();
|
||||
Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
|
||||
}
|
||||
|
||||
if (this.opened) {
|
||||
this._focusContent();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Overridden from `IronOverlayBehavior`.
|
||||
*/
|
||||
_renderOpened: function() {
|
||||
Polymer.IronDropdownScrollManager.pushScrollLock(this);
|
||||
if (!this.noAnimations && this.animationConfig && this.animationConfig.open) {
|
||||
this.$.contentWrapper.classList.add('animating');
|
||||
this.playAnimation('open');
|
||||
} else {
|
||||
this._focusContent();
|
||||
Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Overridden from `IronOverlayBehavior`.
|
||||
*/
|
||||
_renderClosed: function() {
|
||||
Polymer.IronDropdownScrollManager.removeScrollLock(this);
|
||||
if (!this.noAnimations && this.animationConfig && this.animationConfig.close) {
|
||||
|
@ -262,6 +304,12 @@ method is called on the element.
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when animation finishes on the dropdown (when opening or
|
||||
* closing). Responsible for "completing" the process of opening or
|
||||
* closing the dropdown by positioning it or setting its display to
|
||||
* none.
|
||||
*/
|
||||
_onNeonAnimationFinish: function() {
|
||||
this.$.contentWrapper.classList.remove('animating');
|
||||
if (this.opened) {
|
||||
|
@ -271,6 +319,9 @@ method is called on the element.
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when an `iron-resize` event fires.
|
||||
*/
|
||||
_onIronResize: function() {
|
||||
var containedElement = this.containedElement;
|
||||
var scrollTop;
|
||||
|
@ -293,14 +344,17 @@ method is called on the element.
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the `positionTarget` property changes.
|
||||
*/
|
||||
_positionTargetChanged: function() {
|
||||
this._updateOverlayPosition();
|
||||
},
|
||||
|
||||
_cancelAnimations: function() {
|
||||
this.cancelAnimation();
|
||||
},
|
||||
|
||||
/**
|
||||
* Constructs the final animation config from different properties used
|
||||
* to configure specific parts of the opening and closing animations.
|
||||
*/
|
||||
_updateAnimationConfig: function() {
|
||||
var animationConfig = {};
|
||||
var animations = [];
|
||||
|
@ -328,12 +382,21 @@ method is called on the element.
|
|||
this.animationConfig = animationConfig;
|
||||
},
|
||||
|
||||
/**
|
||||
* Prepares the dropdown for opening by updating measured layout
|
||||
* values.
|
||||
*/
|
||||
_prepareDropdown: function() {
|
||||
this.sizingTarget = this.containedElement || this.sizingTarget;
|
||||
this._updateAnimationConfig();
|
||||
this._updateOverlayPosition();
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the overlay position based on configured horizontal
|
||||
* and vertical alignment, and re-memoizes these values for the sake
|
||||
* of behavior in `IronFitBehavior`.
|
||||
*/
|
||||
_updateOverlayPosition: function() {
|
||||
this._positionRectMemo = null;
|
||||
|
||||
|
@ -359,10 +422,17 @@ method is called on the element.
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Focuses the configured focus target.
|
||||
*/
|
||||
_focusContent: function() {
|
||||
if (this.containedElement) {
|
||||
this.containedElement.focus();
|
||||
}
|
||||
// NOTE(cdata): This is async so that it can attempt the focus after
|
||||
// `display: none` is removed from the element.
|
||||
this.async(function() {
|
||||
if (this._focusTarget) {
|
||||
this._focusTarget.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
|
@ -43,6 +43,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="FocusableContentDropdown">
|
||||
<template>
|
||||
<iron-dropdown>
|
||||
<div class="dropdown-content" tabindex="0">
|
||||
<div class="subcontent" tabindex="0"></div>
|
||||
</div>
|
||||
</iron-dropdown>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
function elementIsVisible(element) {
|
||||
var contentRect = element.getBoundingClientRect();
|
||||
|
@ -55,20 +65,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
suite('<iron-dropdown>', function() {
|
||||
var dropdown;
|
||||
var content;
|
||||
|
||||
suite('basic', function() {
|
||||
setup(function() {
|
||||
dropdown = fixture('TrivialDropdown');
|
||||
content = Polymer.dom(dropdown).querySelector('.dropdown-content');
|
||||
});
|
||||
|
||||
test('effectively hides the dropdown content', function() {
|
||||
var content = dropdown.querySelector('.dropdown-content');
|
||||
|
||||
expect(elementIsVisible(content)).to.be.equal(false);
|
||||
});
|
||||
|
||||
test('shows dropdown content when opened', function(done) {
|
||||
var content = dropdown.querySelector('.dropdown-content');
|
||||
|
||||
dropdown.open();
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
|
@ -78,8 +87,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
});
|
||||
|
||||
test('hides dropdown content when outside is clicked', function(done) {
|
||||
var content = dropdown.querySelector('.dropdown-content');
|
||||
|
||||
dropdown.open();
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
|
@ -93,7 +100,34 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}, 100);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('when content is focusable', function() {
|
||||
setup(function() {
|
||||
dropdown = fixture('FocusableContentDropdown');
|
||||
content = Polymer.dom(dropdown).querySelector('.dropdown-content');
|
||||
});
|
||||
test('focuses the content when opened', function(done) {
|
||||
dropdown.open();
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(document.activeElement).to.be.equal(content);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('focuses a configured focus target', function(done) {
|
||||
var focusableChild = Polymer.dom(content).querySelector('div[tabindex]');
|
||||
dropdown.focusTarget = focusableChild;
|
||||
|
||||
dropdown.open();
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(document.activeElement).to.not.be.equal(content);
|
||||
expect(document.activeElement).to.be.equal(focusableChild);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue