mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update translations
This commit is contained in:
Luke Pulverenti
parent
d65219f9f8
commit
dbf135beac
114 changed files with 3331 additions and 93 deletions
47
dashboard-ui/bower_components/iron-dropdown/.bower.json
vendored
Normal file
47
dashboard-ui/bower_components/iron-dropdown/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
{
|
||||
"name": "iron-dropdown",
|
||||
"version": "1.0.4",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer"
|
||||
],
|
||||
"main": "iron-dropdown.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-dropdown"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/iron-dropdown",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.0.0",
|
||||
"iron-behaviors": "polymerelements/iron-behaviors#^1.0.0",
|
||||
"iron-overlay-behavior": "polymerelements/iron-overlay-behavior#^1.0.0",
|
||||
"iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
|
||||
"neon-animation": "polymerelements/neon-animation#^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",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "*",
|
||||
"iron-image": "polymerelements/iron-image#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.4",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.4",
|
||||
"commit": "9a09e5ed5a4c6ee9643caba74022a01135c7878b"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-dropdown.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-dropdown"
|
||||
}
|
||||
1
dashboard-ui/bower_components/iron-dropdown/.gitignore
vendored
Normal file
1
dashboard-ui/bower_components/iron-dropdown/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
bower_components
|
||||
38
dashboard-ui/bower_components/iron-dropdown/bower.json
vendored
Normal file
38
dashboard-ui/bower_components/iron-dropdown/bower.json
vendored
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"name": "iron-dropdown",
|
||||
"version": "1.0.4",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer"
|
||||
],
|
||||
"main": "iron-dropdown.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/iron-dropdown"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/iron-dropdown",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.0.0",
|
||||
"iron-behaviors": "polymerelements/iron-behaviors#^1.0.0",
|
||||
"iron-overlay-behavior": "polymerelements/iron-overlay-behavior#^1.0.0",
|
||||
"iron-resizable-behavior": "polymerelements/iron-resizable-behavior#^1.0.0",
|
||||
"neon-animation": "polymerelements/neon-animation#^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",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "*",
|
||||
"iron-image": "polymerelements/iron-image#^1.0.0"
|
||||
}
|
||||
}
|
||||
36
dashboard-ui/bower_components/iron-dropdown/demo/grow-height-animation.html
vendored
Normal file
36
dashboard-ui/bower_components/iron-dropdown/demo/grow-height-animation.html
vendored
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!--
|
||||
@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="../../neon-animation/neon-animation-behavior.html">
|
||||
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'expand-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
|
||||
var height = node.getBoundingClientRect().height;
|
||||
|
||||
this._effect = new KeyframeEffect(node, [{
|
||||
height: (height / 2) + 'px'
|
||||
}, {
|
||||
height: height + 'px'
|
||||
}], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
163
dashboard-ui/bower_components/iron-dropdown/demo/index.html
vendored
Normal file
163
dashboard-ui/bower_components/iron-dropdown/demo/index.html
vendored
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
<!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-dropdown</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../../iron-image/iron-image.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="x-select.html">
|
||||
<style>
|
||||
|
||||
ul {
|
||||
display: block;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 2px 6px #ccc;
|
||||
margin: 0.25em 0;
|
||||
padding: 0.25em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
[vertical-align="top"] ul {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
[vertical-align="bottom"] ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li:not(:last-of-type) {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1px solid #ccc;
|
||||
background-color: #eee;
|
||||
padding: 1em;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
border-color: blue;
|
||||
}
|
||||
|
||||
iron-image {
|
||||
padding: 1em;
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 2px 6px #ccc;
|
||||
border-radius: 3px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<template is="dom-bind" id="Demo">
|
||||
<div class="horizontal-section flex layout horizontal">
|
||||
<x-select>
|
||||
<button class="dropdown-trigger">Basic</button>
|
||||
<ul class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[letters]]">
|
||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||
</template>
|
||||
</ul>
|
||||
</x-select>
|
||||
<x-select>
|
||||
<button class="dropdown-trigger">Overflowing</button>
|
||||
<ul class="dropdown-content" tabindex="0">
|
||||
<template is="dom-repeat" items="[[dinosaurs]]">
|
||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||
</template>
|
||||
</ul>
|
||||
</x-select>
|
||||
<x-select vertical-align="bottom">
|
||||
<button class="dropdown-trigger">Bottom-left Aligned</button>
|
||||
<ul class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[letters]]">
|
||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||
</template>
|
||||
</ul>
|
||||
</x-select>
|
||||
<x-select horizontal-align="right" vertical-align="top">
|
||||
<button class="dropdown-trigger">Top-right Aligned</button>
|
||||
<ul class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[dinosaurs]]">
|
||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||
</template>
|
||||
</ul>
|
||||
</x-select>
|
||||
<x-select horizontal-align="left" vertical-align="top">
|
||||
<button class="dropdown-trigger">Alternate Content</button>
|
||||
<iron-image class="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image>
|
||||
</x-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Demo.letters = [
|
||||
'alpha',
|
||||
'beta',
|
||||
'gamma',
|
||||
'delta',
|
||||
'epsilon'
|
||||
];
|
||||
Demo.dinosaurs = [
|
||||
'allosaurus',
|
||||
'brontosaurus',
|
||||
'carcharodontosaurus',
|
||||
'diplodocus',
|
||||
'ekrixinatosaurus',
|
||||
'fukuiraptor',
|
||||
'gallimimus',
|
||||
'hadrosaurus',
|
||||
'iguanodon',
|
||||
'jainosaurus',
|
||||
'kritosaurus',
|
||||
'liaoceratops',
|
||||
'megalosaurus',
|
||||
'nemegtosaurus',
|
||||
'ornithomimus',
|
||||
'protoceratops',
|
||||
'quetecsaurus',
|
||||
'rajasaurus',
|
||||
'stegosaurus',
|
||||
'triceratops',
|
||||
'utahraptor',
|
||||
'vulcanodon',
|
||||
'wannanosaurus',
|
||||
'xenoceratops',
|
||||
'yandusaurus',
|
||||
'zephyrosaurus'
|
||||
];
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
80
dashboard-ui/bower_components/iron-dropdown/demo/x-select.html
vendored
Normal file
80
dashboard-ui/bower_components/iron-dropdown/demo/x-select.html
vendored
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<!--
|
||||
@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="../iron-dropdown.html">
|
||||
<link rel="import" href="../../neon-animation/neon-animations.html">
|
||||
<link rel="import" href="grow-height-animation.html">
|
||||
|
||||
<dom-module id="x-select">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div on-tap="open">
|
||||
<content select=".dropdown-trigger"></content>
|
||||
</div>
|
||||
<iron-dropdown id="dropdown"
|
||||
vertical-align="[[verticalAlign]]"
|
||||
horizontal-align="[[horizontalAlign]]"
|
||||
disabled="[[disabled]]"
|
||||
open-animation-config="[[openAnimationConfig]]"
|
||||
close-animation-config="[[closeAnimationConfig]]">
|
||||
<content select=".dropdown-content"></content>
|
||||
</iron-dropdown>
|
||||
</template>
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'x-select',
|
||||
|
||||
properties: {
|
||||
verticalAlign: String,
|
||||
horizontalAlign: String,
|
||||
disabled: Boolean,
|
||||
openAnimationConfig: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return [{
|
||||
name: 'fade-in-animation',
|
||||
timing: {
|
||||
delay: 150,
|
||||
duration: 50
|
||||
}
|
||||
}, {
|
||||
name: 'expand-animation',
|
||||
timing: {
|
||||
delay: 150,
|
||||
duration: 200
|
||||
}
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
closeAnimationConfig: {
|
||||
type: Array,
|
||||
value: function() {
|
||||
return [{
|
||||
name: 'fade-out-animation',
|
||||
timing: {
|
||||
duration: 200
|
||||
}
|
||||
}];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
open: function() {
|
||||
this.$.dropdown.open();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
24
dashboard-ui/bower_components/iron-dropdown/index.html
vendored
Normal file
24
dashboard-ui/bower_components/iron-dropdown/index.html
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!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
|
||||
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>
|
||||
|
||||
<title>iron-dropdown</title>
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
222
dashboard-ui/bower_components/iron-dropdown/iron-dropdown-scroll-manager.html
vendored
Normal file
222
dashboard-ui/bower_components/iron-dropdown/iron-dropdown-scroll-manager.html
vendored
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
<!--
|
||||
@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-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* The IronDropdownScrollManager is intended to provide a central source
|
||||
* of authority and control over which elements in a document are currently
|
||||
* allowed to scroll.
|
||||
*/
|
||||
|
||||
Polymer.IronDropdownScrollManager = {
|
||||
|
||||
/**
|
||||
* The current element that defines the DOM boundaries of the
|
||||
* scroll lock. This is always the most recently locking element.
|
||||
*/
|
||||
get currentLockingElement() {
|
||||
return this._lockingElements[this._lockingElements.length - 1];
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Returns true if the provided element is "scroll locked," which is to
|
||||
* say that it cannot be scrolled via pointer or keyboard interactions.
|
||||
*
|
||||
* @param {HTMLElement} element An HTML element instance which may or may
|
||||
* not be scroll locked.
|
||||
*/
|
||||
elementIsScrollLocked: function(element) {
|
||||
var currentLockingElement = this.currentLockingElement;
|
||||
var scrollLocked;
|
||||
|
||||
if (this._hasCachedLockedElement(element)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (this._hasCachedUnlockedElement(element)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
scrollLocked = !!currentLockingElement &&
|
||||
currentLockingElement !== element &&
|
||||
!this._composedTreeContains(currentLockingElement, element);
|
||||
|
||||
if (scrollLocked) {
|
||||
this._lockedElementCache.push(element);
|
||||
} else {
|
||||
this._unlockedElementCache.push(element);
|
||||
}
|
||||
|
||||
return scrollLocked;
|
||||
},
|
||||
|
||||
/**
|
||||
* Push an element onto the current scroll lock stack. The most recently
|
||||
* pushed element and its children will be considered scrollable. All
|
||||
* other elements will not be scrollable.
|
||||
*
|
||||
* Scroll locking is implemented as a stack so that cases such as
|
||||
* dropdowns within dropdowns are handled well.
|
||||
*
|
||||
* @param {HTMLElement} element The element that should lock scroll.
|
||||
*/
|
||||
pushScrollLock: function(element) {
|
||||
if (this._lockingElements.length === 0) {
|
||||
this._lockScrollInteractions();
|
||||
}
|
||||
|
||||
this._lockingElements.push(element);
|
||||
|
||||
this._lockedElementCache = [];
|
||||
this._unlockedElementCache = [];
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove an element from the scroll lock stack. The element being
|
||||
* removed does not need to be the most recently pushed element. However,
|
||||
* the scroll lock constraints only change when the most recently pushed
|
||||
* element is removed.
|
||||
*
|
||||
* @param {HTMLElement} element The element to remove from the scroll
|
||||
* lock stack.
|
||||
*/
|
||||
removeScrollLock: function(element) {
|
||||
var index = this._lockingElements.indexOf(element);
|
||||
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._lockingElements.splice(index, 1);
|
||||
|
||||
this._lockedElementCache = [];
|
||||
this._unlockedElementCache = [];
|
||||
|
||||
if (this._lockingElements.length === 0) {
|
||||
this._unlockScrollInteractions();
|
||||
}
|
||||
},
|
||||
|
||||
_lockingElements: [],
|
||||
|
||||
_lockedElementCache: null,
|
||||
|
||||
_unlockedElementCache: null,
|
||||
|
||||
_originalBodyStyles: {},
|
||||
|
||||
_isScrollingKeypress: function(event) {
|
||||
return Polymer.IronA11yKeysBehavior.keyboardEventMatchesKeys(
|
||||
event, 'pageup pagedown home end up left down right');
|
||||
},
|
||||
|
||||
_hasCachedLockedElement: function(element) {
|
||||
return this._lockedElementCache.indexOf(element) > -1;
|
||||
},
|
||||
|
||||
_hasCachedUnlockedElement: function(element) {
|
||||
return this._unlockedElementCache.indexOf(element) > -1;
|
||||
},
|
||||
|
||||
_composedTreeContains: function(element, child) {
|
||||
// NOTE(cdata): This method iterates over content elements and their
|
||||
// corresponding distributed nodes to implement a contains-like method
|
||||
// that pierces through the composed tree of the ShadowDOM. Results of
|
||||
// this operation are cached (elsewhere) on a per-scroll-lock basis, to
|
||||
// guard against potentially expensive lookups happening repeatedly as
|
||||
// a user scrolls / touchmoves.
|
||||
var contentElements;
|
||||
var distributedNodes;
|
||||
var contentIndex;
|
||||
var nodeIndex;
|
||||
|
||||
if (element.contains(child)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
contentElements = Polymer.dom(element).querySelectorAll('content');
|
||||
|
||||
for (contentIndex = 0; contentIndex < contentElements.length; ++contentIndex) {
|
||||
|
||||
distributedNodes = Polymer.dom(contentElements[contentIndex]).getDistributedNodes();
|
||||
|
||||
for (nodeIndex = 0; nodeIndex < distributedNodes.length; ++nodeIndex) {
|
||||
|
||||
if (this._composedTreeContains(distributedNodes[nodeIndex], child)) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
},
|
||||
|
||||
_scrollInteractionHandler: function(event) {
|
||||
if (Polymer
|
||||
.IronDropdownScrollManager
|
||||
.elementIsScrollLocked(event.target)) {
|
||||
if (event.type === 'keydown' &&
|
||||
!Polymer.IronDropdownScrollManager._isScrollingKeypress(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
_lockScrollInteractions: function() {
|
||||
// Memoize body inline styles:
|
||||
this._originalBodyStyles.overflow = document.body.style.overflow;
|
||||
this._originalBodyStyles.overflowX = document.body.style.overflowX;
|
||||
this._originalBodyStyles.overflowY = document.body.style.overflowY;
|
||||
|
||||
// Disable overflow scrolling on body:
|
||||
// TODO(cdata): It is technically not sufficient to hide overflow on
|
||||
// body alone. A better solution might be to traverse all ancestors of
|
||||
// the current scroll locking element and hide overflow on them. This
|
||||
// becomes expensive, though, as it would have to be redone every time
|
||||
// a new scroll locking element is added.
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.overflowX = 'hidden';
|
||||
document.body.style.overflowY = 'hidden';
|
||||
|
||||
// Modern `wheel` event for mouse wheel scrolling:
|
||||
window.addEventListener('wheel', this._scrollInteractionHandler, true);
|
||||
// Older, non-standard `mousewheel` event for some FF:
|
||||
window.addEventListener('mousewheel', this._scrollInteractionHandler, true);
|
||||
// IE:
|
||||
window.addEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
|
||||
// Mobile devices can scroll on touch move:
|
||||
window.addEventListener('touchmove', this._scrollInteractionHandler, true);
|
||||
// Capture keydown to prevent scrolling keys (pageup, pagedown etc.)
|
||||
document.addEventListener('keydown', this._scrollInteractionHandler, true);
|
||||
},
|
||||
|
||||
_unlockScrollInteractions: function() {
|
||||
document.body.style.overflow = this._originalBodyStyles.overflow;
|
||||
document.body.style.overflowX = this._originalBodyStyles.overflowX;
|
||||
document.body.style.overflowY = this._originalBodyStyles.overflowY;
|
||||
|
||||
window.removeEventListener('wheel', this._scrollInteractionHandler, true);
|
||||
window.removeEventListener('mousewheel', this._scrollInteractionHandler, true);
|
||||
window.removeEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
|
||||
window.removeEventListener('touchmove', this._scrollInteractionHandler, true);
|
||||
document.removeEventListener('keydown', this._scrollInteractionHandler, true);
|
||||
}
|
||||
};
|
||||
})();
|
||||
</script>
|
||||
371
dashboard-ui/bower_components/iron-dropdown/iron-dropdown.html
vendored
Normal file
371
dashboard-ui/bower_components/iron-dropdown/iron-dropdown.html
vendored
Normal file
|
|
@ -0,0 +1,371 @@
|
|||
<!--
|
||||
@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-resizable-behavior/iron-resizable-behavior.html">
|
||||
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
<link rel="import" href="../iron-behaviors/iron-control-state.html">
|
||||
<link rel="import" href="../iron-overlay-behavior/iron-overlay-behavior.html">
|
||||
<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
|
||||
<link rel="import" href="../neon-animation/animations/opaque-animation.html">
|
||||
<link rel="import" href="iron-dropdown-scroll-manager.html">
|
||||
|
||||
<!--
|
||||
`<iron-dropdown>` is a generalized element that is useful when you have
|
||||
hidden content (`.dropdown-content`) that is revealed due to some change in
|
||||
state that should cause it to do so.
|
||||
|
||||
Note that this is a low-level element intended to be used as part of other
|
||||
composite elements that cause dropdowns to be revealed.
|
||||
|
||||
Examples of elements that might be implemented using an `iron-dropdown`
|
||||
include comboboxes, menubuttons, selects. The list goes on.
|
||||
|
||||
The `<iron-dropdown>` element exposes attributes that allow the position
|
||||
of the `.dropdown-content` relative to the `.dropdown-trigger` to be
|
||||
configured.
|
||||
|
||||
<iron-dropdown horizontal-align="right" vertical-align="top">
|
||||
<div class="dropdown-content">Hello!</div>
|
||||
</iron-dropdown>
|
||||
|
||||
In the above example, the `<div>` with class `.dropdown-content` will be
|
||||
hidden until the dropdown element has `opened` set to true, or when the `open`
|
||||
method is called on the element.
|
||||
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="iron-dropdown">
|
||||
<style>
|
||||
:host {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#contentWrapper ::content > * {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#contentWrapper.animating ::content > * {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div id="contentWrapper">
|
||||
<content id="content" select=".dropdown-content"></content>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
Polymer({
|
||||
is: 'iron-dropdown',
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronControlState,
|
||||
Polymer.IronA11yKeysBehavior,
|
||||
Polymer.IronOverlayBehavior,
|
||||
Polymer.NeonAnimationRunnerBehavior
|
||||
],
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* The orientation against which to align the dropdown content
|
||||
* horizontally relative to the dropdown trigger.
|
||||
*/
|
||||
horizontalAlign: {
|
||||
type: String,
|
||||
value: 'left',
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The orientation against which to align the dropdown content
|
||||
* vertically relative to the dropdown trigger.
|
||||
*/
|
||||
verticalAlign: {
|
||||
type: String,
|
||||
value: 'top',
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/**
|
||||
* A pixel value that will be added to the position calculated for the
|
||||
* given `horizontalAlign`. Use a negative value to offset to the
|
||||
* left, or a positive value to offset to the right.
|
||||
*/
|
||||
horizontalOffset: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* A pixel value that will be added to the position calculated for the
|
||||
* given `verticalAlign`. Use a negative value to offset towards the
|
||||
* top, or a positive value to offset towards the bottom.
|
||||
*/
|
||||
verticalOffset: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The element that should be used to position the dropdown when
|
||||
* it is opened.
|
||||
*/
|
||||
positionTarget: {
|
||||
type: Object,
|
||||
observer: '_positionTargetChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
* An animation config. If provided, this will be used to animate the
|
||||
* opening of the dropdown.
|
||||
*/
|
||||
openAnimationConfig: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* An animation config. If provided, this will be used to animate the
|
||||
* closing of the dropdown.
|
||||
*/
|
||||
closeAnimationConfig: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable animations when opening and closing the
|
||||
* dropdown.
|
||||
*/
|
||||
noAnimations: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* We memoize the positionTarget bounding rectangle so that we can
|
||||
* limit the number of times it is queried per resize / relayout.
|
||||
* @type {?Object}
|
||||
*/
|
||||
_positionRectMemo: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'neon-animation-finish': '_onNeonAnimationFinish'
|
||||
},
|
||||
|
||||
observers: [
|
||||
'_updateOverlayPosition(verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)'
|
||||
],
|
||||
|
||||
attached: function() {
|
||||
if (this.positionTarget === undefined) {
|
||||
this.positionTarget = this._defaultPositionTarget;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* The element that is contained by the dropdown, if any.
|
||||
*/
|
||||
get containedElement() {
|
||||
return Polymer.dom(this.$.content).getDistributedNodes()[0];
|
||||
},
|
||||
|
||||
get _defaultPositionTarget() {
|
||||
var parent = Polymer.dom(this).parentNode;
|
||||
|
||||
if (parent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
|
||||
parent = parent.host;
|
||||
}
|
||||
|
||||
return parent;
|
||||
},
|
||||
|
||||
get _positionRect() {
|
||||
if (!this._positionRectMemo && this.positionTarget) {
|
||||
this._positionRectMemo = this.positionTarget.getBoundingClientRect();
|
||||
}
|
||||
|
||||
return this._positionRectMemo;
|
||||
},
|
||||
|
||||
get _horizontalAlignTargetValue() {
|
||||
var target;
|
||||
|
||||
if (this.horizontalAlign === 'right') {
|
||||
target = document.documentElement.clientWidth - this._positionRect.right;
|
||||
} else {
|
||||
target = this._positionRect.left;
|
||||
}
|
||||
|
||||
target += this.horizontalOffset;
|
||||
|
||||
return Math.max(target, 0);
|
||||
},
|
||||
|
||||
get _verticalAlignTargetValue() {
|
||||
var target;
|
||||
|
||||
if (this.verticalAlign === 'bottom') {
|
||||
target = document.documentElement.clientHeight - this._positionRect.bottom;
|
||||
} else {
|
||||
target = this._positionRect.top;
|
||||
}
|
||||
|
||||
target += this.verticalOffset;
|
||||
|
||||
return Math.max(target, 0);
|
||||
},
|
||||
|
||||
_openedChanged: function(opened) {
|
||||
if (opened && this.disabled) {
|
||||
this.cancel();
|
||||
} else {
|
||||
this._cancelAnimations();
|
||||
this._prepareDropdown();
|
||||
Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
_renderOpened: function() {
|
||||
Polymer.IronDropdownScrollManager.pushScrollLock(this);
|
||||
if (!this.noAnimations && this.animationConfig && this.animationConfig.open) {
|
||||
this.$.contentWrapper.classList.add('animating');
|
||||
this.playAnimation('open');
|
||||
} else {
|
||||
this._focusContent();
|
||||
Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
_renderClosed: function() {
|
||||
Polymer.IronDropdownScrollManager.removeScrollLock(this);
|
||||
if (!this.noAnimations && this.animationConfig && this.animationConfig.close) {
|
||||
this.$.contentWrapper.classList.add('animating');
|
||||
this.playAnimation('close');
|
||||
} else {
|
||||
Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this, arguments);
|
||||
}
|
||||
},
|
||||
|
||||
_onNeonAnimationFinish: function() {
|
||||
this.$.contentWrapper.classList.remove('animating');
|
||||
if (this.opened) {
|
||||
Polymer.IronOverlayBehaviorImpl._renderOpened.apply(this);
|
||||
} else {
|
||||
Polymer.IronOverlayBehaviorImpl._renderClosed.apply(this);
|
||||
}
|
||||
},
|
||||
|
||||
_onIronResize: function() {
|
||||
var containedElement = this.containedElement;
|
||||
var scrollTop;
|
||||
var scrollLeft;
|
||||
|
||||
if (containedElement) {
|
||||
scrollTop = containedElement.scrollTop;
|
||||
scrollLeft = containedElement.scrollLeft;
|
||||
}
|
||||
|
||||
if (this.opened) {
|
||||
this._updateOverlayPosition();
|
||||
}
|
||||
|
||||
Polymer.IronOverlayBehaviorImpl._onIronResize.apply(this, arguments);
|
||||
|
||||
if (containedElement) {
|
||||
containedElement.scrollTop = scrollTop;
|
||||
containedElement.scrollLeft = scrollLeft;
|
||||
}
|
||||
},
|
||||
|
||||
_positionTargetChanged: function() {
|
||||
this._updateOverlayPosition();
|
||||
},
|
||||
|
||||
_cancelAnimations: function() {
|
||||
this.cancelAnimation();
|
||||
},
|
||||
|
||||
_updateAnimationConfig: function() {
|
||||
var animationConfig = {};
|
||||
var animations = [];
|
||||
|
||||
if (this.openAnimationConfig) {
|
||||
// NOTE(cdata): When making `display:none` elements visible in Safari,
|
||||
// the element will paint once in a fully visible state, causing the
|
||||
// dropdown to flash before it fades in. We prepend an
|
||||
// `opaque-animation` to fix this problem:
|
||||
animationConfig.open = [{
|
||||
name: 'opaque-animation',
|
||||
}].concat(this.openAnimationConfig);
|
||||
animations = animations.concat(animationConfig.open);
|
||||
}
|
||||
|
||||
if (this.closeAnimationConfig) {
|
||||
animationConfig.close = this.closeAnimationConfig;
|
||||
animations = animations.concat(animationConfig.close);
|
||||
}
|
||||
|
||||
animations.forEach(function(animation) {
|
||||
animation.node = this.containedElement;
|
||||
}, this);
|
||||
|
||||
this.animationConfig = animationConfig;
|
||||
},
|
||||
|
||||
_prepareDropdown: function() {
|
||||
this.sizingTarget = this.containedElement || this.sizingTarget;
|
||||
this._updateAnimationConfig();
|
||||
this._updateOverlayPosition();
|
||||
},
|
||||
|
||||
_updateOverlayPosition: function() {
|
||||
this._positionRectMemo = null;
|
||||
|
||||
if (!this.positionTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.style[this.horizontalAlign] =
|
||||
this._horizontalAlignTargetValue + 'px';
|
||||
|
||||
this.style[this.verticalAlign] =
|
||||
this._verticalAlignTargetValue + 'px';
|
||||
|
||||
// NOTE(cdata): We re-memoize inline styles here, otherwise
|
||||
// calling `refit` from `IronFitBehavior` will reset inline styles
|
||||
// to whatever they were when the dropdown first opened.
|
||||
if (this._fitInfo) {
|
||||
this._fitInfo.inlineStyle[this.horizontalAlign] =
|
||||
this.style[this.horizontalAlign];
|
||||
|
||||
this._fitInfo.inlineStyle[this.verticalAlign] =
|
||||
this.style[this.verticalAlign];
|
||||
}
|
||||
},
|
||||
|
||||
_focusContent: function() {
|
||||
if (this.containedElement) {
|
||||
this.containedElement.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</dom-module>
|
||||
|
||||
26
dashboard-ui/bower_components/iron-dropdown/test/index.html
vendored
Normal file
26
dashboard-ui/bower_components/iron-dropdown/test/index.html
vendored
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!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-dropdown tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'iron-dropdown.html',
|
||||
'iron-dropdown-scroll-manager.html'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
106
dashboard-ui/bower_components/iron-dropdown/test/iron-dropdown-scroll-manager.html
vendored
Normal file
106
dashboard-ui/bower_components/iron-dropdown/test/iron-dropdown-scroll-manager.html
vendored
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
<!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">
|
||||
<title>iron-dropdown-scroll-manager tests</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-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>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../iron-dropdown-scroll-manager.html">
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="DOMSubtree">
|
||||
<template>
|
||||
<div id="Parent">
|
||||
<div id="ChildOne">
|
||||
<div id="GrandchildOne"></div>
|
||||
</div>
|
||||
<div id="ChildTwo">
|
||||
<div id="GrandchildTwo"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
<script>
|
||||
suite('IronDropdownScrollManager', function() {
|
||||
var parent;
|
||||
var childOne;
|
||||
var childTwo;
|
||||
var grandchildOne;
|
||||
var grandchildTwo;
|
||||
var ancestor;
|
||||
|
||||
setup(function() {
|
||||
parent = fixture('DOMSubtree');
|
||||
childOne = parent.querySelector('#ChildOne');
|
||||
childTwo = parent.querySelector('#ChildTwo');
|
||||
grandChildOne = parent.querySelector('#GrandchildOne');
|
||||
grandChildTwo = parent.querySelector('#GrandchildTwo');
|
||||
ancestor = document.body;
|
||||
});
|
||||
|
||||
suite('contraining scroll in the DOM', function() {
|
||||
setup(function() {
|
||||
Polymer.IronDropdownScrollManager.pushScrollLock(childOne);
|
||||
});
|
||||
|
||||
teardown(function() {
|
||||
Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
|
||||
});
|
||||
|
||||
test('recognizes sibling as locked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(childTwo))
|
||||
.to.be.equal(true);
|
||||
});
|
||||
|
||||
test('recognizes neice as locked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(grandChildTwo))
|
||||
.to.be.equal(true);
|
||||
});
|
||||
|
||||
test('recognizes parent as locked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(parent))
|
||||
.to.be.equal(true);
|
||||
});
|
||||
|
||||
test('recognizes ancestor as locked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(ancestor))
|
||||
.to.be.equal(true);
|
||||
});
|
||||
|
||||
test('recognizes locking child as unlocked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(childOne))
|
||||
.to.be.equal(false);
|
||||
});
|
||||
|
||||
test('recognizes descendant of locking child as unlocked', function() {
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(grandChildOne))
|
||||
.to.be.equal(false);
|
||||
});
|
||||
|
||||
test('unlocks locked elements when there are no locking elements', function() {
|
||||
Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
|
||||
|
||||
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(parent))
|
||||
.to.be.equal(false);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
169
dashboard-ui/bower_components/iron-dropdown/test/iron-dropdown.html
vendored
Normal file
169
dashboard-ui/bower_components/iron-dropdown/test/iron-dropdown.html
vendored
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
<!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">
|
||||
<title>iron-dropdown basic tests</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-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>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../iron-dropdown.html">
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="TrivialDropdown">
|
||||
<template>
|
||||
<iron-dropdown>
|
||||
<div class="dropdown-content">Hello!</div>
|
||||
</iron-dropdown>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="AlignedDropdown">
|
||||
<template>
|
||||
<div style="display: block; position: relative; width: 100px; height: 100px;">
|
||||
<iron-dropdown horizontal-align="right" vertical-align="top">
|
||||
<div class="dropdown-content">Hello!</div>
|
||||
</iron-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
function elementIsVisible(element) {
|
||||
var contentRect = element.getBoundingClientRect();
|
||||
var computedStyle = window.getComputedStyle(element);
|
||||
|
||||
return computedStyle.display !== 'none' &&
|
||||
contentRect.width > 0 &&
|
||||
contentRect.height > 0;
|
||||
}
|
||||
|
||||
suite('<iron-dropdown>', function() {
|
||||
var dropdown;
|
||||
suite('basic', function() {
|
||||
setup(function() {
|
||||
dropdown = fixture('TrivialDropdown');
|
||||
});
|
||||
|
||||
test('effectively hides the dropdown content', function() {
|
||||
var content = dropdown.querySelector('.dropdown-content');
|
||||
|
||||
expect(elementIsVisible(content)).to.be.equal(false);
|
||||
});
|
||||
|
||||
test('shows dropdown content when opened', function(done) {
|
||||
var content = dropdown.querySelector('.dropdown-content');
|
||||
|
||||
dropdown.open();
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(elementIsVisible(content)).to.be.equal(true);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('hides dropdown content when outside is clicked', function(done) {
|
||||
var content = dropdown.querySelector('.dropdown-content');
|
||||
|
||||
dropdown.open();
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(elementIsVisible(content)).to.be.equal(true);
|
||||
|
||||
MockInteractions.downAndUp(document.body, function() {
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(elementIsVisible(content)).to.be.equal(false);
|
||||
done();
|
||||
}, 100);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
suite('aligned dropdown', function() {
|
||||
var parent;
|
||||
setup(function() {
|
||||
parent = fixture('AlignedDropdown');
|
||||
dropdown = parent.querySelector('iron-dropdown');
|
||||
});
|
||||
|
||||
test('can be re-aligned to the right and the top', function(done) {
|
||||
var parentRect;
|
||||
var dropdownRect;
|
||||
|
||||
dropdown.opened = true;
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
|
||||
// NOTE(cdata): IE10 / 11 have minor rounding errors in this case,
|
||||
// so we assert with `closeTo` and a tight threshold:
|
||||
expect(dropdownRect.top).to.be.closeTo(parentRect.top, 0.1);
|
||||
expect(dropdownRect.right).to.be.closeTo(parentRect.right, 0.1);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
test('can be re-aligned to the bottom', function(done) {
|
||||
var parentRect;
|
||||
var dropdownRect;
|
||||
|
||||
dropdown.verticalAlign = 'bottom';
|
||||
dropdown.opened = true;
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
parentRect = parent.getBoundingClientRect();
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
|
||||
// NOTE(cdata): IE10 / 11 have minor rounding errors in this case,
|
||||
// so we assert with `closeTo` and a tight threshold:
|
||||
expect(dropdownRect.bottom).to.be.closeTo(parentRect.bottom, 0.1);
|
||||
expect(dropdownRect.right).to.be.closeTo(parentRect.right, 0.1);
|
||||
done();
|
||||
}, 1);
|
||||
});
|
||||
|
||||
suite('with an offset', function() {
|
||||
test('is offset by the offset value when open', function() {
|
||||
var dropdownRect;
|
||||
var offsetDropdownRect;
|
||||
|
||||
dropdown.opened = true;
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
dropdownRect = dropdown.getBoundingClientRect();
|
||||
|
||||
dropdownRect.verticalOffset = 10;
|
||||
dropdownRect.horizontalOffset = -10;
|
||||
|
||||
offsetDropdownRect = dropdown.getBoundingClientRect();
|
||||
|
||||
expect(dropdownRect.top).to.be.equal(offsetDropdownRect.top - 10);
|
||||
expect(dropdownRect.left).to.be.equal(offsetDropdownRect.left + 10);
|
||||
}, 1);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -23,14 +23,14 @@
|
|||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
|
||||
"homepage": "https://github.com/polymerelements/iron-flex-layout",
|
||||
"_release": "1.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.3",
|
||||
"commit": "e6c2cfec18354973ac03e70dcd8afcc3c72d09b9"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
|
||||
"_source": "git://github.com/polymerelements/iron-flex-layout.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-flex-layout"
|
||||
"_originalSource": "polymerelements/iron-flex-layout"
|
||||
}
|
||||
|
|
@ -25,14 +25,14 @@
|
|||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-meta",
|
||||
"homepage": "https://github.com/polymerelements/iron-meta",
|
||||
"_release": "1.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.3",
|
||||
"commit": "91529259262b0d8f33fed44bc3fd47aedf35cb04"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-meta.git",
|
||||
"_source": "git://github.com/polymerelements/iron-meta.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-meta"
|
||||
"_originalSource": "polymerelements/iron-meta"
|
||||
}
|
||||
|
|
@ -27,14 +27,14 @@
|
|||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-resizable-behavior",
|
||||
"homepage": "https://github.com/polymerelements/iron-resizable-behavior",
|
||||
"_release": "1.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "85de8ba28be2bf17c81d6436ef1119022b003674"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-resizable-behavior.git",
|
||||
"_source": "git://github.com/polymerelements/iron-resizable-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-resizable-behavior"
|
||||
"_originalSource": "polymerelements/iron-resizable-behavior"
|
||||
}
|
||||
53
dashboard-ui/bower_components/paper-dropdown-menu/.bower.json
vendored
Normal file
53
dashboard-ui/bower_components/paper-dropdown-menu/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
{
|
||||
"name": "paper-dropdown-menu",
|
||||
"version": "1.0.1",
|
||||
"description": "An element that works similarly to a native browser select",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer",
|
||||
"dropdown",
|
||||
"select"
|
||||
],
|
||||
"main": "paper-dropdown-menu.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-dropdown-menu"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/paper-dropdown-menu",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"paper-input": "polymerelements/paper-input#^1.0.9",
|
||||
"paper-menu-button": "polymerelements/paper-menu-button#^1.0.0",
|
||||
"paper-ripple": "polymerelements/paper-ripple#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-item": "polymerelements/paper-item#^1.0.0",
|
||||
"paper-menu": "polymerelements/paper-menu#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "*",
|
||||
"paper-tabs": "polymerelements/paper-tabs#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.1",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.1",
|
||||
"commit": "c16e6087ce4b770938b96647e80c78765eea41fa"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-dropdown-menu.git",
|
||||
"_target": "~1.0.1",
|
||||
"_originalSource": "PolymerElements/paper-dropdown-menu",
|
||||
"_direct": true
|
||||
}
|
||||
1
dashboard-ui/bower_components/paper-dropdown-menu/.gitignore
vendored
Normal file
1
dashboard-ui/bower_components/paper-dropdown-menu/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
bower_components
|
||||
43
dashboard-ui/bower_components/paper-dropdown-menu/bower.json
vendored
Normal file
43
dashboard-ui/bower_components/paper-dropdown-menu/bower.json
vendored
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
{
|
||||
"name": "paper-dropdown-menu",
|
||||
"version": "1.0.1",
|
||||
"description": "An element that works similarly to a native browser select",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer",
|
||||
"dropdown",
|
||||
"select"
|
||||
],
|
||||
"main": "paper-dropdown-menu.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-dropdown-menu"
|
||||
},
|
||||
"license": "http://polymer.github.io/LICENSE.txt",
|
||||
"homepage": "https://github.com/PolymerElements/paper-dropdown-menu",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"paper-input": "polymerelements/paper-input#^1.0.9",
|
||||
"paper-menu-button": "polymerelements/paper-menu-button#^1.0.0",
|
||||
"paper-ripple": "polymerelements/paper-ripple#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"paper-item": "polymerelements/paper-item#^1.0.0",
|
||||
"paper-menu": "polymerelements/paper-menu#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "*",
|
||||
"paper-tabs": "polymerelements/paper-tabs#^1.0.0"
|
||||
}
|
||||
}
|
||||
176
dashboard-ui/bower_components/paper-dropdown-menu/demo/index.html
vendored
Normal file
176
dashboard-ui/bower_components/paper-dropdown-menu/demo/index.html
vendored
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<!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.0, user-scalable=yes">
|
||||
|
||||
<title>paper-dropdown-menu demo</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../../paper-menu/paper-menu.html">
|
||||
<link rel="import" href="../../paper-item/paper-item.html">
|
||||
<link rel="import" href="../../paper-button/paper-button.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
<link rel="import" href="../../paper-tabs/paper-tabs.html">
|
||||
|
||||
<link rel="import" href="../paper-dropdown-menu.html">
|
||||
|
||||
<style>
|
||||
paper-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
paper-dropdown-menu {
|
||||
text-align: left;
|
||||
margin: auto;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
paper-dropdown-menu.letters {
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
paper-tabs {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.horizontal-section {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<template id="Demo" is="dom-bind">
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Basic Menu</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-dropdown-menu label="Dinosaurs">
|
||||
<paper-menu class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
|
||||
<paper-item>[[dinosaur]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Disabled</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-dropdown-menu disabled label="Disabled">
|
||||
<paper-menu class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[letters]]" as="letter">
|
||||
<paper-item>[[letter]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Alternative Content</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-dropdown-menu label="Menu tabs!?">
|
||||
<paper-tabs class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[letters]]" as="letter">
|
||||
<paper-tab>[[letter]]</paper-tab>
|
||||
</template>
|
||||
</paper-tabs>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>No Label Float</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-dropdown-menu class="letters" label="Letters" no-label-float>
|
||||
<paper-menu class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[letters]]" as="letter">
|
||||
<paper-item>[[letter]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>No Ripple, No Animations</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-dropdown-menu label="Dinosaurs" noink no-animations>
|
||||
<paper-menu class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
|
||||
<paper-item>[[dinosaur]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Demo.letters = [
|
||||
'alpha',
|
||||
'beta',
|
||||
'gamma',
|
||||
'delta',
|
||||
'epsilon'
|
||||
];
|
||||
Demo.dinosaurs = [
|
||||
'allosaurus',
|
||||
'brontosaurus',
|
||||
'carcharodontosaurus',
|
||||
'diplodocus',
|
||||
'ekrixinatosaurus',
|
||||
'fukuiraptor',
|
||||
'gallimimus',
|
||||
'hadrosaurus',
|
||||
'iguanodon',
|
||||
'jainosaurus',
|
||||
'kritosaurus',
|
||||
'liaoceratops',
|
||||
'megalosaurus',
|
||||
'nemegtosaurus',
|
||||
'ornithomimus',
|
||||
'protoceratops',
|
||||
'quetecsaurus',
|
||||
'rajasaurus',
|
||||
'stegosaurus',
|
||||
'triceratops',
|
||||
'utahraptor',
|
||||
'vulcanodon',
|
||||
'wannanosaurus',
|
||||
'xenoceratops',
|
||||
'yandusaurus',
|
||||
'zephyrosaurus'
|
||||
];
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
24
dashboard-ui/bower_components/paper-dropdown-menu/index.html
vendored
Normal file
24
dashboard-ui/bower_components/paper-dropdown-menu/index.html
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!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
|
||||
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>
|
||||
|
||||
<title>paper-dropdown-menu</title>
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
332
dashboard-ui/bower_components/paper-dropdown-menu/paper-dropdown-menu.html
vendored
Normal file
332
dashboard-ui/bower_components/paper-dropdown-menu/paper-dropdown-menu.html
vendored
Normal file
|
|
@ -0,0 +1,332 @@
|
|||
<!--
|
||||
@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="../paper-styles/default-theme.html">
|
||||
<link rel="import" href="../paper-input/paper-input.html">
|
||||
<link rel="import" href="../paper-menu-button/paper-menu-button.html">
|
||||
<link rel="import" href="../paper-ripple/paper-ripple.html">
|
||||
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
<link rel="import" href="../iron-behaviors/iron-control-state.html">
|
||||
<link rel="import" href="../iron-behaviors/iron-button-state.html">
|
||||
<link rel="import" href="../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../iron-selector/iron-selectable.html">
|
||||
|
||||
<!--
|
||||
`paper-dropdown-menu` is similar to a native browser select element.
|
||||
`paper-dropdown-menu` works with selectable content. The currently selected
|
||||
item is displayed in the control. If no item is selected, the `label` is
|
||||
displayed instead.
|
||||
|
||||
The child element with the class `dropdown-content` will be used as the dropdown
|
||||
menu. It could be a `paper-menu` or element that triggers `iron-activate` when
|
||||
selecting its children.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-dropdown-menu label="Your favourite pastry">
|
||||
<paper-menu class="dropdown-content">
|
||||
<paper-item>Croissant</paper-item>
|
||||
<paper-item>Donut</paper-item>
|
||||
<paper-item>Financier</paper-item>
|
||||
<paper-item>Madeleine</paper-item>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
|
||||
This example renders a dropdown menu with 4 options.
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are also available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-dropdown-menu` | A mixin that is applied to the element host | `{}`
|
||||
`--paper-dropdown-menu-disabled` | A mixin that is applied to the element host when disabled | `{}`
|
||||
`--paper-dropdown-menu-ripple` | A mixin that is applied to the internal ripple | `{}`
|
||||
`--paper-dropdown-menu-button` | A mixin that is applied to the internal menu button | `{}`
|
||||
`--paper-dropdown-menu-input` | A mixin that is applied to the internal paper input | `{}`
|
||||
`--paper-dropdown-menu-icon` | A mixin that is applied to the internal icon | `{}`
|
||||
|
||||
You can also use any of the `paper-input-container` and `paper-menu-button`
|
||||
style mixins and custom properties to style the internal input and menu button
|
||||
respectively.
|
||||
|
||||
@group Paper Elements
|
||||
@element paper-dropdown-menu
|
||||
@hero hero.svg
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="paper-dropdown-menu">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
|
||||
--paper-input-container-input: {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
};
|
||||
|
||||
@apply(--paper-dropdown-menu);
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
@apply(--paper-dropdown-menu-disabled);
|
||||
}
|
||||
|
||||
:host([noink]) paper-ripple {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host([no-label-float]) paper-ripple {
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
paper-ripple {
|
||||
top: 20px;
|
||||
left: 8px;
|
||||
bottom: 16px;
|
||||
right: 8px;
|
||||
|
||||
@apply(--paper-dropdown-menu-ripple);
|
||||
}
|
||||
|
||||
paper-menu-button {
|
||||
@apply(--paper-dropdown-menu-button);
|
||||
}
|
||||
|
||||
paper-input {
|
||||
@apply(--paper-dropdown-menu-input);
|
||||
}
|
||||
|
||||
iron-icon {
|
||||
color: var(--disabled-text-color);
|
||||
|
||||
@apply(--paper-dropdown-menu-icon);
|
||||
}
|
||||
|
||||
</style>
|
||||
<template>
|
||||
<paper-menu-button
|
||||
id="menuButton"
|
||||
vertical-align="top"
|
||||
horizontal-align="right"
|
||||
vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
|
||||
disabled="[[disabled]]"
|
||||
no-animations="[[noAnimations]]"
|
||||
on-iron-activate="_onIronActivate"
|
||||
opened="{{opened}}">
|
||||
<div class="dropdown-trigger">
|
||||
<paper-ripple></paper-ripple>
|
||||
<paper-input
|
||||
readonly
|
||||
disabled="[[disabled]]"
|
||||
value="[[selectedItemLabel]]"
|
||||
placeholder="[[placeholder]]"
|
||||
always-float-label="[[alwaysFloatLabel]]"
|
||||
no-label-float="[[noLabelFloat]]"
|
||||
label="[[label]]">
|
||||
<iron-icon icon="arrow-drop-down" suffix></iron-icon>
|
||||
</paper-input>
|
||||
</div>
|
||||
<div class="dropdown-content">
|
||||
<content select=".dropdown-content"></content>
|
||||
</div>
|
||||
</paper-menu-button>
|
||||
</template>
|
||||
</dom-module>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
Polymer({
|
||||
is: 'paper-dropdown-menu',
|
||||
|
||||
/**
|
||||
* Fired when the dropdown opens.
|
||||
*
|
||||
* @event paper-dropdown-open
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the dropdown closes.
|
||||
*
|
||||
* @event paper-dropdown-close
|
||||
*/
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronControlState,
|
||||
Polymer.IronButtonState
|
||||
],
|
||||
|
||||
properties: {
|
||||
/**
|
||||
* The derived "label" of the currently selected item. This value
|
||||
* is the `label` property on the selected item if set, or else the
|
||||
* trimmed text content of the selected item.
|
||||
*/
|
||||
selectedItemLabel: {
|
||||
type: String,
|
||||
notify: true,
|
||||
computed: '_computeSelectedItemLabel(selectedItem)'
|
||||
},
|
||||
|
||||
/**
|
||||
* The last selected item. An item is selected if the dropdown menu has
|
||||
* a child with class `dropdown-content`, and that child triggers an
|
||||
* `iron-activate` event with the selected `item` in the `detail`.
|
||||
*/
|
||||
selectedItem: {
|
||||
type: Object,
|
||||
notify: true,
|
||||
readOnly: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The label for the dropdown.
|
||||
*/
|
||||
label: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* The placeholder for the dropdown.
|
||||
*/
|
||||
placeholder: {
|
||||
type: String
|
||||
},
|
||||
|
||||
/**
|
||||
* True if the dropdown is open. Otherwise, false.
|
||||
*/
|
||||
opened: {
|
||||
type: Boolean,
|
||||
notify: true,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable the floating label. Bind this to the
|
||||
* `<paper-input-container>`'s `noLabelFloat` property.
|
||||
*/
|
||||
noLabelFloat: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to always float the label. Bind this to the
|
||||
* `<paper-input-container>`'s `alwaysFloatLabel` property.
|
||||
*/
|
||||
alwaysFloatLabel: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable animations when opening and closing the
|
||||
* dropdown.
|
||||
*/
|
||||
noAnimations: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
}
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'tap': '_onTap'
|
||||
},
|
||||
|
||||
keyBindings: {
|
||||
'up down': 'open',
|
||||
'esc': 'close'
|
||||
},
|
||||
|
||||
hostAttributes: {
|
||||
role: 'group',
|
||||
'aria-haspopup': 'true'
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the dropdown content.
|
||||
*/
|
||||
open: function() {
|
||||
this.$.menuButton.open();
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide the dropdown content.
|
||||
*/
|
||||
close: function() {
|
||||
this.$.menuButton.close();
|
||||
},
|
||||
|
||||
/**
|
||||
* A handler that is called when `iron-activate` is fired.
|
||||
*
|
||||
* @param {CustomEvent} event An `iron-activate` event.
|
||||
*/
|
||||
_onIronActivate: function(event) {
|
||||
this._setSelectedItem(event.detail.item);
|
||||
},
|
||||
|
||||
/**
|
||||
* A handler that is called when the dropdown is tapped.
|
||||
*
|
||||
* @param {CustomEvent} event A tap event.
|
||||
*/
|
||||
_onTap: function(event) {
|
||||
if (Polymer.Gestures.findOriginalTarget(event) === this) {
|
||||
this.open();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Compute the label for the dropdown given a selected item.
|
||||
*
|
||||
* @param {Element} selectedItem A selected Element item, with an
|
||||
* optional `label` property.
|
||||
*/
|
||||
_computeSelectedItemLabel: function(selectedItem) {
|
||||
if (!selectedItem) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return selectedItem.label || selectedItem.textContent.trim();
|
||||
},
|
||||
|
||||
/**
|
||||
* Compute the vertical offset of the menu based on the value of
|
||||
* `noLabelFloat`.
|
||||
*
|
||||
* @param {boolean} noLabelFloat True if the label should not float
|
||||
* above the input, otherwise false.
|
||||
*/
|
||||
_computeMenuVerticalOffset: function(noLabelFloat) {
|
||||
// NOTE(cdata): These numbers are somewhat magical because they are
|
||||
// derived from the metrics of elements internal to `paper-input`'s
|
||||
// template. The metrics will change depending on whether or not the
|
||||
// input has a floating label.
|
||||
return noLabelFloat ? -4 : 16;
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
25
dashboard-ui/bower_components/paper-dropdown-menu/test/index.html
vendored
Normal file
25
dashboard-ui/bower_components/paper-dropdown-menu/test/index.html
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!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-dropdown-menu tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'paper-dropdown-menu.html'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
104
dashboard-ui/bower_components/paper-dropdown-menu/test/paper-dropdown-menu.html
vendored
Normal file
104
dashboard-ui/bower_components/paper-dropdown-menu/test/paper-dropdown-menu.html
vendored
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<!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">
|
||||
<title>paper-dropdown-menu basic tests</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-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>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../../paper-menu/paper-menu.html">
|
||||
<link rel="import" href="../../paper-item/paper-item.html">
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
<link rel="import" href="../paper-dropdown-menu.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="TrivialDropdownMenu">
|
||||
<template>
|
||||
<paper-dropdown-menu no-animations>
|
||||
<paper-menu class="dropdown-content">
|
||||
<paper-item>Foo</paper-item>
|
||||
<paper-item>Bar</paper-item>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('<paper-dropdown-menu>', function() {
|
||||
var dropdownMenu;
|
||||
|
||||
setup(function() {
|
||||
dropdownMenu = fixture('TrivialDropdownMenu');
|
||||
content = Polymer.dom(dropdownMenu).querySelector('.dropdown-content');
|
||||
});
|
||||
|
||||
test('opens when tapped', function(done) {
|
||||
var contentRect = content.getBoundingClientRect();
|
||||
|
||||
expect(contentRect.width).to.be.equal(0);
|
||||
expect(contentRect.height).to.be.equal(0);
|
||||
|
||||
MockInteractions.tap(dropdownMenu);
|
||||
expect(dropdownMenu.opened).to.be.equal(true);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
contentRect = content.getBoundingClientRect();
|
||||
|
||||
expect(dropdownMenu.opened).to.be.equal(true);
|
||||
|
||||
expect(contentRect.width).to.be.greaterThan(0);
|
||||
expect(contentRect.height).to.be.greaterThan(0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('closes when an item is activated', function(done) {
|
||||
MockInteractions.tap(dropdownMenu);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
var firstItem = Polymer.dom(content).querySelector('paper-item');
|
||||
|
||||
MockInteractions.tap(firstItem);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(dropdownMenu.opened).to.be.equal(false);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test('sets selected item to the activated item', function(done) {
|
||||
MockInteractions.tap(dropdownMenu);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
var firstItem = Polymer.dom(content).querySelector('paper-item');
|
||||
|
||||
MockInteractions.tap(firstItem);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(dropdownMenu.selectedItem).to.be.equal(firstItem);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
"tag": "v1.0.11",
|
||||
"commit": "a7af749e55fff7599d2ad9da47c86b286e9e2d6f"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-input.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/paper-input"
|
||||
"_source": "git://github.com/polymerelements/paper-input.git",
|
||||
"_target": "^1.0.9",
|
||||
"_originalSource": "polymerelements/paper-input"
|
||||
}
|
||||
53
dashboard-ui/bower_components/paper-menu-button/.bower.json
vendored
Normal file
53
dashboard-ui/bower_components/paper-menu-button/.bower.json
vendored
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
{
|
||||
"name": "paper-menu-button",
|
||||
"version": "1.0.2",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer"
|
||||
],
|
||||
"main": "paper-menu-button.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-menu-button"
|
||||
},
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/PolymerElements/paper-menu-button",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.0.0",
|
||||
"neon-animation": "polymerelements/neon-animation#^1.0.0",
|
||||
"paper-material": "polymerelements/paper-material#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"iron-dropdown": "polymerelements/iron-dropdown#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
|
||||
"iron-behaviors": "polymerelements/iron-behaviors#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "*",
|
||||
"paper-menu": "polymerelements/paper-menu#^1.0.0",
|
||||
"paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"paper-button": "polymerelements/paper-button#^1.0.0",
|
||||
"paper-item": "polymerelements/paper-item#^1.0.0",
|
||||
"iron-image": "polymerelements/iron-image#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "cf8bdea832bfa7b4f413e021ecb328273d659b17"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-menu-button.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/paper-menu-button"
|
||||
}
|
||||
1
dashboard-ui/bower_components/paper-menu-button/.gitignore
vendored
Normal file
1
dashboard-ui/bower_components/paper-menu-button/.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
bower_components
|
||||
44
dashboard-ui/bower_components/paper-menu-button/bower.json
vendored
Normal file
44
dashboard-ui/bower_components/paper-menu-button/bower.json
vendored
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
{
|
||||
"name": "paper-menu-button",
|
||||
"version": "1.0.2",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
],
|
||||
"keywords": [
|
||||
"web-components",
|
||||
"web-component",
|
||||
"polymer"
|
||||
],
|
||||
"main": "paper-menu-button.html",
|
||||
"private": true,
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/PolymerElements/paper-menu-button"
|
||||
},
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/PolymerElements/paper-menu-button",
|
||||
"dependencies": {
|
||||
"polymer": "polymer/polymer#^1.0.0",
|
||||
"neon-animation": "polymerelements/neon-animation#^1.0.0",
|
||||
"paper-material": "polymerelements/paper-material#^1.0.0",
|
||||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"iron-dropdown": "polymerelements/iron-dropdown#^1.0.0",
|
||||
"iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
|
||||
"iron-behaviors": "polymerelements/iron-behaviors#^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
|
||||
"test-fixture": "polymerelements/test-fixture#^1.0.0",
|
||||
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
|
||||
"web-component-tester": "*",
|
||||
"paper-menu": "polymerelements/paper-menu#^1.0.0",
|
||||
"paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
|
||||
"iron-icons": "polymerelements/iron-icons#^1.0.0",
|
||||
"paper-button": "polymerelements/paper-button#^1.0.0",
|
||||
"paper-item": "polymerelements/paper-item#^1.0.0",
|
||||
"iron-image": "polymerelements/iron-image#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0"
|
||||
}
|
||||
}
|
||||
203
dashboard-ui/bower_components/paper-menu-button/demo/index.html
vendored
Normal file
203
dashboard-ui/bower_components/paper-menu-button/demo/index.html
vendored
Normal file
|
|
@ -0,0 +1,203 @@
|
|||
<!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.0, user-scalable=yes">
|
||||
|
||||
<title>paper-menu-button</title>
|
||||
|
||||
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
|
||||
<link rel="import" href="../../iron-icons/iron-icons.html">
|
||||
<link rel="import" href="../../iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../../iron-image/iron-image.html">
|
||||
<link rel="import" href="../../paper-menu/paper-menu.html">
|
||||
<link rel="import" href="../../paper-item/paper-item.html">
|
||||
<link rel="import" href="../../paper-button/paper-button.html">
|
||||
<link rel="import" href="../../paper-icon-button/paper-icon-button.html">
|
||||
<link rel="import" href="../../paper-styles/demo-pages.html">
|
||||
|
||||
<link rel="import" href="../paper-menu-button.html">
|
||||
|
||||
<style>
|
||||
paper-button {
|
||||
display: block;
|
||||
background: #4285f4;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
paper-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
paper-menu-button {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
iron-image {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.item {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.horizontal-section {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body unresolved>
|
||||
|
||||
|
||||
<template id="Demo" is="dom-bind">
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Paper Icon Button + Paper Menu</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-menu-button>
|
||||
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
|
||||
<paper-menu class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[letters]]" as="letter">
|
||||
<paper-item>[[letter]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Paper Menu with multi selection</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-menu-button ignore-activate>
|
||||
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
|
||||
<paper-menu class="dropdown-content" multi>
|
||||
<template is="dom-repeat" items="[[letters]]" as="letter">
|
||||
<paper-item>[[letter]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Disabled</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-menu-button disabled>
|
||||
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
|
||||
<paper-menu class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[letters]]" as="letter">
|
||||
<paper-item>[[letter]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Alternate Alignment</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-menu-button vertical-align="bottom" horizontal-align="right">
|
||||
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
|
||||
<paper-menu class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[letters]]" as="letter">
|
||||
<paper-item>[[letter]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Alternate Button</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-menu-button>
|
||||
<paper-button class="dropdown-trigger" raised>
|
||||
<iron-icon icon="check"></iron-icon>
|
||||
<span>Dinosaurs</span>
|
||||
</paper-button>
|
||||
<paper-menu class="dropdown-content">
|
||||
<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
|
||||
<paper-item>[[dinosaur]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Alternate Content</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-menu-button vertical-align="bottom">
|
||||
<paper-icon-button class="dropdown-trigger" icon="polymer"></paper-icon-button>
|
||||
<iron-image class="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image>
|
||||
</paper-menu-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
Demo.letters = [
|
||||
'alpha',
|
||||
'beta',
|
||||
'gamma',
|
||||
'delta',
|
||||
'epsilon'
|
||||
];
|
||||
Demo.dinosaurs = [
|
||||
'allosaurus',
|
||||
'brontosaurus',
|
||||
'carcharodontosaurus',
|
||||
'diplodocus',
|
||||
'ekrixinatosaurus',
|
||||
'fukuiraptor',
|
||||
'gallimimus',
|
||||
'hadrosaurus',
|
||||
'iguanodon',
|
||||
'jainosaurus',
|
||||
'kritosaurus',
|
||||
'liaoceratops',
|
||||
'megalosaurus',
|
||||
'nemegtosaurus',
|
||||
'ornithomimus',
|
||||
'protoceratops',
|
||||
'quetecsaurus',
|
||||
'rajasaurus',
|
||||
'stegosaurus',
|
||||
'triceratops',
|
||||
'utahraptor',
|
||||
'vulcanodon',
|
||||
'wannanosaurus',
|
||||
'xenoceratops',
|
||||
'yandusaurus',
|
||||
'zephyrosaurus'
|
||||
];
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
39
dashboard-ui/bower_components/paper-menu-button/hero.svg
vendored
Normal file
39
dashboard-ui/bower_components/paper-menu-button/hero.svg
vendored
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<?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">
|
||||
<circle cx="109" cy="45" r="4"/>
|
||||
<path d="M165,50c-2.8,0-4.1-2.4-5.3-4.5c-1.2-2.2-2-3.5-3.5-3.5c-1.5,0-2.3,1.3-3.5,3.5c-1.2,2.1-2.5,4.5-5.3,4.5
|
||||
c-2.8,0-4.1-2.4-5.3-4.5c-1.2-2.2-2-3.5-3.5-3.5c-1.5,0-2.3,1.3-3.5,3.5c-1.2,2.1-2.5,4.5-5.3,4.5c-2.8,0-4.1-2.4-5.3-4.5
|
||||
c-1.2-2.2-2-3.5-3.5-3.5v-2c2.8,0,4.1,2.4,5.3,4.5c1.2,2.2,2,3.5,3.5,3.5c1.5,0,2.3-1.3,3.5-3.5c1.2-2.1,2.5-4.5,5.3-4.5
|
||||
c2.8,0,4.1,2.4,5.3,4.5c1.2,2.2,2,3.5,3.5,3.5c1.5,0,2.3-1.3,3.5-3.5c1.2-2.1,2.5-4.5,5.3-4.5s4.1,2.4,5.3,4.5
|
||||
c1.2,2.2,2,3.5,3.5,3.5V50z"/>
|
||||
<circle cx="109" cy="63" r="4"/>
|
||||
<path d="M165,68c-2.8,0-4.1-2.4-5.3-4.5c-1.2-2.2-2-3.5-3.5-3.5c-1.5,0-2.3,1.3-3.5,3.5c-1.2,2.1-2.5,4.5-5.3,4.5
|
||||
c-2.8,0-4.1-2.4-5.3-4.5c-1.2-2.2-2-3.5-3.5-3.5c-1.5,0-2.3,1.3-3.5,3.5c-1.2,2.1-2.5,4.5-5.3,4.5c-2.8,0-4.1-2.4-5.3-4.5
|
||||
c-1.2-2.2-2-3.5-3.5-3.5v-2c2.8,0,4.1,2.4,5.3,4.5c1.2,2.2,2,3.5,3.5,3.5c1.5,0,2.3-1.3,3.5-3.5c1.2-2.1,2.5-4.5,5.3-4.5
|
||||
c2.8,0,4.1,2.4,5.3,4.5c1.2,2.2,2,3.5,3.5,3.5c1.5,0,2.3-1.3,3.5-3.5c1.2-2.1,2.5-4.5,5.3-4.5s4.1,2.4,5.3,4.5
|
||||
c1.2,2.2,2,3.5,3.5,3.5V68z"/>
|
||||
<circle cx="109" cy="81" r="4"/>
|
||||
<path d="M165,86c-2.8,0-4.1-2.4-5.3-4.5c-1.2-2.2-2-3.5-3.5-3.5c-1.5,0-2.3,1.3-3.5,3.5c-1.2,2.1-2.5,4.5-5.3,4.5
|
||||
c-2.8,0-4.1-2.4-5.3-4.5c-1.2-2.2-2-3.5-3.5-3.5c-1.5,0-2.3,1.3-3.5,3.5c-1.2,2.1-2.5,4.5-5.3,4.5c-2.8,0-4.1-2.4-5.3-4.5
|
||||
c-1.2-2.2-2-3.5-3.5-3.5v-2c2.8,0,4.1,2.4,5.3,4.5c1.2,2.2,2,3.5,3.5,3.5c1.5,0,2.3-1.3,3.5-3.5c1.2-2.1,2.5-4.5,5.3-4.5
|
||||
c2.8,0,4.1,2.4,5.3,4.5c1.2,2.2,2,3.5,3.5,3.5c1.5,0,2.3-1.3,3.5-3.5c1.2-2.1,2.5-4.5,5.3-4.5s4.1,2.4,5.3,4.5
|
||||
c1.2,2.2,2,3.5,3.5,3.5V86z"/>
|
||||
<path d="M176,98H94V28h82V98z M96,96h78V30H96V96z"/>
|
||||
<circle cx="65" cy="61" r="8"/>
|
||||
<path d="M82,78H48V44h34V78z M50,76h30V46H50V76z"/>
|
||||
<rect x="81" y="58" width="14" height="2"/>
|
||||
<g id="ic_x5F_add_x0D_">
|
||||
</g>
|
||||
</g>
|
||||
<g id="Guides">
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
24
dashboard-ui/bower_components/paper-menu-button/index.html
vendored
Normal file
24
dashboard-ui/bower_components/paper-menu-button/index.html
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<!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
|
||||
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>
|
||||
|
||||
<title>paper-menu-button</title>
|
||||
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
|
||||
<link rel="import" href="../iron-component-page/iron-component-page.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<iron-component-page></iron-component-page>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
109
dashboard-ui/bower_components/paper-menu-button/paper-menu-button-animations.html
vendored
Normal file
109
dashboard-ui/bower_components/paper-menu-button/paper-menu-button-animations.html
vendored
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<!--
|
||||
@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="../neon-animation/web-animations.html">
|
||||
<link rel="import" href="../neon-animation/neon-animation-behavior.html">
|
||||
<script>
|
||||
Polymer({
|
||||
is: 'paper-menu-grow-height-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
var rect = node.getBoundingClientRect();
|
||||
var height = rect.height;
|
||||
|
||||
this._effect = new KeyframeEffect(node, [{
|
||||
height: (height / 2) + 'px'
|
||||
}, {
|
||||
height: height + 'px'
|
||||
}], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'paper-menu-grow-width-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
var rect = node.getBoundingClientRect();
|
||||
var width = rect.width;
|
||||
|
||||
this._effect = new KeyframeEffect(node, [{
|
||||
width: (width / 2) + 'px'
|
||||
}, {
|
||||
width: width + 'px'
|
||||
}], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'paper-menu-shrink-width-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
var rect = node.getBoundingClientRect();
|
||||
var width = rect.width;
|
||||
|
||||
this._effect = new KeyframeEffect(node, [{
|
||||
width: width + 'px'
|
||||
}, {
|
||||
width: width - (width / 20) + 'px'
|
||||
}], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
});
|
||||
|
||||
Polymer({
|
||||
is: 'paper-menu-shrink-height-animation',
|
||||
|
||||
behaviors: [
|
||||
Polymer.NeonAnimationBehavior
|
||||
],
|
||||
|
||||
configure: function(config) {
|
||||
var node = config.node;
|
||||
var rect = node.getBoundingClientRect();
|
||||
var height = rect.height;
|
||||
var top = rect.top;
|
||||
|
||||
this.setPrefixedProperty(node, 'transformOrigin', '0 0');
|
||||
|
||||
this._effect = new KeyframeEffect(node, [{
|
||||
height: height + 'px',
|
||||
transform: 'translateY(0)'
|
||||
}, {
|
||||
height: height / 2 + 'px',
|
||||
transform: 'translateY(-20px)'
|
||||
}], this.timingFromConfig(config));
|
||||
|
||||
return this._effect;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
349
dashboard-ui/bower_components/paper-menu-button/paper-menu-button.html
vendored
Normal file
349
dashboard-ui/bower_components/paper-menu-button/paper-menu-button.html
vendored
Normal file
|
|
@ -0,0 +1,349 @@
|
|||
<!--
|
||||
@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-dropdown/iron-dropdown.html">
|
||||
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
|
||||
<link rel="import" href="../iron-behaviors/iron-control-state.html">
|
||||
<link rel="import" href="../paper-material/paper-material.html">
|
||||
<link rel="import" href="../paper-styles/default-theme.html">
|
||||
<link rel="import" href="../neon-animation/animations/fade-in-animation.html">
|
||||
<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
|
||||
<link rel="import" href="paper-menu-button-animations.html">
|
||||
|
||||
<!--
|
||||
`paper-menu-button` allows one to compose a designated "trigger" element with
|
||||
another element that represents "content", to create a dropdown menu that
|
||||
displays the "content" when the "trigger" is clicked.
|
||||
|
||||
The child element with the class `dropdown-trigger` will be used as the
|
||||
"trigger" element. The child element with the class `dropdown-content` will be
|
||||
used as the "content" element.
|
||||
|
||||
The `paper-menu-button` is sensitive to its content's `iron-select` events. If
|
||||
the "content" element triggers an `iron-select` event, the `paper-menu-button`
|
||||
will close automatically.
|
||||
|
||||
Example:
|
||||
|
||||
<paper-menu-button>
|
||||
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
|
||||
<paper-menu class="dropdown-content">
|
||||
<paper-item>Share</paper-item>
|
||||
<paper-item>Settings</paper-item>
|
||||
<paper-item>Help</paper-item>
|
||||
</paper-menu>
|
||||
</paper-menu-button>
|
||||
|
||||
### Styling
|
||||
|
||||
The following custom properties and mixins are also available for styling:
|
||||
|
||||
Custom property | Description | Default
|
||||
----------------|-------------|----------
|
||||
`--paper-menu-button-dropdown-background` | Background color of the paper-menu-button dropdown | `#fff`
|
||||
`--paper-menu-button` | Mixin applied to the paper-menu-button | `{}`
|
||||
`--paper-menu-button-disabled` | Mixin applied to the paper-menu-button when disabled | `{}`
|
||||
`--paper-menu-button-dropdown` | Mixin applied to the paper-menu-button dropdown | `{}`
|
||||
|
||||
|
||||
@hero hero.svg
|
||||
@demo demo/index.html
|
||||
-->
|
||||
|
||||
<dom-module id="paper-menu-button">
|
||||
<style>
|
||||
:host {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
outline: none;
|
||||
|
||||
@apply(--paper-menu-button);
|
||||
}
|
||||
|
||||
:host([disabled]) {
|
||||
cursor: auto;
|
||||
color: var(--disabled-text-color);
|
||||
|
||||
@apply(--paper-menu-button-disabled);
|
||||
}
|
||||
|
||||
:host([vertical-align="top"]) paper-material {
|
||||
margin-bottom: 20px;
|
||||
margin-top: -10px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
:host([vertical-align="bottom"]) paper-material {
|
||||
bottom: 10px;
|
||||
margin-bottom: -10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
paper-material {
|
||||
border-radius: 2px;
|
||||
background-color: var(--paper-menu-button-dropdown-background, --primary-background-color);
|
||||
|
||||
@apply(--paper-menu-button-dropdown);
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div id="trigger" on-tap="open">
|
||||
<content select=".dropdown-trigger"></content>
|
||||
</div>
|
||||
<iron-dropdown
|
||||
id="dropdown"
|
||||
opened="{{opened}}"
|
||||
horizontal-align="[[horizontalAlign]]"
|
||||
vertical-align="[[verticalAlign]]"
|
||||
horizontal-offset="[[horizontalOffset]]"
|
||||
vertical-offset="[[verticalOffset]]"
|
||||
open-animation-config="[[openAnimationConfig]]"
|
||||
close-animation-config="[[closeAnimationConfig]]"
|
||||
no-animations="[[noAnimations]]">
|
||||
<paper-material class="dropdown-content">
|
||||
<content select=".dropdown-content"></content>
|
||||
</paper-material>
|
||||
</iron-dropdown>
|
||||
</template>
|
||||
</dom-module>
|
||||
<script>
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
var PaperMenuButton = Polymer({
|
||||
is: 'paper-menu-button',
|
||||
|
||||
/**
|
||||
* Fired when the dropdown opens.
|
||||
*
|
||||
* @event paper-dropdown-open
|
||||
*/
|
||||
|
||||
/**
|
||||
* Fired when the dropdown closes.
|
||||
*
|
||||
* @event paper-dropdown-close
|
||||
*/
|
||||
|
||||
behaviors: [
|
||||
Polymer.IronA11yKeysBehavior,
|
||||
Polymer.IronControlState
|
||||
],
|
||||
|
||||
properties: {
|
||||
|
||||
/**
|
||||
* True if the content is currently displayed.
|
||||
*/
|
||||
opened: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The orientation against which to align the menu dropdown
|
||||
* horizontally relative to the dropdown trigger.
|
||||
*/
|
||||
horizontalAlign: {
|
||||
type: String,
|
||||
value: 'left',
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/**
|
||||
* The orientation against which to align the menu dropdown
|
||||
* vertically relative to the dropdown trigger.
|
||||
*/
|
||||
verticalAlign: {
|
||||
type: String,
|
||||
value: 'top',
|
||||
reflectToAttribute: true
|
||||
},
|
||||
|
||||
/**
|
||||
* A pixel value that will be added to the position calculated for the
|
||||
* given `horizontalAlign`. Use a negative value to offset to the
|
||||
* left, or a positive value to offset to the right.
|
||||
*/
|
||||
horizontalOffset: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* A pixel value that will be added to the position calculated for the
|
||||
* given `verticalAlign`. Use a negative value to offset towards the
|
||||
* top, or a positive value to offset towards the bottom.
|
||||
*/
|
||||
verticalOffset: {
|
||||
type: Number,
|
||||
value: 0,
|
||||
notify: true
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable animations when opening and closing the
|
||||
* dropdown.
|
||||
*/
|
||||
noAnimations: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable automatically closing the dropdown after
|
||||
* a selection has been made.
|
||||
*/
|
||||
ignoreActivate: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
||||
/**
|
||||
* An animation config. If provided, this will be used to animate the
|
||||
* opening of the dropdown.
|
||||
*/
|
||||
openAnimationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return [{
|
||||
name: 'fade-in-animation',
|
||||
timing: {
|
||||
delay: 100,
|
||||
duration: 200
|
||||
}
|
||||
}, {
|
||||
name: 'paper-menu-grow-width-animation',
|
||||
timing: {
|
||||
delay: 100,
|
||||
duration: 150,
|
||||
easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
|
||||
}
|
||||
}, {
|
||||
name: 'paper-menu-grow-height-animation',
|
||||
timing: {
|
||||
delay: 100,
|
||||
duration: 275,
|
||||
easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
|
||||
}
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* An animation config. If provided, this will be used to animate the
|
||||
* closing of the dropdown.
|
||||
*/
|
||||
closeAnimationConfig: {
|
||||
type: Object,
|
||||
value: function() {
|
||||
return [{
|
||||
name: 'fade-out-animation',
|
||||
timing: {
|
||||
duration: 150
|
||||
}
|
||||
}, {
|
||||
name: 'paper-menu-shrink-width-animation',
|
||||
timing: {
|
||||
delay: 100,
|
||||
duration: 50,
|
||||
easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
|
||||
}
|
||||
}, {
|
||||
name: 'paper-menu-shrink-height-animation',
|
||||
timing: {
|
||||
duration: 200,
|
||||
easing: 'ease-in'
|
||||
}
|
||||
}];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
hostAttributes: {
|
||||
role: 'group',
|
||||
'aria-haspopup': 'true'
|
||||
},
|
||||
|
||||
listeners: {
|
||||
'iron-activate': '_onIronActivate'
|
||||
},
|
||||
|
||||
/**
|
||||
* Make the dropdown content appear as an overlay positioned relative
|
||||
* to the dropdown trigger.
|
||||
*/
|
||||
open: function() {
|
||||
if (this.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$.dropdown.open();
|
||||
},
|
||||
|
||||
/**
|
||||
* Hide the dropdown content.
|
||||
*/
|
||||
close: function() {
|
||||
this.$.dropdown.close();
|
||||
},
|
||||
|
||||
/**
|
||||
* When an `iron-activate` event is received, the dropdown should
|
||||
* automatically close on the assumption that a value has been chosen.
|
||||
*
|
||||
* @param {CustomEvent} event A CustomEvent instance with type
|
||||
* set to `"iron-activate"`.
|
||||
*/
|
||||
_onIronActivate: function(event) {
|
||||
if (!this.ignoreActivate) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* When the dropdown opens, the `paper-menu-button` fires `paper-open`.
|
||||
* When the dropdown closes, the `paper-menu-button` fires `paper-close`.
|
||||
*
|
||||
* @param {boolean} opened True if the dropdown is opened, otherwise false.
|
||||
* @param {boolean} oldOpened The previous value of `opened`.
|
||||
*/
|
||||
_openedChanged: function(opened, oldOpened) {
|
||||
if (opened) {
|
||||
this.fire('paper-dropdown-open');
|
||||
} else if (oldOpened != null) {
|
||||
this.fire('paper-dropdown-close');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* If the dropdown is open when disabled becomes true, close the
|
||||
* dropdown.
|
||||
*
|
||||
* @param {boolean} disabled True if disabled, otherwise false.
|
||||
*/
|
||||
_disabledChanged: function(disabled) {
|
||||
Polymer.IronControlState._disabledChanged.apply(this, arguments);
|
||||
if (disabled && this.opened) {
|
||||
this.close();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
PaperMenuButton.ANIMATION_CUBIC_BEZIER = 'cubic-bezier(.3,.95,.5,1)';
|
||||
PaperMenuButton.MAX_ANIMATION_TIME_MS = 400;
|
||||
|
||||
Polymer.PaperMenuButton = PaperMenuButton;
|
||||
})();
|
||||
</script>
|
||||
25
dashboard-ui/bower_components/paper-menu-button/test/index.html
vendored
Normal file
25
dashboard-ui/bower_components/paper-menu-button/test/index.html
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<!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-button tests</title>
|
||||
<script src="../../web-component-tester/browser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
WCT.loadSuites([
|
||||
'paper-menu-button.html'
|
||||
]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
109
dashboard-ui/bower_components/paper-menu-button/test/paper-menu-button.html
vendored
Normal file
109
dashboard-ui/bower_components/paper-menu-button/test/paper-menu-button.html
vendored
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<!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">
|
||||
<title>paper-menu-button basic tests</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-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>
|
||||
<script src="../../iron-test-helpers/mock-interactions.js"></script>
|
||||
|
||||
<link rel="import" href="../paper-menu-button.html">
|
||||
<link rel="import" href="../../test-fixture/test-fixture.html">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<test-fixture id="TrivialMenuButton">
|
||||
<template>
|
||||
<paper-menu-button no-animations>
|
||||
<span class="dropdown-trigger">trigger</span>
|
||||
<span class="dropdown-content">content</span>
|
||||
</paper-menu-button>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
suite('<paper-menu-button>', function() {
|
||||
var menuButton;
|
||||
var trigger;
|
||||
var content;
|
||||
|
||||
setup(function() {
|
||||
menuButton = fixture('TrivialMenuButton');
|
||||
trigger = Polymer.dom(menuButton).querySelector('.dropdown-trigger');
|
||||
content = Polymer.dom(menuButton).querySelector('.dropdown-content');
|
||||
});
|
||||
|
||||
test('opens when trigger is clicked', function(done) {
|
||||
var contentRect;
|
||||
|
||||
contentRect = content.getBoundingClientRect();
|
||||
|
||||
expect(contentRect.width).to.be.equal(0);
|
||||
expect(contentRect.height).to.be.equal(0);
|
||||
|
||||
MockInteractions.tap(trigger);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
contentRect = content.getBoundingClientRect();
|
||||
|
||||
expect(menuButton.opened).to.be.equal(true);
|
||||
|
||||
expect(contentRect.width).to.be.greaterThan(0);
|
||||
expect(contentRect.height).to.be.greaterThan(0);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('closes when trigger is clicked again', function(done) {
|
||||
MockInteractions.tap(trigger);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
|
||||
MockInteractions.tap(trigger);
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
var contentRect = content.getBoundingClientRect();
|
||||
|
||||
expect(menuButton.opened).to.be.equal(false);
|
||||
|
||||
expect(contentRect.width).to.be.equal(0);
|
||||
expect(contentRect.height).to.be.equal(0);
|
||||
|
||||
done();
|
||||
}, Polymer.PaperMenuButton.MAX_ANIMATION_TIME_MS);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
test('closes when disabled while open', function() {
|
||||
var contentRect;
|
||||
|
||||
menuButton.opened = true;
|
||||
menuButton.disabled = true;
|
||||
|
||||
expect(menuButton.opened).to.be.equal(false);
|
||||
|
||||
contentRect = content.getBoundingClientRect();
|
||||
expect(contentRect.width).to.be.equal(0);
|
||||
expect(contentRect.height).to.be.equal(0);
|
||||
});
|
||||
|
||||
test('has aria-haspopup attribute', function() {
|
||||
expect(menuButton.hasAttribute('aria-haspopup')).to.be.equal(true);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue