server-generated-popups 1.1.10 → 1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 81c141d306d989a9d4f5b84c0767257a36538e4d
-  data.tar.gz: f0a9cb33e5732d2fbb76bdc684447ca99cf95b2c
+  metadata.gz: 630076eed1bfc318b8f21bbe7abdb617215718f8
+  data.tar.gz: 15a315841849ed114576e9d8ef0bf77f23c76d7d
 SHA512:
-  metadata.gz: 5d24a6db486a9e6d4ee8103b9b3a0efbe7bbb7db897fb15f15699678c3f1db26de29c5b97f85d2b990f2183893781ad5418ec008319a2276c4992e9cd76b3651
-  data.tar.gz: 4da2429b2ec4167f5bc717c69cda86a653add8642218d0c3fb66977052ae7a2a1f1dd27232c03e2dba7a612d9398d0f1bc85ed53eee8904ebab740bbee1e0f28
+  metadata.gz: 8b1fcbe381bfc849aca99927bb369016d90e92befac446a26206b9d0e4e294ac834a33b7bbf88835eb0027c6badeff7a7b77b93f31b3dc6d6d79b9498d7b9400
+  data.tar.gz: 5435ad2604d88da62802e6022d0cd7bb3c6d8f564d41a483220baab5538e5eb3b2e22a6639ceac7bb213c79b7127e5e9d1274050879e78265e62224a13849702

data/README.md

@@ -1,7 +1,8 @@
-You need to briefly show something to the user. You decide on a popup. You look at your options: `window.open()` is easy, but is blocked by the browser when called not in a `click` handler; JavaScript plugins are over-engineered and want you to create dedicated routes, hidden links or embed your content where it doesn't belong just to accomodate them. Oh boy. Does it have to be that bad? No.
+Have a controller action that's supposed to respond by showing a [modal dialog](https://en.wikipedia.org/wiki/Modal_window)? 
 
-Now you can do this:
+Now you can do it like this:
 
+<sub>views/invoices/show.js.erb<sub>
 ```javascript
 Popup("<%=j render @invoice %>").show('up')
 ```
@@ -10,11 +11,13 @@ Popup("<%=j render @invoice %>").show('up')
 
 Animations, styles — all included. One line gets you a fully working solution.
 
-Perfect with [Server-generated JavaScript Responses](https://signalvnoise.com/posts/3697-server-generated-javascript-responses) and [Turbolinks™](https://github.com/turbolinks/turbolinks), but not limited to them.
+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
 
-The plugin depends on jQuery, but you already have it, do you?
+The plugin depends on jQuery, but you already have it, don't you?
 
 ### Rails
 
@@ -26,7 +29,7 @@ Then `require popup` into both your styleheet and javascript files.
 
 ### Any framework
 
-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.
+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. Follow examples in the following section, they are written to apply to any web framework.
 
 ## Usage
 
@@ -55,13 +58,13 @@ popup.hide('down')
 ```
 
 <br>
-Override the width of a popup by passing the value in px:
+Override the width of the popup by passing the value in px:
 
 ```javascript
 Popup("<div>Hello</div>", {width: 300})
 ```
 
-If you need to do something after the popup slides onto the screen — play an animation and attach a handler to the "Close" button — pass a second argument to the `show` method:
+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:
 
 ```javascript
 editInvoiceDetails = Popup("<%=j render @invoice %>").show('up', function () {
@@ -73,7 +76,3 @@ editInvoiceDetails = Popup("<%=j render @invoice %>").show('up', function () {
 ```
 
 That's all I ever need from it. Do you need something else? Feel free to contribute.
-
-## Credits
-
-The code and the animated demo were extracted from [Invoices for Milestones](http://invoicesformilestones.com), a dead simple invoicing tool for self-employed. If you work for yourself, check it out.

data/app/assets/javascripts/popup.js

@@ -9,28 +9,60 @@ function PopupClass(html, options) {
   options = $.extend({}, {width: 300}, options || {})
   this.popupWindow.css({
     'width': options.width.toString() + 'px', 
-    'margin-left': (options.width/2 * -1).toString() + 'px'
+    'margin-left': (options.width/2 * -1).toString() + 'px',
+    'padding': options.padding
   })
   this.popupWindow.append(contents)
+
+  this.createBackdrop()
 }
 
 PopupClass.prototype.distanceFromTop = function () {
   return ($(window).height() - this.popupWindow.height())/2
 }
-PopupClass.prototype.move = function (from, to, callback) {
+PopupClass.prototype.translate = function (from, to, callback) {
   this.popupWindow.css('top', from)
   this.popupWindow.animate({top: to}, callback)
 }
 
-PopupClass.prototype.show = function (direction, callback) {
+PopupClass.prototype.createBackdrop = function () {
+  this.backdrop = $('<div id="popup-backdrop"></div>')
+  $('body').append(this.backdrop)
+}
+PopupClass.prototype.showBackdrop = function () {
+  this.backdrop.css('opacity', 0.5)
+}
+PopupClass.prototype.hideBackdrop = function () {
+  this.backdrop.css('opacity', 0)
+}
+PopupClass.prototype.createCloseButton = function () {
+  closeButton = $('<div class="closeButton"></div>')
+  popupObject = this
+  closeButton.click(function () {
+    popupObject.hide('down')
+  })
+  this.popupWindow.append(closeButton)
+}
+
+PopupClass.prototype.show = function (direction, options) {
+  options = options || {}
+
   $('body').append(this.popupWindow)
-  startFrom = (direction == 'up') ? '180%' : '-80%'
-  this.move(startFrom, this.distanceFromTop(), callback)
-  return this;
+  beyondScreen = (direction == 'up') ? '180%' : '-80%'
+  this.translate(beyondScreen, this.distanceFromTop(), options.callback)
+
+  if (options.backdrop)
+    this.showBackdrop()
+  if (options.closeButton)
+    this.createCloseButton()
+  return this
 }
+
 PopupClass.prototype.hide = function (direction) {
-  moveTo = (direction == 'down') ? '180%' : '-80%'
-  this.move(this.distanceFromTop(), moveTo, function () {
+  beyondScreen = (direction == 'down') ? '180%' : '-80%'
+  this.translate(this.distanceFromTop(), beyondScreen, function () {
     this.remove() // this == $('.popup') here
   })
+
+  this.hideBackdrop()
 }

data/app/assets/stylesheets/popup.css

@@ -5,6 +5,20 @@
   box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
 }
 
-.invoice { 
-  padding: 10px;
+#popup-backdrop {
+	position: fixed;
+	top: 0; left: 0; bottom: 0; right: 0;
+	background-color: black;
+
+	opacity: 0;
+	transition: opacity 0.3s linear;
+}
+
+.closeButton {
+	width: 16px; height: 16px;
+	top: 16px; right: 16px;
+
+	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=');
 }

data/demo/index.html

@@ -0,0 +1,18 @@
+<html>
+  <head>
+    <title>popup.js</title>
+    <meta charset="UTF-8">
+    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="../app/assets/stylesheets/popup.css">
+    <script src="../app/assets/javascripts/popup.js"></script>
+  </head>
+  <script type="text/javascript">
+    $(document).ready(function () {
+      popup = Popup("<h2>Hello</h2><p>Lorem ipsum</p>", {padding: '16px'})
+      popup.show('up', {backdrop: true, closeButton: true})
+    });
+  </script>
+  <body>
+    
+  </body>
+</html>

data/server-generated-popups.gemspec

@@ -12,5 +12,7 @@ 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.1.10"
+  gem.version       = "1.3"
+
+  gem.add_runtime_dependency 'jquery-rails'
 end

metadata

@@ -1,15 +1,29 @@
 --- !ruby/object:Gem::Specification
 name: server-generated-popups
 version: !ruby/object:Gem::Version
-  version: 1.1.10
+  version: '1.3'
 platform: ruby
 authors:
 - Anton Khamets
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-07-21 00:00:00.000000000 Z
-dependencies: []
+date: 2017-05-08 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: 
 email:
 - colorfulfool@gmail.com
@@ -21,6 +35,7 @@ files:
 - README.md
 - app/assets/javascripts/popup.js
 - app/assets/stylesheets/popup.css
+- demo/index.html
 - lib/server-generated-popups.rb
 - server-generated-popups.gemspec
 homepage: https://github.com/colorfulfool/rails-popup
@@ -42,7 +57,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.4.8
 signing_key: 
 specification_version: 4
 summary: Show a popup with one line of code. Perfect for format.js responses, and