| OLD | NEW |
| 1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2013 The Chromium Authors. All rights reserved. |
| 2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 /** | 5 /** |
| 6 * @fileoverview Assertion support. | 6 * @fileoverview Assertion support. |
| 7 */ | 7 */ |
| 8 | 8 |
| 9 /** | 9 /** |
| 10 * Verify |condition| is truthy and return |condition| if so. | 10 * Verify |condition| is truthy and return |condition| if so. |
| (...skipping 1915 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 1926 * node. | 1926 * node. |
| 1927 * The `keys-pressed` event will fire when one of the key combinations set w
ith the | 1927 * The `keys-pressed` event will fire when one of the key combinations set w
ith the |
| 1928 * `keys` property is pressed. | 1928 * `keys` property is pressed. |
| 1929 * | 1929 * |
| 1930 * @demo demo/index.html | 1930 * @demo demo/index.html |
| 1931 * @polymerBehavior | 1931 * @polymerBehavior |
| 1932 */ | 1932 */ |
| 1933 Polymer.IronA11yKeysBehavior = { | 1933 Polymer.IronA11yKeysBehavior = { |
| 1934 properties: { | 1934 properties: { |
| 1935 /** | 1935 /** |
| 1936 * The EventTarget that will be firing relevant KeyboardEvents. Set it t
o | 1936 * The HTMLElement that will be firing relevant KeyboardEvents. |
| 1937 * `null` to disable the listeners. | |
| 1938 * @type {?EventTarget} | |
| 1939 */ | 1937 */ |
| 1940 keyEventTarget: { | 1938 keyEventTarget: { |
| 1941 type: Object, | 1939 type: Object, |
| 1942 value: function() { | 1940 value: function() { |
| 1943 return this; | 1941 return this; |
| 1944 } | 1942 } |
| 1945 }, | 1943 }, |
| 1946 | 1944 |
| 1947 /** | 1945 /** |
| 1948 * If true, this property will cause the implementing element to | 1946 * If true, this property will cause the implementing element to |
| (...skipping 119 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 2068 this._keyBindings[keyCombo.event].push([ | 2066 this._keyBindings[keyCombo.event].push([ |
| 2069 keyCombo, | 2067 keyCombo, |
| 2070 handlerName | 2068 handlerName |
| 2071 ]); | 2069 ]); |
| 2072 }, this); | 2070 }, this); |
| 2073 }, | 2071 }, |
| 2074 | 2072 |
| 2075 _resetKeyEventListeners: function() { | 2073 _resetKeyEventListeners: function() { |
| 2076 this._unlistenKeyEventListeners(); | 2074 this._unlistenKeyEventListeners(); |
| 2077 | 2075 |
| 2078 if (this.isAttached && this.keyEventTarget) { | 2076 if (this.isAttached) { |
| 2079 this._listenKeyEventListeners(); | 2077 this._listenKeyEventListeners(); |
| 2080 } | 2078 } |
| 2081 }, | 2079 }, |
| 2082 | 2080 |
| 2083 _listenKeyEventListeners: function() { | 2081 _listenKeyEventListeners: function() { |
| 2084 Object.keys(this._keyBindings).forEach(function(eventName) { | 2082 Object.keys(this._keyBindings).forEach(function(eventName) { |
| 2085 var keyBindings = this._keyBindings[eventName]; | 2083 var keyBindings = this._keyBindings[eventName]; |
| 2086 var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings); | 2084 var boundKeyHandler = this._onKeyBindingEvent.bind(this, keyBindings); |
| 2087 | 2085 |
| 2088 this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyH
andler]); | 2086 this._boundKeyHandlers.push([this.keyEventTarget, eventName, boundKeyH
andler]); |
| (...skipping 274 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 2363 return this.scrollTarget instanceof HTMLElement; | 2361 return this.scrollTarget instanceof HTMLElement; |
| 2364 } | 2362 } |
| 2365 }; | 2363 }; |
| 2366 (function() { | 2364 (function() { |
| 2367 | 2365 |
| 2368 var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/); | 2366 var IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/); |
| 2369 var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8; | 2367 var IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8; |
| 2370 var DEFAULT_PHYSICAL_COUNT = 3; | 2368 var DEFAULT_PHYSICAL_COUNT = 3; |
| 2371 var HIDDEN_Y = '-10000px'; | 2369 var HIDDEN_Y = '-10000px'; |
| 2372 var DEFAULT_GRID_SIZE = 200; | 2370 var DEFAULT_GRID_SIZE = 200; |
| 2373 var SECRET_TABINDEX = -100; | |
| 2374 | 2371 |
| 2375 Polymer({ | 2372 Polymer({ |
| 2376 | 2373 |
| 2377 is: 'iron-list', | 2374 is: 'iron-list', |
| 2378 | 2375 |
| 2379 properties: { | 2376 properties: { |
| 2380 | 2377 |
| 2381 /** | 2378 /** |
| 2382 * An array containing items determining how many instances of the templat
e | 2379 * An array containing items determining how many instances of the templat
e |
| 2383 * to stamp and that that each template instance should bind to. | 2380 * to stamp and that that each template instance should bind to. |
| (...skipping 811 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 3195 var dot = path.indexOf('.'); | 3192 var dot = path.indexOf('.'); |
| 3196 var key = path.substring(0, dot < 0 ? path.length : dot); | 3193 var key = path.substring(0, dot < 0 ? path.length : dot); |
| 3197 var idx = this._physicalIndexForKey[key]; | 3194 var idx = this._physicalIndexForKey[key]; |
| 3198 var offscreenItem = this._offscreenFocusedItem; | 3195 var offscreenItem = this._offscreenFocusedItem; |
| 3199 var el = offscreenItem && offscreenItem._templateInstance.__key__ === key
? | 3196 var el = offscreenItem && offscreenItem._templateInstance.__key__ === key
? |
| 3200 offscreenItem : this._physicalItems[idx]; | 3197 offscreenItem : this._physicalItems[idx]; |
| 3201 | 3198 |
| 3202 if (!el || el._templateInstance.__key__ !== key) { | 3199 if (!el || el._templateInstance.__key__ !== key) { |
| 3203 return; | 3200 return; |
| 3204 } | 3201 } |
| 3202 |
| 3205 if (dot >= 0) { | 3203 if (dot >= 0) { |
| 3206 path = this.as + '.' + path.substring(dot+1); | 3204 path = this.as + '.' + path.substring(dot+1); |
| 3207 el._templateInstance.notifyPath(path, value, true); | 3205 el._templateInstance.notifyPath(path, value, true); |
| 3208 } else { | 3206 } else { |
| 3209 // Update selection if needed | |
| 3210 var currentItem = el._templateInstance[this.as]; | |
| 3211 if (Array.isArray(this.selectedItems)) { | |
| 3212 for (var i = 0; i < this.selectedItems.length; i++) { | |
| 3213 if (this.selectedItems[i] === currentItem) { | |
| 3214 this.set('selectedItems.' + i, value); | |
| 3215 break; | |
| 3216 } | |
| 3217 } | |
| 3218 } else if (this.selectedItem === currentItem) { | |
| 3219 this.set('selectedItem', value); | |
| 3220 } | |
| 3221 el._templateInstance[this.as] = value; | 3207 el._templateInstance[this.as] = value; |
| 3222 } | 3208 } |
| 3209 |
| 3223 }, | 3210 }, |
| 3224 | 3211 |
| 3225 /** | 3212 /** |
| 3226 * Called when the items have changed. That is, ressignments | 3213 * Called when the items have changed. That is, ressignments |
| 3227 * to `items`, splices or updates to a single item. | 3214 * to `items`, splices or updates to a single item. |
| 3228 */ | 3215 */ |
| 3229 _itemsChanged: function(change) { | 3216 _itemsChanged: function(change) { |
| 3230 if (change.path === 'items') { | 3217 if (change.path === 'items') { |
| 3231 // reset items | 3218 // reset items |
| 3232 this._virtualStart = 0; | 3219 this._virtualStart = 0; |
| (...skipping 167 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 3400 | 3387 |
| 3401 // update the average if we measured something | 3388 // update the average if we measured something |
| 3402 if (this._physicalAverageCount !== prevAvgCount) { | 3389 if (this._physicalAverageCount !== prevAvgCount) { |
| 3403 this._physicalAverage = Math.round( | 3390 this._physicalAverage = Math.round( |
| 3404 ((prevPhysicalAvg * prevAvgCount) + newPhysicalSize) / | 3391 ((prevPhysicalAvg * prevAvgCount) + newPhysicalSize) / |
| 3405 this._physicalAverageCount); | 3392 this._physicalAverageCount); |
| 3406 } | 3393 } |
| 3407 }, | 3394 }, |
| 3408 | 3395 |
| 3409 _updateGridMetrics: function() { | 3396 _updateGridMetrics: function() { |
| 3410 this._viewportWidth = this.$.items.offsetWidth; | 3397 this._viewportWidth = this._scrollTargetWidth; |
| 3411 // Set item width to the value of the _physicalItems offsetWidth | 3398 // Set item width to the value of the _physicalItems offsetWidth |
| 3412 this._itemWidth = this._physicalCount > 0 ? this._physicalItems[0].getBoun
dingClientRect().width : DEFAULT_GRID_SIZE; | 3399 this._itemWidth = this._physicalCount > 0 ? this._physicalItems[0].offsetW
idth : DEFAULT_GRID_SIZE; |
| 3413 // Set row height to the value of the _physicalItems offsetHeight | 3400 // Set row height to the value of the _physicalItems offsetHeight |
| 3414 this._rowHeight = this._physicalCount > 0 ? this._physicalItems[0].offsetH
eight : DEFAULT_GRID_SIZE; | 3401 this._rowHeight = this._physicalCount > 0 ? this._physicalItems[0].offsetH
eight : DEFAULT_GRID_SIZE; |
| 3415 // If in grid mode compute how many items with exist in each row | 3402 // If in grid mode compute how many items with exist in each row |
| 3416 this._itemsPerRow = this._itemWidth ? Math.floor(this._viewportWidth / thi
s._itemWidth) : this._itemsPerRow; | 3403 this._itemsPerRow = this._itemWidth ? Math.floor(this._viewportWidth / thi
s._itemWidth) : this._itemsPerRow; |
| 3417 }, | 3404 }, |
| 3418 | 3405 |
| 3419 /** | 3406 /** |
| 3420 * Updates the position of the physical items. | 3407 * Updates the position of the physical items. |
| 3421 */ | 3408 */ |
| 3422 _positionItems: function() { | 3409 _positionItems: function() { |
| (...skipping 306 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 3729 */ | 3716 */ |
| 3730 _selectionEnabledChanged: function(selectionEnabled) { | 3717 _selectionEnabledChanged: function(selectionEnabled) { |
| 3731 var handler = selectionEnabled ? this.listen : this.unlisten; | 3718 var handler = selectionEnabled ? this.listen : this.unlisten; |
| 3732 handler.call(this, this, 'tap', '_selectionHandler'); | 3719 handler.call(this, this, 'tap', '_selectionHandler'); |
| 3733 }, | 3720 }, |
| 3734 | 3721 |
| 3735 /** | 3722 /** |
| 3736 * Select an item from an event object. | 3723 * Select an item from an event object. |
| 3737 */ | 3724 */ |
| 3738 _selectionHandler: function(e) { | 3725 _selectionHandler: function(e) { |
| 3739 var model = this.modelForElement(e.target); | 3726 if (this.selectionEnabled) { |
| 3740 if (!model) { | 3727 var model = this.modelForElement(e.target); |
| 3741 return; | 3728 if (model) { |
| 3729 this.toggleSelectionForItem(model[this.as]); |
| 3730 } |
| 3742 } | 3731 } |
| 3743 var modelTabIndex, activeElTabIndex; | |
| 3744 var target = Polymer.dom(e).path[0]; | |
| 3745 var activeEl = Polymer.dom(this.domHost ? this.domHost.root : document).ac
tiveElement; | |
| 3746 var physicalItem = this._physicalItems[this._getPhysicalIndex(model[this.i
ndexAs])]; | |
| 3747 // Safari does not focus certain form controls via mouse | |
| 3748 // https://bugs.webkit.org/show_bug.cgi?id=118043 | |
| 3749 if (target.localName === 'input' || | |
| 3750 target.localName === 'button' || | |
| 3751 target.localName === 'select') { | |
| 3752 return; | |
| 3753 } | |
| 3754 // Set a temporary tabindex | |
| 3755 modelTabIndex = model.tabIndex; | |
| 3756 model.tabIndex = SECRET_TABINDEX; | |
| 3757 activeElTabIndex = activeEl ? activeEl.tabIndex : -1; | |
| 3758 model.tabIndex = modelTabIndex; | |
| 3759 // Only select the item if the tap wasn't on a focusable child | |
| 3760 // or the element bound to `tabIndex` | |
| 3761 if (activeEl && physicalItem.contains(activeEl) && activeElTabIndex !== SE
CRET_TABINDEX) { | |
| 3762 return; | |
| 3763 } | |
| 3764 this.toggleSelectionForItem(model[this.as]); | |
| 3765 }, | 3732 }, |
| 3766 | 3733 |
| 3767 _multiSelectionChanged: function(multiSelection) { | 3734 _multiSelectionChanged: function(multiSelection) { |
| 3768 this.clearSelection(); | 3735 this.clearSelection(); |
| 3769 this.$.selector.multi = multiSelection; | 3736 this.$.selector.multi = multiSelection; |
| 3770 }, | 3737 }, |
| 3771 | 3738 |
| 3772 /** | 3739 /** |
| 3773 * Updates the size of an item. | 3740 * Updates the size of an item. |
| 3774 * | 3741 * |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 3827 if (idx < 0 || idx >= this._virtualCount) { | 3794 if (idx < 0 || idx >= this._virtualCount) { |
| 3828 return; | 3795 return; |
| 3829 } | 3796 } |
| 3830 this._restoreFocusedItem(); | 3797 this._restoreFocusedItem(); |
| 3831 // scroll to index to make sure it's rendered | 3798 // scroll to index to make sure it's rendered |
| 3832 if (!this._isIndexRendered(idx)) { | 3799 if (!this._isIndexRendered(idx)) { |
| 3833 this.scrollToIndex(idx); | 3800 this.scrollToIndex(idx); |
| 3834 } | 3801 } |
| 3835 | 3802 |
| 3836 var physicalItem = this._physicalItems[this._getPhysicalIndex(idx)]; | 3803 var physicalItem = this._physicalItems[this._getPhysicalIndex(idx)]; |
| 3804 var SECRET = ~(Math.random() * 100); |
| 3837 var model = physicalItem._templateInstance; | 3805 var model = physicalItem._templateInstance; |
| 3838 var focusable; | 3806 var focusable; |
| 3839 | 3807 |
| 3840 // set a secret tab index | 3808 // set a secret tab index |
| 3841 model.tabIndex = SECRET_TABINDEX; | 3809 model.tabIndex = SECRET; |
| 3842 // check if focusable element is the physical item | 3810 // check if focusable element is the physical item |
| 3843 if (physicalItem.tabIndex === SECRET_TABINDEX) { | 3811 if (physicalItem.tabIndex === SECRET) { |
| 3844 focusable = physicalItem; | 3812 focusable = physicalItem; |
| 3845 } | 3813 } |
| 3846 // search for the element which tabindex is bound to the secret tab index | 3814 // search for the element which tabindex is bound to the secret tab index |
| 3847 if (!focusable) { | 3815 if (!focusable) { |
| 3848 focusable = Polymer.dom(physicalItem).querySelector('[tabindex="' + SECR
ET_TABINDEX + '"]'); | 3816 focusable = Polymer.dom(physicalItem).querySelector('[tabindex="' + SECR
ET + '"]'); |
| 3849 } | 3817 } |
| 3850 // restore the tab index | 3818 // restore the tab index |
| 3851 model.tabIndex = 0; | 3819 model.tabIndex = 0; |
| 3852 // focus the focusable element | 3820 // focus the focusable element |
| 3853 this._focusedIndex = idx; | 3821 this._focusedIndex = idx; |
| 3854 focusable && focusable.focus(); | 3822 focusable && focusable.focus(); |
| 3855 }, | 3823 }, |
| 3856 | 3824 |
| 3857 _removeFocusedItem: function() { | 3825 _removeFocusedItem: function() { |
| 3858 if (this._offscreenFocusedItem) { | 3826 if (this._offscreenFocusedItem) { |
| (...skipping 1456 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 5315 | 5283 |
| 5316 _boundAnimate: { | 5284 _boundAnimate: { |
| 5317 type: Function, | 5285 type: Function, |
| 5318 value: function() { | 5286 value: function() { |
| 5319 return this.animate.bind(this); | 5287 return this.animate.bind(this); |
| 5320 } | 5288 } |
| 5321 } | 5289 } |
| 5322 }, | 5290 }, |
| 5323 | 5291 |
| 5324 get target () { | 5292 get target () { |
| 5325 return this.keyEventTarget; | 5293 var ownerRoot = Polymer.dom(this).getOwnerRoot(); |
| 5294 var target; |
| 5295 |
| 5296 if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE |
| 5297 target = ownerRoot.host; |
| 5298 } else { |
| 5299 target = this.parentNode; |
| 5300 } |
| 5301 |
| 5302 return target; |
| 5326 }, | 5303 }, |
| 5327 | 5304 |
| 5328 keyBindings: { | 5305 keyBindings: { |
| 5329 'enter:keydown': '_onEnterKeydown', | 5306 'enter:keydown': '_onEnterKeydown', |
| 5330 'space:keydown': '_onSpaceKeydown', | 5307 'space:keydown': '_onSpaceKeydown', |
| 5331 'space:keyup': '_onSpaceKeyup' | 5308 'space:keyup': '_onSpaceKeyup' |
| 5332 }, | 5309 }, |
| 5333 | 5310 |
| 5334 attached: function() { | 5311 attached: function() { |
| 5335 // Set up a11yKeysBehavior to listen to key events on the target, | 5312 // Set up a11yKeysBehavior to listen to key events on the target, |
| 5336 // so that space and enter activate the ripple even if the target doesn'
t | 5313 // so that space and enter activate the ripple even if the target doesn'
t |
| 5337 // handle key events. The key handlers deal with `noink` themselves. | 5314 // handle key events. The key handlers deal with `noink` themselves. |
| 5338 if (this.parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE | 5315 this.keyEventTarget = this.target; |
| 5339 this.keyEventTarget = Polymer.dom(this).getOwnerRoot().host; | 5316 this.listen(this.target, 'up', 'uiUpAction'); |
| 5340 } else { | 5317 this.listen(this.target, 'down', 'uiDownAction'); |
| 5341 this.keyEventTarget = this.parentNode; | |
| 5342 } | |
| 5343 var keyEventTarget = /** @type {!EventTarget} */ (this.keyEventTarget); | |
| 5344 this.listen(keyEventTarget, 'up', 'uiUpAction'); | |
| 5345 this.listen(keyEventTarget, 'down', 'uiDownAction'); | |
| 5346 }, | 5318 }, |
| 5347 | 5319 |
| 5348 detached: function() { | 5320 detached: function() { |
| 5349 this.unlisten(this.keyEventTarget, 'up', 'uiUpAction'); | 5321 this.unlisten(this.target, 'up', 'uiUpAction'); |
| 5350 this.unlisten(this.keyEventTarget, 'down', 'uiDownAction'); | 5322 this.unlisten(this.target, 'down', 'uiDownAction'); |
| 5351 this.keyEventTarget = null; | |
| 5352 }, | 5323 }, |
| 5353 | 5324 |
| 5354 get shouldKeepAnimating () { | 5325 get shouldKeepAnimating () { |
| 5355 for (var index = 0; index < this.ripples.length; ++index) { | 5326 for (var index = 0; index < this.ripples.length; ++index) { |
| 5356 if (!this.ripples[index].isAnimationComplete) { | 5327 if (!this.ripples[index].isAnimationComplete) { |
| 5357 return true; | 5328 return true; |
| 5358 } | 5329 } |
| 5359 } | 5330 } |
| 5360 | 5331 |
| 5361 return false; | 5332 return false; |
| (...skipping 27 matching lines...) Expand all Loading... |
| 5389 downAction: function(event) { | 5360 downAction: function(event) { |
| 5390 if (this.holdDown && this.ripples.length > 0) { | 5361 if (this.holdDown && this.ripples.length > 0) { |
| 5391 return; | 5362 return; |
| 5392 } | 5363 } |
| 5393 | 5364 |
| 5394 var ripple = this.addRipple(); | 5365 var ripple = this.addRipple(); |
| 5395 | 5366 |
| 5396 ripple.downAction(event); | 5367 ripple.downAction(event); |
| 5397 | 5368 |
| 5398 if (!this._animating) { | 5369 if (!this._animating) { |
| 5399 this._animating = true; | |
| 5400 this.animate(); | 5370 this.animate(); |
| 5401 } | 5371 } |
| 5402 }, | 5372 }, |
| 5403 | 5373 |
| 5404 /** | 5374 /** |
| 5405 * Provokes a ripple up effect via a UI event, | 5375 * Provokes a ripple up effect via a UI event, |
| 5406 * respecting the `noink` property. | 5376 * respecting the `noink` property. |
| 5407 * @param {Event=} event | 5377 * @param {Event=} event |
| 5408 */ | 5378 */ |
| 5409 uiUpAction: function(event) { | 5379 uiUpAction: function(event) { |
| 5410 if (!this.noink) { | 5380 if (!this.noink) { |
| 5411 this.upAction(event); | 5381 this.upAction(event); |
| 5412 } | 5382 } |
| 5413 }, | 5383 }, |
| 5414 | 5384 |
| 5415 /** | 5385 /** |
| 5416 * Provokes a ripple up effect via a UI event, | 5386 * Provokes a ripple up effect via a UI event, |
| 5417 * *not* respecting the `noink` property. | 5387 * *not* respecting the `noink` property. |
| 5418 * @param {Event=} event | 5388 * @param {Event=} event |
| 5419 */ | 5389 */ |
| 5420 upAction: function(event) { | 5390 upAction: function(event) { |
| 5421 if (this.holdDown) { | 5391 if (this.holdDown) { |
| 5422 return; | 5392 return; |
| 5423 } | 5393 } |
| 5424 | 5394 |
| 5425 this.ripples.forEach(function(ripple) { | 5395 this.ripples.forEach(function(ripple) { |
| 5426 ripple.upAction(event); | 5396 ripple.upAction(event); |
| 5427 }); | 5397 }); |
| 5428 | 5398 |
| 5429 this._animating = true; | |
| 5430 this.animate(); | 5399 this.animate(); |
| 5431 }, | 5400 }, |
| 5432 | 5401 |
| 5433 onAnimationComplete: function() { | 5402 onAnimationComplete: function() { |
| 5434 this._animating = false; | 5403 this._animating = false; |
| 5435 this.$.background.style.backgroundColor = null; | 5404 this.$.background.style.backgroundColor = null; |
| 5436 this.fire('transitionend'); | 5405 this.fire('transitionend'); |
| 5437 }, | 5406 }, |
| 5438 | 5407 |
| 5439 addRipple: function() { | 5408 addRipple: function() { |
| (...skipping 18 matching lines...) Expand all Loading... |
| 5458 this.ripples.splice(rippleIndex, 1); | 5427 this.ripples.splice(rippleIndex, 1); |
| 5459 | 5428 |
| 5460 ripple.remove(); | 5429 ripple.remove(); |
| 5461 | 5430 |
| 5462 if (!this.ripples.length) { | 5431 if (!this.ripples.length) { |
| 5463 this._setAnimating(false); | 5432 this._setAnimating(false); |
| 5464 } | 5433 } |
| 5465 }, | 5434 }, |
| 5466 | 5435 |
| 5467 animate: function() { | 5436 animate: function() { |
| 5468 if (!this._animating) { | |
| 5469 return; | |
| 5470 } | |
| 5471 var index; | 5437 var index; |
| 5472 var ripple; | 5438 var ripple; |
| 5473 | 5439 |
| 5440 this._animating = true; |
| 5441 |
| 5474 for (index = 0; index < this.ripples.length; ++index) { | 5442 for (index = 0; index < this.ripples.length; ++index) { |
| 5475 ripple = this.ripples[index]; | 5443 ripple = this.ripples[index]; |
| 5476 | 5444 |
| 5477 ripple.draw(); | 5445 ripple.draw(); |
| 5478 | 5446 |
| 5479 this.$.background.style.opacity = ripple.outerOpacity; | 5447 this.$.background.style.opacity = ripple.outerOpacity; |
| 5480 | 5448 |
| 5481 if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) { | 5449 if (ripple.isOpacityFullyDecayed && !ripple.isRestingAtMaxRadius) { |
| 5482 this.removeRipple(ripple); | 5450 this.removeRipple(ripple); |
| 5483 } | 5451 } |
| (...skipping 24 matching lines...) Expand all Loading... |
| 5508 _holdDownChanged: function(newVal, oldVal) { | 5476 _holdDownChanged: function(newVal, oldVal) { |
| 5509 if (oldVal === undefined) { | 5477 if (oldVal === undefined) { |
| 5510 return; | 5478 return; |
| 5511 } | 5479 } |
| 5512 if (newVal) { | 5480 if (newVal) { |
| 5513 this.downAction(); | 5481 this.downAction(); |
| 5514 } else { | 5482 } else { |
| 5515 this.upAction(); | 5483 this.upAction(); |
| 5516 } | 5484 } |
| 5517 } | 5485 } |
| 5518 | |
| 5519 /** | |
| 5520 Fired when the animation finishes. | |
| 5521 This is useful if you want to wait until | |
| 5522 the ripple animation finishes to perform some action. | |
| 5523 | |
| 5524 @event transitionend | |
| 5525 @param {{node: Object}} detail Contains the animated node. | |
| 5526 */ | |
| 5527 }); | 5486 }); |
| 5528 })(); | 5487 })(); |
| 5529 /** | 5488 /** |
| 5530 * `Polymer.PaperRippleBehavior` dynamically implements a ripple | 5489 * `Polymer.PaperRippleBehavior` dynamically implements a ripple |
| 5531 * when the element has focus via pointer or keyboard. | 5490 * when the element has focus via pointer or keyboard. |
| 5532 * | 5491 * |
| 5533 * NOTE: This behavior is intended to be used in conjunction with and after | 5492 * NOTE: This behavior is intended to be used in conjunction with and after |
| 5534 * `Polymer.IronButtonState` and `Polymer.IronControlState`. | 5493 * `Polymer.IronButtonState` and `Polymer.IronControlState`. |
| 5535 * | 5494 * |
| 5536 * @polymerBehavior Polymer.PaperRippleBehavior | 5495 * @polymerBehavior Polymer.PaperRippleBehavior |
| (...skipping 2162 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 7699 */ | 7658 */ |
| 7700 fit: function() { | 7659 fit: function() { |
| 7701 this._discoverInfo(); | 7660 this._discoverInfo(); |
| 7702 this.position(); | 7661 this.position(); |
| 7703 this.constrain(); | 7662 this.constrain(); |
| 7704 this.center(); | 7663 this.center(); |
| 7705 }, | 7664 }, |
| 7706 | 7665 |
| 7707 /** | 7666 /** |
| 7708 * Memoize information needed to position and size the target element. | 7667 * Memoize information needed to position and size the target element. |
| 7709 * @suppress {deprecated} | |
| 7710 */ | 7668 */ |
| 7711 _discoverInfo: function() { | 7669 _discoverInfo: function() { |
| 7712 if (this._fitInfo) { | 7670 if (this._fitInfo) { |
| 7713 return; | 7671 return; |
| 7714 } | 7672 } |
| 7715 var target = window.getComputedStyle(this); | 7673 var target = window.getComputedStyle(this); |
| 7716 var sizer = window.getComputedStyle(this.sizingTarget); | 7674 var sizer = window.getComputedStyle(this.sizingTarget); |
| 7717 | 7675 |
| 7718 this._fitInfo = { | 7676 this._fitInfo = { |
| 7719 inlineStyle: { | 7677 inlineStyle: { |
| (...skipping 749 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 8469 } | 8427 } |
| 8470 // Use logical parentNode, or native ShadowRoot host. | 8428 // Use logical parentNode, or native ShadowRoot host. |
| 8471 node = Polymer.dom(node).parentNode || node.host; | 8429 node = Polymer.dom(node).parentNode || node.host; |
| 8472 } | 8430 } |
| 8473 }, | 8431 }, |
| 8474 | 8432 |
| 8475 /** | 8433 /** |
| 8476 * Returns the deepest overlay in the path. | 8434 * Returns the deepest overlay in the path. |
| 8477 * @param {Array<Element>=} path | 8435 * @param {Array<Element>=} path |
| 8478 * @return {Element|undefined} | 8436 * @return {Element|undefined} |
| 8479 * @suppress {missingProperties} | |
| 8480 * @private | 8437 * @private |
| 8481 */ | 8438 */ |
| 8482 _overlayInPath: function(path) { | 8439 _overlayInPath: function(path) { |
| 8483 path = path || []; | 8440 path = path || []; |
| 8484 for (var i = 0; i < path.length; i++) { | 8441 for (var i = 0; i < path.length; i++) { |
| 8485 if (path[i]._manager === this) { | 8442 if (path[i]._manager === this) { |
| 8486 return path[i]; | 8443 return path[i]; |
| 8487 } | 8444 } |
| 8488 } | 8445 } |
| 8489 }, | 8446 }, |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 8527 overlay._onCaptureTab(event); | 8484 overlay._onCaptureTab(event); |
| 8528 } | 8485 } |
| 8529 } | 8486 } |
| 8530 }, | 8487 }, |
| 8531 | 8488 |
| 8532 /** | 8489 /** |
| 8533 * Returns if the overlay1 should be behind overlay2. | 8490 * Returns if the overlay1 should be behind overlay2. |
| 8534 * @param {!Element} overlay1 | 8491 * @param {!Element} overlay1 |
| 8535 * @param {!Element} overlay2 | 8492 * @param {!Element} overlay2 |
| 8536 * @return {boolean} | 8493 * @return {boolean} |
| 8537 * @suppress {missingProperties} | |
| 8538 * @private | 8494 * @private |
| 8539 */ | 8495 */ |
| 8540 _shouldBeBehindOverlay: function(overlay1, overlay2) { | 8496 _shouldBeBehindOverlay: function(overlay1, overlay2) { |
| 8541 return !overlay1.alwaysOnTop && overlay2.alwaysOnTop; | 8497 var o1 = /** @type {?} */ (overlay1); |
| 8498 var o2 = /** @type {?} */ (overlay2); |
| 8499 return !o1.alwaysOnTop && o2.alwaysOnTop; |
| 8542 } | 8500 } |
| 8543 }; | 8501 }; |
| 8544 | 8502 |
| 8545 Polymer.IronOverlayManager = new Polymer.IronOverlayManagerClass(); | 8503 Polymer.IronOverlayManager = new Polymer.IronOverlayManagerClass(); |
| 8546 (function() { | 8504 (function() { |
| 8547 'use strict'; | 8505 'use strict'; |
| 8548 | 8506 |
| 8549 /** | 8507 /** |
| 8550 Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or
shown, and displays | 8508 Use `Polymer.IronOverlayBehavior` to implement an element that can be hidden or
shown, and displays |
| 8551 on top of other content. It includes an optional backdrop, and can be used to im
plement a variety | 8509 on top of other content. It includes an optional backdrop, and can be used to im
plement a variety |
| (...skipping 2988 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 11540 Manager.get().updateItem_(index, data); | 11498 Manager.get().updateItem_(index, data); |
| 11541 }; | 11499 }; |
| 11542 | 11500 |
| 11543 return {Manager: Manager}; | 11501 return {Manager: Manager}; |
| 11544 }); | 11502 }); |
| 11545 // Copyright 2015 The Chromium Authors. All rights reserved. | 11503 // Copyright 2015 The Chromium Authors. All rights reserved. |
| 11546 // Use of this source code is governed by a BSD-style license that can be | 11504 // Use of this source code is governed by a BSD-style license that can be |
| 11547 // found in the LICENSE file. | 11505 // found in the LICENSE file. |
| 11548 | 11506 |
| 11549 window.addEventListener('load', downloads.Manager.onLoad); | 11507 window.addEventListener('load', downloads.Manager.onLoad); |
| OLD | NEW |