romo 0.19.10 → 0.20.0

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.
Files changed (30) hide show
  1. checksums.yaml +4 -4
  2. data/assets/css/romo/buttons.scss +1 -0
  3. data/assets/css/romo/modal.scss +5 -0
  4. data/assets/js/romo/ajax.js +75 -89
  5. data/assets/js/romo/base.js +699 -274
  6. data/assets/js/romo/currency_text_input.js +93 -83
  7. data/assets/js/romo/date.js +3 -3
  8. data/assets/js/romo/datepicker.js +227 -234
  9. data/assets/js/romo/dropdown.js +235 -344
  10. data/assets/js/romo/dropdown_form.js +77 -76
  11. data/assets/js/romo/form.js +215 -159
  12. data/assets/js/romo/indicator_text_input.js +64 -95
  13. data/assets/js/romo/inline.js +66 -59
  14. data/assets/js/romo/inline_form.js +74 -73
  15. data/assets/js/romo/modal.js +218 -294
  16. data/assets/js/romo/modal_form.js +83 -82
  17. data/assets/js/romo/onkey.js +25 -22
  18. data/assets/js/romo/option_list_dropdown.js +318 -298
  19. data/assets/js/romo/picker.js +175 -181
  20. data/assets/js/romo/select.js +177 -165
  21. data/assets/js/romo/select_dropdown.js +86 -93
  22. data/assets/js/romo/selected_options_list.js +66 -76
  23. data/assets/js/romo/sortable.js +154 -120
  24. data/assets/js/romo/{indicator.js → spinner.js} +74 -89
  25. data/assets/js/romo/tooltip.js +257 -271
  26. data/assets/js/romo/word_boundary_filter.js +7 -10
  27. data/lib/romo/dassets.rb +1 -1
  28. data/lib/romo/version.rb +1 -1
  29. data/test/unit/dassets_tests.rb +1 -1
  30. metadata +3 -3
data/assets/js/romo/select_dropdown.js CHANGED
@@ -1,27 +1,15 @@
1
- $.fn.romoSelectDropdown = function(optionElemsParent) {
2
- return $.map(this, function(element) {
3
- return new RomoSelectDropdown(element, optionElemsParent);
4
- });
5
- }
6
-
7
- var RomoSelectDropdown = function(element, optionElemsParent) {
8
- this.elem = $(element);
1
+ var RomoSelectDropdown = RomoComponent(function(elem, optionElemsParentElem) {
2
+ this.elem = elem;
9
3
 
10
- this.filterHiddenClass = 'romo-select-filter-hidden';
11
- this.optionElemSelector = ':not(.'+this.filterHiddenClass+')';
12
- this.optionElemsParent = (optionElemsParent || this.elem.find('.romo-select-dropdown-options-parent'));
4
+ this.filterHiddenClass = 'romo-select-filter-hidden';
5
+ this.optionElemSelector = ':not(.'+this.filterHiddenClass+')';
6
+ this.optionElemsParentElem = (optionElemsParentElem || Romo.find(this.elem, '.romo-select-dropdown-options-parent')[0]);
13
7
 
14
8
  this.doInit();
15
9
  this._bindElem();
16
10
 
17
- if (this.elem.attr('id') !== undefined) {
18
- $('label[for="'+this.elem.attr('id')+'"]').on('click', $.proxy(function(e) {
19
- this.elem.focus();
20
- }, this));
21
- }
22
-
23
- this.elem.trigger('selectDropdown:ready', [this]);
24
- }
11
+ Romo.trigger(this.elem, 'romoSelectDropdown:ready', [this]);
12
+ });
25
13
 
26
14
  RomoSelectDropdown.prototype.bodyElem = function() {
27
15
  return this.romoOptionListDropdown.bodyElem();
@@ -63,10 +51,6 @@ RomoSelectDropdown.prototype.optgroupItemElems = function() {
63
51
  return this.romoOptionListDropdown.optgroupItemElems();
64
52
  }
65
53
 
66
- RomoSelectDropdown.prototype.doInit = function() {
67
- // override as needed
68
- }
69
-
70
54
  RomoSelectDropdown.prototype.doSetSelectedItem = function(newValue) {
71
55
  this.romoOptionListDropdown.doSetSelectedItem(newValue);
72
56
  }
@@ -75,111 +59,118 @@ RomoSelectDropdown.prototype.doFocus = function(openOnFocus) {
75
59
  this.romoOptionListDropdown.doFocus(openOnFocus);
76
60
  }
77
61
 
78
- /* private */
62
+ // private
79
63
 
80
64
  RomoSelectDropdown.prototype._bindElem = function() {
81
- this.elem.attr('data-romo-option-list-focus-style-class', 'romo-select-focus');
65
+ Romo.setData(this.elem, 'romo-option-list-focus-style-class', 'romo-select-focus');
82
66
 
83
- if (this.elem.data('romo-select-dropdown-no-filter') !== undefined) {
84
- this.elem.attr('data-romo-option-list-dropdown-no-filter', this.elem.data('romo-select-dropdown-no-filter'));
67
+ if (Romo.data(this.elem, 'romo-select-dropdown-no-filter') !== undefined) {
68
+ Romo.setData(this.elem, 'romo-option-list-dropdown-no-filter', Romo.data(this.elem, 'romo-select-dropdown-no-filter'));
85
69
  }
86
- if (this.elem.data('romo-select-dropdown-filter-placeholder') !== undefined) {
87
- this.elem.attr('data-romo-option-list-dropdown-filter-placeholder', this.elem.data('romo-select-dropdown-filter-placeholder'));
70
+ if (Romo.data(this.elem, 'romo-select-dropdown-filter-placeholder') !== undefined) {
71
+ Romo.setData(this.elem, 'romo-option-list-dropdown-filter-placeholder', Romo.data(this.elem, 'romo-select-dropdown-filter-placeholder'));
88
72
  }
89
- if (this.elem.data('romo-select-dropdown-filter-indicator') !== undefined) {
90
- this.elem.attr('data-romo-option-list-dropdown-filter-indicator', this.elem.data('romo-select-dropdown-filter-indicator'));
73
+ if (Romo.data(this.elem, 'romo-select-dropdown-filter-indicator') !== undefined) {
74
+ Romo.setData(this.elem, 'romo-option-list-dropdown-filter-indicator', Romo.data(this.elem, 'romo-select-dropdown-filter-indicator'));
91
75
  }
92
- if (this.elem.data('romo-select-dropdown-filter-indicator-width-px') !== undefined) {
93
- this.elem.attr('data-romo-option-list-dropdown-filter-indicator-width-px', this.elem.data('romo-select-dropdown-filter-indicator-width-px'));
76
+ if (Romo.data(this.elem, 'romo-select-dropdown-filter-indicator-width-px') !== undefined) {
77
+ Romo.setData(this.elem, 'romo-option-list-dropdown-filter-indicator-width-px', Romo.data(this.elem, 'romo-select-dropdown-filter-indicator-width-px'));
94
78
  }
95
- if (this.elem.data('romo-select-dropdown-open-on-focus') !== undefined) {
96
- this.elem.attr('data-romo-option-list-dropdown-open-on-focus', this.elem.data('romo-select-dropdown-open-on-focus'));
79
+ if (Romo.data(this.elem, 'romo-select-dropdown-open-on-focus') !== undefined) {
80
+ Romo.setData(this.elem, 'romo-option-list-dropdown-open-on-focus', Romo.data(this.elem, 'romo-select-dropdown-open-on-focus'));
97
81
  }
98
82
 
99
- this.elem.on('romoOptionListDropdown:dropdown:toggle', $.proxy(function(e, dropdown) {
100
- this.elem.trigger('selectDropdown:dropdown:toggle', [dropdown, this]);
83
+ Romo.on(this.elem, 'romoOptionListDropdown:romoDropdown:toggle', Romo.proxy(function(e, romoDropdown) {
84
+ Romo.trigger(this.elem, 'romoSelectDropdown:romoDropdown:toggle', [romoDropdown, this]);
101
85
  }, this));
102
- this.elem.on('romoOptionListDropdown:dropdown:popupOpen', $.proxy(function(e, dropdown) {
103
- this.elem.trigger('selectDropdown:dropdown:popupOpen', [dropdown, this]);
86
+ Romo.on(this.elem, 'romoOptionListDropdown:romoDropdown:popupOpen', Romo.proxy(function(e, romoDropdown) {
87
+ Romo.trigger(this.elem, 'romoSelectDropdown:romoDropdown:popupOpen', [romoDropdown, this]);
104
88
  }, this));
105
- this.elem.on('romoOptionListDropdown:dropdown:popupClose', $.proxy(function(e, dropdown) {
106
- this.elem.trigger('selectDropdown:dropdown:popupClose', [dropdown, this]);
89
+ Romo.on(this.elem, 'romoOptionListDropdown:romoDropdown:popupClose', Romo.proxy(function(e, romoDropdown) {
90
+ Romo.trigger(this.elem, 'romoSelectDropdown:romoDropdown:popupClose', [romoDropdown, this]);
107
91
  }, this));
108
- this.elem.on('romoOptionListDropdown:itemSelected', $.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
109
- this.elem.trigger('selectDropdown:itemSelected', [itemValue, itemDisplayText, this]);
92
+ Romo.on(this.elem, 'romoOptionListDropdown:itemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
93
+ Romo.trigger(this.elem, 'romoSelectDropdown:itemSelected', [itemValue, itemDisplayText, this]);
110
94
  }, this));
111
- this.elem.on('romoOptionListDropdown:newItemSelected', $.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
112
- var custOptElem = this.optionElemsParent.find('OPTION[data-romo-select-dropdown-custom-option="true"]');
113
- if (this.optionElemsParent.find('OPTION[value="'+itemValue+'"]').length === 0){
95
+ Romo.on(this.elem, 'romoOptionListDropdown:newItemSelected', Romo.proxy(function(e, itemValue, itemDisplayText, romoOptionListDropdown) {
96
+ var custOptElem = Romo.find(this.optionElemsParentElem, 'OPTION[data-romo-select-dropdown-custom-option="true"]')[0];
97
+ if (Romo.find(this.optionElemsParentElem, 'OPTION[value="'+itemValue+'"]').length === 0){
114
98
  // a custom value is being selected. add a custom option elem and update its value/text
115
- if (custOptElem.length === 0) {
116
- this.optionElemsParent.append('<option data-romo-select-dropdown-custom-option="true"></option>');
117
- custOptElem = this.optionElemsParent.find('OPTION[data-romo-select-dropdown-custom-option="true"]');
99
+ if (custOptElem === undefined) {
100
+ Romo.appendHtml(this.optionElemsParentElem, '<option data-romo-select-dropdown-custom-option="true"></option>');
101
+ custOptElem = Romo.find(this.optionElemsParentElem, 'OPTION[data-romo-select-dropdown-custom-option="true"]')[0];
118
102
  }
119
- custOptElem.attr('value', itemValue);
120
- custOptElem.text(itemDisplayText);
121
- } else if (custOptElem.length !== 0) {
103
+ Romo.setAttr(custOptElem, 'value', itemValue);
104
+ Romo.updateText(custOptElem, itemDisplayText);
105
+ } else if (custOptElem !== undefined) {
122
106
  // a non custom value is being selected. remove any existing custom option
123
- custOptElem.remove();
107
+ Romo.remove(custOptElem);
124
108
  }
125
- this.elem.trigger('selectDropdown:newItemSelected', [itemValue, itemDisplayText, this]);
109
+ Romo.trigger(this.elem, 'romoSelectDropdown:newItemSelected', [itemValue, itemDisplayText, this]);
126
110
  }, this));
127
- this.elem.on('romoOptionListDropdown:change', $.proxy(function(e, newValue, prevValue, romoOptionListDropdown) {
128
- this.elem.trigger('selectDropdown:change', [newValue, prevValue, this]);
111
+ Romo.on(this.elem, 'romoOptionListDropdown:change', Romo.proxy(function(e, newValue, prevValue, romoOptionListDropdown) {
112
+ Romo.trigger(this.elem, 'romoSelectDropdown:change', [newValue, prevValue, this]);
129
113
  }, this));
130
114
 
131
115
 
132
- this.elem.on('selectDropdown:triggerToggle', $.proxy(function(e) {
133
- this.elem.trigger('romoOptionListDropdown:triggerToggle', []);
116
+ Romo.on(this.elem, 'romoSelectDropdown:triggerToggle', Romo.proxy(function(e) {
117
+ Romo.trigger(this.elem, 'romoOptionListDropdown:triggerToggle', []);
134
118
  }, this));
135
- this.elem.on('selectDropdown:triggerPopupOpen', $.proxy(function(e) {
136
- this.elem.trigger('romoOptionListDropdown:triggerPopupOpen', []);
119
+ Romo.on(this.elem, 'romoSelectDropdown:triggerPopupOpen', Romo.proxy(function(e) {
120
+ Romo.trigger(this.elem, 'romoOptionListDropdown:triggerPopupOpen', []);
137
121
  }, this));
138
- this.elem.on('selectDropdown:triggerPopupClose', $.proxy(function(e) {
139
- this.elem.trigger('romoOptionListDropdown:triggerPopupClose', []);
122
+ Romo.on(this.elem, 'romoSelectDropdown:triggerPopupClose', Romo.proxy(function(e) {
123
+ Romo.trigger(this.elem, 'romoOptionListDropdown:triggerPopupClose', []);
140
124
  }, this));
141
125
 
142
- this.romoOptionListDropdown = this.elem.romoOptionListDropdown()[0];
126
+ this.romoOptionListDropdown = new RomoOptionListDropdown(this.elem);
143
127
 
144
- this.elem.on('romoOptionListDropdown:filterChange', $.proxy(function(e, filterValue, romoOptionListDropdown) {
145
- var elems = this.optionElemsParent.find('OPTION');
128
+ Romo.on(this.elem, 'romoOptionListDropdown:filterChange', Romo.proxy(function(e, filterValue, romoOptionListDropdown) {
129
+ var elems = Romo.find(this.optionElemsParentElem, 'OPTION');
146
130
  var wbFilter = new RomoWordBoundaryFilter(filterValue, elems, function(elem) {
147
131
  // The romo word boundary filter by default considers a space, "-" and "_"
148
132
  // as word boundaries. We want to also consider other non-word characters
149
133
  // (such as ":", "/", ".", "?", "=", "&") as word boundaries as well.
150
- return elem[0].textContent.replace(/\W/g, ' ');
134
+ return elem.textContent.replace(/\W/g, ' ');
151
135
  });
152
136
 
153
- wbFilter.matchingElems.removeClass(this.filterHiddenClass);
154
- wbFilter.notMatchingElems.addClass(this.filterHiddenClass);
137
+ Romo.removeClass(wbFilter.matchingElems, this.filterHiddenClass);
138
+ Romo.addClass(wbFilter.notMatchingElems, this.filterHiddenClass);
155
139
  this._setListItems();
156
140
 
157
141
  if (filterValue !== '') {
158
- this.romoOptionListDropdown.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.optItemElems().first()]);
142
+ Romo.trigger(this.romoOptionListDropdown.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.optItemElems()[0]]);
159
143
  } else {
160
- this.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
144
+ Romo.trigger(this.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
161
145
  }
162
146
  }, this));
163
147
 
164
148
  this._sanitizeOptions();
165
149
  this._setListItems();
166
- this.elem.trigger('romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
150
+ Romo.trigger(this.elem, 'romoOptionListDropdown:triggerListOptionsUpdate', [this.selectedItemElem()]);
151
+
152
+ if (Romo.attr(this.elem, 'id') !== undefined) {
153
+ var labelElem = Romo.f('label[for="'+Romo.attr(this.elem, 'id')+'"]');
154
+ Romo.on(labelElem, 'click', Romo.proxy(function(e) {
155
+ e.preventDefault();
156
+ this.elem.focus();
157
+ }, this));
158
+ }
167
159
  }
168
160
 
169
161
  RomoSelectDropdown.prototype._sanitizeOptions = function() {
170
162
  // set any options without a value to value=""
171
163
  // all options are required to have a value for things to work
172
164
  // this and the select component assume value attrs for all options
173
- $.each(this.optionElemsParent.find('OPTION'), $.proxy(function(idx, optionNode) {
174
- var optElem = $(optionNode);
175
- if (optElem.attr('value') === undefined) {
176
- optElem.attr('value', '');
165
+ Romo.find(this.optionElemsParentElem, 'OPTION').forEach(Romo.proxy(function(optElem) {
166
+ if (Romo.attr(optElem, 'value') === undefined) {
167
+ Romo.setAttr(optElem, 'value', '');
177
168
  }
178
169
  }, this));
179
170
  }
180
171
 
181
172
  RomoSelectDropdown.prototype._setListItems = function() {
182
- var optElems = this.optionElemsParent.children(this.optionElemSelector);
173
+ var optElems = Romo.children(this.optionElemsParentElem, this.optionElemSelector);
183
174
  var items = this._buildOptionListItems(optElems).concat(this._buildCustomOptionItems());
184
175
  this.romoOptionListDropdown.doSetListItems(items);
185
176
  }
@@ -187,11 +178,11 @@ RomoSelectDropdown.prototype._setListItems = function() {
187
178
  RomoSelectDropdown.prototype._buildOptionListItems = function(optionElems) {
188
179
  var list = [];
189
180
 
190
- $.each(optionElems, $.proxy(function(idx, optionNode) {
191
- if (optionNode.tagName === "OPTION") {
192
- list.push(this._buildOptionItem($(optionNode)));
193
- } else if (optionNode.tagName === "OPTGROUP") {
194
- var optGroupItem = this._buildOptGroupItem($(optionNode));
181
+ optionElems.forEach(Romo.proxy(function(optElem) {
182
+ if (optElem.tagName === "OPTION") {
183
+ list.push(this._buildOptionItem(optElem));
184
+ } else if (optElem.tagName === "OPTGROUP") {
185
+ var optGroupItem = this._buildOptGroupItem(optElem);
195
186
  if (optGroupItem.items.length !== 0) {
196
187
  list.push(optGroupItem);
197
188
  }
@@ -205,14 +196,14 @@ RomoSelectDropdown.prototype._buildOptionItem = function(optionElem) {
205
196
  var item = {}
206
197
 
207
198
  item['type'] = 'option';
208
- item['value'] = (optionElem.attr('value') || '');
209
- item['displayText'] = (optionElem.text().trim() || '');
210
- item['displayHtml'] = (optionElem.text().trim() || '&nbsp;');
199
+ item['value'] = (Romo.attr(optionElem, 'value') || '');
200
+ item['displayText'] = (optionElem.innerText.trim() || '');
201
+ item['displayHtml'] = (optionElem.innerText.trim() || '<span>&nbsp;</span>');
211
202
 
212
- if (optionElem.prop('selected')) {
203
+ if (optionElem.selected) {
213
204
  item['selected'] = true;
214
205
  }
215
- if (optionElem.attr('disabled') !== undefined) {
206
+ if (Romo.attr(optionElem, 'disabled') !== undefined) {
216
207
  item['disabled'] = true;
217
208
  }
218
209
 
@@ -223,8 +214,8 @@ RomoSelectDropdown.prototype._buildOptGroupItem = function(optGroupElem) {
223
214
  var item = {};
224
215
 
225
216
  item['type'] = 'optgroup';
226
- item['label'] = optGroupElem.attr('label');
227
- item['items'] = this._buildOptionListItems(optGroupElem.children(this.optionElemSelector));
217
+ item['label'] = Romo.attr(optGroupElem, 'label');
218
+ item['items'] = this._buildOptionListItems(Romo.children(optGroupElem, this.optionElemSelector));
228
219
 
229
220
  return item;
230
221
  }
@@ -233,8 +224,8 @@ RomoSelectDropdown.prototype._buildCustomOptionItems = function() {
233
224
  var items = [];
234
225
 
235
226
  var value = this.romoOptionListDropdown.optionFilterValue();
236
- if (value !== '' && this.elem.data('romo-select-dropdown-custom-option') === true) {
237
- var prompt = this.elem.data('romo-select-dropdown-custom-option-prompt');
227
+ if (value !== '' && Romo.data(this.elem, 'romo-select-dropdown-custom-option') === true) {
228
+ var prompt = Romo.data(this.elem, 'romo-select-dropdown-custom-option-prompt');
238
229
  if (prompt !== undefined) {
239
230
  items.push({
240
231
  'type': 'optgroup',
@@ -258,6 +249,8 @@ RomoSelectDropdown.prototype._buildCustomOptionItem = function(value) {
258
249
  };
259
250
  }
260
251
 
261
- Romo.onInitUI(function(e) {
262
- Romo.initUIElems(e, '[data-romo-select-dropdown-auto="true"]').romoSelectDropdown();
263
- });
252
+ // event functions
253
+
254
+ // init
255
+
256
+ Romo.addElemsInitSelector('[data-romo-select-dropdown-auto="true"]', RomoSelectDropdown);
data/assets/js/romo/selected_options_list.js CHANGED
@@ -1,4 +1,4 @@
1
- var RomoSelectedOptionsList = function(focusElem) {
1
+ var RomoSelectedOptionsList = RomoComponent(function(focusElem) {
2
2
  this.elem = undefined;
3
3
  this.focusElem = focusElem; // picker/select dropdown elem
4
4
 
@@ -6,11 +6,7 @@ var RomoSelectedOptionsList = function(focusElem) {
6
6
 
7
7
  this.doInit();
8
8
  this._bindElem();
9
- }
10
-
11
- RomoSelectedOptionsList.prototype.doInit = function() {
12
- // override as needed
13
- }
9
+ });
14
10
 
15
11
  /*
16
12
  Options are specified as a list of items. Each 'option' item object
@@ -47,87 +43,79 @@ RomoSelectedOptionsList.prototype.doRemoveItem = function(itemValue) {
47
43
 
48
44
  RomoSelectedOptionsList.prototype.doRefreshUI = function() {
49
45
  var itemValues = this._getItemValues();
50
- var uiListElem = this.elem.find('.romo-selected-options-list-items');
51
- var uiItemElems = uiListElem.find('.romo-selected-options-list-item');
52
- var uiValues = uiItemElems.get().map(function(uiItemNode) {
53
- return $(uiItemNode).data('romo-selected-options-list-value');
54
- });
55
- var rmNodes = uiItemElems.get().filter(function(uiItemNode) {
56
- return itemValues.indexOf($(uiItemNode).data('romo-selected-options-list-value')) === -1;
46
+ var uiListElem = Romo.find(this.elem, '.romo-selected-options-list-items')[0];
47
+ var uiItemElems = Romo.find(uiListElem, '.romo-selected-options-list-item');
48
+ var uiValues = uiItemElems.map(Romo.proxy(function(uiItemElem) {
49
+ return Romo.data(uiItemElem, 'romo-selected-options-list-value');
50
+ }, this), []);
51
+ var rmElems = uiItemElems.filter(function(uiItemElem) {
52
+ return itemValues.indexOf(Romo.data(uiItemElem, 'romo-selected-options-list-value')) === -1;
57
53
  });
58
54
  var addItems = this.items.filter(function(item) {
59
55
  return uiValues.indexOf(item.value) === -1;
60
56
  });
61
- rmNodes.forEach($.proxy(function(rmNode) {
62
- $(rmNode).remove();
63
- }, this));
64
- addItems.forEach($.proxy(function(addItem) {
57
+ Romo.remove(rmElems);
58
+ addItems.forEach(Romo.proxy(function(addItem) {
65
59
  var addElem = this._buildItemElem(addItem);
66
60
  uiListElem.append(addElem);
67
61
 
68
- var listWidth = parseInt(Romo.getComputedStyle(uiListElem[0], "width"), 10);
69
- var listLeftPad = parseInt(Romo.getComputedStyle(uiListElem[0], "padding-left"), 10);
70
- var listRightPad = parseInt(Romo.getComputedStyle(uiListElem[0], "padding-right"), 10);
62
+ var listWidth = parseInt(Romo.css(uiListElem, "width"), 10);
63
+ var listLeftPad = parseInt(Romo.css(uiListElem, "padding-left"), 10);
64
+ var listRightPad = parseInt(Romo.css(uiListElem, "padding-right"), 10);
71
65
  var itemBorderWidth = 1;
72
- var itemLeftPad = parseInt(Romo.getComputedStyle(addElem[0], "padding-left"), 10);
73
- var itemRightPad = parseInt(Romo.getComputedStyle(addElem[0], "padding-right"), 10);
74
- addElem.find('DIV').css('max-width', String(listWidth-listLeftPad-listRightPad-(2*itemBorderWidth)-itemLeftPad-itemRightPad)+'px');
66
+ var itemLeftPad = parseInt(Romo.css(addElem, "padding-left"), 10);
67
+ var itemRightPad = parseInt(Romo.css(addElem, "padding-right"), 10);
68
+ Romo.setStyle(Romo.find(addElem, 'DIV')[0], 'max-width', String(listWidth-listLeftPad-listRightPad-(2*itemBorderWidth)-itemLeftPad-itemRightPad)+'px');
75
69
  }, this));
76
70
 
77
- var focusElemWidth = parseInt(Romo.getComputedStyle(this.focusElem[0], "width"), 10);
78
- this.elem.css('width', String(focusElemWidth)+'px');
71
+ var focusElemWidth = parseInt(Romo.css(this.focusElem, "width"), 10);
72
+ Romo.setStyle(this.elem, 'width', String(focusElemWidth)+'px');
79
73
 
80
- var maxRows = undefined;
81
- var uiListElemHeight = parseInt(Romo.getComputedStyle(uiListElem[0], "height"), 10);
82
- var firstItemNode = uiListElem.find('.romo-selected-options-list-item')[0];
83
- if (firstItemNode !== undefined) {
84
- var itemHeight = parseInt(Romo.getComputedStyle(firstItemNode, "height"), 10);
85
- var itemMarginBottom = parseInt(Romo.getComputedStyle(firstItemNode, "margin-bottom"), 10);
74
+ var maxRows = undefined;
75
+ var uiListElemHeight = parseInt(Romo.css(uiListElem, "height"), 10);
76
+ var firstItemElem = Romo.find(uiListElem, '.romo-selected-options-list-item')[0];
77
+ if (firstItemElem !== undefined) {
78
+ var itemHeight = parseInt(Romo.css(firstItemElem, "height"), 10);
79
+ var itemMarginBottom = parseInt(Romo.css(firstItemElem, "margin-bottom"), 10);
86
80
  var itemBorderWidth = 1;
87
- var listTopPad = parseInt(Romo.getComputedStyle(uiListElem[0], "padding-top"), 10);
88
- var listBottomPad = parseInt(Romo.getComputedStyle(uiListElem[0], "padding-bottom"), 10);
81
+ var listTopPad = parseInt(Romo.css(uiListElem, "padding-top"), 10);
82
+ var listBottomPad = parseInt(Romo.css(uiListElem, "padding-bottom"), 10);
89
83
 
90
- var maxRows = this.focusElem.data('romo-selected-options-list-max-rows') || 0;
84
+ var maxRows = Romo.data(this.focusElem, 'romo-selected-options-list-max-rows') || 0;
91
85
  var maxHeight = listTopPad+(itemHeight*maxRows)+(itemMarginBottom*(maxRows-1))+(2*itemBorderWidth*maxRows)+listBottomPad+(itemHeight/2);
92
86
  }
93
87
  if (maxRows !== 0 && (uiListElemHeight > maxHeight)) {
94
- this.elem.css({
95
- 'height': String(maxHeight)+'px',
96
- 'overflow-y': 'auto'
97
- });
98
- var itemElems = uiListElem.find('.romo-selected-options-list-item');
99
- var lastItemNode = itemElems[itemElems.length-1];
100
- this._scrollListTopToItem($(lastItemNode));
88
+ Romo.setStyle(this.elem, 'height', String(maxHeight)+'px');
89
+ Romo.setStyle(this.elem, 'overflow-y', 'auto');
90
+
91
+ var itemElems = Romo.find(uiListElem, '.romo-selected-options-list-item');
92
+ var lastItemElem = itemElems[itemElems.length-1];
93
+ this._scrollListTopToItem(lastItemElem);
101
94
  } else {
102
- this.elem.css({
103
- 'height': String(uiListElemHeight)+'px',
104
- 'overflow-y': undefined
105
- });
95
+ Romo.setStyle(this.elem, 'height', String(uiListElemHeight)+'px');
96
+ Romo.rmStyle(this.elem, 'overflow-y');
106
97
  }
107
98
  }
108
99
 
109
- /* private */
100
+ // private
110
101
 
111
102
  RomoSelectedOptionsList.prototype._bindElem = function() {
112
- this.elem = $('<div class="romo-selected-options-list"><div class="romo-selected-options-list-items"></div></div>');
113
-
114
- this.elem.on('click', $.proxy(function(e) {
115
- if (e !== undefined) {
116
- e.stopPropagation();
117
- e.preventDefault();
118
- }
119
- this.elem.trigger('romoSelectedOptionsList:listClick', [this]);
103
+ this.elem = Romo.elems('<div class="romo-selected-options-list"><div class="romo-selected-options-list-items"></div></div>')[0];
104
+
105
+ Romo.on(this.elem, 'click', Romo.proxy(function(e) {
106
+ Romo.trigger(this.elem, 'romoSelectedOptionsList:listClick', [this]);
107
+ return false;
120
108
  }, this));
121
109
 
122
110
  this.doSetItems([]);
123
111
  }
124
112
 
125
113
  RomoSelectedOptionsList.prototype._buildItemElem = function(item) {
126
- var itemClass = this.focusElem.data('romo-selected-options-list-item-class') || '';
127
- var itemElem = $('<div class="romo-selected-options-list-item romo-pointer romo-pad0-left romo-pad0-right romo-push0-right romo-push0-bottom '+itemClass+'"></div>');
128
- itemElem.append($('<div class="romo-crop-ellipsis romo-text-strikethrough-hover">'+(item.displayText || '')+'</div>'));
129
- itemElem.attr('data-romo-selected-options-list-value', (item.value || ''));
130
- itemElem.on('click', $.proxy(this._onItemClick, this));
114
+ var itemClass = Romo.data(this.focusElem, 'romo-selected-options-list-item-class') || '';
115
+ var itemElem = Romo.elems('<div class="romo-selected-options-list-item romo-pointer romo-pad0-left romo-pad0-right romo-push0-right romo-push0-bottom '+itemClass+'"></div>')[0];
116
+ Romo.append(itemElem, Romo.elems('<div class="romo-crop-ellipsis romo-text-strikethrough-hover">'+(item.displayText || '')+'</div>')[0]);
117
+ Romo.setData(itemElem, 'romo-selected-options-list-value', (item.value || ''));
118
+ Romo.on(itemElem, 'click', Romo.proxy(this._onItemClick, this));
131
119
 
132
120
  return itemElem;
133
121
  }
@@ -136,26 +124,28 @@ RomoSelectedOptionsList.prototype._getItemValues = function() {
136
124
  return this.items.map(function(item) { return item.value; });
137
125
  }
138
126
 
139
- RomoSelectedOptionsList.prototype._onItemClick = function(e) {
140
- var itemElem = $(e.target);
141
- if (!itemElem.hasClass('romo-selected-options-list-item')) {
142
- var itemElem = itemElem.closest('.romo-selected-options-list-item');
143
- }
144
- if (itemElem[0] !== undefined) {
145
- var value = itemElem.data('romo-selected-options-list-value');
146
- this.elem.trigger('romoSelectedOptionsList:itemClick', [value, this]);
127
+ RomoSelectedOptionsList.prototype._scrollListTopToItem = function(itemElem) {
128
+ if (itemElem !== undefined) {
129
+ var scrollElem = this.elem;
130
+ scrollElem.scrollTop = 0;
131
+
132
+ var scrollOffsetTop = Romo.offset(scrollElem).top;
133
+ var selOffsetTop = Romo.offset(itemElem).top;
134
+ var selOffset = parseInt(Romo.css(itemElem, 'height'), 10) / 2;
135
+
136
+ scrollElem.scrollTop = selOffsetTop - scrollOffsetTop - selOffset;
147
137
  }
148
138
  }
149
139
 
150
- RomoSelectedOptionsList.prototype._scrollListTopToItem = function(itemElem) {
151
- if (itemElem[0] !== undefined) {
152
- var scroll = this.elem;
153
- scroll.scrollTop(0);
154
-
155
- var scrollOffsetTop = scroll.offset().top;
156
- var selOffsetTop = itemElem.offset().top;
157
- var selOffset = itemElem.height() / 2;
140
+ // event functions
158
141
 
159
- scroll.scrollTop(selOffsetTop - scrollOffsetTop - selOffset);
142
+ RomoSelectedOptionsList.prototype.romoEvFn._onItemClick = function(e) {
143
+ var itemElem = e.target;
144
+ if (!Romo.hasClass(itemElem, 'romo-selected-options-list-item')) {
145
+ var itemElem = Romo.closest(itemElem, '.romo-selected-options-list-item');
146
+ }
147
+ if (itemElem !== undefined) {
148
+ var value = Romo.data(itemElem, 'romo-selected-options-list-value');
149
+ Romo.trigger(this.elem, 'romoSelectedOptionsList:itemClick', [value, this]);
160
150
  }
161
151
  }