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

update menus

Browse source
This commit is contained in:
Luke Pulverenti 2015-06-21 17:31:21 -04:00
parent 69a5028dee
commit aa7ea8891c
33 changed files with 2850 additions and 1352 deletions
Download patch file Download diff file Expand all files Collapse all files

41
dashboard-ui/bower_components/iron-menu-behavior/.bower.json vendored Normal file
View file

@ -0,0 +1,41 @@
{
"name": "iron-menu-behavior",
"version": "1.0.1",
"description": "Provides accessible menu behavior",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"behavior",
"menu"
],
"main": "iron-menu-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-menu-behavior"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-menu-behavior",
"ignore": [],
"dependencies": {
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0",
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.1",
"_resolution": {
"type": "version",
"tag": "v1.0.1",
"commit": "3809f0eb7461c8ca63640aaa238775b3a25aa578"
},
"_source": "git://github.com/PolymerElements/iron-menu-behavior.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-menu-behavior"
}

1
dashboard-ui/bower_components/iron-menu-behavior/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
bower_components

32
dashboard-ui/bower_components/iron-menu-behavior/bower.json vendored Normal file
View file

@ -0,0 +1,32 @@
{
"name": "iron-menu-behavior",
"version": "1.0.1",
"description": "Provides accessible menu behavior",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"behavior",
"menu"
],
"main": "iron-menu-behavior.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/iron-menu-behavior"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/iron-menu-behavior",
"ignore": [],
"dependencies": {
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0",
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

100
dashboard-ui/bower_components/iron-menu-behavior/demo/index.html vendored Normal file
View file

@ -0,0 +1,100 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>iron-menu-behavior demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="simple-menu.html">
<link rel="import" href="simple-menubar.html">
<link rel="stylesheet" href="../../paper-styles/demo.css">
<style>
.list {
display: inline-block;
border: 1px solid #ccc;
padding: 8px 0;
}
.list li {
display: block;
padding: 8px;
}
.list li[disabled] {
color: #ccc;
}
</style>
</head>
<body>
<section>
<div>Simple menu</div>
<simple-menu class="list">
<li>item 0</li>
<li>item 1</li>
<li disabled>item 2</li>
<li>item 3</li>
</simple-menu>
</section>
<section>
<div>Multi-select menu</div>
<simple-menu class="list" multi>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</simple-menu>
</section>
<section>
<div>Simple menubar</div>
<simple-menubar class="list">
<li>item 0</li>
<li>item 1</li>
<li disabled>item 2</li>
<li>item 3</li>
</simple-menubar>
</section>
<section>
<div>Multi-select menubar</div>
<simple-menubar class="list" multi>
<li>item 0</li>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</simple-menubar>
</section>
</body>
</html>

50
dashboard-ui/bower_components/iron-menu-behavior/demo/simple-menu.html vendored Normal file
View file

@ -0,0 +1,50 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-menu-behavior.html">
<dom-module id="simple-menu">
<style>
.content ::content > .iron-selected {
color: red;
}
</style>
<template>
<div class="content">
<content></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'simple-menu',
behaviors: [
Polymer.IronMenuBehavior
]
});
})();
</script>

54
dashboard-ui/bower_components/iron-menu-behavior/demo/simple-menubar.html vendored Normal file
View file

@ -0,0 +1,54 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-menubar-behavior.html">
<dom-module id="simple-menubar">
<style>
.content ::content > .iron-selected {
color: red;
}
.content ::content > * {
display: inline-block;
}
</style>
<template>
<div class="content">
<content></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'simple-menubar',
behaviors: [
Polymer.IronMenubarBehavior
]
});
})();
</script>

30
dashboard-ui/bower_components/iron-menu-behavior/index.html vendored Normal file
View file

@ -0,0 +1,30 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>iron-menu-behavior</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="iron-menubar-behavior.html"></iron-component-page>
</body>
</html>

214
dashboard-ui/bower_components/iron-menu-behavior/iron-menu-behavior.html vendored Normal file
View file

@ -0,0 +1,214 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-selector/iron-multi-selectable.html">
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<script>
/**
* `Polymer.IronMenuBehavior` implements accessible menu behavior.
*
* @demo demo/index.html
* @polymerBehavior Polymer.IronMenuBehavior
*/
Polymer.IronMenuBehaviorImpl = {
properties: {
/**
* Returns the currently focused item.
*
* @attribute focusedItem
* @type Object
*/
focusedItem: {
observer: '_focusedItemChanged',
readOnly: true,
type: Object
},
/**
* The attribute to use on menu items to look up the item title. Typing the first
* letter of an item when the menu is open focuses that item. If unset, `textContent`
* will be used.
*
* @attribute attrForItemTitle
* @type String
*/
attrForItemTitle: {
type: String
}
},
hostAttributes: {
'role': 'menu',
'tabindex': '0'
},
observers: [
'_updateMultiselectable(multi)'
],
listeners: {
'focus': '_onFocus',
'keydown': '_onKeydown'
},
keyBindings: {
'up': '_onUpKey',
'down': '_onDownKey',
'esc': '_onEscKey',
'enter': '_onEnterKey',
'shift+tab:keydown': '_onShiftTabDown'
},
_updateMultiselectable: function(multi) {
if (multi) {
this.setAttribute('aria-multiselectable', 'true');
} else {
this.removeAttribute('aria-multiselectable');
}
},
_onShiftTabDown: function() {
var oldTabIndex;
Polymer.IronMenuBehaviorImpl._shiftTabPressed = true;
oldTabIndex = this.getAttribute('tabindex');
this.setAttribute('tabindex', '-1');
this.async(function() {
this.setAttribute('tabindex', oldTabIndex);
Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
// Note: polymer/polymer#1305
}, 1);
},
_applySelection: function(item, isSelected) {
if (isSelected) {
item.setAttribute('aria-selected', 'true');
} else {
item.removeAttribute('aria-selected');
}
Polymer.IronSelectableBehavior._applySelection.apply(this, arguments);
},
_focusedItemChanged: function(focusedItem, old) {
old && old.setAttribute('tabindex', '-1');
if (focusedItem) {
focusedItem.setAttribute('tabindex', '0');
focusedItem.focus();
}
},
select: function(value) {
if (this._defaultFocusAsync) {
this.cancelAsync(this._defaultFocusAsync);
this._defaultFocusAsync = null;
}
var item = this._valueToItem(value);
this._setFocusedItem(item);
Polymer.IronMultiSelectableBehaviorImpl.select.apply(this, arguments);
},
_onFocus: function(event) {
if (Polymer.IronMenuBehaviorImpl._shiftTabPressed) {
return;
}
// do not focus the menu itself
this.blur();
// clear the cached focus item
this._setFocusedItem(null);
this._defaultFocusAsync = this.async(function() {
// focus the selected item when the menu receives focus, or the first item
// if no item is selected
var selectedItem = this.multi ? (this.selectedItems && this.selectedItems[0]) : this.selectedItem;
if (selectedItem) {
this._setFocusedItem(selectedItem);
} else {
this._setFocusedItem(this.items[0]);
}
// async 100ms to wait for `select` to get called from `_itemActivate`
}, 100);
},
_onUpKey: function() {
// up and down arrows moves the focus
this._focusPrevious();
},
_onDownKey: function() {
this._focusNext();
},
_onEscKey: function() {
// esc blurs the control
this.focusedItem.blur();
},
_onEnterKey: function(event) {
// enter activates the item unless it is disabled
this._activateFocused(event.detail.keyboardEvent);
},
_onKeydown: function(event) {
if (this.keyboardEventMatchesKeys(event, 'up down esc enter')) {
return;
}
// all other keys focus the menu item starting with that character
this._focusWithKeyboardEvent(event);
},
_focusWithKeyboardEvent: function(event) {
for (var i = 0, item; item = this.items[i]; i++) {
var attr = this.attrForItemTitle || 'textContent';
var title = item[attr] || item.getAttribute(attr);
if (title && title.trim().charAt(0).toLowerCase() === String.fromCharCode(event.keyCode).toLowerCase()) {
this._setFocusedItem(item);
break;
}
}
},
_activateFocused: function(event) {
if (!this.focusedItem.hasAttribute('disabled')) {
this._activateHandler(event);
}
},
_focusPrevious: function() {
var length = this.items.length;
var index = (Number(this.indexOf(this.focusedItem)) - 1 + length) % length;
this._setFocusedItem(this.items[index]);
},
_focusNext: function() {
var index = (Number(this.indexOf(this.focusedItem)) + 1) % this.items.length;
this._setFocusedItem(this.items[index]);
}
};
Polymer.IronMenuBehaviorImpl._shiftTabPressed = false;
/** @polymerBehavior Polymer.IronMenuBehavior */
Polymer.IronMenuBehavior = [
Polymer.IronMultiSelectableBehavior,
Polymer.IronA11yKeysBehavior,
Polymer.IronMenuBehaviorImpl
];
</script>

65
dashboard-ui/bower_components/iron-menu-behavior/iron-menubar-behavior.html vendored Normal file
View file

@ -0,0 +1,65 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="iron-menu-behavior.html">
<script>
/**
* `Polymer.IronMenubarBehavior` implements accessible menubar behavior.
*
* @polymerBehavior Polymer.IronMenubarBehavior
*/
Polymer.IronMenubarBehaviorImpl = {
hostAttributes: {
'role': 'menubar'
},
keyBindings: {
'left': '_onLeftKey',
'right': '_onRightKey'
},
_onUpKey: function(event) {
this._activateFocused(event.detail.keyboardEvent);
},
_onDownKey: function(event) {
this._activateFocused(event.detail.keyboardEvent);
},
_onLeftKey: function() {
this._focusPrevious();
},
_onRightKey: function() {
this._focusNext();
},
_onKeydown: function(event) {
if (this.keyboardEventMatchesKeys(event, 'up down left right esc enter')) {
return;
}
// all other keys focus the menu item starting with that character
this._focusWithKeyboardEvent(event);
}
};
/** @polymerBehavior Polymer.IronMenubarBehavior */
Polymer.IronMenubarBehavior = [
Polymer.IronMenuBehavior,
Polymer.IronMenubarBehaviorImpl
];
</script>

35
dashboard-ui/bower_components/iron-menu-behavior/test/index.html vendored Normal file
View file

@ -0,0 +1,35 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-menu-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'iron-menu-behavior.html',
'iron-menubar-behavior.html'
]);
</script>
</body>
</html>

108
dashboard-ui/bower_components/iron-menu-behavior/test/iron-menu-behavior.html vendored Normal file
View file

@ -0,0 +1,108 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-menu-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-menu.html">
</head>
<body>
<test-fixture id="basic">
<template>
<test-menu>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</test-menu>
</template>
</test-fixture>
<test-fixture id="multi">
<template>
<test-menu multi>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</test-menu>
</template>
</test-fixture>
<script>
suite('menu a11y tests', function() {
test('menu has role="menu"', function() {
var menu = fixture('basic');
assert.equal(menu.getAttribute('role'), 'menu', 'has role="menu"');
});
test('first item gets focus when menu is focused', function(done) {
var menu = fixture('basic');
menu.focus();
setTimeout(function() {
assert.equal(document.activeElement, menu.firstElementChild, 'document.activeElement is first item')
done();
// wait for async in _onFocus
}, 200);
});
test('selected item gets focus when menu is focused', function(done) {
var menu = fixture('basic');
menu.selected = 1;
menu.focus();
setTimeout(function() {
assert.equal(document.activeElement, menu.selectedItem, 'document.activeElement is selected item');
done();
// wait for async in _onFocus
}, 200);
});
test('last activated item in a multi select menu is focused', function(done) {
var menu = fixture('multi');
menu.selected = 0;
menu.items[1].click();
setTimeout(function() {
assert.equal(document.activeElement, menu.items[1], 'document.activeElement is last activated item');
done();
// wait for async in _onFocus
}, 200);
});
test('deselection in a multi select menu focuses deselected item', function(done) {
var menu = fixture('multi');
menu.selected = 0;
menu.items[0].click();
setTimeout(function() {
assert.equal(document.activeElement, menu.items[0], 'document.activeElement is last activated item');
done();
// wait for async in _onFocus
}, 200);
});
});
</script>
</body>
</html>

108
dashboard-ui/bower_components/iron-menu-behavior/test/iron-menubar-behavior.html vendored Normal file
View file

@ -0,0 +1,108 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-menubar-behavior tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="test-menubar.html">
</head>
<body>
<test-fixture id="basic">
<template>
<test-menubar>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</test-menubar>
</template>
</test-fixture>
<test-fixture id="multi">
<template>
<test-menubar multi>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</test-menubar>
</template>
</test-fixture>
<script>
suite('menubar a11y tests', function() {
test('menubar has role="menubar"', function() {
var menubar = fixture('basic');
assert.equal(menubar.getAttribute('role'), 'menubar', 'has role="menubar"');
});
test('first item gets focus when menubar is focused', function(done) {
var menubar = fixture('basic');
menubar.focus();
setTimeout(function() {
assert.equal(document.activeElement, menubar.firstElementChild, 'document.activeElement is first item')
done();
// wait for async in _onFocus
}, 200);
});
test('selected item gets focus when menubar is focused', function(done) {
var menubar = fixture('basic');
menubar.selected = 1;
menubar.focus();
setTimeout(function() {
assert.equal(document.activeElement, menubar.selectedItem, 'document.activeElement is selected item');
done();
// wait for async in _onFocus
}, 200);
});
test('last activated item in a multi select menubar is focused', function(done) {
var menubar = fixture('multi');
menubar.selected = 0;
menubar.items[1].click();
setTimeout(function() {
assert.equal(document.activeElement, menubar.items[1], 'document.activeElement is last activated item');
done();
// wait for async in _onFocus
}, 200);
});
test('deselection in a multi select menubar focuses deselected item', function(done) {
var menubar = fixture('multi');
menubar.selected = 0;
menubar.items[0].click();
setTimeout(function() {
assert.equal(document.activeElement, menubar.items[0], 'document.activeElement is last activated item');
done();
// wait for async in _onFocus
}, 200);
});
});
</script>
</body>
</html>

40
dashboard-ui/bower_components/iron-menu-behavior/test/test-menu.html vendored Normal file
View file

@ -0,0 +1,40 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-menu-behavior.html">
<dom-module id="test-menu">
<template>
<content></content>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'test-menu',
behaviors: [
Polymer.IronMenuBehavior
]
});
})();
</script>

40
dashboard-ui/bower_components/iron-menu-behavior/test/test-menubar.html vendored Normal file
View file

@ -0,0 +1,40 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../iron-menubar-behavior.html">
<dom-module id="test-menubar">
<template>
<content></content>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'test-menubar',
behaviors: [
Polymer.IronMenubarBehavior
]
});
})();
</script>

26
dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.css vendored
View file

@ -6,8 +6,8 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
:host { :host {
display: block; display: block;
position: absolute; position: absolute;
@ -24,16 +24,16 @@ iron-selector > #drawer {
left: 0; left: 0;
height: 100%; height: 100%;
background-color: white; background-color: white;
will-change: transform;
box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box;
@apply(--paper-drawer-panel-drawer-container); @apply(--paper-drawer-panel-drawer-container);
} }
.transition > #drawer { .transition > #drawer {
transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s; transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
transition: transform ease-in-out 0.3s, width ease-in-out 0.3s; transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
} }
.left-drawer > #drawer { .left-drawer > #drawer {
@ -88,6 +88,10 @@ iron-selector > #main {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.narrow-layout > #drawer {
will-change: transform;
}
.narrow-layout > #drawer.iron-selected { .narrow-layout > #drawer.iron-selected {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
} }
@ -107,19 +111,24 @@ iron-selector > #main {
.right-drawer.narrow-layout > #drawer:not(.iron-selected) { .right-drawer.narrow-layout > #drawer:not(.iron-selected) {
left: auto; left: auto;
visibility: hidden;
-webkit-transform: translateX(100%); -webkit-transform: translateX(100%);
transform: translateX(100%); transform: translateX(100%);
} }
.right-drawer.narrow-layout.dragging > #drawer:not(.iron-selected),
.right-drawer.narrow-layout.peeking > #drawer:not(.iron-selected) {
visibility: visible;
}
.narrow-layout > #main { .narrow-layout > #main {
left: 0 !important;
padding: 0; padding: 0;
} }
.right-drawer.narrow-layout > #main { .right-drawer.narrow-layout > #main {
left: 0; left: 0;
right: 0; right: 0;
padding: 0;
} }
.narrow-layout > #main:not(.iron-selected) > #scrim, .narrow-layout > #main:not(.iron-selected) > #scrim,
@ -133,8 +142,9 @@ iron-selector > #main {
min-height: 100%; min-height: 100%;
left: 0; left: 0;
right: 0; right: 0;
box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box;
} }
iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] { iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {

124
dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.html vendored
View file

@ -108,15 +108,13 @@ To change the drawer container when it's in the right side:
<link rel="import" type="css" href="paper-drawer-panel.css"> <link rel="import" type="css" href="paper-drawer-panel.css">
<template> <template>
<iron-media-query <iron-media-query id="mq"
id="mq"
on-query-matches-changed="_onQueryMatchesChanged" on-query-matches-changed="_onQueryMatchesChanged"
query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]"> query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">
</iron-media-query> </iron-media-query>
<iron-selector <iron-selector attr-for-selected="id"
attr-for-selected="id" class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer, peeking)]]"
class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer)]]"
activate-event="" activate-event=""
selected="[[selected]]"> selected="[[selected]]">
@ -136,7 +134,7 @@ To change the drawer container when it's in the right side:
<script> <script>
(function() { (function () {
'use strict'; 'use strict';
@ -167,17 +165,24 @@ To change the drawer container when it's in the right side:
*/ */
/** /**
* Fired when the selected panel changes. * Fired when the a panel is selected.
* *
* Listening for this event is an alternative to observing changes in the `selected` attribute. * Listening for this event is an alternative to observing changes in the `selected` attribute.
* This event is fired both when a panel is selected and deselected. * This event is fired both when a panel is selected.
* The `isSelected` detail property contains the selection state.
* *
* @event paper-select {{isSelected: boolean, item: Object}} detail - * @event iron-select {{item: Object}} detail -
* isSelected: True for selection and false for deselection.
* item: The panel that the event refers to. * item: The panel that the event refers to.
*/ */
/**
* Fired when a panel is deselected.
*
* Listening for this event is an alternative to observing changes in the `selected` attribute.
* This event is fired both when a panel is deselected.
*
* @event iron-deselect {{item: Object}} detail -
* item: The panel that the event refers to.
*/
properties: { properties: {
/** /**
@ -245,7 +250,7 @@ To change the drawer container when it's in the right side:
*/ */
hasTransform: { hasTransform: {
type: Boolean, type: Boolean,
value: function() { value: function () {
return 'transform' in this.style; return 'transform' in this.style;
} }
}, },
@ -255,7 +260,7 @@ To change the drawer container when it's in the right side:
*/ */
hasWillChange: { hasWillChange: {
type: Boolean, type: Boolean,
value: function() { value: function () {
return 'willChange' in this.style; return 'willChange' in this.style;
} }
}, },
@ -344,7 +349,7 @@ To change the drawer container when it's in the right side:
* *
* @method togglePanel * @method togglePanel
*/ */
togglePanel: function() { togglePanel: function () {
if (this._isMainSelected()) { if (this._isMainSelected()) {
this.openDrawer(); this.openDrawer();
} else { } else {
@ -357,8 +362,9 @@ To change the drawer container when it's in the right side:
* *
* @method openDrawer * @method openDrawer
*/ */
openDrawer: function() { openDrawer: function () {
this.selected = 'drawer'; this.selected = 'drawer';
this.fire('paper-drawer-panel-open');
}, },
/** /**
@ -366,71 +372,71 @@ To change the drawer container when it's in the right side:
* *
* @method closeDrawer * @method closeDrawer
*/ */
closeDrawer: function() { closeDrawer: function () {
this.selected = 'main'; this.selected = 'main';
this.fire('paper-drawer-panel-close');
}, },
ready: function() { ready: function () {
// Avoid transition at the beginning e.g. page loads and enable // Avoid transition at the beginning e.g. page loads and enable
// transitions only after the element is rendered and ready. // transitions only after the element is rendered and ready.
this.transition = true; this.transition = true;
}, },
_computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer) { _computeIronSelectorClass: function (narrow, transition, dragging, rightDrawer, peeking) {
return classNames({ return classNames({
dragging: dragging, dragging: dragging,
'narrow-layout': narrow, 'narrow-layout': narrow,
'right-drawer': rightDrawer, 'right-drawer': rightDrawer,
'left-drawer': !rightDrawer, 'left-drawer': !rightDrawer,
transition: transition transition: transition,
peeking: peeking
}); });
}, },
_computeDrawerStyle: function(drawerWidth) { _computeDrawerStyle: function (drawerWidth) {
return 'width:' + drawerWidth + ';'; return 'width:' + drawerWidth + ';';
}, },
_computeMainStyle: function(narrow, rightDrawer, drawerWidth) { _computeMainStyle: function (narrow, rightDrawer, drawerWidth) {
var style = ''; var style = '';
style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';'; style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
if (rightDrawer) { if (rightDrawer) {
style += 'right:' + (narrow ? '' : drawerWidth) + ';'; style += 'right:' + (narrow ? '' : drawerWidth) + ';';
} else {
style += 'right:;';
} }
return style; return style;
}, },
_computeMediaQuery: function(forceNarrow, responsiveWidth) { _computeMediaQuery: function (forceNarrow, responsiveWidth) {
return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')'; return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
}, },
_computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) { _computeSwipeOverlayHidden: function (narrow, disableEdgeSwipe) {
return !narrow || disableEdgeSwipe; return !narrow || disableEdgeSwipe;
}, },
_onTrack: function(e) { _onTrack: function (event) {
if (sharedPanel && this !== sharedPanel) { if (sharedPanel && this !== sharedPanel) {
return; return;
} }
switch (e.detail.state) { switch (event.detail.state) {
case 'start': case 'start':
this._trackStart(e); this._trackStart(event);
break; break;
case 'track': case 'track':
this._trackX(e); this._trackX(event);
break; break;
case 'end': case 'end':
this._trackEnd(e); this._trackEnd(event);
break; break;
} }
}, },
_responsiveChange: function(narrow) { _responsiveChange: function (narrow) {
this._setNarrow(narrow); this._setNarrow(narrow);
if (this.narrow) { if (this.narrow) {
@ -438,56 +444,58 @@ To change the drawer container when it's in the right side:
} }
this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
this.fire('paper-responsive-change', {narrow: this.narrow}); this.fire('paper-responsive-change', { narrow: this.narrow });
}, },
_onQueryMatchesChanged: function(e) { _onQueryMatchesChanged: function (event) {
this._responsiveChange(e.detail.value); this._responsiveChange(event.detail.value);
}, },
_forceNarrowChanged: function() { _forceNarrowChanged: function () {
// set the narrow mode only if we reached the `responsiveWidth` // set the narrow mode only if we reached the `responsiveWidth`
this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches); this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches);
}, },
_swipeAllowed: function() { _swipeAllowed: function () {
return this.narrow && !this.disableSwipe; return this.narrow && !this.disableSwipe;
}, },
_isMainSelected: function() { _isMainSelected: function () {
return this.selected === 'main'; return this.selected === 'main';
}, },
_startEdgePeek: function() { _startEdgePeek: function () {
this.width = this.$.drawer.offsetWidth; this.width = this.$.drawer.offsetWidth;
this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ? this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ?
-this.edgeSwipeSensitivity : this.edgeSwipeSensitivity)); -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
this._setPeeking(true); this._setPeeking(true);
}, },
_stopEdgePeek: function() { _stopEdgePeek: function () {
if (this.peeking) { if (this.peeking) {
this._setPeeking(false); this._setPeeking(false);
this._moveDrawer(null); this._moveDrawer(null);
} }
}, },
_downHandler: function(e) { _downHandler: function (event) {
if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) && !sharedPanel) { if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event) && !sharedPanel) {
this._startEdgePeek(); this._startEdgePeek();
// cancel selection
event.preventDefault();
// grab this panel // grab this panel
sharedPanel = this; sharedPanel = this;
} }
}, },
_upHandler: function() { _upHandler: function () {
this._stopEdgePeek(); this._stopEdgePeek();
// release the panel // release the panel
sharedPanel = null; sharedPanel = null;
}, },
_onTap: function(e) { _onTap: function (event) {
var targetElement = Polymer.dom(e).localTarget; var targetElement = Polymer.dom(event).localTarget;
var isTargetToggleElement = targetElement && var isTargetToggleElement = targetElement &&
this.drawerToggleAttribute && this.drawerToggleAttribute &&
targetElement.hasAttribute(this.drawerToggleAttribute); targetElement.hasAttribute(this.drawerToggleAttribute);
@ -497,8 +505,8 @@ To change the drawer container when it's in the right side:
} }
}, },
_isEdgeTouch: function(e) { _isEdgeTouch: function (event) {
var x = e.detail.x; var x = event.detail.x;
return !this.disableEdgeSwipe && this._swipeAllowed() && return !this.disableEdgeSwipe && this._swipeAllowed() &&
(this.rightDrawer ? (this.rightDrawer ?
@ -506,7 +514,7 @@ To change the drawer container when it's in the right side:
x <= this.edgeSwipeSensitivity); x <= this.edgeSwipeSensitivity);
}, },
_trackStart: function(event) { _trackStart: function (event) {
if (this._swipeAllowed()) { if (this._swipeAllowed()) {
sharedPanel = this; sharedPanel = this;
this._setDragging(true); this._setDragging(true);
@ -522,7 +530,7 @@ To change the drawer container when it's in the right side:
} }
}, },
_translateXForDeltaX: function(deltaX) { _translateXForDeltaX: function (deltaX) {
var isMain = this._isMainSelected(); var isMain = this._isMainSelected();
if (this.rightDrawer) { if (this.rightDrawer) {
@ -532,9 +540,9 @@ To change the drawer container when it's in the right side:
} }
}, },
_trackX: function(e) { _trackX: function (event) {
if (this.dragging) { if (this.dragging) {
var dx = e.detail.dx; var dx = event.detail.dx;
if (this.peeking) { if (this.peeking) {
if (Math.abs(dx) <= this.edgeSwipeSensitivity) { if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
@ -548,9 +556,9 @@ To change the drawer container when it's in the right side:
} }
}, },
_trackEnd: function(e) { _trackEnd: function (event) {
if (this.dragging) { if (this.dragging) {
var xDirection = e.detail.dx > 0; var xDirection = event.detail.dx > 0;
this._setDragging(false); this._setDragging(false);
this.transition = true; this.transition = true;
@ -565,7 +573,7 @@ To change the drawer container when it's in the right side:
} }
}, },
_transformForTranslateX: function(translateX) { _transformForTranslateX: function (translateX) {
if (translateX === null) { if (translateX === null) {
return ''; return '';
} }
@ -574,14 +582,8 @@ To change the drawer container when it's in the right side:
'translate3d(' + translateX + 'px, 0, 0)'; 'translate3d(' + translateX + 'px, 0, 0)';
}, },
_moveDrawer: function(translateX) { _moveDrawer: function (translateX) {
var s = this.$.drawer.style; this.transform(this._transformForTranslateX(translateX), this.$.drawer);
if (this.hasTransform) {
s.transform = this._transformForTranslateX(translateX);
} else {
s.webkitTransform = this._transformForTranslateX(translateX);
}
} }
}); });

42
dashboard-ui/bower_components/paper-menu/.bower.json vendored Normal file
View file

@ -0,0 +1,42 @@
{
"name": "paper-menu",
"version": "1.0.0",
"description": "Implements an accessible material design menu",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"menu"
],
"main": "paper-menu.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-menu"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-menu",
"ignore": [],
"dependencies": {
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"_release": "1.0.0",
"_resolution": {
"type": "version",
"tag": "v1.0.0",
"commit": "0642450ec9df0fc0b1d909842f436c3dea79ed1e"
},
"_source": "git://github.com/PolymerElements/paper-menu.git",
"_target": "~1.0.0",
"_originalSource": "PolymerElements/paper-menu",
"_direct": true
}

1
dashboard-ui/bower_components/paper-menu/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
bower_components/

32
dashboard-ui/bower_components/paper-menu/bower.json vendored Normal file
View file

@ -0,0 +1,32 @@
{
"name": "paper-menu",
"version": "1.0.0",
"description": "Implements an accessible material design menu",
"authors": "The Polymer Authors",
"keywords": [
"web-components",
"polymer",
"menu"
],
"main": "paper-menu.html",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/PolymerElements/paper-menu"
},
"license": "http://polymer.github.io/LICENSE.txt",
"homepage": "https://github.com/PolymerElements/paper-menu",
"ignore": [],
"dependencies": {
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"polymer": "Polymer/polymer#^1.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}

81
dashboard-ui/bower_components/paper-menu/demo/index.html vendored Normal file
View file

@ -0,0 +1,81 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<title>paper-menu demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-item/paper-item.html">
<link rel="import" href="../paper-menu.html">
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<style>
.horizontal-section {
padding: 0 !important;
}
.avatar {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
background: #ccc;
}
</style>
</head>
<body>
<div class="horizontal center-justified layout">
<div>
<h4>Standard</h4>
<div class="horizontal-section">
<paper-menu class="list">
<paper-item>Inbox</paper-item>
<paper-item>Starred</paper-item>
<paper-item>Sent mail</paper-item>
<paper-item>Drafts</paper-item>
</paper-menu>
</div>
</div>
<div>
<h4>Pre-selected</h4>
<div class="horizontal-section">
<paper-menu class="list" selected="0">
<paper-item>Inbox</paper-item>
<paper-item disabled>Starred</paper-item>
<paper-item>Sent mail</paper-item>
<paper-item>Drafts</paper-item>
</paper-menu>
</div>
</div>
<div>
<h4>Multi-select</h4>
<div class="horizontal-section">
<paper-menu class="list" multi>
<paper-item>Bold</paper-item>
<paper-item>Italic</paper-item>
<paper-item>Underline</paper-item>
<paper-item>Strikethrough</paper-item>
</paper-menu>
</div>
</div>
</div>
</body>
</html>

35
dashboard-ui/bower_components/paper-menu/hero.svg vendored Normal file
View file

@ -0,0 +1,35 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
<g id="background" display="none">
<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
</g>
<g id="label">
</g>
<g id="art">
<g>
<circle cx="86.5" cy="39" r="4"/>
<path d="M138,44c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,37.3,100,36,98,36v-2
c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V44z"/>
<circle cx="86.5" cy="63" r="4"/>
<path d="M138,68c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,61.3,100,60,98,60v-2
c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V68z"/>
<circle cx="86.5" cy="88" r="4"/>
<path d="M138,93c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,86.3,100,85,98,85v-2
c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V93z"/>
<path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
</g>
<g id="ic_x5F_add_x0D_">
</g>
</g>
<g id="Guides">
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

30
dashboard-ui/bower_components/paper-menu/index.html vendored Normal file
View file

@ -0,0 +1,30 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>paper-menu</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page></iron-component-page>
</body>
</html>

133
dashboard-ui/bower_components/paper-menu/paper-menu.html vendored Normal file
View file

@ -0,0 +1,133 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<!--
`<paper-menu>` implements an accessible menu control with Material Design styling. The focused item
is highlighted, and the selected item has bolded text.
<paper-menu>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
Make a multi-select menu with the `multi` attribute. Items in a multi-select menu can be deselected,
and multiple item can be selected.
<paper-menu multi>
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
### Styling
The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-menu-background-color` | Menu background color | `--primary-background-color`
`-paper-menu-color` | Menu foreground color | `--primary-text-color`
`--paper-menu-disabled-color` | Foreground color for a disabled item | `--disabled-text-color`
`--paper-menu` | Mixin applied to the menu | `{}`
`--paper-menu-selected-item` | Mixin applied to the selected item | `{}`
`--paper-menu-focused-item` | Mixin applied to the focused item | `{}`
`--paper-menu-focused-item-after` | Mixin applied to the ::after pseudo-element for the focused item | `{}`
### Accessibility
`<paper-menu>` has `role="menu"` by default. A multi-select menu will also have
`aria-multiselectable` set. It implements key bindings to navigate through the menu with the up and
down arrow keys, esc to exit the menu, and enter to activate a menu item. Typing the first letter
of a menu item will also focus it.
@group Paper Elements
@element paper-menu
@hero hero.svg
@demo demo/index.html
-->
<dom-module id="paper-menu">
<style>
:host {
display: block;
padding: 8px 0;
background: var(--paper-menu-background-color, --primary-background-color);
color: var(--paper-menu-color, --primary-text-color);
@apply(--paper-menu);
}
/* need a wrapper element to make this higher specificity than the :host rule in paper-item */
.content > ::content > .iron-selected {
font-weight: bold;
@apply(--paper-menu-selected-item);
}
.content > ::content > [disabled] {
color: var(--paper-menu-disabled-color, --disabled-text-color);
}
.content > ::content > *:focus {
position: relative;
outline: 0;
@apply(--paper-menu-colored-focused-item);
}
.content > ::content > *:focus:after {
@apply(--layout-fit);
background: currentColor;
/* FIXME move to paper-styles for next widget */
opacity: 0.12;
content: '';
@apply(--paper-menu-colored-focused-item-after);
}
.content > ::content > *[colored]:focus:after {
opacity: 0.26;
}
</style>
<template>
<div class="content">
<content></content>
</div>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'paper-menu',
behaviors: [
Polymer.IronMenuBehavior
]
});
})();
</script>

34
dashboard-ui/bower_components/paper-menu/test/index.html vendored Normal file
View file

@ -0,0 +1,34 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>paper-menu tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../web-component-tester/browser.js"></script>
</head>
<body>
<script>
WCT.loadSuites([
'paper-menu.html'
]);
</script>
</body>
</html>

67
dashboard-ui/bower_components/paper-menu/test/paper-menu.html vendored Normal file
View file

@ -0,0 +1,67 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>paper-menu tests</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<script src="../../web-component-tester/browser.js"></script>
<script src="../../test-fixture/test-fixture-mocha.js"></script>
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="../paper-menu.html">
</head>
<body>
<test-fixture id="basic">
<template>
<paper-menu>
<div>item 1</div>
<div>item 2</div>
<div>item 3</div>
</paper-menu>
</template>
</test-fixture>
<script>
suite('<paper-menu>', function() {
var menu;
setup(function() {
menu = fixture('basic');
});
test('selected item is styled', function() {
var boldDiv = document.createElement('div');
boldDiv.style.fontWeight = 'bold';
document.body.appendChild(boldDiv);
menu.selected = 1;
assert.equal(getComputedStyle(menu.selectedItem).fontWeight,
getComputedStyle(boldDiv).fontWeight, 'selected item is bold');
});
});
</script>
</body>
</html>

4
dashboard-ui/css/librarybrowser.css
View file

@ -609,8 +609,8 @@ span.itemCommunityRating:not(:empty) + .userDataIcons {
} }
.darkScrollbars ::-webkit-scrollbar { .darkScrollbars ::-webkit-scrollbar {
width: 12px; width: 10px;
height: 12px; height: 10px;
} }
.darkScrollbars ::-webkit-scrollbar-button:start:decrement, .darkScrollbars ::-webkit-scrollbar-button:start:decrement,

174
dashboard-ui/css/librarymenu.css
View file

@ -8,14 +8,10 @@
.sidebarDivider { .sidebarDivider {
height: 1px; height: 1px;
background: #333; background: #ddd;
margin: .5em 0; margin: .5em 0;
} }
.ui-page-theme-a .sidebarDivider {
background: #ddd !important;
}
.headerBackButton { .headerBackButton {
padding-right: 5px !important; padding-right: 5px !important;
} }
@ -41,6 +37,40 @@
vertical-align: middle; vertical-align: middle;
} }
.mainDrawerPanel {
position: static !important;
width: auto !important;
height: auto !important;
}
.mainDrawerPanelPreInit #drawer {
display: none !important;
}
.mainDrawerPanel #drawer {
z-index: 1000 !important;
position: fixed !important;
bottom: 0;
height: auto !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
}
.mainDrawerPanel #main {
left: 0 !important;
position: static !important;
}
.mainDrawer {
height: auto !important;
border-right: 1px solid #e0e0e0;
}
.mainDrawerContent {
padding-bottom: 40px;
}
.headerButton { .headerButton {
margin: 0; margin: 0;
background-color: transparent; background-color: transparent;
@ -80,10 +110,14 @@
border-width: 0 !important; border-width: 0 !important;
} }
.libraryMenuButton, .dashboardMenuButton { .mainDrawerButton {
padding-left: 10px !important; padding-left: 10px !important;
} }
.hideMainDrawer .mainDrawerButton {
display: none;
}
.barMenuInner { .barMenuInner {
padding: 6px 10px; padding: 6px 10px;
} }
@ -191,23 +225,6 @@
vertical-align: top; vertical-align: top;
} }
.librarySidebarLinks {
margin-left: -1em;
margin-right: -1em;
margin-top: -1em;
padding-top: 0;
}
.librarySidebarLinks a {
font-weight: 300 !important;
padding: .8em 20px .8em 0;
}
.librarySidebarLinks a:hover {
background-color: #383838 !important;
color: #fff !important;
}
.viewMenuSecondary { .viewMenuSecondary {
position: absolute; position: absolute;
top: 0; top: 0;
@ -216,12 +233,7 @@
} }
.selectedMediaFolder { .selectedMediaFolder {
background-color: #38c !important; background-color: #f2f2f2 !important;
color: #fff !important;
}
.itemDetailPage .selectedMediaFolder {
background-color: rgba(51,136,204,.8) !important;
} }
.ui-panel.ui-body-b { .ui-panel.ui-body-b {
@ -255,20 +267,6 @@
} }
} }
@media all and (min-width: 800px) {
.dashboardDocument .dashboardMenuButton {
display: none !important;
}
}
@media all and (max-width: 800px) {
.dashboardDocument .libraryMenuButton {
display: none !important;
}
}
@media all and (max-width: 800px) { @media all and (max-width: 800px) {
/* The sidebar isn't visible at this size, so there's no way to navigate within the editor */ /* The sidebar isn't visible at this size, so there's no way to navigate within the editor */
@ -277,14 +275,96 @@
} }
} }
@media all and (max-width: 800px) { @media all and (min-width: 800px) {
/* They can use the left menu */ .dashboardDocument .dashboardDrawerContent {
.dashboardEntryHeaderButton {
display: none !important; display: none !important;
} }
} }
.libraryDocument .dashboardMenuButton { @media all and (max-width: 800px) {
.dashboardDocument .libraryDrawerContent {
display: none !important;
}
}
.drawerUserPanel {
background: url(images/splash.jpg);
background-size: cover;
background-position: center center;
margin-bottom: 1em;
position: relative;
color: #fff;
height: 140px;
}
.drawerUserPanelInner {
background-color: rgba(0, 0, 0, .75);
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
.drawerUserPanelContent {
color: #fff;
font-weight: 500;
padding: 1.1em;
font-size: 14px;
}
.drawerUserPanelUserImage {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
border-radius: 1000px;
vertical-align: middle;
}
.drawerUserPanelUserName {
padding-top: 1.5em;
padding-left: .25em;
}
.libraryDocument .dashboardDrawerContent {
display: none !important; display: none !important;
} }
.dashboardDocument .lnkMySync {
display: none !important;
}
.dashboardDocument .lnkManageServer {
display: none !important;
}
.darkDrawer {
background-color: #282828 !important;
}
.darkDrawer .sidebarLinkIcon {
color: #ccc !important;
}
.darkDrawer .sidebarLinkText, .darkDrawer .sidebarLink {
color: #fff !important;
font-weight: 300 !important;
}
.darkDrawer .sidebarHeader {
color: #bbb !important;
}
.darkDrawer .sidebarDivider {
background: #555 !important;
}
.darkDrawer .sidebarLink:hover {
background: #444;
}
.darkDrawer .sidebarLink.selectedSidebarLink, .darkDrawer .selectedMediaFolder {
background: #444 !important;
}

35
dashboard-ui/css/site.css
View file

@ -296,6 +296,7 @@
/* jQuery mobile adds a text shadow that seems unnecessary. */ /* jQuery mobile adds a text shadow that seems unnecessary. */
* { * {
text-shadow: none !important; text-shadow: none !important;
-webkit-font-smoothing: antialiased;
} }
/* Remove IE mobile 300ms tap delay */ /* Remove IE mobile 300ms tap delay */
@ -693,9 +694,9 @@ h1 .imageLink {
.sidebarLink { .sidebarLink {
display: block; display: block;
padding: .6em 20px .6em 0; padding: .8em 20px .8em 0;
text-decoration: none; text-decoration: none;
color: inherit !important; color: #111 !important;
font-weight: 500 !important; font-weight: 500 !important;
font-size: 14px; font-size: 14px;
vertical-align: middle; vertical-align: middle;
@ -706,46 +707,28 @@ h1 .imageLink {
} }
.sidebarLink.selectedSidebarLink { .sidebarLink.selectedSidebarLink {
margin-right: 0; background: #f2f2f2 !important;
} }
.ui-page-theme-a .selectedSidebarLink {
background: #f2f2f2 !important;
}
.ui-page-theme-b .selectedSidebarLink {
background: #38c !important;
color: #fff !important;
}
.sidebarLinkIcon { .sidebarLinkIcon {
font-size: 16px; font-size: 20px;
width: 66px; width: 72px!important;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
color: #ddd; color: #7f7f7f;
} }
.sidebarLinkIcon + span { .sidebarLinkIcon + span {
vertical-align: middle; vertical-align: middle;
} }
.ui-page-theme-a .sidebarLinkIcon {
color: #666;
}
.sidebarHeader { .sidebarHeader {
padding-left: 20px; padding-left: 20px;
margin: 15px 0 10px; margin: 15px 0 10px;
font-size: 90%; color: #666;
color: #ccc; font-weight: 500;
} }
.ui-page-theme-a .sidebarHeader {
color: #888;
}
.invalidEntry { .invalidEntry {
background-color: lightpink !important; background-color: lightpink !important;
} }

478
dashboard-ui/scripts/librarymenu.js
View file

@ -11,12 +11,7 @@
html += '<button type="button" data-role="none" class="headerButton headerButtonLeft headerBackButton"><div class="fa fa-chevron-left"></div></button>'; html += '<button type="button" data-role="none" class="headerButton headerButtonLeft headerBackButton"><div class="fa fa-chevron-left"></div></button>';
} }
html += '<button type="button" data-role="none" title="Menu" class="headerButton dashboardMenuButton barsMenuButton headerButtonLeft">'; html += '<button type="button" data-role="none" title="Menu" class="headerButton mainDrawerButton barsMenuButton headerButtonLeft">';
html += '<div class="barMenuInner fa fa-bars">';
html += '</div>';
html += '</button>';
html += '<button type="button" data-role="none" title="Menu" class="headerButton libraryMenuButton barsMenuButton headerButtonLeft">';
html += '<div class="barMenuInner fa fa-bars">'; html += '<div class="barMenuInner fa fa-bars">';
html += '</div>'; html += '</div>';
html += '</button>'; html += '</button>';
@ -25,9 +20,9 @@
html += '<div class="viewMenuSecondary">'; html += '<div class="viewMenuSecondary">';
html += '<button id="btnCast" class="btnCast btnDefaultCast headerButton headerButtonRight" type="button" data-role="none" style="display:none;"><div class="headerSelectedPlayer"></div><i class="material-icons btnCastImageDefault">cast</i><i class="material-icons btnCastImageActive">cast_connected</i></button>'; html += '<button id="btnCast" class="btnCast btnDefaultCast headerButton headerButtonRight hide" type="button" data-role="none"><div class="headerSelectedPlayer"></div><i class="material-icons btnCastImageDefault">cast</i><i class="material-icons btnCastImageActive">cast_connected</i></button>';
html += '<button onclick="Search.showSearchPanel();" type="button" data-role="none" class="headerButton headerButtonRight headerSearchButton" style="display:none;"><i class="material-icons">search</i></button>'; html += '<button onclick="Search.showSearchPanel();" type="button" data-role="none" class="headerButton headerButtonRight headerSearchButton hide"><i class="material-icons">search</i></button>';
html += '<div class="viewMenuSearch hide">'; html += '<div class="viewMenuSearch hide">';
html += '<form class="viewMenuSearchForm">'; html += '<form class="viewMenuSearchForm">';
html += '<input type="text" data-role="none" data-type="search" class="headerSearchInput" autocomplete="off" spellcheck="off" />'; html += '<input type="text" data-role="none" data-type="search" class="headerSearchInput" autocomplete="off" spellcheck="off" />';
@ -36,7 +31,7 @@
html += '</form>'; html += '</form>';
html += '</div>'; html += '</div>';
html += '<button onclick="VoiceInputManager.startListening();" type="button" data-role="none" class="headerButton headerButtonRight headerVoiceButton" style="display:none;"><i class="material-icons">mic</i></button>'; html += '<button onclick="VoiceInputManager.startListening();" type="button" data-role="none" class="headerButton headerButtonRight headerVoiceButton hide"><i class="material-icons">mic</i></button>';
if (!showUserAtTop()) { if (!showUserAtTop()) {
html += '<button class="headerButton headerButtonRight headerUserButton" type="button" data-role="none" onclick="Dashboard.showUserFlyout(this);">'; html += '<button class="headerButton headerButtonRight headerUserButton" type="button" data-role="none" onclick="Dashboard.showUserFlyout(this);">';
@ -45,7 +40,7 @@
} }
if (!$.browser.mobile && !AppInfo.isNativeApp) { if (!$.browser.mobile && !AppInfo.isNativeApp) {
html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton" style="display:none;"><i class="material-icons">settings</i></a>'; html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton hide"><i class="material-icons">settings</i></a>';
//html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton clearLink" style="display:none;"><paper-icon-button icon="settings"></paper-icon-button></a>'; //html += '<a href="dashboard.html" class="headerButton headerButtonRight dashboardEntryHeaderButton clearLink" style="display:none;"><paper-icon-button icon="settings"></paper-icon-button></a>';
} }
@ -78,29 +73,29 @@
var header = $('.viewMenuBar'); var header = $('.viewMenuBar');
if (user.localUser) { if (user.localUser) {
$('.btnCast', header).show(); $('.btnCast', header).visible(true);
$('.headerSearchButton', header).show(); $('.headerSearchButton', header).visible(true);
requirejs(['voice/voice'], function () { requirejs(['voice/voice'], function () {
if (VoiceInputManager.isSupported()) { if (VoiceInputManager.isSupported()) {
$('.headerVoiceButton', header).show(); $('.headerVoiceButton', header).visible(true);
} else { } else {
$('.headerVoiceButton', header).hide(); $('.headerVoiceButton', header).visible(false);
} }
}); });
} else { } else {
$('.btnCast', header).hide(); $('.btnCast', header).visible(false);
$('.headerVoiceButton', header).hide(); $('.headerVoiceButton', header).visible(false);
$('.headerSearchButton', header).hide(); $('.headerSearchButton', header).visible(false);
} }
if (user.canManageServer) { if (user.canManageServer) {
$('.dashboardEntryHeaderButton', header).show(); $('.dashboardEntryHeaderButton', header).visible(true);
} else { } else {
$('.dashboardEntryHeaderButton', header).hide(); $('.dashboardEntryHeaderButton', header).visible(false);
} }
var userButtonHtml = ''; var userButtonHtml = '';
@ -128,12 +123,14 @@
if (AppInfo.isTouchPreferred) { if (AppInfo.isTouchPreferred) {
$('.libraryMenuButton').on('click', showLibraryMenu); if ('ontouchend' in document) {
$('.dashboardMenuButton').on('click', showDashboardMenu); $('.mainDrawerButton').on('touchend', openMainDrawer);
} else {
$('.mainDrawerButton').on('click', openMainDrawer);
}
} else { } else {
$('.libraryMenuButton').createHoverTouch().on('hovertouch', showLibraryMenu); $('.mainDrawerButton').createHoverTouch().on('hovertouch', openMainDrawer);
$('.dashboardMenuButton').createHoverTouch().on('hovertouch', showDashboardMenu);
} }
$('.headerBackButton').on('click', onBackClick); $('.headerBackButton').on('click', onBackClick);
@ -141,23 +138,6 @@
// Have to wait for document ready here because otherwise // Have to wait for document ready here because otherwise
// we may see the jQM redirect back and forth problem // we may see the jQM redirect back and forth problem
$(initViewMenuBarHeadroom); $(initViewMenuBarHeadroom);
//$('.headerButtonViewMenu').off('click', onViewButtonClick).on('click', onViewButtonClick);
if (AppInfo.isNativeApp) {
$(document).off('swiperight.drawer').on('swiperight.drawer', '.libraryPage', onSwipeRight);
}
}
function onSwipeRight(event) {
if (event.swipestop && event.swipestop.coords) {
var x = event.swipestop.coords[0];
if (x < 50) {
showLibraryMenu();
}
}
} }
function initViewMenuBarHeadroom() { function initViewMenuBarHeadroom() {
@ -186,13 +166,160 @@
return LibraryBrowser.getHref(item, context); return LibraryBrowser.getHref(item, context);
} }
function getViewsHtml() { var requiresDrawerRefresh = true;
var requiresDashboardDrawerRefresh = true;
function openMainDrawer() {
var drawerPanel = $('.mainDrawerPanel')[0];
drawerPanel.openDrawer();
}
function onMainDrawerOpened() {
if ($.browser.mobile) {
$(document.body).addClass('bodyWithPopupOpen');
}
var drawer = $('.mainDrawerPanel .mainDrawer');
ConnectionManager.user(window.ApiClient).done(function (user) {
if (requiresDrawerRefresh) {
ensureDrawerStructure(drawer);
refreshUserInfoInDrawer(user, drawer);
refreshLibraryInfoInDrawer(user, drawer);
refreshBottomUserInfoInDrawer(user, drawer);
$(document).trigger('libraryMenuCreated');
updateLibraryMenu(user.localUser);
}
if (requiresDrawerRefresh || requiresDashboardDrawerRefresh) {
refreshDashboardInfoInDrawer($.mobile.activePage, user, drawer);
requiresDashboardDrawerRefresh = false;
}
requiresDrawerRefresh = false;
updateSidebarOnClicks();
updateLibraryNavLinks($.mobile.activePage);
});
}
function onMainDrawerClosed() {
$(document.body).removeClass('bodyWithPopupOpen');
}
function closeMainDrawer() {
var drawerPanel = $('.mainDrawerPanel')[0];
drawerPanel.closeDrawer();
}
function updateSidebarOnClicks() {
$('.mainDrawerContent a').off('click.closeMainDrawer').on('click.closeMainDrawer', closeMainDrawer);
}
function ensureDrawerStructure(drawer) {
if ($('.mainDrawerContent', drawer).length) {
return;
}
var html = '<div class="mainDrawerContent">';
html += '<div class="userheader">';
html += '</div>';
html += '<div class="libraryDrawerContent">';
html += '</div>';
html += '<div class="dashboardDrawerContent">';
html += '</div>';
html += '<div class="userFooter">';
html += '</div>';
html += '</div>';
$(drawer).html(html);
}
function refreshUserInfoInDrawer(user, drawer) {
var html = ''; var html = '';
var userAtTop = showUserAtTop();
var homeHref = window.ApiClient ? 'index.html' : 'selectserver.html';
var hasUserImage = user.imageUrl && AppInfo.enableUserImage;
if (userAtTop) {
html += '<div class="drawerUserPanel">';
html += '<div class="drawerUserPanelInner">';
html += '<div class="drawerUserPanelContent">';
var imgWidth = 60;
if (hasUserImage) {
var url = user.imageUrl;
if (user.supportsImageParams) {
url += "&width=" + (imgWidth * Math.max(devicePixelRatio || 1, 2));
html += '<div class="lazy drawerUserPanelUserImage" data-src="' + url + '" style="width:' + imgWidth + 'px;height:' + imgWidth + 'px;"></div>';
}
} else {
html += '<div class="fa fa-user drawerUserPanelUserImage" style="font-size:' + imgWidth + 'px;"></div>';
}
html += '<div class="drawerUserPanelUserName">';
html += user.name;
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="index.html"><iron-icon icon="home" class="sidebarLinkIcon" style="color:#2196F3;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonHome') + '</span></a>';
} else {
html += '<div style="margin-top:5px;"></div>';
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '">';
html += '<div class="lazy" data-src="css/images/mblogoicon.png" style="width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.6em 0 1.5em;display:inline-block;"></div>';
html += Globalize.translate('ButtonHome');
html += '</a>';
}
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html"><iron-icon icon="tablet-android" class="sidebarLinkIcon" style="color:#673AB7;"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonRemote') + '</span></a>';
$('.userheader', drawer).html(html).lazyChildren();
}
function refreshLibraryInfoInDrawer(user, drawer) {
var html = '';
html += '<div class="sidebarDivider"></div>';
html += '<div class="libraryMenuOptions">'; html += '<div class="libraryMenuOptions">';
html += '</div>'; html += '</div>';
$('.libraryDrawerContent', drawer).html(html);
}
function refreshDashboardInfoInDrawer(page, user, drawer) {
var html = '';
html += '<div class="sidebarDivider"></div>';
html += Dashboard.getToolsMenuHtml(page);
$('.dashboardDrawerContent', drawer).html(html);
}
function refreshBottomUserInfoInDrawer(user, drawer) {
var html = '';
html += '<div class="adminMenuOptions">'; html += '<div class="adminMenuOptions">';
html += '<div class="sidebarDivider"></div>'; html += '<div class="sidebarDivider"></div>';
@ -200,90 +327,57 @@
html += Globalize.translate('HeaderAdmin'); html += Globalize.translate('HeaderAdmin');
html += '</div>'; html += '</div>';
html += '<a class="sidebarLink lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#"><span class="fa fa-server sidebarLinkIcon"></span>' + Globalize.translate('ButtonManageServer') + '</a>'; html += '<a class="sidebarLink lnkMediaFolder lnkManageServer" data-itemid="dashboard" href="#"><iron-icon icon="dashboard" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonManageServer') + '</span></a>';
html += '<a class="sidebarLink lnkMediaFolder editorViewMenu" data-itemid="editor" href="edititemmetadata.html"><span class="fa fa-edit sidebarLinkIcon"></span>' + Globalize.translate('ButtonMetadataManager') + '</a>'; html += '<a class="sidebarLink lnkMediaFolder editorViewMenu" data-itemid="editor" href="edititemmetadata.html"><iron-icon icon="mode-edit" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonMetadataManager') + '</span></a>';
if (!$.browser.mobile && !AppInfo.isTouchPreferred) { if (!$.browser.mobile && !AppInfo.isTouchPreferred) {
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="reports" href="reports.html"><span class="fa fa-bar-chart sidebarLinkIcon"></span>' + Globalize.translate('ButtonReports') + '</a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="reports" href="reports.html"><iron-icon icon="insert-chart" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonReports') + '</span></a>';
} }
html += '</div>'; html += '</div>';
html += '<div class="userMenuOptions">'; html += '<div class="userMenuOptions">';
html += '<div class="sidebarDivider"></div>'; html += '<div class="sidebarDivider"></div>';
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="inbox" href="notificationlist.html"><span class="fa fa-inbox sidebarLinkIcon"></span>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="inbox" href="notificationlist.html"><iron-icon icon="inbox" class="sidebarLinkIcon"></iron-icon>';
html += Globalize.translate('ButtonInbox'); html += Globalize.translate('ButtonInbox');
html += '<div class="btnNotifications"><div class="btnNotificationsInner">0</div></div>'; html += '<div class="btnNotifications"><div class="btnNotificationsInner">0</div></div>';
html += '</a>'; html += '</a>';
html += '<a class="sidebarLink lnkMediaFolder syncViewMenu" data-itemid="mysync" href="mysync.html"><span class="fa fa-refresh sidebarLinkIcon" ></span>' + Globalize.translate('ButtonSync') + '</a>'; if (user.localUser) {
html += '<a class="sidebarLink lnkMediaFolder lnkMySettings" data-itemid="mysync" href="mypreferencesdisplay.html?userId=' + user.localUser.Id + '"><iron-icon icon="settings" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSettings') + '</span></a>';
}
html += '<a class="sidebarLink lnkMediaFolder lnkMySync" data-itemid="mysync" href="mysync.html"><iron-icon icon="refresh" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSync') + '</span></a>';
if (Dashboard.isConnectMode()) { if (Dashboard.isConnectMode()) {
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="selectserver" href="selectserver.html"><span class="fa fa-globe sidebarLinkIcon"></span>' + Globalize.translate('ButtonSelectServer') + '</a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="selectserver" href="selectserver.html"><span class="fa fa-globe sidebarLinkIcon"></span><span class="sidebarLinkText">' + Globalize.translate('ButtonSelectServer') + '</span></a>';
} }
if (showUserAtTop()) { if (showUserAtTop()) {
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" href="#" onclick="Dashboard.logout();"><span class="fa fa-lock sidebarLinkIcon"></span>' + Globalize.translate('ButtonSignOut') + '</a>'; html += '<a class="sidebarLink lnkMediaFolder" data-itemid="logout" href="#" onclick="Dashboard.logout();"><iron-icon icon="lock" class="sidebarLinkIcon"></iron-icon><span class="sidebarLinkText">' + Globalize.translate('ButtonSignOut') + '</span></a>';
} }
html += '</div>'; html += '</div>';
$('.userFooter', drawer).html(html);
return html; $('.lnkManageServer', drawer).on('click', onManageServerClicked);
} }
function showLibraryMenu() { function updateLibraryMenu(user) {
var page = $.mobile.activePage; if (!user) {
var panel;
ConnectionManager.user(window.ApiClient).done(function (user) { $('.adminMenuOptions').visible(false);
$('.lnkMySync').visible(false);
panel = getLibraryMenu(user); $('.userMenuOptions').visible(false);
updateLibraryNavLinks(page);
panel = $(panel).panel('toggle').off('mouseleave.librarymenu');
if (!AppInfo.isTouchPreferred) {
panel.on('mouseleave.librarymenu', function () {
$(this).panel("close");
});
}
});
}
function showDashboardMenu() {
var page = $.mobile.activePage;
var panel = getDashboardMenu(page);
panel = $(panel).panel('toggle').off('mouseleave.librarymenu');
if (!AppInfo.isTouchPreferred) {
panel.on('mouseleave.librarymenu', function () {
$(this).panel("close");
});
}
}
function updateLibraryMenu(panel) {
var apiClient = window.ApiClient;
if (!apiClient) {
$('.adminMenuOptions').hide();
$('.syncViewMenu').hide();
$('.userMenuOptions').hide();
return; return;
} }
var userId = Dashboard.getCurrentUserId(); var userId = Dashboard.getCurrentUserId();
var apiClient = window.ApiClient;
apiClient.getUserViews(userId).done(function (result) { apiClient.getUserViews(userId).done(function (result) {
var items = result.Items; var items = result.Items;
@ -295,8 +389,8 @@
html += items.map(function (i) { html += items.map(function (i) {
var iconCssClass = 'fa'; var icon = 'folder';
var color = 'inherit';
var itemId = i.Id; var itemId = i.Id;
if (i.CollectionType == "channels") { if (i.CollectionType == "channels") {
@ -310,40 +404,49 @@
} }
if (i.CollectionType == "photos") { if (i.CollectionType == "photos") {
iconCssClass += ' fa-photo'; icon = 'photo-library';
color = "#009688";
} }
else if (i.CollectionType == "music" || i.CollectionType == "musicvideos") { else if (i.CollectionType == "music" || i.CollectionType == "musicvideos") {
iconCssClass += ' fa-music'; icon = 'library-music';
color = '#FB8521';
} }
else if (i.CollectionType == "books") { else if (i.CollectionType == "books") {
iconCssClass += ' fa-book'; icon = 'library-books';
color = "#1AA1E1";
} }
else if (i.CollectionType == "playlists") { else if (i.CollectionType == "playlists") {
iconCssClass += ' fa-list'; icon = 'view-list';
color = "#795548";
} }
else if (i.CollectionType == "games") { else if (i.CollectionType == "games") {
iconCssClass += ' fa-gamepad'; icon = 'games';
color = "#F44336";
} }
else if (i.CollectionType == "movies") { else if (i.CollectionType == "movies") {
iconCssClass += ' fa-film'; icon = 'video-library';
color = '#CE5043';
} }
else if (i.CollectionType == "channels" || i.Type == 'Channel') { else if (i.CollectionType == "channels" || i.Type == 'Channel') {
iconCssClass += ' fa-globe'; icon = 'videocam';
color = '#E91E63';
} }
else if (i.CollectionType == "tvshows" || i.CollectionType == "livetv") { else if (i.CollectionType == "tvshows") {
iconCssClass += ' fa-video-camera'; icon = 'tv';
color = "#4CAF50";
} }
else { else if (i.CollectionType == "livetv") {
iconCssClass += ' fa-folder-open-o'; icon = 'live-tv';
color = "#293AAE";
} }
return '<a data-itemid="' + itemId + '" class="lnkMediaFolder sidebarLink" href="' + getItemHref(i, i.CollectionType) + '"><span class="' + iconCssClass + ' sidebarLinkIcon"></span><span class="sectionName">' + i.Name + '</span></a>'; return '<a data-itemid="' + itemId + '" class="lnkMediaFolder sidebarLink" href="' + getItemHref(i, i.CollectionType) + '"><iron-icon icon="' + icon + '" class="sidebarLinkIcon" style="color:' + color + '"></iron-icon><span class="sectionName">' + i.Name + '</span></a>';
}).join(''); }).join('');
var elem = $('.libraryMenuOptions').html(html); var elem = $('.libraryMenuOptions').html(html);
$('.sidebarLink', elem).on('click', function () { $('.sidebarLink', elem).off('click.updateText').on('click.updateText', function () {
var section = $('.sectionName', this)[0]; var section = $('.sectionName', this)[0];
var text = section ? section.innerHTML : this.innerHTML; var text = section ? section.innerHTML : this.innerHTML;
@ -351,111 +454,29 @@
$('.libraryMenuButtonText').html(text); $('.libraryMenuButtonText').html(text);
}); });
updateSidebarOnClicks();
}); });
Dashboard.getCurrentUser().done(function (user) {
if (user.Policy.IsAdministrator) { if (user.Policy.IsAdministrator) {
$('.adminMenuOptions').show(); $('.adminMenuOptions').visible(true);
} else { } else {
$('.adminMenuOptions').hide(); $('.adminMenuOptions').visible(false);
} }
if (user.Policy.EnableSync) { if (user.Policy.EnableSync) {
$('.syncViewMenu').show(); $('.lnkMySync').visible(true);
} else { } else {
$('.syncViewMenu').hide(); $('.lnkMySync').visible(false);
} }
});
} }
function showUserAtTop() { function showUserAtTop() {
return $.browser.mobile || AppInfo.isNativeApp; return $.browser.mobile || AppInfo.isNativeApp;
} }
var requiresLibraryMenuRefresh = false; var requiresLibraryMenuRefresh = false;
var requiresViewMenuRefresh = false; var requiresViewMenuRefresh = false;
function getLibraryMenu(user) {
var panel = $('#libraryPanel');
if (!panel.length) {
var html = '';
html += '<div data-role="panel" id="libraryPanel" class="libraryPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="b">';
html += '<div class="sidebarLinks librarySidebarLinks">';
var userAtTop = showUserAtTop();
var homeHref = window.ApiClient ? 'index.html' : 'selectserver.html';
var userHref = user.localUser && user.localUser.Policy.EnableUserPreferenceAccess ?
'mypreferencesdisplay.html?userId=' + user.localUser.Id :
(user.localUser ? ('mypreferenceswebclient.html?userId=' + user.localUser.Id) : '#');
var hasUserImage = user.imageUrl && AppInfo.enableUserImage;
if (userAtTop) {
var paddingLeft = hasUserImage ? 'padding-left:.7em;' : '';
html += '<a style="margin-top:0;' + paddingLeft + 'display:block;color:#fff;text-decoration:none;font-size:16px;font-weight:400!important;background: #111;" href="' + userHref + '">';
var imgWidth = 44;
if (hasUserImage) {
var url = user.imageUrl;
if (user.supportsImageParams) {
url += "&width=" + (imgWidth * Math.max(devicePixelRatio || 1, 2));
}
html += '<div class="lazy" data-src="' + url + '" style="width:' + imgWidth + 'px;height:' + imgWidth + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin-right:.8em;display:inline-block;"></div>';
} else {
html += '<span class="fa fa-user sidebarLinkIcon"></span>';
}
html += user.name;
html += '</a>';
html += '<div class="sidebarDivider" style="margin-top:0;"></div>';
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '"><span class="fa fa-home sidebarLinkIcon"></span><span>' + Globalize.translate('ButtonHome') + '</span></a>';
} else {
html += '<div style="margin-top:5px;"></div>';
html += '<a class="lnkMediaFolder sidebarLink" href="' + homeHref + '">';
html += '<div class="lazy" data-src="css/images/mblogoicon.png" style="width:' + 28 + 'px;height:' + 28 + 'px;background-size:contain;background-repeat:no-repeat;background-position:center center;border-radius:1000px;vertical-align:middle;margin:0 1.4em 0 1.3em;display:inline-block;"></div>';
html += Globalize.translate('ButtonHome');
html += '</a>';
}
html += '<a class="sidebarLink lnkMediaFolder" data-itemid="remote" href="nowplaying.html"><span class="fa fa-tablet sidebarLinkIcon"></span>' + Globalize.translate('ButtonRemote') + '</a>';
html += '<div class="sidebarDivider"></div>';
html += getViewsHtml();
html += '</div>';
html += '</div>';
$(document.body).append(html).trigger('libraryMenuCreated');
panel = $('#libraryPanel').panel({}).lazyChildren().trigger('create');
$('.lnkManageServer', panel).on('click', onManageServerClicked);
updateLibraryMenu();
}
else if (requiresLibraryMenuRefresh) {
updateLibraryMenu();
requiresLibraryMenuRefresh = false;
}
return panel;
}
function onManageServerClicked() { function onManageServerClicked() {
requirejs(["scripts/registrationservices"], function () { requirejs(["scripts/registrationservices"], function () {
@ -467,29 +488,6 @@
}); });
} }
function getDashboardMenu(page) {
var panel = $('#dashboardPanel', page);
if (!panel.length) {
var html = '';
html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="b">';
html += '<div style="margin: 0 -1em;">';
html += '</div>';
html += '</div>';
$(document.body).append(html);
panel = $('#dashboardPanel').panel({}).trigger('create');
}
return panel;
}
function setLibraryMenuText(text) { function setLibraryMenuText(text) {
$('.libraryMenuButtonText').html('<span>' + text + '</span>'); $('.libraryMenuButtonText').html('<span>' + text + '</span>');
@ -502,8 +500,6 @@
} }
window.LibraryMenu = { window.LibraryMenu = {
showLibraryMenu: showLibraryMenu,
getTopParentId: getTopParentId, getTopParentId: getTopParentId,
setText: setLibraryMenuText setText: setLibraryMenuText
@ -618,7 +614,7 @@
function buildViewMenuBar(page) { function buildViewMenuBar(page) {
if ($(page).hasClass('standalonePage')) { if ($(page).hasClass('standalonePage')) {
$('.viewMenuBar').hide(); $('.viewMenuBar').visible(false);
return; return;
} }
@ -626,7 +622,7 @@
$('.viewMenuBar').remove(); $('.viewMenuBar').remove();
} }
var viewMenuBar = $('.viewMenuBar').show(); var viewMenuBar = $('.viewMenuBar').visible(true);
if (!$('.viewMenuBar').length) { if (!$('.viewMenuBar').length) {
renderHeader(); renderHeader();
@ -656,6 +652,8 @@
var page = this; var page = this;
requiresDashboardDrawerRefresh = true;
if (updateViewMenuBarBeforePageShow) { if (updateViewMenuBarBeforePageShow) {
onPageBeforeShowDocumentReady(page); onPageBeforeShowDocumentReady(page);
} }
@ -695,9 +693,11 @@
var jpage = $(page); var jpage = $(page);
var isLibraryPage = jpage.hasClass('libraryPage'); var isLibraryPage = jpage.hasClass('libraryPage');
var darkDrawer = false;
if (isLibraryPage) { if (isLibraryPage) {
$(document.body).addClass('libraryDocument').removeClass('dashboardDocument');
$(document.body).addClass('libraryDocument').removeClass('dashboardDocument').removeClass('hideMainDrawer');
if (AppInfo.enableBottomTabs) { if (AppInfo.enableBottomTabs) {
$(page).addClass('noSecondaryNavPage'); $(page).addClass('noSecondaryNavPage');
@ -714,15 +714,24 @@
initHeadRoom(this); initHeadRoom(this);
}); });
} }
if (!$.browser.mobile) {
darkDrawer = true;
}
} }
else if (jpage.hasClass('type-interior')) { else if (jpage.hasClass('type-interior')) {
$(document.body).addClass('dashboardDocument').removeClass('libraryDocument'); $(document.body).addClass('dashboardDocument').removeClass('libraryDocument').removeClass('hideMainDrawer');
} else { } else {
$(document.body).removeClass('dashboardDocument').removeClass('libraryDocument'); $(document.body).removeClass('dashboardDocument').removeClass('libraryDocument').addClass('hideMainDrawer');
} }
if (AppInfo.enableBackButton) if (darkDrawer) {
{ $('.mainDrawerPanel #drawer').addClass('darkDrawer');
} else {
$('.mainDrawerPanel #drawer').removeClass('darkDrawer');
}
if (AppInfo.enableBackButton) {
updateBackButton(page); updateBackButton(page);
} }
} }
@ -771,7 +780,13 @@
requirejs(["thirdparty/headroom"], function () { requirejs(["thirdparty/headroom"], function () {
// construct an instance of Headroom, passing the element // construct an instance of Headroom, passing the element
var headroom = new Headroom(elem); var headroom = new Headroom(elem, {
// or scroll tolerance per direction
tolerance: {
down: 40,
up: 0
}
});
// initialise // initialise
headroom.init(); headroom.init();
$(elem).addClass('headroomEnabled'); $(elem).addClass('headroomEnabled');
@ -796,15 +811,14 @@
}).on('localusersignedin localusersignedout', function () { }).on('localusersignedin localusersignedout', function () {
requiresLibraryMenuRefresh = true; requiresLibraryMenuRefresh = true;
requiresViewMenuRefresh = true; requiresViewMenuRefresh = true;
requiresDrawerRefresh = true;
}); });
});
$(function () {
$(MediaController).on('playerchange', function () { $(MediaController).on('playerchange', function () {
updateCastIcon(); updateCastIcon();
}); });
$('.mainDrawerPanel').on('paper-drawer-panel-open', onMainDrawerOpened).on('paper-drawer-panel-close', onMainDrawerClosed);
}); });
})(window, document, jQuery, window.devicePixelRatio); })(window, document, jQuery, window.devicePixelRatio);

123
dashboard-ui/scripts/site.js
View file

@ -817,15 +817,7 @@ var Dashboard = {
} }
}, },
ensureToolsMenu: function (page) { getToolsMenuHtml: function (page) {
var sidebar = $('.toolsSidebar', page);
if (!sidebar.length) {
var html = '<div class="content-secondary toolsSidebar">';
html += '<div class="sidebarLinks">';
var items = Dashboard.getToolsMenuLinks(page); var items = Dashboard.getToolsMenuLinks(page);
@ -853,11 +845,16 @@ var Dashboard = {
var icon = item.icon; var icon = item.icon;
if (icon) { if (icon) {
if (icon.indexOf('fa') == 0) { menuHtml += '<iron-icon icon="' + icon + '" class="sidebarLinkIcon"' + style + '></iron-icon>';
menuHtml += '<span class="fa ' + icon + ' sidebarLinkIcon"' + style + '></span>'; //if (icon.indexOf('fa') == 0) {
} else { // menuHtml += '<span class="fa ' + icon + ' sidebarLinkIcon"' + style + '></span>';
menuHtml += '<i class="material-icons sidebarLinkIcon"' + style + '>' + icon + '</i>'; //}
} //else if (icon.indexOf('fa') == 0) {
// menuHtml += '<span class="fa ' + icon + ' sidebarLinkIcon"' + style + '></span>';
//}
//else {
// menuHtml += '<i class="material-icons sidebarLinkIcon"' + style + '>' + icon + '</i>';
//}
} }
menuHtml += '<span class="sidebarLinkText">'; menuHtml += '<span class="sidebarLinkText">';
@ -872,43 +869,26 @@ var Dashboard = {
} }
} }
html += menuHtml; return menuHtml;
},
ensureToolsMenu: function (page) {
var sidebar = $('.toolsSidebar', page);
if (!sidebar.length) {
var html = '<div class="content-secondary toolsSidebar">';
html += '<div class="sidebarLinks">';
html += Dashboard.getToolsMenuHtml(page);
// sidebarLinks // sidebarLinks
html += '</div>'; html += '</div>';
// content-secondary // content-secondary
html += '</div>'; html += '</div>';
html += '<div data-role="panel" id="dashboardPanel" class="dashboardPanel" data-position="left" data-display="overlay" data-position-fixed="true" data-theme="a">';
html += '<p class="libraryPanelHeader" style="margin: 15px 0 15px 20px;"><a href="index.html" class="imageLink"><img src="css/images/mblogoicon.png" /><span style="color:#333;">EMBY</span></a></p>';
html += '<div class="sidebarLinks">';
html += menuHtml;
// sidebarLinks
html += '<div class="sidebarDivider"></div>';
html += '<div class="userMenuOptions">';
if (Dashboard.isConnectMode()) {
html += '<a class="sidebarLink" data-itemid="selectserver" href="selectserver.html"><span class="fa fa-globe sidebarLinkIcon"></span>';
html += '<span class="sidebarLinkText">';
html += Globalize.translate('ButtonSelectServer');
html += '</span>';
html += '</a>';
}
html += '<a class="sidebarLink" data-itemid="logout" href="#" onclick="Dashboard.logout();"><span class="fa fa-sign-out sidebarLinkIcon"></span>';
html += '<span class="sidebarLinkText">';
html += Globalize.translate('ButtonSignOut');
html += '</span>';
html += '</a>';
html += '</div>';
html += '</div>';
html += '</div>';
$('.content-primary', page).before(html); $('.content-primary', page).before(html);
$(page).trigger('create'); $(page).trigger('create');
} }
@ -925,41 +905,41 @@ var Dashboard = {
name: Globalize.translate('TabServer'), name: Globalize.translate('TabServer'),
href: "dashboard.html", href: "dashboard.html",
selected: page.hasClass("dashboardHomePage"), selected: page.hasClass("dashboardHomePage"),
icon: 'fa-dashboard', icon: 'dashboard',
color: '#38c' color: '#38c'
}, { }, {
name: Globalize.translate('TabDevices'), name: Globalize.translate('TabDevices'),
href: "devices.html", href: "devices.html",
selected: page.hasClass("devicesPage"), selected: page.hasClass("devicesPage"),
icon: 'fa-tablet', icon: 'tablet',
color: '#ECA403' color: '#ECA403'
}, { }, {
name: Globalize.translate('TabUsers'), name: Globalize.translate('TabUsers'),
href: "userprofiles.html", href: "userprofiles.html",
selected: page.hasClass("userProfilesPage"), selected: page.hasClass("userProfilesPage"),
icon: 'fa-users', icon: 'people',
color: '#679C34' color: '#679C34'
}, { }, {
name: Globalize.translate('TabLibrary'), name: Globalize.translate('TabLibrary'),
divider: true, divider: true,
href: "library.html", href: "library.html",
selected: page.hasClass("mediaLibraryPage"), selected: page.hasClass("mediaLibraryPage"),
icon: 'fa-film' icon: 'video-library'
}, { }, {
name: Globalize.translate('TabMetadata'), name: Globalize.translate('TabMetadata'),
href: "metadata.html", href: "metadata.html",
selected: page.hasClass('metadataConfigurationPage'), selected: page.hasClass('metadataConfigurationPage'),
icon: 'fa-file-text' icon: 'details'
}, { }, {
name: Globalize.translate('TabPlayback'), name: Globalize.translate('TabPlayback'),
href: "playbackconfiguration.html", href: "playbackconfiguration.html",
selected: page.hasClass('playbackConfigurationPage'), selected: page.hasClass('playbackConfigurationPage'),
icon: 'fa-play-circle' icon: 'play-circle-filled'
}, { }, {
name: Globalize.translate('TabSync'), name: Globalize.translate('TabSync'),
href: "syncactivity.html", href: "syncactivity.html",
selected: page.hasClass('syncConfigurationPage') || (isServicesPage && context == 'sync'), selected: page.hasClass('syncConfigurationPage') || (isServicesPage && context == 'sync'),
icon: 'fa-refresh' icon: 'refresh'
}, { }, {
divider: true, divider: true,
name: Globalize.translate('TabExtras') name: Globalize.translate('TabExtras')
@ -967,31 +947,31 @@ var Dashboard = {
name: Globalize.translate('TabAutoOrganize'), name: Globalize.translate('TabAutoOrganize'),
href: "autoorganizelog.html", href: "autoorganizelog.html",
selected: page.hasClass("organizePage"), selected: page.hasClass("organizePage"),
icon: 'fa-files-o', icon: 'folder',
color: '#01C0DD' color: '#01C0DD'
}, { }, {
name: Globalize.translate('TabDLNA'), name: Globalize.translate('TabDLNA'),
href: "dlnasettings.html", href: "dlnasettings.html",
selected: page.hasClass("dlnaPage"), selected: page.hasClass("dlnaPage"),
icon: 'fa-film', icon: 'tv',
color: '#E5342E' color: '#E5342E'
}, { }, {
name: Globalize.translate('TabLiveTV'), name: Globalize.translate('TabLiveTV'),
href: "livetvstatus.html", href: "livetvstatus.html",
selected: page.hasClass("liveTvSettingsPage") || (isServicesPage && context == 'livetv'), selected: page.hasClass("liveTvSettingsPage") || (isServicesPage && context == 'livetv'),
icon: 'fa-video-camera', icon: 'live-tv',
color: '#293AAE' color: '#293AAE'
}, { }, {
name: Globalize.translate('TabNotifications'), name: Globalize.translate('TabNotifications'),
href: "notificationsettings.html", href: "notificationsettings.html",
selected: page.hasClass("notificationConfigurationPage"), selected: page.hasClass("notificationConfigurationPage"),
icon: 'fa-wifi', icon: 'notifications',
color: 'brown' color: 'brown'
}, { }, {
name: Globalize.translate('TabPlugins'), name: Globalize.translate('TabPlugins'),
href: "plugins.html", href: "plugins.html",
selected: page.hasClass("pluginConfigurationPage"), selected: page.hasClass("pluginConfigurationPage"),
icon: 'fa-plus-circle', icon: 'add-shopping-cart',
color: '#9D22B1' color: '#9D22B1'
}, { }, {
divider: true, divider: true,
@ -1000,20 +980,20 @@ var Dashboard = {
name: Globalize.translate('TabAdvanced'), name: Globalize.translate('TabAdvanced'),
href: "advanced.html", href: "advanced.html",
selected: page.hasClass("advancedConfigurationPage"), selected: page.hasClass("advancedConfigurationPage"),
icon: 'fa-gears', icon: 'settings',
color: '#F16834' color: '#F16834'
}, { }, {
name: Globalize.translate('TabScheduledTasks'), name: Globalize.translate('TabScheduledTasks'),
href: "scheduledtasks.html", href: "scheduledtasks.html",
selected: page.hasClass("scheduledTasksConfigurationPage"), selected: page.hasClass("scheduledTasksConfigurationPage"),
icon: 'fa-clock-o', icon: 'schedule',
color: '#38c' color: '#38c'
}, { }, {
name: Globalize.translate('TabHelp'), name: Globalize.translate('TabHelp'),
divider: true, divider: true,
href: "support.html", href: "support.html",
selected: pageElem.id == "supportPage" || pageElem.id == "logPage" || pageElem.id == "supporterPage" || pageElem.id == "supporterKeyPage" || pageElem.id == "aboutPage", selected: pageElem.id == "supportPage" || pageElem.id == "logPage" || pageElem.id == "supporterPage" || pageElem.id == "supporterKeyPage" || pageElem.id == "aboutPage",
icon: 'fa-info-circle', icon: 'help',
color: '#679C34' color: '#679C34'
}]; }];
@ -1675,12 +1655,6 @@ var AppInfo = {};
} }
} }
} }
else {
if (!$.browser.tv) {
AppInfo.enableHeadRoom = true;
}
}
if (!AppInfo.hasLowImageBandwidth) { if (!AppInfo.hasLowImageBandwidth) {
AppInfo.enableStudioTabs = true; AppInfo.enableStudioTabs = true;
@ -1703,6 +1677,15 @@ var AppInfo = {};
} }
} }
if (!$.browser.tv && !isIOS) {
// Don't enable headroom on mobile chrome when the address bar is visible
// With two bars hiding and showing it gets a little awkward
if (AppInfo.isNativeApp || window.navigator.standalone || !$.browser.mobile) {
AppInfo.enableHeadRoom = true;
}
}
AppInfo.enableUserImage = true; AppInfo.enableUserImage = true;
AppInfo.hasPhysicalVolumeButtons = isCordova || isMobile; AppInfo.hasPhysicalVolumeButtons = isCordova || isMobile;
@ -2063,6 +2046,12 @@ var AppInfo = {};
$.extend(AppInfo, Dashboard.getAppInfo(appName, deviceId, deviceName)); $.extend(AppInfo, Dashboard.getAppInfo(appName, deviceId, deviceName));
$(document).on('WebComponentsReady', function () { $(document).on('WebComponentsReady', function () {
var drawer = $('.mainDrawerPanel').removeClass('mainDrawerPanelPreInit')[0];
drawer.forceNarrow = true;
drawer.drawerWidth = screen.availWidth >= 330 ? "310px" : "270px";
drawer.transition = true;
if (Dashboard.isConnectMode()) { if (Dashboard.isConnectMode()) {
require(['appstorage'], function () { require(['appstorage'], function () {
@ -2154,7 +2143,7 @@ $(document).on('pagecreate', ".page", function () {
current = newTheme; current = newTheme;
} }
if (current == 'b') { if (current == 'b' && !$.browser.mobile) {
$(document.body).addClass('darkScrollbars'); $(document.body).addClass('darkScrollbars');
} else { } else {
$(document.body).removeClass('darkScrollbars'); $(document.body).removeClass('darkScrollbars');

4
dashboard-ui/themes/ios.css
View file

@ -81,10 +81,6 @@ h1, h1 a {
font-weight: 400; font-weight: 400;
} }
.librarySidebarLinks a {
font-weight: 400 !important;
}
.libraryMenuButtonText { .libraryMenuButtonText {
font-weight: 500 !important; font-weight: 500 !important;
position: relative; position: relative;

19
dashboard-ui/thirdparty/emby-icons.html vendored
View file

@ -64,6 +64,25 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
<g id="tablet-android"><path d="M18 0H6C4.34 0 3 1.34 3 3v18c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V3c0-1.66-1.34-3-3-3zm-4 22h-4v-1h4v1zm5.25-3H4.75V3h14.5v16z" /></g> <g id="tablet-android"><path d="M18 0H6C4.34 0 3 1.34 3 3v18c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V3c0-1.66-1.34-3-3-3zm-4 22h-4v-1h4v1zm5.25-3H4.75V3h14.5v16z" /></g>
<g id="view-comfy"><path d="M3 9h4V5H3v4zm0 5h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zM8 9h4V5H8v4zm5-4v4h4V5h-4zm5 9h4v-4h-4v4zM3 19h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zm5 0h4v-4h-4v4zm0-14v4h4V5h-4z" /></g> <g id="view-comfy"><path d="M3 9h4V5H3v4zm0 5h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zM8 9h4V5H8v4zm5-4v4h4V5h-4zm5 9h4v-4h-4v4zM3 19h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zm5 0h4v-4h-4v4zm0-14v4h4V5h-4z" /></g>
<g id="videocam"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" /></g> <g id="videocam"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" /></g>
<g id="schedule"><path fill-opacity=".9" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zM12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" /></g>
<g id="help"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" /></g>
<g id="tv"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z" /></g>
<g id="live-tv"><path d="M21 6h-7.59l3.29-3.29L16 2l-4 4-4-4-.71.71L10.59 6H3c-1.1 0-2 .89-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.11-.9-2-2-2zm0 14H3V8h18v12zM9 10v8l7-4z" /></g>
<g id="notifications"><path d="M11.5 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6.5-6v-5.5c0-3.07-2.13-5.64-5-6.32V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5v.68c-2.87.68-5 3.25-5 6.32V16l-2 2v1h17v-1l-2-2z" /></g>
<g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z" /></g>
<g id="play-circle-filled"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z" /></g>
<g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" /></g>
<g id="details"><path d="M3 4l9 16 9-16H3zm3.38 2h11.25L12 16 6.38 6z" /></g>
<g id="video-library"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z" /></g>
<g id="people"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" /></g>
<g id="tablet"><path d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 1.99-.9 1.99-2L23 6c0-1.1-.9-2-2-2zm-2 14H5V6h14v12z" /></g>
<g id="dashboard"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" /></g>
<g id="insert-chart"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z" /></g>
<g id="inbox"><path d="M19 3H4.99c-1.1 0-1.98.9-1.98 2L3 19c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.34 3-3 3s-3-1.34-3-3H4.99V5H19v10zm-3-5h-2V7h-4v3H8l4 4 4-4z" /></g>
<g id="photo-library"><path d="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-11-4l2.03 2.71L16 11l4 5H8l3-4zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z" /></g>
<g id="view-list"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z" /></g>
<g id="library-music"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 5h-3v5.5c0 1.38-1.12 2.5-2.5 2.5S10 13.88 10 12.5s1.12-2.5 2.5-2.5c.57 0 1.08.19 1.5.51V5h4v2zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z" /></g>
<g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></g>
</defs> </defs>
</svg> </svg>
</iron-iconset-svg> </iron-iconset-svg>

166
dashboard-ui/vulcanize-out.html
View file

@ -12853,8 +12853,8 @@ The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/ */
:host { :host {
display: block; display: block;
position: absolute; position: absolute;
@ -12871,16 +12871,16 @@ iron-selector > #drawer {
left: 0; left: 0;
height: 100%; height: 100%;
background-color: white; background-color: white;
will-change: transform;
box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box;
@apply(--paper-drawer-panel-drawer-container); @apply(--paper-drawer-panel-drawer-container);
} }
.transition > #drawer { .transition > #drawer {
transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s; transition: -webkit-transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
transition: transform ease-in-out 0.3s, width ease-in-out 0.3s; transition: transform ease-in-out 0.3s, width ease-in-out 0.3s, visibility 0.3s;
} }
.left-drawer > #drawer { .left-drawer > #drawer {
@ -12935,6 +12935,10 @@ iron-selector > #main {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.narrow-layout > #drawer {
will-change: transform;
}
.narrow-layout > #drawer.iron-selected { .narrow-layout > #drawer.iron-selected {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
} }
@ -12954,19 +12958,24 @@ iron-selector > #main {
.right-drawer.narrow-layout > #drawer:not(.iron-selected) { .right-drawer.narrow-layout > #drawer:not(.iron-selected) {
left: auto; left: auto;
visibility: hidden;
-webkit-transform: translateX(100%); -webkit-transform: translateX(100%);
transform: translateX(100%); transform: translateX(100%);
} }
.right-drawer.narrow-layout.dragging > #drawer:not(.iron-selected),
.right-drawer.narrow-layout.peeking > #drawer:not(.iron-selected) {
visibility: visible;
}
.narrow-layout > #main { .narrow-layout > #main {
left: 0 !important;
padding: 0; padding: 0;
} }
.right-drawer.narrow-layout > #main { .right-drawer.narrow-layout > #main {
left: 0; left: 0;
right: 0; right: 0;
padding: 0;
} }
.narrow-layout > #main:not(.iron-selected) > #scrim, .narrow-layout > #main:not(.iron-selected) > #scrim,
@ -12980,8 +12989,9 @@ iron-selector > #main {
min-height: 100%; min-height: 100%;
left: 0; left: 0;
right: 0; right: 0;
box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box;
} }
iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] { iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
@ -12993,7 +13003,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
<iron-media-query id="mq" on-query-matches-changed="_onQueryMatchesChanged" query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]"> <iron-media-query id="mq" on-query-matches-changed="_onQueryMatchesChanged" query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">
</iron-media-query> </iron-media-query>
<iron-selector attr-for-selected="id" class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer)]]" activate-event="" selected="[[selected]]"> <iron-selector attr-for-selected="id" class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer, peeking)]]" activate-event="" selected="[[selected]]">
<div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]"> <div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]">
<content select="[main]"></content> <content select="[main]"></content>
@ -13011,7 +13021,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
<script> <script>
(function() { (function () {
'use strict'; 'use strict';
@ -13042,17 +13052,24 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
*/ */
/** /**
* Fired when the selected panel changes. * Fired when the a panel is selected.
* *
* Listening for this event is an alternative to observing changes in the `selected` attribute. * Listening for this event is an alternative to observing changes in the `selected` attribute.
* This event is fired both when a panel is selected and deselected. * This event is fired both when a panel is selected.
* The `isSelected` detail property contains the selection state.
* *
* @event paper-select {{isSelected: boolean, item: Object}} detail - * @event iron-select {{item: Object}} detail -
* isSelected: True for selection and false for deselection.
* item: The panel that the event refers to. * item: The panel that the event refers to.
*/ */
/**
* Fired when a panel is deselected.
*
* Listening for this event is an alternative to observing changes in the `selected` attribute.
* This event is fired both when a panel is deselected.
*
* @event iron-deselect {{item: Object}} detail -
* item: The panel that the event refers to.
*/
properties: { properties: {
/** /**
@ -13120,7 +13137,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
*/ */
hasTransform: { hasTransform: {
type: Boolean, type: Boolean,
value: function() { value: function () {
return 'transform' in this.style; return 'transform' in this.style;
} }
}, },
@ -13130,7 +13147,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
*/ */
hasWillChange: { hasWillChange: {
type: Boolean, type: Boolean,
value: function() { value: function () {
return 'willChange' in this.style; return 'willChange' in this.style;
} }
}, },
@ -13219,7 +13236,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
* *
* @method togglePanel * @method togglePanel
*/ */
togglePanel: function() { togglePanel: function () {
if (this._isMainSelected()) { if (this._isMainSelected()) {
this.openDrawer(); this.openDrawer();
} else { } else {
@ -13232,8 +13249,9 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
* *
* @method openDrawer * @method openDrawer
*/ */
openDrawer: function() { openDrawer: function () {
this.selected = 'drawer'; this.selected = 'drawer';
this.fire('paper-drawer-panel-open');
}, },
/** /**
@ -13241,71 +13259,71 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
* *
* @method closeDrawer * @method closeDrawer
*/ */
closeDrawer: function() { closeDrawer: function () {
this.selected = 'main'; this.selected = 'main';
this.fire('paper-drawer-panel-close');
}, },
ready: function() { ready: function () {
// Avoid transition at the beginning e.g. page loads and enable // Avoid transition at the beginning e.g. page loads and enable
// transitions only after the element is rendered and ready. // transitions only after the element is rendered and ready.
this.transition = true; this.transition = true;
}, },
_computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer) { _computeIronSelectorClass: function (narrow, transition, dragging, rightDrawer, peeking) {
return classNames({ return classNames({
dragging: dragging, dragging: dragging,
'narrow-layout': narrow, 'narrow-layout': narrow,
'right-drawer': rightDrawer, 'right-drawer': rightDrawer,
'left-drawer': !rightDrawer, 'left-drawer': !rightDrawer,
transition: transition transition: transition,
peeking: peeking
}); });
}, },
_computeDrawerStyle: function(drawerWidth) { _computeDrawerStyle: function (drawerWidth) {
return 'width:' + drawerWidth + ';'; return 'width:' + drawerWidth + ';';
}, },
_computeMainStyle: function(narrow, rightDrawer, drawerWidth) { _computeMainStyle: function (narrow, rightDrawer, drawerWidth) {
var style = ''; var style = '';
style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';'; style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
if (rightDrawer) { if (rightDrawer) {
style += 'right:' + (narrow ? '' : drawerWidth) + ';'; style += 'right:' + (narrow ? '' : drawerWidth) + ';';
} else {
style += 'right:;';
} }
return style; return style;
}, },
_computeMediaQuery: function(forceNarrow, responsiveWidth) { _computeMediaQuery: function (forceNarrow, responsiveWidth) {
return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')'; return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
}, },
_computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) { _computeSwipeOverlayHidden: function (narrow, disableEdgeSwipe) {
return !narrow || disableEdgeSwipe; return !narrow || disableEdgeSwipe;
}, },
_onTrack: function(e) { _onTrack: function (event) {
if (sharedPanel && this !== sharedPanel) { if (sharedPanel && this !== sharedPanel) {
return; return;
} }
switch (e.detail.state) { switch (event.detail.state) {
case 'start': case 'start':
this._trackStart(e); this._trackStart(event);
break; break;
case 'track': case 'track':
this._trackX(e); this._trackX(event);
break; break;
case 'end': case 'end':
this._trackEnd(e); this._trackEnd(event);
break; break;
} }
}, },
_responsiveChange: function(narrow) { _responsiveChange: function (narrow) {
this._setNarrow(narrow); this._setNarrow(narrow);
if (this.narrow) { if (this.narrow) {
@ -13313,56 +13331,58 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
} }
this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all'); this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
this.fire('paper-responsive-change', {narrow: this.narrow}); this.fire('paper-responsive-change', { narrow: this.narrow });
}, },
_onQueryMatchesChanged: function(e) { _onQueryMatchesChanged: function (event) {
this._responsiveChange(e.detail.value); this._responsiveChange(event.detail.value);
}, },
_forceNarrowChanged: function() { _forceNarrowChanged: function () {
// set the narrow mode only if we reached the `responsiveWidth` // set the narrow mode only if we reached the `responsiveWidth`
this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches); this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches);
}, },
_swipeAllowed: function() { _swipeAllowed: function () {
return this.narrow && !this.disableSwipe; return this.narrow && !this.disableSwipe;
}, },
_isMainSelected: function() { _isMainSelected: function () {
return this.selected === 'main'; return this.selected === 'main';
}, },
_startEdgePeek: function() { _startEdgePeek: function () {
this.width = this.$.drawer.offsetWidth; this.width = this.$.drawer.offsetWidth;
this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ? this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ?
-this.edgeSwipeSensitivity : this.edgeSwipeSensitivity)); -this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
this._setPeeking(true); this._setPeeking(true);
}, },
_stopEdgePeek: function() { _stopEdgePeek: function () {
if (this.peeking) { if (this.peeking) {
this._setPeeking(false); this._setPeeking(false);
this._moveDrawer(null); this._moveDrawer(null);
} }
}, },
_downHandler: function(e) { _downHandler: function (event) {
if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) && !sharedPanel) { if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(event) && !sharedPanel) {
this._startEdgePeek(); this._startEdgePeek();
// cancel selection
event.preventDefault();
// grab this panel // grab this panel
sharedPanel = this; sharedPanel = this;
} }
}, },
_upHandler: function() { _upHandler: function () {
this._stopEdgePeek(); this._stopEdgePeek();
// release the panel // release the panel
sharedPanel = null; sharedPanel = null;
}, },
_onTap: function(e) { _onTap: function (event) {
var targetElement = Polymer.dom(e).localTarget; var targetElement = Polymer.dom(event).localTarget;
var isTargetToggleElement = targetElement && var isTargetToggleElement = targetElement &&
this.drawerToggleAttribute && this.drawerToggleAttribute &&
targetElement.hasAttribute(this.drawerToggleAttribute); targetElement.hasAttribute(this.drawerToggleAttribute);
@ -13372,8 +13392,8 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
} }
}, },
_isEdgeTouch: function(e) { _isEdgeTouch: function (event) {
var x = e.detail.x; var x = event.detail.x;
return !this.disableEdgeSwipe && this._swipeAllowed() && return !this.disableEdgeSwipe && this._swipeAllowed() &&
(this.rightDrawer ? (this.rightDrawer ?
@ -13381,7 +13401,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
x <= this.edgeSwipeSensitivity); x <= this.edgeSwipeSensitivity);
}, },
_trackStart: function(event) { _trackStart: function (event) {
if (this._swipeAllowed()) { if (this._swipeAllowed()) {
sharedPanel = this; sharedPanel = this;
this._setDragging(true); this._setDragging(true);
@ -13397,7 +13417,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
} }
}, },
_translateXForDeltaX: function(deltaX) { _translateXForDeltaX: function (deltaX) {
var isMain = this._isMainSelected(); var isMain = this._isMainSelected();
if (this.rightDrawer) { if (this.rightDrawer) {
@ -13407,9 +13427,9 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
} }
}, },
_trackX: function(e) { _trackX: function (event) {
if (this.dragging) { if (this.dragging) {
var dx = e.detail.dx; var dx = event.detail.dx;
if (this.peeking) { if (this.peeking) {
if (Math.abs(dx) <= this.edgeSwipeSensitivity) { if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
@ -13423,9 +13443,9 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
} }
}, },
_trackEnd: function(e) { _trackEnd: function (event) {
if (this.dragging) { if (this.dragging) {
var xDirection = e.detail.dx > 0; var xDirection = event.detail.dx > 0;
this._setDragging(false); this._setDragging(false);
this.transition = true; this.transition = true;
@ -13440,7 +13460,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
} }
}, },
_transformForTranslateX: function(translateX) { _transformForTranslateX: function (translateX) {
if (translateX === null) { if (translateX === null) {
return ''; return '';
} }
@ -13449,22 +13469,15 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
'translate3d(' + translateX + 'px, 0, 0)'; 'translate3d(' + translateX + 'px, 0, 0)';
}, },
_moveDrawer: function(translateX) { _moveDrawer: function (translateX) {
var s = this.$.drawer.style; this.transform(this._transformForTranslateX(translateX), this.$.drawer);
if (this.hasTransform) {
s.transform = this._transformForTranslateX(translateX);
} else {
s.webkitTransform = this._transformForTranslateX(translateX);
}
} }
}); });
}()); }());
</script> </script><iron-iconset-svg name="icons" size="24">
<iron-iconset-svg name="icons" size="24">
<svg> <svg>
<defs> <defs>
<g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g> <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
@ -13495,6 +13508,25 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
<g id="tablet-android"><path d="M18 0H6C4.34 0 3 1.34 3 3v18c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V3c0-1.66-1.34-3-3-3zm-4 22h-4v-1h4v1zm5.25-3H4.75V3h14.5v16z"></path></g> <g id="tablet-android"><path d="M18 0H6C4.34 0 3 1.34 3 3v18c0 1.66 1.34 3 3 3h12c1.66 0 3-1.34 3-3V3c0-1.66-1.34-3-3-3zm-4 22h-4v-1h4v1zm5.25-3H4.75V3h14.5v16z"></path></g>
<g id="view-comfy"><path d="M3 9h4V5H3v4zm0 5h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zM8 9h4V5H8v4zm5-4v4h4V5h-4zm5 9h4v-4h-4v4zM3 19h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zm5 0h4v-4h-4v4zm0-14v4h4V5h-4z"></path></g> <g id="view-comfy"><path d="M3 9h4V5H3v4zm0 5h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zM8 9h4V5H8v4zm5-4v4h4V5h-4zm5 9h4v-4h-4v4zM3 19h4v-4H3v4zm5 0h4v-4H8v4zm5 0h4v-4h-4v4zm5 0h4v-4h-4v4zm0-14v4h4V5h-4z"></path></g>
<g id="videocam"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"></path></g> <g id="videocam"><path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"></path></g>
<g id="schedule"><path fill-opacity=".9" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zM12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></g>
<g id="help"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"></path></g>
<g id="tv"><path d="M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.1-.9-2-2-2zm0 14H3V5h18v12z"></path></g>
<g id="live-tv"><path d="M21 6h-7.59l3.29-3.29L16 2l-4 4-4-4-.71.71L10.59 6H3c-1.1 0-2 .89-2 2v12c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.11-.9-2-2-2zm0 14H3V8h18v12zM9 10v8l7-4z"></path></g>
<g id="notifications"><path d="M11.5 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6.5-6v-5.5c0-3.07-2.13-5.64-5-6.32V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5v.68c-2.87.68-5 3.25-5 6.32V16l-2 2v1h17v-1l-2-2z"></path></g>
<g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"></path></g>
<g id="play-circle-filled"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5v-9l6 4.5-6 4.5z"></path></g>
<g id="folder"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></g>
<g id="details"><path d="M3 4l9 16 9-16H3zm3.38 2h11.25L12 16 6.38 6z"></path></g>
<g id="video-library"><path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z"></path></g>
<g id="people"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path></g>
<g id="tablet"><path d="M21 4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h18c1.1 0 1.99-.9 1.99-2L23 6c0-1.1-.9-2-2-2zm-2 14H5V6h14v12z"></path></g>
<g id="dashboard"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path></g>
<g id="insert-chart"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"></path></g>
<g id="inbox"><path d="M19 3H4.99c-1.1 0-1.98.9-1.98 2L3 19c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 12h-4c0 1.66-1.34 3-3 3s-3-1.34-3-3H4.99V5H19v10zm-3-5h-2V7h-4v3H8l4 4 4-4z"></path></g>
<g id="photo-library"><path d="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-11-4l2.03 2.71L16 11l4 5H8l3-4zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"></path></g>
<g id="view-list"><path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"></path></g>
<g id="library-music"><path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 5h-3v5.5c0 1.38-1.12 2.5-2.5 2.5S10 13.88 10 12.5s1.12-2.5 2.5-2.5c.57 0 1.08.19 1.5.51V5h4v2zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6z"></path></g>
<g id="home"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></g>
</defs> </defs>
</svg> </svg>
</iron-iconset-svg> </iron-iconset-svg>