| <!-- |
| Copyright (C) 2015 The Android Open Source Project |
| |
| Licensed under the Apache License, Version 2.0 (the "License"); |
| you may not use this file except in compliance with the License. |
| You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <link rel="import" href="../bower_components/polymer/polymer.html"> |
| <link rel="import" href="../bower_components/iron-input/iron-input.html"> |
| <link rel="import" href="../behaviors/keyboard-shortcut-behavior.html"> |
| |
| <dom-module id="gr-search-bar"> |
| <template> |
| <style> |
| :host { |
| display: block; |
| } |
| form { |
| display: flex; |
| margin-left: 3em; |
| } |
| input, |
| button { |
| border: 1px solid #aaa; |
| font: inherit; |
| padding: .2em .5em; |
| } |
| input { |
| flex: 1; |
| border-radius: 2px 0 0 2px; |
| } |
| button { |
| background-color: #f1f2f3; |
| border-radius: 0 2px 2px 0; |
| border-left-width: 0; |
| } |
| </style> |
| <form> |
| <input is="iron-input" id="searchInput" bind-value="{{_inputVal}}"> |
| <button type="submit" id="searchButton">Search</button> |
| </form> |
| </template> |
| <script> |
| (function() { |
| 'use strict'; |
| |
| Polymer({ |
| is: 'gr-search-bar', |
| |
| behaviors: [ Gerrit.KeyboardShortcutBehavior ], |
| |
| listeners: { |
| 'searchInput.keydown': '_inputKeyDownHandler', |
| 'searchButton.tap': '_preventDefaultAndNavigateToInputVal', |
| }, |
| |
| properties: { |
| value: { |
| type: String, |
| value: '', |
| notify: true, |
| observer: '_valueChanged', |
| }, |
| keyEventTarget: { |
| type: Object, |
| value: function() { return document.body; }, |
| }, |
| |
| _inputVal: String, |
| }, |
| |
| _valueChanged: function(value) { |
| this._inputVal = value; |
| }, |
| |
| _inputKeyDownHandler: function(e) { |
| if (e.keyCode == 13) { // Enter key |
| this._preventDefaultAndNavigateToInputVal(e); |
| } |
| }, |
| |
| _preventDefaultAndNavigateToInputVal: function(e) { |
| e.preventDefault(); |
| Polymer.dom(e).rootTarget.blur(); |
| page.show('/q/' + this._inputVal); |
| }, |
| |
| _handleKey: function(e) { |
| if (this.shouldSupressKeyboardShortcut(e)) { return; } |
| switch(e.keyCode) { |
| case 191: // '/' |
| e.preventDefault(); |
| var s = this.$.searchInput; |
| s.focus(); |
| s.setSelectionRange(0, s.value.length); |
| break; |
| } |
| }, |
| }); |
| |
| })(); |
| </script> |
| </dom-module> |