Skip to content

Commit 22f5192

Browse files
lcdsantoslcdsantos
committed
Fix #42, fix #43, fix #45, fix #46, fix #47, added Hooks support, added onBeforeChange option and event
1 parent 4d66adb commit 22f5192

10 files changed

+312
-205
lines changed

‎README.md

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,12 @@ $(function(){
260260
<td>Function</td>
261261
<td>Function called after select options closes</td>
262262
</tr>
263+
<tr>
264+
<td>onBeforeChange</td>
265+
<td>function(element) {}</td>
266+
<td>Function</td>
267+
<td>Function called before select options change</td>
268+
</tr>
263269
<tr>
264270
<td>onChange</td>
265271
<td>function(element) {
@@ -351,12 +357,12 @@ $(function(){
351357
</tr>
352358
</table>
353359

354-
##Events
360+
##Events:
355361

356362
All events are called on original element, first argument is the original element too. And can be bound like this:
357363

358364
```js
359-
$('select').on('selectric-eventname', function(element){
365+
$('select').on('eventname', function(element){
360366
// your code
361367
});
362368
```
@@ -368,48 +374,57 @@ $('select').on('selectric-eventname', function(element){
368374
<td><strong>Event name</strong></td>
369375
<td><strong>Description</strong></td>
370376
</tr>
371-
372377
<tr>
373378
<td><code>selectric-before-init</code></td>
374379
<td>Fired before plugin initialize</td>
375380
</tr>
376-
377381
<tr>
378382
<td><code>selectric-init</code></td>
379383
<td>Fired plugin has been fully initialized</td>
380384
</tr>
381-
382385
<tr>
383386
<td><code>selectric-before-open</code></td>
384387
<td>Fired before select options opens</td>
385388
</tr>
386-
387389
<tr>
388390
<td><code>selectric-open</code></td>
389391
<td>Fired after select options opens</td>
390392
</tr>
391-
392393
<tr>
393394
<td><code>selectric-before-close</code></td>
394395
<td>Fired before select options closes</td>
395396
</tr>
396-
397397
<tr>
398398
<td><code>selectric-close</code></td>
399399
<td>Fired after select options closes</td>
400400
</tr>
401-
401+
<tr>
402+
<td><code>selectric-before-change</code></td>
403+
<td>Fired before select options change</td>
404+
</tr>
402405
<tr>
403406
<td><code>selectric-change</code></td>
404407
<td>Fired when select options change</td>
405408
</tr>
406-
407409
<tr>
408410
<td><code>selectric-refresh</code></td>
409411
<td>Fired when the Selectric is refreshed</td>
410412
</tr>
411413
</table>
412414

415+
##Hooks:
416+
417+
Check [jquery.selectric.placeholder.js](plugins/jquery.selectric.placeholder.js) source for a usage example
418+
419+
```js
420+
// Add a callback everytime '<i>callbackName</i>' is called
421+
$.fn.selectric.hooks.add('<i>callbackName</i>', '<i>hookName</i>', function(element, data) {});
422+
423+
// Remove a callback
424+
$.fn.selectric.hooks.remove('<i>callbackName</i>', '<i>hookName</i>');
425+
```
426+
427+
413428
##Public methods:
414429

415430
```js

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "jquery-selectric",
33
"description": "Fast, simple and light jQuery plugin to customize HTML selects",
4-
"version": "1.8.1",
4+
"version": "1.8.2",
55
"keywords": [
66
"select",
77
"selectbox",

‎dist/jquery.selectric.js

Lines changed: 55 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
* /,'
1010
* /'
1111
*
12-
* Selectric Ϟ v1.8.1 (2014-09-01) - http://lcdsantos.github.io/jQuery-Selectric/
12+
* Selectric Ϟ v1.8.2 (2014-09-22) - http://lcdsantos.github.io/jQuery-Selectric/
1313
*
1414
* Copyright (c) 2014 Leonardo Santos; Dual licensed: MIT/GPL
1515
*
1616
*/
1717

18-
;(function ($) {
18+
;(function($) {
1919
'use strict';
2020

2121
var pluginName = 'selectric',
@@ -39,6 +39,17 @@
3939
},
4040
optionsItemBuilder: '{text}' // function(itemData, element, index)
4141
},
42+
hooks = {
43+
add: function(callbackName, hookName, fn) {
44+
if ( !this[callbackName] )
45+
this[callbackName] = {};
46+
47+
this[callbackName][hookName] = fn;
48+
},
49+
remove: function(callbackName, hookName) {
50+
delete this[callbackName][hookName];
51+
}
52+
},
4253
_utils = {
4354
// Replace diacritics
4455
replaceDiacritics: function(s) {
@@ -68,17 +79,23 @@
6879
while ( selectItems[ selected = (selected > 0 ? selected : selectItems.length) - 1 ].disabled ){}
6980
return selected;
7081
},
71-
toDash: function(str){
82+
toDash: function(str) {
7283
return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
7384
},
74-
triggerCallback: function(fn, scope){
85+
triggerCallback: function(fn, scope) {
7586
var elm = scope.element,
7687
func = scope.options['on' + fn];
7788

7889
if ( $.isFunction(func) )
79-
func.call(elm, elm);
90+
func.call(elm, elm, scope);
8091

81-
$(elm).trigger(pluginName + '-' + _utils.toDash(fn));
92+
if ( hooks[fn] ){
93+
$.each(hooks[fn], function(){
94+
this.call(elm, elm, scope);
95+
});
96+
}
97+
98+
$(elm).trigger(pluginName + '-' + _utils.toDash(fn), scope);
8299
}
83100
},
84101
$doc = $(document),
@@ -102,7 +119,7 @@
102119
function _init(opts) {
103120
_this.options = $.extend(true, {}, defaults, _this.options, opts);
104121
_this.classes = {};
105-
_this.element = element,
122+
_this.element = element;
106123

107124
_utils.triggerCallback('BeforeInit', _this);
108125

@@ -187,13 +204,13 @@
187204
$label.html(_this.items[currValue].text);
188205
}
189206

190-
$wrapper.add($original).off(bindSufix);
207+
$wrapper.add($original, $outerWrapper, $input).off(bindSufix);
191208

192209
$outerWrapper.prop('class', [_this.classes.wrapper, $original.prop('class').replace(/\S+/g, pluginName + '-$&'), _this.options.responsive ? _this.classes.responsive : ''].join(' '));
193210

194211
if ( !$original.prop('disabled') ){
195212
// Not disabled, so... Removing disabled class and bind hover
196-
$outerWrapper.removeClass(_this.classes.disabled).hover(function(){
213+
$outerWrapper.removeClass(_this.classes.disabled).on('mouseenter' + bindSufix + ' mouseleave' + bindSufix, function(){
197214
$(this).toggleClass(_this.classes.hover);
198215
});
199216

@@ -205,12 +222,13 @@
205222
isOpen ? _close() : _open(e);
206223
});
207224

208-
$input.prop({
209-
tabindex: tabindex,
210-
disabled: false
211-
}).off().on({
212-
keypress: _handleSystemKeys,
213-
keydown: function(e){
225+
$input
226+
.prop({
227+
tabindex: tabindex,
228+
disabled: false
229+
})
230+
.on('keypress' + bindSufix, _handleSystemKeys)
231+
.on('keydown' + bindSufix, function(e){
214232
_handleSystemKeys(e);
215233

216234
// Clear search
@@ -228,27 +246,27 @@
228246
// 40 => Down
229247
if ( key > 36 && key < 41 )
230248
_select(_utils[(key < 39 ? 'previous' : 'next') + 'EnabledItem'](_this.items, selected));
231-
},
232-
focusin: function(e){
249+
})
250+
.on('focusin' + bindSufix, function(e){
233251
// Stupid, but necessary... Prevent the flicker when
234252
// focusing out and back again in the browser window
235253
$input.one('blur', function(){
236254
$input.blur();
237255
});
238256

239257
isOpen || _open(e);
240-
}
241-
}).on('oninput' in $input[0] ? 'input' : 'keyup', function(){
242-
if ( $input.val().length ){
243-
// Search in select options
244-
$.each(_this.items, function(i, elm){
245-
if ( RegExp('^' + $input.val(), 'i').test(elm.slug) && !elm.disabled ){
246-
_select(i);
247-
return false;
248-
}
249-
});
250-
}
251-
});
258+
})
259+
.on('oninput' in $input[0] ? 'input' : 'keyup', function(){
260+
if ( $input.val().length ){
261+
// Search in select options
262+
$.each(_this.items, function(i, elm){
263+
if ( RegExp('^' + $input.val(), 'i').test(elm.slug) && !elm.disabled ){
264+
_select(i);
265+
return false;
266+
}
267+
});
268+
}
269+
});
252270

253271
$original.prop('tabindex', false);
254272

@@ -387,21 +405,23 @@
387405
}
388406

389407
// Close the select options box
390-
function _close(e) {
408+
function _close() {
391409
_utils.triggerCallback('BeforeClose', _this);
392410

393-
if ( !e && currValue != selected ){
411+
if ( currValue != selected ){
412+
_utils.triggerCallback('BeforeChange', _this);
413+
394414
var text = _this.items[selected].text;
395415

396416
// Apply changed value to original select
397417
$original
398418
.prop('selectedIndex', currValue = selected)
399419
.data('value', text);
400420

401-
_utils.triggerCallback('Change', _this);
402-
403421
// Change label text
404422
$label.html(text);
423+
424+
_utils.triggerCallback('Change', _this);
405425
}
406426

407427
// Remove custom events on document
@@ -466,4 +486,6 @@
466486
$.data(this, pluginName, new Selectric(this, args));
467487
});
468488
};
489+
490+
$.fn[pluginName].hooks = hooks;
469491
}(jQuery));

0 commit comments

Comments
 (0)