server-generated-popups 1.4.5 → 1.4.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 54c644a0cbd5e4594be54e5aa1fb197c1fe606f6
-  data.tar.gz: e64730d032cef7af4f10b046cfb6e345c283d0f9
+  metadata.gz: aa77283b7bc2b244f3c595ff09168d1348b3bebf
+  data.tar.gz: 50eca2cc10cd4d383d9380a19b61dd6416b76541
 SHA512:
-  metadata.gz: 6cee06105c58275ab2ed8afd117aa41faf7f4bb646920d30fc5ad1d2fe150146421e76e5d6ca771b2c23c3ceb6a556d15891d52abd80af51749f6a72c0d428a5
-  data.tar.gz: f153297179c790ce05e9f3c6ba87fcea6154b89c109b95cff7c8404dec289ce5f0ef6a2f263a30b1940f36ad72eef716aae739dce0128e20d74bb2ff7777cb24
+  metadata.gz: 3c6bd8f90ab1b7a934edd46f16449b45e2049339d2d085ba92f49bd438b1a705b322f1f39ebde4324039e394111de2e489ff8e89b5ffc20b11912d277993cbd1
+  data.tar.gz: 7b0eda5aaffbb7b96992139dfd800a45bdffd0189ebc4507ade6d0a40bb4f50e6908d662f76a7b905614e52588d6d72b0ab338f565b604ed00e9b22f5b87f20c

data/README.md

@@ -15,8 +15,6 @@ Animations, styles — all included. One line gets you a fully working solution.
 
 Perfect with Rails and its [Server-generated JavaScript Responses](https://signalvnoise.com/posts/3697-server-generated-javascript-responses), but not limited to them.
 
-The screenshot above is from [Invoices for Milestones](http://invoicesformilestones.com), where this plugin is extracted from. Invoices for Milestones is a dead simple invoicing tool for self-employed. If you work for yourself, check it out.
-
 ## Installation
 
 ### Rails
@@ -47,8 +45,6 @@ popup.hide('down')
 
 ### Options
 
-#### Constructor options
-
 Your popup content needs extra **padding** around it to look good? Pass the value in any units:
 
 ```javascript
@@ -61,20 +57,18 @@ Override **width** of the popup by passing the value in px:
 Popup("<div>Hello</div>", {width: 300})
 ```
 
-#### show method options
-
 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:
 
 ```javascript
-Popup("<div>Hello</div>").show({closeButton: false, backdrop: false})
+Popup("<div>Hello</div>", {closeButton: false, backdrop: false}).show('up')
 ```
 
-If you need to **do something after the popup slides onto the screen** — pass `callback` option:
+If you need to **do something after the popup slides onto the screen** — pass a callback to `show`.
 
 ```javascript
-editInvoiceDetails = Popup("<%=j render @invoice %>").show('up', {
-  callback: function () {
-    blink($('.heading'))
+editInvoiceDetails = Popup("<%=j render @invoice %>").show('up', function (popupWindow) {
+    popupWindow.style.backgroundColor = "red"
+    this.hide('down')
   }
 })
 ```

data/app/assets/javascripts/popup.js

@@ -1,6 +1,6 @@
 (function (global) {
-  global['Popup'] = function (html, options) {
-    return new PopupClass(html, options)
+  global['Popup'] = function (content, options) {
+    return new PopupClass(content, options)
   }
 
 
@@ -29,22 +29,32 @@
 
   // Constructs a Popup object.
   // Options: width, padding
-  function PopupClass(html, options) {
-    this.options = defaultsFor(options, {width: 600})
-
-    this.popupWindow = createElement('<div class="popup">' + html + '</div>')
-
-    actualWidth = Math.min(window.innerWidth, this.options.width)
-    setStyle(this.popupWindow, {
-      'width': actualWidth.toString() + 'px', 
-      'margin-left': (actualWidth/2 * -1).toString() + 'px',
-      'padding': this.options.padding
-    })
+  function PopupClass(content, options) {
+    this.options = defaultsFor(options, {width: 600, 
+      backdrop: true, closeButton: true})
+
+    popupWidth = Math.min(window.innerWidth, this.options.width)
+
+    this.popupWindow = createElement(
+      '<div class="popup">' + content + '</div>', 
+      {
+        'width': popupWidth.toString() + 'px', 
+        'margin-left': (popupWidth/2 * -1).toString() + 'px',
+        'padding': this.options.padding
+      }
+    )
 
     this.createBackdrop()
   }
 
 
+  PopupClass.prototype.hideByClickOn = function (element) {
+    var popupObject = this
+    element.onclick = function () {
+      popupObject.hide('down')
+    }
+  }
+  
   PopupClass.prototype.distanceFromTop = function () {
     return (window.innerHeight - this.popupWindow.offsetHeight)/2
   }
@@ -79,7 +89,7 @@
     appendToBody(this.backdrop)
   }
   PopupClass.prototype.showBackdrop = function () {
-    setStyle(this.backdrop, {visibility: 'visible', opacity: 0.5})
+    setStyle(this.backdrop, {visibility: 'visible', opacity: 1})
   }
   PopupClass.prototype.hideBackdrop = function () {
     backdrop = this.backdrop
@@ -90,33 +100,28 @@
   }
 
   PopupClass.prototype.createCloseButton = function () {
-    closeButton = createElement('<div class="closeButton"></div>')
-    margin = this.options.closeButtonPadding || this.options.padding || '16px'
-    setStyle(closeButton, {top: margin, right: margin})
+    buttonPadding = this.options.closeButtonPadding || this.options.padding || '16px'
+    
+    closeButton = createElement(
+      '<div class="closeButton"></div>', 
+      {top: buttonPadding, right: buttonPadding}
+    )
 
     this.hideByClickOn(closeButton)
     this.popupWindow.appendChild(closeButton)
   }
-  PopupClass.prototype.hideByClickOn = function (element) {
-    thisObject = this
-    element.onclick = function () {
-      thisObject.hide('down')
-    }
-  }
 
 
   // Slides the popup onto the screen.
   // Options: backdrop, closeButton, callback
-  PopupClass.prototype.show = function (direction, options) {
-    options = defaultsFor(options, {backdrop: true, closeButton: true})
-
+  PopupClass.prototype.show = function (direction, callback) {
     appendToBody(this.popupWindow)
     start = direction == 'up' ? 'below-screen' : 'above-screen'
-    this.translate(start, this.distanceFromTop(), options.callback)
+    this.translate(start, this.distanceFromTop(), callback.bind(this, this.popupWindow))
 
-    if (options.backdrop)
+    if (this.options.backdrop)
       this.showBackdrop()
-    if (options.closeButton)
+    if (this.options.closeButton)
       this.createCloseButton()
     return this
   }
@@ -136,4 +141,4 @@
   }
 
 
-})(window)
+})(window)

data/app/assets/stylesheets/popup.css

@@ -1,11 +1,12 @@
+/* This file is divided into two parts.
+
+   The first part is vital for the functioning of popups. You shouldn't edit it.
+   The second part defines the look. It is okay to edit. */
+
 .popup {
   position: fixed; z-index: 1050;
-  background: white;
   left: 50%;
 
-  box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
-  border-radius: 6px;
-
   transition: all 0.4s linear;
 }
 .above-screen { top: -80%; }
@@ -14,7 +15,6 @@
 #popup-backdrop {
   position: fixed; z-index: 1040;
   top: 0; left: 0; bottom: 0; right: 0;
-  background-color: black;
 
   opacity: 0;
   transition: opacity 0.3s linear;
@@ -25,5 +25,20 @@
 
   position: absolute;
   cursor: pointer;
-  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=');
+}
+
+/* Below is the part that's okay to rewrite */
+
+.popup {
+  background: white;
+  box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
+  border-radius: 6px;
+}
+
+#popup-backdrop {
+  background-color: rgba(0,0,0,0.5);
+}
+
+.closeButton {
+  background-image: 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=');
 }

data/demo/index.html

@@ -8,7 +8,7 @@
   </head>
   <script type="text/javascript">
     $(document).ready(function () {
-      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')
+      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', function (popupWindow) { popupWindow.style.opacity = 0.7; })
     });
   </script>
   <body>

data/server-generated-popups.gemspec

@@ -12,6 +12,6 @@ Gem::Specification.new do |gem|
   gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
   gem.name          = "server-generated-popups"
   gem.require_paths = ["lib"]
-  gem.version       = "1.4.5"
+  gem.version       = "1.4.6"
   gem.license       = 'MIT'
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: server-generated-popups
 version: !ruby/object:Gem::Version
-  version: 1.4.5
+  version: 1.4.6
 platform: ruby
 authors:
 - Anton Khamets
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2017-08-15 00:00:00.000000000 Z
+date: 2017-11-08 00:00:00.000000000 Z
 dependencies: []
 description: 
 email: