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
|
|||
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
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 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. ![]() |
|||
57 | |||
58 | if ( !content ) |
||
59 | return false; |
||
0 ignored issues
–
show
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 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. ![]() |
|||
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
|
|||
69 | |||
70 | }, |
||
71 | |||
72 | hideTipit = function( e ) { |
||
0 ignored issues
–
show
|
|||
73 | |||
74 | $tipit.removeClass( 'fx' ); |
||
75 | |||
76 | }, |
||
77 | |||
78 | hideTipitFn = function( e ) { |
||
0 ignored issues
–
show
|
|||
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
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 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. ![]() |
|||
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 |
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.