kenny_dialoggins 1.0.0 → 1.0.3

data/.specification

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: kenny_dialoggins
 version: !ruby/object:Gem::Version 
-  hash: 17
+  hash: 19
   prerelease: false
   segments: 
+  - 1
   - 0
   - 2
-  - 3
-  version: 0.2.3
+  version: 1.0.2
 platform: ruby
 authors: 
 - Coroutine
@@ -17,7 +17,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-07-29 00:00:00 -05:00
+date: 2010-10-19 00:00:00 -05:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 

data/README.rdoc

@@ -32,16 +32,27 @@ What's that, you want more details?  You got it, buddy.
 <tt>render_dialog</tt> always needs a unique id for its first argument.  After that, it will
 take the same options as <tt>ActionController::Base#render</tt>.  It'll also take a few more, namely:
 
+* <tt>:class</tt> - a css class name that will be appended to the outermost div to facilitate multiple styles
 * <tt>:before_show</tt> - a Javascript function that will be invoked before the dialog is shown
 * <tt>:after_show</tt> - a Javascript function that will be invoked after the dialog has become visible
 * <tt>:before_hide</tt> - a Javascript function that will be invoked before the dialog is hidden
 * <tt>:after_hide</tt> - a Javascript function that will be invoked after the dialog has been hidden
+* <tt>&block</tt> - HTML markup that will be automatically converted to render's inline option
 
 Here's an example using the <tt>before_show</tt> option:
 
     # Create the dialog with a callback
     <%= render_dialog :footloose_dialog, :partial => "footloose", :before_show => "function() { alert('Everybody get footloose!'); }" %>
-    
+
+To invoke the dialog, use unobtrusive javascript to trap a click event and show the dialog.
+
+    // invoke the dialog
+    $("footloose_dialog_link").observe("click", function(evt) {
+      KennyDialoggins.Dialog.show("footloose_dialog");
+    });
+
+Or, if you're using javascript helper functions, you can use the show/hide helpers to accomplish the same thing.
+
     # Invoke the dialog
     <%= link_to_function "Dance party!", show_dialog(:footloose_dialog) %>
 
@@ -56,6 +67,35 @@ Kenny Dialoggins
 
 
 
+== Multiple Dialog Styles
+
+If you need to style more than one kind of dialog, just use the <tt>:class</tt> option to append a css class name 
+on the outermost div.  That'll give you a logical anchor around which you can restyle all the interior classes.
+
+Please note that the blocking iframe is automatically given an additional class name equal to the outermost div's class 
+name plus the string "_frame".  
+
+By default, the top-level class assignments are "kenny_dialoggins_dialog" and "kenny_dialoggins_dialog_frame". 
+
+If you set the <tt>:class</tt> option to <tt>:error_dialog</tt>, the top-level class assignments will be 
+"kenny_dialoggins_dialog error_dialog" and "kenny_dialoggins_dialog_frame error_dialog_frame".
+
+
+
+== IE6 Support
+
+I'm not what you'd call a huge fan of IE6, so I don't provide a blocking 
+iframe for my dialogs by default.  But I can.  You just need to ask nicely.
+
+At the top of the generated javascript file, just change the obviously-named property 
+hanging	right off of the Kenny D namespace.  Like this.
+
+	KennyDialoggins.SUPPORT_IE6_BULLSHIT = true;
+
+That's it. I do the rest.
+
+
+
 == Helpful Links
 
 * <b>Repository:</b> http://github.com/coroutine/kenny_dialoggins
@@ -76,7 +116,22 @@ in the mix.
 
 
 
-== Installation & Generators
+== Installation & Generators (Rails 3)
+
+Install me from RubyGems.org by adding a gem dependency to your Gemfile.  Bundler does 
+the rest.
+
+	gem "kenny_dialoggins"
+	
+	$ bundle install
+
+Then generate the required javascript file and the starter stylesheet.
+
+	$ rails g kenny_dialoggins
+	
+
+
+== Installation & Generators (Rails 2)
 
 Install me from RubyGems.org and add a gem dependency in the appropriate file.
 
@@ -86,23 +141,24 @@ Or install me as a plugin.
 
 	$ script/plugin install git://github.com/coroutine/kenny_dialoggins.git
 
-Either way, then generate the stylesheet and javascript files I need.
+Either way, then generate the required javascript file and the starter stylesheet.
 
 	$ script/generate kenny_dialoggins
 	
 
 
-== IE6 Support
-
-I'm not what you'd call a huge fan of IE6, so I don't provide a blocking 
-iframe for my dialogs by default.  But I can.  You just need to ask nicely.
+== Gemroll
 
-At the top of the generated javascript file, just change the obviously-named property 
-hanging	right off of the Kenny D namespace.  Like this.
+If you think I'm awesome, you should check out my soulmate 
+{Michael Hintbuble}[http://github.com/coroutine/michael_hintbuble].
 
-	KennyDialoggins.SUPPORT_IE6_BULLSHIT = true;
+Other gems by Coroutine include:
 
-That's it. I do the rest.
+* {acts_as_current}[http://github.com/coroutine/acts_as_current]
+* {acts_as_label}[http://github.com/coroutine/acts_as_label]
+* {acts_as_list_with_sti_support}[http://github.com/coroutine/acts_as_list_with_sti_support]
+* {delayed_form_observer}[http://github.com/coroutine/delayed_form_observer]
+* {tiny_navigation}[http://github.com/coroutine/tiny_navigation]
 
 
 

data/VERSION

@@ -1 +1 @@
-1.0.0
+1.0.3

data/generators/kenny_dialoggins/templates/kenny_dialoggins.css

@@ -1,20 +1,39 @@
-/**  
- * These styles are provided as examples.  Feel free to change them however you like.
- */
+/* core styles */
 .kenny_dialoggins_dialog {                   
     position:               absolute;
     padding:                1em;
-    border:                 1px solid #BBB;
-    background:             #FFF;
+    width:                  500px;
     z-index:                2;
+    box-shadow:             4px 4px 16px rgba(0,0,0,0.5);
     -moz-box-shadow:        4px 4px 16px rgba(0,0,0,0.5);
     -webkit-box-shadow:     4px 4px 16px rgba(0,0,0,0.5);
-    filter:                 alpha(opacity=100);     /* really only needed if ie6 suport is enabled */
+    opacity:                1;
+    filter:                 alpha(opacity=100);
+    background:             #fff;
+    border:                 1px solid #bbb;
 }
-
 .kenny_dialoggins_dialog_frame {
     position:               absolute;
-    border:                 none;
     z-index:                1;
-    filter:                 alpha(opacity=0);       /* really only needed if ie6 suport is enabled */
+    opacity:                0;
+    filter:                 alpha(opacity=0);
+    border:                 none;
+}
+
+
+/* error dialog */
+.error_dialog {
+    width: 300px;
+    background: #d00;
+    color: #fff;
+    border: 1px solid #d00;
+}
+
+
+/* help dialog */
+.help_dialog {
+    width: 600px;
+    background: #ccc;
+    color: #333;
+    border: 1px solid #666;
 }

data/generators/kenny_dialoggins/templates/kenny_dialoggins.js

@@ -8,7 +8,7 @@
  * Brought to you by the good folks at Coroutine.  Hire us!
  * http://coroutine.com
  */
-var KennyDialoggins = {}
+var KennyDialoggins = {};
 
 
 /**
@@ -31,8 +31,9 @@ KennyDialoggins.Dialog = function(content, options) {
     this._element       = null;
     this._frame         = null;
     this._hideListener  = this._generateHideListener();
-    this._is_showing    = false;
+    this._isShowing     = false;
     
+    this._class         = options["class"]      || ""
     this._beforeShow    = options["beforeShow"] || Prototype.emptyFunction
     this._afterShow     = options["afterShow"]  || Prototype.emptyFunction
     this._beforeHide    = options["beforeHide"] || Prototype.emptyFunction
@@ -40,13 +41,11 @@ KennyDialoggins.Dialog = function(content, options) {
     
     this._makeDialog();
     this.setContent(content);
-    document.body.appendChild(this._element);
     
     if (KennyDialoggins.SUPPORT_IE6_BULLSHIT) {
         this._makeFrame();
-        document.body.appendChild(this._frame);
     }
-}
+};
 
 
 
@@ -72,21 +71,18 @@ KennyDialoggins.Dialog._POSITION_FN_MAP = $H({
 
 
 /**
- * This method shows the dialog with the corresponding id.
+ * This method destroys the dialog with the corresponding id.
  *
  * @param {String} id   The id value of the dialog element (also the key 
  *                      in the instances hash.)
- *
- * @return {Object} an instance of KennyDialoggins.Dialog
- *
  */
-KennyDialoggins.Dialog.show = function(id) {
+KennyDialoggins.Dialog.destroy = function(id) {
     var dialog = this.instances[id];
-    if(dialog) {
-        dialog.show();
+    if (dialog) {
+        dialog.finalize();
     }
-    return dialog;
-}
+    this.instances[id] = null;
+};
 
 
 /**
@@ -100,11 +96,11 @@ KennyDialoggins.Dialog.show = function(id) {
  */
 KennyDialoggins.Dialog.hide = function(id) {
     var dialog = this.instances[id];
-    if(dialog) {
+    if (dialog) {
         dialog.hide();
     }
     return dialog;
-}
+};
 
 
 /**
@@ -118,13 +114,31 @@ KennyDialoggins.Dialog.hide = function(id) {
  *                      id is showing.
  *
  */
-KennyDialoggins.Dialog.is_showing = function(id) {
+KennyDialoggins.Dialog.isShowing = function(id) {
     var dialog = this.instances[id];
     if (!dialog) {
         throw "No dialog cound be found for the supplied id.";
     }
-    return dialog.is_showing();
-}
+    return dialog.isShowing();
+};
+
+
+/**
+ * This method shows the dialog with the corresponding id.
+ *
+ * @param {String} id   The id value of the dialog element (also the key 
+ *                      in the instances hash.)
+ *
+ * @return {Object} an instance of KennyDialoggins.Dialog
+ *
+ */
+KennyDialoggins.Dialog.show = function(id) {
+    var dialog = this.instances[id];
+    if (dialog) {
+        dialog.show();
+    }
+    return dialog;
+};
 
 
 
@@ -133,6 +147,33 @@ KennyDialoggins.Dialog.is_showing = function(id) {
 // ----------------------------------------------------------------------------
 
 Object.extend(KennyDialoggins.Dialog.prototype, {
+
+
+    /**
+     * This function creates the function that handles click events when the dialog is 
+     * shown.  The handler ignores clicks targeted from within the dialog; any click 
+     * targeted outside the dialog causes the dialog to hide itself and cancel the 
+     * observer.
+     */
+    _generateHideListener: function() {
+        return function(evt) {
+            var origin = evt.findElement(".kenny_dialoggins_dialog");
+            if (this._element !== origin) {
+                this.hide();
+            }
+        }.bind(this);
+    },
+
+
+    /**
+     * This function indicates whether or not the dialog is currently 
+     * being shown.
+     *
+     * @return {Boolean}    Whether or not the dialog is being shown.
+     */
+    _isShowing: function() {
+        return this._isShowing;
+    },
     
     /**
      * This function constructs the dialog element and hides it by default.
@@ -146,8 +187,12 @@ Object.extend(KennyDialoggins.Dialog.prototype, {
     _makeDialog: function() {
         if (!this._element) {
             this._element = new Element("DIV");
-            this._element.className = "kenny_dialoggins_dialog";
+            this._element.addClassName("kenny_dialoggins_dialog");
+            if (this._class) {
+                this._element.addClassName(this._class);
+            }
             this._element.hide();
+            document.body.appendChild(this._element);
         }
     },
     
@@ -164,26 +209,56 @@ Object.extend(KennyDialoggins.Dialog.prototype, {
     _makeFrame: function() {
         if (!this._frame) {
             this._frame = new Element("IFRAME");
-            this._frame.className = "kenny_dialoggins_dialog_frame";
+            this._frame.addClassName("kenny_dialoggins_dialog_frame");
+            if (this._class) {
+                this._element.addClassName(this._class);
+            }
             this._frame.setAttribute("src", "about:blank");
             this._frame.hide();
+            document.body.appendChild(this._frame);
         }
     },
-    
-    
+
+
     /**
-     * This function creates the function that handles click events when the dialog is 
-     * shown.  The handler ignores clicks targeted from within the dialog; any click 
-     * targeted outside the dialog causes the dialog to hide itself and cancel the 
-     * observer.
+     * This function allows the dialog object to be destroyed without
+     * creating memory leaks.
      */
-    _generateHideListener: function() {
-        return function(evt) {
-            var origin = evt.findElement(".kenny_dialoggins_dialog");
-            if (this._element !== origin) {
-                this.hide();
-            }
-        }.bind(this);
+    finalize: function() {
+        this.hide();
+
+        this._element.remove();
+        this._element = null;
+
+        if (this._frame) {
+            this._frame.remove();
+            this._frame = null;
+        }
+
+        this._hideListener = null;
+    },
+
+
+    /**
+     * This function hides the dialog. It uses a scriptaculous effect to fade out 
+     * and disconnects the click observer to prevent memory leaks.
+     */
+    hide: function() {
+        new Effect.Fade(this._element, {
+            duration: 0.2,
+            beforeStart:    this._beforeHide,
+            afterFinish:    function() {
+                this._isShowing = false;
+                this._afterHide();
+                document.stopObserving("click", this._hideListener);
+            }.bind(this)
+        });
+
+        if (this._frame) {
+            new Effect.Fade(this._frame, {
+                duration: 0.2
+            });
+        }
     },
     
     
@@ -197,6 +272,16 @@ Object.extend(KennyDialoggins.Dialog.prototype, {
     },
     
     
+    /**
+     * This function sets the position of the dialog element.
+     */
+    setPosition: function() {
+        var layout               = new Element.Layout(this._element);
+        this._element.style.top  = Math.ceil(((document.viewport.getHeight()/2) + (document.viewport.getScrollOffsets().top)  - (layout.get("padding-box-height")/2)) * 2/3) + "px";
+        this._element.style.left = Math.ceil((document.viewport.getWidth()/2)  + (document.viewport.getScrollOffsets().left) - (layout.get("padding-box-width")/2))  + "px";
+    },
+    
+    
     /**
      * This function displays the dialog. It uses a scriptaculous effect to fade in,
      * centers the dialog in the viewport (and adjusts the blocking iframe, if in use), 
@@ -204,17 +289,14 @@ Object.extend(KennyDialoggins.Dialog.prototype, {
      * the dialog.
      */
     show: function() {
-        KennyDialoggins.Dialog._POSITION_FN_MAP.each(function(pair) {
-            var method = pair.last();
-            this._element.style[pair.first()] = 
-                (document.viewport[method]() / 2 + document.viewport.getScrollOffsets()[pair.first()] - this._element[method]() / 2) + "px";
-        }.bind(this));
+        this.setPosition();
         
         if (this._frame) {
+            var layout                  = new Element.Layout(this._element);
             this._frame.style.top       = this._element.style.top;
             this._frame.style.left      = this._element.style.left;
-            this._frame.style.width     = this._element.getWidth() + "px";
-            this._frame.style.height    = this._element.getHeight() + "px";
+            this._frame.style.width     = layout.get("padding-box-width") + "px";
+            this._frame.style.height    = layout.get("padding-box-height") + "px";
             
             new Effect.Appear(this._frame, {
                 duration: 0.2
@@ -225,44 +307,10 @@ Object.extend(KennyDialoggins.Dialog.prototype, {
             duration:       0.2,
             beforeStart:    this._beforeShow,
             afterFinish:    function() {
-                this._is_showing = true;
+                this._isShowing = true;
                 this._afterShow();
                 document.observe("click", this._hideListener);
             }.bind(this)
         });
-    },
-    
-    
-    /**
-     * This function hides the dialog. It uses a scriptaculous effect to fade out 
-     * and disconnects the click observer to prevent memory leaks.
-     */
-    hide: function() {
-        new Effect.Fade(this._element, {
-            duration: 0.2,
-            beforeStart:    this._beforeHide,
-            afterFinish:    function() {
-                this._is_showing = false;
-                this._afterHide();
-                document.stopObserving("click", this._hideListener);
-            }.bind(this)
-        });
-        
-        if (this._frame) {
-            new Effect.Fade(this._frame, {
-                duration: 0.2
-            });
-        }
-    },
-    
-    
-    /**
-     * This function indicates whether or not the dialog is currently 
-     * being shown.
-     *
-     * @return {Boolean}    Whether or not the dialog is being shown.
-     */
-    is_showing: function() {
-        return this._is_showing;
     }
 });

data/kenny_dialoggins.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{kenny_dialoggins}
-  s.version = "1.0.0"
+  s.version = "1.0.3"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Coroutine", "Tim Lowrimore", "John Dugan"]
-  s.date = %q{2010-07-29}
+  s.date = %q{2010-10-19}
   s.description = %q{Kenny Dialoggins allows you to include scriptaculous dialogs in Rails applications using the same syntax employed for rendering partials.}
   s.email = %q{gems@coroutine.com}
   s.extra_rdoc_files = [

data/lib/generators/kenny_dialoggins/templates/kenny_dialoggins.css

@@ -1,20 +1,39 @@
-/**  
- * These styles are provided as examples.  Feel free to change them however you like.
- */
+/* core styles */
 .kenny_dialoggins_dialog {                   
     position:               absolute;
     padding:                1em;
-    border:                 1px solid #BBB;
-    background:             #FFF;
+    width:                  500px;
     z-index:                2;
+    box-shadow:             4px 4px 16px rgba(0,0,0,0.5);
     -moz-box-shadow:        4px 4px 16px rgba(0,0,0,0.5);
     -webkit-box-shadow:     4px 4px 16px rgba(0,0,0,0.5);
-    filter:                 alpha(opacity=100);     /* really only needed if ie6 suport is enabled */
+    opacity:                1;
+    filter:                 alpha(opacity=100);
+    background:             #fff;
+    border:                 1px solid #bbb;
 }
-
 .kenny_dialoggins_dialog_frame {
     position:               absolute;
-    border:                 none;
     z-index:                1;
-    filter:                 alpha(opacity=0);       /* really only needed if ie6 suport is enabled */
+    opacity:                0;
+    filter:                 alpha(opacity=0);
+    border:                 none;
+}
+
+
+/* error dialog */
+.error_dialog {
+    width: 300px;
+    background: #d00;
+    color: #fff;
+    border: 1px solid #d00;
+}
+
+
+/* help dialog */
+.help_dialog {
+    width: 600px;
+    background: #ccc;
+    color: #333;
+    border: 1px solid #666;
 }

data/lib/generators/kenny_dialoggins/templates/kenny_dialoggins.js

@@ -8,7 +8,7 @@
  * Brought to you by the good folks at Coroutine.  Hire us!
  * http://coroutine.com
  */
-var KennyDialoggins = {}
+var KennyDialoggins = {};
 
 
 /**
@@ -31,8 +31,9 @@ KennyDialoggins.Dialog = function(content, options) {
     this._element       = null;
     this._frame         = null;
     this._hideListener  = this._generateHideListener();
-    this._is_showing    = false;
+    this._isShowing     = false;
     
+    this._class         = options["class"]      || ""
     this._beforeShow    = options["beforeShow"] || Prototype.emptyFunction
     this._afterShow     = options["afterShow"]  || Prototype.emptyFunction
     this._beforeHide    = options["beforeHide"] || Prototype.emptyFunction
@@ -40,13 +41,11 @@ KennyDialoggins.Dialog = function(content, options) {
     
     this._makeDialog();
     this.setContent(content);
-    document.body.appendChild(this._element);
     
     if (KennyDialoggins.SUPPORT_IE6_BULLSHIT) {
         this._makeFrame();
-        document.body.appendChild(this._frame);
     }
-}
+};
 
 
 
@@ -72,21 +71,18 @@ KennyDialoggins.Dialog._POSITION_FN_MAP = $H({
 
 
 /**
- * This method shows the dialog with the corresponding id.
+ * This method destroys the dialog with the corresponding id.
  *
  * @param {String} id   The id value of the dialog element (also the key 
  *                      in the instances hash.)
- *
- * @return {Object} an instance of KennyDialoggins.Dialog
- *
  */
-KennyDialoggins.Dialog.show = function(id) {
+KennyDialoggins.Dialog.destroy = function(id) {
     var dialog = this.instances[id];
-    if(dialog) {
-        dialog.show();
+    if (dialog) {
+        dialog.finalize();
     }
-    return dialog;
-}
+    this.instances[id] = null;
+};
 
 
 /**
@@ -100,11 +96,11 @@ KennyDialoggins.Dialog.show = function(id) {
  */
 KennyDialoggins.Dialog.hide = function(id) {
     var dialog = this.instances[id];
-    if(dialog) {
+    if (dialog) {
         dialog.hide();
     }
     return dialog;
-}
+};
 
 
 /**
@@ -118,13 +114,31 @@ KennyDialoggins.Dialog.hide = function(id) {
  *                      id is showing.
  *
  */
-KennyDialoggins.Dialog.is_showing = function(id) {
+KennyDialoggins.Dialog.isShowing = function(id) {
     var dialog = this.instances[id];
     if (!dialog) {
         throw "No dialog cound be found for the supplied id.";
     }
-    return dialog.is_showing();
-}
+    return dialog.isShowing();
+};
+
+
+/**
+ * This method shows the dialog with the corresponding id.
+ *
+ * @param {String} id   The id value of the dialog element (also the key 
+ *                      in the instances hash.)
+ *
+ * @return {Object} an instance of KennyDialoggins.Dialog
+ *
+ */
+KennyDialoggins.Dialog.show = function(id) {
+    var dialog = this.instances[id];
+    if (dialog) {
+        dialog.show();
+    }
+    return dialog;
+};
 
 
 
@@ -133,6 +147,33 @@ KennyDialoggins.Dialog.is_showing = function(id) {
 // ----------------------------------------------------------------------------
 
 Object.extend(KennyDialoggins.Dialog.prototype, {
+
+
+    /**
+     * This function creates the function that handles click events when the dialog is 
+     * shown.  The handler ignores clicks targeted from within the dialog; any click 
+     * targeted outside the dialog causes the dialog to hide itself and cancel the 
+     * observer.
+     */
+    _generateHideListener: function() {
+        return function(evt) {
+            var origin = evt.findElement(".kenny_dialoggins_dialog");
+            if (this._element !== origin) {
+                this.hide();
+            }
+        }.bind(this);
+    },
+
+
+    /**
+     * This function indicates whether or not the dialog is currently 
+     * being shown.
+     *
+     * @return {Boolean}    Whether or not the dialog is being shown.
+     */
+    _isShowing: function() {
+        return this._isShowing;
+    },
     
     /**
      * This function constructs the dialog element and hides it by default.
@@ -146,8 +187,12 @@ Object.extend(KennyDialoggins.Dialog.prototype, {
     _makeDialog: function() {
         if (!this._element) {
             this._element = new Element("DIV");
-            this._element.className = "kenny_dialoggins_dialog";
+            this._element.addClassName("kenny_dialoggins_dialog");
+            if (this._class) {
+                this._element.addClassName(this._class);
+            }
             this._element.hide();
+            document.body.appendChild(this._element);
         }
     },
     
@@ -164,26 +209,56 @@ Object.extend(KennyDialoggins.Dialog.prototype, {
     _makeFrame: function() {
         if (!this._frame) {
             this._frame = new Element("IFRAME");
-            this._frame.className = "kenny_dialoggins_dialog_frame";
+            this._frame.addClassName("kenny_dialoggins_dialog_frame");
+            if (this._class) {
+                this._element.addClassName(this._class);
+            }
             this._frame.setAttribute("src", "about:blank");
             this._frame.hide();
+            document.body.appendChild(this._frame);
         }
     },
-    
-    
+
+
     /**
-     * This function creates the function that handles click events when the dialog is 
-     * shown.  The handler ignores clicks targeted from within the dialog; any click 
-     * targeted outside the dialog causes the dialog to hide itself and cancel the 
-     * observer.
+     * This function allows the dialog object to be destroyed without
+     * creating memory leaks.
      */
-    _generateHideListener: function() {
-        return function(evt) {
-            var origin = evt.findElement(".kenny_dialoggins_dialog");
-            if (this._element !== origin) {
-                this.hide();
-            }
-        }.bind(this);
+    finalize: function() {
+        this.hide();
+
+        this._element.remove();
+        this._element = null;
+
+        if (this._frame) {
+            this._frame.remove();
+            this._frame = null;
+        }
+
+        this._hideListener = null;
+    },
+
+
+    /**
+     * This function hides the dialog. It uses a scriptaculous effect to fade out 
+     * and disconnects the click observer to prevent memory leaks.
+     */
+    hide: function() {
+        new Effect.Fade(this._element, {
+            duration: 0.2,
+            beforeStart:    this._beforeHide,
+            afterFinish:    function() {
+                this._isShowing = false;
+                this._afterHide();
+                document.stopObserving("click", this._hideListener);
+            }.bind(this)
+        });
+
+        if (this._frame) {
+            new Effect.Fade(this._frame, {
+                duration: 0.2
+            });
+        }
     },
     
     
@@ -197,6 +272,16 @@ Object.extend(KennyDialoggins.Dialog.prototype, {
     },
     
     
+    /**
+     * This function sets the position of the dialog element.
+     */
+    setPosition: function() {
+        var layout               = new Element.Layout(this._element);
+        this._element.style.top  = Math.ceil(((document.viewport.getHeight()/2) + (document.viewport.getScrollOffsets().top)  - (layout.get("padding-box-height")/2)) * 2/3) + "px";
+        this._element.style.left = Math.ceil((document.viewport.getWidth()/2)  + (document.viewport.getScrollOffsets().left) - (layout.get("padding-box-width")/2))  + "px";
+    },
+    
+    
     /**
      * This function displays the dialog. It uses a scriptaculous effect to fade in,
      * centers the dialog in the viewport (and adjusts the blocking iframe, if in use), 
@@ -204,17 +289,14 @@ Object.extend(KennyDialoggins.Dialog.prototype, {
      * the dialog.
      */
     show: function() {
-        KennyDialoggins.Dialog._POSITION_FN_MAP.each(function(pair) {
-            var method = pair.last();
-            this._element.style[pair.first()] = 
-                (document.viewport[method]() / 2 + document.viewport.getScrollOffsets()[pair.first()] - this._element[method]() / 2) + "px";
-        }.bind(this));
+        this.setPosition();
         
         if (this._frame) {
+            var layout                  = new Element.Layout(this._element);
             this._frame.style.top       = this._element.style.top;
             this._frame.style.left      = this._element.style.left;
-            this._frame.style.width     = this._element.getWidth() + "px";
-            this._frame.style.height    = this._element.getHeight() + "px";
+            this._frame.style.width     = layout.get("padding-box-width") + "px";
+            this._frame.style.height    = layout.get("padding-box-height") + "px";
             
             new Effect.Appear(this._frame, {
                 duration: 0.2
@@ -225,44 +307,10 @@ Object.extend(KennyDialoggins.Dialog.prototype, {
             duration:       0.2,
             beforeStart:    this._beforeShow,
             afterFinish:    function() {
-                this._is_showing = true;
+                this._isShowing = true;
                 this._afterShow();
                 document.observe("click", this._hideListener);
             }.bind(this)
         });
-    },
-    
-    
-    /**
-     * This function hides the dialog. It uses a scriptaculous effect to fade out 
-     * and disconnects the click observer to prevent memory leaks.
-     */
-    hide: function() {
-        new Effect.Fade(this._element, {
-            duration: 0.2,
-            beforeStart:    this._beforeHide,
-            afterFinish:    function() {
-                this._is_showing = false;
-                this._afterHide();
-                document.stopObserving("click", this._hideListener);
-            }.bind(this)
-        });
-        
-        if (this._frame) {
-            new Effect.Fade(this._frame, {
-                duration: 0.2
-            });
-        }
-    },
-    
-    
-    /**
-     * This function indicates whether or not the dialog is currently 
-     * being shown.
-     *
-     * @return {Boolean}    Whether or not the dialog is being shown.
-     */
-    is_showing: function() {
-        return this._is_showing;
     }
 });

data/lib/kenny_dialoggins/helpers.rb

@@ -6,10 +6,12 @@ module Coroutine
       # to this method is the dialog's <tt>id</tt>.  The id is required and should be unique.
       # Further options may be provided; those that are specific to the dialog are:
       #
+      # * <tt>:class</tt> - a css class name that will be appended to the outermost div to facilitate multiple styles
       # * <tt>:before_show</tt> - a Javascript function that will be invoked before the dialog is shown
       # * <tt>:after_show</tt> - a Javascript function that will be invoked after the dialog has become visible
       # * <tt>:before_hide</tt> - a Javascript function that will be invoked before the dialog is hidden
       # * <tt>:after_hide</tt> - a Javascript function that will be invoked after the dialog has been hidden
+      # * <tt>&block</tt> - HTML markup that will be automatically converted to render's inline option
       #
       # All remaining options are the same as the options available to ActionController::Base#render.  Please
       # see the documentation for ActionController::Base#render for further details.
@@ -39,41 +41,92 @@ module Coroutine
       # <%= render_dialog :foo_dialog, :partial => "foo", :before_show => "function() { alert('bar!') }" %>
       # 
       # This case is similar to the previous case, except that an alert containing the string, "bar!" will
-      # appear before the dialog is shown
-      def render_dialog(id, options={})
-        dialog_options  = [:before_show, :after_show, :before_hide, :after_hide].inject({}) do |result, key|
-          result[key]   = options.delete(key) if options[key]
-          result
-        end
-
-        content = escape_javascript render(options)
-        javascript_tag "KennyDialoggins.Dialog.instances['#{id.to_s}'] = new KennyDialoggins.Dialog('#{content}', #{dialog_options_to_js dialog_options});"
+      # appear before the dialog is shown.
+      #
+      def render_dialog(id, options = {}, &block)
+        options[:inline]    = capture(&block) if block_given?
+        render_options      = extract_dialog_render_options(options)
+        javascript_options  = dialog_options_to_js(extract_dialog_javascript_options(options))
+        
+        content = escape_javascript(render(render_options))
+        
+        raise "You must specify an id to register a dialog."    unless id
+        raise "You must provide content to register a dialog."  unless content
+        
+        javascript_tag "KennyDialoggins.Dialog.instances['#{id.to_s}'] = new KennyDialoggins.Dialog('#{content}', #{javascript_options});"
       end
       
+      
       # Returns a string of Javascript that will show the dialog identified by the supplied
       # dialog_id.  As an example of useage, this method might be called as the second argument
       # to ActionView::Helpers::JavaScriptHelper#link_to_function.
+      #
       def show_dialog(dialog_id)
         "KennyDialoggins.Dialog.show('#{dialog_id.to_s}')"
       end
       
+      
       # Returns a string of Javascript that will hide the dialog identified by the supplied
       # dialog_id.  As an example of useage, this method might be called as the second argument
       # to ActionView::Helpers::JavaScriptHelper#link_to_function.
+      #
       def hide_dialog(dialog_id)
         "KennyDialoggins.Dialog.hide('#{dialog_id.to_s}')"
       end
       
+      
+      
       private
-
+      
+      # This method returns an array of javascript option keys supported by the accompanying
+      # javascript library.
+      #
+      def dialog_javascript_option_keys
+        [:class, :before_show, :after_show, :before_hide, :after_hide]
+      end
+      
+      
+      # This method converts ruby hashes using underscore notation to js strings using camelcase 
+      # notation, which is more common in javascript.
+      #
       def dialog_options_to_js(options={})
         js_kv_pairs = []
-        options.each do |key, value|
-          js_kv_pairs << "#{key.to_s.camelize(:lower)}:#{value || 'null'}"
+        sorted_keys = options.keys.map { |k| k.to_s }.sort.map { |s| s.to_sym }
+          
+        sorted_keys.each do |key|
+          js_key   = key.to_s.camelcase(:lower)
+          js_value = "null" 
+          
+          unless options[key].empty?
+            case key
+              when :before_show, :after_show, :before_hide, :after_hide
+                js_value = "#{options[key]}" 
+              else
+                js_value = "'#{options[key]}'" 
+            end
+          end
+          
+          js_kv_pairs << "'#{js_key}':#{js_value}"
         end
+        
         "{#{js_kv_pairs.join(',')}}"
       end
       
+      
+      # This method returns a hash with javascript options. It also inspects the supplied options 
+      # and adds defaults as necessary.
+      #
+      def extract_dialog_javascript_options(options)
+        options.reject { |k,v| !dialog_javascript_option_keys.include?(k) }
+      end
+      
+      
+      # This method returns a hash with rendering options.
+      #
+      def extract_dialog_render_options(options)
+        options.reject { |k,v| dialog_javascript_option_keys.include?(k) }
+      end
+      
     end
   end
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: kenny_dialoggins
 version: !ruby/object:Gem::Version 
-  hash: 23
+  hash: 17
   prerelease: false
   segments: 
   - 1
   - 0
-  - 0
-  version: 1.0.0
+  - 3
+  version: 1.0.3
 platform: ruby
 authors: 
 - Coroutine
@@ -17,7 +17,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-07-29 00:00:00 -05:00
+date: 2010-10-19 00:00:00 -05:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency