From 0f21bbe99917df8e22b87bb23ed2a6c7e31b6c35 Mon Sep 17 00:00:00 2001 From: Chris Eppstein Date: Sun, 24 Jan 2010 01:34:05 -0800 Subject: [PATCH] Hover tooltips for colors. --- doc-src/.compass/config.rb | 4 + doc-src/Rules | 10 +- doc-src/content/images/tipsy.gif | Bin 0 -> 867 bytes doc-src/content/images/tipsy.yaml | 2 + doc-src/content/javascripts/jquery.tipsy.js | 110 ++++++++++++++++++ doc-src/content/javascripts/jquery.tipsy.yaml | 2 + doc-src/content/stylesheets/main.sass | 34 ++++++ doc-src/layouts/default.haml | 14 ++- .../layouts/partials/reference/constants.haml | 2 +- doc-src/lib/stylesheets/sass_extensions.rb | 43 ++++--- 10 files changed, 205 insertions(+), 16 deletions(-) create mode 100644 doc-src/content/images/tipsy.gif create mode 100644 doc-src/content/images/tipsy.yaml create mode 100644 doc-src/content/javascripts/jquery.tipsy.js create mode 100644 doc-src/content/javascripts/jquery.tipsy.yaml diff --git a/doc-src/.compass/config.rb b/doc-src/.compass/config.rb index 4082d0ee..8218389a 100644 --- a/doc-src/.compass/config.rb +++ b/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 diff --git a/doc-src/Rules b/doc-src/Rules index 8f4fb319..12e1b6f1 100644 --- a/doc-src/Rules +++ b/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 diff --git a/doc-src/content/images/tipsy.gif b/doc-src/content/images/tipsy.gif new file mode 100644 index 0000000000000000000000000000000000000000..eb7718dfc168c3c63382c36c55e0fc3ab53974c1 GIT binary patch literal 867 zcmV-p1DyOvNk%w1Vf6v^0e}Gj00030|NkNR1OWg50RSuj0002>0rdd@0{@JUsmtvT zqnxzbi}MA#`wxcVNS5Y_rs^63E(^!!{tpZahs2_Vhcqge%%<}R4Irn{ zs`ZM^YPa03_X`e-$K-YS={|^`_I7nD%c!-#&xX9S( z_y`#(IZ0V*d5M{+xyjk-`3V{-I!an`U)E>J4;(@dyAW^yUW|_`wJW_ zJWO0{e2ko|yv*F}{0to}JxyJ0eT|*1z0KY2{S6*2K2Bb4evY25zRuq6{th26KTlt8 ze~+K9zt7+A{|_*rz<~q{8a#+Fp~8g>8#;UlF`~qY6f0W1h%uwajsF}wdi)47q{xvZ zOPV~1GNsCuEL*yK2{We5nKWzKyoocX&Ye7a`uqtrsL-KAiyA$OG^x_1Oq)7=3N@kh3pcLZxpeE=y^A-m-o1SL`uz(y zu;9Uj3mZO+II-fzj2kC~%Rzm7e-_U+ue zd;bnTy!i3t%bP!sKE3+&?AyD44?n*A`Sk1CzmGq^{{8&>`~UwBV1SBoz#oALyilNl z2K11ifk`yT0TmEN$l!htN`at-87`<`ej6UpA$}nWNMea5o`_m9*b
'); + 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); diff --git a/doc-src/content/javascripts/jquery.tipsy.yaml b/doc-src/content/javascripts/jquery.tipsy.yaml new file mode 100644 index 00000000..032069f2 --- /dev/null +++ b/doc-src/content/javascripts/jquery.tipsy.yaml @@ -0,0 +1,2 @@ +--- +extension: js \ No newline at end of file diff --git a/doc-src/content/stylesheets/main.sass b/doc-src/content/stylesheets/main.sass index c2b8b638..198892a4 100644 --- a/doc-src/content/stylesheets/main.sass +++ b/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% diff --git a/doc-src/layouts/default.haml b/doc-src/layouts/default.haml index c8ffed84..fe785934 100644 --- a/doc-src/layouts/default.haml +++ b/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 @@ -22,4 +23,15 @@ %li %a{ :href => "http://nanoc.stoneship.org/manual/" } Tutorial - #footer= @item[:content_for_footer] \ No newline at end of file + #footer= @item[:content_for_footer] + :javascript + $(function(){ + $('span.color').tipsy({ + gravity: $.fn.tipsy.autoNS, + html: 'html', + opacity: 1, + title: function() { + return "
"; + } + }); + }); diff --git a/doc-src/layouts/partials/reference/constants.haml b/doc-src/layouts/partials/reference/constants.haml index 22f9928d..43e4bf43 100644 --- a/doc-src/layouts/partials/reference/constants.haml +++ b/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! diff --git a/doc-src/lib/stylesheets/sass_extensions.rb b/doc-src/lib/stylesheets/sass_extensions.rb index 8a263439..dcb864b6 100644 --- a/doc-src/lib/stylesheets/sass_extensions.rb +++ b/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{#{to_s}} + 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 \ No newline at end of file