Skip to content

Commit

Permalink
Merge pull request #59 from unicef-polymer/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@adi130987
adi130987 authored Mar 31, 2017
2 parents d60777b + 7d9c626 commit 9389bd4
Show file tree
Hide file tree
Showing 5 changed files with 107 additions and 61 deletions.
10 changes: 7 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ Dropdown menu with search and multiple options selection

### Element properties


* allowOutsideScroll - boolean, default: false
* autoValidate - boolean
* allowOutsideScroll - Boolean, default: false
* autoValidate - Boolean
* capitalizeInputShown - Boolean
* customObjectOptions - Boolean, default: false
* disabled - Boolean, default: false
* dynamicAlign - Boolean, default: false
Expand All @@ -19,6 +19,8 @@ Dropdown menu with search and multiple options selection
* menuOpened - Boolean, default: false – notifies
* multi - Boolean, default: false
* noChangeEvent - Boolean, default: false
* noOptionsAvailable - Boolean, default: false
* notFoundValues - Array
* optionLabel - String, default: label
* options - Array
* optionValue - String, default: 'value'
Expand All @@ -27,6 +29,8 @@ Dropdown menu with search and multiple options selection
* required - boolean
* search - String
* selected - Number/Array - notifies
* selectedRequiresValidOptions - Boolean, default: false; using this and selected will ensure selected values will
be set only if the options are not empty
* selectedValues - Object notifies
* showLimitWarning - Boolean
* shownItems - Array
Expand Down
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "etools-searchable-multiselection-menu",
"description": "Dropdown menu with search and multiple options selection",
"version": "1.0.34",
"version": "1.0.35",
"license": "https://github.com/unicef-polymer/etools-searchable-multiselection-menu/blob/master/LICENSE.md",
"main": "etools-searchable-multiselection-menu.html",
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions demo/demo-custom-objects-as-options.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,9 @@ <h3>Custom objects as options and selected property with no change events</h3>
// this.set('selectedValues', [{value: 2, label: 'Option 2'}]);
// this.set('selectedId', 3);

setTimeout(function() {
//setTimeout(function() {
this.set('customObjOptions', this.generateOptions());
}.bind(this), 3000);
//}.bind(this), 3000);

// setTimeout(function() {
// this.set('selectedIds', null);
Expand Down
2 changes: 1 addition & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +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>

Expand Down
150 changes: 96 additions & 54 deletions etools-searchable-multiselection-menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,8 @@
reflectToAttribute: true
},
options: {
type: Array
type: Array,
observer: '_optionsChanged'
},
shownItems: {
type: Array,
Expand Down Expand Up @@ -459,7 +460,8 @@
value: 'label'
},
selected: {
notify: true
notify: true,
observer: '_selectedOptionsChanged'
},
_prevSelectedValues: {
type: Object
Expand All @@ -480,12 +482,15 @@
selectedRequiresValidOptions: {
type: Boolean,
value: false
},
notFoundValues: {
type: Array,
notify: true,
value: []
}

},

observers: [
'_selectedChanged(selected, options)',
'_optionsLengthChanged(options.length)'
],

Expand Down Expand Up @@ -562,8 +567,16 @@
if (this.readonly) {
return;
}
if(!this.multi) {
if (!this.multi) {
this.selectedValues = e.model.item.value;

if (this.selectedValues === null) {
if (this.value === null && this.updateSelected &&
this.notFoundValues instanceof Array && this.notFoundValues.length) {
this.set('selected', null);
}
}

this._valueSelected();
this.$.dropdownMenu.close();
}
Expand Down Expand Up @@ -689,67 +702,86 @@
}
},

_selectedChanged: function(selected, options) {
if (!this.updateSelected) {
return;
_optionsChanged: function(options) {
if (options instanceof Array) {
this._selectionChanged(this.selected, options);
}
if (this.selectedRequiresValidOptions &&
(options instanceof Array === false ||
(options instanceof Array && options.length === 0))) {
},

_selectedOptionsChanged: function(selected, oldSelected) {
if (this.multi && JSON.stringify(selected) === JSON.stringify(oldSelected)) {
return;
}

var currentValue = null;
var notFoundValue = [];
if (this.multi) {
currentValue = [];
if (selected instanceof Array && selected.length > 0) {
if (options instanceof Array && options.length > 0) {
selected.forEach(function(selectedVal) {
var s = this._prepareValue(selectedVal);
notFoundValue.push(s);
for (var i = 0; i < options.length; i++) {
if (this._prepareValue(options[i][this.optionValue]) === s) {
currentValue.push(options[i]);
notFoundValue.splice(notFoundValue.indexOf(s), 1);
this._selectionChanged(selected, this.options);
},

_selectionChanged: function(selected, options) {
this.debounce('selectionChanged', function() {
if (!this.updateSelected) {
return;
}

if (this.selectedRequiresValidOptions &&
(options instanceof Array === false ||
(options instanceof Array && options.length === 0))) {
return;
}

var currentValue = null;
var notFoundValues = [];
var i;
if (this.multi) {
// multiple selection
currentValue = [];
if (selected instanceof Array && selected.length > 0) {
notFoundValues = JSON.parse(JSON.stringify(selected));
if (options instanceof Array && options.length > 0) {
selected.forEach(function(selectedVal) {
var s = this._prepareValue(selectedVal);
for (i = 0; i < options.length; i++) {
if (this._prepareValue(options[i][this.optionValue]) === s) {
currentValue.push(options[i]);
notFoundValues.splice(notFoundValues.indexOf(selectedVal), 1);
break;
}
}
}.bind(this));
}
}
} else {
// single selection
if (selected && (typeof selected === 'string' || typeof selected === 'number')) {
var selectedVal = this._prepareValue(selected);
notFoundValues.push(selectedVal);
if (options instanceof Array && options.length > 0) {
for (i = 0; i < options.length; i++) {
if (this._prepareValue(options[i][this.optionValue]) === selectedVal) {
currentValue = options[i];
notFoundValues.splice(notFoundValues.indexOf(selectedVal), 1);
break;
}
}
}.bind(this));
}
}

} else {
if ((selected && (typeof selected === 'string' || typeof selected === 'number')) &&
options instanceof Array && options.length > 0) {
var selectedVal = this._prepareValue(selected);
notFoundValue.push(selectedVal);
for (var i = 0; i < options.length; i++) {
if (this._prepareValue(options[i][this.optionValue]) === selectedVal) {
currentValue = options[i];
notFoundValue.splice(notFoundValue.indexOf(selectedVal), 1);
break;
}
}
}
}

if (JSON.stringify(this.value) !== JSON.stringify(currentValue)) {
this.set('value', currentValue);
}
this.set('notFoundValues', notFoundValues);
if (JSON.stringify(this.value) !== JSON.stringify(currentValue)) {
this.set('value', currentValue);
}

// not found selected values in options
if (notFoundValue.length > 0) {
var warnMsg = '[etools-esmm] Selected ';
if (notFoundValue.length === 1) {
warnMsg += 'value ';
} else {
warnMsg += 'values '
// not found selected values in options
if (notFoundValues.length > 0) {
var warnMsg = '[etools-esmm] Selected ';
if (notFoundValues.length === 1) {
warnMsg += 'value ';
} else {
warnMsg += 'values '
}
warnMsg += notFoundValues.join(', ') + ' not found in dropdown\'s options!' ;
console.warn(warnMsg);
}
warnMsg += notFoundValue.join(', ') + ' not found in dropdown\'s options!' ;
console.warn(warnMsg);
}
}.bind(this), 50);
},

_updateSelected: function(selectedValues, oldSelectedValues) {
Expand Down Expand Up @@ -783,14 +815,24 @@
return this._prepareValue(s);
}.bind(this));
}
if (this.notFoundValues.length) {
this.notFoundValues.forEach(function(notFoundVal) {
selectedVals.push(this._prepareValue(notFoundVal));
}.bind(this));
}
}

if (!this.multi) {
// single selection
if (selectedValues && !(typeof selectedValues === 'string' && selectedValues === '')) {
selectedVals = this._prepareValue(selectedValues);
}
if (!selectedVals && this.notFoundValues.length) {
this.set('_prevSelectedValues', this.notFoundValues[0]);
return;
}
}

this.set('_prevSelectedValues', selectedVals);
this.set('selected', selectedVals);
}.bind(this), 50);
Expand Down

0 comments on commit 9389bd4

Please sign in to comment.