| <!-- 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> |