server-generated-popups 1.4.4 → 1.4.5
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.
- 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)
|