payload-editor.html

<!--
@license
Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../raw-payload-editor/raw-payload-editor.html">
<link rel="import" href="../form-data-editor/form-data-editor.html">
<link rel="import" href="../multipart-payload-editor/multipart-payload-editor.html">
<link rel="import" href="../files-payload-editor/files-payload-editor.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../content-type-selector/content-type-selector.html">
<link rel="import" href="../iron-pages/iron-pages.html">
<!--
An element that is responsible for displaying forms to prepare a request body.

The element contains following editors that the user may use to provide the value:

- [raw editor](https://github.com/advanced-rest-client/raw-payload-editor) - free text form editor with syntax highlighting, accepts any text value
- [form editor](https://github.com/advanced-rest-client/form-data-editor) - `x-www-form-urlencoded` content type editor as a standard web form. Produces valid url-encoded output
- [multipart editor](https://github.com/advanced-rest-client/multipart-payload-editor) - for mixed text fields and files
- [file input](https://github.com/advanced-rest-client/files-payload-editor) - to send file as the body
- [body-json-editor](https://github.com/advanced-rest-client/body-json-editor) - JSON editor in form

The `value` property can have different type depending on selected editor.
Raw, form and JSON editors produces `string` value. Multipart produces `FormData` object and file editor produces `File` object.

### Example
```
<payload-editor value="{{body}}"></payload-editor>
```

Each time a value changes in one of child editors the `payload-value-changed` custom event is fired
with a `value` property set on `detail` object. Intercepting the event prevents you from reading
value of the element directly.

### Styling
`<payload-editor>` provides the following custom properties and mixins for styling:

Custom property | Description | Default
----------------|-------------|----------
`--payload-editor` | Mixin applied to the element | `{}`
`--payload-editor-dropdown` | Mixin applied to dropdown menus in the header | `{}`
`--payload-editor-options-panel` | Mixin applied to the container with dropdowns | `{}`
`--payload-editor-dropdown-type` | Mixin applied to the dropdown that selects editor type | `{}`

@group UI Elements
@element payload-editor
@demo demo/index.html
-->
<dom-module id="payload-editor">
  <template>
    <style>
    :host {
      display: block;
      position: relative;
    }

    .panel-options {
      @apply --layout-horizontal;
      @apply --layout-center;
      @apply --payload-editor-options-panel;
    }

    paper-dropdown-menu {
      margin-right: 12px;
      @apply --payload-editor-dropdown;
    }

    paper-dropdown-menu.type {
      padding: 0 12px;
      min-width: 320px;
      @apply --payload-editor-dropdown-type;
    }

    [hidden] {
      display: none !important;
    }
    </style>
    <section class="panel-options">
      <content-type-selector content-type="{{contentType}}">
        <paper-item data-type="application/octet-stream">Any file data</paper-item>
      </content-type-selector>
      <paper-dropdown-menu class="type" label="Editor view" hidden$="[[editorSelectorHidden]]">
        <paper-listbox class="dropdown-content" selected="{{openedEditor}}">
          <paper-item hidden$="[[noTextInput]]">Raw input</paper-item>
          <paper-item hidden$="[[noFormData]]">Form data (www-url-form-encoded)</paper-item>
          <paper-item hidden$="[[noMultipart]]">Multipart form data (multipart/form-data)</paper-item>
          <paper-item hidden$="[[noFile]]">Single file</paper-item>
        </paper-listbox>
      </paper-dropdown-menu>
    </section>
    <iron-pages selected="{{openedEditor}}" selected-attribute="opened">
      <raw-payload-editor attr-for-opened="opened" value="{{value}}" events-target="[[eventsTarget]]"></raw-payload-editor>
      <form-data-editor attr-for-opened="opened" value="{{value}}"></form-data-editor>
      <multipart-payload-editor attr-for-opened="opened" value="{{value}}"></multipart-payload-editor>
      <files-payload-editor attr-for-opened="opened" value="{{value}}"></files-payload-editor>
    </iron-pages>
  </template>
  <script>
  Polymer({
    is: 'payload-editor',
    properties: {
      /**
       * A HTTP body.
       *
       * Depending of current editor selection the type can vary.
       *
       * @type {String|FormData|File}
       */
      value: {
        type: String,
        value: '',
        notify: true
      },
      /**
       * A value of a Content-Type header.
       *
       * @type {Stirng}
       */
      contentType: {
        type: String,
        observer: '_contentTypeChanged'
      },
      /**
       * Currently selected editor.
       *
       * - 0 for Raw editor
       * - 1 for Form data
       * - 2 for Multipart
       * - 3 for File
       */
      openedEditor: {
        type: Number,
        value: 0,
        observer: '_editorChanged'
      },
      // Computed value, if set then raw text input is hidden
      noTextInput: Boolean,
      // Computed value, if set then form data input is hidden
      noFormData: Boolean,
      // Computed value, if set then multipart input is hidden
      noMultipart: Boolean,
      // Computed value, if set then file input is hidden
      noFile: Boolean,
      // Computed value, true if the editor type selector is hidden.
      editorSelectorHidden: {
        type: Boolean,
        readOnly: true
      },
      /**
       * A JavaScript representation of RAML data type object.
       * It will be passed to the editors that support RAML types.
       */
      ramlType: Object,
      /**
       * Events handlers target. By default the element listens on
       * `window` object. If set, all events listeners will be attached to this
       * object instead of `window`.
       */
      eventsTarget: Object,
    },

    observers: [
      '_computeEditorSelectorHidden(contentType)'
    ],

    listeners: {
      keydown: '_payloadKeyDown'
    },

    _hideAllInputsOptions: function() {
      this.noTextInput = true;
      this.noFormData = true;
      this.noMultipart = true;
      this.noFile = true;
    },

    _showAllInputsOptions: function() {
      this.noTextInput = false;
      this.noFormData = false;
      this.noMultipart = false;
      this.noFile = false;
    },

    _contentTypeChanged: function(contentType, oldValue) {
      if (!contentType) {
        this._showAllInputsOptions();
        return;
      }
      var value = this.value;
      this._hideAllInputsOptions();
      if (contentType.indexOf('multipart/form-data') === 0) {
        this.noMultipart = false;
        this.openedEditor = 2;
        return;
      }
      if (oldValue && oldValue.indexOf('multipart/form-data') === 0) {
        this.value = '';
      }
      if (contentType === 'application/octet-stream' || value instanceof Blob) {
        this.noFile = false;
        this.openedEditor = 3;
        return;
      }
      if (contentType.indexOf('json') !== -1) {
        this.noTextInput = false;
        this.openedEditor = 0;
        return;
      }
      if (contentType === 'application/x-www-form-urlencoded') {
        this.noTextInput = false;
        this.noFormData = false;
        this.openedEditor = 1;
        return;
      }

      this.noTextInput = false;
      this.openedEditor = 0;
    },
    // Called when editor changed. Set's a content type if needed.
    _editorChanged: function(selection) {
      var tabName;
      var ct = this.contentType;

      switch (selection) {
        case 0:
          tabName = 'Raw tab';
          break;
        case 1:
          if (ct !== 'application/x-www-form-urlencoded') {
            this.setContenTypeValue('application/x-www-form-urlencoded');
          }
          tabName = 'Form tab';
          break;
        case 2:
          if (!ct || !ct.indexOf || ct.indexOf('multipart/form-data') === -1) {
            this.setContenTypeValue('multipart/form-data');
          }
          tabName = 'Files tab';
          break;
        case 3:
          tabName = 'Raw file';
          break;
        case 4:
          tabName = 'JSON editor';
          break;
      }

      if (this.isAttached) {
        this.fire('send-analytics', {
          type: 'event',
          category: 'Payload editor',
          action: 'Tab switched',
          label: tabName
        });
      }
    },

    /**
     * Updates Content-Type.
     */
    setContenTypeValue: function(ct) {
      this.set('contentType', ct);
      this.fire('content-type-changed', {
        value: ct
      });
    },
    /**
     * Refreshes current editor value if nescesary.
     * It's important in case of CodeMirror wchich is working really bad if
     * it's in a tabs or similar.
     */
    refresh: function() {
      switch (this.openedEditor) {
        case 0:
          var node = this.$$('raw-payload-editor');
          this.toggleAttribute('opened', false, node);
          this.async(function() {
            this.toggleAttribute('opened', true, node);
          }, 1);
          break;
      }
    },
    /**
     * Computes a value of the hidden attribute of the editory type selector.
     * Some content types are supported by only one type of the editor so in
     * this cases the editor should be hidden.
     *
     * @param {String} contentType Current content type.
     * @return {Boolean} true to hide the selector.
     */
    _computeEditorSelectorHidden: function(contentType) {
      var result;
      var value = this.value;
      if (!contentType) {
        result = false;
      } else if (value instanceof Blob) {
        result = true;
      } else if (contentType.indexOf('json') !== -1) {
        result = true;
      } else if (contentType.indexOf('x-www-form-urlencoded') !== -1) {
        result = false;
      } else {
        result = true;
      }
      this._setEditorSelectorHidden(result);
    },

    _payloadKeyDown: function(e) {
      if (e.key !== 'Enter') {
        return;
      }
      var actionKey = navigator.platform === 'MacIntel' ? 'metaKey' : 'ctrlKey';
      if (!e[actionKey]) {
        return;
      }
      this.fire('send-request', {}, {
        cancelable: true
      });
    }

    /**
     * Dispatched when the user enters combination of CTRL+Enter on Windows / Linux
     * or CMD+Enter on Mac.
     * The application should send current data to an endpoint.
     * The event is cancelable.
     *
     * @event send-request
     */
  });
  </script>
</dom-module>