webdash-readme-preview/bower_components/iron-demo-helpers/demo-snippet.html

Preview your README.md straight from the dashboard

<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../prism-element/prism-highlighter.html">
<link rel="import" href="../prism-element/prism-theme-default.html">

<!--
`demo-snippet` is a helper element that displays the source of a code snippet and
its rendered demo. It can be used for both native elements and
Polymer elements.

    Example of a native element demo

        <demo-snippet>
          <template>
            <input type="date">
          </template>
        </demo-snippet>

    Example of a Polymer <paper-checkbox> demo

        <demo-snippet>
          <template>
            <paper-checkbox>Checkbox</paper-checkbox>
            <paper-checkbox checked>Checkbox</paper-checkbox>
          </template>
        </demo-snippet>

### Styling

The following custom properties and mixins are available for styling:

Custom property | Description | Default
----------------|-------------|----------
`--demo-snippet` | Mixin applied to the entire element | `{}`
`--demo-snippet-demo` | Mixin applied to just the demo section | `{}`
`--demo-snippet-code` | Mixin applied to just the code section | `{}`

@element demo-snippet
@demo demo/index.html
-->

<dom-module id="demo-snippet">
  <template>
    <style include="prism-theme-default">
      :host {
        display: block;

        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                    0 1px 5px 0 rgba(0, 0, 0, 0.12),
                    0 3px 1px -2px rgba(0, 0, 0, 0.2);
        margin-bottom: 40px;
        @apply --demo-snippet;
      }

      .demo {
        display: block;
        border-bottom: 1px solid #e0e0e0;
        background-color: white;
        margin: 0;
        padding: 20px;
        @apply --demo-snippet-demo;
      }

      .code-container {
        margin: 0;
        background-color: #f5f5f5;
        font-size: 13px;
        overflow: auto;
        position: relative;
        padding: 0 20px;
        @apply --demo-snippet-code;
      }

      .code {
        padding: 20px;
        margin: 0;
        background-color: var(--google-grey-100);
        font-size: 13px;
        overflow: auto;
        @apply --demo-snippet-code;
      }
      .code > pre {
        margin: 0;
        padding: 0 0 10px 0;
      }

      button {
        position: absolute;
        top: 0;
        right: 0px;
        text-transform: uppercase;
        border: none;
        cursor: pointer;
        background: #e0e0e0;
      }
    </style>

    <prism-highlighter></prism-highlighter>

    <div class="demo">
      <slot id="content"></slot>
    </div>

    <div class="code-container">
      <marked-element markdown="[[_markdown]]" id="marked">
         <div class="code" slot="markdown-html" id="code"></div>
      </marked-element>
      <button id="copyButton" title="copy to clipboard" on-tap="_copyToClipboard">Copy</button>
    </div>
  </template>

  <script>
    'use strict';

    Polymer({
      is: 'demo-snippet',

      properties: {
        _markdown: {
          type: String
        }
      },

      attached: function() {
        this._observer = Polymer.dom(this.$.content).observeNodes(function(info) {
          this._updateMarkdown();
        }.bind(this));
      },

      detached: function() {
        if (this._observer) {
          Polymer.dom(this.$.content).unobserveNodes(this._observer);
          this._observer = null;
        }
      },

      _updateMarkdown: function() {
        var template = Polymer.dom(this).queryDistributedElements('template')[0];

        // If there's no template, render empty code.
        if (!template) {
          this._markdown = '';
          return;
        }

        var snippet = this.$.marked.unindent(template.innerHTML);

        // Boolean properties are displayed as checked="", so remove the ="" bit.
        snippet = snippet.replace(/=""/g, '');
        this._markdown = '```\n' + snippet + '\n' + '```';

        // Stamp the template.
        if (!template.hasAttribute('is')) {
          // Don't need to listen for more changes (since stamping the template
          // will trigger an observeNodes)
          Polymer.dom(this.$.content).unobserveNodes(this._observer);
          this._observer = null;
          Polymer.dom(this).appendChild(document.importNode(template.content, true));
        }
      },

      _copyToClipboard: function() {
        // From https://github.com/google/material-design-lite/blob/master/docs/_assets/snippets.js
        var snipRange = document.createRange();
        snipRange.selectNodeContents(this.$.code);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(snipRange);
        var result = false;
        try {
          result = document.execCommand('copy');
          this.$.copyButton.textContent = 'done';
        } catch (err) {
          // Copy command is not available
          console.error(err);
          this.$.copyButton.textContent = 'error';
        }

        // Return to the copy button after a second.
        setTimeout(this._resetCopyButtonState.bind(this), 1000);

        selection.removeAllRanges();
        return result;
      },

      _resetCopyButtonState: function() {
        this.$.copyButton.textContent = 'copy';
      },
    });
  </script>

</dom-module>