| <!-- |
| `confirm-dialog-sk` pops up a dialog with OK and Cancel buttons. Its open method returns a Promise |
| which will resolve when the user clicks OK or reject when the user clicks Cancel. |
| |
| Example: |
| |
| <confirm-dialog-sk id="confirm_dialog"></confirm-dialog-sk> |
| |
| <script> |
| (function(){ |
| $$$('confirm-dialog-sk').open("Proceed with taking over the world?").then(function() { |
| sk.post("/brain"); |
| }, function() { |
| sk.post("/pinky"); |
| }); |
| })(); |
| </script> |
| |
| Properties: |
| |
| message - The message to display. Can be set via the open method. Default is "Proceed?". |
| |
| dismiss_text - The label of the button that triggers rejection. Default is "Cancel". |
| |
| confirm_text - The label of the button that triggers resolution. Default is "OK". |
| |
| promise - The promise that will resolve if the user clicks the confirm button or reject if the |
| user clicks the dismiss button. It is initially null. Intended to be read-only. |
| |
| Methods: |
| |
| open(message, dismiss_text, confirm_text) - All arguments optional. |
| - Sets the properties based on the arguments. |
| - Sets the dialog to be displayed. |
| - Sets and returns the promise property. |
| - When the user clicks the confirm or dismiss button, calls close() and resolves or rejects |
| the previous value of promise. |
| |
| close() - Sets the dialog to be hidden and unsets promise. |
| |
| Events: |
| |
| None. |
| |
| --> |
| |
| <link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html"> |
| |
| <dom-module id="confirm-dialog-sk"> |
| <template> |
| <style> |
| paper-button { |
| color: #1f78b4; |
| } |
| |
| paper-button:hover { |
| background: #eee; |
| } |
| </style> |
| |
| <paper-dialog id="dialog" modal> |
| <div>[[message]]</div> |
| <paper-button dialog-dismiss id="dismiss_button">[[dismiss_text]]</paper-button> |
| <paper-button dialog-confirm id="confirm_button" autofocus>[[confirm_text]]</paper-button> |
| </paper-dialog> |
| </template> |
| </dom-module> |
| |
| <script> |
| Polymer({ |
| is: 'confirm-dialog-sk', |
| |
| properties: { |
| message: { |
| type: String, |
| value: 'Proceed?', |
| reflectToAttribute: true |
| }, |
| dismiss_text: { |
| type: String, |
| value: 'Cancel', |
| reflectToAttribute: true |
| }, |
| confirm_text: { |
| type: String, |
| value: 'OK', |
| reflectToAttribute: true |
| }, |
| promise: Promise, |
| _resolve: Function, |
| _reject: Function, |
| }, |
| |
| ready: function () { |
| this.$.dismiss_button.addEventListener('click', function(e) { |
| var reject = this._reject; |
| this.close(); |
| // Call reject after a short delay to allow UI to update after this.close(). |
| window.setTimeout(reject, 10); |
| }.bind(this)); |
| this.$.confirm_button.addEventListener('click', function(e) { |
| var resolve = this._resolve; |
| this.close(); |
| // Call reject after a short delay to allow UI to update after this.close(). |
| window.setTimeout(resolve, 10); |
| }.bind(this)); |
| }, |
| |
| open: function (new_message, new_dismiss_text, new_confirm_text) { |
| if (new_message) { |
| this.message = new_message; |
| } |
| if (new_dismiss_text) { |
| this.dismiss_text = new_dismiss_text; |
| } |
| if (new_confirm_text) { |
| this.confirm_text = new_confirm_text; |
| } |
| this.promise = new Promise(function(resolve, reject) { |
| this._resolve = resolve; |
| this._reject = reject; |
| this.$.dialog.open(); |
| }.bind(this)); |
| return this.promise; |
| }, |
| |
| close: function () { |
| this.$.dialog.close(); |
| this.promise = null; |
| this._reject = null; |
| this._resolve = null; |
| }, |
| }); |
| </script> |