4db66754ce
So that users can keyboard-shortcut their way around without having to tab around. Issue: Bug 3788 Change-Id: I5ba5d8a6250ba0c290d9007d82a76fdfb867ae6d
118 lines
2.9 KiB
HTML
118 lines
2.9 KiB
HTML
<!--
|
|
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">
|
|
|
|
<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',
|
|
|
|
listeners: {
|
|
'searchInput.keydown': '_inputKeyDownHandler',
|
|
'searchButton.tap': '_preventDefaultAndNavigateToInputVal',
|
|
},
|
|
|
|
properties: {
|
|
value: {
|
|
type: String,
|
|
value: '',
|
|
notify: true,
|
|
observer: '_valueChanged',
|
|
},
|
|
|
|
_inputVal: String,
|
|
_boundKeyHandler: {
|
|
type: Function,
|
|
value: function() { return this._handleKey.bind(this); },
|
|
}
|
|
},
|
|
|
|
attached: function() {
|
|
document.body.addEventListener('keydown', this._boundKeyHandler);
|
|
},
|
|
|
|
detached: function() {
|
|
document.body.removeEventListener('keydown', this._boundKeyHandler);
|
|
},
|
|
|
|
_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 (util.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>
|