lazybox 1.0.2 → 1.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 14ba4ad8d9f02ddba95764fc533c30d8fad8d2da
+  data.tar.gz: 3df0f542f3d540f5143bc602aa4d84d16b856350
+SHA512:
+  metadata.gz: 4e79db94d9770028368d53b3533a3b58866da7c52b99f0cdf3f4215760b7aede668bfc2ebe9ed189864d67bd34de00f2afee46d8caa13b9973e8df184dbd92cc
+  data.tar.gz: 9f6fa44ffb06c4c6b77a124f080667572862198a62427c1ed8fcab842a775ce2a1734fc849526df74cdb8e6e8098012bc258eb61e11d101ab7f2a3574d4ccc99

data/README.md

@@ -12,6 +12,11 @@ LazyBox implemented using only css and jquery without images.
 This is high perfomance modal dialogs. All unpacked files take only 5 kb.
 This is simplest solution for popup windows and custom confirmation dialogs.
 
+Upgrade to 1.1.0
+-
+
+After you upgrate the lazybox to 1.1.0 version you should add `render_lazybox` helper to your layout.
+
 Installing
 ----------
 
@@ -23,10 +28,46 @@ gem 'lazybox'
 
 Then run `bundle install` to update your application's bundle.
 
+Add to your layout helper `render_lazybox`:
+
+```slim
+  ...
+    render_lazybox
+  body
+html
+```
+
 Include in your `application.css`:
 
-```css
- *= require lazybox
+```scss
+ @include 'lazybox';
+```
+
+ There are a lot of variables you can customise:
+
+```scss
+$lazy-transition: .3s;
+$lazy-z-index:    1000;
+$lazy-overlay:    rgba(black, .7);
+$lazy-bg:         white;
+$lazy-border:     1px solid #ccc;
+$lazy-shadow:     0 1px 5px #333;
+$lazy-padding:    20px;
+$lazy-start:      scale(.7);
+$lazy-end:        scale(1);
+$lazy-close:      '×';
+```
+
+Use `$lazy-start` and `$lazy-end` to contol the animation, `$lazy-close` to set close image.
+
+You should set the variable before you include the `lazybox`
+
+```scss
+  $lazy-start:      rotate(180);
+  $lazy-end:        rotate(0);
+  $lazy-close:      url(url-to-image);
+
+  @include 'lazybox';
 ```
 
 And in `application.js`:
@@ -90,7 +131,7 @@ $.lazybox.settings = {cancelClass: "button gray", submitClass: 'button gray', ov
 or instance settings
 
 ```javascript
-$.lazybox("<div>It works!</div>",{onTop: true, opacity: 0.7, modal: false})
+$.lazybox("<div>It works!</div>",{modal: true, close: false})
 ```
 
 ###Images
@@ -104,7 +145,7 @@ Include in your `app/assets/javascripts/application.js`:
 $(document).ready(function() {
   $('a[rel*=lazybox]').lazybox();
   // or with options
-  $('a[rel*=lazybox]').lazybox({overlay: true, esc: true, close: true, modal: true, klass: 'class'});
+  $('a[rel*=lazybox]').lazybox({esc: true, close: true, modal: true, klass: 'class'});
 });
 ```
 
@@ -117,33 +158,6 @@ If there are more than one link to image you can click on image in the lazybox t
   = image_tag image2.url, height: 100
 ```
 
-Custom close image
-------------------
-
-Set 'closeImg' option to true.
-
-`application.js`:
-
-```javascript
-$(document).ready(function() {
-  $('.images a').lazybox({closeImg: true});
-});
-```
-
-Style your close:
-
-`application.css`
-
-```css
-#lazybox_close.img {
-  background: url('close.png') no-repeat;
-  width: 32px;
-  height: 32px;
-  top: -17px;
-  right: -17px;
-}
-```
-
 We can use lazybox with `turbolinks` to show page loading spinner:
 
 ```coffeescript
@@ -174,14 +188,25 @@ Turbolinks spinner
   }
 ```
 
+Display on page load
+-
+
+You can show lazybox with some content on page load. To do this you should `content_for` helper:
+
+`index.haml`
+
+```haml
+content_for :lazybox do
+  This text appears on page load
+```
+
+
 Options
 -------
 
     esc:        true|false //default true.  Close lazybox on esc press
     close:      true|false //default true.  Show close lazybox button
     modal:      true|false //default true.  Close lazybox on overlay click
-    closeImg:   true|false //default false. Use image for close link
-    onTop:      true|false //default false. Show lazybox on top instead of on center. It will use slide animation instead of fade.
     klass:      'class'                     Set class for lazybox. <div id='lazybox' class='class'>...</div>
     //confirmation options
     cancelText:   //default 'Cancel'. Cancel button text
@@ -198,7 +223,7 @@ Events
 Browser Compatibility
 ---------------------
 
-IE10 +
+IE9 +
 Chrome
 Firefox
 Opera

data/app/assets/javascripts/lazybox.js.coffee

@@ -3,15 +3,12 @@
     esc: true
     close: true
     modal: false
-    onTop: false
+    klass: ''
     cancelText: 'Cancel'
     cancelClass: 'btn'
     submitText: 'Ok'
     submitClass: 'btn'
 
-  html = "<div id='lazy_overlay'><div id='lazybox'><a id='lazy_close' href=''></a><div id='lazy_body'></div></div></div>"
-  box = overlay = close = null
-
   $.lazybox = (html, options) -> $.lazybox.show(html, options)
 
   $.extend $.lazybox,
@@ -20,23 +17,22 @@
     show: (content, options) ->
       options = init(options)
       $('#lazy_body').html(content)
-      setTimeout (-> overlay.addClass('visible')), 1
-      close.addClass('visible') if options.close && !box.hasClass('visible')
+      $('#lazy_overlay').addClass('active')
 
-    close: -> overlay.removeClass('visible') if overlay
+    close: -> $('#lazy_overlay').removeClass()
 
     confirm: (element) ->
       options = $.extend defaults, $.lazybox.settings
       message = element.data('confirm')
-      return true if !message
+      return true unless message
       $.lazybox.show('<p>'+message+'</p><div class="lazy_buttons"></div>', { klass: 'confirm' })
       element.clone().attr('class', options.submitClass).removeAttr('data-confirm').text(options.submitText).appendTo('.lazy_buttons')
       $('.lazy_buttons').append(' ')
-      $('<a>', { href: '', text: options.cancelText, 'class': 'cancel ' + options.cancelClass }).appendTo('.lazy_buttons')
+      $('<button>', { text: options.cancelText, 'class': 'cancel ' + options.cancelClass }).appendTo('.lazy_buttons')
       return false
 
   $.fn.lazybox = (options) ->
-    $(document).on 'click', this.selector, (e) ->
+    $(document).on 'click', @.selector, (e) ->
       a = $(e.currentTarget)
       href = a.attr('href')
       imagesRegexp = new RegExp('\\.(png|jpg|jpeg|gif)(\\?.*)?$', 'i')
@@ -53,25 +49,15 @@
 
   init = (options) ->
     options = $.extend {}, defaults, $.lazybox.settings, options
-    $('body:not(:has(#lazybox))').append(html)
-    box = $('#lazybox')
-    overlay = $('#lazy_overlay')
-    close = $('#lazy_close')
-    if options.klass then box.attr('class', options.klass) else box.removeClass()
-    if options.onTop then overlay.addClass('top') else overlay.removeClass('top')
-    if options.close
-      if options.closeImg then close.addClass('img') else close.removeClass('img')
-    else
-      close.removeClass()
-    if options.modal
-      overlay.unbind()
-    else
-      overlay.bind 'click', (e) ->
-        $.lazybox.close() if e.target == @
-    $(document).keyup (e) -> $.lazybox.close() if e.keyCode == 27 and options.esc
-    box.on 'click', '#lazy_close, .lazy_buttons a.cancel', (e) ->
-      $.lazybox.close()
-      e.preventDefault()
+    $('#lazybox').attr('class', options.klass)
+    $('#lazy_close').toggleClass('visible', options.close)
+    $('#lazy_overlay').one 'click', $.lazybox.close unless options.modal
+    $(document).on 'keyup.lazy', (e) ->
+      if e.keyCode == 27 and options.esc
+        $.lazybox.close()
+        $(document).off('keyup.lazy')
     return options
 
 ) jQuery
+
+$(document).on 'click', '#lazy_close, .lazy_buttons .cancel', $.lazybox.close

data/app/assets/javascripts/lazybox.js.js

@@ -0,0 +1,96 @@
+// Generated by CoffeeScript 1.4.0
+(function() {
+
+  (function($) {
+    var defaults, init;
+    defaults = {
+      esc: true,
+      close: true,
+      modal: false,
+      klass: '',
+      cancelText: 'Cancel',
+      cancelClass: 'btn',
+      submitText: 'Ok',
+      submitClass: 'btn'
+    };
+    $.lazybox = function(html, options) {
+      return $.lazybox.show(html, options);
+    };
+    $.extend($.lazybox, {
+      settings: $.extend({}, defaults),
+      show: function(content, options) {
+        options = init(options);
+        $('#lazy_body').html(content);
+        return $('#lazy_overlay').addClass('active');
+      },
+      close: function() {
+        return $('#lazy_overlay').removeClass();
+      },
+      confirm: function(element) {
+        var message, options;
+        options = $.extend(defaults, $.lazybox.settings);
+        message = element.data('confirm');
+        if (!message) {
+          return true;
+        }
+        $.lazybox.show('<p>' + message + '</p><div class="lazy_buttons"></div>', {
+          klass: 'confirm'
+        });
+        element.clone().attr('class', options.submitClass).removeAttr('data-confirm').text(options.submitText).appendTo('.lazy_buttons');
+        $('.lazy_buttons').append(' ');
+        $('<button>', {
+          text: options.cancelText,
+          'class': 'cancel ' + options.cancelClass
+        }).appendTo('.lazy_buttons');
+        return false;
+      }
+    });
+    $.fn.lazybox = function(options) {
+      return $(document).on('click', this.selector, function(e) {
+        var a, href, imagesRegexp, img;
+        a = $(e.currentTarget);
+        href = a.attr('href');
+        imagesRegexp = new RegExp('\\.(png|jpg|jpeg|gif)(\\?.*)?$', 'i');
+        e.preventDefault();
+        if (href.match(imagesRegexp)) {
+          img = new Image();
+          img.onload = function(element) {
+            return $.lazybox.show(img, options);
+          };
+          return $(img).attr({
+            'class': 'lazy-img',
+            src: href
+          });
+        } else {
+          return $.ajax({
+            url: href,
+            success: function(data) {
+              return $.lazybox.show(data, options);
+            },
+            error: function() {
+              return $.lazybox.close();
+            }
+          });
+        }
+      });
+    };
+    return init = function(options) {
+      options = $.extend({}, defaults, $.lazybox.settings, options);
+      $('#lazybox').attr('class', options.klass);
+      $('#lazy_close').toggleClass('visible', options.close);
+      if (!options.modal) {
+        $('#lazy_overlay').one('click', $.lazybox.close);
+      }
+      $(document).on('keyup.lazy', function(e) {
+        if (e.keyCode === 27 && options.esc) {
+          $.lazybox.close();
+          return $(document).off('keyup.lazy');
+        }
+      });
+      return options;
+    };
+  })(jQuery);
+
+  $(document).on('click', '#lazy_close, .lazy_buttons .cancel', $.lazybox.close);
+
+}).call(this);

data/app/assets/stylesheets/lazybox.css.scss

@@ -1,61 +1,77 @@
-$lazyOpacity: 0.7;
-$lazyTransition: 0.3s;
-$lazy-z-index: 1000;
+$lazy-transition: .3s !default;
+$lazy-z-index:    1000 !default;
+$lazy-overlay:    rgba(black, .7) !default;
+$lazy-bg:         white !default;
+$lazy-border:     1px solid #ccc !default;
+$lazy-shadow:     0 1px 5px #333 !default;
+$lazy-padding:    20px !default;
+$lazy-start:      scale(.7) !default;
+$lazy-end:        scale(1) !default;
+$lazy-close:      '×' !default;
 
 #lazy_overlay {
   visibility: hidden;
   z-index: $lazy-z-index;
-  background: rgba(0, 0, 0, $lazyOpacity);
-  bottom: 0px;
-  left: 0px;
+  background: $lazy-overlay;
+  bottom: 0;
+  left: 0;
   position: fixed;
-  right: 0px;
-  top: 0px;
+  right: 0;
+  top: 0;
   opacity: 0;
-  -webkit-transition: $lazyTransition;
-  transition: $lazyTransition;
-  &.visible { visibility: visible; opacity: 1; }
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &.top { align-items: flex-start; }
-  &.top #lazybox {
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
+  transition: opacity $lazy-transition, visibility $lazy-transition;
+  &.active {
+    visibility: visible;
+    opacity: 1;
+    + #lazybox {
+      visibility: visible;
+      transform: translate(-50%, -50%) $lazy-end;
+      opacity: 1;
+    }
   }
 }
 
 #lazybox {
-  background-color: #fff;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  box-shadow: 0 1px 5px #333;
-  padding: 20px;
-  position: relative;
+  visibility: hidden;
+  opacity: 0;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) $lazy-start;
+  background-color: $lazy-bg;
+  border: $lazy-border;
+  box-shadow: $lazy-shadow;
+  padding: $lazy-padding;
+  position: fixed;
+  box-sizing: border-box;
+  z-index: $lazy-z-index + 1;
+  overflow: auto;
+  max-height: 100vh;
+  max-width: 100vw;
+  transition: opacity $lazy-transition ease-in-out, transform $lazy-transition ease-in-out, visibility $lazy-transition;
   &.confirm { max-width: 300px; }
   .lazy_buttons { margin-top: 15px; text-align: right; }
   .lazy-img { display: block; }
-  #lazybox_body { position: relative; }
+  #lazy_body {
+    position: relative;
+  }
 }
 
-a#lazy_close {
+#lazy_close {
+  border: none;
   background: transparent;
   color: gray;
   cursor: pointer;
   display: none;
   font: bold 26px/100% Arial, Helvetica, sans-serif;
-  height: 25px;
   position: absolute;
-  right: 0;
+  right: 5px;
   text-align: center;
   top: 0;
-  width: 25px;
-  &:after { content: '×'; }
-  &.img:after { content: ''; }
+  padding: 0;
+  margin: 0;
+  transition: color .3s;
+  &:after { content: $lazy-close; }
   &:hover { color: black; }
   &.visible { display: block; }
+  &:focus { outline: none; }
 }

data/lib/lazybox.rb

@@ -1,4 +1,23 @@
 module Lazybox
+
   class Engine < Rails::Engine
   end
+
+  module Helper
+
+    def render_lazybox
+      content_tag(:div, '', id: :lazy_overlay, class: ('active' if content_for(:lazybox))) +
+        content_tag(:div, id: :lazybox) do
+        button_tag('', id: :lazy_close, class: :visible) +
+          content_tag(:div, id: :lazy_body) do
+          content_for(:lazybox)
+        end
+      end
+    end
+
+  end
+end
+
+ActiveSupport.on_load(:action_view) do
+  include Lazybox::Helper
 end

data/lib/lazybox/version.rb

@@ -1,3 +1,3 @@
 module Lazybox
-  VERSION = '1.0.2'
+  VERSION = '1.1.0'
 end

metadata

@@ -1,30 +1,27 @@
 --- !ruby/object:Gem::Specification
 name: lazybox
 version: !ruby/object:Gem::Version
-  version: 1.0.2
-  prerelease: 
+  version: 1.1.0
 platform: ruby
 authors:
 - Alex Galushka
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-07-14 00:00:00.000000000 Z
+date: 2014-12-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jquery-rails
   requirement: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
-    none: false
     requirements:
-    - - ! '>='
+    - - ">="
       - !ruby/object:Gem::Version
         version: '0'
 description: Lazybox is a jQuery-based, lightbox that can display entire remote pages,
@@ -37,33 +34,32 @@ extensions: []
 extra_rdoc_files: []
 files:
 - README.md
-- lib/lazybox/version.rb
-- lib/lazybox.rb
-- app/assets/stylesheets/lazybox.css.scss
 - app/assets/javascripts/lazybox.js.coffee
+- app/assets/javascripts/lazybox.js.js
+- app/assets/stylesheets/lazybox.css.scss
+- lib/lazybox.rb
+- lib/lazybox/version.rb
 homepage: https://github.com/galulex/lazybox
 licenses: []
+metadata: {}
 post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
-  none: false
   requirements:
-  - - ! '>='
+  - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.23
+rubygems_version: 2.2.2
 signing_key: 
-specification_version: 3
+specification_version: 4
 summary: Use LazyBox for popup windows with Rails
 test_files: []
-has_rdoc: