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
parent
7b42686295
commit
f5323ff3c2
34 changed files with 682 additions and 658 deletions
|
|
@ -29,14 +29,14 @@
|
|||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
|
||||
"homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
|
||||
"_release": "1.0.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.5",
|
||||
"commit": "cf833eab5c55a26c5aa92e56d3fcb079120ce66a"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-a11y-keys-behavior"
|
||||
"_originalSource": "PolymerElements/iron-a11y-keys-behavior"
|
||||
}
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@
|
|||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/polymerelements/iron-flex-layout",
|
||||
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
|
||||
"_release": "1.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.3",
|
||||
"commit": "e6c2cfec18354973ac03e70dcd8afcc3c72d09b9"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-flex-layout.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-flex-layout"
|
||||
"_originalSource": "PolymerElements/iron-flex-layout"
|
||||
}
|
||||
|
|
@ -34,14 +34,14 @@
|
|||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-overlay-behavior",
|
||||
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
|
||||
"_release": "1.0.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.5",
|
||||
"commit": "f03cea265587c724cf3a85aef76b2ab7ccfd2b94"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-overlay-behavior.git",
|
||||
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-overlay-behavior"
|
||||
"_originalSource": "polymerelements/iron-overlay-behavior"
|
||||
}
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
"tag": "v1.0.6",
|
||||
"commit": "ec51bf68f05c40373536cc726ca674e4549b7db2"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/neon-animation.git",
|
||||
"_source": "git://github.com/polymerelements/neon-animation.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/neon-animation"
|
||||
"_originalSource": "polymerelements/neon-animation"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-dropdown-menu",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"description": "An element that works similarly to a native browser select",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -40,14 +40,13 @@
|
|||
"web-component-tester": "*",
|
||||
"paper-tabs": "polymerelements/paper-tabs#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.1",
|
||||
"_release": "1.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.1",
|
||||
"commit": "c16e6087ce4b770938b96647e80c78765eea41fa"
|
||||
"tag": "v1.0.2",
|
||||
"commit": "fbf234c7bc8affe37e24c0b206d30551bc3289e5"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-dropdown-menu.git",
|
||||
"_target": "~1.0.1",
|
||||
"_originalSource": "PolymerElements/paper-dropdown-menu",
|
||||
"_direct": true
|
||||
"_originalSource": "PolymerElements/paper-dropdown-menu"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-dropdown-menu",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"description": "An element that works similarly to a native browser select",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
|
|||
|
|
@ -73,6 +73,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Pre-selected Value</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-dropdown-menu label="Dinosaurs">
|
||||
<paper-menu class="dropdown-content" selected="1">
|
||||
<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
|
||||
<paper-item>[[dinosaur]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Disabled</h4>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ item is displayed in the control. If no item is selected, the `label` is
|
|||
displayed instead.
|
||||
|
||||
The child element with the class `dropdown-content` will be used as the dropdown
|
||||
menu. It could be a `paper-menu` or element that triggers `iron-activate` when
|
||||
menu. It could be a `paper-menu` or element that triggers `iron-select` when
|
||||
selecting its children.
|
||||
|
||||
Example:
|
||||
|
|
@ -130,7 +130,7 @@ respectively.
|
|||
vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
|
||||
disabled="[[disabled]]"
|
||||
no-animations="[[noAnimations]]"
|
||||
on-iron-activate="_onIronActivate"
|
||||
on-iron-select="_onIronSelect"
|
||||
opened="{{opened}}">
|
||||
<div class="dropdown-trigger">
|
||||
<paper-ripple></paper-ripple>
|
||||
|
|
@ -145,9 +145,7 @@ respectively.
|
|||
<iron-icon icon="arrow-drop-down" suffix></iron-icon>
|
||||
</paper-input>
|
||||
</div>
|
||||
<div class="dropdown-content">
|
||||
<content select=".dropdown-content"></content>
|
||||
</div>
|
||||
<content id="content" select=".dropdown-content"></content>
|
||||
</paper-menu-button>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
|
@ -190,7 +188,7 @@ respectively.
|
|||
/**
|
||||
* The last selected item. An item is selected if the dropdown menu has
|
||||
* a child with class `dropdown-content`, and that child triggers an
|
||||
* `iron-activate` event with the selected `item` in the `detail`.
|
||||
* `iron-select` event with the selected `item` in the `detail`.
|
||||
*/
|
||||
selectedItem: {
|
||||
type: Object,
|
||||
|
|
@ -264,6 +262,24 @@ respectively.
|
|||
'aria-haspopup': 'true'
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
// NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`
|
||||
// child will cause an `iron-select` event to fire while the element is
|
||||
// still in a `DocumentFragment`. This has the effect of causing
|
||||
// handlers not to fire. So, we double check this value on attached:
|
||||
var contentElement = this.contentElement;
|
||||
if (contentElement && contentElement.selectedItem) {
|
||||
this._setSelectedItem(contentElement.selectedItem);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* The content element that is contained by the dropdown menu, if any.
|
||||
*/
|
||||
get contentElement() {
|
||||
return Polymer.dom(this.$.content).getDistributedNodes()[0];
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the dropdown content.
|
||||
*/
|
||||
|
|
@ -279,11 +295,11 @@ respectively.
|
|||
},
|
||||
|
||||
/**
|
||||
* A handler that is called when `iron-activate` is fired.
|
||||
* A handler that is called when `iron-select` is fired.
|
||||
*
|
||||
* @param {CustomEvent} event An `iron-activate` event.
|
||||
* @param {CustomEvent} event An `iron-select` event.
|
||||
*/
|
||||
_onIronActivate: function(event) {
|
||||
_onIronSelect: function(event) {
|
||||
this._setSelectedItem(event.detail.item);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -38,6 +38,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="PreselectedDropdownMenu">
|
||||
<template>
|
||||
<paper-dropdown-menu no-animations>
|
||||
<paper-menu class="dropdown-content" selected="1">
|
||||
<paper-item>Foo</paper-item>
|
||||
<paper-item>Bar</paper-item>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('<paper-dropdown-menu>', function() {
|
||||
|
|
@ -97,6 +108,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('when a value is preselected', function() {
|
||||
setup(function() {
|
||||
dropdownMenu = fixture('PreselectedDropdownMenu');
|
||||
});
|
||||
|
||||
test('the input area shows the correct selection', function() {
|
||||
var secondItem = Polymer.dom(dropdownMenu).querySelectorAll('paper-item')[1];
|
||||
expect(dropdownMenu.selectedItem).to.be.equal(secondItem);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-menu-button",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -41,11 +41,11 @@
|
|||
"iron-image": "polymerelements/iron-image#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.2",
|
||||
"_release": "1.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "cf8bdea832bfa7b4f413e021ecb328273d659b17"
|
||||
"tag": "v1.0.3",
|
||||
"commit": "24abacffd443f967125f5eae580eadc7b90f41c7"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-menu-button.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-menu-button",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<div>
|
||||
<h4>Paper Menu with multi selection</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-menu-button ignore-activate>
|
||||
<paper-menu-button ignore-select>
|
||||
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
|
||||
<paper-menu class="dropdown-content" multi>
|
||||
<template is="dom-repeat" items="[[letters]]" as="letter">
|
||||
|
|
|
|||
|
|
@ -108,9 +108,10 @@ Custom property | Description | Default
|
|||
vertical-offset="[[verticalOffset]]"
|
||||
open-animation-config="[[openAnimationConfig]]"
|
||||
close-animation-config="[[closeAnimationConfig]]"
|
||||
no-animations="[[noAnimations]]">
|
||||
no-animations="[[noAnimations]]"
|
||||
focus-target="[[_dropdownContent]]">
|
||||
<paper-material class="dropdown-content">
|
||||
<content select=".dropdown-content"></content>
|
||||
<content id="content" select=".dropdown-content"></content>
|
||||
</paper-material>
|
||||
</iron-dropdown>
|
||||
</template>
|
||||
|
|
@ -147,7 +148,8 @@ Custom property | Description | Default
|
|||
opened: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true
|
||||
notify: true,
|
||||
observer: '_openedChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -205,7 +207,7 @@ Custom property | Description | Default
|
|||
* Set to true to disable automatically closing the dropdown after
|
||||
* a selection has been made.
|
||||
*/
|
||||
ignoreActivate: {
|
||||
ignoreSelect: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
|
@ -268,6 +270,14 @@ Custom property | Description | Default
|
|||
}
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* This is the element intended to be bound as the focus target
|
||||
* for the `iron-dropdown` contained by `paper-menu-button`.
|
||||
*/
|
||||
_dropdownContent: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -277,7 +287,14 @@ Custom property | Description | Default
|
|||
},
|
||||
|
||||
listeners: {
|
||||
'iron-activate': '_onIronActivate'
|
||||
'iron-select': '_onIronSelect'
|
||||
},
|
||||
|
||||
/**
|
||||
* The content element that is contained by the menu button, if any.
|
||||
*/
|
||||
get contentElement() {
|
||||
return Polymer.dom(this.$.content).getDistributedNodes()[0];
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -300,14 +317,14 @@ Custom property | Description | Default
|
|||
},
|
||||
|
||||
/**
|
||||
* When an `iron-activate` event is received, the dropdown should
|
||||
* When an `iron-select` event is received, the dropdown should
|
||||
* automatically close on the assumption that a value has been chosen.
|
||||
*
|
||||
* @param {CustomEvent} event A CustomEvent instance with type
|
||||
* set to `"iron-activate"`.
|
||||
* set to `"iron-select"`.
|
||||
*/
|
||||
_onIronActivate: function(event) {
|
||||
if (!this.ignoreActivate) {
|
||||
_onIronSelect: function(event) {
|
||||
if (!this.ignoreSelect) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
|
@ -321,6 +338,12 @@ Custom property | Description | Default
|
|||
*/
|
||||
_openedChanged: function(opened, oldOpened) {
|
||||
if (opened) {
|
||||
// TODO(cdata): Update this when we can measure changes in distributed
|
||||
// children in an idiomatic way.
|
||||
// We poke this property in case the element has changed. This will
|
||||
// cause the focus target for the `iron-dropdown` to be updated as
|
||||
// necessary:
|
||||
this._dropdownContent = this.contentElement;
|
||||
this.fire('paper-dropdown-open');
|
||||
} else if (oldOpened != null) {
|
||||
this.fire('paper-dropdown-close');
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
"tag": "v1.0.11",
|
||||
"commit": "347542e9ebe3e6e5f0830ee10e1c20c12956ff2c"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-styles.git",
|
||||
"_source": "git://github.com/PolymerElements/paper-styles.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/paper-styles"
|
||||
"_originalSource": "PolymerElements/paper-styles"
|
||||
}
|
||||
|
|
@ -23,14 +23,14 @@
|
|||
"web-component-tester": "*"
|
||||
},
|
||||
"private": true,
|
||||
"homepage": "https://github.com/polymer/polymer",
|
||||
"homepage": "https://github.com/Polymer/polymer",
|
||||
"_release": "1.1.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.0",
|
||||
"commit": "67fb2f85fd66d8556fc07cf1dec41ff5273fa68a"
|
||||
},
|
||||
"_source": "git://github.com/polymer/polymer.git",
|
||||
"_source": "git://github.com/Polymer/polymer.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymer/polymer"
|
||||
"_originalSource": "Polymer/polymer"
|
||||
}
|
||||
|
|
@ -255,6 +255,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.cardContent .cardText {
|
||||
|
|
|
|||
|
|
@ -391,7 +391,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
background-size: cover;
|
||||
background-position: center 15%;
|
||||
background-repeat: no-repeat;
|
||||
height: 560px;
|
||||
height: 600px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -529,6 +529,13 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
height: 40px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 1000px) {
|
||||
|
||||
.detailImageContainer img {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px) {
|
||||
|
||||
.parentName {
|
||||
|
|
@ -756,56 +763,56 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
@media all and (max-height: 900px), (max-width: 800px) {
|
||||
|
||||
.itemBackdrop:not(.noBackdrop) {
|
||||
height: 500px;
|
||||
height: 550px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-height: 800px), (max-width: 700px) {
|
||||
|
||||
.itemBackdrop:not(.noBackdrop) {
|
||||
height: 400px;
|
||||
height: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-height: 700px) {
|
||||
|
||||
.itemBackdrop:not(.noBackdrop) {
|
||||
height: 300px;
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 540px) {
|
||||
|
||||
.itemBackdrop:not(.noBackdrop) {
|
||||
height: 240px;
|
||||
height: 290px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-height: 540px) {
|
||||
|
||||
.itemBackdrop:not(.noBackdrop) {
|
||||
height: 200px;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-height: 460px) {
|
||||
|
||||
.itemBackdrop:not(.noBackdrop) {
|
||||
height: 150px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-height: 300px) {
|
||||
|
||||
.itemBackdrop:not(.noBackdrop) {
|
||||
height: 100px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-height: 250px) {
|
||||
|
||||
.itemBackdrop:not(.noBackdrop) {
|
||||
height: 70px;
|
||||
height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -866,6 +873,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
|||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 750px) {
|
||||
.detailPageContent {
|
||||
width: 950px;
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="itemByNameDetailPage" data-role="page" class="page libraryPage itemDetailPage backdropPage noSecondaryNavPage" data-require="scripts/itembynamedetailpage" data-backbutton="true" data-menubutton="false">
|
||||
<div style="padding: 1em 0;">
|
||||
<table class="detailPageContent primaryDetailPageContent">
|
||||
<tr>
|
||||
<td style="vertical-align: top; padding: 0 1em 0 0;">
|
||||
<div id="itemImage" class="itemImageContainer smallDetailImageContainer"></div>
|
||||
</td>
|
||||
<td style="vertical-align: top; padding: 0;">
|
||||
<p style="margin-top:0;"><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
|
||||
<p>
|
||||
<span class="itemCommunityRating"></span>
|
||||
<span class="userDataIcons"></span>
|
||||
</p>
|
||||
<p class="itemGenres"></p>
|
||||
<p class="itemOverview desktopOverview smoothScrollY"></p>
|
||||
<p id="itemBirthday"></p>
|
||||
<p id="itemBirthLocation"></p>
|
||||
<p id="itemDeathDate"></p>
|
||||
|
||||
<p id="itemLinks"></p>
|
||||
<div class="detailButtonsContainer desktopDetailButtons" style="text-align: left;">
|
||||
<paper-button raised class="secondary btnPlay hide"><iron-icon icon="play-arrow"></iron-icon><span>${ButtonPlay}</span></paper-button>
|
||||
<paper-button raised class="submit btnSync hide"><iron-icon icon="refresh"></iron-icon><span>${ButtonSync}</span></paper-button>
|
||||
<paper-button raised class="subdued btnMoreCommands hide notext"><iron-icon icon="more-vert"></iron-icon></paper-button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="detailButtonsContainer mobileDetailButtons">
|
||||
<paper-button raised class="secondary btnPlay hide"><iron-icon icon="play-arrow"></iron-icon><span>${ButtonPlay}</span></paper-button>
|
||||
<paper-button raised class="submit btnSync hide"><iron-icon icon="refresh"></iron-icon><span>${ButtonSync}</span></paper-button>
|
||||
<paper-button raised class="subdued btnMoreCommands hide notext"><iron-icon icon="more-vert"></iron-icon></paper-button>
|
||||
</div>
|
||||
<p class="itemOverview mobileOverview smoothScrollY"></p>
|
||||
<div data-role="content" style="padding-top: 0;">
|
||||
|
||||
<div id="itemTabs" style="text-align: center; margin: 0 0 1em;"></div>
|
||||
<div class="viewSettings">
|
||||
<div class="viewControls">
|
||||
</div>
|
||||
<div class="listTopPaging">
|
||||
</div>
|
||||
</div>
|
||||
<div id="items" class="itemsContainer" style="text-align:center;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,345 +1,299 @@
|
|||
(function ($, document, LibraryBrowser) {
|
||||
|
||||
var currentItem;
|
||||
var shape;
|
||||
var _childrenItemsFunction;
|
||||
function renderItems(page, item) {
|
||||
|
||||
function getPromise() {
|
||||
|
||||
var id = getParameterByName('id');
|
||||
|
||||
if (id) {
|
||||
return ApiClient.getItem(Dashboard.getCurrentUserId(), id);
|
||||
}
|
||||
|
||||
var name = getParameterByName('genre');
|
||||
|
||||
if (name) {
|
||||
return ApiClient.getGenre(name, Dashboard.getCurrentUserId());
|
||||
}
|
||||
|
||||
name = getParameterByName('musicgenre');
|
||||
|
||||
if (name) {
|
||||
return ApiClient.getMusicGenre(name, Dashboard.getCurrentUserId());
|
||||
}
|
||||
|
||||
name = getParameterByName('gamegenre');
|
||||
|
||||
if (name) {
|
||||
return ApiClient.getGameGenre(name, Dashboard.getCurrentUserId());
|
||||
}
|
||||
|
||||
name = getParameterByName('musicartist');
|
||||
|
||||
if (name) {
|
||||
return ApiClient.getArtist(name, Dashboard.getCurrentUserId());
|
||||
}
|
||||
else {
|
||||
throw new Error('Invalid request');
|
||||
}
|
||||
}
|
||||
|
||||
function reload(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
getPromise().done(function (item) {
|
||||
|
||||
var context = getParameterByName('context');
|
||||
|
||||
var editQuery = '?id=' + item.Id;
|
||||
|
||||
currentItem = item;
|
||||
|
||||
LibraryMenu.setTitle(item.Name);
|
||||
Backdrops.setBackdrops(page, [item]);
|
||||
|
||||
var name = item.Name;
|
||||
|
||||
Dashboard.setPageTitle(name);
|
||||
|
||||
$('.itemName', page).html(name);
|
||||
|
||||
renderDetails(page, item, context);
|
||||
renderTabs(page, item, context);
|
||||
|
||||
$(page).trigger('displayingitem', [{
|
||||
|
||||
item: item,
|
||||
context: context
|
||||
}]);
|
||||
|
||||
Dashboard.getCurrentUser().done(function (user) {
|
||||
|
||||
if (MediaController.canPlay(item)) {
|
||||
$('.btnPlay', page).visible(true);
|
||||
} else {
|
||||
$('.btnPlay', page).visible(false);
|
||||
}
|
||||
|
||||
if (SyncManager.isAvailable(item, user)) {
|
||||
$('.btnSync', page).removeClass('hide');
|
||||
} else {
|
||||
$('.btnSync', page).addClass('hide');
|
||||
}
|
||||
|
||||
var editImagesHref = user.Policy.IsAdministrator ? 'edititemmetadata.html' + (editQuery + "&tab=3") : null;
|
||||
|
||||
$('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item, editImagesHref, true));
|
||||
|
||||
if (LibraryBrowser.getMoreCommands(item, user).length) {
|
||||
$('.btnMoreCommands', page).visible(true);
|
||||
} else {
|
||||
$('.btnMoreCommands', page).visible(false);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
||||
function renderTabs(page, item, context) {
|
||||
|
||||
var html = '<fieldset data-role="controlgroup" data-type="horizontal" class="libraryTabs">';
|
||||
|
||||
html += '<legend></legend>';
|
||||
var sections = [];
|
||||
|
||||
if (item.MovieCount) {
|
||||
|
||||
html += '<input type="radio" name="ibnItems" id="radioMovies" class="context-movies" value="on">';
|
||||
html += '<label for="radioMovies">' + Globalize.translate('TabMovies') + '</label>';
|
||||
sections.push({
|
||||
name: Globalize.translate('TabMovies'),
|
||||
type: 'Movie'
|
||||
});
|
||||
}
|
||||
|
||||
if (item.SeriesCount) {
|
||||
|
||||
html += '<input type="radio" name="ibnItems" id="radioShows" class="context-tv" value="on">';
|
||||
html += '<label for="radioShows">' + Globalize.translate('TabSeries') + '</label>';
|
||||
sections.push({
|
||||
name: Globalize.translate('TabSeries'),
|
||||
type: 'Series'
|
||||
});
|
||||
}
|
||||
|
||||
if (item.EpisodeCount) {
|
||||
|
||||
html += '<input type="radio" name="ibnItems" id="radioEpisodes" class="context-tv" value="on">';
|
||||
html += '<label for="radioEpisodes">' + Globalize.translate('TabEpisodes') + '</label>';
|
||||
sections.push({
|
||||
name: Globalize.translate('TabEpisodes'),
|
||||
type: 'Episode'
|
||||
});
|
||||
}
|
||||
|
||||
if (item.TrailerCount) {
|
||||
|
||||
html += '<input type="radio" name="ibnItems" id="radioTrailers" class="context-movies" value="on">';
|
||||
html += '<label for="radioTrailers">' + Globalize.translate('TabTrailers') + '</label>';
|
||||
sections.push({
|
||||
name: Globalize.translate('TabTrailers'),
|
||||
type: 'Trailer'
|
||||
});
|
||||
}
|
||||
|
||||
if (item.GameCount) {
|
||||
|
||||
html += '<input type="radio" name="ibnItems" id="radioGames" class="context-games" value="on">';
|
||||
html += '<label for="radioGames">' + Globalize.translate('TabGames') + '</label>';
|
||||
sections.push({
|
||||
name: Globalize.translate('TabGames'),
|
||||
type: 'Game'
|
||||
});
|
||||
}
|
||||
|
||||
if (item.AlbumCount) {
|
||||
|
||||
html += '<input type="radio" name="ibnItems" id="radioAlbums" class="context-music" value="on">';
|
||||
html += '<label for="radioAlbums">' + Globalize.translate('TabAlbums') + '</label>';
|
||||
sections.push({
|
||||
name: Globalize.translate('TabAlbums'),
|
||||
type: 'MusicAlbum'
|
||||
});
|
||||
}
|
||||
|
||||
if (item.SongCount) {
|
||||
|
||||
html += '<input type="radio" name="ibnItems" id="radioSongs" class="context-music" value="on">';
|
||||
html += '<label for="radioSongs">' + Globalize.translate('TabSongs') + '</label>';
|
||||
sections.push({
|
||||
name: Globalize.translate('TabSongs'),
|
||||
type: 'Audio'
|
||||
});
|
||||
}
|
||||
|
||||
if (item.MusicVideoCount) {
|
||||
|
||||
html += '<input type="radio" name="ibnItems" id="radioMusicVideos" class="context-music" value="on">';
|
||||
html += '<label for="radioMusicVideos">' + Globalize.translate('TabMusicVideos') + '</label>';
|
||||
}
|
||||
|
||||
html += '</fieldset>';
|
||||
|
||||
var elem = $('#itemTabs', page).html(html).trigger('create');
|
||||
|
||||
bindRadioEvents(page);
|
||||
|
||||
var selectedRadio = null;
|
||||
|
||||
if (context) {
|
||||
selectedRadio = $('.context-' + context + ':first', elem);
|
||||
}
|
||||
|
||||
if (selectedRadio && selectedRadio.length) {
|
||||
selectedRadio.attr("checked", "checked").checkboxradio("refresh").trigger('click');
|
||||
} else {
|
||||
$('input:first', elem).attr("checked", "checked").checkboxradio("refresh").trigger('click');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function bindRadioEvents(page) {
|
||||
|
||||
$("#radioMusicVideos", page).on("click", function () {
|
||||
|
||||
shape = "poster";
|
||||
loadItems(page, {
|
||||
MediaTypes: "",
|
||||
IncludeItemTypes: "MusicVideo",
|
||||
PersonTypes: "",
|
||||
ArtistIds: ""
|
||||
sections.push({
|
||||
name: Globalize.translate('TabMusicVideos'),
|
||||
type: 'MusicVideo'
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
var elem = page.querySelector('#childrenContent');
|
||||
|
||||
$("#radioMovies", page).on("click", function () {
|
||||
elem.innerHTML = sections.map(function (section) {
|
||||
|
||||
shape = "poster";
|
||||
loadItems(page, {
|
||||
var html = '';
|
||||
|
||||
html += '<div class="homePageSection" data-type="' + section.type + '">';
|
||||
|
||||
html += '<div>';
|
||||
html += '<h1 class="listHeader" style="display:inline-block;vertical-align:middle;">';
|
||||
html += section.name;
|
||||
html += '</h1>';
|
||||
html += '<a href="#" class="clearLink hide" style="margin-left:1em;vertical-align:middle;"><paper-button raised class="more mini noIcon">' + Globalize.translate('ButtonMore') + '</paper-button></a>';
|
||||
html += '</div>';
|
||||
|
||||
html += '<div class="itemsContainer">';
|
||||
html += '</div>';
|
||||
|
||||
html += '</div>';
|
||||
|
||||
return html;
|
||||
|
||||
}).join('');
|
||||
|
||||
var sectionElems = elem.querySelectorAll('.homePageSection');
|
||||
for (var i = 0, length = sectionElems.length; i < length; i++) {
|
||||
renderSection(page, item, sectionElems[i], sectionElems[i].getAttribute('data-type'));
|
||||
}
|
||||
}
|
||||
|
||||
function renderSection(page, item, element, type) {
|
||||
|
||||
switch (type) {
|
||||
|
||||
case 'Movie':
|
||||
loadItems(element, item, type, {
|
||||
MediaTypes: "",
|
||||
IncludeItemTypes: "Movie",
|
||||
PersonTypes: "",
|
||||
ArtistIds: ""
|
||||
ArtistIds: "",
|
||||
Limit: 10
|
||||
}, {
|
||||
shape: "detailPagePortrait",
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
break;
|
||||
|
||||
});
|
||||
|
||||
$("#radioShows", page).on("click", function () {
|
||||
|
||||
shape = "poster";
|
||||
loadItems(page, {
|
||||
case 'MusicVideo':
|
||||
loadItems(element, item, type, {
|
||||
MediaTypes: "",
|
||||
IncludeItemTypes: "Series",
|
||||
IncludeItemTypes: "MusicVideo",
|
||||
PersonTypes: "",
|
||||
ArtistIds: ""
|
||||
ArtistIds: "",
|
||||
Limit: 10
|
||||
}, {
|
||||
shape: "detailPagePortrait",
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
break;
|
||||
|
||||
case 'Game':
|
||||
loadItems(element, item, type, {
|
||||
MediaTypes: "",
|
||||
IncludeItemTypes: "Game",
|
||||
PersonTypes: "",
|
||||
ArtistIds: "",
|
||||
Limit: 10
|
||||
}, {
|
||||
shape: "detailPagePortrait",
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
});
|
||||
break;
|
||||
|
||||
$("#radioTrailers", page).on("click", function () {
|
||||
|
||||
shape = "poster";
|
||||
loadItems(page, {
|
||||
case 'Trailer':
|
||||
loadItems(element, item, type, {
|
||||
MediaTypes: "",
|
||||
IncludeItemTypes: "Trailer",
|
||||
PersonTypes: "",
|
||||
ArtistIds: ""
|
||||
});
|
||||
ArtistIds: "",
|
||||
Limit: 10
|
||||
}, {
|
||||
shape: "detailPagePortrait",
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
break;
|
||||
|
||||
$("#radioGames", page).on("click", function () {
|
||||
|
||||
shape = "poster";
|
||||
loadItems(page, {
|
||||
IncludeItemTypes: "",
|
||||
MediaTypes: "Game",
|
||||
PersonTypes: "",
|
||||
ArtistIds: ""
|
||||
});
|
||||
});
|
||||
|
||||
$("#radioEpisodes", page).on("click", function () {
|
||||
|
||||
shape = "backdrop";
|
||||
loadItems(page, {
|
||||
case 'Series':
|
||||
loadItems(element, item, type, {
|
||||
MediaTypes: "",
|
||||
IncludeItemTypes: "Episode",
|
||||
IncludeItemTypes: "Series",
|
||||
PersonTypes: "",
|
||||
ArtistIds: ""
|
||||
});
|
||||
ArtistIds: "",
|
||||
Limit: 10
|
||||
}, {
|
||||
shape: "detailPagePortrait",
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
});
|
||||
break;
|
||||
|
||||
$("#radioAlbums", page).on("click", function () {
|
||||
|
||||
shape = "square";
|
||||
loadItems(page, {
|
||||
case 'MusicAlbum':
|
||||
loadItems(element, item, type, {
|
||||
MediaTypes: "",
|
||||
IncludeItemTypes: "MusicAlbum",
|
||||
PersonTypes: "",
|
||||
ArtistIds: ""
|
||||
ArtistIds: "",
|
||||
Limit: 8
|
||||
}, {
|
||||
shape: "detailPageSquare",
|
||||
playFromHere: true,
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
centerText: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
break;
|
||||
|
||||
case 'Episode':
|
||||
loadItems(element, item, type, {
|
||||
MediaTypes: "",
|
||||
IncludeItemTypes: "Episode",
|
||||
PersonTypes: "",
|
||||
ArtistIds: "",
|
||||
Limit: 6
|
||||
}, {
|
||||
shape: "detailPage169",
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
centerText: true,
|
||||
overlayPlayButton: true
|
||||
});
|
||||
break;
|
||||
|
||||
$("#radioSongs", page).on("click", function () {
|
||||
|
||||
loadItems(page, {
|
||||
case 'Audio':
|
||||
loadItems(element, item, type, {
|
||||
MediaTypes: "",
|
||||
IncludeItemTypes: "Audio",
|
||||
PersonTypes: "",
|
||||
ArtistIds: ""
|
||||
ArtistIds: "",
|
||||
Limit: 100
|
||||
}, {
|
||||
playFromHere: true,
|
||||
defaultAction: 'playallfromhere',
|
||||
smallIcon: true
|
||||
});
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function loadItems(element, item, type, query, listOptions) {
|
||||
|
||||
query = getQuery(query, item);
|
||||
|
||||
getItemsFunction(query, item)(query.StartIndex, query.Limit, query.Fields).done(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
if (query.Limit && result.TotalRecordCount > query.Limit) {
|
||||
// Add more button
|
||||
var link = element.querySelector('a');
|
||||
link.classList.remove('hide');
|
||||
link.setAttribute('href', getMoreItemsHref(item, type));
|
||||
} else {
|
||||
element.querySelector('a').classList.add('hide');
|
||||
}
|
||||
|
||||
listOptions.items = result.Items;
|
||||
var trigger = false;
|
||||
|
||||
if (type == 'Audio') {
|
||||
html = LibraryBrowser.getListViewHtml(listOptions);
|
||||
trigger = true;
|
||||
} else {
|
||||
html = LibraryBrowser.getPosterViewHtml(listOptions);
|
||||
}
|
||||
|
||||
var itemsContainer = element.querySelector('.itemsContainer');
|
||||
itemsContainer.innerHTML = html;
|
||||
|
||||
$(itemsContainer).createCardMenus();
|
||||
|
||||
if (trigger) {
|
||||
$(itemsContainer).trigger('create');
|
||||
}
|
||||
ImageLoader.lazyChildren(itemsContainer);
|
||||
});
|
||||
}
|
||||
|
||||
function renderDetails(page, item, context) {
|
||||
function getMoreItemsHref(item, type) {
|
||||
|
||||
//LibraryBrowser.renderDetailPageBackdrop(page, item);
|
||||
LibraryBrowser.renderOverview(page.querySelectorAll('.itemOverview'), item);
|
||||
|
||||
renderUserDataIcons(page, item);
|
||||
LibraryBrowser.renderLinks(page.querySelector('#itemLinks'), item);
|
||||
|
||||
LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
|
||||
|
||||
if (item.Type == "Person" && item.PremiereDate) {
|
||||
|
||||
try {
|
||||
var birthday = parseISO8601Date(item.PremiereDate, { toLocal: true }).toDateString();
|
||||
|
||||
$('#itemBirthday', page).show().html(Globalize.translate('BirthDateValue').replace('{0}', birthday));
|
||||
}
|
||||
catch (err) {
|
||||
$('#itemBirthday', page).hide();
|
||||
}
|
||||
} else {
|
||||
$('#itemBirthday', page).hide();
|
||||
return 'secondaryitems.html?type=' + type + '&parentid=' + item.Id;
|
||||
}
|
||||
|
||||
if (item.Type == "Person" && item.EndDate) {
|
||||
function addCurrentItemToQuery(query, item) {
|
||||
|
||||
try {
|
||||
var deathday = parseISO8601Date(item.EndDate, { toLocal: true }).toDateString();
|
||||
|
||||
$('#itemDeathDate', page).show().html(Globalize.translate('DeathDateValue').replace('{0}', deathday));
|
||||
if (item.Type == "Person") {
|
||||
query.PersonIds = item.Id;
|
||||
}
|
||||
catch (err) {
|
||||
$('#itemBirthday', page).hide();
|
||||
else if (item.Type == "Genre") {
|
||||
query.Genres = item.Name;
|
||||
}
|
||||
} else {
|
||||
else if (item.Type == "MusicGenre") {
|
||||
query.Genres = item.Name;
|
||||
}
|
||||
|
||||
if (item.Type == "Person" && item.ProductionLocations && item.ProductionLocations.length) {
|
||||
|
||||
var gmap = '<a class="textlink" target="_blank" href="https://maps.google.com/maps?q=' + item.ProductionLocations[0] + '">' + item.ProductionLocations[0] + '</a>';
|
||||
|
||||
$('#itemBirthLocation', page).show().html(Globalize.translate('BirthPlaceValue').replace('{0}', gmap)).trigger('create');
|
||||
} else {
|
||||
$('#itemBirthLocation', page).hide();
|
||||
else if (item.Type == "GameGenre") {
|
||||
query.Genres = item.Name;
|
||||
}
|
||||
else if (item.Type == "Studio") {
|
||||
query.StudioIds = item.Id;
|
||||
}
|
||||
else if (item.Type == "MusicArtist") {
|
||||
query.ArtistIds = item.Id;
|
||||
}
|
||||
}
|
||||
|
||||
function renderUserDataIcons(page, item) {
|
||||
$('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
|
||||
}
|
||||
|
||||
function addCurrentItemToQuery(query) {
|
||||
|
||||
if (currentItem.Type == "Person") {
|
||||
query.PersonIds = currentItem.Id;
|
||||
}
|
||||
else if (currentItem.Type == "Genre") {
|
||||
query.Genres = currentItem.Name;
|
||||
}
|
||||
else if (currentItem.Type == "MusicGenre") {
|
||||
query.Genres = currentItem.Name;
|
||||
}
|
||||
else if (currentItem.Type == "GameGenre") {
|
||||
query.Genres = currentItem.Name;
|
||||
}
|
||||
else if (currentItem.Type == "Studio") {
|
||||
query.StudioIds = currentItem.Id;
|
||||
}
|
||||
else if (currentItem.Type == "MusicArtist") {
|
||||
query.ArtistIds = currentItem.Id;
|
||||
}
|
||||
}
|
||||
|
||||
function getQuery(options) {
|
||||
function getQuery(options, item) {
|
||||
|
||||
var query = {
|
||||
|
||||
|
|
@ -359,14 +313,14 @@
|
|||
query.SortBy = "AlbumArtist,Album,SortName";
|
||||
}
|
||||
|
||||
addCurrentItemToQuery(query);
|
||||
addCurrentItemToQuery(query, item);
|
||||
|
||||
return query;
|
||||
}
|
||||
|
||||
function getItemsFunction(options) {
|
||||
function getItemsFunction(options, item) {
|
||||
|
||||
var query = getQuery(options);
|
||||
var query = getQuery(options, item);
|
||||
|
||||
return function (index, limit, fields) {
|
||||
|
||||
|
|
@ -383,187 +337,8 @@
|
|||
|
||||
}
|
||||
|
||||
function loadItems(page, options) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
_childrenItemsFunction = getItemsFunction(options);
|
||||
|
||||
var query = getQuery(options);
|
||||
|
||||
getItemsFunction(options)(options.StartIndex, options.Limit, options.Fields).done(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
if (result.TotalRecordCount > query.Limit) {
|
||||
|
||||
var pagingHtml = LibraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false
|
||||
});
|
||||
|
||||
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
|
||||
|
||||
$('.viewSettings', page).show();
|
||||
} else {
|
||||
$('.listTopPaging', page).html('');
|
||||
$('.viewSettings', page).hide();
|
||||
}
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
if (query.IncludeItemTypes == "Audio") {
|
||||
|
||||
html = "<div style='max-width:1000px;margin:auto;'>" + LibraryBrowser.getListViewHtml({
|
||||
items: result.Items,
|
||||
playFromHere: true,
|
||||
defaultAction: 'playallfromhere',
|
||||
smallIcon: true
|
||||
}) + "</div>";
|
||||
}
|
||||
else if (query.IncludeItemTypes == "Movie" || query.IncludeItemTypes == "Trailer") {
|
||||
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "portrait",
|
||||
context: 'movies',
|
||||
showTitle: true,
|
||||
centerText: true
|
||||
});
|
||||
|
||||
}
|
||||
else if (query.IncludeItemTypes == "Episode") {
|
||||
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
showTitle: true,
|
||||
showParentTitle: true,
|
||||
overlayText: screenWidth >= 600
|
||||
});
|
||||
|
||||
}
|
||||
else if (query.IncludeItemTypes == "Series") {
|
||||
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "backdrop",
|
||||
preferThumb: true,
|
||||
context: 'tv'
|
||||
});
|
||||
|
||||
}
|
||||
else if (query.IncludeItemTypes == "MusicAlbum") {
|
||||
|
||||
html = LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: "square",
|
||||
context: 'music',
|
||||
playFromHere: true,
|
||||
showTitle: true,
|
||||
showParentTitle: true
|
||||
});
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
html = "<div style='max-width:1000px;margin:auto;'>" + LibraryBrowser.getListViewHtml({
|
||||
items: result.Items,
|
||||
smallIcon: true
|
||||
}) + "</div>";
|
||||
}
|
||||
|
||||
html += LibraryBrowser.getQueryPagingHtml({
|
||||
startIndex: query.StartIndex,
|
||||
limit: query.Limit,
|
||||
totalRecordCount: result.TotalRecordCount,
|
||||
showLimit: false,
|
||||
updatePageSizeSetting: false
|
||||
});
|
||||
|
||||
var elem = page.querySelector('#items');
|
||||
elem.innerHTML = html;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
// Do we still need this?
|
||||
$(elem).trigger('create');
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
|
||||
query.StartIndex = query.StartIndex + query.Limit;
|
||||
loadItems(page, query);
|
||||
});
|
||||
|
||||
$('.btnPreviousPage', page).on('click', function () {
|
||||
|
||||
query.StartIndex = query.StartIndex - query.Limit;
|
||||
loadItems(page, query);
|
||||
});
|
||||
|
||||
$('.selectPageSize', page).on('change', function () {
|
||||
query.Limit = parseInt(this.value);
|
||||
query.StartIndex = 0;
|
||||
loadItems(page, query);
|
||||
});
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('pageinitdepends', "#itemByNameDetailPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
$('.btnPlay', page).on('click', function () {
|
||||
var userdata = currentItem.UserData || {};
|
||||
LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.Type, false, "Audio", userdata.PlaybackPositionTicks);
|
||||
});
|
||||
|
||||
$('.itemsContainer', page).on('playallfromhere', function (e, index) {
|
||||
|
||||
LibraryBrowser.playAllFromHere(_childrenItemsFunction, index);
|
||||
|
||||
}).on('queueallfromhere', function (e, index) {
|
||||
|
||||
LibraryBrowser.queueAllFromHere(_childrenItemsFunction, index);
|
||||
|
||||
});
|
||||
|
||||
$('.btnMoreCommands', page).on('click', function () {
|
||||
|
||||
var button = this;
|
||||
|
||||
Dashboard.getCurrentUser().done(function (user) {
|
||||
|
||||
LibraryBrowser.showMoreCommands(button, currentItem.Id, LibraryBrowser.getMoreCommands(currentItem, user));
|
||||
});
|
||||
});
|
||||
|
||||
$('.btnSync', page).on('click', function () {
|
||||
|
||||
SyncManager.showMenu({
|
||||
items: [currentItem]
|
||||
});
|
||||
});
|
||||
|
||||
var btnMore = page.querySelectorAll('.btnMoreCommands iron-icon');
|
||||
for (var i = 0, length = btnMore.length; i < length; i++) {
|
||||
btnMore[i].icon = AppInfo.moreIcon;
|
||||
}
|
||||
|
||||
}).on('pagebeforeshowready', "#itemByNameDetailPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
||||
reload(page);
|
||||
|
||||
}).on('pagebeforehide', "#itemByNameDetailPage", function () {
|
||||
|
||||
currentItem = null;
|
||||
});
|
||||
|
||||
window.ItemsByName = {
|
||||
renderItems: renderItems
|
||||
};
|
||||
|
||||
})(jQuery, document, LibraryBrowser);
|
||||
|
|
@ -2,13 +2,47 @@
|
|||
|
||||
var currentItem;
|
||||
|
||||
function reload(page) {
|
||||
function getPromise() {
|
||||
|
||||
var id = getParameterByName('id');
|
||||
|
||||
if (id) {
|
||||
return ApiClient.getItem(Dashboard.getCurrentUserId(), id);
|
||||
}
|
||||
|
||||
var name = getParameterByName('genre');
|
||||
|
||||
if (name) {
|
||||
return ApiClient.getGenre(name, Dashboard.getCurrentUserId());
|
||||
}
|
||||
|
||||
name = getParameterByName('musicgenre');
|
||||
|
||||
if (name) {
|
||||
return ApiClient.getMusicGenre(name, Dashboard.getCurrentUserId());
|
||||
}
|
||||
|
||||
name = getParameterByName('gamegenre');
|
||||
|
||||
if (name) {
|
||||
return ApiClient.getGameGenre(name, Dashboard.getCurrentUserId());
|
||||
}
|
||||
|
||||
name = getParameterByName('musicartist');
|
||||
|
||||
if (name) {
|
||||
return ApiClient.getArtist(name, Dashboard.getCurrentUserId());
|
||||
}
|
||||
else {
|
||||
throw new Error('Invalid request');
|
||||
}
|
||||
}
|
||||
|
||||
function reload(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
|
||||
getPromise().done(function (item) {
|
||||
|
||||
reloadFromItem(page, item);
|
||||
});
|
||||
|
|
@ -251,6 +285,11 @@
|
|||
$('#childrenCollapsible', page).removeClass('hide');
|
||||
renderChannelGuide(page, item, user);
|
||||
}
|
||||
else if (item.Type == 'Studio' || item.Type == 'Person' || item.Type == 'Genre' || item.Type == 'MusicGenre' || item.Type == 'GameGenre' || item.Type == 'MusicArtist') {
|
||||
|
||||
$('#childrenCollapsible', page).removeClass('hide');
|
||||
renderItemsByName(page, item, user);
|
||||
}
|
||||
else if (item.IsFolder) {
|
||||
|
||||
if (item.Type == "BoxSet") {
|
||||
|
|
@ -460,7 +499,7 @@
|
|||
|
||||
var artist = artists[i];
|
||||
|
||||
html.push('<a class="textlink" href="itembynamedetails.html?context=' + context + '&id=' + artist.Id + '">' + artist.Name + '</a>');
|
||||
html.push('<a class="textlink" href="itemdetails.html?context=' + context + '&id=' + artist.Id + '">' + artist.Name + '</a>');
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -620,7 +659,7 @@
|
|||
}
|
||||
|
||||
if (item.Studios.length) {
|
||||
html += ' on <a class="textlink" href="itembynamedetails.html?context=' + context + '&id=' + item.Studios[0].Id + '">' + item.Studios[0].Name + '</a>';
|
||||
html += ' on <a class="textlink" href="itemdetails.html?context=' + context + '&id=' + item.Studios[0].Id + '">' + item.Studios[0].Name + '</a>';
|
||||
}
|
||||
|
||||
if (html) {
|
||||
|
|
@ -833,6 +872,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
function renderItemsByName(page, item, user) {
|
||||
|
||||
require('scripts/itembynamedetailpage'.split(','), function () {
|
||||
|
||||
|
||||
window.ItemsByName.renderItems(page, item);
|
||||
});
|
||||
}
|
||||
|
||||
function renderChannelGuide(page, item, user) {
|
||||
|
||||
require('scripts/livetvcomponents,scripts/livetvchannel,livetvcss'.split(','), function () {
|
||||
|
|
@ -1438,7 +1486,7 @@
|
|||
}
|
||||
|
||||
var cast = casts[i];
|
||||
var href = isStatic ? '#' : 'itembynamedetails.html?context=' + context + '&id=' + cast.Id + '';
|
||||
var href = isStatic ? '#' : 'itemdetails.html?context=' + context + '&id=' + cast.Id + '';
|
||||
html += '<a class="tileItem smallPosterTileItem" href="' + href + '">';
|
||||
|
||||
var imgUrl;
|
||||
|
|
|
|||
|
|
@ -428,7 +428,7 @@
|
|||
var artist = artists[i];
|
||||
|
||||
var css = cssClass ? (' class="' + cssClass + '"') : '';
|
||||
html.push('<a' + css + ' href="itembynamedetails.html?context=music&id=' + artist.Id + '">' + artist.Name + '</a>');
|
||||
html.push('<a' + css + ' href="itemdetails.html?context=music&id=' + artist.Id + '">' + artist.Name + '</a>');
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -824,26 +824,26 @@
|
|||
return "itemdetails.html?id=" + id + contextSuffix;
|
||||
}
|
||||
if (item.Type == "Genre") {
|
||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
||||
return "itemdetails.html?id=" + id + contextSuffix;
|
||||
}
|
||||
if (item.Type == "MusicGenre") {
|
||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
||||
return "itemdetails.html?id=" + id + contextSuffix;
|
||||
}
|
||||
if (item.Type == "GameGenre") {
|
||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
||||
return "itemdetails.html?id=" + id + contextSuffix;
|
||||
}
|
||||
if (item.Type == "Studio") {
|
||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
||||
return "itemdetails.html?id=" + id + contextSuffix;
|
||||
}
|
||||
if (item.Type == "Person") {
|
||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
||||
return "itemdetails.html?id=" + id + contextSuffix;
|
||||
}
|
||||
if (item.Type == "Recording") {
|
||||
return "itemdetails.html?id=" + id;
|
||||
}
|
||||
|
||||
if (item.Type == "MusicArtist") {
|
||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
||||
return "itemdetails.html?id=" + id + contextSuffix;
|
||||
}
|
||||
|
||||
if (item.IsFolder) {
|
||||
|
|
@ -3176,7 +3176,7 @@
|
|||
if (isStatic) {
|
||||
html += item.Studios[i].Name;
|
||||
} else {
|
||||
html += '<a class="textlink" href="itembynamedetails.html?context=' + context + '&id=' + item.Studios[i].Id + '">' + item.Studios[i].Name + '</a>';
|
||||
html += '<a class="textlink" href="itemdetails.html?context=' + context + '&id=' + item.Studios[i].Id + '">' + item.Studios[i].Name + '</a>';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3217,7 +3217,7 @@
|
|||
if (isStatic) {
|
||||
html += genres[i];
|
||||
} else {
|
||||
html += '<a class="textlink" href="itembynamedetails.html?context=' + context + '&' + param + '=' + ApiClient.encodeName(genres[i]) + '">' + genres[i] + '</a>';
|
||||
html += '<a class="textlink" href="itemdetails.html?context=' + context + '&' + param + '=' + ApiClient.encodeName(genres[i]) + '">' + genres[i] + '</a>';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -417,13 +417,13 @@
|
|||
Dashboard.navigate('itemdetails.html?id=' + albumid);
|
||||
break;
|
||||
case 'artist':
|
||||
Dashboard.navigate('itembynamedetails.html?context=music&id=' + artistid);
|
||||
Dashboard.navigate('itemdetails.html?context=music&id=' + artistid);
|
||||
break;
|
||||
case 'play':
|
||||
MediaController.play(itemId);
|
||||
break;
|
||||
case 'playallfromhere':
|
||||
$(card).parents('.itemsContainer').trigger('playallfromhere', [index]);
|
||||
playAllFromHere(index, $(card).parents('.itemsContainer'), 'play');
|
||||
break;
|
||||
case 'queue':
|
||||
MediaController.queue(itemId);
|
||||
|
|
@ -440,7 +440,7 @@
|
|||
});
|
||||
break;
|
||||
case 'queueallfromhere':
|
||||
$(card).parents('.itemsContainer').trigger('queueallfromhere', [index]);
|
||||
playAllFromHere(index, $(card).parents('.itemsContainer'), 'queue');
|
||||
break;
|
||||
case 'sync':
|
||||
SyncManager.showMenu({
|
||||
|
|
@ -1145,12 +1145,34 @@
|
|||
index = elemWithAttributes.getAttribute('data-index');
|
||||
itemsContainer = $(elem).parents('.itemsContainer');
|
||||
|
||||
itemsContainer.trigger('playallfromhere', [index]);
|
||||
playAllFromHere(index, itemsContainer, 'play');
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function playAllFromHere(index, itemsContainer, method) {
|
||||
|
||||
var ids = $('.mediaItem', itemsContainer).get().map(function(i) {
|
||||
return i.getAttribute('data-itemid') || i.parentNode.getAttribute('data-itemid');
|
||||
});
|
||||
|
||||
ids = ids.slice(index);
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), {
|
||||
|
||||
Ids: ids.join(','),
|
||||
Fields: 'MediaSources,Chapters',
|
||||
Limit: 100
|
||||
|
||||
}).done(function (result) {
|
||||
|
||||
MediaController[method]({
|
||||
items: result.Items
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
$(document).on('pageinitdepends', ".libraryPage", function () {
|
||||
|
||||
var page = this;
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
html += '</paper-item-body>';
|
||||
|
||||
html += '<paper-icon-button icon="delete" data-seriestimerid="' + timer.Id + '" title="' + Globalize.translate('ButtonCancelSeries') + '" class="btnCancelSeries"></paper-icon-button>';
|
||||
html += '<paper-icon-button icon="cancel" data-seriestimerid="' + timer.Id + '" title="' + Globalize.translate('ButtonCancelSeries') + '" class="btnCancelSeries"></paper-icon-button>';
|
||||
|
||||
html += '</paper-icon-item>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@
|
|||
html += '</div>';
|
||||
}
|
||||
|
||||
html += '<paper-icon-button icon="delete" data-timerid="' + timer.Id + '" title="' + Globalize.translate('ButonCancelRecording') + '" class="btnDeleteTimer"></paper-icon-button>';
|
||||
html += '<paper-icon-button icon="cancel" data-timerid="' + timer.Id + '" title="' + Globalize.translate('ButonCancelRecording') + '" class="btnDeleteTimer"></paper-icon-button>';
|
||||
|
||||
html += '</paper-icon-item>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,7 +106,7 @@
|
|||
html += '<a href="itemlist.html?id=' + rRow.Id + '">' + rItem.Name + '</a>';
|
||||
break;
|
||||
case "ItemByNameDetails":
|
||||
html += '<a href="itembynamedetails.html?id=' + rItem.Id + '&context=' + rRow.RowType + '">' + rItem.Name + '</a>';
|
||||
html += '<a href="itemdetails.html?id=' + rItem.Id + '&context=' + rRow.RowType + '">' + rItem.Name + '</a>';
|
||||
break;
|
||||
case "EmbeddedImage":
|
||||
if (rRow.HasEmbeddedImage) {
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
var rItem = group.Items[j];
|
||||
html += '<a class="item ui-btn"';
|
||||
if (rItem.Id > "")
|
||||
html += ' href="itembynamedetails.html?id=' + rItem.Id + '"';
|
||||
html += ' href="itemdetails.html?id=' + rItem.Id + '"';
|
||||
html += '>' + rItem.Name + ' ' + '</a>';
|
||||
html += '<a title="" class="listviewMenuButton ui-btn ui-btn-inline">' + rItem.Value + ' ' + '</a>';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,32 @@
|
|||
(function ($, document) {
|
||||
|
||||
var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
|
||||
|
||||
var data = {};
|
||||
|
||||
function getQuery() {
|
||||
function addCurrentItemToQuery(query, item) {
|
||||
|
||||
if (item.Type == "Person") {
|
||||
query.PersonIds = item.Id;
|
||||
}
|
||||
else if (item.Type == "Genre") {
|
||||
query.Genres = item.Name;
|
||||
}
|
||||
else if (item.Type == "MusicGenre") {
|
||||
query.Genres = item.Name;
|
||||
}
|
||||
else if (item.Type == "GameGenre") {
|
||||
query.Genres = item.Name;
|
||||
}
|
||||
else if (item.Type == "Studio") {
|
||||
query.StudioIds = item.Id;
|
||||
}
|
||||
else if (item.Type == "MusicArtist") {
|
||||
query.ArtistIds = item.Id;
|
||||
} else {
|
||||
query.ParentId = item.Id;
|
||||
}
|
||||
}
|
||||
|
||||
function getQuery(parentItem) {
|
||||
|
||||
var key = getSavedQueryKey();
|
||||
var pageData = data[key];
|
||||
|
|
@ -33,7 +55,10 @@
|
|||
pageData.query.Filters = filters;
|
||||
}
|
||||
|
||||
pageData.query.ParentId = getParameterByName('parentid') || LibraryMenu.getTopParentId();
|
||||
if (parentItem) {
|
||||
addCurrentItemToQuery(pageData.query, parentItem);
|
||||
}
|
||||
|
||||
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||
}
|
||||
return pageData.query;
|
||||
|
|
@ -59,11 +84,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
function reloadItems(page) {
|
||||
function reloadItems(page, parentItem) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var query = getQuery();
|
||||
var query = getQuery(parentItem);
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
|
||||
|
||||
|
|
@ -79,7 +104,19 @@
|
|||
});
|
||||
|
||||
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
|
||||
var trigger = false;
|
||||
|
||||
if (query.IncludeItemTypes == "Audio") {
|
||||
|
||||
html = '<div style="max-width:1000px;margin:auto;">' + LibraryBrowser.getListViewHtml({
|
||||
items: result.Items,
|
||||
playFromHere: true,
|
||||
defaultAction: 'playallfromhere',
|
||||
smallIcon: true
|
||||
}) + '</div>';
|
||||
trigger = true;
|
||||
|
||||
} else {
|
||||
var posterOptions = {
|
||||
items: result.Items,
|
||||
shape: "auto",
|
||||
|
|
@ -106,19 +143,24 @@
|
|||
|
||||
// Poster
|
||||
html = LibraryBrowser.getPosterViewHtml(posterOptions);
|
||||
}
|
||||
|
||||
var elem = page.querySelector('#items');
|
||||
elem.innerHTML = html + pagingHtml;
|
||||
ImageLoader.lazyChildren(elem);
|
||||
|
||||
if (trigger) {
|
||||
$(elem).trigger('create');
|
||||
}
|
||||
|
||||
$('.btnNextPage', page).on('click', function () {
|
||||
query.StartIndex += query.Limit;
|
||||
reloadItems(page);
|
||||
reloadItems(page, parentItem);
|
||||
});
|
||||
|
||||
$('.btnPreviousPage', page).on('click', function () {
|
||||
query.StartIndex -= query.Limit;
|
||||
reloadItems(page);
|
||||
reloadItems(page, parentItem);
|
||||
});
|
||||
|
||||
LibraryBrowser.setLastRefreshed(page);
|
||||
|
|
@ -139,10 +181,14 @@
|
|||
if (getParameterByName('parentid')) {
|
||||
ApiClient.getItem(Dashboard.getCurrentUserId(), getParameterByName('parentid')).done(function (parent) {
|
||||
LibraryMenu.setTitle(parent.Name);
|
||||
|
||||
if (LibraryBrowser.needsRefresh(page)) {
|
||||
reloadItems(page, parent);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (LibraryBrowser.needsRefresh(page)) {
|
||||
else if (LibraryBrowser.needsRefresh(page)) {
|
||||
reloadItems(page);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1173,22 +1173,22 @@ var Dashboard = {
|
|||
var type = (cmd.ItemType || "").toLowerCase();
|
||||
|
||||
if (type == "genre") {
|
||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
||||
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||
}
|
||||
else if (type == "musicgenre") {
|
||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
||||
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||
}
|
||||
else if (type == "gamegenre") {
|
||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
||||
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||
}
|
||||
else if (type == "studio") {
|
||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
||||
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||
}
|
||||
else if (type == "person") {
|
||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
||||
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||
}
|
||||
else if (type == "musicartist") {
|
||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
||||
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||
}
|
||||
|
||||
if (url) {
|
||||
|
|
|
|||
1
dashboard-ui/thirdparty/emby-icons.html
vendored
1
dashboard-ui/thirdparty/emby-icons.html
vendored
|
|
@ -126,6 +126,7 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
|
|||
<g id="repeat-one"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z" /></g>
|
||||
<g id="open-in-browser"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z" /></g>
|
||||
<g id="cloud-download"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z" /></g>
|
||||
<g id="cancel"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z" /></g>
|
||||
</defs>
|
||||
</svg>
|
||||
</iron-iconset-svg>
|
||||
|
|
|
|||
|
|
@ -18671,6 +18671,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<g id="repeat-one"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4zm-4-2V9h-1l-2 1v1h1.5v4H13z"></path></g>
|
||||
<g id="open-in-browser"><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"></path></g>
|
||||
<g id="cloud-download"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z"></path></g>
|
||||
<g id="cancel"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"></path></g>
|
||||
</defs>
|
||||
</svg>
|
||||
</iron-iconset-svg>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue