| 1 | //************************************************************************* |
|---|
| 2 | // Class VerticalSlide |
|---|
| 3 | // Display a vertical slide |
|---|
| 4 | // |
|---|
| 5 | // use jQuery |
|---|
| 6 | // contentSlide : simple content |
|---|
| 7 | // contentPageSlide : complex content like a full jsp page for example |
|---|
| 8 | //************************************************************************* |
|---|
| 9 | |
|---|
| 10 | var VerticalSlide = Class.create( { |
|---|
| 11 | |
|---|
| 12 | initialize: function( objectParameter ) |
|---|
| 13 | { |
|---|
| 14 | // Param |
|---|
| 15 | this.parent = objectParameter.parent ? objectParameter.parent : document.body; |
|---|
| 16 | this.id = objectParameter.id; |
|---|
| 17 | this.titleId = objectParameter.titleId; |
|---|
| 18 | this.contentId = objectParameter.contentId; |
|---|
| 19 | |
|---|
| 20 | this.title = objectParameter.title ? objectParameter.title : false; |
|---|
| 21 | this.content = objectParameter.content ? objectParameter.content : false; |
|---|
| 22 | this.contentPage = objectParameter.contentPage ? objectParameter.contentPage : false; |
|---|
| 23 | this.timeToSlide = objectParameter.timeToSlide ? objectParameter.timeToSlide : 100; |
|---|
| 24 | |
|---|
| 25 | // Slide div |
|---|
| 26 | this.divSlide = $( document.createElement( "div" ) ); |
|---|
| 27 | this.divSlide.attr( {id:this.id, class:"containerSlide"} ); |
|---|
| 28 | |
|---|
| 29 | // Title div |
|---|
| 30 | this.divSlideTitle = $( document.createElement( "div" ) ); |
|---|
| 31 | this.divSlideTitle.attr( {id:this.titleId, class:"containerSlideTitle"} ); |
|---|
| 32 | |
|---|
| 33 | this.divSlideTitleImage = $( document.createElement( "div" ) ); |
|---|
| 34 | this.divSlideTitleImage.addClass( "containerSlideTitle_image" ); |
|---|
| 35 | this.divSlideTitle.append( this.divSlideTitleImage ); |
|---|
| 36 | |
|---|
| 37 | var divSlideTitleText = $( document.createElement( "div" ) ); |
|---|
| 38 | divSlideTitleText.addClass( "containerSlideTitle_text" ); |
|---|
| 39 | if( this.title ) |
|---|
| 40 | divSlideTitleText.html( this.title ); |
|---|
| 41 | this.divSlideTitle.append( divSlideTitleText ); |
|---|
| 42 | this.divSlideTitle.bind( "click", jQuery.proxy( this.onClickTitle, this ) ); |
|---|
| 43 | this.divSlide.append( this.divSlideTitle ); |
|---|
| 44 | |
|---|
| 45 | // Content div |
|---|
| 46 | this.divSlideContent = $( document.createElement( "div" ) ); |
|---|
| 47 | this.divSlideContent.attr( {id:this.contentId, class:"containerSlideContent", style:"display:none"} ); |
|---|
| 48 | if( this.content ) |
|---|
| 49 | this.divSlideContent.append( this.content ); |
|---|
| 50 | this.divSlide.append( this.divSlideContent ); |
|---|
| 51 | |
|---|
| 52 | this.parent.append( this.divSlide ); |
|---|
| 53 | }, |
|---|
| 54 | |
|---|
| 55 | isContentVisible: function() |
|---|
| 56 | { |
|---|
| 57 | return ("block" == this.divSlideContent.css( "display" )); |
|---|
| 58 | }, |
|---|
| 59 | |
|---|
| 60 | // public |
|---|
| 61 | onClickTitle: function() |
|---|
| 62 | { |
|---|
| 63 | this.divSlideContent.animate( {height:"toggle"}, this.timeToSlide, jQuery.proxy( function() |
|---|
| 64 | { |
|---|
| 65 | if( this.isContentVisible() ) |
|---|
| 66 | { |
|---|
| 67 | this.divSlideTitle.addClass( "activated" ); |
|---|
| 68 | } |
|---|
| 69 | else |
|---|
| 70 | { |
|---|
| 71 | this.divSlideTitle.removeClass( "activated" ); |
|---|
| 72 | } |
|---|
| 73 | }, this ) ); |
|---|
| 74 | |
|---|
| 75 | if( this.contentPage ) |
|---|
| 76 | this.divSlideContent.load( this.contentPage ); |
|---|
| 77 | } |
|---|
| 78 | } ); |
|---|
