server-generated-popups 1.4.4 → 1.4.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +5 -5
- data/app/assets/javascripts/popup.js +139 -134
- data/server-generated-popups.gemspec +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 54c644a0cbd5e4594be54e5aa1fb197c1fe606f6
|
|
4
|
+
data.tar.gz: e64730d032cef7af4f10b046cfb6e345c283d0f9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 6cee06105c58275ab2ed8afd117aa41faf7f4bb646920d30fc5ad1d2fe150146421e76e5d6ca771b2c23c3ceb6a556d15891d52abd80af51749f6a72c0d428a5
|
|
7
|
+
data.tar.gz: f153297179c790ce05e9f3c6ba87fcea6154b89c109b95cff7c8404dec289ce5f0ef6a2f263a30b1940f36ad72eef716aae739dce0128e20d74bb2ff7777cb24
|
data/README.md
CHANGED
|
@@ -33,16 +33,16 @@ Download this repo. Grab `popup.js` and `popup.css` from the `assets` directory
|
|
|
33
33
|
|
|
34
34
|
## Usage
|
|
35
35
|
|
|
36
|
-
|
|
36
|
+
Raise 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
|
+
Sink the popup down through the bottom of the screen:
|
|
43
43
|
|
|
44
44
|
```javascript
|
|
45
|
-
popup.hide('
|
|
45
|
+
popup.hide('down')
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
### Options
|
|
@@ -63,7 +63,7 @@ Popup("<div>Hello</div>", {width: 300})
|
|
|
63
63
|
|
|
64
64
|
#### show method options
|
|
65
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:
|
|
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:
|
|
67
67
|
|
|
68
68
|
```javascript
|
|
69
69
|
Popup("<div>Hello</div>").show({closeButton: false, backdrop: false})
|
|
@@ -79,7 +79,7 @@ editInvoiceDetails = Popup("<%=j render @invoice %>").show('up', {
|
|
|
79
79
|
})
|
|
80
80
|
```
|
|
81
81
|
|
|
82
|
-
##
|
|
82
|
+
## Development
|
|
83
83
|
|
|
84
84
|
### Roadmap
|
|
85
85
|
|
|
@@ -1,134 +1,139 @@
|
|
|
1
|
-
function
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
setStyle(backdrop, {
|
|
87
|
-
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
thisObject
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
1
|
+
(function (global) {
|
|
2
|
+
global['Popup'] = function (html, options) {
|
|
3
|
+
return new PopupClass(html, options)
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
function createElement(html, style) {
|
|
8
|
+
div = document.createElement('div')
|
|
9
|
+
div.innerHTML = html
|
|
10
|
+
generated = div.firstChild
|
|
11
|
+
if (style)
|
|
12
|
+
setStyle(generated, style)
|
|
13
|
+
return generated
|
|
14
|
+
}
|
|
15
|
+
function removeElement(element) {
|
|
16
|
+
element.outerHTML = ''
|
|
17
|
+
}
|
|
18
|
+
function appendToBody(element) {
|
|
19
|
+
document.body.appendChild(element)
|
|
20
|
+
}
|
|
21
|
+
function setStyle(element, properties) {
|
|
22
|
+
Object.assign(element.style, properties)
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
function defaultsFor(options, defaultOptions) {
|
|
26
|
+
return Object.assign(defaultOptions, options)
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
// Constructs a Popup object.
|
|
31
|
+
// Options: width, padding
|
|
32
|
+
function PopupClass(html, options) {
|
|
33
|
+
this.options = defaultsFor(options, {width: 600})
|
|
34
|
+
|
|
35
|
+
this.popupWindow = createElement('<div class="popup">' + html + '</div>')
|
|
36
|
+
|
|
37
|
+
actualWidth = Math.min(window.innerWidth, this.options.width)
|
|
38
|
+
setStyle(this.popupWindow, {
|
|
39
|
+
'width': actualWidth.toString() + 'px',
|
|
40
|
+
'margin-left': (actualWidth/2 * -1).toString() + 'px',
|
|
41
|
+
'padding': this.options.padding
|
|
42
|
+
})
|
|
43
|
+
|
|
44
|
+
this.createBackdrop()
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
PopupClass.prototype.distanceFromTop = function () {
|
|
49
|
+
return (window.innerHeight - this.popupWindow.offsetHeight)/2
|
|
50
|
+
}
|
|
51
|
+
PopupClass.prototype.translate = function (start, finish, callback) {
|
|
52
|
+
if (start)
|
|
53
|
+
this.popupWindow.classList.add(start)
|
|
54
|
+
|
|
55
|
+
popupWindow = this.popupWindow
|
|
56
|
+
setTimeout( // wait for CSS to notice `start` class
|
|
57
|
+
function () { // trigger the CSS animation
|
|
58
|
+
if (isNaN(finish)) {
|
|
59
|
+
setStyle(popupWindow, {top: null}) // discard hard-coded `top` to make way
|
|
60
|
+
popupWindow.classList.add(finish) // for this CSS class' `top`
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
setStyle(popupWindow, {top: finish + 'px'})
|
|
64
|
+
}
|
|
65
|
+
setTimeout( // wait for it to finish
|
|
66
|
+
function () {
|
|
67
|
+
popupWindow.classList.remove(start)
|
|
68
|
+
if (callback)
|
|
69
|
+
callback()
|
|
70
|
+
}, 400)
|
|
71
|
+
}, 1
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
PopupClass.prototype.createBackdrop = function () {
|
|
77
|
+
this.backdrop = createElement('<div id="popup-backdrop"></div>')
|
|
78
|
+
this.hideByClickOn(this.backdrop)
|
|
79
|
+
appendToBody(this.backdrop)
|
|
80
|
+
}
|
|
81
|
+
PopupClass.prototype.showBackdrop = function () {
|
|
82
|
+
setStyle(this.backdrop, {visibility: 'visible', opacity: 0.5})
|
|
83
|
+
}
|
|
84
|
+
PopupClass.prototype.hideBackdrop = function () {
|
|
85
|
+
backdrop = this.backdrop
|
|
86
|
+
setStyle(backdrop, {opacity: 0})
|
|
87
|
+
setTimeout(function () {
|
|
88
|
+
setStyle(backdrop, {visibility: 'hidden'})
|
|
89
|
+
}, 400)
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
PopupClass.prototype.createCloseButton = function () {
|
|
93
|
+
closeButton = createElement('<div class="closeButton"></div>')
|
|
94
|
+
margin = this.options.closeButtonPadding || this.options.padding || '16px'
|
|
95
|
+
setStyle(closeButton, {top: margin, right: margin})
|
|
96
|
+
|
|
97
|
+
this.hideByClickOn(closeButton)
|
|
98
|
+
this.popupWindow.appendChild(closeButton)
|
|
99
|
+
}
|
|
100
|
+
PopupClass.prototype.hideByClickOn = function (element) {
|
|
101
|
+
thisObject = this
|
|
102
|
+
element.onclick = function () {
|
|
103
|
+
thisObject.hide('down')
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
// Slides the popup onto the screen.
|
|
109
|
+
// Options: backdrop, closeButton, callback
|
|
110
|
+
PopupClass.prototype.show = function (direction, options) {
|
|
111
|
+
options = defaultsFor(options, {backdrop: true, closeButton: true})
|
|
112
|
+
|
|
113
|
+
appendToBody(this.popupWindow)
|
|
114
|
+
start = direction == 'up' ? 'below-screen' : 'above-screen'
|
|
115
|
+
this.translate(start, this.distanceFromTop(), options.callback)
|
|
116
|
+
|
|
117
|
+
if (options.backdrop)
|
|
118
|
+
this.showBackdrop()
|
|
119
|
+
if (options.closeButton)
|
|
120
|
+
this.createCloseButton()
|
|
121
|
+
return this
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
// Slides the popup out of the screen.
|
|
126
|
+
// Accepts no options.
|
|
127
|
+
PopupClass.prototype.hide = function (direction) {
|
|
128
|
+
popupWindow = this.popupWindow
|
|
129
|
+
|
|
130
|
+
finish = direction == 'up' ? 'above-screen' : 'below-screen'
|
|
131
|
+
this.translate(null, finish, function () {
|
|
132
|
+
removeElement(popupWindow)
|
|
133
|
+
})
|
|
134
|
+
|
|
135
|
+
this.hideBackdrop()
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
})(window)
|