Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Select - optgroup support #1133

Open
wants to merge 3 commits into from

6 participants

@lordbron

In case you like them both and want an easy way to pull 'em both in.

lordbron added some commits
@lordbron lordbron Option element conversion to contentController objects now honor text…
…PropertyPath and valuePropertyPaths, if available

select.reel honors the valuePropertyPath and textPropertyPath when converting a passed in contentController to <option> tags, but does not honor the reverse. If an <option> tag is present, it doesn't convert value and text values into corresponding valuePropertyPath and textPropertyPath properties on the generated objects.

This fixes that by using the valuePropertyPath ad textPropertyPath values when present and defaulting to "value" and "text" when they're not present.

Signed-off-by: Tom Ortega <tom.ortega@gmail.com>
bfb94ff
@lordbron lordbron optgroup nodes no longer ignored when reading in from markup
select.reel ignores optgroup when creating objects to stash in the contentController it creates to stash the values; This results in the groups disappearing in the drop down.

This fixes that by creating introducing a groupPropertyPath property and maintaining an offset value to use when calculating selected indexes of selected options.

Signed-off-by: Tom Ortega <tom.ortega@gmail.com>
566b4dd
@lordbron

I have a minor change to 1132, i'll update if you decide this is something you want.

@Stuk
Collaborator

You should be able to just push the new commit to the same branch and it will get added to this pull request

@lordbron lordbron when existing options have no group labels
This fix is for when existing options have no 'groupLabel' nor groupPropertyPath on them.

This drops it back out of a group and back into regular option tags.

Signed-off-by: Tom Ortega <tom.ortega@gmail.com>
1a4df21
@lordbron

Awesome, thanks for helping the Pull n00b. :)

@francoisfrisch
Collaborator

Closed #1131 and #1132

@francoisfrisch
Collaborator

I need to add some cases to the tests before merging this.

/montage/test/ui/select-input-spec.js
/montage/test/ui/select-input-test/select-input-test.js
/montage/test/ui/select-input-test/select-input-test.html

@kriskowal
Collaborator

Assigning to @francoisfrisch

@rayshan rayshan changed the title from Select optgroup support to Select - optgroup support
@francoisfrisch francoisfrisch was unassigned by rayshan
@thibaultzanini

@lordbron Can you please update this PR with the latest version of Montage.

@thibaultzanini thibaultzanini self-assigned this
@rayshan rayshan added the wip label
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Feb 15, 2013
  1. @lordbron

    Option element conversion to contentController objects now honor text…

    lordbron authored
    …PropertyPath and valuePropertyPaths, if available
    
    select.reel honors the valuePropertyPath and textPropertyPath when converting a passed in contentController to <option> tags, but does not honor the reverse. If an <option> tag is present, it doesn't convert value and text values into corresponding valuePropertyPath and textPropertyPath properties on the generated objects.
    
    This fixes that by using the valuePropertyPath ad textPropertyPath values when present and defaulting to "value" and "text" when they're not present.
    
    Signed-off-by: Tom Ortega <tom.ortega@gmail.com>
  2. @lordbron

    optgroup nodes no longer ignored when reading in from markup

    lordbron authored
    select.reel ignores optgroup when creating objects to stash in the contentController it creates to stash the values; This results in the groups disappearing in the drop down.
    
    This fixes that by creating introducing a groupPropertyPath property and maintaining an offset value to use when calculating selected indexes of selected options.
    
    Signed-off-by: Tom Ortega <tom.ortega@gmail.com>
Commits on Feb 19, 2013
  1. @lordbron

    when existing options have no group labels

    lordbron authored
    This fix is for when existing options have no 'groupLabel' nor groupPropertyPath on them.
    
    This drops it back out of a group and back into regular option tags.
    
    Signed-off-by: Tom Ortega <tom.ortega@gmail.com>
This page is out of date. Refresh to see the latest.
Showing with 78 additions and 14 deletions.
  1. +78 −14 ui/native/select.reel/select.js
View
92 ui/native/select.reel/select.js
@@ -114,6 +114,12 @@ var Select = exports.Select = Montage.create(NativeControl, /** @lends module:"
value: null
},
+ /**
+ Specifies the property belonging to the component's <code>contentController</code> that dictates what <optgroup> (if any) option belongs to.
+ */
+ groupPropertyPath: {
+ value: null
+ },
_contentController: {
value: null
@@ -254,7 +260,9 @@ var Select = exports.Select = Montage.create(NativeControl, /** @lends module:"
_addOptionsFromMarkup: {
value: function() {
- var el = this.element, options = el.querySelectorAll('option');
+ var el = this.element, children = el.querySelectorAll(['option','optgroup']);
+
+ var hasGroups = Boolean(el.querySelectorAll('optgroup').length)
// @todo: if contentController is provided, should we just ignore the <option>
// from the markup ?
@@ -266,17 +274,38 @@ var Select = exports.Select = Montage.create(NativeControl, /** @lends module:"
var selectedIndexes = [];
contentController.content = [];
- if(options && options.length > 0) {
- var i=0, len = options.length, selected;
+ var groupLabelValue = '';
+ if(children && children.length > 0) {
+ var i=0, len = children.length, optGroupOffset = 0, selected, optionToAdd;
for(; i< len; i++) {
- selected = options[i].getAttribute('selected');
+
+ // grab the optgroup label value to store in a property to resurface later
+ // and create an offset, since we don't create an object for the optgroup node
+ if (children[i].nodeName == 'OPTGROUP') {
+ groupLabelValue = children[i].label;
+ optGroupOffset++
+ continue;
+ }
+
+ // reset the label when we drop out of the optroup
+ if (groupLabelValue != '' && children[i].parentNode.nodeName != 'OPTGROUP') {
+ groupLabelValue = '';
+ }
+
+ //create objects to match provided propertyPaths, if present, otherwise default
+ optionToAdd = {};
+ optionToAdd[this.valuePropertyPath || 'value'] = children[i].value;
+ optionToAdd[this.textPropertyPath || 'text'] = children[i].textContent;
+ if (hasGroups) {
+ optionToAdd[this.groupPropertyPath || 'groupLabel'] = groupLabelValue;
+ }
+ contentController.addObjects(optionToAdd);
+
+ selected = children[i].getAttribute('selected');
if(selected) {
- selectedIndexes.push(i);
+ selectedIndexes.push(i-optGroupOffset);
}
- contentController.addObjects({
- value: options[i].value,
- text: options[i].textContent
- });
+
}
this.contentController = contentController;
@@ -293,7 +322,6 @@ var Select = exports.Select = Montage.create(NativeControl, /** @lends module:"
}
},
-
deserializedFromTemplate: {
value: function() {
@@ -319,17 +347,43 @@ var Select = exports.Select = Montage.create(NativeControl, /** @lends module:"
_refreshOptions: {
value: function() {
- var arr = this.content||[], len = arr.length, i, option;
- var text, value;
+ var arr = this.content||[], len = arr.length, lastGroupLabel = '', currentGroupLabel, i, option, optionGroup, text, value;
for(i=0; i< len; i++) {
- option = document.createElement('option');
+
if(String.isString(arr[i])) {
text = value = arr[i];
} else {
+ if (arr[i].hasOwnProperty(this.groupPropertyPath || 'groupLabel') || lastGroupLabel)
+ {
+ currentGroupLabel = arr[i][this.groupPropertyPath || 'groupLabel'];
+
+ // when a groupLabel changes from one iteration to the next,
+ // we're either creating a new group or dropping out of one
+ if (currentGroupLabel != lastGroupLabel) {
+
+ // commit any open group since we're done with it
+ if (optionGroup) {
+ this.element.appendChild(optionGroup);
+ }
+
+ // create a new group base on groupLabel value
+ if (currentGroupLabel) {
+ optionGroup = document.createElement('optgroup');
+ optionGroup.label = currentGroupLabel;
+ lastGroupLabel = currentGroupLabel;
+
+ // otherwise, reset group related vars since we're no longer in an group
+ } else {
+ lastGroupLabel = '';
+ optionGroup = null;
+ }
+ }
+ }
text = arr[i][this.textPropertyPath || 'text'];
value = arr[i][this.valuePropertyPath || 'value'];
}
+ option = document.createElement('option');
option.value = value;
option.textContent = text || value;
@@ -338,7 +392,17 @@ var Select = exports.Select = Montage.create(NativeControl, /** @lends module:"
option.setAttribute("selected", "true");
}
}
- this.element.appendChild(option);
+
+ if (optionGroup) {
+ optionGroup.appendChild(option);
+
+ // commit the group, before we drop out of the loop
+ if (i == len-1) {
+ this.element.appendChild(optionGroup);
+ }
+ } else {
+ this.element.appendChild(option);
+ }
}
}
},
Something went wrong with that request. Please try again.