Merge pull request #50 from unicef-polymer/develop

Develop
unicef-polymer · Feb 27, 2017 · 5f2d8d9 · 5f2d8d9
2 parents 3257e14 + 371d198
commit 5f2d8d9
Show file tree

Hide file tree

Showing 5 changed files with 219 additions and 115 deletions.
diff --git a/README.md b/README.md
@@ -5,32 +5,33 @@ Dropdown menu with search and multiple options selection
 ### Element properties
 
 
+* allowOutsideScroll - boolean, default: false
 * autoValidate - boolean
-* customObjectOptions - Boolean, Default: false
-* disabled - Boolean Default: false
-* dynamicAlign - Boolean Default: false
-* emptyValue - Boolean Default: false
+* customObjectOptions - Boolean, default: false
+* disabled - Boolean, default: false
+* dynamicAlign - Boolean, default: false
+* emptyValue - Boolean, default: false
 * errorMessage - string
-* falseValue - Boolean Default: false
-* hideSearch - Boolean Default: false
+* falseValue - Boolean, default: false
+* hideSearch - Boolean, default: false
 * invalid - boolean
 * label - String
-* menuOpened - Boolean Default: false – notifies
-* multi - Boolean Default: false
-* noChangeEvent - Boolean, Default: false
-* optionLabel - String, Default: label
+* menuOpened - Boolean, default: false – notifies
+* multi - Boolean, default: false
+* noChangeEvent - Boolean, default: false
+* optionLabel - String, default: label
 * options - Array
-* optionValue - String, Default: 'value'
+* optionValue - String, default: 'value'
 * placeholder - string
-* readonly - Boolean, Default: false
+* readonly - Boolean, default: false
 * required - boolean
 * search - String
 * selected - Number/Array - notifies
 * selectedValues - Object notifies
 * showLimitWarning - Boolean
 * shownItems - Array
-* shownItemsLimit - Number Default: 50
-* updateSelected - Boolean, Default: false
+* shownItemsLimit - Number, default: 50
+* updateSelected - Boolean, default: false
 * value - String
 
 ## Usage
@@ -159,9 +160,9 @@ customObjOptions: {
         on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
 ```
 
-If you need only select an option and get option ID (most use cases) or an array of IDs(for multiselection) 
-you can use `selected` property of the element. It only works for integer values, for other types use `selectedValues` property.
-Additionally you can chose to block the change event. Example:
+If you need only to bind a custom element property to the esmm dropdown use `selected` property 
+to update dropdown's selection or get selected value(s). 
+In this case change event is automatically disabled. Example:
 
 ```html
 <p>SelectedID: [[selectedId]]</p>
@@ -172,7 +173,7 @@ Additionally you can chose to block the change event. Example:
     option-value="id"
     option-label="option_label"
     selected="{{selectedId}}"
-    update-selected no-change-event>
+    update-selected>
 </etools-searchable-multiselection-menu>
 ```
 

diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "etools-searchable-multiselection-menu",
   "description": "Dropdown menu with search and multiple options selection",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "license": "https://github.com/unicef-polymer/etools-searchable-multiselection-menu/blob/master/LICENSE.md",
   "main": "etools-searchable-multiselection-menu.html",
   "dependencies": {

diff --git a/demo/demo-custom-objects-as-options.html b/demo/demo-custom-objects-as-options.html
@@ -3,11 +3,6 @@
 
 <dom-module id="demo-custom-objects-as-options">
   <template>
-    <h3>Old way type of objects with integer value and label string (still working)</h3>
-    <etools-searchable-multiselection-menu
-        label="Searchable menu"
-        options="[[realOptions]]"
-        on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
 
     <h3>Single selection, custom objects as options</h3>
     <etools-searchable-multiselection-menu
@@ -16,15 +11,7 @@ <h3>Single selection, custom objects as options</h3>
         custom-object-options
         option-value="option_key"
         option-label="option_label"
-        on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
-
-    <h3>Multiple selection. Old way type of objects with integer value and label string (still working)</h3>
-    <etools-searchable-multiselection-menu
-        label="Multi searchable menu"
-        options="[[realOptions]]"
-        placeholder="Please select the options"
-        on-value-change="_multiSelectionChanged"
-        multi></etools-searchable-multiselection-menu>
+        on-value-change="_singleSelectionChanged" dynamic-align></etools-searchable-multiselection-menu>
 
     <h3>Multiple selection, custom objects as options</h3>
     <etools-searchable-multiselection-menu
@@ -35,7 +22,7 @@ <h3>Multiple selection, custom objects as options</h3>
         option-label="option_label"
         placeholder="Please select the options"
         on-value-change="_multiSelectionChanged"
-        multi></etools-searchable-multiselection-menu>
+        multi dynamic-align></etools-searchable-multiselection-menu>
 
     <h3>Custom objects as options and selected property with no change events</h3>
 
@@ -47,7 +34,7 @@ <h3>Custom objects as options and selected property with no change events</h3>
         option-value="id"
         option-label="option_label"
         selected="{{selectedId}}"
-        update-selected no-change-event></etools-searchable-multiselection-menu>
+        update-selected dynamic-align style="width: 350px;"></etools-searchable-multiselection-menu>
 
     <p><span>SelectedIDs:</span> [[_returnIdsString(selectedIds)]]</p>
     <etools-searchable-multiselection-menu
@@ -57,32 +44,10 @@ <h3>Custom objects as options and selected property with no change events</h3>
         option-value="id"
         option-label="option_label"
         selected="{{selectedIds}}"
-        update-selected no-change-event
+        update-selected
         placeholder="Please select the options"
-        multi></etools-searchable-multiselection-menu>
-
-    <h3>A few options selected by default example</h3>
-    <etools-searchable-multiselection-menu
-        label="Searchable menu, custom objects"
-        options="[[customObjOptions]]"
-        value="[[selectedObjOptions]]"
-        custom-object-options
-        option-value="option_key"
-        option-label="option_label"
-        on-value-change="_singleSelectionChanged"></etools-searchable-multiselection-menu>
-
-    <etools-searchable-multiselection-menu
-        label="Multi searchable menu, custom objects"
-        options="[[customObjOptions]]"
-        value="[[selectedObjOptions]]"
-        custom-object-options
-        option-value="id"
-        option-label="option_label"
-        selected="{{selectedIds}}"
-        update-selected no-change-event
-        placeholder="Please select the options"
-        multi></etools-searchable-multiselection-menu>
-
+        multi
+        dynamic-align></etools-searchable-multiselection-menu>
 
   </template>
   <script>
@@ -108,48 +73,29 @@ <h3>A few options selected by default example</h3>
 
           customObjOptions: {
             type: Array,
-            value: function() {
-              var opt = [];
-              for(var i = 1; i <= 100; i++) {
-                opt.push({
-                  id: i,
-                  option_key: 'opt' + i,
-                  option_label: 'Option ' + i,
-                  some_other_property: 'dummy propery for objIdx' + (i -1)
-                });
-              }
-              return opt;
-            }
-          },
-
-          selectedObjOptions: {
-            type: Array,
-            value: function() {
-              var opt = [];
-              for(var i = 3; i <= 5; i++) {
-                opt.push({
-                  id: i,
-                  option_key: 'opt' + i,
-                  option_label: 'Option ' + i,
-                  some_other_property: 'dummy propery for objIdx' + (i -1)
-                });
-              }
-              return opt;
-            }
+            value: []
           },
 
           selectedId: {
-            type: Number,
-            value: null
+            value: 1001
           },
           selectedIds: {
             type: Array,
-            value: []
+            value: [3, 5, 7, 101, 102]
           }
         },
 
         ready: function() {
-//          this.set('selectedValues',  [{value: 2, label: 'Option 2'}]);
+          //  this.set('selectedValues',  [{value: 2, label: 'Option 2'}]);
+          // this.set('selectedId', 3);
+
+          setTimeout(function() {
+            this.set('customObjOptions', this.generateOptions());
+          }.bind(this), 3000);
+
+          // setTimeout(function() {
+          //   this.set('selectedId', 3);
+          // }.bind(this), 3000);
         },
 
         _returnIdsString: function(vals) {
@@ -162,6 +108,18 @@ <h3>A few options selected by default example</h3>
 
         _multiSelectionChanged: function(event) {
           console.log('_multiSelectionChanged', event.detail);
+        },
+        generateOptions: function() {
+          var opt = [];
+          for(var i = 1; i <= 100; i++) {
+            opt.push({
+              id: i,
+              option_key: 'opt' + i,
+              option_label: 'Option ' + i,
+              some_other_property: 'dummy propery for objIdx' + (i -1)
+            });
+          }
+          return opt;
         }
       });
 

diff --git a/demo/index.html b/demo/index.html
@@ -27,7 +27,7 @@
 
     <div class="vertical-section-container centered">
       <h1>etools-searchable-multiselection-menu demo</h1>
-
+      
       <h2>Single selection, with search</h2>
       <demo-snippet>
         <template is="dom-bind">
@@ -131,6 +131,7 @@ <h2>Error messages and validations</h2>
           <demo-error-messages-and-validations></demo-error-messages-and-validations>
         </template>
       </demo-snippet>
+
 
       <h2>Custom objects as options. You can specify value and label properties from object option to be used.</h2>