server-generated-popups 1.3.8 → 1.4

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.
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: []