res/imp/confirm-dialog-sk.html

<!--
`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>