<!-- The <fiddle-embed> custom element declaration.

  A control for embedding a fiddle as a custom element
  on a different domain.

  Any child <p> paragraphs are passed along to be displayed
  between the code and the resulting images.

  Attributes:
    name - The name/fiddlehash of the fiddle.
    gpu  - If true then use the GPU image/webm output instead of the CPU output. Defaults to false.
    cpu  - Force showing the cpu image output even if 'gpu' is true. I.e. both cpu and gpu will be displayed.

  Events:
    None.

  Methods:
    None.
-->

<link rel=import href="fiddle-sk.html">
<link rel=import href="textarea-numbers.html">
<dom-module id="fiddle-embed">
  <style>
      textarea {
        padding: 0.5em;
        font-family: monospace;
        display: block;
        border: none;
        margin-left: 5em;
        resize: none;
        outline: none;
        background: #eee;
        font-size: 13px;
      }
  </style>
  <template>
    <fiddle-sk
      width="[[context.options.width]]"
      height="[[context.options.height]]"
      source="[[context.options.source]]"
      fiddlehash="[[context.fiddlehash]]"
      sources="[[context.sources]]"
      textonly="[[context.options.textOnly]]"
      animated="[[context.options.animated]]"
      domain="https://fiddle.skia.org"
      gpu_embedded="[[gpu]]"
      cpu_embedded="[[cpu]]"
      embedded
      >
      <textarea-numbers-sk id=numbers>
        <textarea spellcheck="false" rows="15" cols="100">[[context.code]]</textarea>
      </textarea-numbers-sk>
      <content select="div"></content>
    </fiddle-sk>
    <error-toast-sk></error-toast-sk>
  </template>
</dom-module>

<script>
  Polymer({
    is: "fiddle-embed",

    properties: {
      name: {
        type: String,
        value: "",
        reflectToAttribute: true,
        observer: "_nameChange",
      },
      context: {
        type: Object,
        value: function() { return {}; },
      },
      gpu: {
        type: Boolean,
        value: false,
        reflectToAttribute: true,
      },
      cpu: {
        type: Boolean,
        value: false,
        reflectToAttribute: true,
      },
    },

    _nameChange: function() {
      if (this.name == "") {
        return
      }
      sk.get("https://fiddle.skia.org/e/"+this.name).then(JSON.parse).then(function(json) {
        // Force skip dirty checking.
        this.context = {};
        this.context = json;
        this.$.numbers.textAreaChanged();
      }.bind(this));
    },

  });
</script>