michael_hintbuble 1.0.1 → 1.0.2

data/.specification

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

data/README.rdoc

@@ -35,8 +35,7 @@ What's that, you want a few more details?  You got it, bro.
 that, it will take the same options as <tt>ActionController::Base#render</tt>.  It'll also take a few 
 more, namely:
 
-* <tt>:class</tt> - the css style to assign to the outermost div container (defaults to "michael_hintbuble_bubble")
-* <tt>:style</tt> - additional css style assignments for the outermost div container (defaults to "")
+* <tt>:class</tt> - an additional css style to assign to the outermost div container (facilitates multiple stylings)
 * <tt>:position</tt> - css-style value that specifies the hint bubble's relative position, e.g., top, bottom, right, or left (defaults to right)
 * <tt>:event_names</tt> - an array of strings specifying the events that should trigger the display of the hint bubble (accepts focus and/or mouseover)
 * <tt>:before_show</tt> - a Javascript function that will be invoked before the hint bubble is shown
@@ -68,18 +67,16 @@ Michael Hintbuble
 == Multiple Hint Bubble Styles
 
 If you need to style more than one kind of hint bubble (e.g., one style for tooltips, one style for errors), just
-use the <tt>:class</tt> option to set a new css class name on the outermost div.  That'll give you a logical anchor 
+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 a class name equal to the outermost div's class name plus 
+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 "michael_hintbuble_bubble" and "michael_hintbuble_bubble_frame". 
 
 If you set the <tt>:class</tt> option to <tt>:error_bubble</tt>, the top-level class assignments will be 
-"error_bubble" and "error_bubble_frame".
-
-The <tt>:style</tt> option can be used to provide one-off styling, as needed.
+"michael_hintbuble_bubble error_bubble" and "michael_hintbuble_bubble_frame error_bubble_frame".
 
 
 

data/VERSION

@@ -1 +1 @@
-1.0.1
+1.0.2

data/generators/michael_hintbuble/michael_hintbuble_generator.rb

@@ -1,13 +1,14 @@
 class MichaelHintbubleGenerator < Rails::Generator::Base
 
-  # This method copies stylesheet and javascript files to the 
+  # This method copies images, javascript, and stylesheet files to the 
   # corresponding public directories.
   #
   def manifest
     record do |m|
-      m.file "michael_hintbuble_pointer.png", "public/images/michael_hintbuble_pointer.png"
-      m.file "michael_hintbuble.css",         "public/stylesheets/michael_hintbuble.css"
-      m.file "michael_hintbuble.js",          "public/javascripts/michael_hintbuble.js"
+      m.file "help_bubble_pointer.png",    "public/images/help_bubble_pointer.png"
+      m.file "error_bubble_pointer.png",   "public/images/error_bubble_pointer.png"
+      m.file "michael_hintbuble.css",      "public/stylesheets/michael_hintbuble.css"
+      m.file "michael_hintbuble.js",       "public/javascripts/michael_hintbuble.js"
     end
   end
 end

data/generators/michael_hintbuble/templates/michael_hintbuble.css

@@ -1,15 +1,10 @@
-/**  
- * These styles are provided as examples. Feel free to change them however you like. 
- * Go ahead, see if we fucking care.
- */
-
+/* common styles */
 .michael_hintbuble_bubble_frame {
     position: absolute;
     border: none;
     z-index: 1;
     filter: alpha(opacity=0);                           /* really only needed if ie6 suport is enabled */
 }
-
 .michael_hintbuble_bubble {                   
     position: absolute;
     top: 0;
@@ -31,18 +26,51 @@
     -moz-border-radius:     2px;
     -webkit-border-radius:  2px;
 }
-.michael_hintbuble_bubble .bottom,               
+.michael_hintbuble_bubble .bottom,
 .michael_hintbuble_bubble .left,
 .michael_hintbuble_bubble .right,
 .michael_hintbuble_bubble .top {
-    background: url('../images/michael_hintbuble_pointer.png') no-repeat bottom;
-}
-.michael_hintbuble_bubble .bottom {
     background-position: top;
+    background-repeat: no-repeat;
 }
 .michael_hintbuble_bubble .left {
     background-position: right;
 }
 .michael_hintbuble_bubble .right {
     background-position: left;
+}
+.michael_hintbuble_bubble .top {
+    background-position: bottom;
+}
+
+
+/* error override styles */
+.error_bubble {
+    width: 250px;
+}
+.error_bubble .container .content {
+    background: #d00;
+    color: #fff;
+}
+.error_bubble .bottom,
+.error_bubble .left,
+.error_bubble .right,
+.error_bubble .top {
+    background-image: url('../images/error_bubble_pointer.png');
+}
+
+
+/* help override styles */
+.help_bubble {
+    width: 300px;
+}
+.help_bubble .container .content {
+    background: #333;
+    color: #fff;
+}
+.help_bubble .bottom,
+.help_bubble .left,
+.help_bubble .right,
+.help_bubble .top {
+    background-image: url('../images/help_bubble_pointer.png');
 }

data/generators/michael_hintbuble/templates/michael_hintbuble.js

@@ -35,8 +35,7 @@ MichaelHintbuble.Bubble = function(target_id, content, options) {
     this._positioner    = null;
     this._isShowing     = null;
     
-    this._class         = options["class"]      || "michael_hintbuble_bubble";
-    this._style         = options["style"]      || "";
+    this._class         = options["class"]      || "";
     this._eventNames    = options["eventNames"] || ["mouseover"]
     this._position      = options["position"]   || "right";
     this._beforeShow    = options["beforeShow"] || Prototype.emptyFunction
@@ -173,11 +172,11 @@ MichaelHintbuble.Bubble.prototype._attachObservers = function() {
 MichaelHintbuble.Bubble.prototype._makeBubble = function() {
     if (!this._element) {
         this._container = new Element("DIV");
-        this._container.className = "container";
+        this._container.addClassName("container");
         
         this._element = new Element("DIV");
-        this._element.className = this._class;
-        this._element.writeAttribute("style", this._style);
+        this._element.addClassName("michael_hintbuble_bubble");
+        this._element.addClassName(this._class);
         this._element.update(this._container);
         this._element.hide();
         document.body.insert(this._element);
@@ -191,9 +190,11 @@ MichaelHintbuble.Bubble.prototype._makeBubble = function() {
 MichaelHintbuble.Bubble.prototype._makeFrame = function() {
     if (!this._frame) {
         this._frame = new Element("IFRAME");
-        this._frame.className = this._class + "_frame";
+        this._frame.addClassName("michael_hintbuble_bubble_frame");
+        this._frame.addClassName(this._class + "_frame");
         this._frame.setAttribute("src", "about:blank");
         this._frame.hide();
+        document.body.insert(this._frame);
     }
 };
 
@@ -213,7 +214,8 @@ MichaelHintbuble.Bubble.prototype._makePositioner = function() {
  * class representing the relative position of the bubble to the target.
  */
 MichaelHintbuble.Bubble.prototype._updateContainerClass = function() {
-    this._container.className = "container";
+    this._container.removeClassName();
+    this._container.addClassName("container");
     this._container.addClassName(this._positioner.styleClassForPosition());
 };
 
@@ -226,16 +228,15 @@ MichaelHintbuble.Bubble.prototype.finalize = function() {
     this._positioner.finalize();
     this._container.remove();
     this._element.remove();
-    
+    if (this._frame) {
+        this._frame.remove();
+    }
+       
     this._target        = null;
     this._element       = null;
     this._container     = null;
     this._positioner    = null;
-    
-    if (MichaelHintbuble.SUPPORT_IE6_BULLSHIT) {
-        this._frame.remove();
-        this._frame = null;
-    }
+    this._frame         = null;
 };
 
 
@@ -315,8 +316,8 @@ MichaelHintbuble.Bubble.prototype.show = function() {
     
     if (this._frame) {
         var layout                  = new Element.Layout(this._element);
-        this._frame.style.top       = layout.get("top") + "px";
-        this._frame.style.left      = layout.get("left") + "px";
+        this._frame.style.top       = this._element.style.top;
+        this._frame.style.left      = this._element.style.left;
         this._frame.style.width     = layout.get("width") + "px";
         this._frame.style.height    = layout.get("height") + "px";
         

data/lib/generators/michael_hintbuble/michael_hintbuble_generator.rb

@@ -10,13 +10,14 @@ class MichaelHintbubleGenerator < Rails::Generators::Base
   end
 
 
-  # This method copies stylesheet and javascript files to the 
+  # This method copies images, javascript, and stylesheet files to the 
   # corresponding public directories.
   #
   def generate_assets
-    copy_file "michael_hintbuble_pointer.png",  "public/images/michael_hintbuble_pointer.png"
-    copy_file "michael_hintbuble.css",          "public/stylesheets/michael_hintbuble.css"
-    copy_file "michael_hintbuble.js",           "public/javascripts/michael_hintbuble.js"
+    copy_file "help_bubble_pointer.png",    "public/images/help_bubble_pointer.png"
+    copy_file "error_bubble_pointer.png",   "public/images/error_bubble_pointer.png"
+    copy_file "michael_hintbuble.css",      "public/stylesheets/michael_hintbuble.css"
+    copy_file "michael_hintbuble.js",       "public/javascripts/michael_hintbuble.js"
   end
   
 end

data/lib/generators/michael_hintbuble/templates/michael_hintbuble.css

@@ -1,15 +1,10 @@
-/**  
- * These styles are provided as examples. Feel free to change them however you like. 
- * Go ahead, see if we fucking care.
- */
-
+/* common styles */
 .michael_hintbuble_bubble_frame {
     position: absolute;
     border: none;
     z-index: 1;
     filter: alpha(opacity=0);                           /* really only needed if ie6 suport is enabled */
 }
-
 .michael_hintbuble_bubble {                   
     position: absolute;
     top: 0;
@@ -31,18 +26,51 @@
     -moz-border-radius:     2px;
     -webkit-border-radius:  2px;
 }
-.michael_hintbuble_bubble .bottom,               
+.michael_hintbuble_bubble .bottom,
 .michael_hintbuble_bubble .left,
 .michael_hintbuble_bubble .right,
 .michael_hintbuble_bubble .top {
-    background: url('../images/michael_hintbuble_pointer.png') no-repeat bottom;
-}
-.michael_hintbuble_bubble .bottom {
     background-position: top;
+    background-repeat: no-repeat;
 }
 .michael_hintbuble_bubble .left {
     background-position: right;
 }
 .michael_hintbuble_bubble .right {
     background-position: left;
+}
+.michael_hintbuble_bubble .top {
+    background-position: bottom;
+}
+
+
+/* error override styles */
+.error_bubble {
+    width: 250px;
+}
+.error_bubble .container .content {
+    background: #d00;
+    color: #fff;
+}
+.error_bubble .bottom,
+.error_bubble .left,
+.error_bubble .right,
+.error_bubble .top {
+    background-image: url('../images/error_bubble_pointer.png');
+}
+
+
+/* help override styles */
+.help_bubble {
+    width: 300px;
+}
+.help_bubble .container .content {
+    background: #333;
+    color: #fff;
+}
+.help_bubble .bottom,
+.help_bubble .left,
+.help_bubble .right,
+.help_bubble .top {
+    background-image: url('../images/help_bubble_pointer.png');
 }

data/lib/generators/michael_hintbuble/templates/michael_hintbuble.js

@@ -35,8 +35,7 @@ MichaelHintbuble.Bubble = function(target_id, content, options) {
     this._positioner    = null;
     this._isShowing     = null;
     
-    this._class         = options["class"]      || "michael_hintbuble_bubble";
-    this._style         = options["style"]      || "";
+    this._class         = options["class"]      || "";
     this._eventNames    = options["eventNames"] || ["mouseover"]
     this._position      = options["position"]   || "right";
     this._beforeShow    = options["beforeShow"] || Prototype.emptyFunction
@@ -173,11 +172,11 @@ MichaelHintbuble.Bubble.prototype._attachObservers = function() {
 MichaelHintbuble.Bubble.prototype._makeBubble = function() {
     if (!this._element) {
         this._container = new Element("DIV");
-        this._container.className = "container";
+        this._container.addClassName("container");
         
         this._element = new Element("DIV");
-        this._element.className = this._class;
-        this._element.writeAttribute("style", this._style);
+        this._element.addClassName("michael_hintbuble_bubble");
+        this._element.addClassName(this._class);
         this._element.update(this._container);
         this._element.hide();
         document.body.insert(this._element);
@@ -191,9 +190,11 @@ MichaelHintbuble.Bubble.prototype._makeBubble = function() {
 MichaelHintbuble.Bubble.prototype._makeFrame = function() {
     if (!this._frame) {
         this._frame = new Element("IFRAME");
-        this._frame.className = this._class + "_frame";
+        this._frame.addClassName("michael_hintbuble_bubble_frame");
+        this._frame.addClassName(this._class + "_frame");
         this._frame.setAttribute("src", "about:blank");
         this._frame.hide();
+        document.body.insert(this._frame);
     }
 };
 
@@ -213,7 +214,8 @@ MichaelHintbuble.Bubble.prototype._makePositioner = function() {
  * class representing the relative position of the bubble to the target.
  */
 MichaelHintbuble.Bubble.prototype._updateContainerClass = function() {
-    this._container.className = "container";
+    this._container.removeClassName();
+    this._container.addClassName("container");
     this._container.addClassName(this._positioner.styleClassForPosition());
 };
 
@@ -226,16 +228,15 @@ MichaelHintbuble.Bubble.prototype.finalize = function() {
     this._positioner.finalize();
     this._container.remove();
     this._element.remove();
-    
+    if (this._frame) {
+        this._frame.remove();
+    }
+       
     this._target        = null;
     this._element       = null;
     this._container     = null;
     this._positioner    = null;
-    
-    if (MichaelHintbuble.SUPPORT_IE6_BULLSHIT) {
-        this._frame.remove();
-        this._frame = null;
-    }
+    this._frame         = null;
 };
 
 
@@ -315,8 +316,8 @@ MichaelHintbuble.Bubble.prototype.show = function() {
     
     if (this._frame) {
         var layout                  = new Element.Layout(this._element);
-        this._frame.style.top       = layout.get("top") + "px";
-        this._frame.style.left      = layout.get("left") + "px";
+        this._frame.style.top       = this._element.style.top;
+        this._frame.style.left      = this._element.style.left;
         this._frame.style.width     = layout.get("width") + "px";
         this._frame.style.height    = layout.get("height") + "px";
         

data/lib/michael_hintbuble/helpers.rb

@@ -8,7 +8,6 @@ module Coroutine                #:nodoc:
       # are specific to the hint bubble are:
       #
       # * <tt>:class</tt> - the css style to assign to the outermost div container (defaults to "michael_hintbuble_bubble")
-      # * <tt>:style</tt> - additional css style assignments for outermost div container (defaults to "")
       # * <tt>:position</tt> - css-style value that specifies the hint bubble's relative position, e.g., top, bottom, right, or left (defaults to right)
       # * <tt>:event_names</tt> - an array of strings specifying the events that should trigger the display of the hint bubble
       # * <tt>:before_show</tt> - a Javascript function that will be invoked before the hint bubble is shown
@@ -71,10 +70,10 @@ module Coroutine                #:nodoc:
       #
       def render_bubble(target_id, options = {}, &block)
         options[:inline]    = capture(&block) if block_given?
-        render_options      = extract_bubble_render_options(options, &block)
+        render_options      = extract_bubble_render_options(options)
         javascript_options  = bubble_options_to_js(extract_bubble_javascript_options(options))
         
-        content = escape_javascript(render(options))
+        content = escape_javascript(render(render_options))
         
         raise "You gotta specify a target id to register a hint bubble, baby."  unless target_id
         raise "You gotta provide content to register a hint bubble, baby."      unless content
@@ -106,7 +105,7 @@ module Coroutine                #:nodoc:
       # javascript library.
       #
       def bubble_javascript_option_keys
-        [:class, :style, :position, :event_names, :before_show, :after_show, :before_hide, :after_hide]
+        [:class, :position, :event_names, :before_show, :after_show, :before_hide, :after_hide]
       end
       
       
@@ -145,7 +144,6 @@ module Coroutine                #:nodoc:
       def extract_bubble_javascript_options(options)
         js_options = options.reject { |k,v| !bubble_javascript_option_keys.include?(k) }
         
-        js_options[:class]        = "michael_hintbuble_bubble"  if js_options[:class].blank?
         js_options[:position]     = "right"                     if js_options[:position].blank?
         js_options[:event_names]  = []                          if js_options[:event_names].blank?
         

data/michael_hintbuble.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{michael_hintbuble}
-  s.version = "1.0.1"
+  s.version = "1.0.2"
 
   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-10-13}
+  s.date = %q{2010-10-18}
   s.description = %q{Michael HintBuble allows you to generate hint bubbles and tooltips in Rails applications using the same syntax used for rendering templates.}
   s.email = %q{gems@coroutine.com}
   s.extra_rdoc_files = [
@@ -23,14 +23,16 @@ Gem::Specification.new do |s|
      "Rakefile",
      "VERSION",
      "generators/michael_hintbuble/michael_hintbuble_generator.rb",
+     "generators/michael_hintbuble/templates/error_bubble_pointer.png",
+     "generators/michael_hintbuble/templates/help_bubble_pointer.png",
      "generators/michael_hintbuble/templates/michael_hintbuble.css",
      "generators/michael_hintbuble/templates/michael_hintbuble.js",
-     "generators/michael_hintbuble/templates/michael_hintbuble_pointer.png",
      "init.rb",
      "lib/generators/michael_hintbuble/michael_hintbuble_generator.rb",
+     "lib/generators/michael_hintbuble/templates/error_bubble_pointer.png",
+     "lib/generators/michael_hintbuble/templates/help_bubble_pointer.png",
      "lib/generators/michael_hintbuble/templates/michael_hintbuble.css",
      "lib/generators/michael_hintbuble/templates/michael_hintbuble.js",
-     "lib/generators/michael_hintbuble/templates/michael_hintbuble_pointer.png",
      "lib/michael_hintbuble.rb",
      "lib/michael_hintbuble/helpers.rb",
      "michael_hintbuble.gemspec",

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: michael_hintbuble
 version: !ruby/object:Gem::Version 
-  hash: 21
+  hash: 19
   prerelease: false
   segments: 
   - 1
   - 0
-  - 1
-  version: 1.0.1
+  - 2
+  version: 1.0.2
 platform: ruby
 authors: 
 - Coroutine
@@ -17,7 +17,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-10-13 00:00:00 -05:00
+date: 2010-10-18 00:00:00 -05:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -68,14 +68,16 @@ files:
 - Rakefile
 - VERSION
 - generators/michael_hintbuble/michael_hintbuble_generator.rb
+- generators/michael_hintbuble/templates/error_bubble_pointer.png
+- generators/michael_hintbuble/templates/help_bubble_pointer.png
 - generators/michael_hintbuble/templates/michael_hintbuble.css
 - generators/michael_hintbuble/templates/michael_hintbuble.js
-- generators/michael_hintbuble/templates/michael_hintbuble_pointer.png
 - init.rb
 - lib/generators/michael_hintbuble/michael_hintbuble_generator.rb
+- lib/generators/michael_hintbuble/templates/error_bubble_pointer.png
+- lib/generators/michael_hintbuble/templates/help_bubble_pointer.png
 - lib/generators/michael_hintbuble/templates/michael_hintbuble.css
 - lib/generators/michael_hintbuble/templates/michael_hintbuble.js
-- lib/generators/michael_hintbuble/templates/michael_hintbuble_pointer.png
 - lib/michael_hintbuble.rb
 - lib/michael_hintbuble/helpers.rb
 - michael_hintbuble.gemspec