update detail screens
This commit is contained in:
Luke Pulverenti
parent
7b42686295
commit
f5323ff3c2
34 changed files with 682 additions and 658 deletions
|
|
@ -29,14 +29,14 @@
|
|||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/polymerelements/iron-a11y-keys-behavior",
|
||||
"homepage": "https://github.com/PolymerElements/iron-a11y-keys-behavior",
|
||||
"_release": "1.0.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.5",
|
||||
"commit": "cf833eab5c55a26c5aa92e56d3fcb079120ce66a"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-a11y-keys-behavior.git",
|
||||
"_source": "git://github.com/PolymerElements/iron-a11y-keys-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/iron-a11y-keys-behavior"
|
||||
"_originalSource": "PolymerElements/iron-a11y-keys-behavior"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-dropdown",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -35,11 +35,11 @@
|
|||
"web-component-tester": "*",
|
||||
"iron-image": "polymerelements/iron-image#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.4",
|
||||
"_release": "1.0.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.4",
|
||||
"commit": "9a09e5ed5a4c6ee9643caba74022a01135c7878b"
|
||||
"tag": "v1.0.5",
|
||||
"commit": "9c300a14a5aeca1c02f085e9117521af814ce640"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/iron-dropdown.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "iron-dropdown",
|
||||
"version": "1.0.4",
|
||||
"version": "1.0.5",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<div class="horizontal-section flex layout horizontal">
|
||||
<x-select>
|
||||
<button class="dropdown-trigger">Basic</button>
|
||||
<ul class="dropdown-content">
|
||||
<ul class="dropdown-content" tabindex="0">
|
||||
<template is="dom-repeat" items="[[letters]]">
|
||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||
</template>
|
||||
|
|
@ -101,7 +101,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</x-select>
|
||||
<x-select vertical-align="bottom">
|
||||
<button class="dropdown-trigger">Bottom-left Aligned</button>
|
||||
<ul class="dropdown-content">
|
||||
<ul class="dropdown-content" tabindex="0">
|
||||
<template is="dom-repeat" items="[[letters]]">
|
||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||
</template>
|
||||
|
|
@ -109,7 +109,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</x-select>
|
||||
<x-select horizontal-align="right" vertical-align="top">
|
||||
<button class="dropdown-trigger">Top-right Aligned</button>
|
||||
<ul class="dropdown-content">
|
||||
<ul class="dropdown-content" tabindex="0">
|
||||
<template is="dom-repeat" items="[[dinosaurs]]">
|
||||
<li><a href="javascript:void(0)">[[item]]</a></li>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -145,6 +145,14 @@ method is called on the element.
|
|||
type: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* If provided, this will be the element that will be focused when
|
||||
* the dropdown opens.
|
||||
*/
|
||||
focusTarget: {
|
||||
type: Object
|
||||
},
|
||||
|
||||
/**
|
||||
* Set to true to disable animations when opening and closing the
|
||||
* dropdown.
|
||||
|
|
@ -185,6 +193,17 @@ method is called on the element.
|
|||
return Polymer.dom(this.$.content).getDistributedNodes()[0];
|
||||
},
|
||||
|
||||
/**
|
||||
* The element that should be focused when the dropdown opens.
|
||||
*/
|
||||
get _focusTarget() {
|
||||
return this.focusTarget || this.containedElement;
|
||||
},
|
||||
|
||||
/**
|
||||
* The element that should be used to position the dropdown when
|
||||
* it opens, if no position target is configured.
|
||||
*/
|
||||
get _defaultPositionTarget() {
|
||||
var parent = Polymer.dom(this).parentNode;
|
||||
|
||||
|
|
@ -195,6 +214,9 @@ method is called on the element.
|
|||
return parent;
|
||||
},
|
||||
|
||||
/**
|
||||
* The bounding rect of the position target.
|
||||
*/
|
||||
get _positionRect() {
|
||||
if (!this._positionRectMemo && this.positionTarget) {
|
||||
this._positionRectMemo = this.positionTarget.getBoundingClientRect();
|
||||
|
|
@ -203,6 +225,9 @@ method is called on the element.
|
|||
return this._positionRectMemo;
|
||||
},
|
||||
|
||||
/**
|
||||
* The horizontal offset value used to position the dropdown.
|
||||
*/
|
||||
get _horizontalAlignTargetValue() {
|
||||
var target;
|
||||
|
||||
|
|
@ -217,6 +242,9 @@ method is called on the element.
|
|||
return Math.max(target, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* The vertical offset value used to position the dropdown.
|
||||
*/
|
||||
get _verticalAlignTargetValue() {
|
||||
var target;
|
||||
|
||||
|
|
@ -231,27 +259,41 @@ method is called on the element.
|
|||
return Math.max(target, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the value of `opened` changes.
|
||||
*
|
||||
* @param {boolean} opened True if the dropdown is opened.
|
||||
*/
|
||||
_openedChanged: function(opened) {
|
||||
if (opened && this.disabled) {
|
||||
this.cancel();
|
||||
} else {
|
||||
this._cancelAnimations();
|
||||
this.cancelAnimation();
|
||||
this._prepareDropdown();
|
||||
Polymer.IronOverlayBehaviorImpl._openedChanged.apply(this, arguments);
|
||||
}
|
||||
|
||||
if (this.opened) {
|
||||
this._focusContent();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Overridden from `IronOverlayBehavior`.
|
||||
*/
|
||||
_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);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Overridden from `IronOverlayBehavior`.
|
||||
*/
|
||||
_renderClosed: function() {
|
||||
Polymer.IronDropdownScrollManager.removeScrollLock(this);
|
||||
if (!this.noAnimations && this.animationConfig && this.animationConfig.close) {
|
||||
|
|
@ -262,6 +304,12 @@ method is called on the element.
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when animation finishes on the dropdown (when opening or
|
||||
* closing). Responsible for "completing" the process of opening or
|
||||
* closing the dropdown by positioning it or setting its display to
|
||||
* none.
|
||||
*/
|
||||
_onNeonAnimationFinish: function() {
|
||||
this.$.contentWrapper.classList.remove('animating');
|
||||
if (this.opened) {
|
||||
|
|
@ -271,6 +319,9 @@ method is called on the element.
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when an `iron-resize` event fires.
|
||||
*/
|
||||
_onIronResize: function() {
|
||||
var containedElement = this.containedElement;
|
||||
var scrollTop;
|
||||
|
|
@ -293,14 +344,17 @@ method is called on the element.
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Called when the `positionTarget` property changes.
|
||||
*/
|
||||
_positionTargetChanged: function() {
|
||||
this._updateOverlayPosition();
|
||||
},
|
||||
|
||||
_cancelAnimations: function() {
|
||||
this.cancelAnimation();
|
||||
},
|
||||
|
||||
/**
|
||||
* Constructs the final animation config from different properties used
|
||||
* to configure specific parts of the opening and closing animations.
|
||||
*/
|
||||
_updateAnimationConfig: function() {
|
||||
var animationConfig = {};
|
||||
var animations = [];
|
||||
|
|
@ -328,12 +382,21 @@ method is called on the element.
|
|||
this.animationConfig = animationConfig;
|
||||
},
|
||||
|
||||
/**
|
||||
* Prepares the dropdown for opening by updating measured layout
|
||||
* values.
|
||||
*/
|
||||
_prepareDropdown: function() {
|
||||
this.sizingTarget = this.containedElement || this.sizingTarget;
|
||||
this._updateAnimationConfig();
|
||||
this._updateOverlayPosition();
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates the overlay position based on configured horizontal
|
||||
* and vertical alignment, and re-memoizes these values for the sake
|
||||
* of behavior in `IronFitBehavior`.
|
||||
*/
|
||||
_updateOverlayPosition: function() {
|
||||
this._positionRectMemo = null;
|
||||
|
||||
|
|
@ -359,10 +422,17 @@ method is called on the element.
|
|||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Focuses the configured focus target.
|
||||
*/
|
||||
_focusContent: function() {
|
||||
if (this.containedElement) {
|
||||
this.containedElement.focus();
|
||||
}
|
||||
// NOTE(cdata): This is async so that it can attempt the focus after
|
||||
// `display: none` is removed from the element.
|
||||
this.async(function() {
|
||||
if (this._focusTarget) {
|
||||
this._focusTarget.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -43,6 +43,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="FocusableContentDropdown">
|
||||
<template>
|
||||
<iron-dropdown>
|
||||
<div class="dropdown-content" tabindex="0">
|
||||
<div class="subcontent" tabindex="0"></div>
|
||||
</div>
|
||||
</iron-dropdown>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
function elementIsVisible(element) {
|
||||
var contentRect = element.getBoundingClientRect();
|
||||
|
|
@ -55,20 +65,19 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
|
||||
suite('<iron-dropdown>', function() {
|
||||
var dropdown;
|
||||
var content;
|
||||
|
||||
suite('basic', function() {
|
||||
setup(function() {
|
||||
dropdown = fixture('TrivialDropdown');
|
||||
content = Polymer.dom(dropdown).querySelector('.dropdown-content');
|
||||
});
|
||||
|
||||
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() {
|
||||
|
|
@ -78,8 +87,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
});
|
||||
|
||||
test('hides dropdown content when outside is clicked', function(done) {
|
||||
var content = dropdown.querySelector('.dropdown-content');
|
||||
|
||||
dropdown.open();
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
|
|
@ -93,7 +100,34 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
}, 100);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('when content is focusable', function() {
|
||||
setup(function() {
|
||||
dropdown = fixture('FocusableContentDropdown');
|
||||
content = Polymer.dom(dropdown).querySelector('.dropdown-content');
|
||||
});
|
||||
test('focuses the content when opened', function(done) {
|
||||
dropdown.open();
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(document.activeElement).to.be.equal(content);
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
test('focuses a configured focus target', function(done) {
|
||||
var focusableChild = Polymer.dom(content).querySelector('div[tabindex]');
|
||||
dropdown.focusTarget = focusableChild;
|
||||
|
||||
dropdown.open();
|
||||
|
||||
Polymer.Base.async(function() {
|
||||
expect(document.activeElement).to.not.be.equal(content);
|
||||
expect(document.activeElement).to.be.equal(focusableChild);
|
||||
done();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -23,14 +23,14 @@
|
|||
"paper-styles": "polymerelements/paper-styles#^1.0.0",
|
||||
"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"
|
||||
}
|
||||
|
|
@ -34,14 +34,14 @@
|
|||
"web-component-tester": "*",
|
||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||
},
|
||||
"homepage": "https://github.com/PolymerElements/iron-overlay-behavior",
|
||||
"homepage": "https://github.com/polymerelements/iron-overlay-behavior",
|
||||
"_release": "1.0.5",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.5",
|
||||
"commit": "f03cea265587c724cf3a85aef76b2ab7ccfd2b94"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/iron-overlay-behavior.git",
|
||||
"_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/iron-overlay-behavior"
|
||||
"_originalSource": "polymerelements/iron-overlay-behavior"
|
||||
}
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
"tag": "v1.0.6",
|
||||
"commit": "ec51bf68f05c40373536cc726ca674e4549b7db2"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/neon-animation.git",
|
||||
"_source": "git://github.com/polymerelements/neon-animation.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "PolymerElements/neon-animation"
|
||||
"_originalSource": "polymerelements/neon-animation"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-dropdown-menu",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"description": "An element that works similarly to a native browser select",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -40,14 +40,13 @@
|
|||
"web-component-tester": "*",
|
||||
"paper-tabs": "polymerelements/paper-tabs#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.1",
|
||||
"_release": "1.0.2",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.1",
|
||||
"commit": "c16e6087ce4b770938b96647e80c78765eea41fa"
|
||||
"tag": "v1.0.2",
|
||||
"commit": "fbf234c7bc8affe37e24c0b206d30551bc3289e5"
|
||||
},
|
||||
"_source": "git://github.com/PolymerElements/paper-dropdown-menu.git",
|
||||
"_target": "~1.0.1",
|
||||
"_originalSource": "PolymerElements/paper-dropdown-menu",
|
||||
"_direct": true
|
||||
"_originalSource": "PolymerElements/paper-dropdown-menu"
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-dropdown-menu",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"description": "An element that works similarly to a native browser select",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
|
|||
|
|
@ -73,6 +73,21 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Pre-selected Value</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-dropdown-menu label="Dinosaurs">
|
||||
<paper-menu class="dropdown-content" selected="1">
|
||||
<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
|
||||
<paper-item>[[dinosaur]]</paper-item>
|
||||
</template>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="horizontal-section-container">
|
||||
<div>
|
||||
<h4>Disabled</h4>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ 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
|
||||
menu. It could be a `paper-menu` or element that triggers `iron-select` when
|
||||
selecting its children.
|
||||
|
||||
Example:
|
||||
|
|
@ -130,7 +130,7 @@ respectively.
|
|||
vertical-offset="[[_computeMenuVerticalOffset(noLabelFloat)]]"
|
||||
disabled="[[disabled]]"
|
||||
no-animations="[[noAnimations]]"
|
||||
on-iron-activate="_onIronActivate"
|
||||
on-iron-select="_onIronSelect"
|
||||
opened="{{opened}}">
|
||||
<div class="dropdown-trigger">
|
||||
<paper-ripple></paper-ripple>
|
||||
|
|
@ -145,9 +145,7 @@ respectively.
|
|||
<iron-icon icon="arrow-drop-down" suffix></iron-icon>
|
||||
</paper-input>
|
||||
</div>
|
||||
<div class="dropdown-content">
|
||||
<content select=".dropdown-content"></content>
|
||||
</div>
|
||||
<content id="content" select=".dropdown-content"></content>
|
||||
</paper-menu-button>
|
||||
</template>
|
||||
</dom-module>
|
||||
|
|
@ -190,7 +188,7 @@ respectively.
|
|||
/**
|
||||
* 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`.
|
||||
* `iron-select` event with the selected `item` in the `detail`.
|
||||
*/
|
||||
selectedItem: {
|
||||
type: Object,
|
||||
|
|
@ -264,6 +262,24 @@ respectively.
|
|||
'aria-haspopup': 'true'
|
||||
},
|
||||
|
||||
attached: function() {
|
||||
// NOTE(cdata): Due to timing, a preselected value in a `IronSelectable`
|
||||
// child will cause an `iron-select` event to fire while the element is
|
||||
// still in a `DocumentFragment`. This has the effect of causing
|
||||
// handlers not to fire. So, we double check this value on attached:
|
||||
var contentElement = this.contentElement;
|
||||
if (contentElement && contentElement.selectedItem) {
|
||||
this._setSelectedItem(contentElement.selectedItem);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* The content element that is contained by the dropdown menu, if any.
|
||||
*/
|
||||
get contentElement() {
|
||||
return Polymer.dom(this.$.content).getDistributedNodes()[0];
|
||||
},
|
||||
|
||||
/**
|
||||
* Show the dropdown content.
|
||||
*/
|
||||
|
|
@ -279,11 +295,11 @@ respectively.
|
|||
},
|
||||
|
||||
/**
|
||||
* A handler that is called when `iron-activate` is fired.
|
||||
* A handler that is called when `iron-select` is fired.
|
||||
*
|
||||
* @param {CustomEvent} event An `iron-activate` event.
|
||||
* @param {CustomEvent} event An `iron-select` event.
|
||||
*/
|
||||
_onIronActivate: function(event) {
|
||||
_onIronSelect: function(event) {
|
||||
this._setSelectedItem(event.detail.item);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -38,6 +38,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<test-fixture id="PreselectedDropdownMenu">
|
||||
<template>
|
||||
<paper-dropdown-menu no-animations>
|
||||
<paper-menu class="dropdown-content" selected="1">
|
||||
<paper-item>Foo</paper-item>
|
||||
<paper-item>Bar</paper-item>
|
||||
</paper-menu>
|
||||
</paper-dropdown-menu>
|
||||
</template>
|
||||
</test-fixture>
|
||||
|
||||
<script>
|
||||
|
||||
suite('<paper-dropdown-menu>', function() {
|
||||
|
|
@ -97,6 +108,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
suite('when a value is preselected', function() {
|
||||
setup(function() {
|
||||
dropdownMenu = fixture('PreselectedDropdownMenu');
|
||||
});
|
||||
|
||||
test('the input area shows the correct selection', function() {
|
||||
var secondItem = Polymer.dom(dropdownMenu).querySelectorAll('paper-item')[1];
|
||||
expect(dropdownMenu.selectedItem).to.be.equal(secondItem);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-menu-button",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
@ -41,11 +41,11 @@
|
|||
"iron-image": "polymerelements/iron-image#^1.0.0",
|
||||
"iron-icon": "polymerelements/iron-icon#^1.0.0"
|
||||
},
|
||||
"_release": "1.0.2",
|
||||
"_release": "1.0.3",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.0.2",
|
||||
"commit": "cf8bdea832bfa7b4f413e021ecb328273d659b17"
|
||||
"tag": "v1.0.3",
|
||||
"commit": "24abacffd443f967125f5eae580eadc7b90f41c7"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-menu-button.git",
|
||||
"_target": "^1.0.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "paper-menu-button",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.3",
|
||||
"description": "",
|
||||
"authors": [
|
||||
"The Polymer Authors"
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
|||
<div>
|
||||
<h4>Paper Menu with multi selection</h4>
|
||||
<div class="horizontal-section">
|
||||
<paper-menu-button ignore-activate>
|
||||
<paper-menu-button ignore-select>
|
||||
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
|
||||
<paper-menu class="dropdown-content" multi>
|
||||
<template is="dom-repeat" items="[[letters]]" as="letter">
|
||||
|
|
|
|||
|
|
@ -108,9 +108,10 @@ Custom property | Description | Default
|
|||
vertical-offset="[[verticalOffset]]"
|
||||
open-animation-config="[[openAnimationConfig]]"
|
||||
close-animation-config="[[closeAnimationConfig]]"
|
||||
no-animations="[[noAnimations]]">
|
||||
no-animations="[[noAnimations]]"
|
||||
focus-target="[[_dropdownContent]]">
|
||||
<paper-material class="dropdown-content">
|
||||
<content select=".dropdown-content"></content>
|
||||
<content id="content" select=".dropdown-content"></content>
|
||||
</paper-material>
|
||||
</iron-dropdown>
|
||||
</template>
|
||||
|
|
@ -147,7 +148,8 @@ Custom property | Description | Default
|
|||
opened: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
notify: true
|
||||
notify: true,
|
||||
observer: '_openedChanged'
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -205,7 +207,7 @@ Custom property | Description | Default
|
|||
* Set to true to disable automatically closing the dropdown after
|
||||
* a selection has been made.
|
||||
*/
|
||||
ignoreActivate: {
|
||||
ignoreSelect: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
|
|
@ -268,6 +270,14 @@ Custom property | Description | Default
|
|||
}
|
||||
}];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* This is the element intended to be bound as the focus target
|
||||
* for the `iron-dropdown` contained by `paper-menu-button`.
|
||||
*/
|
||||
_dropdownContent: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -277,7 +287,14 @@ Custom property | Description | Default
|
|||
},
|
||||
|
||||
listeners: {
|
||||
'iron-activate': '_onIronActivate'
|
||||
'iron-select': '_onIronSelect'
|
||||
},
|
||||
|
||||
/**
|
||||
* The content element that is contained by the menu button, if any.
|
||||
*/
|
||||
get contentElement() {
|
||||
return Polymer.dom(this.$.content).getDistributedNodes()[0];
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -300,14 +317,14 @@ Custom property | Description | Default
|
|||
},
|
||||
|
||||
/**
|
||||
* When an `iron-activate` event is received, the dropdown should
|
||||
* When an `iron-select` event is received, the dropdown should
|
||||
* automatically close on the assumption that a value has been chosen.
|
||||
*
|
||||
* @param {CustomEvent} event A CustomEvent instance with type
|
||||
* set to `"iron-activate"`.
|
||||
* set to `"iron-select"`.
|
||||
*/
|
||||
_onIronActivate: function(event) {
|
||||
if (!this.ignoreActivate) {
|
||||
_onIronSelect: function(event) {
|
||||
if (!this.ignoreSelect) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
|
|
@ -321,6 +338,12 @@ Custom property | Description | Default
|
|||
*/
|
||||
_openedChanged: function(opened, oldOpened) {
|
||||
if (opened) {
|
||||
// TODO(cdata): Update this when we can measure changes in distributed
|
||||
// children in an idiomatic way.
|
||||
// We poke this property in case the element has changed. This will
|
||||
// cause the focus target for the `iron-dropdown` to be updated as
|
||||
// necessary:
|
||||
this._dropdownContent = this.contentElement;
|
||||
this.fire('paper-dropdown-open');
|
||||
} else if (oldOpened != null) {
|
||||
this.fire('paper-dropdown-close');
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@
|
|||
"tag": "v1.0.11",
|
||||
"commit": "347542e9ebe3e6e5f0830ee10e1c20c12956ff2c"
|
||||
},
|
||||
"_source": "git://github.com/polymerelements/paper-styles.git",
|
||||
"_source": "git://github.com/PolymerElements/paper-styles.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymerelements/paper-styles"
|
||||
"_originalSource": "PolymerElements/paper-styles"
|
||||
}
|
||||
|
|
@ -23,14 +23,14 @@
|
|||
"web-component-tester": "*"
|
||||
},
|
||||
"private": true,
|
||||
"homepage": "https://github.com/polymer/polymer",
|
||||
"homepage": "https://github.com/Polymer/polymer",
|
||||
"_release": "1.1.0",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "v1.1.0",
|
||||
"commit": "67fb2f85fd66d8556fc07cf1dec41ff5273fa68a"
|
||||
},
|
||||
"_source": "git://github.com/polymer/polymer.git",
|
||||
"_source": "git://github.com/Polymer/polymer.git",
|
||||
"_target": "^1.0.0",
|
||||
"_originalSource": "polymer/polymer"
|
||||
"_originalSource": "Polymer/polymer"
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue