Skip to content

Commit 3d37e23

Browse files
lcdsantoslcdsantos
committed
Inherit class name on option tag. Fix #77.
Added utility function to transform an array of strings to be used as a class property.
1 parent b5d6518 commit 3d37e23

File tree

5 files changed

+114
-64
lines changed

5 files changed

+114
-64
lines changed

‎public/jquery.selectric.js

Lines changed: 54 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -211,6 +211,19 @@
211211
}
212212

213213
$(elm).trigger(pluginName + '-' + this.toDash(fn), scope);
214+
},
215+
216+
/**
217+
* Transform array list to concatenated string and remove empty values
218+
* @param {array} arr - Class list
219+
* @return {string} - Concatenated string
220+
*/
221+
arrayToClassname: function(arr) {
222+
var newArr = $.grep(arr, function(item) {
223+
return !!item;
224+
});
225+
226+
return $.trim(newArr.join(' '));
214227
}
215228
},
216229

@@ -272,11 +285,13 @@
272285

273286
_this.utils.triggerCallback('BeforeActivate', _this);
274287

275-
_this.elements.outerWrapper.prop('class', [
276-
_this.classes.wrapper,
277-
_this.$element.prop('class').replace(/\S+/g, _this.classes.prefix + '-$&'),
278-
_this.options.responsive ? _this.classes.responsive : ''
279-
].join(' '));
288+
_this.elements.outerWrapper.prop('class',
289+
_this.utils.arrayToClassname([
290+
_this.classes.wrapper,
291+
_this.$element.prop('class').replace(/\S+/g, _this.classes.prefix + '-$&'),
292+
_this.options.responsive ? _this.classes.responsive : ''
293+
])
294+
);
280295

281296
if ( _this.options.inheritOriginalWidth && originalWidth > 0 ) {
282297
_this.elements.outerWrapper.width(originalWidth);
@@ -342,7 +357,7 @@
342357
labelMarkup = $.grep(labelMarkup, function(item) {
343358
// Hide default (please choose) if more then one element were selected.
344359
// If no option value were given value is set to option text by default
345-
if (labelMarkup.length > 1 || labelMarkup.length === 0) {
360+
if ( labelMarkup.length > 1 || labelMarkup.length === 0 ) {
346361
return $.trim(item.value) !== '' && item.value !== item.text;
347362
}
348363
return item;
@@ -418,17 +433,8 @@
418433

419434
$elm.children().each(function(i) {
420435
var $elm = $(this);
421-
var optionText = $elm.html();
422-
423-
optionsGroup.items[i] = {
424-
index : currIndex,
425-
element : $elm,
426-
value : $elm.val(),
427-
text : optionText,
428-
slug : _this.utils.replaceDiacritics(optionText),
429-
disabled : optionsGroup.groupDisabled,
430-
selected : $elm.prop('selected')
431-
};
436+
437+
optionsGroup.items[i] = _this.getItemData(currIndex, $elm, optionsGroup.groupDisabled);
432438

433439
_this.lookupItems[currIndex] = optionsGroup.items[i];
434440

@@ -439,17 +445,7 @@
439445

440446
} else {
441447

442-
var optionText = $elm.html();
443-
444-
_this.items[i] = {
445-
index : currIndex,
446-
element : $elm,
447-
value : $elm.val(),
448-
text : optionText,
449-
slug : _this.utils.replaceDiacritics(optionText),
450-
disabled : $elm.prop('disabled'),
451-
selected : $elm.prop('selected')
452-
};
448+
_this.items[i] = _this.getItemData(currIndex, $elm, $elm.prop('disabled'));
453449

454450
_this.lookupItems[currIndex] = _this.items[i];
455451

@@ -463,6 +459,28 @@
463459
}
464460
},
465461

462+
/**
463+
* Generate items object data
464+
* @param {integer} index - Current item index
465+
* @param {node} $elm - Current element node
466+
* @param {boolean} isDisabled - Current element disabled state
467+
* @return {object} - Item object
468+
*/
469+
getItemData: function(index, $elm, isDisabled) {
470+
var _this = this;
471+
472+
return {
473+
index : index,
474+
element : $elm,
475+
value : $elm.val(),
476+
className : $elm.prop('class'),
477+
text : $elm.html(),
478+
slug : _this.utils.replaceDiacritics($elm.html()),
479+
selected : $elm.prop('selected'),
480+
disabled : isDisabled
481+
};
482+
},
483+
466484
/**
467485
* Generate options markup
468486
*
@@ -477,7 +495,11 @@
477495
if ( elm.label !== undefined ) {
478496

479497
markup += _this.utils.format('<ul class="{1}"><li class="{2}">{3}</li>',
480-
$.trim([_this.classes.group, elm.groupDisabled ? 'disabled' : '', elm.element.prop('class')].join(' ')),
498+
_this.utils.arrayToClassname([
499+
_this.classes.group,
500+
elm.groupDisabled ? 'disabled' : '',
501+
elm.element.prop('class')
502+
]),
481503
_this.classes.grouplabel,
482504
elm.element.prop('label')
483505
);
@@ -511,11 +533,12 @@
511533

512534
return _this.utils.format('<li data-index="{1}" class="{2}">{3}</li>',
513535
i,
514-
$.trim([
536+
_this.utils.arrayToClassname([
537+
elm.className,
515538
i === _this.items.length - 1 ? 'last' : '',
516539
elm.disabled ? 'disabled' : '',
517540
elm.selected ? 'selected' : ''
518-
].join(' ')),
541+
]),
519542
$.isFunction(itemBuilder) ? itemBuilder(elm, elm.element, i) : _this.utils.format(itemBuilder, elm)
520543
);
521544
},

‎public/jquery.selectric.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/jquery.selectric.js

Lines changed: 54 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,19 @@
194194
}
195195

196196
$(elm).trigger(pluginName + '-' + this.toDash(fn), scope);
197+
},
198+
199+
/**
200+
* Transform array list to concatenated string and remove empty values
201+
* @param {array} arr - Class list
202+
* @return {string} - Concatenated string
203+
*/
204+
arrayToClassname: function(arr) {
205+
var newArr = $.grep(arr, function(item) {
206+
return !!item;
207+
});
208+
209+
return $.trim(newArr.join(' '));
197210
}
198211
},
199212

@@ -255,11 +268,13 @@
255268

256269
_this.utils.triggerCallback('BeforeActivate', _this);
257270

258-
_this.elements.outerWrapper.prop('class', [
259-
_this.classes.wrapper,
260-
_this.$element.prop('class').replace(/\S+/g, _this.classes.prefix + '-$&'),
261-
_this.options.responsive ? _this.classes.responsive : ''
262-
].join(' '));
271+
_this.elements.outerWrapper.prop('class',
272+
_this.utils.arrayToClassname([
273+
_this.classes.wrapper,
274+
_this.$element.prop('class').replace(/\S+/g, _this.classes.prefix + '-$&'),
275+
_this.options.responsive ? _this.classes.responsive : ''
276+
])
277+
);
263278

264279
if ( _this.options.inheritOriginalWidth && originalWidth > 0 ) {
265280
_this.elements.outerWrapper.width(originalWidth);
@@ -325,7 +340,7 @@
325340
labelMarkup = $.grep(labelMarkup, function(item) {
326341
// Hide default (please choose) if more then one element were selected.
327342
// If no option value were given value is set to option text by default
328-
if (labelMarkup.length > 1 || labelMarkup.length === 0) {
343+
if ( labelMarkup.length > 1 || labelMarkup.length === 0 ) {
329344
return $.trim(item.value) !== '' && item.value !== item.text;
330345
}
331346
return item;
@@ -401,17 +416,8 @@
401416

402417
$elm.children().each(function(i) {
403418
var $elm = $(this);
404-
var optionText = $elm.html();
405-
406-
optionsGroup.items[i] = {
407-
index : currIndex,
408-
element : $elm,
409-
value : $elm.val(),
410-
text : optionText,
411-
slug : _this.utils.replaceDiacritics(optionText),
412-
disabled : optionsGroup.groupDisabled,
413-
selected : $elm.prop('selected')
414-
};
419+
420+
optionsGroup.items[i] = _this.getItemData(currIndex, $elm, optionsGroup.groupDisabled);
415421

416422
_this.lookupItems[currIndex] = optionsGroup.items[i];
417423

@@ -422,17 +428,7 @@
422428

423429
} else {
424430

425-
var optionText = $elm.html();
426-
427-
_this.items[i] = {
428-
index : currIndex,
429-
element : $elm,
430-
value : $elm.val(),
431-
text : optionText,
432-
slug : _this.utils.replaceDiacritics(optionText),
433-
disabled : $elm.prop('disabled'),
434-
selected : $elm.prop('selected')
435-
};
431+
_this.items[i] = _this.getItemData(currIndex, $elm, $elm.prop('disabled'));
436432

437433
_this.lookupItems[currIndex] = _this.items[i];
438434

@@ -446,6 +442,28 @@
446442
}
447443
},
448444

445+
/**
446+
* Generate items object data
447+
* @param {integer} index - Current item index
448+
* @param {node} $elm - Current element node
449+
* @param {boolean} isDisabled - Current element disabled state
450+
* @return {object} - Item object
451+
*/
452+
getItemData: function(index, $elm, isDisabled) {
453+
var _this = this;
454+
455+
return {
456+
index : index,
457+
element : $elm,
458+
value : $elm.val(),
459+
className : $elm.prop('class'),
460+
text : $elm.html(),
461+
slug : _this.utils.replaceDiacritics($elm.html()),
462+
selected : $elm.prop('selected'),
463+
disabled : isDisabled
464+
};
465+
},
466+
449467
/**
450468
* Generate options markup
451469
*
@@ -460,7 +478,11 @@
460478
if ( elm.label !== undefined ) {
461479

462480
markup += _this.utils.format('<ul class="{1}"><li class="{2}">{3}</li>',
463-
$.trim([_this.classes.group, elm.groupDisabled ? 'disabled' : '', elm.element.prop('class')].join(' ')),
481+
_this.utils.arrayToClassname([
482+
_this.classes.group,
483+
elm.groupDisabled ? 'disabled' : '',
484+
elm.element.prop('class')
485+
]),
464486
_this.classes.grouplabel,
465487
elm.element.prop('label')
466488
);
@@ -494,11 +516,12 @@
494516

495517
return _this.utils.format('<li data-index="{1}" class="{2}">{3}</li>',
496518
i,
497-
$.trim([
519+
_this.utils.arrayToClassname([
520+
elm.className,
498521
i === _this.items.length - 1 ? 'last' : '',
499522
elm.disabled ? 'disabled' : '',
500523
elm.selected ? 'selected' : ''
501-
].join(' ')),
524+
]),
502525
$.isFunction(itemBuilder) ? itemBuilder(elm, elm.element, i) : _this.utils.format(itemBuilder, elm)
503526
);
504527
},

‎test/basic.spec.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,4 +197,8 @@ describe('basic suite', function() {
197197
$('label').click();
198198
expect($('.selectric-wrapper').hasClass('selectric-open')).toBe(true);
199199
});
200+
201+
it('should inherit option tag class', function() {
202+
expect(select.find('.customOptionClass').length).toBe(1);
203+
});
200204
});

‎test/fixtures/basic.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<option value="loooooooooooooong-option">Loooooooooooooong option</option>
55
<option value="apple">Apple</option>
66
<option selected value="apricot">Apricot</option>
7-
<option value="banana">Banana</option>
7+
<option class="customOptionClass" value="banana">Banana</option>
88
<option value="bilberry">Bilberry</option>
99
<option value="blackberry">Blackberry</option>
1010
<option value="blackcurrant">Blackcurrant</option>

0 commit comments

Comments
 (0)