Re-organize demo structure

demo/combo-box-basic-demos.html

@@ -27,95 +27,16 @@ <h3>Configuring the Combo Box</h3>
     </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>Change Event</h3>
-    <vaadin-demo-snippet id="combo-box-basic-demos-change-event">
-      <template preserve-content>
-        <vaadin-combo-box id="changeEventDemo"></vaadin-combo-box>
-        <vaadin-button id="setRandomValue">Set random value</vaadin-button>
-        <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)];
-            });
-          });
-        </script>
-      </template>
-    </vaadin-demo-snippet>
-
-
     <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="demo3" 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('#demo3');
             combobox.items = elements;
 
             combobox.addEventListener('value-changed', function() {

demo/combo-box-filtering-demos.html

@@ -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>
@@ -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>
@@ -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>