public
Created

  • Download Gist
expando.rb
Ruby
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
# Wraps the passed-in block in an expando/collapso triangle thingy.
# Uses "arrows.png" which is a sprite that I think I got from jQuery.
class Expando < Erector::Widget
needs :title, :expanded => false
 
external :js, "/lib/jquery.livequery.js"
 
external :style, <<-STYLE
.expando .title {
cursor: pointer; cursor: hand;
}
.expando div.arrow {
background:transparent url(/icons/arrows.png) no-repeat scroll 0px -16px;
width:16px; height:16px;
display: block;
margin-right: .5em;
}
.expando .title b {
font-size: 14px;
}
.expando div.arrow.closed { background-position:0px 0px;}
STYLE
 
external :js, "/lib/jquery.js"
 
# we need to use a livequery because we're going to load some of these again via AJAX
external :jquery, <<-SCRIPT
$('.expando').livequery(function() {
var title = $(this).find('.title');
var arrow = $(this).find('.arrow');
var expando_content = $(this).find('.expando_content');
 
title.click(function() {
arrow.toggleClass('closed');
expando_content.slideToggle(500, function() {
$(window).trigger('resize');
title.get(0).scrollIntoView();
});
});
});
SCRIPT
def content
div :class => 'expando' do
div :class => 'title' do
classes = %w(arrow left)
classes << "closed" unless @expanded
div :class => classes
b @title
end
 
div :class => 'expando_content', :style => @expanded ? '' : 'display: none' do
call_block
end
 
end
end
end

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.