| <link rel="import" href="../../../third-party/polymer/polymer.html"> |
| <link rel="import" href="../../../third-party/paper-checkbox/paper-checkbox.html"> |
| |
| <polymer-element name="p2b-plugin-console"> |
| <template> |
| <link rel="stylesheet" href="component.css"> |
| <link rel="stylesheet" href="../../../libs/css/common-style.css"> |
| <div title="Auto Scroll" class="auto-scroll {{ {hidden : !scrolling} | tokenList}}"> |
| <paper-checkbox checked="{{autoScroll}}" label="Auto Scroll" id="autoscroll"></paper-checkbox> |
| </div> |
| <pre id="console"></pre> |
| </template> |
| <script> |
| Polymer('p2b-plugin-console', { |
| ready: function() { |
| this.textBuffer = []; |
| this.autoScroll = true; |
| }, |
| |
| attached: function() { |
| this.renderLoop(); |
| }, |
| detached: function() { |
| this.isDetached = true; |
| }, |
| renderLoop: function() { |
| var self = this; |
| if (!this.isDetached) { |
| requestAnimationFrame(function() { |
| self.render(); |
| self.renderLoop(); |
| }); |
| } |
| }, |
| render: function() { |
| if (this.textBuffer.length === 0) { |
| return; |
| } |
| var textNode = document.createTextNode(this.textBuffer.join('')); |
| this.textBuffer = []; |
| this.$.console.appendChild(textNode); |
| var scrollTop = this.scrollTop; |
| this.scrolling = scrollTop > 0; |
| if (this.autoScroll) { |
| this.scrollTop = this.scrollHeight; |
| } |
| }, |
| /* |
| * Appends text to the console |
| * @param {string} text Text to add |
| */ |
| addText: function(text) { |
| this.textBuffer.push(text); |
| } |
| }); |
| </script> |
| </polymer-element> |