Index: third_party/polymer/v0_8/components-chromium/paper-dialog-behavior/paper-dialog-behavior-extracted.js |
diff --git a/third_party/polymer/v0_8/components-chromium/paper-dialog-behavior/paper-dialog-behavior-extracted.js b/third_party/polymer/v0_8/components-chromium/paper-dialog-behavior/paper-dialog-behavior-extracted.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..56dbb01e5a219ddc5f4708dacb1e9b9cf291f611 |
--- /dev/null |
+++ b/third_party/polymer/v0_8/components-chromium/paper-dialog-behavior/paper-dialog-behavior-extracted.js |
@@ -0,0 +1,221 @@ |
+ |
+ |
+/* |
+Use `Polymer.PaperDialogBehavior` and `paper-dialog-common.css` to implement a Material Design |
+dialog. |
+ |
+For example, if `<paper-dialog-impl>` implements this behavior: |
+ |
+ <paper-dialog-impl> |
+ <h2>Header</h2> |
+ <div>Dialog body</div> |
+ <div class="buttons"> |
+ <paper-button dialog-dismiss>Cancel</paper-button> |
+ <paper-button dialog-confirm>Accept</paper-button> |
+ </div> |
+ </paper-dialog-impl> |
+ |
+`paper-dialog-common.css` provide styles for a header, content area, and an action area for buttons. |
+Use the `<h2>` tag for the header and the `buttons` class for the action area. You can use the |
+`paper-dialog-scrollable` element (in its own repository) if you need a scrolling content area. |
+ |
+Use the `dialog-dismiss` and `dialog-confirm` attributes on interactive controls to close the |
+dialog. If the user dismisses the dialog with `dialog-confirm`, the `closingReason` will update |
+to include `confirmed: true`. |
+ |
+### Styling |
+ |
+The following custom properties and mixins are available for styling. |
+ |
+Custom property | Description | Default |
+----------------|-------------|---------- |
+`--paper-dialog-background-color` | Dialog background color | `--primary-background-color` |
+`--paper-dialog-color` | Dialog foreground color | `--primary-text-color` |
+`--paper-dialog` | Mixin applied to the dialog | `{}` |
+`--paper-dialog-title` | Mixin applied to the title (`<h2>`) element | `{}` |
+`--paper-dialog-button-color` | Button area foreground color | `--default-primary-color` |
+ |
+### Accessibility |
+ |
+This element has `role="dialog"` by default. Depending on the context, it may be more appropriate |
+to override this attribute with `role="alertdialog"`. The header (a `<h2>` element) will |
+ |
+If `modal` is set, the element will set `aria-modal` and prevent the focus from exiting the element. |
+It will also ensure that focus remains in the dialog. |
+ |
+The `aria-labelledby` attribute will be set to the header element, if one exists. |
+ |
+@hero hero.svg |
+@demo demo/index.html |
+@polymerBehavior Polymer.PaperDialogBehavior |
+*/ |
+ |
+ Polymer.PaperDialogBehaviorImpl = { |
+ |
+ hostAttributes: { |
+ 'role': 'dialog', |
+ 'tabindex': '-1' |
+ }, |
+ |
+ properties: { |
+ |
+ /** |
+ * If `modal` is true, this implies `no-cancel-on-outside-click` and `with-backdrop`. |
+ */ |
+ modal: { |
+ observer: '_modalChanged', |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ _lastFocusedElement: { |
+ type: Node |
+ }, |
+ |
+ _boundOnFocus: { |
+ type: Function, |
+ value: function() { |
+ return this._onFocus.bind(this); |
+ } |
+ }, |
+ |
+ _boundOnBackdropClick: { |
+ type: Function, |
+ value: function() { |
+ return this._onBackdropClick.bind(this); |
+ } |
+ } |
+ |
+ }, |
+ |
+ listeners: { |
+ 'click': '_onDialogClick', |
+ 'iron-overlay-opened': '_onIronOverlayOpened', |
+ 'iron-overlay-closed': '_onIronOverlayClosed' |
+ }, |
+ |
+ attached: function() { |
+ this._observer = this._observe(this); |
+ this._updateAriaLabelledBy(); |
+ }, |
+ |
+ detached: function() { |
+ if (this._observer) { |
+ this._observer.disconnect(); |
+ } |
+ }, |
+ |
+ _observe: function(node) { |
+ var observer = new MutationObserver(function() { |
+ this._updateAriaLabelledBy(); |
+ }.bind(this)); |
+ observer.observe(node, { |
+ childList: true, |
+ subtree: true |
+ }); |
+ return observer; |
+ }, |
+ |
+ _modalChanged: function() { |
+ if (this.modal) { |
+ this.setAttribute('aria-modal', 'true'); |
+ } else { |
+ this.setAttribute('aria-modal', 'false'); |
+ } |
+ // modal implies noCancelOnOutsideClick and withBackdrop if true, don't overwrite |
+ // those properties otherwise. |
+ if (this.modal) { |
+ this.noCancelOnOutsideClick = true; |
+ this.withBackdrop = true; |
+ } |
+ }, |
+ |
+ _updateAriaLabelledBy: function() { |
+ var header = Polymer.dom(this).querySelector('h2'); |
+ if (!header) { |
+ this.removeAttribute('aria-labelledby'); |
+ return; |
+ } |
+ var headerId = header.getAttribute('id'); |
+ if (headerId && this.getAttribute('aria-labelledby') === headerId) { |
+ return; |
+ } |
+ // set aria-describedBy to the header element |
+ var labelledById; |
+ if (headerId) { |
+ labelledById = headerId; |
+ } else { |
+ labelledById = 'paper-dialog-header-' + new Date().getUTCMilliseconds(); |
+ header.setAttribute('id', labelledById); |
+ } |
+ this.setAttribute('aria-labelledby', labelledById); |
+ }, |
+ |
+ _updateClosingReasonConfirmed: function(confirmed) { |
+ this.closingReason = this.closingReason || {}; |
+ this.closingReason.confirmed = confirmed; |
+ }, |
+ |
+ _onDialogClick: function(event) { |
+ var target = event.target; |
+ while (target !== this) { |
+ if (target.hasAttribute('dialog-dismiss')) { |
+ this._updateClosingReasonConfirmed(false); |
+ this.close(); |
+ break; |
+ } else if (target.hasAttribute('dialog-confirm')) { |
+ this._updateClosingReasonConfirmed(true); |
+ this.close(); |
+ break; |
+ } |
+ target = target.parentNode; |
+ } |
+ }, |
+ |
+ _onIronOverlayOpened: function() { |
+ if (this.modal) { |
+ document.body.addEventListener('focus', this._boundOnFocus, true); |
+ this.backdropElement.addEventListener('click', this._boundOnBackdropClick); |
+ } |
+ }, |
+ |
+ _onIronOverlayClosed: function() { |
+ document.body.removeEventListener('focus', this._boundOnFocus, true); |
+ this.backdropElement.removeEventListener('click', this._boundOnBackdropClick); |
+ }, |
+ |
+ _onFocus: function(event) { |
+ if (this.modal) { |
+ var target = event.target; |
+ while (target && target !== this && target !== document.body) { |
+ target = target.parentNode; |
+ } |
+ if (target) { |
+ if (target === document.body) { |
+ if (this._lastFocusedElement) { |
+ this._lastFocusedElement.focus(); |
+ } else { |
+ this._focusNode.focus(); |
+ } |
+ } else { |
+ this._lastFocusedElement = event.target; |
+ } |
+ } |
+ } |
+ }, |
+ |
+ _onBackdropClick: function() { |
+ if (this.modal) { |
+ if (this._lastFocusedElement) { |
+ this._lastFocusedElement.focus(); |
+ } else { |
+ this._focusNode.focus(); |
+ } |
+ } |
+ } |
+ |
+ }; |
+ |
+ /** @polymerBehavior */ |
+ Polymer.PaperDialogBehavior = [Polymer.IronOverlayBehavior, Polymer.PaperDialogBehaviorImpl]; |
+ |