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