lazybox 0.2.1 → 0.2.2
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/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; }
|