jquery-modal-rails 0.0.1

data/jquery-modal-rails.gemspec

@@ -0,0 +1,24 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/jquery/modal/rails/version', __FILE__)
+
+Gem::Specification.new do |s|
+  s.name        = "jquery-modal-rails"
+  s.version     = Jquery::Modal::Rails::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Dirk Eisenberg"]
+  s.email       = ["dirk.eisenberg@gmail.com"]
+  s.homepage    = "https://github.com/dei79/jquery-modal-rails"
+  s.summary     = "The simplest possible modal for jQuery for the Rails 3.1+ asset pipeline"
+  s.description = "The simplest possible modal for jQuery for the Rails 3.1+ asset pipeline based on https://github.com/kylefox/jquery-modal."
+
+  s.required_rubygems_version = ">= 1.3.6"
+
+  s.add_dependency "railties", ">= 3.2.0", "< 5.0"
+  s.add_dependency "thor",     "~> 0.14"
+  s.add_dependency "jquery-ui-rails"
+  s.add_dependency "uuidtools"
+
+  s.files        = `git ls-files`.split("\n")
+  s.executables  = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
+  s.require_path = 'lib'
+end

data/lib/jquery-modal-rails.rb

@@ -0,0 +1,3 @@
+require 'jquery/modal/rails'
+require 'jquery/modal/filters'
+require 'jquery/modal/helpers'

data/lib/jquery/modal/filters.rb

@@ -0,0 +1,9 @@
+require 'jquery/modal/filters/ajax_request_filters'
+
+module Jquery
+  module Filters
+  end
+end
+
+
+ActionController::Base.send :include, Jquery::Filters

data/lib/jquery/modal/filters/ajax_request_filters.rb

@@ -0,0 +1,18 @@
+module Jquery
+  module Filters
+
+    def self.included(base)
+
+      #
+      # This filter disables the layout for all AJAX requests so a formular in the dialog
+      # can be presentend in the layout of the master form
+      #
+      base.send :before_filter do |controller|
+        (controller.action_has_layout = false) if controller.request.xhr?
+      end
+    end
+
+  end
+end
+
+

data/lib/jquery/modal/helpers.rb

@@ -0,0 +1,9 @@
+require 'uuidtools'
+require 'jquery/modal/helpers/link_helpers.rb'
+
+module Jquery
+  module Helpers
+  end
+end
+
+ActionView::Base.send :include, Jquery::Helpers

data/lib/jquery/modal/helpers/link_helpers.rb

@@ -0,0 +1,33 @@
+module Jquery
+  module Helpers
+
+    # Creates a link tag to a given url or path and ensures that the linke will be rendered
+    # as jquery modal dialog
+    #
+    # ==== Signatures
+    #
+    #   link_to(body, url, html_options = {})
+    #   link_to(body, url)
+    #
+    def link_to_modal(body, url, html_options = {})
+      # extend the html_options
+      html_options[:rel] = "modal:open"
+      if (html_options.has_key?(:remote))
+        if (html_options[:remote] == true)
+          html_options[:rel] = "modal:open:ajaxpost"
+        end
+
+        # remove the remote tag
+        html_options.delete(:remote)
+      end
+      # check if we have an id
+      html_options[:id] = UUIDTools::UUID.random_create().to_s unless html_options.has_key?(:id)
+
+      # perform the normal link_to operation
+      html_link = link_to(body, url, html_options)
+
+      # emit both
+      html_link.html_safe
+    end
+  end
+end

data/lib/jquery/modal/rails.rb

@@ -0,0 +1,7 @@
+require 'jquery/modal/rails/engine'
+require 'jquery/modal/rails/version'
+
+module Jquery
+  module Rails
+  end
+end

data/lib/jquery/modal/rails/engine.rb

@@ -0,0 +1,8 @@
+module Jquery
+  module Modal
+    module Rails
+      class Engine < ::Rails::Engine
+      end
+    end
+  end
+end

data/lib/jquery/modal/rails/version.rb

@@ -0,0 +1,8 @@
+module Jquery
+  module Modal
+    module Rails
+      VERSION = "0.0.1"
+      JQUERY_MODAL_VERSION = "0.5"
+    end
+  end
+end

data/vendor/assets/javascripts/jquery.modal.js

@@ -0,0 +1,265 @@
+/*
+    A simple jQuery modal (http://github.com/kylefox/jquery-modal)
+    Version 0.5
+*/
+(function($) {
+
+  var current = null;
+
+  $.modal = function(el, options) {
+    var remove, target;
+    this.$body = $('body');
+    this.options = $.extend({}, $.modal.defaults, options);
+    if (el.is('a')) {
+      target = el.attr('href');
+      //Select element by id from href
+      if (/^#/.test(target)) {
+        this.$elm = $(target);
+        if (this.$elm.length !== 1) return null;
+        this.open();
+      //AJAX
+      } else {
+        this.$elm = $('<div>');
+        this.$body.append(this.$elm);
+        remove = function(event, modal) { modal.elm.remove(); };
+        this.showSpinner();
+        el.trigger($.modal.AJAX_SEND);
+        $.get(target).done(function(html) {
+          if (!current) return;
+          el.trigger($.modal.AJAX_SUCCESS);
+          current.$elm.empty().append(html).on($.modal.CLOSE, remove);
+          current.hideSpinner();
+          current.open();
+          el.trigger($.modal.AJAX_COMPLETE);
+        }).fail(function() {
+          el.trigger($.modal.AJAX_FAIL);
+          current.hideSpinner();
+          el.trigger($.modal.AJAX_COMPLETE);
+        });
+      }
+    } else {
+      this.$elm = el;
+      this.open();
+    }
+  };
+
+  $.modal.prototype = {
+    constructor: $.modal,
+
+    open: function() {
+      this.block();
+      this.show();
+      if (this.options.escapeClose) {
+        $(document).on('keydown.modal', function(event) {
+          if (event.which == 27) $.modal.close();
+        });
+      }
+      if (this.options.clickClose) this.blocker.click($.modal.close);
+    },
+
+    close: function() {
+      this.unblock();
+      this.hide();
+      $(document).off('keydown.modal');
+    },
+
+    block: function() {
+      this.$elm.trigger($.modal.BEFORE_BLOCK, [this._ctx()]);
+      this.blocker = $('<div class="jquery-modal blocker"></div>').css({
+        top: 0, right: 0, bottom: 0, left: 0,
+        width: "100%", height: "100%",
+        position: "fixed",
+        zIndex: this.options.zIndex,
+        background: this.options.overlay,
+        opacity: this.options.opacity
+      });
+      this.$body.append(this.blocker);
+      this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
+    },
+
+    unblock: function() {
+      this.blocker.remove();
+    },
+
+    show: function() {
+      this.$elm.trigger($.modal.BEFORE_OPEN, [this._ctx()]);
+      if (this.options.showClose) {
+        this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal">' + this.options.closeText + '</a>');
+        this.$elm.append(this.closeButton);
+      }
+      this.$elm.addClass(this.options.modalClass + ' current');
+      this.center();
+      this.$elm.show().trigger($.modal.OPEN, [this._ctx()]);
+    },
+
+    hide: function() {
+      this.$elm.trigger($.modal.BEFORE_CLOSE, [this._ctx()]);
+      if (this.closeButton) this.closeButton.remove();
+      this.$elm.removeClass('current').hide();
+      this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
+    },
+
+    showSpinner: function() {
+      if (!this.options.showSpinner) return;
+      this.spinner = this.spinner || $('<div class="' + this.options.modalClass + '-spinner"></div>')
+        .append(this.options.spinnerHtml);
+      this.$body.append(this.spinner);
+      this.spinner.show();
+    },
+
+    hideSpinner: function() {
+      if (this.spinner) this.spinner.remove();
+    },
+
+    center: function() {
+      this.$elm.css({
+        position: 'fixed',
+        top: "50%",
+        left: "50%",
+        marginTop: - (this.$elm.outerHeight() / 2),
+        marginLeft: - (this.$elm.outerWidth() / 2),
+        zIndex: this.options.zIndex + 1
+      });
+    },
+
+    //Return context for custom events
+    _ctx: function() {
+      return { elm: this.$elm, blocker: this.blocker, options: this.options };
+    }
+  };
+
+  //resize is alias for center for now
+  $.modal.prototype.resize = $.modal.prototype.center;
+
+  $.modal.close = function(event) {
+    if (!current) return;
+    if (event) event.preventDefault();
+    current.close();
+    current = null;
+  };
+
+  $.modal.showSpinner = function(event) {
+    if (!current) return;
+    if (event) event.preventDefault();
+    current.showSpinner();
+  }
+
+  $.modal.hideSpinner = function(event) {
+    if (!current) return;
+    if (event) event.preventDefault();
+    current.hideSpinner();
+  }
+
+  $.modal.getWidget = function() {
+    if (!current)
+        return null;
+    else
+        return current.$elm;
+  }
+
+  $.modal.resize = function() {
+    if (!current) return;
+    current.resize();
+  };
+
+  $.modal.defaults = {
+    overlay: "#000",
+    opacity: 0.75,
+    zIndex: 1,
+    escapeClose: true,
+    clickClose: true,
+    closeText: 'Close',
+    modalClass: "modal",
+    spinnerHtml: null,
+    showSpinner: true,
+    showClose: true
+  };
+
+  // Event constants
+  $.modal.BEFORE_BLOCK = 'modal:before-block';
+  $.modal.BLOCK = 'modal:block';
+  $.modal.BEFORE_OPEN = 'modal:before-open';
+  $.modal.OPEN = 'modal:open';
+  $.modal.BEFORE_CLOSE = 'modal:before-close';
+  $.modal.CLOSE = 'modal:close';
+  $.modal.AJAX_SEND = 'modal:ajax:send';
+  $.modal.AJAX_SUCCESS = 'modal:ajax:success';
+  $.modal.AJAX_FAIL = 'modal:ajax:fail';
+  $.modal.AJAX_COMPLETE = 'modal:ajax:complete';
+
+  $.fn.modal = function(options){
+    if (this.length === 1) {
+      current = new $.modal(this, options);
+    }
+    return this;
+  };
+
+    // Automatically bind links with rel="modal:close" to, well, close the modal.
+    $(document).on('click', 'a[rel="modal:close"]', $.modal.close);
+    $(document).on('click', 'a[rel="modal:open"]', function(event) {
+        event.preventDefault();
+        $(this).modal();
+    });
+
+    // Automatically bind links with rel="modal:open:ajaxpost" to
+    $(document).on('click', 'a[rel="modal:open:ajaxpost"]', function(event)
+    {
+        //ensure that our custom events will be received
+        event.preventDefault();
+
+        // show the dialog
+        $(this).modal();
+
+        // bind the event when the ajax call is completed
+        $(this).bind($.modal.AJAX_COMPLETE, function() {
+            // configure the submit handler
+            $('form').submit(function(){
+
+                // save the current form
+                current_form = $(this);
+
+                // show the spinner again
+                $.modal.showSpinner();
+
+                // send the ajax call
+                $.ajax({
+                    type: this.method,
+                    url: this.action + '.json',
+                    data: $(this).serialize(),
+                    dataType: 'html',
+                    success: function(data)
+                    {
+                        // hide the sinner
+                        $.modal.hideSpinner();
+
+                        // close the dialog
+                        $.modal.close();
+                    },
+                    error: function(data)
+                    {
+                        // hide the sinner
+                        $.modal.hideSpinner();
+
+                        // remove the older error message
+                        current_form.find(".error").remove()
+
+                        // parse the result
+                        var obj = jQuery.parseJSON(data.responseText);
+
+                        $.each(obj.errors, function(key, value)
+                        {
+
+                           current_form.find("#"+ current_form.attr("id").split('_').pop()+ "_" + key).after('<span class="error">'+ value[0] + '</span>');
+                        });
+                    }
+                });
+                return false;
+            });
+        });
+
+
+        // return false to prevent normal anchor action
+        return false;
+    });
+
+})(jQuery);

data/vendor/assets/stylesheets/jquery.modal.css

@@ -0,0 +1,45 @@
+.modal {
+  display: none;
+  width: 400px;
+  background: #fff;
+  padding: 15px 30px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -o-border-radius: 8px;
+  -ms-border-radius: 8px;
+  border-radius: 8px;
+  -webkit-box-shadow: 0 0 10px #000;
+  -moz-box-shadow: 0 0 10px #000;
+  -o-box-shadow: 0 0 10px #000;
+  -ms-box-shadow: 0 0 10px #000;
+  box-shadow: 0 0 10px #000;
+}
+
+.modal a.close-modal {
+  position: absolute;
+  top: -12.5px;
+  right: -12.5px;
+  display: block;
+  width: 30px;
+  height: 30px;
+  text-indent: -9999px;
+  background: url(close.png) no-repeat 0 0;
+}
+
+.modal-spinner {
+  display: none;
+  width: 64px;
+  height: 64px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-right: -32px;
+  margin-top: -32px;
+  background: url(spinner.gif) #111 no-repeat center center;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  -o-border-radius: 8px;
+  -ms-border-radius: 8px;
+  border-radius: 8px;
+  z-index: 9999;
+}