server-generated-popups 1.3.8 → 1.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +34 -19
- data/app/assets/javascripts/popup.js +82 -30
- data/app/assets/stylesheets/popup.css +13 -9
- data/demo/index.html +1 -1
- data/server-generated-popups.gemspec +2 -3
- metadata +5 -18
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3c6e23546fd5a6cdca74233c0a4e652551bcc1fd
|
4
|
+
data.tar.gz: cbe0aaee8c623f0903d835bda11c32cf0b89827f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9d714434162dc667df351cb733a62677986197b7ffa2e15b3c83c5197035cace9bd318bc4b77111092412530a1d12c305b42812fa7ed3532657a97aab8105d78
|
7
|
+
data.tar.gz: 2d3700f7fed1876e9804d755675532d3ed319eb21d97bda5c01396fe771c5d71db7ce669069e1a21cf71e095c96fc1041b5e4bec810c5a20504f2ad26804dc95
|
data/README.md
CHANGED
@@ -9,6 +9,8 @@ Popup("<%=j render @invoice %>").show('up')
|
|
9
9
|
|
10
10
|
![Animated demonstration](http://i.giphy.com/3oEjI0kLsPZ7u6l8ru.gif)
|
11
11
|
|
12
|
+
Check the [live demo](https://colorfulfool.github.io/server-generated-popups/demo/).
|
13
|
+
|
12
14
|
Animations, styles — all included. One line gets you a fully working solution.
|
13
15
|
|
14
16
|
Perfect with Rails and its [Server-generated JavaScript Responses](https://signalvnoise.com/posts/3697-server-generated-javascript-responses), but not limited to them.
|
@@ -17,8 +19,6 @@ The screenshot above is from [Invoices for Milestones](http://invoicesformilesto
|
|
17
19
|
|
18
20
|
## Installation
|
19
21
|
|
20
|
-
The plugin depends on jQuery, but you already have it, don't you?
|
21
|
-
|
22
22
|
### Rails
|
23
23
|
|
24
24
|
```ruby
|
@@ -33,46 +33,61 @@ Download this repo. Grab `popup.js` and `popup.css` from the `assets` directory
|
|
33
33
|
|
34
34
|
## Usage
|
35
35
|
|
36
|
-
|
36
|
+
Show a popup from the bottom of the screen:
|
37
37
|
|
38
38
|
```javascript
|
39
39
|
popup = Popup("<div>Hello</div>").show('up')
|
40
40
|
```
|
41
41
|
|
42
|
-
|
42
|
+
Launch the popup away through the top of the screen:
|
43
43
|
|
44
44
|
```javascript
|
45
|
-
popup
|
45
|
+
popup.hide('up')
|
46
46
|
```
|
47
47
|
|
48
|
-
|
48
|
+
### Options
|
49
|
+
|
50
|
+
#### Constructor options
|
51
|
+
|
52
|
+
Your popup content needs extra **padding** around it to look good? Pass the value in any units:
|
49
53
|
|
50
54
|
```javascript
|
51
|
-
|
55
|
+
Popup("<div>Hello</div>", {padding: '20px'})
|
52
56
|
```
|
53
57
|
|
54
|
-
|
58
|
+
Override **width** of the popup by passing the value in px:
|
55
59
|
|
56
60
|
```javascript
|
57
|
-
|
61
|
+
Popup("<div>Hello</div>", {width: 300})
|
58
62
|
```
|
59
63
|
|
60
|
-
|
61
|
-
|
64
|
+
#### show method options
|
65
|
+
|
66
|
+
By default the popup will show with a close button in the top right corner and a semi-transparent backdrop beind ([like this](https://colorfulfool.github.io/server-generated-popups/demo/)). You can disable either or both:
|
62
67
|
|
63
68
|
```javascript
|
64
|
-
Popup("<div>Hello</div>",
|
69
|
+
Popup("<div>Hello</div>").show({closeButton: false, backdrop: false})
|
65
70
|
```
|
66
71
|
|
67
|
-
If you need to do something after the popup slides onto the screen — pass
|
72
|
+
If you need to **do something after the popup slides onto the screen** — pass `callback` option:
|
68
73
|
|
69
74
|
```javascript
|
70
|
-
editInvoiceDetails = Popup("<%=j render @invoice %>").show('up',
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
})
|
75
|
+
editInvoiceDetails = Popup("<%=j render @invoice %>").show('up', {
|
76
|
+
callback: function () {
|
77
|
+
blink($('.heading'))
|
78
|
+
}
|
75
79
|
})
|
76
80
|
```
|
77
81
|
|
78
|
-
|
82
|
+
## Deleveopment
|
83
|
+
|
84
|
+
### Roadmap
|
85
|
+
|
86
|
+
- [ ] implement animations and positioning with CSS instead of Javascript
|
87
|
+
- [ ] drop jQuery dependence (use vanilla Javascript instead)
|
88
|
+
|
89
|
+
### Tools
|
90
|
+
|
91
|
+
Open demo/index.html in your browser. Make changes to the code, see the results in real time. 😮
|
92
|
+
|
93
|
+
That's all the help I can offer for now.
|
@@ -2,62 +2,109 @@ function Popup(html, options) {
|
|
2
2
|
return new PopupClass(html, options)
|
3
3
|
}
|
4
4
|
|
5
|
+
function createElement(html) {
|
6
|
+
div = document.createElement('div')
|
7
|
+
div.innerHTML = html
|
8
|
+
generated = div.childNodes
|
9
|
+
return (generated.length == 1 ? generated[0] : generated)
|
10
|
+
}
|
11
|
+
function removeElement(element) {
|
12
|
+
element.outerHTML = ''
|
13
|
+
}
|
14
|
+
function appendToBody(element) {
|
15
|
+
document.body.appendChild(element)
|
16
|
+
}
|
17
|
+
function setStyle(element, properties) {
|
18
|
+
Object.assign(element.style, properties)
|
19
|
+
}
|
20
|
+
|
21
|
+
function defaultsFor(options, defaultOptions) {
|
22
|
+
return Object.assign(defaultOptions, options)
|
23
|
+
}
|
24
|
+
|
25
|
+
|
26
|
+
// Constructs a Popup object.
|
27
|
+
// Options: width, padding
|
5
28
|
function PopupClass(html, options) {
|
6
|
-
|
7
|
-
|
29
|
+
this.options = defaultsFor(options, {width: 600})
|
30
|
+
|
31
|
+
this.popupWindow = createElement('<div class="popup">' + html + '</div>')
|
8
32
|
|
9
|
-
|
10
|
-
|
11
|
-
this.popupWindow.css({
|
33
|
+
actualWidth = Math.min(window.innerWidth, this.options.width)
|
34
|
+
setStyle(this.popupWindow, {
|
12
35
|
'width': actualWidth.toString() + 'px',
|
13
36
|
'margin-left': (actualWidth/2 * -1).toString() + 'px',
|
14
37
|
'padding': this.options.padding
|
15
38
|
})
|
16
|
-
this.popupWindow.append(contents)
|
17
39
|
|
18
40
|
this.createBackdrop()
|
19
41
|
}
|
20
42
|
|
43
|
+
|
21
44
|
PopupClass.prototype.distanceFromTop = function () {
|
22
|
-
return (
|
45
|
+
return (window.innerHeight - this.popupWindow.offsetHeight)/2
|
23
46
|
}
|
24
|
-
PopupClass.prototype.translate = function (
|
25
|
-
|
26
|
-
|
47
|
+
PopupClass.prototype.translate = function (start, finish, callback) {
|
48
|
+
if (start)
|
49
|
+
this.popupWindow.classList.add(start)
|
50
|
+
|
51
|
+
popupWindow = this.popupWindow
|
52
|
+
setTimeout( // wait for CSS to notice `start` class
|
53
|
+
function () { // trigger the CSS animation
|
54
|
+
setStyle(popupWindow, {top: null}) // discard the hard-coded `top`
|
55
|
+
|
56
|
+
if (isNaN(finish))
|
57
|
+
popupWindow.classList.add(finish)
|
58
|
+
else
|
59
|
+
setStyle(popupWindow, {top: finish})
|
60
|
+
setTimeout( // wait for it to finish
|
61
|
+
function () {
|
62
|
+
popupWindow.classList.remove(start)
|
63
|
+
if (callback)
|
64
|
+
callback()
|
65
|
+
}, 400)
|
66
|
+
}, 1
|
67
|
+
)
|
27
68
|
}
|
28
69
|
|
70
|
+
|
29
71
|
PopupClass.prototype.createBackdrop = function () {
|
30
|
-
this.backdrop =
|
31
|
-
|
72
|
+
this.backdrop = createElement('<div id="popup-backdrop"></div>')
|
73
|
+
appendToBody(this.backdrop)
|
32
74
|
}
|
33
75
|
PopupClass.prototype.showBackdrop = function () {
|
34
|
-
this.backdrop
|
35
|
-
this.backdrop
|
76
|
+
setStyle(this.backdrop, {visibility: 'visible'})
|
77
|
+
setStyle(this.backdrop, {opacity: 0.5})
|
36
78
|
}
|
37
79
|
PopupClass.prototype.hideBackdrop = function () {
|
38
80
|
backdrop = this.backdrop
|
39
|
-
backdrop
|
81
|
+
setStyle(backdrop, {opacity: 0})
|
40
82
|
setTimeout(function () {
|
41
|
-
backdrop
|
83
|
+
setStyle(backdrop, {visibility: 'hidden'})
|
42
84
|
}, 400)
|
43
85
|
}
|
86
|
+
|
44
87
|
PopupClass.prototype.createCloseButton = function () {
|
45
|
-
closeButton =
|
88
|
+
closeButton = createElement('<div class="closeButton"></div>')
|
46
89
|
margin = this.options.closeButtonPadding || this.options.padding || '16px'
|
47
|
-
closeButton
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
90
|
+
setStyle(closeButton, {top: margin, right: margin})
|
91
|
+
|
92
|
+
thisObject = this
|
93
|
+
closeButton.onclick = function () {
|
94
|
+
thisObject.hide('down')
|
95
|
+
}
|
96
|
+
this.popupWindow.appendChild(closeButton)
|
53
97
|
}
|
54
98
|
|
99
|
+
|
100
|
+
// Slides the popup onto the screen.
|
101
|
+
// Options: backdrop, closeButton, callback
|
55
102
|
PopupClass.prototype.show = function (direction, options) {
|
56
|
-
options =
|
103
|
+
options = defaultsFor(options, {backdrop: true, closeButton: true})
|
57
104
|
|
58
|
-
|
59
|
-
|
60
|
-
this.translate(
|
105
|
+
appendToBody(this.popupWindow)
|
106
|
+
start = direction == 'up' ? 'below-screen' : 'above-screen'
|
107
|
+
this.translate(start, this.distanceFromTop(), options.callback)
|
61
108
|
|
62
109
|
if (options.backdrop)
|
63
110
|
this.showBackdrop()
|
@@ -66,10 +113,15 @@ PopupClass.prototype.show = function (direction, options) {
|
|
66
113
|
return this
|
67
114
|
}
|
68
115
|
|
116
|
+
|
117
|
+
// Slides the popup out of the screen.
|
118
|
+
// Accepts no options.
|
69
119
|
PopupClass.prototype.hide = function (direction) {
|
70
|
-
|
71
|
-
|
72
|
-
|
120
|
+
popupWindow = this.popupWindow
|
121
|
+
|
122
|
+
finish = direction == 'up' ? 'above-screen' : 'below-screen'
|
123
|
+
this.translate(null, finish, function () {
|
124
|
+
// removeElement(popupWindow)
|
73
125
|
})
|
74
126
|
|
75
127
|
this.hideBackdrop()
|
@@ -5,21 +5,25 @@
|
|
5
5
|
|
6
6
|
box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
|
7
7
|
border-radius: 6px;
|
8
|
+
|
9
|
+
transition: all 0.4s linear;
|
8
10
|
}
|
11
|
+
.above-screen { top: -80%; }
|
12
|
+
.below-screen { top: 180%; }
|
9
13
|
|
10
14
|
#popup-backdrop {
|
11
|
-
|
12
|
-
|
13
|
-
|
15
|
+
position: fixed; z-index: 1040;
|
16
|
+
top: 0; left: 0; bottom: 0; right: 0;
|
17
|
+
background-color: black;
|
14
18
|
|
15
|
-
|
16
|
-
|
19
|
+
opacity: 0;
|
20
|
+
transition: opacity 0.3s linear;
|
17
21
|
}
|
18
22
|
|
19
23
|
.closeButton {
|
20
|
-
|
24
|
+
width: 16px; height: 16px;
|
21
25
|
|
22
|
-
|
23
|
-
|
24
|
-
|
26
|
+
position: absolute;
|
27
|
+
cursor: pointer;
|
28
|
+
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=');
|
25
29
|
}
|
data/demo/index.html
CHANGED
@@ -8,7 +8,7 @@
|
|
8
8
|
</head>
|
9
9
|
<script type="text/javascript">
|
10
10
|
$(document).ready(function () {
|
11
|
-
Popup("<h2>Hello</h2><p>
|
11
|
+
Popup("<h2>Hello</h2><p>Did you notice that close button in the top-right corner? It comes with the lib too.</p>", {padding: '30px'}).show('up')
|
12
12
|
});
|
13
13
|
</script>
|
14
14
|
<body>
|
@@ -12,7 +12,6 @@ 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.
|
16
|
-
|
17
|
-
gem.add_runtime_dependency 'jquery-rails'
|
15
|
+
gem.version = "1.4"
|
16
|
+
gem.license = 'MIT'
|
18
17
|
end
|
metadata
CHANGED
@@ -1,29 +1,15 @@
|
|
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.4'
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Anton Khamets
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-
|
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'
|
11
|
+
date: 2017-08-14 00:00:00.000000000 Z
|
12
|
+
dependencies: []
|
27
13
|
description:
|
28
14
|
email:
|
29
15
|
- colorfulfool@gmail.com
|
@@ -39,7 +25,8 @@ files:
|
|
39
25
|
- lib/server-generated-popups.rb
|
40
26
|
- server-generated-popups.gemspec
|
41
27
|
homepage: https://github.com/colorfulfool/rails-popup
|
42
|
-
licenses:
|
28
|
+
licenses:
|
29
|
+
- MIT
|
43
30
|
metadata: {}
|
44
31
|
post_install_message:
|
45
32
|
rdoc_options: []
|