server-generated-popups 1.0.0 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +12 -2
- data/app/assets/javascripts/popup.js +11 -3
- data/app/assets/stylesheets/popup.css +1 -2
- 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: bb6b9600caf59f4efd9d0c83732071e4332dc886
|
|
4
|
+
data.tar.gz: da263b8c14a01eade9560e84a3719aaa80bb9eb9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 533142827a77e44b7210a45552e3e8a65cd326aa431375dc81191bb53bb07e37e18887a0096f55116cebc6167a23234e135d379c38c692869145c8aa0f9b1148
|
|
7
|
+
data.tar.gz: e4faa66bbffa25621591768e4f496cdb76950113933720ed7c82ead530e8e9c7d80f1353e728054ed80626e25d052a2f1b881607658b63b2620218d718f44ac8
|
data/README.md
CHANGED
|
@@ -6,7 +6,7 @@ Now you can do this:
|
|
|
6
6
|
Popup("<%=j render @invoice %>").show('up')
|
|
7
7
|
```
|
|
8
8
|
|
|
9
|
-
|
|
10
10
|
|
|
11
11
|
Animations, styles — all included. One line gets you a fully working solution.
|
|
12
12
|
|
|
@@ -14,18 +14,28 @@ Perfect with [Server-generated JavaScript Responses](https://signalvnoise.com/po
|
|
|
14
14
|
|
|
15
15
|
## Installation
|
|
16
16
|
|
|
17
|
+
The plugin depends on jQuery, but you already have it, do you?
|
|
18
|
+
|
|
17
19
|
### Rails
|
|
18
20
|
|
|
19
21
|
```ruby
|
|
20
22
|
gem 'server-generated-popups'
|
|
21
23
|
```
|
|
22
24
|
|
|
25
|
+
Then `require popup` into both your styleheet and javascript files.
|
|
26
|
+
|
|
23
27
|
### Any framework
|
|
24
28
|
|
|
25
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.
|
|
26
30
|
|
|
27
31
|
## Usage
|
|
28
32
|
|
|
33
|
+
Create a popup of a custom size by passing those options (values in %):
|
|
34
|
+
|
|
35
|
+
```javascript
|
|
36
|
+
Popup("<div>Hello</div>", {width: 60, fromTop: 20})
|
|
37
|
+
```
|
|
38
|
+
|
|
29
39
|
Raise a popup from the bottom of the screen:
|
|
30
40
|
|
|
31
41
|
```javascript
|
|
@@ -54,4 +64,4 @@ That's all I ever need from it. Do you need something else? Feel free to contrib
|
|
|
54
64
|
|
|
55
65
|
## Credits
|
|
56
66
|
|
|
57
|
-
[Anton Khamets](http://colorfulfool.github.io)
|
|
67
|
+
[Anton Khamets](http://colorfulfool.github.io)
|
|
@@ -1,7 +1,15 @@
|
|
|
1
|
-
function Popup(html) {
|
|
1
|
+
function Popup(html, options) {
|
|
2
2
|
contents = $(html)
|
|
3
3
|
popupWindow = $('<div class="popup"></div>')
|
|
4
|
+
|
|
5
|
+
options = $.extend({}, {width: 70, fromTop: 20}, options || {})
|
|
6
|
+
popupWindow.css({
|
|
7
|
+
'width': options.width.toString() + '%',
|
|
8
|
+
'margin-left': (options.width/2 * -1).toString() + '%'
|
|
9
|
+
})
|
|
4
10
|
popupWindow.append(contents)
|
|
11
|
+
|
|
12
|
+
distanceFromTop = options.fromTop.toString() + '%'
|
|
5
13
|
|
|
6
14
|
function move(from, to, callback) {
|
|
7
15
|
$(popupWindow).css('top', from)
|
|
@@ -11,12 +19,12 @@ function Popup(html) {
|
|
|
11
19
|
this.show = function (direction) {
|
|
12
20
|
$('body').append(popupWindow)
|
|
13
21
|
startFrom = (direction == 'up') ? '150%' : '-50%'
|
|
14
|
-
move(startFrom,
|
|
22
|
+
move(startFrom, distanceFromTop)
|
|
15
23
|
return this;
|
|
16
24
|
}
|
|
17
25
|
this.hide = function (direction) {
|
|
18
26
|
moveTo = (direction == 'down') ? '150%' : '-50%'
|
|
19
|
-
move(
|
|
27
|
+
move(distanceFromTop, moveTo, function () {
|
|
20
28
|
popupWindow.remove()
|
|
21
29
|
})
|
|
22
30
|
}
|