Hover tooltips for colors.

doc-src/.compass/config.rb

@@ -3,9 +3,13 @@ require 'susy'
 
 # Set this to the root of your project when deployed:
 http_path = "/"
+project_path = File.expand_path(File.join(File.dirname(__FILE__), '..'))
 css_dir = "../docs/stylesheets"
 sass_dir = "content/stylesheets"
 images_dir = "content/images"
+http_images_dir = "images"
 javascripts_dir = "content/javascripts"
+http_javascripts_dir = "javascripts"
+http_stylesheets_dir = "stylesheets"
 # To enable relative paths to assets via compass helper functions. Uncomment:
 # relative_assets = true

doc-src/Rules

@@ -8,6 +8,10 @@ compile '/css/*/' do
   nil
 end
 
+compile '/images/*/' do
+  nil
+end
+
 compile '/javascripts/*/' do
   nil
 end
@@ -30,8 +34,12 @@ route '/css/*/' do
   item.identifier.chop.gsub(%r{/css}, '/stylesheets')+"."+item[:extension]
 end
 
+route '/images/*/' do
+  item.identifier.chop+"."+item[:extension]
+end
+
 route '/javascripts/*/' do
-  item.identifier.chop.gsub(%r{/css}, '/javascripts')+"."+item[:extension]
+  item.identifier.chop+"."+item[:extension]
 end
 
 route '/stylesheets/*/' do

doc-src/content/images/tipsy.yaml

@@ -0,0 +1,2 @@
+---
+extension: gif

doc-src/content/javascripts/jquery.tipsy.js

@@ -0,0 +1,110 @@
+(function($) {
+    function fixTitle($ele) {
+        if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') {
+            $ele.attr('original-title', $ele.attr('title') || '').removeAttr('title');
+        }
+    }
+    
+    $.fn.tipsy = function(options) {
+
+        options = $.extend({}, $.fn.tipsy.defaults, options);
+        
+        return this.each(function() {
+            
+            fixTitle($(this));
+            var opts = $.fn.tipsy.elementOptions(this, options);
+            
+            $(this).hover(function() {
+
+                $.data(this, 'cancel.tipsy', true);
+
+                var tip = $.data(this, 'active.tipsy');
+                if (!tip) {
+                    tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>');
+                    tip.css({position: 'absolute', zIndex: 100000});
+                    $.data(this, 'active.tipsy', tip);
+                }
+                
+                fixTitle($(this));
+                
+                var title;
+                if (typeof opts.title == 'string') {
+                    title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title);
+                } else if (typeof opts.title == 'function') {
+                    title = opts.title.call(this);
+                }
+
+                tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback);
+
+                var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight});
+                tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity
+                tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
+                var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight;
+                var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity;
+
+                switch (gravity.charAt(0)) {
+                    case 'n':
+                        tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north');
+                        break;
+                    case 's':
+                        tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south');
+                        break;
+                    case 'e':
+                        tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east');
+                        break;
+                    case 'w':
+                        tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west');
+                        break;
+                }
+
+                if (opts.fade) {
+                    tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: opts.opacity});
+                } else {
+                    tip.css({visibility: 'visible', opacity: opts.opacity});
+                }
+
+            }, function() {
+                $.data(this, 'cancel.tipsy', false);
+                var self = this;
+                setTimeout(function() {
+                    if ($.data(this, 'cancel.tipsy')) return;
+                    var tip = $.data(self, 'active.tipsy');
+                    if (opts.fade) {
+                        tip.stop().fadeOut(function() { $(this).remove(); });
+                    } else {
+                        tip.remove();
+                    }
+                }, 100);
+
+            });
+            
+        });
+        
+    };
+    
+    // Overwrite this method to provide options on a per-element basis.
+    // For example, you could store the gravity in a 'tipsy-gravity' attribute:
+    // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
+    // (remember - do not modify 'options' in place!)
+    $.fn.tipsy.elementOptions = function(ele, options) {
+        return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
+    };
+    
+    $.fn.tipsy.defaults = {
+        fade: false,
+        fallback: '',
+        gravity: 'n',
+        html: false,
+        opacity: 0.8,
+        title: 'title'
+    };
+    
+    $.fn.tipsy.autoNS = function() {
+        return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
+    };
+    
+    $.fn.tipsy.autoWE = function() {
+        return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
+    };
+    
+})(jQuery);

doc-src/content/javascripts/jquery.tipsy.yaml

@@ -0,0 +1,2 @@
+---
+extension: js

doc-src/content/stylesheets/main.sass

@@ -1,5 +1,6 @@
 @import blueprint/reset
 @import compass/utilities
+@import compass/css3
 
 @import blueprint
 
@@ -35,6 +36,39 @@ body.reference
   a.view-source
     float: right
     margin: 1.25em
+  span.color
+    border-bottom: 1px dotted #333
+  .color-snippet
+    width: 100px
+    height: 20px
+    +border-radius(3px)
+
+  
+  .tipsy
+    padding: 5px
+    font-size: 10px
+    background-repeat: no-repeat
+    background-image= image_url("tipsy.gif")
+    &-north
+      background-position: top center
+    &-south
+      background-position: bottom center
+    &-east
+      background-position: right center
+    &-west
+      background-position: left center
+    &-inner
+      padding: 5px 8px 5px 8px
+      background-color: black
+      color: white
+      max-width: 200px
+      text-align: center
+      +border-radius(3px)
+
+
+
+
+    
 
 table.constants
   width: 100%

doc-src/layouts/default.haml

@@ -8,6 +8,7 @@
     %link{ :href => "/stylesheets/ui-lightness/jquery-ui-1.7.2.custom.css", :rel => "stylesheet", :type => "text/css", :media => "screen" }
     %script{:src => "/javascripts/jquery-1.3.2.min.js", :type => "text/javascript"}
     %script{:src => "/javascripts/jquery-ui-1.7.2.custom.min.js", :type => "text/javascript"}
+    %script{:src => "/javascripts/jquery.tipsy.js", :type => "text/javascript"}
   %body{body_attributes(@item)}
     #container
       #main
@@ -23,3 +24,14 @@
             %a{ :href => "http://nanoc.stoneship.org/manual/" }
               Tutorial
       #footer= @item[:content_for_footer]
+    :javascript
+      $(function(){
+        $('span.color').tipsy({
+          gravity: $.fn.tipsy.autoNS,
+          html: 'html',
+          opacity: 1,
+          title: function() {
+            return "<div style='background-color:"+$(this).html()+";' class='color-snippet'></div>";
+          }
+        });
+      });

doc-src/layouts/partials/reference/constants.haml

@@ -15,7 +15,7 @@
             %td{:class => col_classes.next}
               %code= "!"+constant_def.name
             %td{:class => col_classes.next}
-              %code= constant_def.expr.to_sass
+              %code= constant_def.expr.to_sass(:html)
             %td{:class => col_classes.next}
               %code= constant_def.guarded ? "Y" : "N"
             - col_classes.reset!

doc-src/lib/stylesheets/sass_extensions.rb

@@ -7,6 +7,7 @@ module Sass
         s.split("\n").join("\n" + "  " * indent_level)
       end
       def children_to_sass
+        # remove hidden code
         clean_children = children.inject([[],true]) do |m,c|
           if c.respond_to?(:doc) && !c.doc.nil?
             [m.first, c.doc]
@@ -115,15 +116,27 @@ module Sass
     end
   end
   module Script
-    class Bool < Literal; alias to_sass to_s; end
-    class Color < Literal; alias to_sass to_s; end
+    class Bool < Literal
+      def to_sass(format = :text)
+        to_s
+      end
+    end
+    class Color < Literal
+      def to_sass(format = :text)
+        if format == :html
+          %Q{<span class="color">#{to_s}</span>}
+        else
+          to_s
+        end
+      end
+    end
     class Funcall < Node
-      def to_sass
-        "#{name}(#{args.map {|a| a.to_sass}.join(', ')})"
+      def to_sass(format = :text)
+        "#{name}(#{args.map {|a| a.to_sass(format)}.join(', ')})"
       end
     end
     class Number < Literal
-      def to_sass
+      def to_sass(format = :text)
         value = if self.value.is_a?(Float) && (self.value.infinite? || self.value.nan?)
           self.value
         elsif int?
@@ -156,27 +169,31 @@ module Sass
           :and => 'and'
         }
       end
-      def to_sass
-        "#{operand_to_sass(@operand1)} #{OPERATORS_TO_SASS[@operator]} #{operand_to_sass(@operand2)}"
+      def to_sass(format = :text)
+        "#{operand_to_sass(@operand1, format)} #{OPERATORS_TO_SASS[@operator]} #{operand_to_sass(@operand2, format)}"
       end
-      def operand_to_sass(operand)
+      def operand_to_sass(operand, format = :text)
         if operand.is_a? Operation
-          "(#{operand.to_sass})"
+          "(#{operand.to_sass(format)})"
         else
-          operand.to_sass
+          operand.to_sass(format)
         end
       end
     end
     class String < Literal
-      def to_sass
+      def to_sass(format = :text)
         value.inspect
       end
     end
     class UnaryOperation < Node
-      def to_sass
+      def to_sass(format = :text)
         "#{@operator}#{@operand}"
       end
     end
-    class Variable < Node; alias to_sass inspect; end
+    class Variable < Node
+      def to_sass(format = :text)
+        inspect
+      end
+    end
   end
 end