lazybox 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +91 -49
- data/lazybox.gemspec +1 -1
- data/lib/lazybox/version.rb +1 -1
- data/vendor/assets/javascripts/lazybox.js +53 -46
- data/vendor/assets/stylesheets/lazybox.css +5 -9
- metadata +5 -5
data/README.md
CHANGED
@@ -1,99 +1,141 @@
|
|
1
|
-
|
1
|
+
LazyBox
|
2
|
+
=======
|
2
3
|
|
3
|
-
Lazybox is a jQuery-based, lightbox that can display entire remote pages and
|
4
|
-
Use lazybox with rails
|
4
|
+
Lazybox is a jQuery-based, lightbox that can display entire remote pages, images and confirmation dialogs.
|
5
|
+
Replace standard rails confirmations with lazybox just added several rows to your project. Use lazybox with rails assets pipeline.
|
5
6
|
|
6
7
|
LazyBox implemented using only css and jquery without images.
|
7
|
-
This is high perfomance modal dialogs. All unpacked files take only
|
8
|
-
This is simplest solution for popup windows.
|
8
|
+
This is high perfomance modal dialogs. All unpacked files take only 5 kb.
|
9
|
+
This is simplest solution for popup windows and custom confirmation dialogs.
|
9
10
|
|
10
|
-
|
11
|
+
Installing
|
12
|
+
------------
|
11
13
|
|
12
14
|
Add it to your Gemfile:
|
13
15
|
|
16
|
+
```ruby
|
14
17
|
gem 'lazybox'
|
18
|
+
```
|
15
19
|
|
16
20
|
Then run `bundle install` to update your application's bundle.
|
17
21
|
|
18
|
-
Include in your `
|
22
|
+
Include in your `application.css`:
|
19
23
|
|
24
|
+
```css
|
20
25
|
/*
|
21
26
|
* ...
|
22
27
|
*= require lazybox
|
23
28
|
* ...
|
24
29
|
*/
|
30
|
+
```
|
25
31
|
|
26
|
-
And in `
|
32
|
+
And in `application.js`:
|
27
33
|
|
34
|
+
```javascript
|
28
35
|
//= require lazybox
|
36
|
+
```
|
29
37
|
|
30
|
-
|
38
|
+
Usage
|
39
|
+
-----
|
31
40
|
|
32
|
-
|
41
|
+
###Remote pages
|
42
|
+
Usual remote link:
|
33
43
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
$('a[rel*=lazybox]').lazybox({overlay: true, esc: true, close: true, modal: true, opacity: 0.3, cssClass: 'class'});
|
38
|
-
});
|
44
|
+
```ruby
|
45
|
+
link_to 'Lazybox', new_model_path, :remote => true
|
46
|
+
```
|
39
47
|
|
40
|
-
In your
|
48
|
+
In your controller:
|
41
49
|
|
42
|
-
|
50
|
+
```ruby
|
51
|
+
def new
|
52
|
+
@model = Model.new
|
53
|
+
end
|
43
54
|
|
44
|
-
|
55
|
+
def create
|
56
|
+
@model = Model.new(params[:model])
|
57
|
+
render :action => :new unless @model.save
|
58
|
+
end
|
59
|
+
```
|
45
60
|
|
46
|
-
|
47
|
-
@model = Model.new
|
48
|
-
respond_to do |format|
|
49
|
-
format.js { render :layout => false }
|
50
|
-
end
|
51
|
-
end
|
61
|
+
`new.js.haml`
|
52
62
|
|
53
|
-
|
54
|
-
|
55
|
-
|
63
|
+
```ruby
|
64
|
+
$.lazybox("#{escape_javascript(render :partial => 'form')}");
|
65
|
+
```
|
56
66
|
|
57
|
-
|
67
|
+
`create.js.haml`
|
58
68
|
|
59
|
-
|
69
|
+
```ruby
|
70
|
+
$.lazybox.close()
|
71
|
+
window.location.reload()
|
72
|
+
```
|
73
|
+
![LazyBox](http://i.imgur.com/9dmY8.png)
|
60
74
|
|
61
|
-
|
62
|
-
@model = Model.new
|
63
|
-
end
|
75
|
+
###Confirmations
|
64
76
|
|
65
|
-
|
66
|
-
@model = Model.create(params[:model])
|
67
|
-
end
|
77
|
+
You can replace standard rails confirmations with lazybox
|
68
78
|
|
69
|
-
`
|
79
|
+
And in `application.js`:
|
80
|
+
|
81
|
+
```javascript
|
82
|
+
$.rails.allowAction = $.lazybox.confirm;
|
83
|
+
```
|
84
|
+
|
85
|
+
![LazyBox](http://i.imgur.com/WmOqj.png)
|
70
86
|
|
71
|
-
|
72
|
-
$('#lazybox_body').html("#{escape_javascript(render :partial => 'form')}");
|
73
|
-
- else
|
74
|
-
$(document).trigger('close.lazybox')
|
75
|
-
window.location.reload();
|
87
|
+
for options use global lazybox settings:
|
76
88
|
|
77
|
-
|
89
|
+
```javascript
|
90
|
+
$.lazybox.settings = {cancelClass: "button gray", submitClass: 'button gray', overlay: false}
|
91
|
+
```
|
78
92
|
|
79
|
-
|
93
|
+
![LazyBox](http://i.imgur.com/CTlV4.png)
|
80
94
|
|
81
|
-
|
95
|
+
###Images
|
96
|
+
|
97
|
+
```ruby
|
98
|
+
link_to 'Image', image.url, :rel => :lazybox
|
99
|
+
```
|
100
|
+
Include in your `app/assets/javascripts/application.js`:
|
101
|
+
|
102
|
+
```javascript
|
103
|
+
$(document).ready(function() {
|
104
|
+
$('a[rel*=lazybox]').lazybox();
|
105
|
+
// or with options
|
106
|
+
$('a[rel*=lazybox]').lazybox({overlay: true, esc: true, close: true, modal: true, klass: 'class'});
|
107
|
+
});
|
108
|
+
```
|
109
|
+
|
110
|
+
![LazyBox](http://i.imgur.com/tywzm.png)
|
111
|
+
|
112
|
+
Options
|
113
|
+
-------
|
82
114
|
|
83
115
|
overlay: true|false //default true. Show lazybox overlay.
|
84
116
|
esc: true|false //default true. Close lazybox on esc press.
|
85
117
|
close: true|false //default true. Show close lazybox button.
|
86
118
|
modal: true|false //default true. Close lazybox on overlay click.
|
87
119
|
opacity: 0.6 //default 0.3. Set opacity for lazybox overlay.
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
120
|
+
klass: 'class' // Set class for lazybox. <div id='lazybox' class='class'>...</div>
|
121
|
+
//confirmation options
|
122
|
+
cancelText: //default 'Cancel'. Cancel button text.
|
123
|
+
submitText: //default 'Ok'. Confirm button text.
|
124
|
+
cancelClass: //default 'button'. Cancel button class.
|
125
|
+
submitClass: //default 'button'. Confirm button class.
|
126
|
+
|
127
|
+
Events
|
128
|
+
------
|
129
|
+
|
130
|
+
$.lazybox.show()
|
131
|
+
$.lazybox.close()
|
132
|
+
$.lazybox.center()
|
92
133
|
$(document).trigger('close.lazybox')
|
93
134
|
$(document).trigger('center.lazybox')
|
94
135
|
|
95
136
|
|
96
|
-
|
137
|
+
Browser Compatibility
|
138
|
+
---------------------
|
97
139
|
|
98
140
|
ie7 +(for ie7 you have to set width of lazybox `#lazybox { width: 400px; }`)
|
99
141
|
Chrome
|
data/lazybox.gemspec
CHANGED
@@ -8,7 +8,7 @@ Gem::Specification.new do |s|
|
|
8
8
|
s.email = ["sexmcs@gmail.com"]
|
9
9
|
s.homepage = "https://github.com/alex-galushka/lazybox"
|
10
10
|
s.summary = "Use LazyBox for popup windows with Rails"
|
11
|
-
s.description = "
|
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
|
13
13
|
|
14
14
|
s.files = `git ls-files`.split("\n")
|
data/lib/lazybox/version.rb
CHANGED
@@ -1,64 +1,71 @@
|
|
1
1
|
(function($){
|
2
|
+
var defaults = {overlay: true, esc: true, close: true, modal: true, opacity: 0.3, cancelText: 'Cancel', cancelClass: 'button', submitText: 'Ok', submitClass: 'button'}
|
3
|
+
$.lazybox = function(html){ $.lazybox.show(html) }
|
4
|
+
$.extend($.lazybox, {
|
5
|
+
settings: $.extend({}, defaults),
|
6
|
+
show: function(content, options){
|
7
|
+
init(options)
|
8
|
+
$('#lazybox_body').html(content)
|
9
|
+
$.lazybox.center()
|
10
|
+
$('#lazybox').fadeIn(300)
|
11
|
+
},
|
12
|
+
close: function(){
|
13
|
+
$('#lazybox').fadeOut(300)
|
14
|
+
$('#lazybox_overlay').fadeOut(500)
|
15
|
+
},
|
16
|
+
center: function(){
|
17
|
+
var x = (($(window).height() - $('#lazybox').outerHeight()) / 2) + $(window).scrollTop()
|
18
|
+
$('#lazybox').css({ top: ((x < 0) ? 20 : x), left:(($(window).width() - $('#lazybox').outerWidth()) / 2) + $(window).scrollLeft() })
|
19
|
+
},
|
20
|
+
confirm: function(element){
|
21
|
+
var options = $.extend(defaults, $.lazybox.settings)
|
22
|
+
var message = element.data('confirm')
|
23
|
+
if (!message) { return true }
|
24
|
+
$.lazybox.show('<p>'+message+'</p><div class="lazy_buttons"><div>', {klass: 'confirm'})
|
25
|
+
element.clone().attr({class: options.submitClass}).removeAttr('data-confirm').text(options.submitText).appendTo('.lazy_buttons')
|
26
|
+
$('.lazy_buttons').append(' ')
|
27
|
+
$('<a>', {href: '', text: options.cancelText, class: options.cancelClass}).appendTo('.lazy_buttons')
|
28
|
+
}
|
29
|
+
});
|
2
30
|
$.fn.lazybox = function(options){
|
3
|
-
var defaults = {overlay: true, esc: true, close: true, modal: true, opacity: 0.3};
|
4
|
-
var options = $.extend(defaults, options);
|
5
31
|
var imagesRegexp = new RegExp('\\.(png|jpg|jpeg|gif)(\\?.*)?$', 'i')
|
6
32
|
this.live('click', function(e){
|
7
|
-
var href = $(this).attr('href')
|
8
|
-
e.preventDefault()
|
9
|
-
|
10
|
-
apply_settings(options);
|
11
|
-
if (href.match(imagesRegexp)) {
|
33
|
+
var href = $(this).attr('href')
|
34
|
+
e.preventDefault()
|
35
|
+
if (href.match(imagesRegexp)){
|
12
36
|
var img = new Image()
|
13
|
-
img.onload = function()
|
14
|
-
$('#lazybox_body').html('<img src="' + img.src + '" /></div>');
|
15
|
-
center_lazybox();
|
16
|
-
$('#lazybox').fadeIn(300);
|
17
|
-
}
|
37
|
+
img.onload = function(){ $.lazybox.show('<img src="' + img.src + '" />', options) }
|
18
38
|
img.src = href
|
19
|
-
} else
|
39
|
+
} else{
|
20
40
|
$.ajax({
|
21
41
|
url: href,
|
22
|
-
success: function(data){
|
23
|
-
|
24
|
-
|
25
|
-
$('#lazybox').fadeIn(300);
|
26
|
-
},
|
27
|
-
error: function(){
|
28
|
-
$('#lazybox_overlay').fadeOut(500);
|
29
|
-
}
|
30
|
-
});
|
42
|
+
success: function(data){ $.lazybox.show(data, options) },
|
43
|
+
error: function(){ $.lazybox.close() }
|
44
|
+
})
|
31
45
|
}
|
32
46
|
});
|
33
47
|
}
|
34
48
|
|
35
|
-
function
|
36
|
-
|
37
|
-
$('#
|
38
|
-
}
|
39
|
-
|
40
|
-
function center_lazybox(){
|
41
|
-
var x = (($(window).height() - $('#lazybox').outerHeight()) / 2) + $(window).scrollTop();
|
42
|
-
$('#lazybox').css({ top: ((x < 0) ? 20 : x), left:(($(window).width() - $('#lazybox').outerWidth()) / 2) + $(window).scrollLeft() });
|
43
|
-
}
|
44
|
-
|
45
|
-
function apply_settings(options){
|
49
|
+
function init(options){
|
50
|
+
var options = $.extend($.extend({}, defaults), $.lazybox.settings, options)
|
51
|
+
$('body:not(:has(#lazybox))').append("<div id='lazybox'><div id='lazybox_body'></div></div>")
|
46
52
|
if (options.overlay) {
|
47
|
-
$('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay'></div>")
|
48
|
-
$('#lazybox_overlay').css({filter: 'alpha(opacity='+options.opacity*100+')', opacity: options.opacity})
|
49
|
-
$('#lazybox_overlay').fadeIn(500)
|
53
|
+
$('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay'></div>")
|
54
|
+
$('#lazybox_overlay').css({filter: 'alpha(opacity='+options.opacity*100+')', opacity: options.opacity})
|
55
|
+
$('#lazybox_overlay').fadeIn(500)
|
50
56
|
}
|
51
|
-
if (options.
|
57
|
+
if (options.klass) { $('#lazybox').removeClass().addClass(options.klass) } else { $('#lazybox').removeClass() }
|
52
58
|
if (options.close) {
|
53
|
-
$('#lazybox:not(:has(#lazybox_close))').prepend($("<a id='lazybox_close' title='close'>×</a>"))
|
54
|
-
$('#lazybox_close').live('click', function(){
|
55
|
-
if ($.browser.msie) $('#lazybox_close').addClass('ie')
|
56
|
-
} else $('#lazybox_close').remove()
|
57
|
-
if (!options.modal) { $('#lazybox_overlay').bind('click', function(){
|
58
|
-
if (!options.modal && options.overlay) { $('#lazybox_overlay').bind('click', function(){
|
59
|
-
$(document).keyup(function(e) { if (e.keyCode == 27 && options.esc)
|
59
|
+
$('#lazybox:not(:has(#lazybox_close))').prepend($("<a id='lazybox_close' title='close'>×</a>"))
|
60
|
+
$('#lazybox_close').live('click', function(){ $.lazybox.close() })
|
61
|
+
if ($.browser.msie) $('#lazybox_close').addClass('ie')
|
62
|
+
} else $('#lazybox_close').remove()
|
63
|
+
if (!options.modal) { $('#lazybox_overlay').bind('click', function(){ $.lazybox.close() }) } else { $('#lazybox_overlay').unbind() }
|
64
|
+
if (!options.modal && options.overlay) { $('#lazybox_overlay').bind('click', function(){ $.lazybox.close() }) } else { $('#lazybox_overlay').unbind() }
|
65
|
+
$(document).keyup(function(e) { if (e.keyCode == 27 && options.esc) $.lazybox.close() })
|
66
|
+
$('#lazybox_body .lazy_buttons a').live('click', function(e){ $.lazybox.close(); e.preventDefault() })
|
60
67
|
}
|
61
68
|
|
62
|
-
$(document).bind('close.lazybox', function(){
|
63
|
-
$(document).bind('center.lazybox', function(){
|
69
|
+
$(document).bind('close.lazybox', function(){ $.lazybox.close() })
|
70
|
+
$(document).bind('center.lazybox', function(){ $.lazybox.center() })
|
64
71
|
})(jQuery);
|
@@ -12,7 +12,7 @@
|
|
12
12
|
#lazybox {
|
13
13
|
background-color: #fff;
|
14
14
|
border: 1px solid #ccc;
|
15
|
-
border-radius:
|
15
|
+
border-radius: 5px;
|
16
16
|
box-shadow: 0 1px 5px #333;
|
17
17
|
color: #7F7F7F;
|
18
18
|
display: none;
|
@@ -21,9 +21,6 @@
|
|
21
21
|
position: absolute;
|
22
22
|
top: 49%;
|
23
23
|
z-index: 101;
|
24
|
-
-moz-border-radius: 10px;
|
25
|
-
-webkit-border-radius: 10px;
|
26
|
-
-khtml-border-radius: 10px;
|
27
24
|
-moz-box-shadow: 0 1px 5px #333;
|
28
25
|
-webkit-box-shadow: 0 1px 5px #333;
|
29
26
|
}
|
@@ -38,13 +35,10 @@ a#lazybox_close {
|
|
38
35
|
float: right;
|
39
36
|
font: bold 26px/100% Arial, Helvetica, sans-serif !important;
|
40
37
|
height: 25px;
|
41
|
-
margin-top: -
|
42
|
-
margin-right: -
|
38
|
+
margin-top: -37px;
|
39
|
+
margin-right: -37px;
|
43
40
|
text-align: center;
|
44
41
|
width: 25px;
|
45
|
-
-moz-border-radius: 20px;
|
46
|
-
-webkit-border-radius: 20px;
|
47
|
-
-khtml-border-radius: 20px;
|
48
42
|
-moz-box-shadow: 0 1px 5px #333;
|
49
43
|
-webkit-box-shadow: 0 1px 5px #333;
|
50
44
|
}
|
@@ -60,3 +54,5 @@ a#lazybox_close.ie {
|
|
60
54
|
}
|
61
55
|
|
62
56
|
a#lazybox_close.ie:hover { color: black; }
|
57
|
+
#lazybox .lazy_buttons { margin-top: 15px; text-align: right; }
|
58
|
+
#lazybox.confirm { max-width: 300px; }
|
metadata
CHANGED
@@ -1,13 +1,13 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: lazybox
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
hash:
|
4
|
+
hash: 31
|
5
5
|
prerelease:
|
6
6
|
segments:
|
7
7
|
- 0
|
8
8
|
- 1
|
9
|
-
-
|
10
|
-
version: 0.1.
|
9
|
+
- 2
|
10
|
+
version: 0.1.2
|
11
11
|
platform: ruby
|
12
12
|
authors:
|
13
13
|
- Alex Galushka
|
@@ -15,7 +15,7 @@ autorequire:
|
|
15
15
|
bindir: bin
|
16
16
|
cert_chain: []
|
17
17
|
|
18
|
-
date: 2012-
|
18
|
+
date: 2012-03-24 00:00:00 Z
|
19
19
|
dependencies:
|
20
20
|
- !ruby/object:Gem::Dependency
|
21
21
|
name: rails
|
@@ -46,7 +46,7 @@ dependencies:
|
|
46
46
|
version: "0"
|
47
47
|
type: :development
|
48
48
|
version_requirements: *id002
|
49
|
-
description:
|
49
|
+
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.
|
50
50
|
email:
|
51
51
|
- sexmcs@gmail.com
|
52
52
|
executables: []
|