pmp-help.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../paper-toast/paper-toast.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-styles/color.html">
<!--
`pmp-help`
pmp-help should show the contents of the file in a paper-dialog

@demo demo/index.html
-->
<dom-module id="pmp-help">
  <template>
    <style is="custom-style">
    : host {
      display: block;
      width: 100%;
    }
    
    #help {
      color: var(--pmp-help-icon-color, --paper-indigo-500);
    }
    
    #button {
      color: var(--pmp-help-paper-button-color);
    }
    
    #dialog {
      --paper-dialog: {
        @apply(--pmp-help-paper-dialog);
      }
    }
    
    #scrollable {
      --paper-dialog-scrollable: {
        @apply(--pmp-help-paper-dialog-scrollable);
      }
    }
    </style>
    <paper-icon-button icon="help" id="help" title$="[[title]]" on-tap="_toggleDialog"></paper-icon-button>
    <paper-dialog id="dialog">
      <paper-dialog-scrollable id="scrollable">
        <marked-element markdown="{{_fileContent}}">
        </marked-element>
      </paper-dialog-scrollable>
      <div class="buttons">
        <paper-button id="button" dialog-dismiss autofocus>Close</paper-button>
      </div>
    </paper-dialog>
    <paper-toast id="toast" duration="[[toastDuration]]" class="fit-bottom" text="Failed to load file."></paper-toast>
  </template>
  <script>
  Polymer({
    is: 'pmp-help',

    properties: {
      _fileContent: {
        type: String
      },

      fileName: {
        type: String,
        notify: true
      },

      toastDuration: {
        type: Number,
        value: 6000
      },

      title: {
        type: String,
        value: 'help'
      },

    },

    _getFileContent: function(fileName) {
      fetch(fileName).then(response => {
        if (response.headers.get("content-type") &&
          response.headers.get("content-type").toLowerCase().indexOf("text/x-markdown") >= 0) {
          return response.text();
        } else {
          throw new TypeError();
        }
      }).then(text => {
        this._fileContent = text;
        if (this.$.dialog) {
          this.$.dialog.open();
        }
      }).catch(error => {
        console.error(error);
        if (this.$.toast) {
          this.$.toast.open();
        }
      });
    },

    _toggleDialog: function() {
      this._getFileContent(this.fileName);
    }

  });
  </script>
</dom-module>