lazybox 0.1.1 → 0.1.2

data/README.md

@@ -1,99 +1,141 @@
-# LazyBox
+LazyBox
+=======
 
-Lazybox is a jQuery-based, lightbox that can display entire remote pages and images.
-Use lazybox with rails 3.1 assets pipeline.
+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.
 
 LazyBox implemented using only css and jquery without images.
-This is high perfomance modal dialogs. All unpacked files take only 4 kb.
-This is simplest solution for popup windows.
+This is high perfomance modal dialogs. All unpacked files take only 5 kb.
+This is simplest solution for popup windows and custom confirmation dialogs.
 
-# Installation
+Installing
+------------
 
 Add it to your Gemfile:
 
+```ruby
     gem 'lazybox'
+```
 
 Then run `bundle install` to update your application's bundle.
 
-Include in your `app/assets/stylesheets/application.css`:
+Include in your `application.css`:
 
+```css
     /*
      * ...
      *= require lazybox
      * ...
      */
+```
 
-And in `app/assets/javascripts/application.js`:
+And in `application.js`:
 
+```javascript
     //= require lazybox
+```
 
-# Usage
+Usage
+-----
 
-Include in your `app/assets/javascripts/application.js`:
+###Remote pages
+Usual remote link:
 
-    $(document).ready(function() {
-      $('a[rel*=lazybox]').lazybox();
-      // or with options
-      $('a[rel*=lazybox]').lazybox({overlay: true, esc: true, close: true, modal: true, opacity: 0.3, cssClass: 'class'});
-    });
+```ruby
+  link_to 'Lazybox', new_model_path, :remote => true
+```
 
-In your view:
+In your controller:
 
-    link_to 'Lazybox', new_model_path, :rel => :lazybox
+```ruby
+  def new
+    @model = Model.new
+  end
 
-In your controller:
+  def create
+    @model = Model.new(params[:model])
+    render :action => :new unless @model.save
+  end
+```
 
-    def new
-      @model = Model.new
-      respond_to do |format|
-        format.js { render :layout => false }
-      end
-    end
+`new.js.haml`
 
-    def create
-      @model = Model.create(params[:model])
-    end
+```ruby
+  $.lazybox("#{escape_javascript(render :partial => 'form')}");
+```
 
-or you can set before_filter that will disable layout for ajax requests:
+`create.js.haml`
 
-    before_filter proc { |controller| (controller.action_has_layout = false) if controller.request.xhr? }
+```ruby
+  $.lazybox.close()
+  window.location.reload()
+```
+![LazyBox](http://i.imgur.com/9dmY8.png)
 
-    def new
-      @model = Model.new
-    end
+###Confirmations
 
-    def create
-      @model = Model.create(params[:model])
-    end
+You can replace standard rails confirmations with lazybox
 
-`create.js.haml`
+And in `application.js`:
+
+```javascript
+  $.rails.allowAction = $.lazybox.confirm;
+```
+
+![LazyBox](http://i.imgur.com/WmOqj.png)
 
-    - if @model.errors.any?
-      $('#lazybox_body').html("#{escape_javascript(render :partial => 'form')}");
-    - else
-      $(document).trigger('close.lazybox')
-      window.location.reload();
+for options use global lazybox settings:
 
-you can use lazybox for displaing images
+```javascript
+  $.lazybox.settings = {cancelClass: "button gray", submitClass: 'button gray', overlay: false}
+```
 
-    - link_to 'Image', image.url, :rel => :lazybox
+![LazyBox](http://i.imgur.com/CTlV4.png)
 
-# Options
+###Images
+
+```ruby
+  link_to 'Image', image.url, :rel => :lazybox
+```
+Include in your `app/assets/javascripts/application.js`:
+
+```javascript
+$(document).ready(function() {
+  $('a[rel*=lazybox]').lazybox();
+  // or with options
+  $('a[rel*=lazybox]').lazybox({overlay: true, esc: true, close: true, modal: true, klass: 'class'});
+});
+```
+
+![LazyBox](http://i.imgur.com/tywzm.png)
+
+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.
     opacity:  0.6 //default 0.3. Set opacity for lazybox overlay.
-    cssClass:    'class' // Set class for lazybox. <div id='lazybox' class='class'>...</div>
-
-# Events
-
+    klass:    'class' // Set class for lazybox. <div id='lazybox' class='class'>...</div>
+    //confirmation options
+    cancelText: //default 'Cancel'. Cancel button text.
+    submitText: //default 'Ok'. Confirm button text.
+    cancelClass: //default 'button'. Cancel button class.
+    submitClass: //default 'button'. Confirm button class.
+
+Events
+------
+
+    $.lazybox.show()
+    $.lazybox.close()
+    $.lazybox.center()
     $(document).trigger('close.lazybox')
     $(document).trigger('center.lazybox')
 
 
-# Browser Compatibility:
+Browser Compatibility
+---------------------
 
 ie7 +(for ie7 you have to set width of lazybox `#lazybox { width: 400px; }`)
 Chrome

data/lazybox.gemspec

@@ -8,7 +8,7 @@ Gem::Specification.new do |s|
   s.email       = ["sexmcs@gmail.com"]
   s.homepage    = "https://github.com/alex-galushka/lazybox"
   s.summary     = "Use LazyBox for popup windows with Rails"
-  s.description = "This is high perfomance modal dialogs for your Rails application."
+  s.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."
   s.platform    = Gem::Platform::RUBY
 
   s.files         = `git ls-files`.split("\n")

data/lib/lazybox/version.rb

@@ -1,3 +1,3 @@
 module Lazybox
-  VERSION = "0.1.1"
+  VERSION = "0.1.2"
 end

data/vendor/assets/javascripts/lazybox.js

@@ -1,64 +1,71 @@
 (function($){
+  var defaults = {overlay: true, esc: true, close: true, modal: true, opacity: 0.3, cancelText: 'Cancel', cancelClass: 'button', submitText: 'Ok', submitClass: 'button'}
+  $.lazybox = function(html){ $.lazybox.show(html) }
+  $.extend($.lazybox, {
+    settings: $.extend({}, defaults),
+    show: function(content, options){
+            init(options)
+            $('#lazybox_body').html(content)
+            $.lazybox.center()
+            $('#lazybox').fadeIn(300)
+          },
+    close: function(){
+             $('#lazybox').fadeOut(300)
+             $('#lazybox_overlay').fadeOut(500)
+           },
+    center: function(){
+              var x = (($(window).height() - $('#lazybox').outerHeight()) / 2) + $(window).scrollTop()
+              $('#lazybox').css({ top: ((x < 0) ? 20 : x), left:(($(window).width() - $('#lazybox').outerWidth()) / 2) + $(window).scrollLeft() })
+            },
+    confirm: function(element){
+               var options = $.extend(defaults, $.lazybox.settings)
+               var 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(' ')
+               $('<a>', {href: '', text: options.cancelText, class: options.cancelClass}).appendTo('.lazy_buttons')
+             }
+  });
   $.fn.lazybox = function(options){
-    var defaults = {overlay: true, esc: true, close: true, modal: true, opacity: 0.3};
-    var options = $.extend(defaults, options);
     var imagesRegexp = new RegExp('\\.(png|jpg|jpeg|gif)(\\?.*)?$', 'i')
     this.live('click', function(e){
-      var href = $(this).attr('href');
-      e.preventDefault();
-      $('body:not(:has(#lazybox))').append("<div id='lazybox'><div id='lazybox_body'></div></div>");
-      apply_settings(options);
-      if (href.match(imagesRegexp)) {
+      var href = $(this).attr('href')
+      e.preventDefault()
+      if (href.match(imagesRegexp)){
         var img = new Image()
-        img.onload = function() {
-          $('#lazybox_body').html('<img src="' + img.src + '" /></div>');
-          center_lazybox();
-          $('#lazybox').fadeIn(300);
-        }
+        img.onload = function(){ $.lazybox.show('<img src="' + img.src + '" />', options) }
         img.src = href
-      } else {
+      } else{
         $.ajax({
           url: href,
-          success: function(data){
-            $('#lazybox_body').html(data);
-            center_lazybox();
-            $('#lazybox').fadeIn(300);
-            },
-          error: function(){
-            $('#lazybox_overlay').fadeOut(500);
-          }
-        });
+          success: function(data){ $.lazybox.show(data, options) },
+          error: function(){ $.lazybox.close() }
+        })
       }
     });
   }
 
-  function close_lazybox(){
-    $('#lazybox').fadeOut(300);
-    $('#lazybox_overlay').fadeOut(500);
-  }
-
-  function center_lazybox(){
-    var x = (($(window).height() - $('#lazybox').outerHeight()) / 2) + $(window).scrollTop();
-    $('#lazybox').css({ top: ((x < 0) ? 20 : x), left:(($(window).width() - $('#lazybox').outerWidth()) / 2) + $(window).scrollLeft() });
-  }
-
-  function apply_settings(options){
+  function init(options){
+    var options = $.extend($.extend({}, defaults), $.lazybox.settings, options)
+    $('body:not(:has(#lazybox))').append("<div id='lazybox'><div id='lazybox_body'></div></div>")
     if (options.overlay) {
-      $('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay'></div>");
-      $('#lazybox_overlay').css({filter: 'alpha(opacity='+options.opacity*100+')', opacity: options.opacity});
-      $('#lazybox_overlay').fadeIn(500);
+      $('body:not(:has(#lazybox_overlay))').append("<div id='lazybox_overlay'></div>")
+      $('#lazybox_overlay').css({filter: 'alpha(opacity='+options.opacity*100+')', opacity: options.opacity})
+      $('#lazybox_overlay').fadeIn(500)
     }
-    if (options.cssClass) { $('#lazybox').addClass(options.cssClass) } else { $('#lazybox').removeClass(); }
+    if (options.klass) { $('#lazybox').removeClass().addClass(options.klass) } else { $('#lazybox').removeClass() }
     if (options.close) {
-      $('#lazybox:not(:has(#lazybox_close))').prepend($("<a id='lazybox_close' title='close'>×</a>"));
-      $('#lazybox_close').live('click', function(){ close_lazybox() });
-      if ($.browser.msie) $('#lazybox_close').addClass('ie');
-    } else $('#lazybox_close').remove();
-    if (!options.modal) { $('#lazybox_overlay').bind('click', function(){ close_lazybox() }) } else { $('#lazybox_overlay').unbind(); }
-    if (!options.modal && options.overlay) { $('#lazybox_overlay').bind('click', function(){ close_lazybox() }) } else { $('#lazybox_overlay').unbind(); }
-    $(document).keyup(function(e) { if (e.keyCode == 27 && options.esc) close_lazybox() });
+      $('#lazybox:not(:has(#lazybox_close))').prepend($("<a id='lazybox_close' title='close'>×</a>"))
+      $('#lazybox_close').live('click', function(){ $.lazybox.close() })
+      if ($.browser.msie) $('#lazybox_close').addClass('ie')
+    } else $('#lazybox_close').remove()
+    if (!options.modal) { $('#lazybox_overlay').bind('click', function(){ $.lazybox.close() }) } else { $('#lazybox_overlay').unbind() }
+    if (!options.modal && options.overlay) { $('#lazybox_overlay').bind('click', function(){ $.lazybox.close() }) } else { $('#lazybox_overlay').unbind() }
+    $(document).keyup(function(e) { if (e.keyCode == 27 && options.esc) $.lazybox.close() })
+    $('#lazybox_body .lazy_buttons a').live('click', function(e){ $.lazybox.close(); e.preventDefault() })
   }
 
-  $(document).bind('close.lazybox', function(){ close_lazybox() });
-  $(document).bind('center.lazybox', function(){ center_lazybox() });
+  $(document).bind('close.lazybox', function(){ $.lazybox.close() })
+  $(document).bind('center.lazybox', function(){ $.lazybox.center() })
 })(jQuery);

data/vendor/assets/stylesheets/lazybox.css

@@ -12,7 +12,7 @@
 #lazybox {
   background-color: #fff;
   border: 1px solid #ccc;
-  border-radius: 10px;
+  border-radius: 5px;
   box-shadow: 0 1px 5px #333;
   color: #7F7F7F;
   display: none;
@@ -21,9 +21,6 @@
   position: absolute;
   top: 49%;
   z-index: 101;
-  -moz-border-radius: 10px;
-  -webkit-border-radius: 10px;
-  -khtml-border-radius: 10px;
   -moz-box-shadow: 0 1px 5px #333;
   -webkit-box-shadow: 0 1px 5px #333;
 }
@@ -38,13 +35,10 @@ a#lazybox_close {
   float: right;
   font: bold 26px/100% Arial, Helvetica, sans-serif !important;
   height: 25px;
-  margin-top: -35px;
-  margin-right: -35px;
+  margin-top: -37px;
+  margin-right: -37px;
   text-align: center;
   width: 25px;
-  -moz-border-radius: 20px;
-  -webkit-border-radius: 20px;
-  -khtml-border-radius: 20px;
   -moz-box-shadow: 0 1px 5px #333;
   -webkit-box-shadow: 0 1px 5px #333;
 }
@@ -60,3 +54,5 @@ a#lazybox_close.ie {
 }
 
 a#lazybox_close.ie:hover { color: black; }
+#lazybox .lazy_buttons { margin-top: 15px; text-align: right; }
+#lazybox.confirm { max-width: 300px; }

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: lazybox
 version: !ruby/object:Gem::Version 
-  hash: 25
+  hash: 31
   prerelease: 
   segments: 
   - 0
   - 1
-  - 1
-  version: 0.1.1
+  - 2
+  version: 0.1.2
 platform: ruby
 authors: 
 - Alex Galushka
@@ -15,7 +15,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-02-21 00:00:00 Z
+date: 2012-03-24 00:00:00 Z
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: rails
@@ -46,7 +46,7 @@ dependencies:
         version: "0"
   type: :development
   version_requirements: *id002
-description: This is high perfomance modal dialogs for your Rails application.
+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.
 email: 
 - sexmcs@gmail.com
 executables: []