lazybox 0.2.1 → 0.2.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +0 -1
- data/lazybox.gemspec +1 -1
- data/lib/lazybox/version.rb +1 -1
- data/vendor/assets/javascripts/lazybox.js.coffee +105 -0
- data/vendor/assets/stylesheets/lazybox.css.scss +40 -0
- metadata +9 -9
- data/vendor/assets/javascripts/lazybox.js +0 -74
- data/vendor/assets/stylesheets/lazybox.css +0 -58
data/README.md
CHANGED
|
@@ -160,7 +160,6 @@ Options
|
|
|
160
160
|
overlay: true|false //default true. Show lazybox overlay
|
|
161
161
|
esc: true|false //default true. Close lazybox on esc press
|
|
162
162
|
close: true|false //default true. Show close lazybox button
|
|
163
|
-
niceClose: true|false //default true. Show nice close button like in fancybox(IE always shows simple close button)
|
|
164
163
|
modal: true|false //default true. Close lazybox on overlay click
|
|
165
164
|
closeImg: true|false //default false. Use image for close link
|
|
166
165
|
onTop: true|false //default false. Show lazybox on top instead of on center. It will use slide animation instead of fade.
|
data/lazybox.gemspec
CHANGED
|
@@ -6,7 +6,7 @@ Gem::Specification.new do |s|
|
|
|
6
6
|
s.version = Lazybox::VERSION
|
|
7
7
|
s.authors = ["Alex Galushka"]
|
|
8
8
|
s.email = ["sexmcs@gmail.com"]
|
|
9
|
-
s.homepage = "https://github.com/
|
|
9
|
+
s.homepage = "https://github.com/galulex/lazybox"
|
|
10
10
|
s.summary = "Use LazyBox for popup windows with Rails"
|
|
11
11
|
s.description = "Lazybox is a jQuery-based, lightbox that can display entire remote pages, images and confirmation dialogs. Replace standard rails confirmations with lazybox just added several rows to your project. Use lazybox with rails assets pipeline."
|
|
12
12
|
s.platform = Gem::Platform::RUBY
|
data/lib/lazybox/version.rb
CHANGED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
( ($) ->
|
|
2
|
+
defaults = {
|
|
3
|
+
overlay: true,
|
|
4
|
+
esc: true,
|
|
5
|
+
close: true,
|
|
6
|
+
modal: true,
|
|
7
|
+
opacity: 0.3,
|
|
8
|
+
onTop: false,
|
|
9
|
+
speed: 300,
|
|
10
|
+
fixed: false,
|
|
11
|
+
cancelText: 'Cancel',
|
|
12
|
+
cancelClass: 'button',
|
|
13
|
+
submitText: 'Ok',
|
|
14
|
+
submitClass: 'button'
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
html = "<div id='lazybox'><div id='lazybox_body'></div></div>"
|
|
18
|
+
box = $('#lazybox')
|
|
19
|
+
overlay = $('#lazybox_overlay')
|
|
20
|
+
close = $('#lazybox_close')
|
|
21
|
+
|
|
22
|
+
$.lazybox = (html, options) -> $.lazybox.show(html, options)
|
|
23
|
+
|
|
24
|
+
$.extend $.lazybox,
|
|
25
|
+
settings: $.extend {}, defaults
|
|
26
|
+
|
|
27
|
+
show: (content, options) ->
|
|
28
|
+
options = init(options)
|
|
29
|
+
$('#lazybox_body').html(content)
|
|
30
|
+
$.lazybox.center(options.onTop, options.fixed)
|
|
31
|
+
effect = if options.onTop then 'slideDown' else 'fadeIn'
|
|
32
|
+
box[effect](options.speed)
|
|
33
|
+
return options
|
|
34
|
+
|
|
35
|
+
close: (speed) ->
|
|
36
|
+
speed = speed || defaults.speed
|
|
37
|
+
effect = if box.position().top == 0 then 'slideUp' else 'fadeOut'
|
|
38
|
+
box[effect](speed)
|
|
39
|
+
overlay.fadeOut(speed+200)
|
|
40
|
+
|
|
41
|
+
center: (onTop, fixed) =>
|
|
42
|
+
if fixed
|
|
43
|
+
y = if onTop then 0 else (box.outerHeight())/2
|
|
44
|
+
y = 20 if y < 20 and !onTop
|
|
45
|
+
box.css({ 'margin-left': -box.outerWidth()/2, 'margin-top': -y, top: (if onTop then 0 else '49%'), position: 'fixed', left: '49%'})
|
|
46
|
+
else
|
|
47
|
+
y = if onTop then 0 else (($(window).height()-$('#lazybox').outerHeight())/2)+$(window).scrollTop()
|
|
48
|
+
y = 20 if y < 20 and !onTop
|
|
49
|
+
box.css({ top: y, left:(($(window).width()-box.outerWidth())/2)+$(window).scrollLeft(), position: 'absolute', margin: 0})
|
|
50
|
+
|
|
51
|
+
confirm: (element) ->
|
|
52
|
+
options = $.extend defaults, $.lazybox.settings
|
|
53
|
+
message = element.data('confirm')
|
|
54
|
+
return true if !message
|
|
55
|
+
$.lazybox.show('<p>'+message+'</p><div class="lazy_buttons"><div>', { klass: 'confirm' })
|
|
56
|
+
element.clone().attr('class', options.submitClass).removeAttr('data-confirm').text(options.submitText).appendTo('.lazy_buttons')
|
|
57
|
+
$('.lazy_buttons').append(' ')
|
|
58
|
+
$('<a>', { href: '', text: options.cancelText, 'class': options.cancelClass }).appendTo('.lazy_buttons')
|
|
59
|
+
return false
|
|
60
|
+
|
|
61
|
+
$.fn.lazybox = (options) ->
|
|
62
|
+
this.live 'click', (e) =>
|
|
63
|
+
a = $(e.currentTarget)
|
|
64
|
+
href = a.attr('href')
|
|
65
|
+
imagesRegexp = new RegExp('\\.(png|jpg|jpeg|gif)(\\?.*)?$', 'i')
|
|
66
|
+
e.preventDefault()
|
|
67
|
+
if href.match(imagesRegexp)
|
|
68
|
+
img = new Image()
|
|
69
|
+
img.onload = (element) ->
|
|
70
|
+
options = $.lazybox.show(img, options)
|
|
71
|
+
nextLink = if a.is(':last-child') then a.siblings('a[rel*=lazybox]:first') else a.next('a[rel*=lazybox]:first')
|
|
72
|
+
if nextLink.length != 0
|
|
73
|
+
$('#lazybox img').bind 'click', () =>
|
|
74
|
+
box.fadeOut(options.speed, () -> nextLink.click())
|
|
75
|
+
$(img).attr({ 'class': 'lazy_img', src: href })
|
|
76
|
+
else
|
|
77
|
+
$.ajax({
|
|
78
|
+
url: href,
|
|
79
|
+
success: (data) => $.lazybox.show(data, options)
|
|
80
|
+
error: () => $.lazybox.close(options.speed) })
|
|
81
|
+
|
|
82
|
+
init = (options) ->
|
|
83
|
+
options = $.extend $.extend({}, defaults), $.lazybox.settings, options
|
|
84
|
+
if options.overlay
|
|
85
|
+
$('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay'></div>")
|
|
86
|
+
overlay = $('#lazybox_overlay')
|
|
87
|
+
overlay.css({ filter: 'alpha(opacity='+options.opacity*100+')', opacity: options.opacity }).fadeIn(options.speed+200)
|
|
88
|
+
$('body:not(:has(#lazybox))').append(html)
|
|
89
|
+
box = $('#lazybox')
|
|
90
|
+
if options.klass then box.attr('class', options.klass) else box.removeClass()
|
|
91
|
+
if options.close
|
|
92
|
+
box.not(':has(#lazybox_close)').prepend($("<a id='lazybox_close' title='close'></a>"))
|
|
93
|
+
close = $('#lazybox_close')
|
|
94
|
+
if options.closeImg then close.attr('class', 'img').text('') else close.removeClass().text('×')
|
|
95
|
+
else close.remove()
|
|
96
|
+
if !options.modal and options.overlay
|
|
97
|
+
overlay.bind 'click', () => $.lazybox.close(options.speed)
|
|
98
|
+
else
|
|
99
|
+
overlay.unbind()
|
|
100
|
+
$(document).keyup (e) ->
|
|
101
|
+
$.lazybox.close(options.speed) if e.keyCode == 27 and options.esc
|
|
102
|
+
box.on 'click', '#lazybox_close, .lazy_buttons a', (e) => $.lazybox.close(options.speed); e.preventDefault()
|
|
103
|
+
return options
|
|
104
|
+
|
|
105
|
+
) jQuery
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
#lazybox_overlay {
|
|
2
|
+
background: black;
|
|
3
|
+
bottom: 0px;
|
|
4
|
+
display: none;
|
|
5
|
+
left: 0px;
|
|
6
|
+
position: fixed;
|
|
7
|
+
right: 0px;
|
|
8
|
+
top: 0px;
|
|
9
|
+
z-index: 1000;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
#lazybox {
|
|
13
|
+
background-color: #fff;
|
|
14
|
+
border-radius: 5px;
|
|
15
|
+
border: 1px solid #ccc;
|
|
16
|
+
box-shadow: 0 1px 5px #333;
|
|
17
|
+
display: none;
|
|
18
|
+
left: 49%;
|
|
19
|
+
padding: 20px;
|
|
20
|
+
position: absolute;
|
|
21
|
+
top: 49%;
|
|
22
|
+
z-index: 1001;
|
|
23
|
+
&.confirm { max-width: 300px; }
|
|
24
|
+
.lazy_buttons { margin-top: 15px; text-align: right; }
|
|
25
|
+
img.lazy_img { cursor: pointer; }
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
a#lazybox_close {
|
|
29
|
+
background: transparent;
|
|
30
|
+
color: gray;
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
font: bold 26px/100% Arial, Helvetica, sans-serif !important;
|
|
33
|
+
height: 25px;
|
|
34
|
+
position: absolute;
|
|
35
|
+
right: 0;
|
|
36
|
+
text-align: center;
|
|
37
|
+
top: 0;
|
|
38
|
+
width: 25px;
|
|
39
|
+
&:hover { color: black; }
|
|
40
|
+
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: lazybox
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.2.
|
|
4
|
+
version: 0.2.2
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,11 +9,11 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2012-
|
|
12
|
+
date: 2012-10-08 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: rails
|
|
16
|
-
requirement: &
|
|
16
|
+
requirement: &22576780 !ruby/object:Gem::Requirement
|
|
17
17
|
none: false
|
|
18
18
|
requirements:
|
|
19
19
|
- - ~>
|
|
@@ -21,10 +21,10 @@ dependencies:
|
|
|
21
21
|
version: '3.1'
|
|
22
22
|
type: :development
|
|
23
23
|
prerelease: false
|
|
24
|
-
version_requirements: *
|
|
24
|
+
version_requirements: *22576780
|
|
25
25
|
- !ruby/object:Gem::Dependency
|
|
26
26
|
name: jquery-rails
|
|
27
|
-
requirement: &
|
|
27
|
+
requirement: &22573640 !ruby/object:Gem::Requirement
|
|
28
28
|
none: false
|
|
29
29
|
requirements:
|
|
30
30
|
- - ! '>='
|
|
@@ -32,7 +32,7 @@ dependencies:
|
|
|
32
32
|
version: '0'
|
|
33
33
|
type: :development
|
|
34
34
|
prerelease: false
|
|
35
|
-
version_requirements: *
|
|
35
|
+
version_requirements: *22573640
|
|
36
36
|
description: Lazybox is a jQuery-based, lightbox that can display entire remote pages,
|
|
37
37
|
images and confirmation dialogs. Replace standard rails confirmations with lazybox
|
|
38
38
|
just added several rows to your project. Use lazybox with rails assets pipeline.
|
|
@@ -49,9 +49,9 @@ files:
|
|
|
49
49
|
- lazybox.gemspec
|
|
50
50
|
- lib/lazybox.rb
|
|
51
51
|
- lib/lazybox/version.rb
|
|
52
|
-
- vendor/assets/javascripts/lazybox.js
|
|
53
|
-
- vendor/assets/stylesheets/lazybox.css
|
|
54
|
-
homepage: https://github.com/
|
|
52
|
+
- vendor/assets/javascripts/lazybox.js.coffee
|
|
53
|
+
- vendor/assets/stylesheets/lazybox.css.scss
|
|
54
|
+
homepage: https://github.com/galulex/lazybox
|
|
55
55
|
licenses: []
|
|
56
56
|
post_install_message:
|
|
57
57
|
rdoc_options: []
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
(function($){
|
|
2
|
-
var defaults = {overlay: true, esc: true, close: true, niceClose: true, modal: true, opacity: 0.3, onTop: false, speed: 300, fixed: false, cancelText: 'Cancel', cancelClass: 'button', submitText: 'Ok', submitClass: 'button'}, effect, y
|
|
3
|
-
$.lazybox = function(html, options){ $.lazybox.show(html, options) }
|
|
4
|
-
$.extend($.lazybox, {
|
|
5
|
-
settings: $.extend({}, defaults),
|
|
6
|
-
show: function(content, options){
|
|
7
|
-
var options = init(options)
|
|
8
|
-
$('#lazybox_body').html(content)
|
|
9
|
-
$.lazybox.center(options.onTop, options.fixed);
|
|
10
|
-
(options.onTop) ? effect = 'slideDown' : effect = 'fadeIn'
|
|
11
|
-
$('#lazybox')[effect](options.speed)
|
|
12
|
-
return options
|
|
13
|
-
},
|
|
14
|
-
close: function(speed){
|
|
15
|
-
speed = speed || defaults.speed;
|
|
16
|
-
($('#lazybox').position().top == 0) ? effect = 'slideUp' : effect = 'fadeOut'
|
|
17
|
-
$('#lazybox')[effect](speed)
|
|
18
|
-
$('#lazybox_overlay').fadeOut(speed+200)
|
|
19
|
-
},
|
|
20
|
-
center: function(onTop, fixed){
|
|
21
|
-
if (fixed){
|
|
22
|
-
(onTop) ? y = 0 : y = ($('#lazybox').outerHeight())/2
|
|
23
|
-
$('#lazybox').css({ 'margin-left': -$('#lazybox').outerWidth()/2, 'margin-top': -((y < 20 && !onTop) ? 20 : y), top: ((onTop) ? 0 : '49%'), position: 'fixed', left: '49%'})
|
|
24
|
-
} else {
|
|
25
|
-
(onTop) ? y = 0 : y = (($(window).height()-$('#lazybox').outerHeight())/2)+$(window).scrollTop()
|
|
26
|
-
$('#lazybox').css({ top: ((y < 20 && !onTop) ? 20 : y), left:(($(window).width()-$('#lazybox').outerWidth())/2)+$(window).scrollLeft(), position: 'absolute', margin: 0})
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
confirm: function(element){
|
|
30
|
-
var options = $.extend(defaults, $.lazybox.settings)
|
|
31
|
-
var message = element.data('confirm')
|
|
32
|
-
if (!message) return true
|
|
33
|
-
$.lazybox.show('<p>'+message+'</p><div class="lazy_buttons"><div>', {klass: 'confirm'})
|
|
34
|
-
element.clone().attr('class', options.submitClass).removeAttr('data-confirm').text(options.submitText).appendTo('.lazy_buttons')
|
|
35
|
-
$('.lazy_buttons').append(' ')
|
|
36
|
-
$('<a>', {href: '', text: options.cancelText, 'class': options.cancelClass}).appendTo('.lazy_buttons')
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
$.fn.lazybox = function(options){
|
|
40
|
-
this.live('click', function(e){
|
|
41
|
-
var a = $(this), href = a.attr('href'), imagesRegexp = new RegExp('\\.(png|jpg|jpeg|gif)(\\?.*)?$', 'i')
|
|
42
|
-
e.preventDefault()
|
|
43
|
-
if (href.match(imagesRegexp)){
|
|
44
|
-
var img = new Image(), nextLink
|
|
45
|
-
img.onload = function(element){
|
|
46
|
-
options = $.lazybox.show(img, options);
|
|
47
|
-
(a.is(':last-child')) ? nextLink = a.siblings('a[rel*=lazybox]:first') : nextLink = a.next('a[rel*=lazybox]:first')
|
|
48
|
-
if (!nextLink.length == 0) $('#lazybox img').bind('click', function(){ $('#lazybox').fadeOut(options.speed, function(){ nextLink.click() }) })
|
|
49
|
-
}
|
|
50
|
-
$(img).attr({'class': 'lazy_img', src: href})
|
|
51
|
-
} else $.ajax({url: href, success: function(data){ $.lazybox.show(data, options) }, error: function(){ $.lazybox.close(300) }})
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
function init(options){
|
|
56
|
-
var options = $.extend($.extend({}, defaults), $.lazybox.settings, options)
|
|
57
|
-
if (options.overlay) {
|
|
58
|
-
$('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay'></div>")
|
|
59
|
-
$('#lazybox_overlay').css({filter: 'alpha(opacity='+options.opacity*100+')', opacity: options.opacity}).fadeIn(options.speed+200)
|
|
60
|
-
}
|
|
61
|
-
$('body:not(:has(#lazybox))').append("<div id='lazybox'><div id='lazybox_body'></div></div>");
|
|
62
|
-
(options.klass) ? $('#lazybox').attr('class', options.klass) : $('#lazybox').removeClass()
|
|
63
|
-
if (options.close) {
|
|
64
|
-
$('#lazybox:not(:has(#lazybox_close))').prepend($("<a id='lazybox_close' title='close'></a>"));
|
|
65
|
-
(options.closeImg) ? $('#lazybox_close').attr('class', 'img').text('') : $('#lazybox_close').removeClass().text('×')
|
|
66
|
-
if (!$.browser.msie && options.niceClose && !options.closeImg && !options.onTop) $('#lazybox_close').attr('class', 'nice')
|
|
67
|
-
} else $('#lazybox_close').remove();
|
|
68
|
-
(!options.modal && options.overlay) ? $('#lazybox_overlay').bind('click', function(){ $.lazybox.close(options.speed) }) : $('#lazybox_overlay').unbind()
|
|
69
|
-
$(document).keyup(function(e) { if (e.keyCode == 27 && options.esc) $.lazybox.close(options.speed) })
|
|
70
|
-
$('#lazybox_close, #lazybox_body .lazy_buttons a').live('click', function(e){ $.lazybox.close(options.speed); e.preventDefault() })
|
|
71
|
-
return options
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
})(jQuery);
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
#lazybox_overlay {
|
|
2
|
-
background: black;
|
|
3
|
-
bottom: 0px;
|
|
4
|
-
display: none;
|
|
5
|
-
left: 0px;
|
|
6
|
-
position: fixed;
|
|
7
|
-
right: 0px;
|
|
8
|
-
top: 0px;
|
|
9
|
-
z-index: 1000;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
#lazybox {
|
|
13
|
-
background-color: #fff;
|
|
14
|
-
border: 1px solid #ccc;
|
|
15
|
-
border-radius: 5px;
|
|
16
|
-
box-shadow: 0 1px 5px #333;
|
|
17
|
-
display: none;
|
|
18
|
-
left: 49%;
|
|
19
|
-
padding: 20px;
|
|
20
|
-
position: absolute;
|
|
21
|
-
top: 49%;
|
|
22
|
-
z-index: 1001;
|
|
23
|
-
-moz-box-shadow: 0 1px 5px #333;
|
|
24
|
-
-webkit-box-shadow: 0 1px 5px #333;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
a#lazybox_close {
|
|
28
|
-
background: transparent;
|
|
29
|
-
border: none;
|
|
30
|
-
color: gray;
|
|
31
|
-
cursor: pointer;
|
|
32
|
-
font: bold 26px/100% Arial, Helvetica, sans-serif !important;
|
|
33
|
-
height: 25px;
|
|
34
|
-
position: absolute;
|
|
35
|
-
right: 0;
|
|
36
|
-
text-align: center;
|
|
37
|
-
top: 0;
|
|
38
|
-
width: 25px;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
a#lazybox_close.nice {
|
|
42
|
-
background: black;
|
|
43
|
-
border: 2px solid white;
|
|
44
|
-
border-radius: 20px;
|
|
45
|
-
box-shadow: 0 1px 5px #333;
|
|
46
|
-
color: white;
|
|
47
|
-
right: -17px;
|
|
48
|
-
top: -17px;
|
|
49
|
-
-moz-border-radius: 20px;
|
|
50
|
-
-moz-box-shadow: 0 1px 5px #333;
|
|
51
|
-
-webkit-box-shadow: 0 1px 5px #333;
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
a#lazybox_close:hover { color: black; }
|
|
55
|
-
a#lazybox_close.nice:hover { background: white; border-color: black; }
|
|
56
|
-
img.lazy_img { cursor: pointer; }
|
|
57
|
-
#lazybox .lazy_buttons { margin-top: 15px; text-align: right; }
|
|
58
|
-
#lazybox.confirm { max-width: 300px; }
|