Skip to content

Commit 5f8a1e2

Browse files
carloscabocarloscabo
committed
Refactoring jQuery plugin
1 parent 97c528e commit 5f8a1e2

1 file changed

Lines changed: 108 additions & 96 deletions

File tree

‎js/jquery.autohide.js‎

Lines changed: 108 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -13,122 +13,134 @@ $('.element-to-hide-show').autohide_timeout({
1313
});
1414
*/
1515

16-
(function ($) {
17-
18-
function Constructor( el, options ) {
19-
var
20-
that = this,
21-
DEBUG = false,
22-
23-
// Default options
24-
def = {
25-
$el: $(el),
26-
$source: null,
27-
$target: null,
28-
events: 'click', // Will be renamed to click.ahto on init
29-
30-
timeout: 1500,
31-
onEvents: null,
32-
onTimeout: null,
33-
34-
// Internal methods
35-
fn: {
36-
37-
// Evaluates if target is a proper element or is a functions thst must be executed
38-
getTarget: function( el ) {
39-
var
40-
$el_source = $(el),
41-
$target = null;
42-
if (typeof this.$target === 'function') {
43-
$target = this.$target( $el_source );
44-
} else {
45-
$target = this.$target;
46-
}
47-
return $target;
48-
}
49-
}
50-
};
51-
52-
53-
// Default settings
54-
$.extend( def, options );
55-
56-
// If there are no $source elements in options
57-
// the source of events is the element itself
58-
if ( typeof def.$source === 'function' ) {
59-
def.$source = def.$source( def.$el );
60-
} else if ( def.$source === null) {
61-
def.$source = def.$el;
62-
}
63-
64-
// If there isn't a custum onTimeout functionallity
65-
// whe hide the target element by default.
66-
if ( def.onTimeout === null ) {
67-
def.onTimeout = function( el ) {
68-
clearTimeout(def.$el[0].timeout_obj);
69-
( def.fn.getTarget.call( this, el ) ).hide();
70-
}
71-
}
16+
;( function ( $, window, document, undefined ) {
17+
18+
"use strict";
19+
20+
// Create the defaults once
21+
var
22+
plugin_name = "autohide_timeout",
23+
defaults = {
24+
$el: null,
25+
$source: null,
26+
$target: null,
27+
events: 'click', // Will be renamed to click.ahto on init
28+
29+
timeout: 1500,
30+
onEvents: null,
31+
onTimeout: null
32+
};
33+
34+
// Constructor
35+
function Ahto( el, options ) {
36+
this.$el = $(el);
37+
this.settings = $.extend( {}, defaults, options );
38+
this._defaults = defaults;
39+
this._name = plugin_name;
40+
this.init();
41+
}
42+
43+
// Default settings
44+
$.extend( Ahto.prototype, {
45+
init: function() {
7246

73-
// We subfix the events with namespace ahto
74-
def.events = def.events.replace(/\b(\w)+\b/gim, '$&.ahto');
47+
var
48+
_t = this;
7549

76-
// If there is no custom functionallity we show
77-
// the target element by default
78-
if (def.onEvents === null) {
79-
def.onEvents = function( el ) {
80-
/* debugger; */
81-
( def.fn.getTarget.call( this, el ) ).show();
82-
}
83-
}
50+
// We subfix the events with namespace ahto
51+
_t.settings.events = _t.settings.events.replace(/\b(\w)+\b/gim, '$&.'+_t._name);
8452

85-
// Events in the source elements
86-
def.$source.on( def.events, function( e ) {
87-
clearTimeout(def.$el[0].timeout_obj);
53+
// If there are no $source elements in options
54+
// the source of events is the element itself
55+
if ( typeof _t.settings.$source === 'function' ) {
56+
_t.settings.$source = _t.settings.$source( _t.$el );
57+
} else if ( _t.settings.$source === null) {
58+
_t.settings.$source = _t.$el;
59+
}
8860

89-
var
90-
source_e = e,
91-
$el_source = $(e.target),
92-
$target = def.fn.getTarget.call( def, $el_source );
61+
// If there isn't a custum onTimeout functionallity
62+
// whe hide the target element by default.
63+
if ( _t.settings.onTimeout === null ) {
64+
_t.settings.onTimeout = function( el ) {
65+
( _t.getTarget( el ) ).hide();
66+
clearTimeout(_t.$el[0].timeout_obj);
67+
}
68+
}
9369

9470
// If there is no custom functionallity we show
9571
// the target element by default
96-
def.onEvents( $el_source, $target, source_e );
97-
98-
$target.off('mouseenter.ahto').on('mouseenter.ahto', function(e){
99-
clearTimeout(def.$el[0].timeout_obj);
100-
}).off('mouseleave.ahto').on('mouseleave.ahto', function(e){
101-
def.$el[0].timeout_obj = setTimeout(function(){
102-
clearTimeout(def.$el[0].timeout_obj);
103-
def.onTimeout( $el_source, $target, source_e);
104-
}, def.timeout);
72+
if ( _t.settings.onEvents === null) {
73+
_t.settings.onEvents = function( el ) {
74+
( _t.getTarget( el ) ).show();
75+
}
76+
}
77+
78+
// Attaching events
79+
// Events in the source elements
80+
_t.settings.$source.on( _t.settings.events, function( e ) {
81+
clearTimeout(_t.$el[0].timeout_obj);
82+
83+
var
84+
source_e = e,
85+
$el_source = $(e.target),
86+
$target = _t.getTarget( $el_source );
87+
88+
// If there is no custom functionallity we show
89+
// the target element by default
90+
_t.settings.onEvents( $el_source, $target, source_e );
91+
92+
$target.off('mouseenter.'+_t._name).on('mouseenter.'+_t._name, function(e){
93+
clearTimeout(_t.$el[0].timeout_obj);
94+
}).off('mouseleave.'+_t._name).on('mouseleave.'+_t._name, function(e){
95+
_t.$el[0].timeout_obj = setTimeout( function(){
96+
clearTimeout( _t.$el[0].timeout_obj );
97+
_t.settings.onTimeout( $el_source, $target, source_e);
98+
}, _t.settings.timeout);
99+
});
100+
101+
}).on( 'mouseleave.'+_t._name, function( e ) {
102+
103+
var
104+
source_e = e,
105+
$el_source = $(e.target),
106+
$target = _t.getTarget.call( _t, $el_source );
107+
108+
_t.$el[0].timeout_obj = setTimeout(function(){
109+
clearTimeout( _t.$el[0].timeout_obj );
110+
_t.settings.onTimeout( $el_source, $target, source_e );
111+
}, _t.settings.timeout);
112+
105113
});
106114

107-
}).on( 'mouseleave.ahto', function( e ) {
115+
}, // init
108116

117+
getTarget: function( el ) {
109118
var
110-
source_e = e,
111-
$el_source = $(e.target),
112-
$target = def.fn.getTarget.call( def, $el_source );
119+
$el_source = $(el),
120+
$target = null;
121+
if (typeof this.settings.$target === 'function') {
122+
$target = this.settings.$target( $el_source );
123+
} else {
124+
$target = this.settings.$target;
125+
}
126+
return $target;
127+
}, // getTarget
113128

114-
def.$el[0].timeout_obj = setTimeout(function(){
115-
clearTimeout(def.$el[0].timeout_obj);
116-
def.onTimeout( $el_source, $target, source_e );
117-
}, def.timeout);
129+
close: function() {
118130

119-
});
131+
} // close
120132

121-
};
133+
} );
122134

123135
// JQuery hook
124-
$.fn.autohide_timeout = function (options) {
136+
$.fn[ plugin_name ] = function (options) {
125137
return this.each(function () {
126138
var $this = $(this);
127-
if (!$this.data('autohide_timeout')) {
128-
$this.data('autohide_timeout', new Constructor(this, options));
139+
if (!$this.data('plugin_'+ plugin_name )) {
140+
$this.data('plugin_'+ plugin_name, new Ahto( this, options ));
129141
}
130142
});
131143
};
132144

133145

134-
} (jQuery));
146+
} )( jQuery, window, document );

0 commit comments

Comments
 (0)