server-generated-popups 1.1.10 → 1.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +10 -11
- data/app/assets/javascripts/popup.js +40 -8
- data/app/assets/stylesheets/popup.css +16 -2
- data/demo/index.html +18 -0
- data/server-generated-popups.gemspec +3 -1
- metadata +19 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 630076eed1bfc318b8f21bbe7abdb617215718f8
|
4
|
+
data.tar.gz: 15a315841849ed114576e9d8ef0bf77f23c76d7d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8b1fcbe381bfc849aca99927bb369016d90e92befac446a26206b9d0e4e294ac834a33b7bbf88835eb0027c6badeff7a7b77b93f31b3dc6d6d79b9498d7b9400
|
7
|
+
data.tar.gz: 5435ad2604d88da62802e6022d0cd7bb3c6d8f564d41a483220baab5538e5eb3b2e22a6639ceac7bb213c79b7127e5e9d1274050879e78265e62224a13849702
|
data/README.md
CHANGED
@@ -1,7 +1,8 @@
|
|
1
|
-
|
1
|
+
Have a controller action that's supposed to respond by showing a [modal dialog](https://en.wikipedia.org/wiki/Modal_window)?
|
2
2
|
|
3
|
-
Now you can do this:
|
3
|
+
Now you can do it like this:
|
4
4
|
|
5
|
+
<sub>views/invoices/show.js.erb<sub>
|
5
6
|
```javascript
|
6
7
|
Popup("<%=j render @invoice %>").show('up')
|
7
8
|
```
|
@@ -10,11 +11,13 @@ Popup("<%=j render @invoice %>").show('up')
|
|
10
11
|
|
11
12
|
Animations, styles — all included. One line gets you a fully working solution.
|
12
13
|
|
13
|
-
Perfect with [Server-generated JavaScript Responses](https://signalvnoise.com/posts/3697-server-generated-javascript-responses)
|
14
|
+
Perfect with Rails and its [Server-generated JavaScript Responses](https://signalvnoise.com/posts/3697-server-generated-javascript-responses), but not limited to them.
|
15
|
+
|
16
|
+
The screenshot above is from [Invoices for Milestones](http://invoicesformilestones.com), where this plugin is extracted from. Invoices for Milestones is a dead simple invoicing tool for self-employed. If you work for yourself, check it out.
|
14
17
|
|
15
18
|
## Installation
|
16
19
|
|
17
|
-
The plugin depends on jQuery, but you already have it,
|
20
|
+
The plugin depends on jQuery, but you already have it, don't you?
|
18
21
|
|
19
22
|
### Rails
|
20
23
|
|
@@ -26,7 +29,7 @@ Then `require popup` into both your styleheet and javascript files.
|
|
26
29
|
|
27
30
|
### Any framework
|
28
31
|
|
29
|
-
Download this repo. Grab `popup.js` and `popup.css` from the `assets` directory and put them wherever you put JS and CSS in your framework.
|
32
|
+
Download this repo. Grab `popup.js` and `popup.css` from the `assets` directory and put them wherever you put JS and CSS in your framework. Follow examples in the following section, they are written to apply to any web framework.
|
30
33
|
|
31
34
|
## Usage
|
32
35
|
|
@@ -55,13 +58,13 @@ popup.hide('down')
|
|
55
58
|
```
|
56
59
|
|
57
60
|
<br>
|
58
|
-
Override the width of
|
61
|
+
Override the width of the popup by passing the value in px:
|
59
62
|
|
60
63
|
```javascript
|
61
64
|
Popup("<div>Hello</div>", {width: 300})
|
62
65
|
```
|
63
66
|
|
64
|
-
If you need to do something after the popup slides onto the screen — play an animation and attach a handler to the "Close" button
|
67
|
+
If you need to do something after the popup slides onto the screen — pass a second argument to the `show` method. Here I play an animation and attach a handler to the "Close" button:
|
65
68
|
|
66
69
|
```javascript
|
67
70
|
editInvoiceDetails = Popup("<%=j render @invoice %>").show('up', function () {
|
@@ -73,7 +76,3 @@ editInvoiceDetails = Popup("<%=j render @invoice %>").show('up', function () {
|
|
73
76
|
```
|
74
77
|
|
75
78
|
That's all I ever need from it. Do you need something else? Feel free to contribute.
|
76
|
-
|
77
|
-
## Credits
|
78
|
-
|
79
|
-
The code and the animated demo were extracted from [Invoices for Milestones](http://invoicesformilestones.com), a dead simple invoicing tool for self-employed. If you work for yourself, check it out.
|
@@ -9,28 +9,60 @@ function PopupClass(html, options) {
|
|
9
9
|
options = $.extend({}, {width: 300}, options || {})
|
10
10
|
this.popupWindow.css({
|
11
11
|
'width': options.width.toString() + 'px',
|
12
|
-
'margin-left': (options.width/2 * -1).toString() + 'px'
|
12
|
+
'margin-left': (options.width/2 * -1).toString() + 'px',
|
13
|
+
'padding': options.padding
|
13
14
|
})
|
14
15
|
this.popupWindow.append(contents)
|
16
|
+
|
17
|
+
this.createBackdrop()
|
15
18
|
}
|
16
19
|
|
17
20
|
PopupClass.prototype.distanceFromTop = function () {
|
18
21
|
return ($(window).height() - this.popupWindow.height())/2
|
19
22
|
}
|
20
|
-
PopupClass.prototype.
|
23
|
+
PopupClass.prototype.translate = function (from, to, callback) {
|
21
24
|
this.popupWindow.css('top', from)
|
22
25
|
this.popupWindow.animate({top: to}, callback)
|
23
26
|
}
|
24
27
|
|
25
|
-
PopupClass.prototype.
|
28
|
+
PopupClass.prototype.createBackdrop = function () {
|
29
|
+
this.backdrop = $('<div id="popup-backdrop"></div>')
|
30
|
+
$('body').append(this.backdrop)
|
31
|
+
}
|
32
|
+
PopupClass.prototype.showBackdrop = function () {
|
33
|
+
this.backdrop.css('opacity', 0.5)
|
34
|
+
}
|
35
|
+
PopupClass.prototype.hideBackdrop = function () {
|
36
|
+
this.backdrop.css('opacity', 0)
|
37
|
+
}
|
38
|
+
PopupClass.prototype.createCloseButton = function () {
|
39
|
+
closeButton = $('<div class="closeButton"></div>')
|
40
|
+
popupObject = this
|
41
|
+
closeButton.click(function () {
|
42
|
+
popupObject.hide('down')
|
43
|
+
})
|
44
|
+
this.popupWindow.append(closeButton)
|
45
|
+
}
|
46
|
+
|
47
|
+
PopupClass.prototype.show = function (direction, options) {
|
48
|
+
options = options || {}
|
49
|
+
|
26
50
|
$('body').append(this.popupWindow)
|
27
|
-
|
28
|
-
this.
|
29
|
-
|
51
|
+
beyondScreen = (direction == 'up') ? '180%' : '-80%'
|
52
|
+
this.translate(beyondScreen, this.distanceFromTop(), options.callback)
|
53
|
+
|
54
|
+
if (options.backdrop)
|
55
|
+
this.showBackdrop()
|
56
|
+
if (options.closeButton)
|
57
|
+
this.createCloseButton()
|
58
|
+
return this
|
30
59
|
}
|
60
|
+
|
31
61
|
PopupClass.prototype.hide = function (direction) {
|
32
|
-
|
33
|
-
this.
|
62
|
+
beyondScreen = (direction == 'down') ? '180%' : '-80%'
|
63
|
+
this.translate(this.distanceFromTop(), beyondScreen, function () {
|
34
64
|
this.remove() // this == $('.popup') here
|
35
65
|
})
|
66
|
+
|
67
|
+
this.hideBackdrop()
|
36
68
|
}
|
@@ -5,6 +5,20 @@
|
|
5
5
|
box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
|
6
6
|
}
|
7
7
|
|
8
|
-
|
9
|
-
|
8
|
+
#popup-backdrop {
|
9
|
+
position: fixed;
|
10
|
+
top: 0; left: 0; bottom: 0; right: 0;
|
11
|
+
background-color: black;
|
12
|
+
|
13
|
+
opacity: 0;
|
14
|
+
transition: opacity 0.3s linear;
|
15
|
+
}
|
16
|
+
|
17
|
+
.closeButton {
|
18
|
+
width: 16px; height: 16px;
|
19
|
+
top: 16px; right: 16px;
|
20
|
+
|
21
|
+
position: absolute;
|
22
|
+
cursor: pointer;
|
23
|
+
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAfxJREFUOBGVk8trU1EQxnuvgdgEpKmEFk3qpnuhG7ELiaVuijsxpFSyKgZphDwW9i9QIs07BINIhAhCRGkpbRcuuqkKrkToqlKQ0GV3SUMeN/E3JSfcphHtwMnMme+b78zckzOSTCbHstnstZELWC6Xu5pKpSakRO92u9dbrdZ+PB4P/I8GhbcajcZvwzDuCF+TH7rwILRF6ItEIpuSG2aJRGIa3jdN057DSwrnVEACRBY7nc5rwDnA75IzWyaTcbbb7a/ktsBDCusLSIIxniEQJZyF9EuROHmUeJd1FA6HH8LpKExXgfhoNBrDfWDtyImSo2XhvMcbDodjyVws+JkOJFEuly9VKpVPECftdvvdarX6kvQ9q9U6GwwGj4VjtnMCAhYKBVutVpOWxzn5iq7rt2n90Fyo4jMjqGQgEDghLlE8jf/8t2LhDxXgRubBYoyxzPLwEVeFPMzOCXATNzn5I4Ur3MQb2l9gv0r+0T8F0un0FKRtitdo+60UhEKhnxaL5QHhq15nku5b/yPm83lHvV7fo/gLJz/uM3pBr4McHXkQ/6Hw0xG4cyvF6yQPXS7XEwWaPf+Rd+xjjLPNY7qhMHlMGo+pRGLU6XT6vF6vocBBj8gL+OvNZnOHDzsuuM5ccfyMzWa77/f7a4NFg3u32/0UkQPWRrFYvPwHkWvOYv3AEzcAAAAASUVORK5CYII=');
|
10
24
|
}
|
data/demo/index.html
ADDED
@@ -0,0 +1,18 @@
|
|
1
|
+
<html>
|
2
|
+
<head>
|
3
|
+
<title>popup.js</title>
|
4
|
+
<meta charset="UTF-8">
|
5
|
+
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
|
6
|
+
<link rel="stylesheet" type="text/css" href="../app/assets/stylesheets/popup.css">
|
7
|
+
<script src="../app/assets/javascripts/popup.js"></script>
|
8
|
+
</head>
|
9
|
+
<script type="text/javascript">
|
10
|
+
$(document).ready(function () {
|
11
|
+
popup = Popup("<h2>Hello</h2><p>Lorem ipsum</p>", {padding: '16px'})
|
12
|
+
popup.show('up', {backdrop: true, closeButton: true})
|
13
|
+
});
|
14
|
+
</script>
|
15
|
+
<body>
|
16
|
+
|
17
|
+
</body>
|
18
|
+
</html>
|
@@ -12,5 +12,7 @@ Gem::Specification.new do |gem|
|
|
12
12
|
gem.test_files = gem.files.grep(%r{^(test|spec|features)/})
|
13
13
|
gem.name = "server-generated-popups"
|
14
14
|
gem.require_paths = ["lib"]
|
15
|
-
gem.version = "1.
|
15
|
+
gem.version = "1.3"
|
16
|
+
|
17
|
+
gem.add_runtime_dependency 'jquery-rails'
|
16
18
|
end
|
metadata
CHANGED
@@ -1,15 +1,29 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: server-generated-popups
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: '1.3'
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Anton Khamets
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date:
|
12
|
-
dependencies:
|
11
|
+
date: 2017-05-08 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: jquery-rails
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '0'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ">="
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '0'
|
13
27
|
description:
|
14
28
|
email:
|
15
29
|
- colorfulfool@gmail.com
|
@@ -21,6 +35,7 @@ files:
|
|
21
35
|
- README.md
|
22
36
|
- app/assets/javascripts/popup.js
|
23
37
|
- app/assets/stylesheets/popup.css
|
38
|
+
- demo/index.html
|
24
39
|
- lib/server-generated-popups.rb
|
25
40
|
- server-generated-popups.gemspec
|
26
41
|
homepage: https://github.com/colorfulfool/rails-popup
|
@@ -42,7 +57,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
42
57
|
version: '0'
|
43
58
|
requirements: []
|
44
59
|
rubyforge_project:
|
45
|
-
rubygems_version: 2.
|
60
|
+
rubygems_version: 2.4.8
|
46
61
|
signing_key:
|
47
62
|
specification_version: 4
|
48
63
|
summary: Show a popup with one line of code. Perfect for format.js responses, and
|