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": "*",
|
"web-component-tester": "*",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"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",
|
"_release": "1.0.5",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.5",
|
"tag": "v1.0.5",
|
||||||
"commit": "cf833eab5c55a26c5aa92e56d3fcb079120ce66a"
|
"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",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymerelements/iron-a11y-keys-behavior"
|
"_originalSource": "PolymerElements/iron-a11y-keys-behavior"
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-dropdown",
|
"name": "iron-dropdown",
|
||||||
"version": "1.0.4",
|
"version": "1.0.5",
|
||||||
"description": "",
|
"description": "",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
|
@ -35,11 +35,11 @@
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "*",
|
||||||
"iron-image": "polymerelements/iron-image#^1.0.0"
|
"iron-image": "polymerelements/iron-image#^1.0.0"
|
||||||
},
|
},
|
||||||
"_release": "1.0.4",
|
"_release": "1.0.5",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.4",
|
"tag": "v1.0.5",
|
||||||
"commit": "9a09e5ed5a4c6ee9643caba74022a01135c7878b"
|
"commit": "9c300a14a5aeca1c02f085e9117521af814ce640"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-dropdown.git",
|
"_source": "git://github.com/polymerelements/iron-dropdown.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-dropdown",
|
"name": "iron-dropdown",
|
||||||
"version": "1.0.4",
|
"version": "1.0.5",
|
||||||
"description": "",
|
"description": "",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer 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">
|
<div class="horizontal-section flex layout horizontal">
|
||||||
<x-select>
|
<x-select>
|
||||||
<button class="dropdown-trigger">Basic</button>
|
<button class="dropdown-trigger">Basic</button>
|
||||||
<ul class="dropdown-content">
|
<ul class="dropdown-content" tabindex="0">
|
||||||
<template is="dom-repeat" items="[[letters]]">
|
<template is="dom-repeat" items="[[letters]]">
|
||||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -101,7 +101,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
</x-select>
|
</x-select>
|
||||||
<x-select vertical-align="bottom">
|
<x-select vertical-align="bottom">
|
||||||
<button class="dropdown-trigger">Bottom-left Aligned</button>
|
<button class="dropdown-trigger">Bottom-left Aligned</button>
|
||||||
<ul class="dropdown-content">
|
<ul class="dropdown-content" tabindex="0">
|
||||||
<template is="dom-repeat" items="[[letters]]">
|
<template is="dom-repeat" items="[[letters]]">
|
||||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -109,7 +109,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
</x-select>
|
</x-select>
|
||||||
<x-select horizontal-align="right" vertical-align="top">
|
<x-select horizontal-align="right" vertical-align="top">
|
||||||
<button class="dropdown-trigger">Top-right Aligned</button>
|
<button class="dropdown-trigger">Top-right Aligned</button>
|
||||||
<ul class="dropdown-content">
|
<ul class="dropdown-content" tabindex="0">
|
||||||
<template is="dom-repeat" items="[[dinosaurs]]">
|
<template is="dom-repeat" items="[[dinosaurs]]">
|
||||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -145,6 +145,14 @@ method is called on the element.
|
||||||
type: Object
|
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
|
* Set to true to disable animations when opening and closing the
|
||||||
* dropdown.
|
* dropdown.
|
||||||
|
|
@ -185,6 +193,17 @@ method is called on the element.
|
||||||
return Polymer.dom(this.$.content).getDistributedNodes()[0];
|
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() {
|
get _defaultPositionTarget() {
|
||||||
var parent = Polymer.dom(this).parentNode;
|
var parent = Polymer.dom(this).parentNode;
|
||||||
|
|
||||||
|
|
@ -195,6 +214,9 @@ method is called on the element.
|
||||||
return parent;
|
return parent;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The bounding rect of the position target.
|
||||||
|
*/
|
||||||
get _positionRect() {
|
get _positionRect() {
|
||||||
if (!this._positionRectMemo && this.positionTarget) {
|
if (!this._positionRectMemo && this.positionTarget) {
|
||||||
this._positionRectMemo = this.positionTarget.getBoundingClientRect();
|
this._positionRectMemo = this.positionTarget.getBoundingClientRect();
|
||||||
|
|
@ -203,6 +225,9 @@ method is called on the element.
|
||||||
return this._positionRectMemo;
|
return this._positionRectMemo;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The horizontal offset value used to position the dropdown.
|
||||||
|
*/
|
||||||
get _horizontalAlignTargetValue() {
|
get _horizontalAlignTargetValue() {
|
||||||
var target;
|
var target;
|
||||||
|
|
||||||
|
|
@ -217,6 +242,9 @@ method is called on the element.
|
||||||
return Math.max(target, 0);
|
return Math.max(target, 0);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* The vertical offset value used to position the dropdown.
|
||||||
|
*/
|
||||||
get _verticalAlignTargetValue() {
|
get _verticalAlignTargetValue() {
|
||||||
var target;
|
var target;
|
||||||
|
|
||||||
|
|
@ -231,27 +259,41 @@ method is called on the element.
|
||||||
return Math.max(target, 0);
|
return Math.max(target, 0);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when the value of `opened` changes.
|
||||||
|
*
|
||||||
|
* @param {boolean} opened True if the dropdown is opened.
|
||||||
|
*/
|
||||||
_openedChanged: function(opened) {
|
_openedChanged: function(opened) {
|
||||||
if (opened && this.disabled) {
|
if (opened && this.disabled) {
|
||||||
this.cancel();
|
this.cancel();
|
||||||
} else {
|
} else {
|
||||||
this._cancelAnimations();
|
this.cancelAnimation();
|
||||||
this._prepareDropdown();
|
this._prepareDropdown();
|
||||||
Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
|
Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.opened) {
|
||||||
|
this._focusContent();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Overridden from `IronOverlayBehavior`.
|
||||||
|
*/
|
||||||
_renderOpened: function() {
|
_renderOpened: function() {
|
||||||
Polymer.IronDropdownScrollManager.pushScrollLock(this);
|
Polymer.IronDropdownScrollManager.pushScrollLock(this);
|
||||||
if (!this.noAnimations && this.animationConfig && this.animationConfig.open) {
|
if (!this.noAnimations && this.animationConfig && this.animationConfig.open) {
|
||||||
this.$.contentWrapper.classList.add('animating');
|
this.$.contentWrapper.classList.add('animating');
|
||||||
this.playAnimation('open');
|
this.playAnimation('open');
|
||||||
} else {
|
} else {
|
||||||
this._focusContent();
|
|
||||||
Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
|
Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Overridden from `IronOverlayBehavior`.
|
||||||
|
*/
|
||||||
_renderClosed: function() {
|
_renderClosed: function() {
|
||||||
Polymer.IronDropdownScrollManager.removeScrollLock(this);
|
Polymer.IronDropdownScrollManager.removeScrollLock(this);
|
||||||
if (!this.noAnimations && this.animationConfig && this.animationConfig.close) {
|
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() {
|
_onNeonAnimationFinish: function() {
|
||||||
this.$.contentWrapper.classList.remove('animating');
|
this.$.contentWrapper.classList.remove('animating');
|
||||||
if (this.opened) {
|
if (this.opened) {
|
||||||
|
|
@ -271,6 +319,9 @@ method is called on the element.
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when an `iron-resize` event fires.
|
||||||
|
*/
|
||||||
_onIronResize: function() {
|
_onIronResize: function() {
|
||||||
var containedElement = this.containedElement;
|
var containedElement = this.containedElement;
|
||||||
var scrollTop;
|
var scrollTop;
|
||||||
|
|
@ -293,14 +344,17 @@ method is called on the element.
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Called when the `positionTarget` property changes.
|
||||||
|
*/
|
||||||
_positionTargetChanged: function() {
|
_positionTargetChanged: function() {
|
||||||
this._updateOverlayPosition();
|
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() {
|
_updateAnimationConfig: function() {
|
||||||
var animationConfig = {};
|
var animationConfig = {};
|
||||||
var animations = [];
|
var animations = [];
|
||||||
|
|
@ -328,12 +382,21 @@ method is called on the element.
|
||||||
this.animationConfig = animationConfig;
|
this.animationConfig = animationConfig;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prepares the dropdown for opening by updating measured layout
|
||||||
|
* values.
|
||||||
|
*/
|
||||||
_prepareDropdown: function() {
|
_prepareDropdown: function() {
|
||||||
this.sizingTarget = this.containedElement || this.sizingTarget;
|
this.sizingTarget = this.containedElement || this.sizingTarget;
|
||||||
this._updateAnimationConfig();
|
this._updateAnimationConfig();
|
||||||
this._updateOverlayPosition();
|
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() {
|
_updateOverlayPosition: function() {
|
||||||
this._positionRectMemo = null;
|
this._positionRectMemo = null;
|
||||||
|
|
||||||
|
|
@ -359,10 +422,17 @@ method is called on the element.
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Focuses the configured focus target.
|
||||||
|
*/
|
||||||
_focusContent: function() {
|
_focusContent: function() {
|
||||||
if (this.containedElement) {
|
// NOTE(cdata): This is async so that it can attempt the focus after
|
||||||
this.containedElement.focus();
|
// `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>
|
</template>
|
||||||
</test-fixture>
|
</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>
|
<script>
|
||||||
function elementIsVisible(element) {
|
function elementIsVisible(element) {
|
||||||
var contentRect = element.getBoundingClientRect();
|
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() {
|
suite('<iron-dropdown>', function() {
|
||||||
var dropdown;
|
var dropdown;
|
||||||
|
var content;
|
||||||
|
|
||||||
suite('basic', function() {
|
suite('basic', function() {
|
||||||
setup(function() {
|
setup(function() {
|
||||||
dropdown = fixture('TrivialDropdown');
|
dropdown = fixture('TrivialDropdown');
|
||||||
|
content = Polymer.dom(dropdown).querySelector('.dropdown-content');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('effectively hides the dropdown content', function() {
|
test('effectively hides the dropdown content', function() {
|
||||||
var content = dropdown.querySelector('.dropdown-content');
|
|
||||||
|
|
||||||
expect(elementIsVisible(content)).to.be.equal(false);
|
expect(elementIsVisible(content)).to.be.equal(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('shows dropdown content when opened', function(done) {
|
test('shows dropdown content when opened', function(done) {
|
||||||
var content = dropdown.querySelector('.dropdown-content');
|
|
||||||
|
|
||||||
dropdown.open();
|
dropdown.open();
|
||||||
|
|
||||||
Polymer.Base.async(function() {
|
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) {
|
test('hides dropdown content when outside is clicked', function(done) {
|
||||||
var content = dropdown.querySelector('.dropdown-content');
|
|
||||||
|
|
||||||
dropdown.open();
|
dropdown.open();
|
||||||
|
|
||||||
Polymer.Base.async(function() {
|
Polymer.Base.async(function() {
|
||||||
|
|
@ -93,7 +100,34 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
}, 100);
|
}, 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",
|
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.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",
|
"_release": "1.0.3",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.3",
|
"tag": "v1.0.3",
|
||||||
"commit": "e6c2cfec18354973ac03e70dcd8afcc3c72d09b9"
|
"commit": "e6c2cfec18354973ac03e70dcd8afcc3c72d09b9"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-flex-layout.git",
|
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymerelements/iron-flex-layout"
|
"_originalSource": "PolymerElements/iron-flex-layout"
|
||||||
}
|
}
|
||||||
|
|
@ -34,14 +34,14 @@
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "*",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"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",
|
"_release": "1.0.5",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.5",
|
"tag": "v1.0.5",
|
||||||
"commit": "f03cea265587c724cf3a85aef76b2ab7ccfd2b94"
|
"commit": "f03cea265587c724cf3a85aef76b2ab7ccfd2b94"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/iron-overlay-behavior.git",
|
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/iron-overlay-behavior"
|
"_originalSource": "polymerelements/iron-overlay-behavior"
|
||||||
}
|
}
|
||||||
|
|
@ -54,7 +54,7 @@
|
||||||
"tag": "v1.0.6",
|
"tag": "v1.0.6",
|
||||||
"commit": "ec51bf68f05c40373536cc726ca674e4549b7db2"
|
"commit": "ec51bf68f05c40373536cc726ca674e4549b7db2"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/neon-animation.git",
|
"_source": "git://github.com/polymerelements/neon-animation.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "PolymerElements/neon-animation"
|
"_originalSource": "polymerelements/neon-animation"
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-dropdown-menu",
|
"name": "paper-dropdown-menu",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"description": "An element that works similarly to a native browser select",
|
"description": "An element that works similarly to a native browser select",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
|
@ -40,14 +40,13 @@
|
||||||
"web-component-tester": "*",
|
"web-component-tester": "*",
|
||||||
"paper-tabs": "polymerelements/paper-tabs#^1.0.0"
|
"paper-tabs": "polymerelements/paper-tabs#^1.0.0"
|
||||||
},
|
},
|
||||||
"_release": "1.0.1",
|
"_release": "1.0.2",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.1",
|
"tag": "v1.0.2",
|
||||||
"commit": "c16e6087ce4b770938b96647e80c78765eea41fa"
|
"commit": "fbf234c7bc8affe37e24c0b206d30551bc3289e5"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/PolymerElements/paper-dropdown-menu.git",
|
"_source": "git://github.com/PolymerElements/paper-dropdown-menu.git",
|
||||||
"_target": "~1.0.1",
|
"_target": "~1.0.1",
|
||||||
"_originalSource": "PolymerElements/paper-dropdown-menu",
|
"_originalSource": "PolymerElements/paper-dropdown-menu"
|
||||||
"_direct": true
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-dropdown-menu",
|
"name": "paper-dropdown-menu",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"description": "An element that works similarly to a native browser select",
|
"description": "An element that works similarly to a native browser select",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer 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>
|
</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 class="horizontal-section-container">
|
||||||
<div>
|
<div>
|
||||||
<h4>Disabled</h4>
|
<h4>Disabled</h4>
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@ item is displayed in the control. If no item is selected, the `label` is
|
||||||
displayed instead.
|
displayed instead.
|
||||||
|
|
||||||
The child element with the class `dropdown-content` will be used as the dropdown
|
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.
|
selecting its children.
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
@ -130,7 +130,7 @@ respectively.
|
||||||
vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
|
vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
|
||||||
disabled="[[disabled]]"
|
disabled="[[disabled]]"
|
||||||
no-animations="[[noAnimations]]"
|
no-animations="[[noAnimations]]"
|
||||||
on-iron-activate="_onIronActivate"
|
on-iron-select="_onIronSelect"
|
||||||
opened="{{opened}}">
|
opened="{{opened}}">
|
||||||
<div class="dropdown-trigger">
|
<div class="dropdown-trigger">
|
||||||
<paper-ripple></paper-ripple>
|
<paper-ripple></paper-ripple>
|
||||||
|
|
@ -145,9 +145,7 @@ respectively.
|
||||||
<iron-icon icon="arrow-drop-down" suffix></iron-icon>
|
<iron-icon icon="arrow-drop-down" suffix></iron-icon>
|
||||||
</paper-input>
|
</paper-input>
|
||||||
</div>
|
</div>
|
||||||
<div class="dropdown-content">
|
<content id="content" select=".dropdown-content"></content>
|
||||||
<content select=".dropdown-content"></content>
|
|
||||||
</div>
|
|
||||||
</paper-menu-button>
|
</paper-menu-button>
|
||||||
</template>
|
</template>
|
||||||
</dom-module>
|
</dom-module>
|
||||||
|
|
@ -190,7 +188,7 @@ respectively.
|
||||||
/**
|
/**
|
||||||
* The last selected item. An item is selected if the dropdown menu has
|
* The last selected item. An item is selected if the dropdown menu has
|
||||||
* a child with class `dropdown-content`, and that child triggers an
|
* 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: {
|
selectedItem: {
|
||||||
type: Object,
|
type: Object,
|
||||||
|
|
@ -264,6 +262,24 @@ respectively.
|
||||||
'aria-haspopup': 'true'
|
'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.
|
* 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);
|
this._setSelectedItem(event.detail.item);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -38,6 +38,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
</template>
|
</template>
|
||||||
</test-fixture>
|
</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>
|
<script>
|
||||||
|
|
||||||
suite('<paper-dropdown-menu>', function() {
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-menu-button",
|
"name": "paper-menu-button",
|
||||||
"version": "1.0.2",
|
"version": "1.0.3",
|
||||||
"description": "",
|
"description": "",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
|
@ -41,11 +41,11 @@
|
||||||
"iron-image": "polymerelements/iron-image#^1.0.0",
|
"iron-image": "polymerelements/iron-image#^1.0.0",
|
||||||
"iron-icon": "polymerelements/iron-icon#^1.0.0"
|
"iron-icon": "polymerelements/iron-icon#^1.0.0"
|
||||||
},
|
},
|
||||||
"_release": "1.0.2",
|
"_release": "1.0.3",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.2",
|
"tag": "v1.0.3",
|
||||||
"commit": "cf8bdea832bfa7b4f413e021ecb328273d659b17"
|
"commit": "24abacffd443f967125f5eae580eadc7b90f41c7"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/paper-menu-button.git",
|
"_source": "git://github.com/polymerelements/paper-menu-button.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "paper-menu-button",
|
"name": "paper-menu-button",
|
||||||
"version": "1.0.2",
|
"version": "1.0.3",
|
||||||
"description": "",
|
"description": "",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
|
|
||||||
|
|
@ -85,7 +85,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<div>
|
<div>
|
||||||
<h4>Paper Menu with multi selection</h4>
|
<h4>Paper Menu with multi selection</h4>
|
||||||
<div class="horizontal-section">
|
<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-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
|
||||||
<paper-menu class="dropdown-content" multi>
|
<paper-menu class="dropdown-content" multi>
|
||||||
<template is="dom-repeat" items="[[letters]]" as="letter">
|
<template is="dom-repeat" items="[[letters]]" as="letter">
|
||||||
|
|
|
||||||
|
|
@ -108,9 +108,10 @@ Custom property | Description | Default
|
||||||
vertical-offset="[[verticalOffset]]"
|
vertical-offset="[[verticalOffset]]"
|
||||||
open-animation-config="[[openAnimationConfig]]"
|
open-animation-config="[[openAnimationConfig]]"
|
||||||
close-animation-config="[[closeAnimationConfig]]"
|
close-animation-config="[[closeAnimationConfig]]"
|
||||||
no-animations="[[noAnimations]]">
|
no-animations="[[noAnimations]]"
|
||||||
|
focus-target="[[_dropdownContent]]">
|
||||||
<paper-material class="dropdown-content">
|
<paper-material class="dropdown-content">
|
||||||
<content select=".dropdown-content"></content>
|
<content id="content" select=".dropdown-content"></content>
|
||||||
</paper-material>
|
</paper-material>
|
||||||
</iron-dropdown>
|
</iron-dropdown>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -147,7 +148,8 @@ Custom property | Description | Default
|
||||||
opened: {
|
opened: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: false,
|
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
|
* Set to true to disable automatically closing the dropdown after
|
||||||
* a selection has been made.
|
* a selection has been made.
|
||||||
*/
|
*/
|
||||||
ignoreActivate: {
|
ignoreSelect: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
value: false
|
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: {
|
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.
|
* automatically close on the assumption that a value has been chosen.
|
||||||
*
|
*
|
||||||
* @param {CustomEvent} event A CustomEvent instance with type
|
* @param {CustomEvent} event A CustomEvent instance with type
|
||||||
* set to `"iron-activate"`.
|
* set to `"iron-select"`.
|
||||||
*/
|
*/
|
||||||
_onIronActivate: function(event) {
|
_onIronSelect: function(event) {
|
||||||
if (!this.ignoreActivate) {
|
if (!this.ignoreSelect) {
|
||||||
this.close();
|
this.close();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -321,6 +338,12 @@ Custom property | Description | Default
|
||||||
*/
|
*/
|
||||||
_openedChanged: function(opened, oldOpened) {
|
_openedChanged: function(opened, oldOpened) {
|
||||||
if (opened) {
|
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');
|
this.fire('paper-dropdown-open');
|
||||||
} else if (oldOpened != null) {
|
} else if (oldOpened != null) {
|
||||||
this.fire('paper-dropdown-close');
|
this.fire('paper-dropdown-close');
|
||||||
|
|
|
||||||
|
|
@ -34,7 +34,7 @@
|
||||||
"tag": "v1.0.11",
|
"tag": "v1.0.11",
|
||||||
"commit": "347542e9ebe3e6e5f0830ee10e1c20c12956ff2c"
|
"commit": "347542e9ebe3e6e5f0830ee10e1c20c12956ff2c"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/paper-styles.git",
|
"_source": "git://github.com/PolymerElements/paper-styles.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymerelements/paper-styles"
|
"_originalSource": "PolymerElements/paper-styles"
|
||||||
}
|
}
|
||||||
|
|
@ -23,14 +23,14 @@
|
||||||
"web-component-tester": "*"
|
"web-component-tester": "*"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"homepage": "https://github.com/polymer/polymer",
|
"homepage": "https://github.com/Polymer/polymer",
|
||||||
"_release": "1.1.0",
|
"_release": "1.1.0",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.1.0",
|
"tag": "v1.1.0",
|
||||||
"commit": "67fb2f85fd66d8556fc07cf1dec41ff5273fa68a"
|
"commit": "67fb2f85fd66d8556fc07cf1dec41ff5273fa68a"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymer/polymer.git",
|
"_source": "git://github.com/Polymer/polymer.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymer/polymer"
|
"_originalSource": "Polymer/polymer"
|
||||||
}
|
}
|
||||||
|
|
@ -255,6 +255,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
line-height: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cardContent .cardText {
|
.cardContent .cardText {
|
||||||
|
|
|
||||||
|
|
@ -391,7 +391,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center 15%;
|
background-position: center 15%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
height: 560px;
|
height: 600px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -529,6 +529,13 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (max-width: 1000px) {
|
||||||
|
|
||||||
|
.detailImageContainer img {
|
||||||
|
max-width: 240px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (max-width: 800px) {
|
@media all and (max-width: 800px) {
|
||||||
|
|
||||||
.parentName {
|
.parentName {
|
||||||
|
|
@ -756,56 +763,56 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||||
@media all and (max-height: 900px), (max-width: 800px) {
|
@media all and (max-height: 900px), (max-width: 800px) {
|
||||||
|
|
||||||
.itemBackdrop:not(.noBackdrop) {
|
.itemBackdrop:not(.noBackdrop) {
|
||||||
height: 500px;
|
height: 550px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 800px), (max-width: 700px) {
|
@media all and (max-height: 800px), (max-width: 700px) {
|
||||||
|
|
||||||
.itemBackdrop:not(.noBackdrop) {
|
.itemBackdrop:not(.noBackdrop) {
|
||||||
height: 400px;
|
height: 450px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 700px) {
|
@media all and (max-height: 700px) {
|
||||||
|
|
||||||
.itemBackdrop:not(.noBackdrop) {
|
.itemBackdrop:not(.noBackdrop) {
|
||||||
height: 300px;
|
height: 350px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-width: 540px) {
|
@media all and (max-width: 540px) {
|
||||||
|
|
||||||
.itemBackdrop:not(.noBackdrop) {
|
.itemBackdrop:not(.noBackdrop) {
|
||||||
height: 240px;
|
height: 290px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 540px) {
|
@media all and (max-height: 540px) {
|
||||||
|
|
||||||
.itemBackdrop:not(.noBackdrop) {
|
.itemBackdrop:not(.noBackdrop) {
|
||||||
height: 200px;
|
height: 250px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 460px) {
|
@media all and (max-height: 460px) {
|
||||||
|
|
||||||
.itemBackdrop:not(.noBackdrop) {
|
.itemBackdrop:not(.noBackdrop) {
|
||||||
height: 150px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 300px) {
|
@media all and (max-height: 300px) {
|
||||||
|
|
||||||
.itemBackdrop:not(.noBackdrop) {
|
.itemBackdrop:not(.noBackdrop) {
|
||||||
height: 100px;
|
height: 150px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (max-height: 250px) {
|
@media all and (max-height: 250px) {
|
||||||
|
|
||||||
.itemBackdrop:not(.noBackdrop) {
|
.itemBackdrop:not(.noBackdrop) {
|
||||||
height: 70px;
|
height: 120px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -866,6 +873,7 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
|
||||||
max-width: 180px;
|
max-width: 180px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 750px) {
|
@media all and (min-width: 750px) {
|
||||||
.detailPageContent {
|
.detailPageContent {
|
||||||
width: 950px;
|
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) {
|
(function ($, document, LibraryBrowser) {
|
||||||
|
|
||||||
var currentItem;
|
function renderItems(page, item) {
|
||||||
var shape;
|
|
||||||
var _childrenItemsFunction;
|
|
||||||
|
|
||||||
function getPromise() {
|
var sections = [];
|
||||||
|
|
||||||
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>';
|
|
||||||
|
|
||||||
if (item.MovieCount) {
|
if (item.MovieCount) {
|
||||||
|
|
||||||
html += '<input type="radio" name="ibnItems" id="radioMovies" class="context-movies" value="on">';
|
sections.push({
|
||||||
html += '<label for="radioMovies">' + Globalize.translate('TabMovies') + '</label>';
|
name: Globalize.translate('TabMovies'),
|
||||||
|
type: 'Movie'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.SeriesCount) {
|
if (item.SeriesCount) {
|
||||||
|
|
||||||
html += '<input type="radio" name="ibnItems" id="radioShows" class="context-tv" value="on">';
|
sections.push({
|
||||||
html += '<label for="radioShows">' + Globalize.translate('TabSeries') + '</label>';
|
name: Globalize.translate('TabSeries'),
|
||||||
|
type: 'Series'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.EpisodeCount) {
|
if (item.EpisodeCount) {
|
||||||
|
|
||||||
html += '<input type="radio" name="ibnItems" id="radioEpisodes" class="context-tv" value="on">';
|
sections.push({
|
||||||
html += '<label for="radioEpisodes">' + Globalize.translate('TabEpisodes') + '</label>';
|
name: Globalize.translate('TabEpisodes'),
|
||||||
|
type: 'Episode'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.TrailerCount) {
|
if (item.TrailerCount) {
|
||||||
|
|
||||||
html += '<input type="radio" name="ibnItems" id="radioTrailers" class="context-movies" value="on">';
|
sections.push({
|
||||||
html += '<label for="radioTrailers">' + Globalize.translate('TabTrailers') + '</label>';
|
name: Globalize.translate('TabTrailers'),
|
||||||
|
type: 'Trailer'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.GameCount) {
|
if (item.GameCount) {
|
||||||
|
|
||||||
html += '<input type="radio" name="ibnItems" id="radioGames" class="context-games" value="on">';
|
sections.push({
|
||||||
html += '<label for="radioGames">' + Globalize.translate('TabGames') + '</label>';
|
name: Globalize.translate('TabGames'),
|
||||||
|
type: 'Game'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.AlbumCount) {
|
if (item.AlbumCount) {
|
||||||
|
|
||||||
html += '<input type="radio" name="ibnItems" id="radioAlbums" class="context-music" value="on">';
|
sections.push({
|
||||||
html += '<label for="radioAlbums">' + Globalize.translate('TabAlbums') + '</label>';
|
name: Globalize.translate('TabAlbums'),
|
||||||
|
type: 'MusicAlbum'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.SongCount) {
|
if (item.SongCount) {
|
||||||
|
|
||||||
html += '<input type="radio" name="ibnItems" id="radioSongs" class="context-music" value="on">';
|
sections.push({
|
||||||
html += '<label for="radioSongs">' + Globalize.translate('TabSongs') + '</label>';
|
name: Globalize.translate('TabSongs'),
|
||||||
|
type: 'Audio'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.MusicVideoCount) {
|
if (item.MusicVideoCount) {
|
||||||
|
|
||||||
html += '<input type="radio" name="ibnItems" id="radioMusicVideos" class="context-music" value="on">';
|
sections.push({
|
||||||
html += '<label for="radioMusicVideos">' + Globalize.translate('TabMusicVideos') + '</label>';
|
name: Globalize.translate('TabMusicVideos'),
|
||||||
}
|
type: 'MusicVideo'
|
||||||
|
|
||||||
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: ""
|
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
|
||||||
});
|
var elem = page.querySelector('#childrenContent');
|
||||||
|
|
||||||
$("#radioMovies", page).on("click", function () {
|
elem.innerHTML = sections.map(function (section) {
|
||||||
|
|
||||||
shape = "poster";
|
var html = '';
|
||||||
loadItems(page, {
|
|
||||||
|
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: "",
|
MediaTypes: "",
|
||||||
IncludeItemTypes: "Movie",
|
IncludeItemTypes: "Movie",
|
||||||
PersonTypes: "",
|
PersonTypes: "",
|
||||||
ArtistIds: ""
|
ArtistIds: "",
|
||||||
|
Limit: 10
|
||||||
|
}, {
|
||||||
|
shape: "detailPagePortrait",
|
||||||
|
showTitle: true,
|
||||||
|
centerText: true,
|
||||||
|
overlayPlayButton: true
|
||||||
});
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
});
|
case 'MusicVideo':
|
||||||
|
loadItems(element, item, type, {
|
||||||
$("#radioShows", page).on("click", function () {
|
|
||||||
|
|
||||||
shape = "poster";
|
|
||||||
loadItems(page, {
|
|
||||||
MediaTypes: "",
|
MediaTypes: "",
|
||||||
IncludeItemTypes: "Series",
|
IncludeItemTypes: "MusicVideo",
|
||||||
PersonTypes: "",
|
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 () {
|
case 'Trailer':
|
||||||
|
loadItems(element, item, type, {
|
||||||
shape = "poster";
|
|
||||||
loadItems(page, {
|
|
||||||
MediaTypes: "",
|
MediaTypes: "",
|
||||||
IncludeItemTypes: "Trailer",
|
IncludeItemTypes: "Trailer",
|
||||||
PersonTypes: "",
|
PersonTypes: "",
|
||||||
ArtistIds: ""
|
ArtistIds: "",
|
||||||
});
|
Limit: 10
|
||||||
|
}, {
|
||||||
|
shape: "detailPagePortrait",
|
||||||
|
showTitle: true,
|
||||||
|
centerText: true,
|
||||||
|
overlayPlayButton: true
|
||||||
});
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
$("#radioGames", page).on("click", function () {
|
case 'Series':
|
||||||
|
loadItems(element, item, type, {
|
||||||
shape = "poster";
|
|
||||||
loadItems(page, {
|
|
||||||
IncludeItemTypes: "",
|
|
||||||
MediaTypes: "Game",
|
|
||||||
PersonTypes: "",
|
|
||||||
ArtistIds: ""
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
$("#radioEpisodes", page).on("click", function () {
|
|
||||||
|
|
||||||
shape = "backdrop";
|
|
||||||
loadItems(page, {
|
|
||||||
MediaTypes: "",
|
MediaTypes: "",
|
||||||
IncludeItemTypes: "Episode",
|
IncludeItemTypes: "Series",
|
||||||
PersonTypes: "",
|
PersonTypes: "",
|
||||||
ArtistIds: ""
|
ArtistIds: "",
|
||||||
});
|
Limit: 10
|
||||||
|
}, {
|
||||||
|
shape: "detailPagePortrait",
|
||||||
|
showTitle: true,
|
||||||
|
centerText: true
|
||||||
});
|
});
|
||||||
|
break;
|
||||||
|
|
||||||
$("#radioAlbums", page).on("click", function () {
|
case 'MusicAlbum':
|
||||||
|
loadItems(element, item, type, {
|
||||||
shape = "square";
|
|
||||||
loadItems(page, {
|
|
||||||
MediaTypes: "",
|
MediaTypes: "",
|
||||||
IncludeItemTypes: "MusicAlbum",
|
IncludeItemTypes: "MusicAlbum",
|
||||||
PersonTypes: "",
|
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 () {
|
case 'Audio':
|
||||||
|
loadItems(element, item, type, {
|
||||||
loadItems(page, {
|
|
||||||
MediaTypes: "",
|
MediaTypes: "",
|
||||||
IncludeItemTypes: "Audio",
|
IncludeItemTypes: "Audio",
|
||||||
PersonTypes: "",
|
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);
|
return 'secondaryitems.html?type=' + type + '&parentid=' + item.Id;
|
||||||
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();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.Type == "Person" && item.EndDate) {
|
function addCurrentItemToQuery(query, item) {
|
||||||
|
|
||||||
try {
|
if (item.Type == "Person") {
|
||||||
var deathday = parseISO8601Date(item.EndDate, { toLocal: true }).toDateString();
|
query.PersonIds = item.Id;
|
||||||
|
|
||||||
$('#itemDeathDate', page).show().html(Globalize.translate('DeathDateValue').replace('{0}', deathday));
|
|
||||||
}
|
}
|
||||||
catch (err) {
|
else if (item.Type == "Genre") {
|
||||||
$('#itemBirthday', page).hide();
|
query.Genres = item.Name;
|
||||||
}
|
}
|
||||||
} else {
|
else if (item.Type == "MusicGenre") {
|
||||||
|
query.Genres = item.Name;
|
||||||
}
|
}
|
||||||
|
else if (item.Type == "GameGenre") {
|
||||||
if (item.Type == "Person" && item.ProductionLocations && item.ProductionLocations.length) {
|
query.Genres = item.Name;
|
||||||
|
}
|
||||||
var gmap = '<a class="textlink" target="_blank" href="https://maps.google.com/maps?q=' + item.ProductionLocations[0] + '">' + item.ProductionLocations[0] + '</a>';
|
else if (item.Type == "Studio") {
|
||||||
|
query.StudioIds = item.Id;
|
||||||
$('#itemBirthLocation', page).show().html(Globalize.translate('BirthPlaceValue').replace('{0}', gmap)).trigger('create');
|
}
|
||||||
} else {
|
else if (item.Type == "MusicArtist") {
|
||||||
$('#itemBirthLocation', page).hide();
|
query.ArtistIds = item.Id;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderUserDataIcons(page, item) {
|
function getQuery(options, 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) {
|
|
||||||
|
|
||||||
var query = {
|
var query = {
|
||||||
|
|
||||||
|
|
@ -359,14 +313,14 @@
|
||||||
query.SortBy = "AlbumArtist,Album,SortName";
|
query.SortBy = "AlbumArtist,Album,SortName";
|
||||||
}
|
}
|
||||||
|
|
||||||
addCurrentItemToQuery(query);
|
addCurrentItemToQuery(query, item);
|
||||||
|
|
||||||
return query;
|
return query;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getItemsFunction(options) {
|
function getItemsFunction(options, item) {
|
||||||
|
|
||||||
var query = getQuery(options);
|
var query = getQuery(options, item);
|
||||||
|
|
||||||
return function (index, limit, fields) {
|
return function (index, limit, fields) {
|
||||||
|
|
||||||
|
|
@ -383,187 +337,8 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function loadItems(page, options) {
|
window.ItemsByName = {
|
||||||
|
renderItems: renderItems
|
||||||
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;
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
})(jQuery, document, LibraryBrowser);
|
})(jQuery, document, LibraryBrowser);
|
||||||
|
|
@ -2,13 +2,47 @@
|
||||||
|
|
||||||
var currentItem;
|
var currentItem;
|
||||||
|
|
||||||
function reload(page) {
|
function getPromise() {
|
||||||
|
|
||||||
var id = getParameterByName('id');
|
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();
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
|
getPromise().done(function (item) {
|
||||||
|
|
||||||
reloadFromItem(page, item);
|
reloadFromItem(page, item);
|
||||||
});
|
});
|
||||||
|
|
@ -251,6 +285,11 @@
|
||||||
$('#childrenCollapsible', page).removeClass('hide');
|
$('#childrenCollapsible', page).removeClass('hide');
|
||||||
renderChannelGuide(page, item, user);
|
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) {
|
else if (item.IsFolder) {
|
||||||
|
|
||||||
if (item.Type == "BoxSet") {
|
if (item.Type == "BoxSet") {
|
||||||
|
|
@ -460,7 +499,7 @@
|
||||||
|
|
||||||
var artist = artists[i];
|
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) {
|
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) {
|
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) {
|
function renderChannelGuide(page, item, user) {
|
||||||
|
|
||||||
require('scripts/livetvcomponents,scripts/livetvchannel,livetvcss'.split(','), function () {
|
require('scripts/livetvcomponents,scripts/livetvchannel,livetvcss'.split(','), function () {
|
||||||
|
|
@ -1438,7 +1486,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
var cast = casts[i];
|
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 + '">';
|
html += '<a class="tileItem smallPosterTileItem" href="' + href + '">';
|
||||||
|
|
||||||
var imgUrl;
|
var imgUrl;
|
||||||
|
|
|
||||||
|
|
@ -428,7 +428,7 @@
|
||||||
var artist = artists[i];
|
var artist = artists[i];
|
||||||
|
|
||||||
var css = cssClass ? (' class="' + cssClass + '"') : '';
|
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;
|
return "itemdetails.html?id=" + id + contextSuffix;
|
||||||
}
|
}
|
||||||
if (item.Type == "Genre") {
|
if (item.Type == "Genre") {
|
||||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
return "itemdetails.html?id=" + id + contextSuffix;
|
||||||
}
|
}
|
||||||
if (item.Type == "MusicGenre") {
|
if (item.Type == "MusicGenre") {
|
||||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
return "itemdetails.html?id=" + id + contextSuffix;
|
||||||
}
|
}
|
||||||
if (item.Type == "GameGenre") {
|
if (item.Type == "GameGenre") {
|
||||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
return "itemdetails.html?id=" + id + contextSuffix;
|
||||||
}
|
}
|
||||||
if (item.Type == "Studio") {
|
if (item.Type == "Studio") {
|
||||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
return "itemdetails.html?id=" + id + contextSuffix;
|
||||||
}
|
}
|
||||||
if (item.Type == "Person") {
|
if (item.Type == "Person") {
|
||||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
return "itemdetails.html?id=" + id + contextSuffix;
|
||||||
}
|
}
|
||||||
if (item.Type == "Recording") {
|
if (item.Type == "Recording") {
|
||||||
return "itemdetails.html?id=" + id;
|
return "itemdetails.html?id=" + id;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.Type == "MusicArtist") {
|
if (item.Type == "MusicArtist") {
|
||||||
return "itembynamedetails.html?id=" + id + contextSuffix;
|
return "itemdetails.html?id=" + id + contextSuffix;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.IsFolder) {
|
if (item.IsFolder) {
|
||||||
|
|
@ -3176,7 +3176,7 @@
|
||||||
if (isStatic) {
|
if (isStatic) {
|
||||||
html += item.Studios[i].Name;
|
html += item.Studios[i].Name;
|
||||||
} else {
|
} 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) {
|
if (isStatic) {
|
||||||
html += genres[i];
|
html += genres[i];
|
||||||
} else {
|
} 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);
|
Dashboard.navigate('itemdetails.html?id=' + albumid);
|
||||||
break;
|
break;
|
||||||
case 'artist':
|
case 'artist':
|
||||||
Dashboard.navigate('itembynamedetails.html?context=music&id=' + artistid);
|
Dashboard.navigate('itemdetails.html?context=music&id=' + artistid);
|
||||||
break;
|
break;
|
||||||
case 'play':
|
case 'play':
|
||||||
MediaController.play(itemId);
|
MediaController.play(itemId);
|
||||||
break;
|
break;
|
||||||
case 'playallfromhere':
|
case 'playallfromhere':
|
||||||
$(card).parents('.itemsContainer').trigger('playallfromhere', [index]);
|
playAllFromHere(index, $(card).parents('.itemsContainer'), 'play');
|
||||||
break;
|
break;
|
||||||
case 'queue':
|
case 'queue':
|
||||||
MediaController.queue(itemId);
|
MediaController.queue(itemId);
|
||||||
|
|
@ -440,7 +440,7 @@
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'queueallfromhere':
|
case 'queueallfromhere':
|
||||||
$(card).parents('.itemsContainer').trigger('queueallfromhere', [index]);
|
playAllFromHere(index, $(card).parents('.itemsContainer'), 'queue');
|
||||||
break;
|
break;
|
||||||
case 'sync':
|
case 'sync':
|
||||||
SyncManager.showMenu({
|
SyncManager.showMenu({
|
||||||
|
|
@ -1145,12 +1145,34 @@
|
||||||
index = elemWithAttributes.getAttribute('data-index');
|
index = elemWithAttributes.getAttribute('data-index');
|
||||||
itemsContainer = $(elem).parents('.itemsContainer');
|
itemsContainer = $(elem).parents('.itemsContainer');
|
||||||
|
|
||||||
itemsContainer.trigger('playallfromhere', [index]);
|
playAllFromHere(index, itemsContainer, 'play');
|
||||||
}
|
}
|
||||||
|
|
||||||
return false;
|
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 () {
|
$(document).on('pageinitdepends', ".libraryPage", function () {
|
||||||
|
|
||||||
var page = this;
|
var page = this;
|
||||||
|
|
|
||||||
|
|
@ -78,7 +78,7 @@
|
||||||
|
|
||||||
html += '</paper-item-body>';
|
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>';
|
html += '</paper-icon-item>';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -101,7 +101,7 @@
|
||||||
html += '</div>';
|
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>';
|
html += '</paper-icon-item>';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -106,7 +106,7 @@
|
||||||
html += '<a href="itemlist.html?id=' + rRow.Id + '">' + rItem.Name + '</a>';
|
html += '<a href="itemlist.html?id=' + rRow.Id + '">' + rItem.Name + '</a>';
|
||||||
break;
|
break;
|
||||||
case "ItemByNameDetails":
|
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;
|
break;
|
||||||
case "EmbeddedImage":
|
case "EmbeddedImage":
|
||||||
if (rRow.HasEmbeddedImage) {
|
if (rRow.HasEmbeddedImage) {
|
||||||
|
|
@ -237,7 +237,7 @@
|
||||||
var rItem = group.Items[j];
|
var rItem = group.Items[j];
|
||||||
html += '<a class="item ui-btn"';
|
html += '<a class="item ui-btn"';
|
||||||
if (rItem.Id > "")
|
if (rItem.Id > "")
|
||||||
html += ' href="itembynamedetails.html?id=' + rItem.Id + '"';
|
html += ' href="itemdetails.html?id=' + rItem.Id + '"';
|
||||||
html += '>' + rItem.Name + ' ' + '</a>';
|
html += '>' + rItem.Name + ' ' + '</a>';
|
||||||
html += '<a title="" class="listviewMenuButton ui-btn ui-btn-inline">' + rItem.Value + ' ' + '</a>';
|
html += '<a title="" class="listviewMenuButton ui-btn ui-btn-inline">' + rItem.Value + ' ' + '</a>';
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,32 @@
|
||||||
(function ($, document) {
|
(function ($, document) {
|
||||||
|
|
||||||
var view = LibraryBrowser.getDefaultItemsView('Poster', 'Poster');
|
|
||||||
|
|
||||||
var data = {};
|
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 key = getSavedQueryKey();
|
||||||
var pageData = data[key];
|
var pageData = data[key];
|
||||||
|
|
@ -33,7 +55,10 @@
|
||||||
pageData.query.Filters = filters;
|
pageData.query.Filters = filters;
|
||||||
}
|
}
|
||||||
|
|
||||||
pageData.query.ParentId = getParameterByName('parentid') || LibraryMenu.getTopParentId();
|
if (parentItem) {
|
||||||
|
addCurrentItemToQuery(pageData.query, parentItem);
|
||||||
|
}
|
||||||
|
|
||||||
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
LibraryBrowser.loadSavedQueryValues(key, pageData.query);
|
||||||
}
|
}
|
||||||
return pageData.query;
|
return pageData.query;
|
||||||
|
|
@ -59,11 +84,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function reloadItems(page) {
|
function reloadItems(page, parentItem) {
|
||||||
|
|
||||||
Dashboard.showLoadingMsg();
|
Dashboard.showLoadingMsg();
|
||||||
|
|
||||||
var query = getQuery();
|
var query = getQuery(parentItem);
|
||||||
|
|
||||||
ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
|
ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
|
||||||
|
|
||||||
|
|
@ -79,7 +104,19 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
page.querySelector('.listTopPaging').innerHTML = pagingHtml;
|
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 = {
|
var posterOptions = {
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
shape: "auto",
|
shape: "auto",
|
||||||
|
|
@ -106,19 +143,24 @@
|
||||||
|
|
||||||
// Poster
|
// Poster
|
||||||
html = LibraryBrowser.getPosterViewHtml(posterOptions);
|
html = LibraryBrowser.getPosterViewHtml(posterOptions);
|
||||||
|
}
|
||||||
|
|
||||||
var elem = page.querySelector('#items');
|
var elem = page.querySelector('#items');
|
||||||
elem.innerHTML = html + pagingHtml;
|
elem.innerHTML = html + pagingHtml;
|
||||||
ImageLoader.lazyChildren(elem);
|
ImageLoader.lazyChildren(elem);
|
||||||
|
|
||||||
|
if (trigger) {
|
||||||
|
$(elem).trigger('create');
|
||||||
|
}
|
||||||
|
|
||||||
$('.btnNextPage', page).on('click', function () {
|
$('.btnNextPage', page).on('click', function () {
|
||||||
query.StartIndex += query.Limit;
|
query.StartIndex += query.Limit;
|
||||||
reloadItems(page);
|
reloadItems(page, parentItem);
|
||||||
});
|
});
|
||||||
|
|
||||||
$('.btnPreviousPage', page).on('click', function () {
|
$('.btnPreviousPage', page).on('click', function () {
|
||||||
query.StartIndex -= query.Limit;
|
query.StartIndex -= query.Limit;
|
||||||
reloadItems(page);
|
reloadItems(page, parentItem);
|
||||||
});
|
});
|
||||||
|
|
||||||
LibraryBrowser.setLastRefreshed(page);
|
LibraryBrowser.setLastRefreshed(page);
|
||||||
|
|
@ -139,10 +181,14 @@
|
||||||
if (getParameterByName('parentid')) {
|
if (getParameterByName('parentid')) {
|
||||||
ApiClient.getItem(Dashboard.getCurrentUserId(), getParameterByName('parentid')).done(function (parent) {
|
ApiClient.getItem(Dashboard.getCurrentUserId(), getParameterByName('parentid')).done(function (parent) {
|
||||||
LibraryMenu.setTitle(parent.Name);
|
LibraryMenu.setTitle(parent.Name);
|
||||||
|
|
||||||
|
if (LibraryBrowser.needsRefresh(page)) {
|
||||||
|
reloadItems(page, parent);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (LibraryBrowser.needsRefresh(page)) {
|
else if (LibraryBrowser.needsRefresh(page)) {
|
||||||
reloadItems(page);
|
reloadItems(page);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1173,22 +1173,22 @@ var Dashboard = {
|
||||||
var type = (cmd.ItemType || "").toLowerCase();
|
var type = (cmd.ItemType || "").toLowerCase();
|
||||||
|
|
||||||
if (type == "genre") {
|
if (type == "genre") {
|
||||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||||
}
|
}
|
||||||
else if (type == "musicgenre") {
|
else if (type == "musicgenre") {
|
||||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||||
}
|
}
|
||||||
else if (type == "gamegenre") {
|
else if (type == "gamegenre") {
|
||||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||||
}
|
}
|
||||||
else if (type == "studio") {
|
else if (type == "studio") {
|
||||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||||
}
|
}
|
||||||
else if (type == "person") {
|
else if (type == "person") {
|
||||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||||
}
|
}
|
||||||
else if (type == "musicartist") {
|
else if (type == "musicartist") {
|
||||||
url = "itembynamedetails.html?id=" + cmd.ItemId;
|
url = "itemdetails.html?id=" + cmd.ItemId;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (url) {
|
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="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="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="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>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</iron-iconset-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="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="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="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>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
</iron-iconset-svg>
|
</iron-iconset-svg>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue