| Index: polymer_1.0.4/bower_components/iron-dropdown/iron-dropdown.html
|
| diff --git a/polymer_1.0.4/bower_components/iron-dropdown/iron-dropdown.html b/polymer_1.0.4/bower_components/iron-dropdown/iron-dropdown.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..db1bb08fe65a578d59861232b73249d72324b34c
|
| --- /dev/null
|
| +++ b/polymer_1.0.4/bower_components/iron-dropdown/iron-dropdown.html
|
| @@ -0,0 +1,345 @@
|
| +<!--
|
| +@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
|
| + },
|
| +
|
| + /**
|
| + * 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)'
|
| + ],
|
| +
|
| + 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;
|
| + }
|
| +
|
| + 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;
|
| + }
|
| +
|
| + 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>
|
| +
|
|
|