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.
Files changed (7) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +34 -19
  3. data/app/assets/javascripts/popup.js +82 -30
  4. data/app/assets/stylesheets/popup.css +13 -9
  5. data/demo/index.html +1 -1
  6. data/server-generated-popups.gemspec +2 -3
  7. metadata +5 -18
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: fd6b9b5c2f595d47ed324ec925a5d04c6fb48aca
4
- data.tar.gz: fd98332de71dfb516f5e7f0a41df6a30c6d35d63
3
+ metadata.gz: 3c6e23546fd5a6cdca74233c0a4e652551bcc1fd
4
+ data.tar.gz: cbe0aaee8c623f0903d835bda11c32cf0b89827f
5
5
  SHA512:
6
- metadata.gz: 111e2997b56ffe771849c10fe3cee674fa59155ccf8dd58c8fa8ececc21b72864a1ed82f56fbed4d13ba1cb52968956504063c5026fc4c8b5295dfbe070bb565
7
- data.tar.gz: 814a40a31165a8181b2a90b419544b0c397868714011a961824892e4f92e38fc1b651cb0e31f42482fce13295c7d5771993176bd629ac862fad9f275ca0e7089
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
- Raise a popup from the bottom of the screen:
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
- Fall a popup from the top of the screen:
42
+ Launch the popup away through the top of the screen:
43
43
 
44
44
  ```javascript
45
- popup = Popup("<div>Hello</div>").show('down')
45
+ popup.hide('up')
46
46
  ```
47
47
 
48
- Launch the popup away through the top of the screen:
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
- popup.hide('up')
55
+ Popup("<div>Hello</div>", {padding: '20px'})
52
56
  ```
53
57
 
54
- Sink the popup down through the bottom of the screen:
58
+ Override **width** of the popup by passing the value in px:
55
59
 
56
60
  ```javascript
57
- popup.hide('down')
61
+ Popup("<div>Hello</div>", {width: 300})
58
62
  ```
59
63
 
60
- <br>
61
- Override the width of the popup by passing the value in px:
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>", {width: 300})
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 a second argument to the `show` method. Here I play an animation and attach a handler to the "Close" button:
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', function () {
71
- blink($('.heading'))
72
- $(this).on('click', '#close.button', function () {
73
- editInvoiceDetails.hide('down')
74
- })
75
+ editInvoiceDetails = Popup("<%=j render @invoice %>").show('up', {
76
+ callback: function () {
77
+ blink($('.heading'))
78
+ }
75
79
  })
76
80
  ```
77
81
 
78
- That's all I ever need from it. Do you need something else? Feel free to contribute.
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.
data/app/assets/javascripts/popup.js CHANGED
@@ -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
- contents = $(html)
7
- this.popupWindow = $('<div class="popup"></div>')
29
+ this.options = defaultsFor(options, {width: 600})
30
+
31
+ this.popupWindow = createElement('<div class="popup">' + html + '</div>')
8
32
 
9
- this.options = $.extend({}, {width: 600}, options || {})
10
- actualWidth = Math.min($(window).width(), this.options.width) // TODO: use CSS
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 ($(window).height() - this.popupWindow.height())/2
45
+ return (window.innerHeight - this.popupWindow.offsetHeight)/2
23
46
  }
24
- PopupClass.prototype.translate = function (from, to, callback) {
25
- this.popupWindow.css('top', from)
26
- this.popupWindow.animate({top: to}, callback)
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 = $('<div id="popup-backdrop"></div>')
31
- $('body').append(this.backdrop)
72
+ this.backdrop = createElement('<div id="popup-backdrop"></div>')
73
+ appendToBody(this.backdrop)
32
74
  }
33
75
  PopupClass.prototype.showBackdrop = function () {
34
- this.backdrop.css('visibility', 'visible')
35
- this.backdrop.css('opacity', 0.5)
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.css('opacity', 0)
81
+ setStyle(backdrop, {opacity: 0})
40
82
  setTimeout(function () {
41
- backdrop.css('visibility', 'hidden')
83
+ setStyle(backdrop, {visibility: 'hidden'})
42
84
  }, 400)
43
85
  }
86
+
44
87
  PopupClass.prototype.createCloseButton = function () {
45
- closeButton = $('<div class="closeButton"></div>')
88
+ closeButton = createElement('<div class="closeButton"></div>')
46
89
  margin = this.options.closeButtonPadding || this.options.padding || '16px'
47
- closeButton.css({top: margin, right: margin})
48
- popupObject = this
49
- closeButton.click(function () {
50
- popupObject.hide('down')
51
- })
52
- this.popupWindow.append(closeButton)
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 = $.extend({backdrop: true, closeButton: true}, options)
103
+ options = defaultsFor(options, {backdrop: true, closeButton: true})
57
104
 
58
- $('body').append(this.popupWindow)
59
- beyondScreen = (direction == 'up') ? '180%' : '-80%'
60
- this.translate(beyondScreen, this.distanceFromTop(), options.callback)
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
- beyondScreen = (direction == 'down') ? '180%' : '-80%'
71
- this.translate(this.distanceFromTop(), beyondScreen, function () {
72
- this.remove() // this == $('.popup') here
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()
data/app/assets/stylesheets/popup.css CHANGED
@@ -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
- position: fixed; z-index: 1040;
12
- top: 0; left: 0; bottom: 0; right: 0;
13
- background-color: black;
15
+ position: fixed; z-index: 1040;
16
+ top: 0; left: 0; bottom: 0; right: 0;
17
+ background-color: black;
14
18
 
15
- opacity: 0;
16
- transition: opacity 0.3s linear;
19
+ opacity: 0;
20
+ transition: opacity 0.3s linear;
17
21
  }
18
22
 
19
23
  .closeButton {
20
- width: 16px; height: 16px;
24
+ width: 16px; height: 16px;
21
25
 
22
- position: absolute;
23
- cursor: pointer;
24
- 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=');
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>Lorem ipsum</p>", {padding: '30px'}).show('up')
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>
data/server-generated-popups.gemspec CHANGED
@@ -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.3.8"
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.3.8
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-07-05 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'
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: []