npm-polymer-elements/iron-demo-helpers/demo-snippet.html

Polymer Elements package for npm

<!--
@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="../prism-element/prism-highlighter.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../paper-styles/color.html">
<link rel="import" href="../paper-styles/shadow.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>
      :host {
        display: block;
        @apply(--shadow-elevation-2dp);
        @apply(--demo-snippet);
      }

      .demo {
        border-bottom: 1px solid #e5e5e5;
        background-color: white;
        margin: 0;
        padding: 20px;
        @apply(--demo-snippet-demo);
      }

      .code {
        padding: 0 20px;
        margin: 0;
        background-color: #fafafa;
        font-size: 13px;
        overflow: auto;
        @apply(--demo-snippet-code);
      }

      .code > pre {
        margin: 0;
        padding: 0 0 10px 0;
      }
    </style>

    <prism-highlighter></prism-highlighter>

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

    <marked-element markdown=[[_markdown]] id="marked">
      <div class="markdown-html code"></div>
    </marked-element>
  </template>

  <script>
    Polymer({
      is: 'demo-snippet',

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

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

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

        // TODO(noms): When marked-element/issues/23 lands, this will become
        // a public method and will need to be updated.
        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.
        Polymer.dom(this).appendChild(document.importNode(template.content, true));
      }
    });
  </script>

</dom-module>