tiptip-rails 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitignore +2 -0
- data/Gemfile +2 -0
- data/README.md +26 -0
- data/app/assets/javascripts/tipTip.js +191 -0
- data/app/assets/stylesheets/tipTip.css +113 -0
- data/lib/tiptip-rails.rb +2 -0
- data/lib/tiptip/rails.rb +6 -0
- data/lib/tiptip/version.rb +3 -0
- data/tiptip-rails.gemspec +21 -0
- metadata +118 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/README.md
ADDED
@@ -0,0 +1,26 @@
|
|
1
|
+
# tiptip-rails
|
2
|
+
This gem just includes [TipTip jQuery plug-in](https://github.com/drewwilson/TipTip) as an asset in the Rails 3.1 (or newer) asset pipeline.
|
3
|
+
|
4
|
+
The current version in the gem is TipTip 1.3
|
5
|
+
|
6
|
+
## Installation
|
7
|
+
|
8
|
+
Add the gem to the Gemfile
|
9
|
+
|
10
|
+
gem "tiptip-rails", "~> 1.0.0"
|
11
|
+
|
12
|
+
## Usage
|
13
|
+
|
14
|
+
In your JavaScript manifest (e.g. `application.js`)
|
15
|
+
|
16
|
+
//= require tipTip
|
17
|
+
|
18
|
+
In your Stylesheet manifest (e.g. `application.css`)
|
19
|
+
|
20
|
+
*= require tipTip
|
21
|
+
|
22
|
+
## Licensing
|
23
|
+
|
24
|
+
TipTip, which makes up the majority of this gem, has [its own licensing](https://github.com/drewwilson/TipTip).
|
25
|
+
|
26
|
+
The gem itself is released under the MIT license
|
@@ -0,0 +1,191 @@
|
|
1
|
+
/*
|
2
|
+
* TipTip
|
3
|
+
* Copyright 2010 Drew Wilson
|
4
|
+
* www.drewwilson.com
|
5
|
+
* code.drewwilson.com/entry/tiptip-jquery-plugin
|
6
|
+
*
|
7
|
+
* Version 1.3 - Updated: Mar. 23, 2010
|
8
|
+
*
|
9
|
+
* This Plug-In will create a custom tooltip to replace the default
|
10
|
+
* browser tooltip. It is extremely lightweight and very smart in
|
11
|
+
* that it detects the edges of the browser window and will make sure
|
12
|
+
* the tooltip stays within the current window size. As a result the
|
13
|
+
* tooltip will adjust itself to be displayed above, below, to the left
|
14
|
+
* or to the right depending on what is necessary to stay within the
|
15
|
+
* browser window. It is completely customizable as well via CSS.
|
16
|
+
*
|
17
|
+
* This TipTip jQuery plug-in is dual licensed under the MIT and GPL licenses:
|
18
|
+
* http://www.opensource.org/licenses/mit-license.php
|
19
|
+
* http://www.gnu.org/licenses/gpl.html
|
20
|
+
*/
|
21
|
+
|
22
|
+
(function($){
|
23
|
+
$.fn.tipTip = function(options) {
|
24
|
+
var defaults = {
|
25
|
+
activation: "hover",
|
26
|
+
keepAlive: false,
|
27
|
+
maxWidth: "200px",
|
28
|
+
edgeOffset: 3,
|
29
|
+
defaultPosition: "bottom",
|
30
|
+
delay: 400,
|
31
|
+
fadeIn: 200,
|
32
|
+
fadeOut: 200,
|
33
|
+
attribute: "title",
|
34
|
+
content: false, // HTML or String to fill TipTIp with
|
35
|
+
enter: function(){},
|
36
|
+
exit: function(){}
|
37
|
+
};
|
38
|
+
var opts = $.extend(defaults, options);
|
39
|
+
|
40
|
+
// Setup tip tip elements and render them to the DOM
|
41
|
+
if($("#tiptip_holder").length <= 0){
|
42
|
+
var tiptip_holder = $('<div id="tiptip_holder" style="max-width:'+ opts.maxWidth +';"></div>');
|
43
|
+
var tiptip_content = $('<div id="tiptip_content"></div>');
|
44
|
+
var tiptip_arrow = $('<div id="tiptip_arrow"></div>');
|
45
|
+
$("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')));
|
46
|
+
} else {
|
47
|
+
var tiptip_holder = $("#tiptip_holder");
|
48
|
+
var tiptip_content = $("#tiptip_content");
|
49
|
+
var tiptip_arrow = $("#tiptip_arrow");
|
50
|
+
}
|
51
|
+
|
52
|
+
return this.each(function(){
|
53
|
+
var org_elem = $(this);
|
54
|
+
if(opts.content){
|
55
|
+
var org_title = opts.content;
|
56
|
+
} else {
|
57
|
+
var org_title = org_elem.attr(opts.attribute);
|
58
|
+
}
|
59
|
+
if(org_title != ""){
|
60
|
+
if(!opts.content){
|
61
|
+
org_elem.removeAttr(opts.attribute); //remove original Attribute
|
62
|
+
}
|
63
|
+
var timeout = false;
|
64
|
+
|
65
|
+
if(opts.activation == "hover"){
|
66
|
+
org_elem.hover(function(){
|
67
|
+
active_tiptip();
|
68
|
+
}, function(){
|
69
|
+
if(!opts.keepAlive){
|
70
|
+
deactive_tiptip();
|
71
|
+
}
|
72
|
+
});
|
73
|
+
if(opts.keepAlive){
|
74
|
+
tiptip_holder.hover(function(){}, function(){
|
75
|
+
deactive_tiptip();
|
76
|
+
});
|
77
|
+
}
|
78
|
+
} else if(opts.activation == "focus"){
|
79
|
+
org_elem.focus(function(){
|
80
|
+
active_tiptip();
|
81
|
+
}).blur(function(){
|
82
|
+
deactive_tiptip();
|
83
|
+
});
|
84
|
+
} else if(opts.activation == "click"){
|
85
|
+
org_elem.click(function(){
|
86
|
+
active_tiptip();
|
87
|
+
return false;
|
88
|
+
}).hover(function(){},function(){
|
89
|
+
if(!opts.keepAlive){
|
90
|
+
deactive_tiptip();
|
91
|
+
}
|
92
|
+
});
|
93
|
+
if(opts.keepAlive){
|
94
|
+
tiptip_holder.hover(function(){}, function(){
|
95
|
+
deactive_tiptip();
|
96
|
+
});
|
97
|
+
}
|
98
|
+
}
|
99
|
+
|
100
|
+
function active_tiptip(){
|
101
|
+
opts.enter.call(this);
|
102
|
+
tiptip_content.html(org_title);
|
103
|
+
tiptip_holder.hide().removeAttr("class").css("margin","0");
|
104
|
+
tiptip_arrow.removeAttr("style");
|
105
|
+
|
106
|
+
var top = parseInt(org_elem.offset()['top']);
|
107
|
+
var left = parseInt(org_elem.offset()['left']);
|
108
|
+
var org_width = parseInt(org_elem.outerWidth());
|
109
|
+
var org_height = parseInt(org_elem.outerHeight());
|
110
|
+
var tip_w = tiptip_holder.outerWidth();
|
111
|
+
var tip_h = tiptip_holder.outerHeight();
|
112
|
+
var w_compare = Math.round((org_width - tip_w) / 2);
|
113
|
+
var h_compare = Math.round((org_height - tip_h) / 2);
|
114
|
+
var marg_left = Math.round(left + w_compare);
|
115
|
+
var marg_top = Math.round(top + org_height + opts.edgeOffset);
|
116
|
+
var t_class = "";
|
117
|
+
var arrow_top = "";
|
118
|
+
var arrow_left = Math.round(tip_w - 12) / 2;
|
119
|
+
|
120
|
+
if(opts.defaultPosition == "bottom"){
|
121
|
+
t_class = "_bottom";
|
122
|
+
} else if(opts.defaultPosition == "top"){
|
123
|
+
t_class = "_top";
|
124
|
+
} else if(opts.defaultPosition == "left"){
|
125
|
+
t_class = "_left";
|
126
|
+
} else if(opts.defaultPosition == "right"){
|
127
|
+
t_class = "_right";
|
128
|
+
}
|
129
|
+
|
130
|
+
var right_compare = (w_compare + left) < parseInt($(window).scrollLeft());
|
131
|
+
var left_compare = (tip_w + left) > parseInt($(window).width());
|
132
|
+
|
133
|
+
if((right_compare && w_compare < 0) || (t_class == "_right" && !left_compare) || (t_class == "_left" && left < (tip_w + opts.edgeOffset + 5))){
|
134
|
+
t_class = "_right";
|
135
|
+
arrow_top = Math.round(tip_h - 13) / 2;
|
136
|
+
arrow_left = -12;
|
137
|
+
marg_left = Math.round(left + org_width + opts.edgeOffset);
|
138
|
+
marg_top = Math.round(top + h_compare);
|
139
|
+
} else if((left_compare && w_compare < 0) || (t_class == "_left" && !right_compare)){
|
140
|
+
t_class = "_left";
|
141
|
+
arrow_top = Math.round(tip_h - 13) / 2;
|
142
|
+
arrow_left = Math.round(tip_w);
|
143
|
+
marg_left = Math.round(left - (tip_w + opts.edgeOffset + 5));
|
144
|
+
marg_top = Math.round(top + h_compare);
|
145
|
+
}
|
146
|
+
|
147
|
+
var top_compare = (top + org_height + opts.edgeOffset + tip_h + 8) > parseInt($(window).height() + $(window).scrollTop());
|
148
|
+
var bottom_compare = ((top + org_height) - (opts.edgeOffset + tip_h + 8)) < 0;
|
149
|
+
|
150
|
+
if(top_compare || (t_class == "_bottom" && top_compare) || (t_class == "_top" && !bottom_compare)){
|
151
|
+
if(t_class == "_top" || t_class == "_bottom"){
|
152
|
+
t_class = "_top";
|
153
|
+
} else {
|
154
|
+
t_class = t_class+"_top";
|
155
|
+
}
|
156
|
+
arrow_top = tip_h;
|
157
|
+
marg_top = Math.round(top - (tip_h + 5 + opts.edgeOffset));
|
158
|
+
} else if(bottom_compare | (t_class == "_top" && bottom_compare) || (t_class == "_bottom" && !top_compare)){
|
159
|
+
if(t_class == "_top" || t_class == "_bottom"){
|
160
|
+
t_class = "_bottom";
|
161
|
+
} else {
|
162
|
+
t_class = t_class+"_bottom";
|
163
|
+
}
|
164
|
+
arrow_top = -12;
|
165
|
+
marg_top = Math.round(top + org_height + opts.edgeOffset);
|
166
|
+
}
|
167
|
+
|
168
|
+
if(t_class == "_right_top" || t_class == "_left_top"){
|
169
|
+
marg_top = marg_top + 5;
|
170
|
+
} else if(t_class == "_right_bottom" || t_class == "_left_bottom"){
|
171
|
+
marg_top = marg_top - 5;
|
172
|
+
}
|
173
|
+
if(t_class == "_left_top" || t_class == "_left_bottom"){
|
174
|
+
marg_left = marg_left + 5;
|
175
|
+
}
|
176
|
+
tiptip_arrow.css({"margin-left": arrow_left+"px", "margin-top": arrow_top+"px"});
|
177
|
+
tiptip_holder.css({"margin-left": marg_left+"px", "margin-top": marg_top+"px"}).attr("class","tip"+t_class);
|
178
|
+
|
179
|
+
if (timeout){ clearTimeout(timeout); }
|
180
|
+
timeout = setTimeout(function(){ tiptip_holder.stop(true,true).fadeIn(opts.fadeIn); }, opts.delay);
|
181
|
+
}
|
182
|
+
|
183
|
+
function deactive_tiptip(){
|
184
|
+
opts.exit.call(this);
|
185
|
+
if (timeout){ clearTimeout(timeout); }
|
186
|
+
tiptip_holder.fadeOut(opts.fadeOut);
|
187
|
+
}
|
188
|
+
}
|
189
|
+
});
|
190
|
+
}
|
191
|
+
})(jQuery);
|
@@ -0,0 +1,113 @@
|
|
1
|
+
/* TipTip CSS - Version 1.2 */
|
2
|
+
|
3
|
+
#tiptip_holder {
|
4
|
+
display: none;
|
5
|
+
position: absolute;
|
6
|
+
top: 0;
|
7
|
+
left: 0;
|
8
|
+
z-index: 99999;
|
9
|
+
}
|
10
|
+
|
11
|
+
#tiptip_holder.tip_top {
|
12
|
+
padding-bottom: 5px;
|
13
|
+
}
|
14
|
+
|
15
|
+
#tiptip_holder.tip_bottom {
|
16
|
+
padding-top: 5px;
|
17
|
+
}
|
18
|
+
|
19
|
+
#tiptip_holder.tip_right {
|
20
|
+
padding-left: 5px;
|
21
|
+
}
|
22
|
+
|
23
|
+
#tiptip_holder.tip_left {
|
24
|
+
padding-right: 5px;
|
25
|
+
}
|
26
|
+
|
27
|
+
#tiptip_content {
|
28
|
+
font-size: 11px;
|
29
|
+
color: #fff;
|
30
|
+
text-shadow: 0 0 2px #000;
|
31
|
+
padding: 4px 8px;
|
32
|
+
border: 1px solid rgba(255,255,255,0.25);
|
33
|
+
background-color: rgb(25,25,25);
|
34
|
+
background-color: rgba(25,25,25,0.92);
|
35
|
+
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), to(#000));
|
36
|
+
border-radius: 3px;
|
37
|
+
-webkit-border-radius: 3px;
|
38
|
+
-moz-border-radius: 3px;
|
39
|
+
box-shadow: 0 0 3px #555;
|
40
|
+
-webkit-box-shadow: 0 0 3px #555;
|
41
|
+
-moz-box-shadow: 0 0 3px #555;
|
42
|
+
}
|
43
|
+
|
44
|
+
#tiptip_arrow, #tiptip_arrow_inner {
|
45
|
+
position: absolute;
|
46
|
+
border-color: transparent;
|
47
|
+
border-style: solid;
|
48
|
+
border-width: 6px;
|
49
|
+
height: 0;
|
50
|
+
width: 0;
|
51
|
+
}
|
52
|
+
|
53
|
+
#tiptip_holder.tip_top #tiptip_arrow {
|
54
|
+
border-top-color: #fff;
|
55
|
+
border-top-color: rgba(255,255,255,0.35);
|
56
|
+
}
|
57
|
+
|
58
|
+
#tiptip_holder.tip_bottom #tiptip_arrow {
|
59
|
+
border-bottom-color: #fff;
|
60
|
+
border-bottom-color: rgba(255,255,255,0.35);
|
61
|
+
}
|
62
|
+
|
63
|
+
#tiptip_holder.tip_right #tiptip_arrow {
|
64
|
+
border-right-color: #fff;
|
65
|
+
border-right-color: rgba(255,255,255,0.35);
|
66
|
+
}
|
67
|
+
|
68
|
+
#tiptip_holder.tip_left #tiptip_arrow {
|
69
|
+
border-left-color: #fff;
|
70
|
+
border-left-color: rgba(255,255,255,0.35);
|
71
|
+
}
|
72
|
+
|
73
|
+
#tiptip_holder.tip_top #tiptip_arrow_inner {
|
74
|
+
margin-top: -7px;
|
75
|
+
margin-left: -6px;
|
76
|
+
border-top-color: rgb(25,25,25);
|
77
|
+
border-top-color: rgba(25,25,25,0.92);
|
78
|
+
}
|
79
|
+
|
80
|
+
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
|
81
|
+
margin-top: -5px;
|
82
|
+
margin-left: -6px;
|
83
|
+
border-bottom-color: rgb(25,25,25);
|
84
|
+
border-bottom-color: rgba(25,25,25,0.92);
|
85
|
+
}
|
86
|
+
|
87
|
+
#tiptip_holder.tip_right #tiptip_arrow_inner {
|
88
|
+
margin-top: -6px;
|
89
|
+
margin-left: -5px;
|
90
|
+
border-right-color: rgb(25,25,25);
|
91
|
+
border-right-color: rgba(25,25,25,0.92);
|
92
|
+
}
|
93
|
+
|
94
|
+
#tiptip_holder.tip_left #tiptip_arrow_inner {
|
95
|
+
margin-top: -6px;
|
96
|
+
margin-left: -7px;
|
97
|
+
border-left-color: rgb(25,25,25);
|
98
|
+
border-left-color: rgba(25,25,25,0.92);
|
99
|
+
}
|
100
|
+
|
101
|
+
/* Webkit Hacks */
|
102
|
+
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
103
|
+
#tiptip_content {
|
104
|
+
padding: 4px 8px 5px 8px;
|
105
|
+
background-color: rgba(45,45,45,0.88);
|
106
|
+
}
|
107
|
+
#tiptip_holder.tip_bottom #tiptip_arrow_inner {
|
108
|
+
border-bottom-color: rgba(45,45,45,0.88);
|
109
|
+
}
|
110
|
+
#tiptip_holder.tip_top #tiptip_arrow_inner {
|
111
|
+
border-top-color: rgba(20,20,20,0.92);
|
112
|
+
}
|
113
|
+
}
|
data/lib/tiptip-rails.rb
ADDED
data/lib/tiptip/rails.rb
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
|
4
|
+
Gem::Specification.new do |s|
|
5
|
+
s.name = "tiptip-rails"
|
6
|
+
s.version = "1.0.0"
|
7
|
+
s.authors = ["TheDartCode"]
|
8
|
+
s.email = ["giorgos@thedartcode.com"]
|
9
|
+
s.homepage = "http://www.thedartcode.com/"
|
10
|
+
s.summary = %q{Gem for easily adding TipTip to the Rails Asset Pipeline}
|
11
|
+
s.description = %q{Gem that includes TipTip, in the Rails Asset Pipeline introduced in Rails 3.1}
|
12
|
+
|
13
|
+
s.files = `git ls-files`.split("\n")
|
14
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
15
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
16
|
+
s.require_paths = ["lib"]
|
17
|
+
|
18
|
+
s.add_dependency "railties", ">= 3.1"
|
19
|
+
s.add_development_dependency "bundler", "~> 1.0"
|
20
|
+
s.add_development_dependency "rails", ">= 3.1"
|
21
|
+
end
|
metadata
ADDED
@@ -0,0 +1,118 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: tiptip-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
hash: 23
|
5
|
+
prerelease:
|
6
|
+
segments:
|
7
|
+
- 1
|
8
|
+
- 0
|
9
|
+
- 0
|
10
|
+
version: 1.0.0
|
11
|
+
platform: ruby
|
12
|
+
authors:
|
13
|
+
- TheDartCode
|
14
|
+
autorequire:
|
15
|
+
bindir: bin
|
16
|
+
cert_chain: []
|
17
|
+
|
18
|
+
date: 2015-01-20 00:00:00 Z
|
19
|
+
dependencies:
|
20
|
+
- !ruby/object:Gem::Dependency
|
21
|
+
name: railties
|
22
|
+
prerelease: false
|
23
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
24
|
+
none: false
|
25
|
+
requirements:
|
26
|
+
- - ">="
|
27
|
+
- !ruby/object:Gem::Version
|
28
|
+
hash: 5
|
29
|
+
segments:
|
30
|
+
- 3
|
31
|
+
- 1
|
32
|
+
version: "3.1"
|
33
|
+
type: :runtime
|
34
|
+
version_requirements: *id001
|
35
|
+
- !ruby/object:Gem::Dependency
|
36
|
+
name: bundler
|
37
|
+
prerelease: false
|
38
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
39
|
+
none: false
|
40
|
+
requirements:
|
41
|
+
- - ~>
|
42
|
+
- !ruby/object:Gem::Version
|
43
|
+
hash: 15
|
44
|
+
segments:
|
45
|
+
- 1
|
46
|
+
- 0
|
47
|
+
version: "1.0"
|
48
|
+
type: :development
|
49
|
+
version_requirements: *id002
|
50
|
+
- !ruby/object:Gem::Dependency
|
51
|
+
name: rails
|
52
|
+
prerelease: false
|
53
|
+
requirement: &id003 !ruby/object:Gem::Requirement
|
54
|
+
none: false
|
55
|
+
requirements:
|
56
|
+
- - ">="
|
57
|
+
- !ruby/object:Gem::Version
|
58
|
+
hash: 5
|
59
|
+
segments:
|
60
|
+
- 3
|
61
|
+
- 1
|
62
|
+
version: "3.1"
|
63
|
+
type: :development
|
64
|
+
version_requirements: *id003
|
65
|
+
description: Gem that includes TipTip, in the Rails Asset Pipeline introduced in Rails 3.1
|
66
|
+
email:
|
67
|
+
- giorgos@thedartcode.com
|
68
|
+
executables: []
|
69
|
+
|
70
|
+
extensions: []
|
71
|
+
|
72
|
+
extra_rdoc_files: []
|
73
|
+
|
74
|
+
files:
|
75
|
+
- .gitignore
|
76
|
+
- Gemfile
|
77
|
+
- README.md
|
78
|
+
- app/assets/javascripts/tipTip.js
|
79
|
+
- app/assets/stylesheets/tipTip.css
|
80
|
+
- lib/tiptip-rails.rb
|
81
|
+
- lib/tiptip/rails.rb
|
82
|
+
- lib/tiptip/version.rb
|
83
|
+
- tiptip-rails.gemspec
|
84
|
+
homepage: http://www.thedartcode.com/
|
85
|
+
licenses: []
|
86
|
+
|
87
|
+
post_install_message:
|
88
|
+
rdoc_options: []
|
89
|
+
|
90
|
+
require_paths:
|
91
|
+
- lib
|
92
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
93
|
+
none: false
|
94
|
+
requirements:
|
95
|
+
- - ">="
|
96
|
+
- !ruby/object:Gem::Version
|
97
|
+
hash: 3
|
98
|
+
segments:
|
99
|
+
- 0
|
100
|
+
version: "0"
|
101
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
102
|
+
none: false
|
103
|
+
requirements:
|
104
|
+
- - ">="
|
105
|
+
- !ruby/object:Gem::Version
|
106
|
+
hash: 3
|
107
|
+
segments:
|
108
|
+
- 0
|
109
|
+
version: "0"
|
110
|
+
requirements: []
|
111
|
+
|
112
|
+
rubyforge_project:
|
113
|
+
rubygems_version: 1.8.15
|
114
|
+
signing_key:
|
115
|
+
specification_version: 3
|
116
|
+
summary: Gem for easily adding TipTip to the Rails Asset Pipeline
|
117
|
+
test_files: []
|
118
|
+
|