Issues (8)

src/js/tipit.js (7 issues)

1
/**
2
 * ##### 110110011000011011011000101101011101100010110001001000001101100110000101110110011000011000100000110110001010011111011001100001001101100110000100110110011000011100100000110110011000100000100000110110011000000111011000101010101101100010101101001000001101100110000010110110001011000111011011100011001101100010101000
3
 *
4
 * @name tipIt
5
 * @description Easy-to-use tooltip system
6
 *
7
 * @author Reiha Hosseini ( @mrReiha )
8
 * @version v0.1.5
9
 * @since 2015/01
10
 *
11
 * @dependency jQuery
12
 *
13
 * @license GPL
14
 */
15
;!( function( w, d ) {
16
17
	// :D
18
	'use strict';
19
20
	var makeTipit = function( target ) {
21
22
			var showTipit = function( e ) {
0 ignored issues
show
The parameter e is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
23
24
					var placementIndex = placements.indexOf( $target.attr( 'data-tipit-placement' ) ),
25
						placement = placementIndex >= 0 ? placements[ placementIndex ] : placements[ 0 ],
26
27
						// 'tipit' LM now has the same content as value of 'data-tipit-content' attribute then fill the variable **content** with it
28
						content = $tipit.html( $target.attr( 'data-tipit-content' ) ) && $tipit.html(),
29
30
						extraClassName = $target.attr( 'data-tipit-class' ),
31
32
						offset = $target.offset(),
33
34
						width = $target.outerWidth( false ),
35
						height = $target.outerHeight( false ),
36
37
						tipitWidth = $tipit.outerWidth( false ),
38
						tipitHeight = $tipit.outerHeight( false ),
39
40
						horiz = [ 'left', 'right' ].indexOf( placement ) >= 0,
41
						far = [ 'right', 'bottom' ].indexOf( placement ) >= 0,
42
43
						pos = {
44
45
							left: horiz ?
46
									( far ? offset.left + width + BORDER_WIDTH : offset.left - tipitWidth - BORDER_WIDTH ) :
47
									( offset.left + ( width / 2 ) - ( tipitWidth / 2 ) ),
48
49
							top: horiz ?
50
									( offset.top + ( height / 2 ) - ( tipitHeight / 2 ) ) :
51
									( far ? offset.top + height + BORDER_WIDTH : offset.top - tipitHeight - BORDER_WIDTH  )
52
53
						};
54
55
					if ( $tipit.data( 'timeout.id' ) )
56
						clearTimeout( $tipit.data( 'timeout.id' ) );
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
57
58
					if ( !content )
59
						return false;
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
60
61
					$tipit.addClass( 'fx ' + placement + ( extraClassName ? ' ' + extraClassName : '' ) );
62
63
					$tipit.css({
64
65
						left: pos.left.toFixed( 2 ) + 'px',
66
						top: pos.top.toFixed( 2 ) + 'px'
67
68
					});
0 ignored issues
show
There is no return statement in this branch, but you do return something in other branches. Did you maybe miss it? If you do not want to return anything, consider adding return undefined; explicitly.
Loading history...
69
70
				},
71
72
				hideTipit = function( e ) {
0 ignored issues
show
The parameter e is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
73
74
					$tipit.removeClass( 'fx' );
75
76
				},
77
78
				hideTipitFn = function( e ) {
0 ignored issues
show
The parameter e is not used and could be removed.

This check looks for parameters in functions that are not used in the function body and are not followed by other parameters which are used inside the function.

Loading history...
79
80
					var id = setTimeout( hideTipit, 150 );
81
82
					$tipit.data( 'timeout.id', id );
83
84
				},
85
86
				// We should append it as soon as we can, to make getting 'tipit's width possible
87
				tipit = $( 'body' )[ 0 ].appendChild( d.createElement( 'div' ) ),
88
89
				// Also we need to apply styles on it to returns the correct width
90
				$tipit = $( tipit ).addClass( 'tipit' ),
91
92
				$target = $( target );
93
94
			$( [ target, tipit ] ).on( 'mouseout', hideTipitFn ).on( 'mouseover', showTipit );
95
96
			target.showTipit = showTipit;
97
			target.hideTipit = hideTipit;
98
99
		},
100
101
		placements = [ 'left', 'right', 'top', 'bottom' ],
102
103
		// @Const Value of our border's pixels needed
104
		BORDER_WIDTH = 15;
105
106
	$( d ).ready( function() {
107
108
		var tipits = $( '[data-tipit-content]' ),
109
			tipitsLength = tipits.length,
110
111
			i = 0;
112
113
		for ( ; i < tipitsLength; i++ )
114
			makeTipit( tipits[ i ] );
0 ignored issues
show
Coding Style Best Practice introduced by
Curly braces around statements make for more readable code and help prevent bugs when you add further statements.

Consider adding curly braces around all statements when they are executed conditionally. This is optional if there is only one statement, but leaving them out can lead to unexpected behaviour if another statement is added later.

Consider:

if (a > 0)
    b = 42;

If you or someone else later decides to put another statement in, only the first statement will be executed.

if (a > 0)
    console.log("a > 0");
    b = 42;

In this case the statement b = 42 will always be executed, while the logging statement will be executed conditionally.

if (a > 0) {
    console.log("a > 0");
    b = 42;
}

ensures that the proper code will be executed conditionally no matter how many statements are added or removed.

Loading history...
115
116
		$.fn.tipit = function() {
117
118
			this.each( function() {
119
120
				makeTipit( this );
121
122
			});
123
124
		}
125
126
	});
127
128
})( this, document );
129