facebox-rails 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +3 -0
- data/Rakefile +10 -0
- data/facebox-rails.gemspec +25 -0
- data/lib/facebox-rails.rb +9 -0
- data/lib/facebox-rails/engine.rb +6 -0
- data/lib/facebox-rails/railtie.rb +10 -0
- data/lib/facebox-rails/version.rb +5 -0
- data/test/.gitkeep +0 -0
- data/vendor/assets/images/facebox/closelabel.png +0 -0
- data/vendor/assets/images/facebox/loading.gif +0 -0
- data/vendor/assets/javascripts/jquery.facebox.js +309 -0
- data/vendor/assets/stylesheets/jquery.facebox.css +80 -0
- metadata +97 -0
data/README.md
ADDED
data/Rakefile
ADDED
@@ -0,0 +1,25 @@
|
|
1
|
+
# encoding: utf-8
|
2
|
+
|
3
|
+
$:.unshift File.expand_path('../lib', __FILE__)
|
4
|
+
require 'facebox-rails/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |s|
|
7
|
+
s.name = "facebox-rails"
|
8
|
+
s.version = Facebox::Rails::VERSION
|
9
|
+
s.authors = ["beawesomeinstead"]
|
10
|
+
s.email = "graf.otodrakula@gmail.com"
|
11
|
+
s.homepage = "http://github.com/bai/facebox-rails"
|
12
|
+
s.summary = "Use Facebox with Rails 3"
|
13
|
+
s.description = "This gem provides Facebox for your Rails 3 application."
|
14
|
+
|
15
|
+
s.required_rubygems_version = ">= 1.3.6"
|
16
|
+
|
17
|
+
s.files = `git ls-files`.split("\n")
|
18
|
+
s.platform = Gem::Platform::RUBY
|
19
|
+
s.require_path = 'lib'
|
20
|
+
s.rubyforge_project = '[none]'
|
21
|
+
|
22
|
+
s.add_dependency "railties", "~> 3.0"
|
23
|
+
s.add_dependency "thor", "~> 0.14"
|
24
|
+
s.add_development_dependency "rails", "~> 3.0"
|
25
|
+
end
|
data/test/.gitkeep
ADDED
File without changes
|
Binary file
|
Binary file
|
@@ -0,0 +1,309 @@
|
|
1
|
+
/*
|
2
|
+
* Facebox (for jQuery)
|
3
|
+
* version: 1.3
|
4
|
+
* @requires jQuery v1.2 or later
|
5
|
+
* @homepage https://github.com/defunkt/facebox
|
6
|
+
*
|
7
|
+
* Licensed under the MIT:
|
8
|
+
* http://www.opensource.org/licenses/mit-license.php
|
9
|
+
*
|
10
|
+
* Copyright Forever Chris Wanstrath, Kyle Neath
|
11
|
+
*
|
12
|
+
* Usage:
|
13
|
+
*
|
14
|
+
* jQuery(document).ready(function() {
|
15
|
+
* jQuery('a[rel*=facebox]').facebox()
|
16
|
+
* })
|
17
|
+
*
|
18
|
+
* <a href="#terms" rel="facebox">Terms</a>
|
19
|
+
* Loads the #terms div in the box
|
20
|
+
*
|
21
|
+
* <a href="terms.html" rel="facebox">Terms</a>
|
22
|
+
* Loads the terms.html page in the box
|
23
|
+
*
|
24
|
+
* <a href="terms.png" rel="facebox">Terms</a>
|
25
|
+
* Loads the terms.png image in the box
|
26
|
+
*
|
27
|
+
*
|
28
|
+
* You can also use it programmatically:
|
29
|
+
*
|
30
|
+
* jQuery.facebox('some html')
|
31
|
+
* jQuery.facebox('some html', 'my-groovy-style')
|
32
|
+
*
|
33
|
+
* The above will open a facebox with "some html" as the content.
|
34
|
+
*
|
35
|
+
* jQuery.facebox(function($) {
|
36
|
+
* $.get('blah.html', function(data) { $.facebox(data) })
|
37
|
+
* })
|
38
|
+
*
|
39
|
+
* The above will show a loading screen before the passed function is called,
|
40
|
+
* allowing for a better ajaxy experience.
|
41
|
+
*
|
42
|
+
* The facebox function can also display an ajax page, an image, or the contents of a div:
|
43
|
+
*
|
44
|
+
* jQuery.facebox({ ajax: 'remote.html' })
|
45
|
+
* jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style')
|
46
|
+
* jQuery.facebox({ image: 'stairs.jpg' })
|
47
|
+
* jQuery.facebox({ image: 'stairs.jpg' }, 'my-groovy-style')
|
48
|
+
* jQuery.facebox({ div: '#box' })
|
49
|
+
* jQuery.facebox({ div: '#box' }, 'my-groovy-style')
|
50
|
+
*
|
51
|
+
* Want to close the facebox? Trigger the 'close.facebox' document event:
|
52
|
+
*
|
53
|
+
* jQuery(document).trigger('close.facebox')
|
54
|
+
*
|
55
|
+
* Facebox also has a bunch of other hooks:
|
56
|
+
*
|
57
|
+
* loading.facebox
|
58
|
+
* beforeReveal.facebox
|
59
|
+
* reveal.facebox (aliased as 'afterReveal.facebox')
|
60
|
+
* init.facebox
|
61
|
+
* afterClose.facebox
|
62
|
+
*
|
63
|
+
* Simply bind a function to any of these hooks:
|
64
|
+
*
|
65
|
+
* $(document).bind('reveal.facebox', function() { ...stuff to do after the facebox and contents are revealed... })
|
66
|
+
*
|
67
|
+
*/
|
68
|
+
(function($) {
|
69
|
+
$.facebox = function(data, klass) {
|
70
|
+
$.facebox.loading()
|
71
|
+
|
72
|
+
if (data.ajax) fillFaceboxFromAjax(data.ajax, klass)
|
73
|
+
else if (data.image) fillFaceboxFromImage(data.image, klass)
|
74
|
+
else if (data.div) fillFaceboxFromHref(data.div, klass)
|
75
|
+
else if ($.isFunction(data)) data.call($)
|
76
|
+
else $.facebox.reveal(data, klass)
|
77
|
+
}
|
78
|
+
|
79
|
+
/*
|
80
|
+
* Public, $.facebox methods
|
81
|
+
*/
|
82
|
+
|
83
|
+
$.extend($.facebox, {
|
84
|
+
settings: {
|
85
|
+
opacity : 0.2,
|
86
|
+
overlay : true,
|
87
|
+
loadingImage : '/assets/facebox/loading.gif',
|
88
|
+
closeImage : '/assets/facebox/closelabel.png',
|
89
|
+
imageTypes : [ 'png', 'jpg', 'jpeg', 'gif' ],
|
90
|
+
faceboxHtml : '\
|
91
|
+
<div id="facebox" style="display:none;"> \
|
92
|
+
<div class="popup"> \
|
93
|
+
<div class="content"> \
|
94
|
+
</div> \
|
95
|
+
<a href="#" class="close"></a> \
|
96
|
+
</div> \
|
97
|
+
</div>'
|
98
|
+
},
|
99
|
+
|
100
|
+
loading: function() {
|
101
|
+
init()
|
102
|
+
if ($('#facebox .loading').length == 1) return true
|
103
|
+
showOverlay()
|
104
|
+
|
105
|
+
$('#facebox .content').empty().
|
106
|
+
append('<div class="loading"><img src="'+$.facebox.settings.loadingImage+'"/></div>')
|
107
|
+
|
108
|
+
$('#facebox').show().css({
|
109
|
+
top: getPageScroll()[1] + (getPageHeight() / 10),
|
110
|
+
left: $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2)
|
111
|
+
})
|
112
|
+
|
113
|
+
$(document).bind('keydown.facebox', function(e) {
|
114
|
+
if (e.keyCode == 27) $.facebox.close()
|
115
|
+
return true
|
116
|
+
})
|
117
|
+
$(document).trigger('loading.facebox')
|
118
|
+
},
|
119
|
+
|
120
|
+
reveal: function(data, klass) {
|
121
|
+
$(document).trigger('beforeReveal.facebox')
|
122
|
+
if (klass) $('#facebox .content').addClass(klass)
|
123
|
+
$('#facebox .content').empty().append(data)
|
124
|
+
$('#facebox .popup').children().fadeIn('normal')
|
125
|
+
$('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2))
|
126
|
+
$(document).trigger('reveal.facebox').trigger('afterReveal.facebox')
|
127
|
+
},
|
128
|
+
|
129
|
+
close: function() {
|
130
|
+
$(document).trigger('close.facebox')
|
131
|
+
return false
|
132
|
+
}
|
133
|
+
})
|
134
|
+
|
135
|
+
/*
|
136
|
+
* Public, $.fn methods
|
137
|
+
*/
|
138
|
+
|
139
|
+
$.fn.facebox = function(settings) {
|
140
|
+
if ($(this).length == 0) return
|
141
|
+
|
142
|
+
init(settings)
|
143
|
+
|
144
|
+
function clickHandler() {
|
145
|
+
$.facebox.loading(true)
|
146
|
+
|
147
|
+
// support for rel="facebox.inline_popup" syntax, to add a class
|
148
|
+
// also supports deprecated "facebox[.inline_popup]" syntax
|
149
|
+
var klass = this.rel.match(/facebox\[?\.(\w+)\]?/)
|
150
|
+
if (klass) klass = klass[1]
|
151
|
+
|
152
|
+
fillFaceboxFromHref(this.href, klass)
|
153
|
+
return false
|
154
|
+
}
|
155
|
+
|
156
|
+
return this.bind('click.facebox', clickHandler)
|
157
|
+
}
|
158
|
+
|
159
|
+
/*
|
160
|
+
* Private methods
|
161
|
+
*/
|
162
|
+
|
163
|
+
// called one time to setup facebox on this page
|
164
|
+
function init(settings) {
|
165
|
+
if ($.facebox.settings.inited) return true
|
166
|
+
else $.facebox.settings.inited = true
|
167
|
+
|
168
|
+
$(document).trigger('init.facebox')
|
169
|
+
makeCompatible()
|
170
|
+
|
171
|
+
var imageTypes = $.facebox.settings.imageTypes.join('|')
|
172
|
+
$.facebox.settings.imageTypesRegexp = new RegExp('\\.(' + imageTypes + ')(\\?.*)?$', 'i')
|
173
|
+
|
174
|
+
if (settings) $.extend($.facebox.settings, settings)
|
175
|
+
$('body').append($.facebox.settings.faceboxHtml)
|
176
|
+
|
177
|
+
var preload = [ new Image(), new Image() ]
|
178
|
+
preload[0].src = $.facebox.settings.closeImage
|
179
|
+
preload[1].src = $.facebox.settings.loadingImage
|
180
|
+
|
181
|
+
$('#facebox').find('.b:first, .bl').each(function() {
|
182
|
+
preload.push(new Image())
|
183
|
+
preload.slice(-1).src = $(this).css('background-image').replace(/url\((.+)\)/, '$1')
|
184
|
+
})
|
185
|
+
|
186
|
+
$('#facebox .close')
|
187
|
+
.click($.facebox.close)
|
188
|
+
.append('<img src="'
|
189
|
+
+ $.facebox.settings.closeImage
|
190
|
+
+ '" class="close_image" title="close">')
|
191
|
+
}
|
192
|
+
|
193
|
+
// getPageScroll() by quirksmode.com
|
194
|
+
function getPageScroll() {
|
195
|
+
var xScroll, yScroll;
|
196
|
+
if (self.pageYOffset) {
|
197
|
+
yScroll = self.pageYOffset;
|
198
|
+
xScroll = self.pageXOffset;
|
199
|
+
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
|
200
|
+
yScroll = document.documentElement.scrollTop;
|
201
|
+
xScroll = document.documentElement.scrollLeft;
|
202
|
+
} else if (document.body) {// all other Explorers
|
203
|
+
yScroll = document.body.scrollTop;
|
204
|
+
xScroll = document.body.scrollLeft;
|
205
|
+
}
|
206
|
+
return new Array(xScroll,yScroll)
|
207
|
+
}
|
208
|
+
|
209
|
+
// Adapted from getPageSize() by quirksmode.com
|
210
|
+
function getPageHeight() {
|
211
|
+
var windowHeight
|
212
|
+
if (self.innerHeight) { // all except Explorer
|
213
|
+
windowHeight = self.innerHeight;
|
214
|
+
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
215
|
+
windowHeight = document.documentElement.clientHeight;
|
216
|
+
} else if (document.body) { // other Explorers
|
217
|
+
windowHeight = document.body.clientHeight;
|
218
|
+
}
|
219
|
+
return windowHeight
|
220
|
+
}
|
221
|
+
|
222
|
+
// Backwards compatibility
|
223
|
+
function makeCompatible() {
|
224
|
+
var $s = $.facebox.settings
|
225
|
+
|
226
|
+
$s.loadingImage = $s.loading_image || $s.loadingImage
|
227
|
+
$s.closeImage = $s.close_image || $s.closeImage
|
228
|
+
$s.imageTypes = $s.image_types || $s.imageTypes
|
229
|
+
$s.faceboxHtml = $s.facebox_html || $s.faceboxHtml
|
230
|
+
}
|
231
|
+
|
232
|
+
// Figures out what you want to display and displays it
|
233
|
+
// formats are:
|
234
|
+
// div: #id
|
235
|
+
// image: blah.extension
|
236
|
+
// ajax: anything else
|
237
|
+
function fillFaceboxFromHref(href, klass) {
|
238
|
+
// div
|
239
|
+
if (href.match(/#/)) {
|
240
|
+
var url = window.location.href.split('#')[0]
|
241
|
+
var target = href.replace(url,'')
|
242
|
+
if (target == '#') return
|
243
|
+
$.facebox.reveal($(target).html(), klass)
|
244
|
+
|
245
|
+
// image
|
246
|
+
} else if (href.match($.facebox.settings.imageTypesRegexp)) {
|
247
|
+
fillFaceboxFromImage(href, klass)
|
248
|
+
// ajax
|
249
|
+
} else {
|
250
|
+
fillFaceboxFromAjax(href, klass)
|
251
|
+
}
|
252
|
+
}
|
253
|
+
|
254
|
+
function fillFaceboxFromImage(href, klass) {
|
255
|
+
var image = new Image()
|
256
|
+
image.onload = function() {
|
257
|
+
$.facebox.reveal('<div class="image"><img src="' + image.src + '" /></div>', klass)
|
258
|
+
}
|
259
|
+
image.src = href
|
260
|
+
}
|
261
|
+
|
262
|
+
function fillFaceboxFromAjax(href, klass) {
|
263
|
+
$.get(href, function(data) { $.facebox.reveal(data, klass) })
|
264
|
+
}
|
265
|
+
|
266
|
+
function skipOverlay() {
|
267
|
+
return $.facebox.settings.overlay == false || $.facebox.settings.opacity === null
|
268
|
+
}
|
269
|
+
|
270
|
+
function showOverlay() {
|
271
|
+
if (skipOverlay()) return
|
272
|
+
|
273
|
+
if ($('#facebox_overlay').length == 0)
|
274
|
+
$("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')
|
275
|
+
|
276
|
+
$('#facebox_overlay').hide().addClass("facebox_overlayBG")
|
277
|
+
.css('opacity', $.facebox.settings.opacity)
|
278
|
+
.click(function() { $(document).trigger('close.facebox') })
|
279
|
+
.fadeIn(200)
|
280
|
+
return false
|
281
|
+
}
|
282
|
+
|
283
|
+
function hideOverlay() {
|
284
|
+
if (skipOverlay()) return
|
285
|
+
|
286
|
+
$('#facebox_overlay').fadeOut(200, function(){
|
287
|
+
$("#facebox_overlay").removeClass("facebox_overlayBG")
|
288
|
+
$("#facebox_overlay").addClass("facebox_hide")
|
289
|
+
$("#facebox_overlay").remove()
|
290
|
+
})
|
291
|
+
|
292
|
+
return false
|
293
|
+
}
|
294
|
+
|
295
|
+
/*
|
296
|
+
* Bindings
|
297
|
+
*/
|
298
|
+
|
299
|
+
$(document).bind('close.facebox', function() {
|
300
|
+
$(document).unbind('keydown.facebox')
|
301
|
+
$('#facebox').fadeOut(function() {
|
302
|
+
$('#facebox .content').removeClass().addClass('content')
|
303
|
+
$('#facebox .loading').remove()
|
304
|
+
$(document).trigger('afterClose.facebox')
|
305
|
+
})
|
306
|
+
hideOverlay()
|
307
|
+
})
|
308
|
+
|
309
|
+
})(jQuery);
|
@@ -0,0 +1,80 @@
|
|
1
|
+
#facebox {
|
2
|
+
position: absolute;
|
3
|
+
top: 0;
|
4
|
+
left: 0;
|
5
|
+
z-index: 100;
|
6
|
+
text-align: left;
|
7
|
+
}
|
8
|
+
|
9
|
+
|
10
|
+
#facebox .popup{
|
11
|
+
position:relative;
|
12
|
+
border:3px solid rgba(0,0,0,0);
|
13
|
+
-webkit-border-radius:5px;
|
14
|
+
-moz-border-radius:5px;
|
15
|
+
border-radius:5px;
|
16
|
+
-webkit-box-shadow:0 0 18px rgba(0,0,0,0.4);
|
17
|
+
-moz-box-shadow:0 0 18px rgba(0,0,0,0.4);
|
18
|
+
box-shadow:0 0 18px rgba(0,0,0,0.4);
|
19
|
+
}
|
20
|
+
|
21
|
+
#facebox .content {
|
22
|
+
display:table;
|
23
|
+
width: 370px;
|
24
|
+
padding: 10px;
|
25
|
+
background: #fff;
|
26
|
+
-webkit-border-radius:4px;
|
27
|
+
-moz-border-radius:4px;
|
28
|
+
border-radius:4px;
|
29
|
+
}
|
30
|
+
|
31
|
+
#facebox .content > p:first-child{
|
32
|
+
margin-top:0;
|
33
|
+
}
|
34
|
+
#facebox .content > p:last-child{
|
35
|
+
margin-bottom:0;
|
36
|
+
}
|
37
|
+
|
38
|
+
#facebox .close{
|
39
|
+
position:absolute;
|
40
|
+
top:5px;
|
41
|
+
right:5px;
|
42
|
+
padding:2px;
|
43
|
+
background:#fff;
|
44
|
+
}
|
45
|
+
#facebox .close img{
|
46
|
+
opacity:0.3;
|
47
|
+
}
|
48
|
+
#facebox .close:hover img{
|
49
|
+
opacity:1.0;
|
50
|
+
}
|
51
|
+
|
52
|
+
#facebox .loading {
|
53
|
+
text-align: center;
|
54
|
+
}
|
55
|
+
|
56
|
+
#facebox .image {
|
57
|
+
text-align: center;
|
58
|
+
}
|
59
|
+
|
60
|
+
#facebox img {
|
61
|
+
border: 0;
|
62
|
+
margin: 0;
|
63
|
+
}
|
64
|
+
|
65
|
+
#facebox_overlay {
|
66
|
+
position: fixed;
|
67
|
+
top: 0px;
|
68
|
+
left: 0px;
|
69
|
+
height:100%;
|
70
|
+
width:100%;
|
71
|
+
}
|
72
|
+
|
73
|
+
.facebox_hide {
|
74
|
+
z-index:-100;
|
75
|
+
}
|
76
|
+
|
77
|
+
.facebox_overlayBG {
|
78
|
+
background-color: #000;
|
79
|
+
z-index: 99;
|
80
|
+
}
|
metadata
ADDED
@@ -0,0 +1,97 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: facebox-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
prerelease:
|
5
|
+
version: 0.1.0
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- beawesomeinstead
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
|
13
|
+
date: 2011-05-23 00:00:00 Z
|
14
|
+
dependencies:
|
15
|
+
- !ruby/object:Gem::Dependency
|
16
|
+
name: railties
|
17
|
+
prerelease: false
|
18
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
19
|
+
none: false
|
20
|
+
requirements:
|
21
|
+
- - ~>
|
22
|
+
- !ruby/object:Gem::Version
|
23
|
+
version: "3.0"
|
24
|
+
type: :runtime
|
25
|
+
version_requirements: *id001
|
26
|
+
- !ruby/object:Gem::Dependency
|
27
|
+
name: thor
|
28
|
+
prerelease: false
|
29
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
30
|
+
none: false
|
31
|
+
requirements:
|
32
|
+
- - ~>
|
33
|
+
- !ruby/object:Gem::Version
|
34
|
+
version: "0.14"
|
35
|
+
type: :runtime
|
36
|
+
version_requirements: *id002
|
37
|
+
- !ruby/object:Gem::Dependency
|
38
|
+
name: rails
|
39
|
+
prerelease: false
|
40
|
+
requirement: &id003 !ruby/object:Gem::Requirement
|
41
|
+
none: false
|
42
|
+
requirements:
|
43
|
+
- - ~>
|
44
|
+
- !ruby/object:Gem::Version
|
45
|
+
version: "3.0"
|
46
|
+
type: :development
|
47
|
+
version_requirements: *id003
|
48
|
+
description: This gem provides Facebox for your Rails 3 application.
|
49
|
+
email: graf.otodrakula@gmail.com
|
50
|
+
executables: []
|
51
|
+
|
52
|
+
extensions: []
|
53
|
+
|
54
|
+
extra_rdoc_files: []
|
55
|
+
|
56
|
+
files:
|
57
|
+
- README.md
|
58
|
+
- Rakefile
|
59
|
+
- facebox-rails.gemspec
|
60
|
+
- lib/facebox-rails.rb
|
61
|
+
- lib/facebox-rails/engine.rb
|
62
|
+
- lib/facebox-rails/railtie.rb
|
63
|
+
- lib/facebox-rails/version.rb
|
64
|
+
- test/.gitkeep
|
65
|
+
- vendor/assets/images/facebox/closelabel.png
|
66
|
+
- vendor/assets/images/facebox/loading.gif
|
67
|
+
- vendor/assets/javascripts/jquery.facebox.js
|
68
|
+
- vendor/assets/stylesheets/jquery.facebox.css
|
69
|
+
homepage: http://github.com/bai/facebox-rails
|
70
|
+
licenses: []
|
71
|
+
|
72
|
+
post_install_message:
|
73
|
+
rdoc_options: []
|
74
|
+
|
75
|
+
require_paths:
|
76
|
+
- lib
|
77
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
78
|
+
none: false
|
79
|
+
requirements:
|
80
|
+
- - ">="
|
81
|
+
- !ruby/object:Gem::Version
|
82
|
+
version: "0"
|
83
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
84
|
+
none: false
|
85
|
+
requirements:
|
86
|
+
- - ">="
|
87
|
+
- !ruby/object:Gem::Version
|
88
|
+
version: 1.3.6
|
89
|
+
requirements: []
|
90
|
+
|
91
|
+
rubyforge_project: "[none]"
|
92
|
+
rubygems_version: 1.7.2
|
93
|
+
signing_key:
|
94
|
+
specification_version: 3
|
95
|
+
summary: Use Facebox with Rails 3
|
96
|
+
test_files: []
|
97
|
+
|