1
0
Fork 0
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:
Luke Pulverenti 2015-08-19 00:08:03 -04:00
parent 7b42686295
commit f5323ff3c2
34 changed files with 682 additions and 658 deletions

View file

@ -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",

View file

@ -1,6 +1,6 @@
{
"name": "iron-dropdown",
"version": "1.0.4",
"version": "1.0.5",
"description": "",
"authors": [
"The Polymer Authors"

View file

@ -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>

View file

@ -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();
}
});
}
});
})();

View file

@ -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();
});
});
});
});