| OLD | NEW |
| 1 // Copyright 2016 The Chromium Authors. All rights reserved. | 1 // Copyright 2016 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 'cr-dialog' is a component for showing a modal dialog. If the | 6 * @fileoverview 'cr-dialog' is a component for showing a modal dialog. If the |
| 7 * dialog is closed via close(), a 'close' event is fired. If the dialog is | 7 * dialog is closed via close(), a 'close' event is fired. If the dialog is |
| 8 * canceled via cancel(), a 'cancel' event is fired followed by a 'close' event. | 8 * canceled via cancel(), a 'cancel' event is fired followed by a 'close' event. |
| 9 * Additionally clients can inspect the dialog's |returnValue| property inside | 9 * Additionally clients can inspect the dialog's |returnValue| property inside |
| 10 * the 'close' event listener to determine whether it was canceled or just | 10 * the 'close' event listener to determine whether it was canceled or just |
| (...skipping 11 matching lines...) Expand all Loading... |
| 22 closeText: String, | 22 closeText: String, |
| 23 | 23 |
| 24 /** | 24 /** |
| 25 * True if the dialog should remain open on 'popstate' events. This is used | 25 * True if the dialog should remain open on 'popstate' events. This is used |
| 26 * for navigable dialogs that have their separate navigation handling code. | 26 * for navigable dialogs that have their separate navigation handling code. |
| 27 */ | 27 */ |
| 28 ignorePopstate: { | 28 ignorePopstate: { |
| 29 type: Boolean, | 29 type: Boolean, |
| 30 value: false, | 30 value: false, |
| 31 }, | 31 }, |
| 32 | |
| 33 showScrollBorders: { | |
| 34 type: Boolean, | |
| 35 value: false, | |
| 36 reflectToAttribute: true, | |
| 37 }, | |
| 38 }, | 32 }, |
| 39 | 33 |
| 40 /** @private {?IntersectionObserver} */ | |
| 41 intersectionObserver_: null, | |
| 42 | |
| 43 /** @override */ | 34 /** @override */ |
| 44 ready: function() { | 35 ready: function() { |
| 45 // If the active history entry changes (i.e. user clicks back button), | 36 // If the active history entry changes (i.e. user clicks back button), |
| 46 // all open dialogs should be cancelled. | 37 // all open dialogs should be cancelled. |
| 47 window.addEventListener('popstate', function() { | 38 window.addEventListener('popstate', function() { |
| 48 if (!this.ignorePopstate && this.open) | 39 if (!this.ignorePopstate && this.open) |
| 49 this.cancel(); | 40 this.cancel(); |
| 50 }.bind(this)); | 41 }.bind(this)); |
| 51 }, | 42 }, |
| 52 | 43 |
| 53 /** @override */ | |
| 54 attached: function() { | |
| 55 if (this.showScrollBorders) { | |
| 56 var bodyContainer = this.$$('.body-container'); | |
| 57 | |
| 58 var callback = function(entries) { | |
| 59 assert(entries.length == 1); | |
| 60 bodyContainer.classList.toggle( | |
| 61 'bottom-scrollable', entries[0].intersectionRatio == 0); | |
| 62 }; | |
| 63 | |
| 64 this.intersectionObserver_ = new IntersectionObserver( | |
| 65 callback, | |
| 66 /** @type {IntersectionObserverInit} */ ({ | |
| 67 root: bodyContainer, | |
| 68 threshold: 0, | |
| 69 })); | |
| 70 this.intersectionObserver_.observe(this.$.bodyBottomMarker); | |
| 71 } | |
| 72 }, | |
| 73 | |
| 74 /** @override */ | |
| 75 detached: function() { | |
| 76 if (this.intersectionObserver_) { | |
| 77 this.intersectionObserver_.disconnect(); | |
| 78 this.intersectionObserver_ = null; | |
| 79 } | |
| 80 }, | |
| 81 | |
| 82 cancel: function() { | 44 cancel: function() { |
| 83 this.fire('cancel'); | 45 this.fire('cancel'); |
| 84 HTMLDialogElement.prototype.close.call(this, ''); | 46 HTMLDialogElement.prototype.close.call(this, ''); |
| 85 }, | 47 }, |
| 86 | 48 |
| 87 /** | 49 /** |
| 88 * @param {string=} opt_returnValue | 50 * @param {string=} opt_returnValue |
| 89 * @override | 51 * @override |
| 90 */ | 52 */ |
| 91 close: function(opt_returnValue) { | 53 close: function(opt_returnValue) { |
| 92 HTMLDialogElement.prototype.close.call(this, 'success'); | 54 HTMLDialogElement.prototype.close.call(this, 'success'); |
| 93 }, | 55 }, |
| 94 | 56 |
| 95 /** @return {!PaperIconButtonElement} */ | 57 /** @return {!PaperIconButtonElement} */ |
| 96 getCloseButton: function() { | 58 getCloseButton: function() { |
| 97 return this.$.close; | 59 return this.$.close; |
| 98 }, | 60 }, |
| 99 }); | 61 }); |
| OLD | NEW |