<commit_before><link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="code-editor.html">

<dom-module id="custom-element-demo">
  <!-- TODO: Support for external stylesheets is deprecated in favor of style modules. -->
  <link rel="import" type="css" href="../bower_components/github-markdown-css/github-markdown.css">
  <style>
    #demoContainer {
      width: 100%;
      height: 0px;
      overflow: hidden;
      border: 1px solid #f7f7f7;
      opacity: 0;
    }

    #demoContainer.reveal {
      animation: reveal 300ms cubic-bezier(0, 0, 0.2, 1);
      opacity: 1;
      transition: opacity 300ms 100ms cubic-bezier(0, 0, 0.2, 1);
    }

    @keyframes reveal {
      from {
        height: 0px;
      }
    }

    #frame {
      border: none;
      width: 100%;
      height: 0px;
    }

    #editorBar {
      padding: 16px 16px 0;
      background: #f7f7f7;
    }

    #expandSource {
      text-align: center;
      border: 1px solid #bbb;
      border-radius: 2px;
      background: white;
    }
  </style>
  <template>
    <div id="demoContainer">
      <iframe id="frame"></iframe>
    </div>
    <div id="editorBar">
      <button id="expandSource" on-tap="_expandSource">Expand source</button>
    </div>
    <code-editor id="editor" on-code-change="_codeChange"></code-editor>
  </template>

  <script>
    Polymer({

      is: 'custom-element-demo',

      properties: {
        data: Object,

        width: Number,

        height: Number,

        code: String,

        snippet: String,

        baseUrl: String,
      },

      observers: [
        '_setDemo(data, code)',
        '_setFrame(baseUrl, data)',
        '_sourceChanged(snippet, code)',
      ],

      _expandSource: function() {
        this._collapsed = false;
        this._code = this._fullSource();
        delete this._snippet;
        this.$.editor.value = this._code;<commit_msg>Export inline demo as fiddle (#42)<commit_after><link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="code-editor.html">

<dom-module id="custom-element-demo">
  <!-- TODO: Support for external stylesheets is deprecated in favor of style modules. -->
  <link rel="import" type="css" href="../bower_components/github-markdown-css/github-markdown.css">
  <style>
    #demoContainer {
      width: 100%;
      height: 0px;
      overflow: hidden;
      border: 1px solid #f7f7f7;
      opacity: 0;
    }

    #demoContainer.reveal {
      animation: reveal 300ms cubic-bezier(0, 0, 0.2, 1);
      opacity: 1;
      transition: opacity 300ms 100ms cubic-bezier(0, 0, 0.2, 1);
    }

    @keyframes reveal {
      from {
        height: 0px;
      }
    }

    #frame {
      border: none;
      width: 100%;
      height: 0px;
    }

    #editorBar {
      padding: 16px 16px 0;
      background: #f7f7f7;
      display: flex;
      align-items: center;
    }

    button {
      text-align: center;
      border: 1px solid #bbb;
      border-radius: 2px;
      background: white;
    }
  </style>
  <template>
    <div id="demoContainer">
      <iframe id="frame"></iframe>
    </div>
    <div id="editorBar">
      <button id="expandSource" on-tap="_expandSource">Expand source</button>
      <form action="https://jsfiddle.net/api/post/library/pure/" method="post" target="_blank">
        <input type="hidden" id="html" name="html">
        <button on-tap="_openAsFiddle">Export as Fiddle</on>
      </form>
    </div>
    <code-editor id="editor" on-code-change="_codeChange"></code-editor>
  </template>

  <script>
    Polymer({

      is: 'custom-element-demo',

      properties: {
        data: Object,

        width: Number,

        height: Number,

        code: String,

        snippet: String,

        baseUrl: String,
      },

      observers: [
        '_setDemo(data, code)',
        '_setFrame(baseUrl, data)',
        '_sourceChanged(snippet, code)',
      ],

      _openAsFiddle: function() {
        this.$.html.value = '<base href="' + this.$.frame.src + '">\n' + this._fullSource();
      },

      _expandSource: function() {
        this._collapsed = false;
        this._code = this._fullSource();
        delete this._snippet;
        this.$.editor.value = this._code;
{'fraction_non_alphanumeric': 0.14776470588235294, 'fraction_numerical': 0.021176470588235293, 'mean_word_length': 2.27, 'pattern_counts': {'":': 0, '<': 49, '<?xml version=': 0, '>': 49, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '229630', 'n_tokens_mistral': 1476, 'n_tokens_neox': 1340, 'n_words': 305}