romo 0.20.10 → 0.20.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -149,12 +149,20 @@ RomoDropdown.prototype._bindElem = function() {
149
149
 
150
150
  RomoDropdown.prototype._bindPopup = function() {
151
151
  this.popupElem = Romo.elems(
152
- '<div class="romo-dropdown-popup"><div class="romo-dropdown-body"></div></div>'
152
+ '<div class="romo-dropdown-popup">' +
153
+ '<div class="romo-dropdown-body"></div>' +
154
+ '</div>'
153
155
  )[0];
154
- var popupParentElem = Romo.closest(
155
- this.elem,
156
- Romo.data(this.elem, 'romo-dropdown-append-to-closest') || 'body'
157
- );
156
+
157
+ var popupParentElem;
158
+ var appendToClosestSel = Romo.data(this.elem, 'romo-dropdown-append-to-closest');
159
+ if (appendToClosestSel !== undefined) {
160
+ popupParentElem = Romo.closest(this.elem, appendToClosestSel);
161
+ } else {
162
+ popupParentElem = Romo.f(
163
+ Romo.data(this.elem, 'romo-dropdown-append-to') || 'BODY'
164
+ )[0];
165
+ }
158
166
  Romo.append(popupParentElem, this.popupElem);
159
167
 
160
168
  this.bodyElem = Romo.children(this.popupElem, '.romo-dropdown-body')[0];
@@ -109,9 +109,22 @@ RomoModal.prototype._bindElem = function() {
109
109
  }
110
110
 
111
111
  RomoModal.prototype._bindPopup = function() {
112
- this.popupElem = Romo.elems('<div class="romo-modal-popup"><div class="romo-modal-body"></div></div>')[0];
113
- var popupParentElem = Romo.closest(this.elem, Romo.data(this.elem, 'romo-dropdown-append-to-closest') || 'body');
114
- Romo.append(popupParentElem, this.popupElem)
112
+ this.popupElem = Romo.elems(
113
+ '<div class="romo-modal-popup">' +
114
+ '<div class="romo-modal-body"></div>' +
115
+ '</div>'
116
+ )[0];
117
+
118
+ var popupParentElem;
119
+ var appendToClosestSel = Romo.data(this.elem, 'romo-modal-append-to-closest');
120
+ if (appendToClosestSel !== undefined) {
121
+ popupParentElem = Romo.closest(this.elem, appendToClosestSel);
122
+ } else {
123
+ popupParentElem = Romo.f(
124
+ Romo.data(this.elem, 'romo-modal-append-to') || 'BODY'
125
+ )[0];
126
+ }
127
+ Romo.append(popupParentElem, this.popupElem);
115
128
 
116
129
  this.bodyElem = Romo.children(this.popupElem, '.romo-modal-body')[0];
117
130
  if (Romo.data(this.elem, 'romo-modal-style-class') !== undefined) {
@@ -4,8 +4,14 @@ var RomoOptionListDropdown = RomoComponent(function(elem) {
4
4
  this.prevValue = '';
5
5
  this.optionListItems = [];
6
6
 
7
- var selCustomization = Romo.data(this.elem, 'romo-option-list-dropdown-item-selector-customization') || '';
8
- this.itemSelector = 'LI[data-romo-option-list-dropdown-item="opt"]:not(.disabled)'+selCustomization;
7
+ var selCustomization = Romo.data(
8
+ this.elem,
9
+ 'romo-option-list-dropdown-item-selector-customization'
10
+ ) || '';
11
+
12
+ this.itemSelector = (
13
+ 'LI[data-romo-option-list-dropdown-item="opt"]:not(.disabled)'+selCustomization
14
+ );
9
15
  this.focusStyleClass = Romo.data(this.elem, 'romo-option-list-focus-style-class');
10
16
  this.openOnFocus = Romo.data(this.elem, 'romo-option-list-dropdown-open-on-focus');
11
17
 
@@ -65,7 +71,9 @@ RomoOptionListDropdown.prototype.doSetSelectedItem = function(itemValue) {
65
71
  this.romoDropdown.bodyElem,
66
72
  'LI[data-romo-option-list-dropdown-option-value="'+itemValue+'"]'
67
73
  )[0];
68
- Romo.addClass(itemElem, 'selected');
74
+ if (itemElem !== undefined) {
75
+ Romo.addClass(itemElem, 'selected');
76
+ }
69
77
  }
70
78
  var selectedElem = this.selectedItemElem();
71
79
  if (selectedElem !== undefined) {
@@ -111,9 +119,9 @@ Example:
111
119
  { 'type': 'option', 'value': '3', 'displayText': '3', 'displayHtml': '<span>3</span>' }
112
120
  ] },
113
121
  { 'type': 'optgroup', 'label': 'Symbols', 'items': [
114
- { 'type': 'option', 'value': 'exclamation', 'displayText': '!', 'displayHtml': '<span>!</span>' },
115
- { 'type': 'option', 'value': 'at', 'displayText': '@', 'displayHtml': '<span>@</span>' },
116
- { 'type': 'option', 'value': 'pound', 'displayText': '#', 'displayHtml': '<span>#</span>' }
122
+ { 'type': 'option', 'value': 'excl', 'displayText': '!', 'displayHtml': '<span>!</span>' },
123
+ { 'type': 'option', 'value': 'at', 'displayText': '@', 'displayHtml': '<span>@</span>' },
124
+ { 'type': 'option', 'value': 'pound', 'displayText': '#', 'displayHtml': '<span>#</span>' }
117
125
  ] }
118
126
  ]
119
127
  */
@@ -137,18 +145,34 @@ RomoOptionListDropdown.prototype._bindElem = function() {
137
145
  Romo.on(this.elem, 'romoDropdown:popupClose', Romo.proxy(this._onPopupClose, this));
138
146
 
139
147
  Romo.on(this.elem, 'romoDropdown:toggle', Romo.proxy(function(e, romoDropdown) {
140
- Romo.trigger(this.elem, 'romoOptionListDropdown:romoDropdown:toggle', [romoDropdown, this]);
148
+ Romo.trigger(
149
+ this.elem,
150
+ 'romoOptionListDropdown:romoDropdown:toggle',
151
+ [romoDropdown, this]
152
+ );
141
153
  }, this));
142
154
  Romo.on(this.elem, 'romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown) {
143
- Romo.trigger(this.elem, 'romoOptionListDropdown:romoDropdown:popupOpen', [romoDropdown, this]);
155
+ Romo.trigger(
156
+ this.elem,
157
+ 'romoOptionListDropdown:romoDropdown:popupOpen',
158
+ [romoDropdown, this]
159
+ );
144
160
  }, this));
145
161
  Romo.on(this.elem, 'romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown) {
146
- Romo.trigger(this.elem, 'romoOptionListDropdown:romoDropdown:popupClose', [romoDropdown, this]);
162
+ Romo.trigger(
163
+ this.elem,
164
+ 'romoOptionListDropdown:romoDropdown:popupClose',
165
+ [romoDropdown, this]
166
+ );
147
167
  }, this));
148
168
 
149
- Romo.on(this.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', Romo.proxy(function(e, highlightOptionElem) {
150
- this._updateOptionsListUI(highlightOptionElem);
151
- }, this));
169
+ Romo.on(
170
+ this.elem,
171
+ 'romoOptionListDropdown:triggerListOptionsUpdate',
172
+ Romo.proxy(function(e, highlightOptionElem) {
173
+ this._updateOptionsListUI(highlightOptionElem);
174
+ }, this)
175
+ );
152
176
 
153
177
  Romo.on(this.elem, 'romoOptionListDropdown:triggerToggle', Romo.proxy(function(e) {
154
178
  Romo.trigger(this.elem, 'romoDropdown:triggerToggle', []);
@@ -183,14 +207,22 @@ RomoOptionListDropdown.prototype._bindElem = function() {
183
207
 
184
208
  if (Romo.data(this.elem, 'romo-option-list-dropdown-no-filter') !== true) {
185
209
  this.optionFilterElem = this._buildOptionFilter();
186
- var optionFilterWrapperElem = Romo.elems('<div class="romo-option-list-dropdown-filter-wrapper"></div>')[0];
210
+ var optionFilterWrapperElem = Romo.elems(
211
+ '<div class="romo-option-list-dropdown-filter-wrapper"></div>'
212
+ )[0];
187
213
  Romo.append(optionFilterWrapperElem, this.optionFilterElem);
188
214
  Romo.prepend(this.romoDropdown.popupElem, optionFilterWrapperElem);
189
215
  this._bindDropdownOptionFilter();
190
216
  }
191
217
 
192
- Romo.append(this.romoDropdown.bodyElem, Romo.elems('<div class="romo-option-list-dropdown-container"></div>')[0]);
193
- this.optionListContainerElem = Romo.find(this.romoDropdown.bodyElem, '.romo-option-list-dropdown-container')[0];
218
+ Romo.append(
219
+ this.romoDropdown.bodyElem,
220
+ Romo.elems('<div class="romo-option-list-dropdown-container"></div>')[0]
221
+ );
222
+ this.optionListContainerElem = Romo.find(
223
+ this.romoDropdown.bodyElem,
224
+ '.romo-option-list-dropdown-container'
225
+ )[0];
194
226
 
195
227
  this.doSetListItems([]);
196
228
  }
@@ -248,22 +280,36 @@ RomoOptionListDropdown.prototype._buildListOptGroupElem = function(item) {
248
280
  }
249
281
 
250
282
  RomoOptionListDropdown.prototype._buildOptionFilter = function() {
251
- var filterElem = Romo.elems('<input type="text" size="1" class="romo-option-list-dropdown-filter"></input>')[0];
283
+ var filterElem = Romo.elems(
284
+ '<input type="text" size="1" class="romo-option-list-dropdown-filter"></input>'
285
+ )[0];
252
286
 
253
287
  if (Romo.data(this.elem, 'romo-option-list-dropdown-filter-placeholder') !== undefined) {
254
- Romo.setAttr(filterElem, 'placeholder', Romo.data(this.elem, 'romo-option-list-dropdown-filter-placeholder'));
288
+ Romo.setAttr(
289
+ filterElem,
290
+ 'placeholder',
291
+ Romo.data(this.elem, 'romo-option-list-dropdown-filter-placeholder')
292
+ );
255
293
  }
256
294
  Romo.setData(filterElem, 'romo-indicator-text-input-elem-display', "block");
257
295
  Romo.setData(filterElem, 'romo-indicator-text-input-indicator-position', "right");
258
296
  if (Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator') !== undefined) {
259
- Romo.setData(filterElem, 'romo-indicator-text-input-indicator', Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator'));
297
+ Romo.setData(
298
+ filterElem,
299
+ 'romo-indicator-text-input-indicator',
300
+ Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator')
301
+ );
260
302
  }
261
303
  if (Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator-width-px') !== undefined) {
262
- Romo.setData(filterElem, 'romo-indicator-text-input-indicator-width-px', Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator-width-px'));
304
+ Romo.setData(
305
+ filterElem,
306
+ 'romo-indicator-text-input-indicator-width-px',
307
+ Romo.data(this.elem, 'romo-option-list-dropdown-filter-indicator-width-px')
308
+ );
263
309
  }
264
310
  Romo.setData(filterElem, 'romo-form-disable-enter-submit', "true");
265
311
  Romo.setData(filterElem, 'romo-onkey-on', "keydown");
266
- Romo.setData(filterElem, 'romo-onkey-delay-ms', 100); // 0.1 secs, want it to be really responsive
312
+ Romo.setData(filterElem, 'romo-onkey-delay-ms', 100); // 0.1 secs, responsive
267
313
 
268
314
  Romo.setAttr(filterElem, 'autocomplete', 'off');
269
315
 
@@ -345,15 +391,23 @@ RomoOptionListDropdown.prototype._bindDropdownOptionFilter = function() {
345
391
  this.optionFilterElem.focus();
346
392
  }, this));
347
393
 
348
- Romo.on(this.optionFilterElem, 'romoOnkey:trigger', Romo.proxy(function(e, triggerEvent, romoOnkey) {
349
- if (Romo.nonInputTextKeyCodes().indexOf(triggerEvent.keyCode) === -1 /* Input Text */) {
350
- this._filterOptionElems();
351
- }
352
- }, this));
394
+ Romo.on(
395
+ this.optionFilterElem,
396
+ 'romoOnkey:trigger',
397
+ Romo.proxy(function(e, triggerEvent, romoOnkey) {
398
+ if (Romo.nonInputTextKeyCodes().indexOf(triggerEvent.keyCode) === -1 /* Input Text */) {
399
+ this._filterOptionElems();
400
+ }
401
+ }, this)
402
+ );
353
403
  }
354
404
 
355
405
  RomoOptionListDropdown.prototype._filterOptionElems = function() {
356
- Romo.trigger(this.elem, 'romoOptionListDropdown:filterChange', [this.optionFilterElem.value, this]);
406
+ Romo.trigger(
407
+ this.elem,
408
+ 'romoOptionListDropdown:filterChange',
409
+ [this.optionFilterElem.value, this]
410
+ );
357
411
  }
358
412
 
359
413
  RomoOptionListDropdown.prototype._updateOptionsListUI = function(highlightOptionElem) {
@@ -5,8 +5,8 @@ var RomoPicker = RomoComponent(function(elem) {
5
5
  this.defaultCaretPaddingPx = 5;
6
6
  this.defaultCaretWidthPx = 18;
7
7
  this.defaultCaretPosition = 'right'
8
- this.defaultValuesDelim = ',';
9
8
 
9
+ this.defaultValuesDelim = ',';
10
10
  this.defaultOptionItems = this._buildDefaultOptionItems();
11
11
  this.filteredOptionItems = [];
12
12
 
@@ -91,27 +91,50 @@ RomoPicker.prototype._bindSelectedOptionsList = function() {
91
91
  this.romoSelectedOptionsList = undefined;
92
92
  if (this.elem.multiple === true) {
93
93
  if (Romo.data(this.elem, 'romo-picker-multiple-item-class') !== undefined) {
94
- Romo.setData(this.romoOptionListDropdown.elem, 'romo-selected-options-list-item-class', Romo.data(this.elem, 'romo-picker-multiple-item-class'));
94
+ Romo.setData(
95
+ this.romoOptionListDropdown.elem,
96
+ 'romo-selected-options-list-item-class',
97
+ Romo.data(this.elem, 'romo-picker-multiple-item-class')
98
+ );
95
99
  }
96
100
  if (Romo.data(this.elem, 'romo-picker-multiple-max-rows') !== undefined) {
97
- Romo.setData(this.romoOptionListDropdown.elem, 'romo-selected-options-list-max-rows', Romo.data(this.elem, 'romo-picker-multiple-max-rows'));
101
+ Romo.setData(
102
+ this.romoOptionListDropdown.elem,
103
+ 'romo-selected-options-list-max-rows',
104
+ Romo.data(this.elem, 'romo-picker-multiple-max-rows')
105
+ );
98
106
  }
99
107
 
100
108
  this.romoSelectedOptionsList = new RomoSelectedOptionsList(this.romoOptionListDropdown.elem);
101
- Romo.on(this.romoSelectedOptionsList.elem, 'romoSelectedOptionsList:itemClick', Romo.proxy(function(e, itemValue, romoSelectedOptionsList) {
102
- var currentValues = this._elemValues();
103
- var index = currentValues.indexOf(itemValue);
104
- if (index > -1) {
105
- currentValues.splice(index, 1);
106
- this._setValuesAndDisplayText(currentValues, '');
107
- }
108
- this.romoSelectedOptionsList.doRemoveItem(itemValue);
109
- this._refreshUI();
110
- }, this));
111
- Romo.on(this.romoSelectedOptionsList.elem, 'romoSelectedOptionsList:listClick', Romo.proxy(function(e, romoSelectedOptionsList) {
112
- Romo.trigger(this.romoOptionListDropdown.elem, 'romoDropdown:triggerPopupClose', []);
113
- this.romoOptionListDropdown.doFocus(false);
114
- }, this));
109
+ Romo.on(
110
+ this.romoSelectedOptionsList.elem,
111
+ 'romoSelectedOptionsList:itemClick',
112
+ Romo.proxy(function(e, itemValue, romoSelectedOptionsList) {
113
+ var currentValues = this._elemValues();
114
+ var index = currentValues.indexOf(itemValue);
115
+ if (index > -1) {
116
+ currentValues.splice(index, 1);
117
+ this._setValuesAndDisplayText(currentValues, '');
118
+ }
119
+ this.romoSelectedOptionsList.doRemoveItem(itemValue);
120
+ this._refreshUI();
121
+
122
+ Romo.trigger(this.elem, 'change');
123
+ Romo.trigger(
124
+ this.elem,
125
+ 'romoPicker:multipleChange',
126
+ [currentValues, itemValue, this]
127
+ );
128
+ }, this)
129
+ );
130
+ Romo.on(
131
+ this.romoSelectedOptionsList.elem,
132
+ 'romoSelectedOptionsList:listClick',
133
+ Romo.proxy(function(e, romoSelectedOptionsList) {
134
+ Romo.trigger(this.romoOptionListDropdown.elem, 'romoDropdown:triggerPopupClose', []);
135
+ this.romoOptionListDropdown.doFocus(false);
136
+ }, this)
137
+ );
115
138
 
116
139
  Romo.before(this.elemWrapper, this.romoSelectedOptionsList.elem);
117
140
  this.romoSelectedOptionsList.doRefreshUI();
@@ -123,89 +146,187 @@ RomoPicker.prototype._bindOptionListDropdown = function() {
123
146
  this._buildOptionListDropdownElem()
124
147
  );
125
148
 
126
- Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:romoDropdown:toggle', Romo.proxy(function(e, romoDropdown, optionListDropdown) {
127
- Romo.trigger(this.elem, 'romoPicker:romoDropdown:toggle', [romoDropdown, this]);
128
- }, this));
129
- Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown, optionListDropdown) {
130
- Romo.trigger(this.elem, 'romoPicker:romoDropdown:popupOpen', [romoDropdown, this]);
131
- }, this));
132
- Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown, optionListDropdown) {
133
- Romo.trigger(this.elem, 'romoPicker:romoDropdown:popupClose', [romoDropdown, this]);
134
- }, this));
149
+ Romo.on(
150
+ this.romoOptionListDropdown.elem,
151
+ 'romoOptionListDropdown:romoDropdown:toggle',
152
+ Romo.proxy(function(e, romoDropdown, optionListDropdown) {
153
+ Romo.trigger(this.elem, 'romoPicker:romoDropdown:toggle', [romoDropdown, this]);
154
+ }, this)
155
+ );
156
+ Romo.on(
157
+ this.romoOptionListDropdown.elem,
158
+ 'romoOptionListDropdown:romoDropdown:popupOpen',
159
+ Romo.proxy(function(e, romoDropdown, optionListDropdown) {
160
+ Romo.trigger(this.elem, 'romoPicker:romoDropdown:popupOpen', [romoDropdown, this]);
161
+ }, this)
162
+ );
163
+ Romo.on(
164
+ this.romoOptionListDropdown.elem,
165
+ 'romoOptionListDropdown:romoDropdown:popupClose',
166
+ Romo.proxy(function(e, romoDropdown, optionListDropdown) {
167
+ Romo.trigger(this.elem, 'romoPicker:romoDropdown:popupClose', [romoDropdown, this]);
168
+ }, this)
169
+ );
135
170
 
136
- Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:filterChange', Romo.proxy(function(e, filterValue, romoOptionListDropdown) {
137
- if (filterValue !== '') {
138
- // immediately update the custom opt as the filter changes
139
- // but keep the current filtered option items
140
- this._setListItems(this.filteredOptionItems.concat(this._buildCustomOptionItems()));
141
- // this will update with the new filtered items plus the custom on ajax callback
142
- Romo.trigger(this.elem, 'romoAjax:triggerInvoke', [{ 'filter': filterValue }]);
143
- } else {
144
- this._setListItems(this.defaultOptionItems.concat(this._buildCustomOptionItems()));
145
- }
146
- }, this));
147
- Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:itemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
148
- this.romoOptionListDropdown.doFocus();
149
- Romo.trigger(this.elem, 'romoPicker:itemSelected', [itemValue, itemDisplayText, this]);
150
- }, this));
151
- Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:newItemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
152
- if (this.romoSelectedOptionsList !== undefined) {
153
- var currentValues = this._elemValues();
154
- if (!currentValues.includes(itemValue)) {
155
- this._setValuesAndDisplayText(currentValues.concat([itemValue]), '');
156
- this.romoSelectedOptionsList.doAddItem({
157
- 'value': itemValue,
158
- 'displayText': itemDisplayText
159
- });
171
+ Romo.on(
172
+ this.romoOptionListDropdown.elem,
173
+ 'romoOptionListDropdown:filterChange',
174
+ Romo.proxy(function(e, filterValue, romoOptionListDropdown) {
175
+ if (filterValue !== '') {
176
+ // immediately update the custom opt as the filter changes
177
+ // but keep the current filtered option items
178
+ this._setListItems(this.filteredOptionItems.concat(this._buildCustomOptionItems()));
179
+ // this will update with the new filtered items plus the custom on ajax callback
180
+ Romo.trigger(this.elem, 'romoAjax:triggerInvoke', [{ 'filter': filterValue }]);
181
+ } else {
182
+ this._setListItems(this.defaultOptionItems.concat(this._buildCustomOptionItems()));
160
183
  }
161
- } else {
162
- this._setValuesAndDisplayText([itemValue], itemDisplayText);
163
- }
164
- this._refreshUI();
165
- Romo.trigger(this.elem, 'romoPicker:newItemSelected', [itemValue, itemDisplayText, this]);
166
- }, this));
167
- Romo.on(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:change', Romo.proxy(function(e, newValue, prevValue, optionListDropdown) {
168
- Romo.trigger(this.elem, 'change');
169
- Romo.trigger(this.elem, 'romoPicker:change', [newValue, prevValue, this]);
170
- }, this));
184
+ }, this)
185
+ );
186
+ Romo.on(
187
+ this.romoOptionListDropdown.elem,
188
+ 'romoOptionListDropdown:itemSelected',
189
+ Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
190
+ this.romoOptionListDropdown.doFocus();
191
+ Romo.trigger(this.elem, 'romoPicker:itemSelected', [itemValue, itemDisplayText, this]);
192
+ }, this)
193
+ );
194
+ Romo.on(
195
+ this.romoOptionListDropdown.elem,
196
+ 'romoOptionListDropdown:newItemSelected',
197
+ Romo.proxy(function(e, itemValue, itemDisplayText, optionListDropdown) {
198
+ if (this.romoSelectedOptionsList !== undefined) {
199
+ var currentValues = this._elemValues();
200
+ if (!currentValues.includes(itemValue)) {
201
+ this._setValuesAndDisplayText(currentValues.concat([itemValue]), '');
202
+ this.romoSelectedOptionsList.doAddItem({
203
+ 'value': itemValue,
204
+ 'displayText': itemDisplayText
205
+ });
206
+ }
207
+ } else {
208
+ this._setValuesAndDisplayText([itemValue], itemDisplayText);
209
+ }
210
+ this._refreshUI();
211
+ Romo.trigger(this.elem, 'romoPicker:newItemSelected', [itemValue, itemDisplayText, this]);
212
+ }, this)
213
+ );
214
+ Romo.on(
215
+ this.romoOptionListDropdown.elem,
216
+ 'romoOptionListDropdown:change',
217
+ Romo.proxy(function(e, newValue, prevValue, optionListDropdown) {
218
+ Romo.trigger(this.elem, 'change');
219
+ if (this.romoSelectedOptionsList !== undefined) {
220
+ Romo.trigger(
221
+ this.elem,
222
+ 'romoPicker:multipleChange',
223
+ [this._elemValues(), newValue, this]
224
+ );
225
+ } else {
226
+ Romo.trigger(this.elem, 'romoPicker:change', [newValue, prevValue, this]);
227
+ }
228
+ }, this)
229
+ );
171
230
  }
172
231
 
173
232
  RomoPicker.prototype._buildOptionListDropdownElem = function() {
174
- var romoOptionListDropdownElem = Romo.elems('<div class="romo-picker romo-btn" tabindex="0"><span class="romo-picker-text"></span></div>')[0];
175
-
176
- Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-overflow-x', 'hidden');
177
- Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-width', 'elem');
178
- Romo.setData(romoOptionListDropdownElem, 'romo-option-list-focus-style-class', 'romo-picker-focus');
233
+ var romoOptionListDropdownElem = Romo.elems(
234
+ '<div class="romo-picker romo-btn" tabindex="0">'+
235
+ '<span class="romo-picker-text"></span>'+
236
+ '</div>'
237
+ )[0];
238
+
239
+ Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-overflow-x', 'hidden');
240
+ Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-width', 'elem');
241
+ Romo.setData(
242
+ romoOptionListDropdownElem,
243
+ 'romo-option-list-focus-style-class',
244
+ 'romo-picker-focus'
245
+ );
179
246
 
180
247
  if (Romo.data(this.elem, 'romo-picker-dropdown-position') !== undefined) {
181
- Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-position', Romo.data(this.elem, 'romo-picker-dropdown-position'));
248
+ Romo.setData(
249
+ romoOptionListDropdownElem,
250
+ 'romo-dropdown-position',
251
+ Romo.data(this.elem, 'romo-picker-dropdown-position')
252
+ );
182
253
  }
183
254
  if (Romo.data(this.elem, 'romo-picker-dropdown-style-class') !== undefined) {
184
- Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-style-class', Romo.data(this.elem, 'romo-picker-dropdown-style-class'));
255
+ Romo.setData(
256
+ romoOptionListDropdownElem,
257
+ 'romo-dropdown-style-class',
258
+ Romo.data(this.elem, 'romo-picker-dropdown-style-class')
259
+ );
185
260
  }
186
261
  if (Romo.data(this.elem, 'romo-picker-dropdown-min-height') !== undefined) {
187
- Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-min-height', Romo.data(this.elem, 'romo-picker-dropdown-min-height'));
262
+ Romo.setData(
263
+ romoOptionListDropdownElem,
264
+ 'romo-dropdown-min-height',
265
+ Romo.data(this.elem, 'romo-picker-dropdown-min-height')
266
+ );
188
267
  }
189
268
  if (Romo.data(this.elem, 'romo-picker-dropdown-max-height') !== undefined) {
190
- Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-max-height', Romo.data(this.elem, 'romo-picker-dropdown-max-height'));
269
+ Romo.setData(
270
+ romoOptionListDropdownElem,
271
+ 'romo-dropdown-max-height',
272
+ Romo.data(this.elem, 'romo-picker-dropdown-max-height')
273
+ );
191
274
  }
192
275
  if (Romo.data(this.elem, 'romo-picker-dropdown-height') !== undefined) {
193
- Romo.setData(romoOptionListDropdownElem, 'romo-dropdown-height', Romo.data(this.elem, 'romo-picker-dropdown-height'));
276
+ Romo.setData(
277
+ romoOptionListDropdownElem,
278
+ 'romo-dropdown-height',
279
+ Romo.data(this.elem, 'romo-picker-dropdown-height')
280
+ );
281
+ }
282
+ if (Romo.data(this.elem, 'romo-picker-dropdown-append-to-closest') !== undefined) {
283
+ Romo.setData(
284
+ romoOptionListDropdownElem,
285
+ 'romo-dropdown-append-to-closest',
286
+ Romo.data(this.elem, 'romo-picker-dropdown-append-to-closest')
287
+ );
288
+ }
289
+ if (Romo.data(this.elem, 'romo-picker-dropdown-append-to') !== undefined) {
290
+ Romo.setData(
291
+ romoOptionListDropdownElem,
292
+ 'romo-dropdown-append-to',
293
+ Romo.data(this.elem, 'romo-picker-dropdown-append-to')
294
+ );
194
295
  }
195
296
  if (Romo.data(this.elem, 'romo-picker-filter-placeholder') !== undefined) {
196
- Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-filter-placeholder', Romo.data(this.elem, 'romo-picker-filter-placeholder'));
297
+ Romo.setData(
298
+ romoOptionListDropdownElem,
299
+ 'romo-option-list-dropdown-filter-placeholder',
300
+ Romo.data(this.elem, 'romo-picker-filter-placeholder')
301
+ );
197
302
  }
198
303
  if (Romo.data(this.elem, 'romo-picker-filter-indicator') !== undefined) {
199
- Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-filter-indicator', Romo.data(this.elem, 'romo-picker-filter-indicator'));
304
+ Romo.setData(
305
+ romoOptionListDropdownElem,
306
+ 'romo-option-list-dropdown-filter-indicator',
307
+ Romo.data(this.elem, 'romo-picker-filter-indicator')
308
+ );
200
309
  }
201
310
  if (Romo.data(this.elem, 'romo-picker-filter-indicator-width-px') !== undefined) {
202
- Romo.setData(romoOptionListDropdownElem, 'romo-option-list-filter-indicator-width-px', Romo.data(this.elem, 'romo-picker-filter-indicator-width-px'));
311
+ Romo.setData(
312
+ romoOptionListDropdownElem,
313
+ 'romo-option-list-filter-indicator-width-px',
314
+ Romo.data(this.elem, 'romo-picker-filter-indicator-width-px')
315
+ );
203
316
  }
204
317
  if (Romo.data(this.elem, 'romo-picker-no-filter') !== undefined) {
205
- Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-no-filter', Romo.data(this.elem, 'romo-picker-no-filter'));
318
+ Romo.setData(
319
+ romoOptionListDropdownElem,
320
+ 'romo-option-list-dropdown-no-filter',
321
+ Romo.data(this.elem, 'romo-picker-no-filter')
322
+ );
206
323
  }
207
324
  if (Romo.data(this.elem, 'romo-picker-open-on-focus') !== undefined) {
208
- Romo.setData(romoOptionListDropdownElem, 'romo-option-list-dropdown-open-on-focus', Romo.data(this.elem, 'romo-picker-open-on-focus'));
325
+ Romo.setData(
326
+ romoOptionListDropdownElem,
327
+ 'romo-option-list-dropdown-open-on-focus',
328
+ Romo.data(this.elem, 'romo-picker-open-on-focus')
329
+ );
209
330
  }
210
331
 
211
332
  if (Romo.data(romoOptionListDropdownElem, 'romo-dropdown-max-height') === undefined) {
@@ -238,7 +359,11 @@ RomoPicker.prototype._buildOptionListDropdownElem = function() {
238
359
  var caretClass = Romo.data(this.elem, 'romo-picker-caret') || this.defaultCaretClass;
239
360
  if (caretClass !== undefined && caretClass !== 'none') {
240
361
  this.caretElem = Romo.elems('<i class="romo-picker-caret '+caretClass+'"></i>')[0];
241
- Romo.setStyle(this.caretElem, 'line-height', Romo.css(romoOptionListDropdownElem, 'line-height'));
362
+ Romo.setStyle(
363
+ this.caretElem,
364
+ 'line-height',
365
+ Romo.css(romoOptionListDropdownElem, 'line-height')
366
+ );
242
367
  Romo.on(this.caretElem, 'click', Romo.proxy(this._onCaretClick, this));
243
368
  Romo.append(romoOptionListDropdownElem, this.caretElem);
244
369
 
@@ -253,7 +378,11 @@ RomoPicker.prototype._buildOptionListDropdownElem = function() {
253
378
  // + caret width
254
379
  // + right-side padding
255
380
  var dropdownPaddingPx = caretPaddingPx + caretWidthPx + caretPaddingPx;
256
- Romo.setStyle(romoOptionListDropdownElem, 'padding-'+caretPosition, dropdownPaddingPx+'px');
381
+ Romo.setStyle(
382
+ romoOptionListDropdownElem,
383
+ 'padding-'+caretPosition,
384
+ dropdownPaddingPx+'px'
385
+ );
257
386
  }
258
387
 
259
388
  return romoOptionListDropdownElem;
@@ -265,18 +394,27 @@ RomoPicker.prototype._bindAjax = function() {
265
394
  Romo.setData(this.elem, 'romo-ajax-auto', false);
266
395
 
267
396
  Romo.on(this.elem, 'romoAjax:callStart', Romo.proxy(function(e, data, romoAjax) {
268
- Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerFilterSpinnerStart', []);
397
+ Romo.trigger(
398
+ this.romoOptionListDropdown.elem,
399
+ 'romoOptionListDropdown:triggerFilterSpinnerStart'
400
+ );
269
401
  return false;
270
402
  }, this));
271
403
  Romo.on(this.elem, 'romoAjax:callSuccess', Romo.proxy(function(e, data, romoAjax) {
272
404
  this.filteredOptionItems = JSON.parse(data);
273
405
  this._setListItems(this.filteredOptionItems.concat(this._buildCustomOptionItems()));
274
- Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerFilterSpinnerStop', []);
406
+ Romo.trigger(
407
+ this.romoOptionListDropdown.elem,
408
+ 'romoOptionListDropdown:triggerFilterSpinnerStop'
409
+ );
275
410
  return false;
276
411
  }, this));
277
412
  Romo.on(this.elem, 'romoAjax:callError', Romo.proxy(function(e, xhr, romoAjax) {
278
413
  this._setListItems(this.defaultOptionItems.concat(this._buildCustomOptionItems()));
279
- Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerFilterSpinnerStop', []);
414
+ Romo.trigger(
415
+ this.romoOptionListDropdown.elem,
416
+ 'romoOptionListDropdown:triggerFilterSpinnerStop'
417
+ );
280
418
  return false;
281
419
  }, this));
282
420
 
@@ -285,7 +423,11 @@ RomoPicker.prototype._bindAjax = function() {
285
423
 
286
424
  RomoPicker.prototype._setListItems = function(items) {
287
425
  this.romoOptionListDropdown.doSetListItems(items);
288
- Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.romoOptionListDropdown.optItemElems()[0]]);
426
+ Romo.trigger(
427
+ this.romoOptionListDropdown.elem,
428
+ 'romoOptionListDropdown:triggerListOptionsUpdate',
429
+ [this.romoOptionListDropdown.optItemElems()[0]]
430
+ );
289
431
  }
290
432
 
291
433
  RomoPicker.prototype._buildDefaultOptionItems = function() {
@@ -328,7 +470,7 @@ RomoPicker.prototype._buildCustomOptionItem = function(value) {
328
470
  'type': 'option',
329
471
  'value': value,
330
472
  'displayText': value,
331
- 'displayHtml': value
473
+ 'displayHtml': '<span>'+value+'</span>'
332
474
  };
333
475
  }
334
476
 
@@ -346,12 +488,12 @@ RomoPicker.prototype._elemValuesDelim = function() {
346
488
  }
347
489
 
348
490
  RomoPicker.prototype._refreshUI = function() {
349
- var text = Romo.data(this.elem, 'romo-picker-display-text') || '';
350
491
  if (this.romoSelectedOptionsList !== undefined) {
351
492
  this.romoSelectedOptionsList.doRefreshUI();
352
493
  }
353
494
 
354
495
  var textElem = Romo.find(this.romoOptionListDropdown.elem, '.romo-picker-text')[0];
496
+ var text = Romo.data(this.elem, 'romo-picker-display-text') || '';
355
497
  if (text === '') {
356
498
  Romo.updateHtml(textElem, '<span>&nbsp;</span>');
357
499
  } else {