markdown-input.html

<!--
@license
Copyright (c) 2017 Preview-Code. All rights reserved.
This code may only be used under the BSD style license found in LICENSE.txt
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-input/paper-textarea.html">
<link rel="import" href="../iron-icons/iron-icons.html">
<link rel="import" href="../iron-icons/editor-icons.html">
<link rel="import" href="marked-github-element.html">

<!--
`markdown-input`

Element to parse markdown input from an input field and
after toggling the preview showing the rendered markdown in real-time.

@demo demo/index.html
-->

<dom-module id="markdown-input">
  <template>
    <style>
      :host {
        display: flex;
        padding: 0 0.5em;
        border: solid 1px transparent;
      }
      :host([disabled]) {
        padding: 0;
      }
      :host(.noPreview) {
        border: solid 1px var(--secondary-background-color, lightgray);
        background-color: var(--tertiary-background-color, white);
      }
      [hidden] {
        display: none !important;
      }
      .edit-area {
        flex: 1;
        line-height: 1.4em;
        padding-left: 0.5em;
        min-width: 0;
      }
      paper-textarea {
        --paper-input-container: {
          padding: 0 0 0.5em 0;
        };
        --paper-input-container-label: {
          color: var(--secondary-text-color, grey);
        };
        --paper-input-container-color: var(--secondary-background-color,lightgrey);
        --paper-input-container-focus-color: var(--anchor-color, lightblue);
      }

      paper-icon-button {
        margin-top: 1em;
      }
      paper-icon-button:hover {
        color: var(--anchor-color, lightblue);
      }
      marked-github-element {
        margin-top: 16px;
      }
    </style>
    <div class="edit-area">
      <paper-textarea id="textarea" hidden$="[[!_hidePreview]]" label="[[label]]" value="{{markdown}}"></paper-textarea>
      <marked-github-element hidden$="[[_hidePreview]]" markdown="[[markdown]]" project="[[project]]"></marked-github-element>
    </div>
    <paper-icon-button toggles id="previewIcon" icon="icons:visibility" hidden$="[[_hidePreviewIcon]]" active="{{previewToggle}}" title="Toggle Markdown preview">[[_toggleText]]</paper-icon-button>
    <paper-icon-button toggles id="editIcon" icon="editor:mode-edit" hidden$="[[_hideEditIcon]]" active="{{previewToggle}}" title="Toggle Markdown preview">[[_toggleText]]</paper-icon-button>
  </template>
  <script>
    Polymer({
      is: 'markdown-input',
      properties: {
        /**
         * If the toggle button should be hidden.
         * @type {Boolean}
         */
        disabled: {
          type: Boolean,
          value: false,
          reflectToAttribute: true
        },
        /**
         * The markdown from the input field to be rendered to markdown HTML.
         * @type {String}
         */
        markdown: {
          type: String,
          notify: true
        },
        /**
         * The label for the text input field.
         * @type {String}
         */
        label: String,

        /**
         * Determines whether preview mode is enabled or not.
         * @type {Boolean}
         */
        previewToggle: {
          type: Boolean,
          notify: true,
          observer: '_previewToggleChanged'
        },

        /**
         * Set this to an object containing a `name` and `owner` field.
         * Necessary to correctly generate GitHub flavored markdown that
         * contains links on user/issue references.
         * @type {Object}
         */
        project: Object,

        _hidePreview: {
          type: Boolean,
          computed: '_getHidePreview(previewToggle, disabled)'
        },
        _toggleText: {
          type: String,
          computed: '_getToggleText(previewToggle)'
        },
        _hideEditIcon: {
          type: Boolean,
          computed: '_computeHideEditIcon(disabled, previewToggle)'
        },
        _hidePreviewIcon: {
          type: Boolean,
          computed: '_computeHidePreviewIcon(disabled, previewToggle)'
        }
      },

      _previewToggleChanged: function (newValue) {
        if (newValue) {
          return;
        }
        this.$.textarea.focus();
      },

      _getHidePreview: function (previewToggle, disabled) {
        var shouldBeHidden = !disabled && !previewToggle;
        this.toggleClass('noPreview', shouldBeHidden);
        return shouldBeHidden;
      },

      _getToggleText: function (active) {
        if (active) {
          return 'Edit';
        }
        return 'Preview';
      },

      _computeHideEditIcon: function (disabled, previewToggle) {
        return !previewToggle || disabled;
      },

      _computeHidePreviewIcon: function (disabled, previewToggle) {
        return previewToggle || disabled;
      }
    });
  </script>
</dom-module>