| <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-panic"> |
| <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> |
| <paper-input id="filter" label="Filter by keyword..."></paper-input> |
| <pre id="console"></pre> |
| </template> |
| <script> |
| Polymer('p2b-plugin-console-panic', { |
| ready: function() { |
| this.autoScroll = true; |
| |
| // Prepare our current container and current line |
| this.startNewContainer(false); |
| this.startNewLine(); |
| |
| this.$.filter.addEventListener('input', this.filterAllText.bind(this), false); |
| }, |
| /* |
| * Scrolls the plugin console, if this.autoScroll is true |
| */ |
| scrollAuto: function() { |
| // Scroll if we need to. |
| var scrollTop = this.scrollTop; |
| this.scrolling = scrollTop > 0; |
| if (this.autoScroll) { |
| this.scrollTop = this.scrollHeight; |
| } |
| }, |
| /* |
| * Turns off autoscrolling |
| */ |
| scrollOff: function() { |
| this.autoScroll = false; |
| }, |
| /* |
| * Create a new container div for lines of text |
| * @param {boolean} whether or not the container should start hidden or not |
| * @param {string} (optional) the control button's name for toggling hidden on this container. |
| */ |
| startNewContainer: function(isCollapsed, withToggleButtonName) { |
| this.container = document.createElement('div'); |
| |
| // If the container should be collapsed, hide it. |
| if (isCollapsed) { |
| this.container.classList.toggle('hidden'); |
| } |
| |
| if (withToggleButtonName) { |
| // This button controls whether to show/hide the container. |
| var control = document.createElement('core-item'); |
| control.label = withToggleButtonName; |
| control.classList.add("showHide"); |
| control.icon = "swap-vert"; |
| var container = this.container; |
| control.addEventListener( |
| 'click', |
| function toggle() { |
| container.classList.toggle('hidden'); |
| }, |
| false |
| ); |
| this.$.console.appendChild(control); |
| } |
| |
| this.$.console.appendChild(this.container); |
| }, |
| /* |
| * Create a new div for the current line of text. Scroll if necessary. |
| */ |
| startNewLine: function() { |
| this.line = document.createElement('div'); |
| this.line.classList.add('line'); |
| this.container.appendChild(this.line); |
| this.scrollAuto(); |
| }, |
| /* |
| * Add a <br> element to the container. Scroll if necessary. |
| */ |
| addLineBreak: function() { |
| this.container.appendChild(document.createElement('br')); |
| this.scrollAuto(); |
| }, |
| /* |
| * Append text to the current line of text. |
| * Additionally, filter this line since it was modified. |
| * @param {string} the text to be appended |
| */ |
| addText: function(text) { |
| this.line.appendChild(document.createTextNode(text)); |
| this.filter(this.line); |
| }, |
| /* |
| * All elements with class 'line' are filtered. |
| */ |
| filterAllText: function() { |
| var elems = this.$.console.getElementsByClassName('line'); |
| for (var i = 0; i < elems.length; i++) { |
| this.filter(elems[i]); |
| } |
| }, |
| /* |
| * If the given element's text contains the filter's input value, |
| * a yellow background is assigned. Otherwise, it is removed. |
| * @param {div} the given element whose background will be modified |
| */ |
| filter: function(elem) { |
| var value = this.$.filter.inputValue; |
| |
| // Force add/remove the yellowback class depending on if the element has the value or not. Don't highlight if the value is empty. |
| var shouldHighlight = (value && elem.textContent.indexOf(value) >= 0); |
| elem.classList.toggle('yellowback', shouldHighlight); |
| } |
| }); |
| </script> |
| </polymer-element> |