| <!DOCTYPE html> |
| <!-- |
| Copyright (c) 2013 The Chromium Authors. All rights reserved. |
| Use of this source code is governed by a BSD-style license that can be |
| found in the LICENSE file. |
| --> |
| |
| <link rel="import" href="/ui/base/hotkey_controller.html"> |
| <link rel="import" href="/ui/find_controller.html"> |
| <link rel="import" href="/ui/timeline_track_view.html"> |
| |
| <polymer-element name="tr-ui-find-control"> |
| <template> |
| <style> |
| :host { |
| -webkit-user-select: none; |
| display: -webkit-flex; |
| position: relative; |
| } |
| input { |
| -webkit-user-select: auto; |
| background-color: #f8f8f8; |
| border: 1px solid rgba(0, 0, 0, 0.5); |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| width: 170px; |
| } |
| input:focus { |
| background-color: white; |
| } |
| tr-ui-b-toolbar-button { |
| border-left: none; |
| margin: 0; |
| } |
| #hitCount { |
| left: 0; |
| opacity: 0.25; |
| pointer-events: none; |
| position: absolute; |
| text-align: right; |
| top: 2px; |
| width: 167px; |
| z-index: 1; |
| } |
| #spinner { |
| visibility: hidden; |
| width: 8px; |
| height: 8px; |
| left: 154px; |
| pointer-events: none; |
| position: absolute; |
| top: 4px; |
| z-index: 1; |
| |
| border: 2px solid transparent; |
| border-bottom: 2px solid rgba(0, 0, 0, 0.5); |
| border-right: 2px solid rgba(0, 0, 0, 0.5); |
| border-radius: 50%; |
| |
| animation: spin 1s linear infinite; |
| } |
| @keyframes spin { 100% { transform: rotate(360deg); } } |
| </style> |
| |
| <input type='text' id='filter' |
| on-input="{{ filterTextChanged }}" |
| on-keydown="{{ filterKeyDown }}" |
| on-blur="{{ filterBlur }}" |
| on-focus="{{ filterFocus }}" |
| on-mouseup="{{ filterMouseUp }}" /> |
| <div id="spinner"></div> |
| <tr-ui-b-toolbar-button on-click="{{ findPrevious }}"> |
| ← |
| </tr-ui-b-toolbar-button> |
| <tr-ui-b-toolbar-button on-click="{{ findNext }}"> |
| → |
| </tr-ui-b-toolbar-button> |
| <div id="hitCount">0 of 0</div> |
| </template> |
| |
| <script> |
| 'use strict'; |
| |
| Polymer({ |
| filterKeyDown: function(e) { |
| if (e.keyCode === 27) { |
| var hkc = tr.b.getHotkeyControllerForElement(this); |
| if (hkc) { |
| hkc.childRequestsBlur(this); |
| } else { |
| this.blur(); |
| } |
| e.preventDefault(); |
| e.stopPropagation(); |
| return; |
| } else if (e.keyCode === 13) { |
| if (e.shiftKey) |
| this.findPrevious(); |
| else |
| this.findNext(); |
| } |
| }, |
| |
| filterBlur: function(e) { |
| this.updateHitCountEl(); |
| }, |
| |
| filterFocus: function(e) { |
| this.$.filter.select(); |
| }, |
| |
| // Prevent that the input text is deselected after focusing the find |
| // control with the mouse. |
| filterMouseUp: function(e) { |
| e.preventDefault(); |
| }, |
| |
| get controller() { |
| return this.controller_; |
| }, |
| |
| set controller(c) { |
| this.controller_ = c; |
| this.updateHitCountEl(); |
| }, |
| |
| focus: function() { |
| this.$.filter.focus(); |
| }, |
| |
| get hasFocus() { |
| return this === document.activeElement; |
| }, |
| |
| filterTextChanged: function() { |
| this.$.hitCount.textContent = ''; |
| this.$.spinner.style.visibility = 'visible'; |
| this.controller.startFiltering(this.$.filter.value).then(function() { |
| this.$.spinner.style.visibility = 'hidden'; |
| this.updateHitCountEl(); |
| }.bind(this)); |
| }, |
| |
| findNext: function() { |
| if (this.controller) |
| this.controller.findNext(); |
| this.updateHitCountEl(); |
| }, |
| |
| findPrevious: function() { |
| if (this.controller) |
| this.controller.findPrevious(); |
| this.updateHitCountEl(); |
| }, |
| |
| updateHitCountEl: function() { |
| if (!this.controller || !this.hasFocus) { |
| this.$.hitCount.textContent = ''; |
| return; |
| } |
| |
| var n = this.controller.filterHits.length; |
| var i = n === 0 ? -1 : this.controller.currentHitIndex; |
| this.$.hitCount.textContent = (i + 1) + ' of ' + n; |
| }, |
| |
| setText: function(string) { |
| this.$.filter.value = string; |
| } |
| }); |
| </script> |
| </polymer-element> |
