api-console-assets
Version:
This repo only exists to publish api console components to npm
151 lines (144 loc) • 6.17 kB
HTML
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>Paper Autocomplete Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../../paper-input/paper-input-container.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../paper-autocomplete.html">
<style>
.form .form-row paper-autocomplete {
top: 32px;
}
</style>
</head>
<body>
<template is="dom-bind">
<div class="vertical-section vertical-section-container centered relative">
<p>Suggestions with predefined list</p>
<div class="relative">
<paper-input label="Enter fruit name" id="fruits"></paper-input>
<paper-autocomplete open-on-focus on-query="_queryCalled" on-selected="_selectedCalled" source="[[suggestions]]" id="fruitsSuggestions"></paper-autocomplete>
</div>
<p>
<span>`query` event fired:</span>
<span>[[queryCounter]]</span>,
<span>`selected` event fired:</span>
<span>[[selectedCounter]]</span>
</p>
</div>
<div class="vertical-section vertical-section-container centered relative">
<p>Attach autocomplete to existing input field</p>
<div class="relative">
<paper-input-container>
<label>Enter friut name</label>
<input is="iron-input" type="text" value="{{externalInput::input}}" id="externalField" />
</paper-input-container>
<paper-autocomplete loader id="fruitExternal" on-query="_asyncSuggestions"></paper-autocomplete>
</div>
</div>
<div class="vertical-section vertical-section-container centered relative">
<p>Autocomplete in <b>dom-repeat</b></p>
<div class="form">
<template is="dom-repeat" id="list" items="{{list}}">
<div class="form-row relative">
<paper-input-container class="item-name" no-label-float inline>
<input is="iron-input" on-focus="inputFocus" type="text" value="{{item.name::input}}" placeholder="Fruit name"/>
</paper-input-container>
<paper-button title="Remove fruit" on-tap="removeItem">remove</paper-button>
<paper-autocomplete open-on-focus source="[[suggestions]]"></paper-autocomplete>
</div>
</template>
</div>
<paper-button raised on-tap="appendListItem">Add</paper-button>
</div>
<div class="vertical-section vertical-section-container centered relative">
<p>Autocomplete can be positioned</p>
<div class="relative">
<paper-input label="Enter fruit name" id="fruitsPositioned"></paper-input>
<paper-autocomplete open-on-focus target="[[positionTarget]]" position-target="[[positionTarget]]" dynamic-align vertical-align="top" horizontal-align="left" vertical-offset="56" source="[[suggestions]]"></paper-autocomplete>
</div>
</div>
</template>
<script src="../../chance/chance.js"></script>
<script>
/* global chance */
var demo = document.querySelector('template');
demo.selectedCounter = 0;
demo.queryCounter = 0;
demo.addEventListener('dom-change', function() {
var suggestions = ['Apple', 'Apricot', 'Avocado',
'Banana', 'Bilberry', 'Blackberry', 'Blackcurrant', 'Blueberry',
'Boysenberry', 'Cantaloupe', 'Currant', 'Cherry', 'Cherimoya',
'Cloudberry', 'Coconut', 'Cranberry', 'Damson', 'Date', 'Dragonfruit',
'Durian', 'Elderberry', 'Feijoa', 'Fig', 'Goji berry', 'Gooseberry',
'Grape', 'Grapefruit', 'Guava', 'Huckleberry', 'Jabuticaba', 'Jackfruit',
'Jambul', 'Jujube', 'Juniper berry', 'Kiwi fruit', 'Kumquat', 'Lemon',
'Lime', 'Loquat', 'Lychee', 'Mango', 'Marion berry', 'Melon', 'Miracle fruit',
'Mulberry', 'Nectarine', 'Olive', 'Orange'];
demo.$.fruitsSuggestions.source = suggestions;
demo.suggestions = suggestions;
demo.list = [
{name: 'Apple'},
{name: 'Damson'},
{name: 'Feijoa'},
{name: 'Mango'},
{name: 'Olive'}
];
demo.$.fruitsSuggestions.target = demo.$.fruits;
demo.$.fruitExternal.target = demo.$.externalField;
});
demo._selectedCalled = function() {
demo.selectedCounter++;
};
demo._queryCalled = function() {
demo.queryCounter++;
};
demo._asyncSuggestions = function(e) {
var value = e.detail.value;
demo.async(function() {
var suggestions = [];
for (var i = 0; i < 25; i++) {
suggestions.push(value + '' + chance.word());
}
demo.$.fruitExternal.source = suggestions;
}, 1000);
};
demo.removeItem = function(e) {
var index = this.$.list.indexForElement(e.target);
this.splice('list', index, 1);
};
demo.inputFocus = function(e) {
var index = this.$.list.indexForElement(e.target);
var elm = document.querySelector('.form-row:nth-child(' + (index + 1) + ') paper-autocomplete');
if (!elm) {
return;
}
elm.target = e.target;
};
demo.appendListItem = function() {
demo.push('list', {name: ''});
};
demo.init = function() {
demo.positionTarget = document.getElementById('fruitsPositioned');
};
window.addEventListener('WebComponentsReady', function() {
demo.init();
});
</script>
</body>
</html>