Skip to content

Commit

Permalink
Merge branch 'master' into p3-preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@manolo
manolo committed Jun 20, 2018
2 parents 5ac9925 + fdde920 commit 67cff45
Show file tree
Hide file tree
Showing 8 changed files with 210 additions and 474 deletions.
87 changes: 0 additions & 87 deletions demo/combo-box-advanced-demos.html
View file

This file was deleted.

102 changes: 18 additions & 84 deletions demo/combo-box-basic-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,100 +6,34 @@
}
</style>

<h3>Combo Box</h3>

<h3>Configuring the Combo Box</h3>

<vaadin-demo-snippet id="combo-box-basic-demos-configuring-the-combo-box">
<vaadin-demo-snippet id="combo-box-basic-combo-box">
<template preserve-content>
<vaadin-combo-box id="demo1-1" label="Element"></vaadin-combo-box>
<vaadin-combo-box id="demo1-2" label="Disabled" disabled></vaadin-combo-box>
<vaadin-combo-box id="demo1-3" label="Read-only" value="Carbon" readonly></vaadin-combo-box>
<vaadin-combo-box id="demo1" label="Element"></vaadin-combo-box>
<script>
window.addDemoReadyListener('#combo-box-basic-demos-configuring-the-combo-box', function(document) {
var combobox1 = document.querySelector('#demo1-1');
var combobox2 = document.querySelector('#demo1-2');
var combobox3 = document.querySelector('#demo1-3');
combobox1.items = combobox2.items = combobox3.items = elements;
combobox1.value = combobox2.value = combobox3.value = 'Carbon';
window.addDemoReadyListener('#combo-box-basic-combo-box', function(document) {
document.querySelector('#demo1').items = ['Hydrogen', 'Helium', 'Lithium'];
});
</script>
</template>
</vaadin-demo-snippet>


<h3>Selecting a Value</h3>
<vaadin-demo-snippet id="combo-box-basic-demos-selecting-a-value">
<template preserve-content>
<vaadin-combo-box id="demo2" label="Element"></vaadin-combo-box>
<p>Selected value: <span id="selected-value"></span>.</p>

<script>
window.addDemoReadyListener('#combo-box-basic-demos-selecting-a-value', function(document) {
var combobox = document.querySelector('#demo2');
combobox.items = elements;

combobox.addEventListener('value-changed', function() {
document.querySelector('#selected-value').innerHTML = combobox.value;
});
combobox.value = 'Carbon';
});
</script>
</template>
</vaadin-demo-snippet>


<h3>Using as a Form Field</h3>
<vaadin-demo-snippet id="combo-box-basic-demos-using-as-a-form-field">
<template preserve-content>
<iron-form>
<form method="post">
<vaadin-combo-box name="name" required error-message="This field is required"></vaadin-combo-box>
<vaadin-button>Submit</vaadin-button>
</form>
</iron-form>

<script>
window.addDemoReadyListener('#combo-box-basic-demos-using-as-a-form-field', function(document) {
var form = document.querySelector('iron-form');
var combobox = form.querySelector('vaadin-combo-box');
combobox.items = elements;

form.addEventListener('iron-form-submit', function() {
alert('Form submitted with name: ' + form.serializeForm().name);
return false;
});

var button = document.querySelector('vaadin-button');
button.addEventListener('click', function() {
form.submit();
});
});
</script>
</template>
</vaadin-demo-snippet>

<h3>Configuring the Combo Box</h3>

<h3>Change Event</h3>
<vaadin-demo-snippet id="combo-box-basic-demos-change-event">
<vaadin-demo-snippet id="combo-box-basic-demos-configuring-the-combo-box">
<template preserve-content>
<vaadin-combo-box id="changeEventDemo"></vaadin-combo-box>
<vaadin-button id="setRandomValue">Set random value</vaadin-button>
<vaadin-combo-box id="demo2-1" label="Element"></vaadin-combo-box>
<vaadin-combo-box id="demo2-2" label="Disabled" disabled></vaadin-combo-box>
<vaadin-combo-box id="demo2-3" label="Read-only" value="Carbon" readonly></vaadin-combo-box>
<script>
window.addDemoReadyListener('#combo-box-basic-demos-change-event', function(document) {
var combobox = document.querySelector('#changeEventDemo');
combobox.items = elements;

combobox.addEventListener('change', function(e) {
if (combobox.value) {
alert('User selected value ' + combobox.value);
} else {
alert('User has cleared the value');
}
});

document.querySelector('#setRandomValue').addEventListener('click', function() {
combobox.value = combobox.items[Math.floor(Math.random() * combobox.items.length)];
});
window.addDemoReadyListener('#combo-box-basic-demos-configuring-the-combo-box', function(document) {
var combobox1 = document.querySelector('#demo2-1');
var combobox2 = document.querySelector('#demo2-2');
var combobox3 = document.querySelector('#demo2-3');
combobox1.items = combobox2.items = combobox3.items = elements;
combobox1.value = combobox2.value = combobox3.value = 'Carbon';
});
</script>
</template>
Expand All @@ -110,12 +44,12 @@ <h3>Allow Custom Values</h3>
<p>Allow the user to set any value for the field in addition to selecting a value from the dropdown menu.</p>
<vaadin-demo-snippet id="combo-box-basic-demos-allow-custom-values">
<template preserve-content>
<vaadin-combo-box id="demo1" label="Element" allow-custom-value></vaadin-combo-box>
<vaadin-combo-box id="demo2" label="Element" allow-custom-value></vaadin-combo-box>
<p>Selected value: <span id="selected-value2"></span></p>

<script>
window.addDemoReadyListener('#combo-box-basic-demos-allow-custom-values', function(document) {
var combobox = document.querySelector('#demo1');
var combobox = document.querySelector('#demo2');
combobox.items = elements;

combobox.addEventListener('value-changed', function() {
Expand Down
30 changes: 16 additions & 14 deletions demo/combo-box-filtering-demos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</style>


<h3>Remote Data Source</h3>
<h3>Filtering with a Remote Data Source</h3>
<vaadin-demo-snippet id="combo-box-filtering-demos-remote-data-source">
<template preserve-content>
<dom-bind>
Expand All @@ -23,7 +23,7 @@ <h3>Remote Data Source</h3>


<h3>Custom Filtering</h3>

<p>Example uses case-sensitive starts-with filtering</p>
<vaadin-demo-snippet id="combo-box-filtering-demos-custom-filtering">
<template preserve-content>
<custom-filter></custom-filter>
Expand All @@ -34,20 +34,22 @@ <h3>Custom Filtering</h3>
</template>
<script>
window.addDemoReadyListener('#combo-box-filtering-demos-custom-filtering', function(document) {
Polymer({
is: 'custom-filter',
if (!customElements.get('custom-filter')) {
Polymer({
is: 'custom-filter',

properties: {
items: Array,
},
properties: {
items: Array,
},

_filterChanged: function(e) {
// case-sensitive starts-with filtering
this.items = elements.filter(function(el) {
return el.indexOf(e.detail.value) === 0;
});
}
});
_filterChanged: function(e) {
// case-sensitive starts-with filtering
this.items = elements.filter(function(el) {
return el.indexOf(e.detail.value) === 0;
});
}
});
}
});
</script>
</dom-module>
Expand Down
Loading

0 comments on commit 67cff45

Please sign in to comment.