[569] | 1 | //************************************************************************* |
---|
[593] | 2 | // Class DragSlide |
---|
| 3 | // Display a draggable slide |
---|
[569] | 4 | // |
---|
| 5 | // use jQuery |
---|
| 6 | // contentSlide : simple content |
---|
| 7 | // contentPageSlide : complex content like a full jsp page for example |
---|
| 8 | //************************************************************************* |
---|
| 9 | |
---|
[593] | 10 | var DragSlide = Class.create( { |
---|
[569] | 11 | |
---|
| 12 | initialize: function( objectParameter ) |
---|
| 13 | { |
---|
| 14 | // Param |
---|
| 15 | this.parent = objectParameter.parent ? objectParameter.parent : document.body; |
---|
[661] | 16 | this.id = objectParameter.id; |
---|
[593] | 17 | this.titleId = objectParameter.titleId; |
---|
[569] | 18 | this.contentId = objectParameter.contentId; |
---|
[593] | 19 | this.width = objectParameter.width; |
---|
| 20 | this.height = objectParameter.height; |
---|
| 21 | this.top = objectParameter.top; |
---|
| 22 | this.left = objectParameter.left; |
---|
| 23 | this.specificClass = objectParameter.specificClass; |
---|
| 24 | this.specificTitleClass = objectParameter.specificTitleClass ? objectParameter.specificTitleClass : false; |
---|
[569] | 25 | this.specificContentClass = objectParameter.specificContentClass ? objectParameter.specificContentClass : false; |
---|
[593] | 26 | this.title = objectParameter.title; |
---|
[569] | 27 | this.contentSlide = objectParameter.contentSlide ? objectParameter.contentSlide : false; |
---|
| 28 | this.contentPageSlide = objectParameter.contentPageSlide ? objectParameter.contentPageSlide : false; |
---|
| 29 | this.isIndexToChange = objectParameter.isIndexToChange ? objectParameter.isIndexToChange : false; |
---|
[684] | 30 | // By default, we activate the double click to enlarge or reduce the slide |
---|
| 31 | this.activeDbClick = !objectParameter.activeDbClick; |
---|
[569] | 32 | |
---|
[593] | 33 | this.divContainer = $( document.createElement( "div" ) ); |
---|
| 34 | if( this.specificClass ) |
---|
| 35 | this.divContainer.addClass( this.specificClass ); |
---|
| 36 | this.divContainer.attr( {id:this.id, style:"width:" + this.width + "px; height:" + this.height + "px; top:" + this.top + "; left:" + this.left} ); |
---|
| 37 | |
---|
| 38 | // Title |
---|
| 39 | this.divTitle = $( document.createElement( "div" ) ); |
---|
| 40 | if( this.specificTitleClass ) |
---|
| 41 | this.divTitle.addClass( this.specificTitleClass ); |
---|
| 42 | this.divTitle.html( this.title ); |
---|
| 43 | this.divTitle.attr( {style:"width:" + (this.width - 7) + "px"} ); |
---|
| 44 | this.divContainer.append( this.divTitle ); |
---|
| 45 | |
---|
| 46 | // Content |
---|
| 47 | this.divContent = $( document.createElement( "div" ) ); |
---|
[569] | 48 | if( this.specificContentClass ) |
---|
[593] | 49 | this.divContent.addClass( this.specificContentClass ); |
---|
[596] | 50 | this.divContent.html( this.contentSlide ); |
---|
[593] | 51 | this.divContainer.append( this.divContent ); |
---|
[569] | 52 | |
---|
[593] | 53 | this.parent.append( this.divContainer ); |
---|
| 54 | |
---|
| 55 | this.divContainer.draggable(); |
---|
| 56 | this.divContainer.resizable(); |
---|
| 57 | // this.divContainer.dblclick(); |
---|
[684] | 58 | if( this.activeDbClick ) |
---|
| 59 | this.divTitle.dblclick( jQuery.proxy( this.onDbClickTitle, this ) ); |
---|
[593] | 60 | this.divContainer.resize( jQuery.proxy( this.onResizeContainer, this ) ); |
---|
[569] | 61 | }, |
---|
| 62 | |
---|
[596] | 63 | getTitle: function() |
---|
| 64 | { |
---|
| 65 | return this.divTitle.html(); |
---|
| 66 | }, |
---|
| 67 | |
---|
| 68 | setTitle: function( newTitle ) |
---|
| 69 | { |
---|
| 70 | this.divTitle.html( newTitle ); |
---|
| 71 | }, |
---|
| 72 | |
---|
[569] | 73 | getContent: function() |
---|
| 74 | { |
---|
[593] | 75 | return this.divContent.html(); |
---|
[569] | 76 | }, |
---|
| 77 | |
---|
| 78 | setContent: function( newContent ) |
---|
| 79 | { |
---|
[593] | 80 | this.divContent.html( newContent ); |
---|
[569] | 81 | }, |
---|
| 82 | |
---|
[596] | 83 | getDivContent: function() |
---|
| 84 | { |
---|
| 85 | return this.divContent; |
---|
| 86 | }, |
---|
| 87 | |
---|
[663] | 88 | getDivContainer: function() |
---|
| 89 | { |
---|
| 90 | return this.divContainer; |
---|
| 91 | }, |
---|
| 92 | |
---|
[569] | 93 | isContentVisible: function() |
---|
| 94 | { |
---|
[593] | 95 | return (this.divContent.css( "display" ) == "block"); |
---|
[569] | 96 | }, |
---|
| 97 | |
---|
| 98 | // public |
---|
[593] | 99 | onDbClickTitle: function() |
---|
[569] | 100 | { |
---|
[593] | 101 | if( this.width == this.divContainer.width() ) |
---|
| 102 | this.enlargeContainer(); |
---|
| 103 | else |
---|
| 104 | this.reduceContainer(); |
---|
| 105 | }, |
---|
[569] | 106 | |
---|
[593] | 107 | enlargeContainer: function() |
---|
| 108 | { |
---|
| 109 | this.divContainer.animate( { |
---|
| 110 | height:'500px', |
---|
| 111 | width:'500px' |
---|
| 112 | }, 1000, function() |
---|
[569] | 113 | { |
---|
[593] | 114 | } ); |
---|
| 115 | this.divTitle.animate( { |
---|
| 116 | width:'493px' |
---|
| 117 | }, 1000, function() |
---|
| 118 | { |
---|
| 119 | } ); |
---|
| 120 | }, |
---|
[569] | 121 | |
---|
[593] | 122 | reduceContainer: function() |
---|
| 123 | { |
---|
| 124 | this.divContainer.animate( { |
---|
| 125 | height:this.height + 'px', |
---|
| 126 | width:this.width + 'px' |
---|
| 127 | }, 1000, function() |
---|
| 128 | { |
---|
| 129 | } ); |
---|
| 130 | this.divTitle.animate( { |
---|
| 131 | width:(this.width - 7) + 'px' |
---|
| 132 | }, 1000, function() |
---|
| 133 | { |
---|
| 134 | } ); |
---|
| 135 | }, |
---|
| 136 | |
---|
| 137 | onResizeContainer: function() |
---|
| 138 | { |
---|
| 139 | var widthTitle = this.divContainer.width() - 7; |
---|
| 140 | this.divTitle.width( widthTitle ); |
---|
[569] | 141 | } |
---|
| 142 | } ); |
---|