lazybox 0.2.6 → 1.0.0

data/README.md

@@ -42,7 +42,7 @@ Usage
 Usual remote link:
 
 ```haml
-- link_to 'Lazybox', new_model_path, :remote => true
+- link_to 'Lazybox', new_model_path, remote: true
 ```
 
 In your controller:
@@ -54,14 +54,14 @@ end
 
 def create
   @model = Model.new(params[:model])
-  render :action => :new unless @model.save
+  render action: :new unless @model.save
 end
 ```
 
 `new.js.haml`
 
 ```haml
-$.lazybox("#{j(render :partial => 'form')}");
+$.lazybox("#{j(render partial: 'form')}");
 ```
 
 `create.js.haml`
@@ -70,7 +70,6 @@ $.lazybox("#{j(render :partial => 'form')}");
 $.lazybox.close()
 window.location.reload()
 ```
-![LazyBox](http://i.imgur.com/FEYpJ.png)
 
 ###Confirmations
 
@@ -82,14 +81,11 @@ And in `application.js`:
 $.rails.allowAction = $.lazybox.confirm;
 ```
 
-![LazyBox](http://i.imgur.com/1OQdU.png)
-
 for options use global lazybox settings:
 
 ```javascript
 $.lazybox.settings = {cancelClass: "button gray", submitClass: 'button gray', overlay: false}
 ```
-![LazyBox](http://i.imgur.com/2gW9R.png)
 
 or instance settings
 
@@ -100,7 +96,7 @@ $.lazybox("<div>It works!</div>",{onTop: true, opacity: 0.7, modal: false})
 ###Images
 
 ```haml
-- link_to 'Image', image.url, :rel => :lazybox
+- link_to 'Image', image.url, rel: :lazybox
 ```
 Include in your `app/assets/javascripts/application.js`:
 
@@ -112,15 +108,13 @@ $(document).ready(function() {
 });
 ```
 
-![LazyBox](http://i.imgur.com/r6pfy.png)
-
 If there are more than one link to image you can click on image in the lazybox to show the next one
 
 ```haml
-= link_to image.url, :rel => :lazybox do
-  = image_tag image.url, :height => 100
-= link_to image2.url, :rel => :lazybox do
-  = image_tag image2.url, :height => 100
+= link_to image.url, rel: :lazybox do
+  = image_tag image.url, height: 100
+= link_to image2.url, rel: :lazybox do
+  = image_tag image2.url, height: 100
 ```
 
 Custom close image
@@ -153,15 +147,11 @@ Style your close:
 Options
 -------
 
-    overlay:    true|false //default true.  Show lazybox overlay
     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.
-    fixed:      true|false //default false. Set fixed position.
-    opacity:    0.6 //default 0.3.          Set opacity for lazybox overlay
-    speed:      400 //default 300.          Set animation speed
     klass:      'class'                     Set class for lazybox. <div id='lazybox' class='class'>...</div>
     //confirmation options
     cancelText:   //default 'Cancel'. Cancel button text
@@ -174,15 +164,16 @@ Events
 
     $.lazybox.show()
     $.lazybox.close()
-    $.lazybox.center()
 
 Browser Compatibility
 ---------------------
 
-ie7 +
+IE10 +
 Chrome
 Firefox
 Opera
 Safari
 
+### If you want to support IE < 9 you have to use version 0.2.*.
+
 Copyright© Alex Galushka

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

@@ -1,23 +1,16 @@
-( ($) ->
-  defaults = {
-    overlay: true,
-    esc: true,
-    close: true,
-    modal: true,
-    opacity: 0.3,
-    onTop: false,
-    speed: 300,
-    fixed: false,
-    cancelText: 'Cancel',
-    cancelClass: 'button',
-    submitText: 'Ok',
-    submitClass: 'button'
-  }
+(($) ->
+  defaults =
+    esc: true
+    close: true
+    modal: false
+    onTop: false
+    cancelText: 'Cancel'
+    cancelClass: 'btn'
+    submitText: 'Ok'
+    submitClass: 'btn'
 
-  html = "<div id='lazybox'><div id='lazybox_body'></div></div>"
-  box = $('#lazybox')
-  overlay = $('#lazybox_overlay')
-  close = $('#lazybox_close')
+  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)
 
@@ -26,27 +19,11 @@
 
     show: (content, options) ->
       options = init(options)
-      $('#lazybox_body').html(content)
-      $.lazybox.center(options.onTop, options.fixed)
-      effect = if options.onTop then 'slideDown' else 'fadeIn'
-      box[effect](options.speed)
-      return options
+      $('#lazy_body').html(content)
+      setTimeout (-> overlay.addClass('visible')), 1
+      close.addClass('visible') if options.close && !box.hasClass('visible')
 
-    close: (speed) ->
-      speed = speed || defaults.speed
-      effect = if (box.position().top - window.scrollY <= 0) then 'slideUp' else 'fadeOut'
-      box[effect](speed)
-      overlay.fadeOut(speed+200)
-
-    center: (onTop, fixed) =>
-      if fixed
-        y = if onTop then 0 else (box.outerHeight())/2
-        y = 20 if y < 20 and !onTop
-        box.css({ 'margin-left': -box.outerWidth()/2, 'margin-top': -y, top: (if onTop then  0 else '49%'), position: 'fixed', left: '49%'})
-      else
-        y = if onTop then 0 else (($(window).height()-$('#lazybox').outerHeight())/2)+$(window).scrollTop()
-        y = 20 if y < 20 and !onTop
-        box.css({ top: y, left:(($(window).width()-box.outerWidth())/2)+$(window).scrollLeft(), position: 'absolute', margin: 0})
+    close: -> overlay.removeClass('visible')
 
     confirm: (element) ->
       options = $.extend defaults, $.lazybox.settings
@@ -55,55 +32,43 @@
       $.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': options.cancelClass }).appendTo('.lazy_buttons')
+      $('<a>', { href: '', text: options.cancelText, 'class': 'cancel ' + options.cancelClass }).appendTo('.lazy_buttons')
       return false
 
   $.fn.lazybox = (options) ->
-    $(document).on 'click', this.selector, (e) =>
+    $(document).on 'click', this.selector, (e) ->
       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 = (element) ->
-          options = $.lazybox.show(img, options)
-          nextLink = if a.is(':last-child') then a.siblings('a[rel*=lazybox]:first') else a.next('a[rel*=lazybox]:first')
-          prevLink = if a.is(':first-child') then a.siblings('a[rel*=lazybox]:last') else a.prev('a[rel*=lazybox]:first')
-          if nextLink.length and prevLink.length
-            $('#lazybox_body:not(:has(a#next_lazy_img))').append("<a id='prev_lazy_img' href=''><b>‹</b></a><a id='next_lazy_img' href=''><b>›</b></a>")
-            $('#next_lazy_img, #prev_lazy_img').bind 'click', (event) ->
-              event.preventDefault()
-              box.fadeOut options.speed, () ->
-                if event.currentTarget.id == 'next_lazy_img' then nextLink.click() else prevLink.click()
-        $(img).attr({ 'class': 'lazy_img', src: href })
+        img.onload = (element) -> $.lazybox.show(img, options)
+        $(img).attr({ 'class': 'lazy-img', src: href })
       else
-        $.ajax({
-          url: href,
-          success: (data) => $.lazybox.show(data, options)
-          error: () => $.lazybox.close(options.speed) })
+        $.ajax
+          url: href
+          success: (data) -> $.lazybox.show(data, options)
+          error: -> $.lazybox.close()
 
   init = (options) ->
-    options = $.extend $.extend({}, defaults), $.lazybox.settings, options
-    if options.overlay
-      $('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay'></div>")
-      overlay = $('#lazybox_overlay')
-      overlay.css({ filter: 'alpha(opacity='+options.opacity*100+')', opacity: options.opacity }).fadeIn(options.speed+200)
+    options = $.extend {}, defaults, $.lazybox.settings, options
     $('body:not(:has(#lazybox))').append(html)
     box = $('#lazybox')
+    overlay = $('#lazy_overlay')
+    close = $('#lazy_close')
+    box.click (e) -> e.stopPropagation()
     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
-      box.not(':has(#lazybox_close)').prepend($("<a id='lazybox_close' title='close'></a>"))
-      close = $('#lazybox_close')
-      if options.closeImg then close.attr('class', 'img').text('') else close.removeClass().text('×')
-    else close.remove()
-    if !options.modal and options.overlay
-      overlay.bind 'click', () => $.lazybox.close(options.speed)
+      if options.closeImg then close.addClass('img') else close.removeClass('img')
     else
-      overlay.unbind()
-    $(document).keyup (e) ->
-      $.lazybox.close(options.speed) if e.keyCode == 27 and options.esc
-    box.on 'click', '#lazybox_close, .lazy_buttons a', (e) => $.lazybox.close(options.speed); e.preventDefault()
+      close.removeClass()
+    if options.modal then overlay.unbind() else overlay.bind 'click', -> $.lazybox.close()
+    $(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()
     return options
 
 ) jQuery

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

@@ -2,74 +2,37 @@
 (function() {
 
   (function($) {
-    var box, close, defaults, html, init, overlay,
-      _this = this;
+    var box, close, defaults, html, init, overlay;
     defaults = {
-      overlay: true,
       esc: true,
       close: true,
       modal: true,
-      opacity: 0.3,
       onTop: false,
-      speed: 300,
-      fixed: false,
       cancelText: 'Cancel',
-      cancelClass: 'button',
+      cancelClass: 'btn',
       submitText: 'Ok',
-      submitClass: 'button'
+      submitClass: 'btn'
     };
-    html = "<div id='lazybox'><div id='lazybox_body'></div></div>";
-    box = $('#lazybox');
-    overlay = $('#lazybox_overlay');
-    close = $('#lazybox_close');
+    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 = function(html, options) {
       return $.lazybox.show(html, options);
     };
     $.extend($.lazybox, {
       settings: $.extend({}, defaults),
       show: function(content, options) {
-        var effect;
         options = init(options);
-        $('#lazybox_body').html(content);
-        $.lazybox.center(options.onTop, options.fixed);
-        effect = options.onTop ? 'slideDown' : 'fadeIn';
-        box[effect](options.speed);
-        return options;
-      },
-      close: function(speed) {
-        var effect;
-        speed = speed || defaults.speed;
-        effect = box.position().top - window.scrollY === 0 ? 'slideUp' : 'fadeOut';
-        box[effect](speed);
-        return overlay.fadeOut(speed + 200);
-      },
-      center: function(onTop, fixed) {
-        var y;
-        if (fixed) {
-          y = onTop ? 0 : (box.outerHeight()) / 2;
-          if (y < 20 && !onTop) {
-            y = 20;
-          }
-          return box.css({
-            'margin-left': -box.outerWidth() / 2,
-            'margin-top': -y,
-            top: (onTop ? 0 : '49%'),
-            position: 'fixed',
-            left: '49%'
-          });
-        } else {
-          y = onTop ? 0 : (($(window).height() - $('#lazybox').outerHeight()) / 2) + $(window).scrollTop();
-          if (y < 20 && !onTop) {
-            y = 20;
-          }
-          return box.css({
-            top: y,
-            left: (($(window).width() - box.outerWidth()) / 2) + $(window).scrollLeft(),
-            position: 'absolute',
-            margin: 0
-          });
+        $('#lazy_body').html(content);
+        setTimeout((function() {
+          return overlay.addClass('visible');
+        }), 1);
+        if (options.close && !box.hasClass('visible')) {
+          return close.addClass('visible');
         }
       },
+      close: function() {
+        return overlay.removeClass('visible');
+      },
       confirm: function(element) {
         var message, options;
         options = $.extend(defaults, $.lazybox.settings);
@@ -85,13 +48,12 @@
         $('<a>', {
           href: '',
           text: options.cancelText,
-          'class': options.cancelClass
+          'class': 'cancel ' + options.cancelClass
         }).appendTo('.lazy_buttons');
         return false;
       }
     });
     $.fn.lazybox = function(options) {
-      var _this = this;
       return $(document).on('click', this.selector, function(e) {
         var a, href, imagesRegexp, img;
         a = $(e.currentTarget);
@@ -101,26 +63,10 @@
         if (href.match(imagesRegexp)) {
           img = new Image();
           img.onload = function(element) {
-            var nextLink, prevLink;
-            options = $.lazybox.show(img, options);
-            nextLink = a.is(':last-child') ? a.siblings('a[rel*=lazybox]:first') : a.next('a[rel*=lazybox]:first');
-            prevLink = a.is(':first-child') ? a.siblings('a[rel*=lazybox]:last') : a.prev('a[rel*=lazybox]:first');
-            if (nextLink.length && prevLink.length) {
-              $('#lazybox_body:not(:has(a#next_lazy_img))').append("<a id='prev_lazy_img' href=''><b>‹</b></a><a id='next_lazy_img' href=''><b>›</b></a>");
-              return $('#next_lazy_img, #prev_lazy_img').bind('click', function(event) {
-                event.preventDefault();
-                return box.fadeOut(options.speed, function() {
-                  if (event.currentTarget.id === 'next_lazy_img') {
-                    return nextLink.click();
-                  } else {
-                    return prevLink.click();
-                  }
-                });
-              });
-            }
+            return $.lazybox.show(img, options);
           };
           return $(img).attr({
-            'class': 'lazy_img',
+            'class': 'lazy-img',
             src: href
           });
         } else {
@@ -130,55 +76,51 @@
               return $.lazybox.show(data, options);
             },
             error: function() {
-              return $.lazybox.close(options.speed);
+              return $.lazybox.close();
             }
           });
         }
       });
     };
     return init = function(options) {
-      var _this = this;
-      options = $.extend($.extend({}, defaults), $.lazybox.settings, options);
-      if (options.overlay) {
-        $('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay'></div>");
-        overlay = $('#lazybox_overlay');
-        overlay.css({
-          filter: 'alpha(opacity=' + options.opacity * 100 + ')',
-          opacity: options.opacity
-        }).fadeIn(options.speed + 200);
-      }
+      options = $.extend({}, defaults, $.lazybox.settings, options);
       $('body:not(:has(#lazybox))').append(html);
       box = $('#lazybox');
+      overlay = $('#lazy_overlay');
+      close = $('#lazy_close');
       if (options.klass) {
         box.attr('class', options.klass);
       } else {
         box.removeClass();
       }
+      if (options.onTop) {
+        overlay.addClass('top');
+      } else {
+        overlay.removeClass('top');
+      }
       if (options.close) {
-        box.not(':has(#lazybox_close)').prepend($("<a id='lazybox_close' title='close'></a>"));
-        close = $('#lazybox_close');
         if (options.closeImg) {
-          close.attr('class', 'img').text('');
+          close.addClass('img');
         } else {
-          close.removeClass().text('×');
+          close.removeClass('img');
         }
       } else {
-        close.remove();
+        close.removeClass();
       }
-      if (!options.modal && options.overlay) {
+      if (options.modal) {
+        overlay.unbind();
+      } else {
         overlay.bind('click', function() {
-          return $.lazybox.close(options.speed);
+          return $.lazybox.close();
         });
-      } else {
-        overlay.unbind();
       }
       $(document).keyup(function(e) {
         if (e.keyCode === 27 && options.esc) {
-          return $.lazybox.close(options.speed);
+          return $.lazybox.close();
         }
       });
-      box.on('click', '#lazybox_close, .lazy_buttons a', function(e) {
-        $.lazybox.close(options.speed);
+      box.on('click', '#lazy_close, .lazy_buttons a.cancel', function(e) {
+        $.lazybox.close();
         return e.preventDefault();
       });
       return options;

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

@@ -1,12 +1,32 @@
-#lazybox_overlay {
-  background: black;
+$lazyOpacity: 0.7;
+$lazyTransition: 0.3s;
+$lazy-z-index: 1000;
+
+#lazy_overlay {
+  visibility: hidden;
+  z-index: $lazy-z-index;
+  background: rgba(0, 0, 0, $lazyOpacity);
   bottom: 0px;
-  display: none;
   left: 0px;
   position: fixed;
   right: 0px;
   top: 0px;
-  z-index: 1000;
+  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;
+  }
 }
 
 #lazybox {
@@ -14,22 +34,19 @@
   border-radius: 5px;
   border: 1px solid #ccc;
   box-shadow: 0 1px 5px #333;
-  display: none;
-  left: 49%;
   padding: 20px;
-  position: absolute;
-  top: 49%;
-  z-index: 1001;
+  position: relative;
   &.confirm { max-width: 300px; }
   .lazy_buttons { margin-top: 15px; text-align: right; }
-  img.lazy_img { display: block; }
+  .lazy-img { display: block; }
   #lazybox_body { position: relative; }
 }
 
-a#lazybox_close {
+a#lazy_close {
   background: transparent;
   color: gray;
   cursor: pointer;
+  display: none;
   font: bold 26px/100% Arial, Helvetica, sans-serif;
   height: 25px;
   position: absolute;
@@ -37,30 +54,8 @@ a#lazybox_close {
   text-align: center;
   top: 0;
   width: 25px;
+  &:after { content: '×'; }
+  &.img:after { content: ''; }
   &:hover { color: black; }
+  &.visible { display: block; }
 }
-
-a#prev_lazy_img, a#next_lazy_img {
-  background: rgba(0, 0, 0, 0);
-  height: 100%;
-  outline: none;
-  position: absolute;
-  top: 0;
-  text-decoration: none;
-  width: 33px;
-  &:hover {
-    background: rgba(0, 0, 0, 0.3);
-    b { opacity: 0.8; }
-  }
-  b {
-    color: whiteSmoke;
-    font: bold 96px/100% Arial, Helvetica, sans-serif;
-    height: 100px;
-    opacity: 0.3;
-    position: absolute;
-    top: 50%;
-    margin-top: -50px;
-  }
-}
-
-a#next_lazy_img { right: 0; }

data/lib/lazybox/version.rb

@@ -1,3 +1,3 @@
 module Lazybox
-  VERSION = "0.2.6"
+  VERSION = '1.0.0'
 end

metadata

@@ -1,32 +1,32 @@
 --- !ruby/object:Gem::Specification
 name: lazybox
 version: !ruby/object:Gem::Version
-  version: 0.2.6
   prerelease: 
+  version: 1.0.0
 platform: ruby
 authors:
 - Alex Galushka
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-09-18 00:00:00.000000000 Z
+date: 2014-03-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
-  name: jquery-rails
-  requirement: !ruby/object:Gem::Requirement
-    none: false
+  version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
     none: false
+  prerelease: false
+  type: :development
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ! '>='
       - !ruby/object:Gem::Version
         version: '0'
+    none: false
 description: Lazybox is a jQuery-based, lightbox that can display entire remote pages,
   images and confirmation dialogs. Replace standard rails confirmations with lazybox
   just added several rows to your project. Use lazybox with rails assets pipeline.
@@ -39,9 +39,9 @@ files:
 - README.md
 - lib/lazybox/version.rb
 - lib/lazybox.rb
-- app/assets/stylesheets/lazybox.css.scss
-- app/assets/javascripts/lazybox.js.js
 - app/assets/javascripts/lazybox.js.coffee
+- app/assets/javascripts/lazybox.js.js
+- app/assets/stylesheets/lazybox.css.scss
 homepage: https://github.com/galulex/lazybox
 licenses: []
 post_install_message: 
@@ -49,20 +49,20 @@ 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
+required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ! '>='
     - !ruby/object:Gem::Version
       version: '0'
+  none: false
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.23
+rubygems_version: 1.8.28
 signing_key: 
 specification_version: 3
 summary: Use LazyBox for popup windows with Rails