mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update icons
This commit is contained in:
Luke Pulverenti
parent
a12fb807ef
commit
0bc95efe7e
61 changed files with 2966 additions and 320 deletions
40
dashboard-ui/bower_components/iron-media-query/.bower.json
vendored
Normal file
40
dashboard-ui/bower_components/iron-media-query/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
{
|
||||
"name": "iron-media-query",
|
||||
"version": "1.0.2",
|
||||
"description": "Lets you bind to a CSS media query",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"media"
|
||||
],
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-media-query"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/iron-media-query",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.2",
|
||||
"web-component-tester": "*",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "34abf0a3b8bf9e9e478352dbb3d9e6a76bf3669a"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-media-query.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-media-query"
|
||||
}
|
||||
1
dashboard-ui/bower_components/iron-media-query/.gitignore
vendored
Normal file
1
dashboard-ui/bower_components/iron-media-query/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
bower_components
|
||||
31
dashboard-ui/bower_components/iron-media-query/bower.json
vendored
Normal file
31
dashboard-ui/bower_components/iron-media-query/bower.json
vendored
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "iron-media-query",
|
||||
"version": "1.0.2",
|
||||
"description": "Lets you bind to a CSS media query",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"media"
|
||||
],
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-media-query"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/iron-media-query",
|
||||
"ignore": [],
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.2",
|
||||
"web-component-tester": "*",
|
||||
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
}
|
||||
45
dashboard-ui/bower_components/iron-media-query/demo/index.html
vendored
Normal file
45
dashboard-ui/bower_components/iron-media-query/demo/index.html
vendored
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!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-media-query demo</title>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-styles/paper-styles.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="../iron-media-query.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="vertical-section vertical-section-container centered">
|
||||
<h1><iron-media-query></h1>
|
||||
|
||||
<template is="dom-bind">
|
||||
<iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query>
|
||||
|
||||
<template is="dom-if" if="{{queryMatches}}">
|
||||
<p>The viewport’s width is greater than <code>600px</code></p>
|
||||
</template>
|
||||
|
||||
<template is="dom-if" if="{{!queryMatches}}">
|
||||
<p>The viewport’s width is less than <code>600px</code></p>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
29
dashboard-ui/bower_components/iron-media-query/hero.svg
vendored
Normal file
29
dashboard-ui/bower_components/iron-media-query/hero.svg
vendored
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<?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">
|
||||
<path d="M173,99H91V41h82V99z M93,97h78V43H93V97z"/>
|
||||
<path d="M77,89H51V42h26V89z M53,87h22V44H53V87z"/>
|
||||
<rect x="52" y="56" width="24" height="2"/>
|
||||
<rect x="92" y="58" width="80" height="2"/>
|
||||
<path d="M65.3,42h-2c0-10,8.7-18.7,18.7-18.7v2C73,25.3,65.3,33,65.3,42z"/>
|
||||
<path d="M105.3,42h-2c0-9-7.3-16.7-16.3-16.7v-2C97,23.3,105.3,32,105.3,42z"/>
|
||||
<circle cx="84.3" cy="24.3" r="4"/>
|
||||
<circle cx="69.3" cy="80.3" r="4"/>
|
||||
<circle cx="160.3" cy="59.3" r="4"/>
|
||||
<path d="M49,41v49c0,1.1,0.9,2,2,2h26c1.1,0,2-0.9,2-2V41c0-1.1-0.9-2-2-2H51C49.9,39,49,39.9,49,41z M76,88H52V43h24V88z"/>
|
||||
<path d="M88.9,40.7v59c0,1.1,0.9,2,2,2h82c1.1,0,2-0.9,2-2v-59c0-1.1-0.9-2-2-2h-82C89.8,38.7,88.9,39.6,88.9,40.7z M172,98H93V42
|
||||
h79V98z"/>
|
||||
<g id="ic_x5F_add_x0D_">
|
||||
</g>
|
||||
</g>
|
||||
<g id="Guides">
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
29
dashboard-ui/bower_components/iron-media-query/index.html
vendored
Normal file
29
dashboard-ui/bower_components/iron-media-query/index.html
vendored
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
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
|
||||
The complete set of authors may be found at http://polymer.github.io/AUTHORS
|
||||
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
|
||||
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
|
||||
-->
|
||||
<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-media-query</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>
|
||||
77
dashboard-ui/bower_components/iron-media-query/iron-media-query.html
vendored
Normal file
77
dashboard-ui/bower_components/iron-media-query/iron-media-query.html
vendored
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<!--
|
||||
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">
|
||||
|
||||
<!--
|
||||
`iron-media-query` can be used to data bind to a CSS media query.
|
||||
The `query` property is a bare CSS media query.
|
||||
The `query-matches` property is a boolean representing whether the page matches that media query.
|
||||
|
||||
Example:
|
||||
|
||||
<iron-media-query query="(min-width: 600px)" query-matches="{{queryMatches}}"></iron-media-query>
|
||||
|
||||
@group Iron Elements
|
||||
@demo demo/index.html
|
||||
@hero hero.svg
|
||||
@element iron-media-query
|
||||
-->
|
||||
|
||||
<script>
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'iron-media-query',
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* The Boolean return value of the media query.
|
||||
*/
|
||||
queryMatches: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The CSS media query to evaluate.
|
||||
*/
|
||||
query: {
|
||||
type: String,
|
||||
observer: 'queryChanged'
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
created: function() {
|
||||
this._mqHandler = this.queryHandler.bind(this);
|
||||
},
|
||||
|
||||
queryChanged: function(query) {
|
||||
if (this._mq) {
|
||||
this._mq.removeListener(this._mqHandler);
|
||||
}
|
||||
if (query[0] !== '(') {
|
||||
query = '(' + query + ')';
|
||||
}
|
||||
this._mq = window.matchMedia(query);
|
||||
this._mq.addListener(this._mqHandler);
|
||||
this.queryHandler(this._mq);
|
||||
},
|
||||
|
||||
queryHandler: function(mq) {
|
||||
this._setQueryMatches(mq.matches);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
71
dashboard-ui/bower_components/iron-media-query/test/basic.html
vendored
Normal file
71
dashboard-ui/bower_components/iron-media-query/test/basic.html
vendored
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
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-media-query-basic</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<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="../iron-media-query.html">
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="basic">
|
||||
<template>
|
||||
<iron-media-query></iron-media-query>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('basic', function() {
|
||||
var mq;
|
||||
|
||||
suite('set query with different values', function() {
|
||||
setup(function () {
|
||||
mq = fixture('basic');
|
||||
});
|
||||
|
||||
test('small min-width value', function() {
|
||||
mq.query = '(min-width: 1px)';
|
||||
assert.equal(mq.queryMatches, true);
|
||||
});
|
||||
|
||||
test('large min-width value', function() {
|
||||
mq.query = '(min-width: 10000px)';
|
||||
assert.equal(mq.queryMatches, false);
|
||||
});
|
||||
|
||||
test('small max-width value', function() {
|
||||
mq.query = '(max-width: 1px)';
|
||||
assert.equal(mq.queryMatches, false);
|
||||
});
|
||||
|
||||
test('large max-width value', function() {
|
||||
mq.query = '(max-width: 10000px)';
|
||||
assert.equal(mq.queryMatches, true);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
dashboard-ui/bower_components/iron-media-query/test/index.html
vendored
Normal file
30
dashboard-ui/bower_components/iron-media-query/test/index.html
vendored
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
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">
|
||||
<title>Tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>
|
||||
|
||||
WCT.loadSuites([
|
||||
'basic.html'
|
||||
]);
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
43
dashboard-ui/bower_components/paper-drawer-panel/.bower.json
vendored
Normal file
43
dashboard-ui/bower_components/paper-drawer-panel/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
{
|
||||
"name": "paper-drawer-panel",
|
||||
"version": "1.0.2",
|
||||
"description": "A responsive drawer panel",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"drawer",
|
||||
"responsive",
|
||||
"layout"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-drawer-panel.git"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/paper-drawer-panel",
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0",
|
||||
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
|
||||
"iron-media-query": "PolymerElements/iron-media-query#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"paper-button": "PolymerElements/paper-button#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"_release": "1.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "691739c877914f7231eaca16b724bdca295dfe8d"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-drawer-panel.git",
|
||||
"_target": "~1.0.2",
|
||||
"_originalSource": "PolymerElements/paper-drawer-panel",
|
||||
"_direct": true
|
||||
}
|
||||
1
dashboard-ui/bower_components/paper-drawer-panel/.gitignore
vendored
Normal file
1
dashboard-ui/bower_components/paper-drawer-panel/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
bower_components/
|
||||
33
dashboard-ui/bower_components/paper-drawer-panel/bower.json
vendored
Normal file
33
dashboard-ui/bower_components/paper-drawer-panel/bower.json
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{
|
||||
"name": "paper-drawer-panel",
|
||||
"version": "1.0.2",
|
||||
"description": "A responsive drawer panel",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"polymer",
|
||||
"drawer",
|
||||
"responsive",
|
||||
"layout"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-drawer-panel.git"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/paper-drawer-panel",
|
||||
"dependencies": {
|
||||
"polymer": "Polymer/polymer#^1.0.0",
|
||||
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
|
||||
"iron-media-query": "PolymerElements/iron-media-query#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
|
||||
"paper-button": "PolymerElements/paper-button#^1.0.0",
|
||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
}
|
||||
}
|
||||
85
dashboard-ui/bower_components/paper-drawer-panel/demo/index.html
vendored
Normal file
85
dashboard-ui/bower_components/paper-drawer-panel/demo/index.html
vendored
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
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-drawer-panel demo</title>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-styles/paper-styles.html">
|
||||
<link rel="stylesheet" href="../../paper-styles/demo.css">
|
||||
|
||||
<link rel="import" href="../../paper-button/paper-button.html">
|
||||
<link rel="import" href="../paper-drawer-panel.html">
|
||||
|
||||
<style is="custom-style">
|
||||
|
||||
#paperDrawerPanel [main] {
|
||||
background-color: var(--google-grey-100);
|
||||
}
|
||||
|
||||
#paperDrawerPanel [drawer] {
|
||||
border-right: 1px solid var(--google-grey-300);
|
||||
}
|
||||
|
||||
#paperDrawerPanel[right-drawer] [drawer] {
|
||||
border-left: 1px solid var(--google-grey-300);
|
||||
}
|
||||
|
||||
paper-button {
|
||||
color: white;
|
||||
margin: 10px;
|
||||
background-color: var(--google-blue-700);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body unresolved>
|
||||
|
||||
<paper-drawer-panel id="paperDrawerPanel">
|
||||
<div drawer></div>
|
||||
<div main>
|
||||
<div>
|
||||
<paper-button onclick="flipDrawer()" raised>flip drawer</paper-button>
|
||||
</div>
|
||||
<div>
|
||||
<paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
|
||||
</div>
|
||||
</div>
|
||||
</paper-drawer-panel>
|
||||
|
||||
<script>
|
||||
(function(global) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var DRAWER_ATTR = 'right-drawer';
|
||||
|
||||
var pdp = document.getElementById('paperDrawerPanel');
|
||||
|
||||
global.flipDrawer = function() {
|
||||
if (pdp.hasAttribute(DRAWER_ATTR)) {
|
||||
pdp.removeAttribute(DRAWER_ATTR);
|
||||
} else {
|
||||
pdp.setAttribute(DRAWER_ATTR, '');
|
||||
}
|
||||
}
|
||||
|
||||
}(this));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
21
dashboard-ui/bower_components/paper-drawer-panel/hero.svg
vendored
Normal file
21
dashboard-ui/bower_components/paper-drawer-panel/hero.svg
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<?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">
|
||||
<path d="M175,102H61V24h114V102z M63,100h110V26H63V100z"/>
|
||||
<path d="M91,102H61V24h30V102z M63,100h26V26H63V100z"/>
|
||||
<circle cx="123" cy="63" r="4"/>
|
||||
<rect x="90" y="62" width="33" height="2"/>
|
||||
<g id="ic_x5F_add_x0D_">
|
||||
</g>
|
||||
</g>
|
||||
<g id="Guides">
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 828 B |
29
dashboard-ui/bower_components/paper-drawer-panel/index.html
vendored
Normal file
29
dashboard-ui/bower_components/paper-drawer-panel/index.html
vendored
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<!--
|
||||
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-drawer-panel</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>
|
||||
142
dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.css
vendored
Normal file
142
dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.css
vendored
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
/**
|
||||
@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
|
||||
|
||||
*/
|
||||
:host {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
iron-selector > #drawer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
will-change: transform;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
|
||||
@apply(--paper-drawer-panel-drawer-container);
|
||||
}
|
||||
|
||||
.transition > #drawer {
|
||||
transition: -webkit-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;
|
||||
}
|
||||
|
||||
.left-drawer > #drawer {
|
||||
@apply(--paper-drawer-panel-left-drawer-container);
|
||||
}
|
||||
|
||||
.right-drawer > #drawer {
|
||||
left: auto;
|
||||
right: 0;
|
||||
|
||||
@apply(--paper-drawer-panel-right-drawer-container);
|
||||
}
|
||||
|
||||
iron-selector > #main {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
@apply(--paper-drawer-panel-main-container);
|
||||
}
|
||||
|
||||
.transition > #main {
|
||||
transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
.right-drawer > #main {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.right-drawer.transition > #main {
|
||||
transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
|
||||
}
|
||||
|
||||
#main > ::content > [main] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#drawer > ::content > [drawer] {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#scrim {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.narrow-layout > #drawer.iron-selected {
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.right-drawer.narrow-layout > #drawer.iron-selected {
|
||||
box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.narrow-layout > #drawer > ::content > [drawer] {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.left-drawer.narrow-layout > #drawer:not(.iron-selected) {
|
||||
-webkit-transform: translateX(-100%);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.right-drawer.narrow-layout > #drawer:not(.iron-selected) {
|
||||
left: auto;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.narrow-layout > #main {
|
||||
left: 0 !important;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.right-drawer.narrow-layout > #main {
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.narrow-layout > #main:not(.iron-selected) > #scrim,
|
||||
.dragging > #main > #scrim {
|
||||
visibility: visible;
|
||||
opacity: var(--paper-drawer-panel-scrim-opacity, 1);
|
||||
}
|
||||
|
||||
.narrow-layout > #main > * {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
|
||||
iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
|
||||
display: none;
|
||||
}
|
||||
591
dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.html
vendored
Normal file
591
dashboard-ui/bower_components/paper-drawer-panel/paper-drawer-panel.html
vendored
Normal file
|
|
@ -0,0 +1,591 @@
|
|||
<!--
|
||||
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-media-query/iron-media-query.html">
|
||||
<link rel="import" href="../iron-selector/iron-selector.html">
|
||||
|
||||
<!--
|
||||
`paper-drawer-panel` contains a drawer panel and a main panel. The drawer
|
||||
and the main panel are side-by-side with drawer on the left. When the browser
|
||||
window size is smaller than the `responsiveWidth`, `paper-drawer-panel`
|
||||
changes to narrow layout. In narrow layout, the drawer will be stacked on top
|
||||
of the main panel. The drawer will slide in/out to hide/reveal the main
|
||||
panel.
|
||||
|
||||
Use the attribute `drawer` to indicate that the element is the drawer panel and
|
||||
`main` to indicate that the element is the main panel.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-drawer-panel>
|
||||
<div drawer> Drawer panel... </div>
|
||||
<div main> Main panel... </div>
|
||||
</paper-drawer-panel>
|
||||
|
||||
The drawer and the main panels are not scrollable. You can set CSS overflow
|
||||
property on the elements to make them scrollable or use `paper-header-panel`.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-drawer-panel>
|
||||
<paper-header-panel drawer>
|
||||
<paper-toolbar></paper-toolbar>
|
||||
<div> Drawer content... </div>
|
||||
</paper-header-panel>
|
||||
<paper-header-panel main>
|
||||
<paper-toolbar></paper-toolbar>
|
||||
<div> Main content... </div>
|
||||
</paper-header-panel>
|
||||
</paper-drawer-panel>
|
||||
|
||||
An element that should toggle the drawer will automatically do so if it's
|
||||
given the `paper-drawer-toggle` attribute. Also this element will automatically
|
||||
be hidden in wide layout.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-drawer-panel>
|
||||
<paper-header-panel drawer>
|
||||
<paper-toolbar>
|
||||
<div>Application</div>
|
||||
</paper-toolbar>
|
||||
<div> Drawer content... </div>
|
||||
</paper-header-panel>
|
||||
<paper-header-panel main>
|
||||
<paper-toolbar>
|
||||
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
|
||||
<div>Title</div>
|
||||
</paper-toolbar>
|
||||
<div> Main content... </div>
|
||||
</paper-header-panel>
|
||||
</paper-drawer-panel>
|
||||
|
||||
To position the drawer to the right, add `right-drawer` attribute.
|
||||
|
||||
<paper-drawer-panel right-drawer>
|
||||
<div drawer> Drawer panel... </div>
|
||||
<div main> Main panel... </div>
|
||||
</paper-drawer-panel>
|
||||
|
||||
Styling paper-drawer-panel:
|
||||
|
||||
To change the main container:
|
||||
paper-drawer-panel {
|
||||
--paper-drawer-panel-main-container: {
|
||||
background-color: gray;
|
||||
};
|
||||
}
|
||||
|
||||
To change the drawer container when it's in the left side:
|
||||
paper-drawer-panel {
|
||||
--paper-drawer-panel-left-drawer-container: {
|
||||
background-color: white;
|
||||
};
|
||||
}
|
||||
|
||||
To change the drawer container when it's in the right side:
|
||||
|
||||
paper-drawer-panel {
|
||||
--paper-drawer-panel-right-drawer-container: {
|
||||
background-color: white;
|
||||
};
|
||||
}
|
||||
|
||||
@group Paper elements
|
||||
@element paper-drawer-panel
|
||||
@demo demo/index.html
|
||||
@hero hero.svg
|
||||
-->
|
||||
|
||||
<dom-module id="paper-drawer-panel">
|
||||
<link rel="import" type="css" href="paper-drawer-panel.css">
|
||||
|
||||
<template>
|
||||
<iron-media-query
|
||||
id="mq"
|
||||
on-query-matches-changed="_onQueryMatchesChanged"
|
||||
query="[[_computeMediaQuery(forceNarrow, responsiveWidth)]]">
|
||||
</iron-media-query>
|
||||
|
||||
<iron-selector
|
||||
attr-for-selected="id"
|
||||
class$="[[_computeIronSelectorClass(narrow, transition, dragging, rightDrawer)]]"
|
||||
activate-event=""
|
||||
selected="[[selected]]">
|
||||
|
||||
<div id="main" style$="[[_computeMainStyle(narrow, rightDrawer, drawerWidth)]]">
|
||||
<content select="[main]"></content>
|
||||
<div id="scrim" on-tap="closeDrawer"></div>
|
||||
</div>
|
||||
|
||||
<div id="drawer" style$="[[_computeDrawerStyle(drawerWidth)]]">
|
||||
<content select="[drawer]"></content>
|
||||
</div>
|
||||
|
||||
</iron-selector>
|
||||
</template>
|
||||
|
||||
</dom-module>
|
||||
|
||||
<script>
|
||||
|
||||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
// this would be the only `paper-drawer-panel` in
|
||||
// the whole app that can be in `dragging` state
|
||||
var sharedPanel = null;
|
||||
|
||||
function classNames(obj) {
|
||||
var classes = [];
|
||||
for (var key in obj) {
|
||||
if (obj.hasOwnProperty(key) && obj[key]) {
|
||||
classes.push(key);
|
||||
}
|
||||
}
|
||||
|
||||
return classes.join(' ');
|
||||
}
|
||||
|
||||
Polymer({
|
||||
|
||||
is: 'paper-drawer-panel',
|
||||
|
||||
/**
|
||||
* Fired when the narrow layout changes.
|
||||
*
|
||||
* @event paper-responsive-change {{narrow: boolean}} detail -
|
||||
* narrow: true if the panel is in narrow layout.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the selected panel changes.
|
||||
*
|
||||
* 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.
|
||||
* The `isSelected` detail property contains the selection state.
|
||||
*
|
||||
* @event paper-select {{isSelected: boolean, item: Object}} detail -
|
||||
* isSelected: True for selection and false for deselection.
|
||||
* item: The panel that the event refers to.
|
||||
*/
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* The panel to be selected when `paper-drawer-panel` changes to narrow
|
||||
* layout.
|
||||
*/
|
||||
defaultSelected: {
|
||||
type: String,
|
||||
value: 'main'
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, swipe from the edge is disable.
|
||||
*/
|
||||
disableEdgeSwipe: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, swipe to open/close the drawer is disabled.
|
||||
*/
|
||||
disableSwipe: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Whether the user is dragging the drawer interactively.
|
||||
*/
|
||||
dragging: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Width of the drawer panel.
|
||||
*/
|
||||
drawerWidth: {
|
||||
type: String,
|
||||
value: '256px'
|
||||
},
|
||||
|
||||
/**
|
||||
* How many pixels on the side of the screen are sensitive to edge
|
||||
* swipes and peek.
|
||||
*/
|
||||
edgeSwipeSensitivity: {
|
||||
type: Number,
|
||||
value: 30
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, ignore `responsiveWidth` setting and force the narrow layout.
|
||||
*/
|
||||
forceNarrow: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Whether the browser has support for the transform CSS property.
|
||||
*/
|
||||
hasTransform: {
|
||||
type: Boolean,
|
||||
value: function() {
|
||||
return 'transform' in this.style;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Whether the browser has support for the will-change CSS property.
|
||||
*/
|
||||
hasWillChange: {
|
||||
type: Boolean,
|
||||
value: function() {
|
||||
return 'willChange' in this.style;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns true if the panel is in narrow layout. This is useful if you
|
||||
* need to show/hide elements based on the layout.
|
||||
*/
|
||||
narrow: {
|
||||
reflectToAttribute: true,
|
||||
type: Boolean,
|
||||
value: false,
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Whether the drawer is peeking out from the edge.
|
||||
*/
|
||||
peeking: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
readOnly: true,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Max-width when the panel changes to narrow layout.
|
||||
*/
|
||||
responsiveWidth: {
|
||||
type: String,
|
||||
value: '640px'
|
||||
},
|
||||
|
||||
/**
|
||||
* If true, position the drawer to the right.
|
||||
*/
|
||||
rightDrawer: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* The panel that is being selected. `drawer` for the drawer panel and
|
||||
* `main` for the main panel.
|
||||
*/
|
||||
selected: {
|
||||
reflectToAttribute: true,
|
||||
notify: true,
|
||||
type: String,
|
||||
value: null
|
||||
},
|
||||
|
||||
/**
|
||||
* The attribute on elements that should toggle the drawer on tap, also elements will
|
||||
* automatically be hidden in wide layout.
|
||||
*/
|
||||
drawerToggleAttribute: {
|
||||
type: String,
|
||||
value: 'paper-drawer-toggle'
|
||||
},
|
||||
|
||||
/**
|
||||
* Whether the transition is enabled.
|
||||
*/
|
||||
transition: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
listeners: {
|
||||
tap: '_onTap',
|
||||
track: '_onTrack',
|
||||
down: '_downHandler',
|
||||
up: '_upHandler'
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_forceNarrowChanged(forceNarrow, defaultSelected)'
|
||||
],
|
||||
|
||||
/**
|
||||
* Toggles the panel open and closed.
|
||||
*
|
||||
* @method togglePanel
|
||||
*/
|
||||
togglePanel: function() {
|
||||
if (this._isMainSelected()) {
|
||||
this.openDrawer();
|
||||
} else {
|
||||
this.closeDrawer();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Opens the drawer.
|
||||
*
|
||||
* @method openDrawer
|
||||
*/
|
||||
openDrawer: function() {
|
||||
this.selected = 'drawer';
|
||||
},
|
||||
|
||||
/**
|
||||
* Closes the drawer.
|
||||
*
|
||||
* @method closeDrawer
|
||||
*/
|
||||
closeDrawer: function() {
|
||||
this.selected = 'main';
|
||||
},
|
||||
|
||||
ready: function() {
|
||||
// Avoid transition at the beginning e.g. page loads and enable
|
||||
// transitions only after the element is rendered and ready.
|
||||
this.transition = true;
|
||||
},
|
||||
|
||||
_computeIronSelectorClass: function(narrow, transition, dragging, rightDrawer) {
|
||||
return classNames({
|
||||
dragging: dragging,
|
||||
'narrow-layout': narrow,
|
||||
'right-drawer': rightDrawer,
|
||||
'left-drawer': !rightDrawer,
|
||||
transition: transition
|
||||
});
|
||||
},
|
||||
|
||||
_computeDrawerStyle: function(drawerWidth) {
|
||||
return 'width:' + drawerWidth + ';';
|
||||
},
|
||||
|
||||
_computeMainStyle: function(narrow, rightDrawer, drawerWidth) {
|
||||
var style = '';
|
||||
|
||||
style += 'left:' + ((narrow || rightDrawer) ? '0' : drawerWidth) + ';';
|
||||
|
||||
if (rightDrawer) {
|
||||
style += 'right:' + (narrow ? '' : drawerWidth) + ';';
|
||||
} else {
|
||||
style += 'right:;';
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
|
||||
_computeMediaQuery: function(forceNarrow, responsiveWidth) {
|
||||
return forceNarrow ? '' : '(max-width: ' + responsiveWidth + ')';
|
||||
},
|
||||
|
||||
_computeSwipeOverlayHidden: function(narrow, disableEdgeSwipe) {
|
||||
return !narrow || disableEdgeSwipe;
|
||||
},
|
||||
|
||||
_onTrack: function(e) {
|
||||
if (sharedPanel && this !== sharedPanel) {
|
||||
return;
|
||||
}
|
||||
switch (e.detail.state) {
|
||||
case 'start':
|
||||
this._trackStart(e);
|
||||
break;
|
||||
case 'track':
|
||||
this._trackX(e);
|
||||
break;
|
||||
case 'end':
|
||||
this._trackEnd(e);
|
||||
break;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
_responsiveChange: function(narrow) {
|
||||
this._setNarrow(narrow);
|
||||
|
||||
if (this.narrow) {
|
||||
this.selected = this.defaultSelected;
|
||||
}
|
||||
|
||||
this.setScrollDirection(this._swipeAllowed() ? 'y' : 'all');
|
||||
this.fire('paper-responsive-change', {narrow: this.narrow});
|
||||
},
|
||||
|
||||
_onQueryMatchesChanged: function(e) {
|
||||
this._responsiveChange(e.detail.value);
|
||||
},
|
||||
|
||||
_forceNarrowChanged: function() {
|
||||
// set the narrow mode only if we reached the `responsiveWidth`
|
||||
this._responsiveChange(this.forceNarrow || this.$.mq.queryMatches);
|
||||
},
|
||||
|
||||
_swipeAllowed: function() {
|
||||
return this.narrow && !this.disableSwipe;
|
||||
},
|
||||
|
||||
_isMainSelected: function() {
|
||||
return this.selected === 'main';
|
||||
},
|
||||
|
||||
_startEdgePeek: function() {
|
||||
this.width = this.$.drawer.offsetWidth;
|
||||
this._moveDrawer(this._translateXForDeltaX(this.rightDrawer ?
|
||||
-this.edgeSwipeSensitivity : this.edgeSwipeSensitivity));
|
||||
this._setPeeking(true);
|
||||
},
|
||||
|
||||
_stopEdgePeek: function() {
|
||||
if (this.peeking) {
|
||||
this._setPeeking(false);
|
||||
this._moveDrawer(null);
|
||||
}
|
||||
},
|
||||
|
||||
_downHandler: function(e) {
|
||||
if (!this.dragging && this._isMainSelected() && this._isEdgeTouch(e) && !sharedPanel) {
|
||||
this._startEdgePeek();
|
||||
// grab this panel
|
||||
sharedPanel = this;
|
||||
}
|
||||
},
|
||||
|
||||
_upHandler: function() {
|
||||
this._stopEdgePeek();
|
||||
// release the panel
|
||||
sharedPanel = null;
|
||||
},
|
||||
|
||||
_onTap: function(e) {
|
||||
var targetElement = Polymer.dom(e).localTarget;
|
||||
var isTargetToggleElement = targetElement &&
|
||||
this.drawerToggleAttribute &&
|
||||
targetElement.hasAttribute(this.drawerToggleAttribute);
|
||||
|
||||
if (isTargetToggleElement) {
|
||||
this.togglePanel();
|
||||
}
|
||||
},
|
||||
|
||||
_isEdgeTouch: function(e) {
|
||||
var x = e.detail.x;
|
||||
|
||||
return !this.disableEdgeSwipe && this._swipeAllowed() &&
|
||||
(this.rightDrawer ?
|
||||
x >= this.offsetWidth - this.edgeSwipeSensitivity :
|
||||
x <= this.edgeSwipeSensitivity);
|
||||
},
|
||||
|
||||
_trackStart: function(event) {
|
||||
if (this._swipeAllowed()) {
|
||||
sharedPanel = this;
|
||||
this._setDragging(true);
|
||||
|
||||
if (this._isMainSelected()) {
|
||||
this._setDragging(this.peeking || this._isEdgeTouch(event));
|
||||
}
|
||||
|
||||
if (this.dragging) {
|
||||
this.width = this.$.drawer.offsetWidth;
|
||||
this.transition = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_translateXForDeltaX: function(deltaX) {
|
||||
var isMain = this._isMainSelected();
|
||||
|
||||
if (this.rightDrawer) {
|
||||
return Math.max(0, isMain ? this.width + deltaX : deltaX);
|
||||
} else {
|
||||
return Math.min(0, isMain ? deltaX - this.width : deltaX);
|
||||
}
|
||||
},
|
||||
|
||||
_trackX: function(e) {
|
||||
if (this.dragging) {
|
||||
var dx = e.detail.dx;
|
||||
|
||||
if (this.peeking) {
|
||||
if (Math.abs(dx) <= this.edgeSwipeSensitivity) {
|
||||
// Ignore trackx until we move past the edge peek.
|
||||
return;
|
||||
}
|
||||
this._setPeeking(false);
|
||||
}
|
||||
|
||||
this._moveDrawer(this._translateXForDeltaX(dx));
|
||||
}
|
||||
},
|
||||
|
||||
_trackEnd: function(e) {
|
||||
if (this.dragging) {
|
||||
var xDirection = e.detail.dx > 0;
|
||||
|
||||
this._setDragging(false);
|
||||
this.transition = true;
|
||||
sharedPanel = null;
|
||||
this._moveDrawer(null);
|
||||
|
||||
if (this.rightDrawer) {
|
||||
this[xDirection ? 'closeDrawer' : 'openDrawer']();
|
||||
} else {
|
||||
this[xDirection ? 'openDrawer' : 'closeDrawer']();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
_transformForTranslateX: function(translateX) {
|
||||
if (translateX === null) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return this.hasWillChange ? 'translateX(' + translateX + 'px)' :
|
||||
'translate3d(' + translateX + 'px, 0, 0)';
|
||||
},
|
||||
|
||||
_moveDrawer: function(translateX) {
|
||||
var s = this.$.drawer.style;
|
||||
|
||||
if (this.hasTransform) {
|
||||
s.transform = this._transformForTranslateX(translateX);
|
||||
} else {
|
||||
s.webkitTransform = this._transformForTranslateX(translateX);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}());
|
||||
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue