jviz-confirm.html

<!--
@license
Copyright (c) 2016 The Jviz Project Authors. All rights reserved.
The Jviz Project is under the MIT License. See https://github.com/jviz/jviz/blob/dev/LICENSE
-->

<!-- Import dependencies -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../jviz/jviz.html">
<link rel="import" href="../jviz-popup/jviz-popup.html">
<link rel="import" href="../jviz-btn/jviz-btn.html">

<!-- Confirmation element -->
<dom-module id="jviz-confirm">
  <template>
    <style>
      :host .content
      {
        margin-top: 0px;
        margin-bottom: 10px;
      }
      :host .buttons
      {
        margin-top: 0px;
        margin-bottom: 0px;
      }
    </style>
    <jviz-popup id="popup" header$="{{ header }}">
      <div class="content">
        <content></content>
      </div>
      <div class="buttons">
        <jviz-btn color="green" text$="{{ textConfirm }}" on-tap="_on_confirm"></jviz-btn>
        <jviz-btn color="red" text$="{{ textCancel }}" on-tap="_on_cancel"></jviz-btn>
      </div>
    </jviz-popup>
  </template>
</dom-module>

<!-- Element logic -->
<script>
  //Initialize the confirm element
  var jviz_confirm = { is: 'jviz-confirm' };

  //Initialize the properties
  jviz_confirm.properties = {};
  jviz_confirm.properties.header = { type: String, reflectToAttribute: true, value: '' };
  jviz_confirm.properties.visible = { type: Boolean, reflectToAttribute: true, value: false, observer: '_update_visible' };
  jviz_confirm.properties.textConfirm = { type: String, reflectToAttribute: true, value: 'Confirm' };
  jviz_confirm.properties.textCancel = { type: String, reflectToAttribute: true, value: 'Cancel' };

  //Attached method
  jviz_confirm.attached = function()
  {
    //Save this
    var self = this;

    //Add the popup close event listener
    this.$.popup.addEventListener('close', function()
    {
      //Emit the cancel event
      return self._on_cancel();
    });
  };

  //Update the visible value
  jviz_confirm._update_visible = function(value)
  {
    //Update the popup visible property
    this.$.popup.visible = value;
  };

  //Click on confirm button
  jviz_confirm._on_confirm = function()
  {
    //Hide the popup
    this.visible = false;

    //Emit the confirm event
    return this.fire('confirm', {});
  };

  //Click on cancel button
  jviz_confirm._on_cancel = function()
  {
    //Hide the popup
    this.visible = false;

    //Emit the cancel event
    return this.fire('cancel', {});
  };

  //Show method
  jviz_confirm.show = function(){ this.visible = true; };

  //Close method
  jviz_confirm.hide = function(){ this.visible = false; };

  //Register the confirm element
  Polymer(jviz_confirm);
</script>