1 | //************************************************************************* |
---|
2 | // Class DragSlide |
---|
3 | // Display a draggable slide |
---|
4 | // |
---|
5 | // use jQuery |
---|
6 | // contentSlide : simple content |
---|
7 | // contentPageSlide : complex content like a full jsp page for example |
---|
8 | //************************************************************************* |
---|
9 | |
---|
10 | var DragSlide = 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 | 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; |
---|
25 | this.specificContentClass = objectParameter.specificContentClass ? objectParameter.specificContentClass : false; |
---|
26 | this.title = objectParameter.title; |
---|
27 | this.contentSlide = objectParameter.contentSlide ? objectParameter.contentSlide : false; |
---|
28 | this.contentPageSlide = objectParameter.contentPageSlide ? objectParameter.contentPageSlide : false; |
---|
29 | this.isIndexToChange = objectParameter.isIndexToChange ? objectParameter.isIndexToChange : false; |
---|
30 | // By default, we activate the double click to enlarge or reduce the slide |
---|
31 | this.activeDbClick = !objectParameter.activeDbClick; |
---|
32 | |
---|
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" ) ); |
---|
48 | if( this.specificContentClass ) |
---|
49 | this.divContent.addClass( this.specificContentClass ); |
---|
50 | this.divContent.html( this.contentSlide ); |
---|
51 | this.divContainer.append( this.divContent ); |
---|
52 | |
---|
53 | this.parent.append( this.divContainer ); |
---|
54 | |
---|
55 | this.divContainer.draggable(); |
---|
56 | this.divContainer.resizable(); |
---|
57 | // this.divContainer.dblclick(); |
---|
58 | if( this.activeDbClick ) |
---|
59 | this.divTitle.dblclick( jQuery.proxy( this.onDbClickTitle, this ) ); |
---|
60 | this.divContainer.resize( jQuery.proxy( this.onResizeContainer, this ) ); |
---|
61 | }, |
---|
62 | |
---|
63 | getTitle: function() |
---|
64 | { |
---|
65 | return this.divTitle.html(); |
---|
66 | }, |
---|
67 | |
---|
68 | setTitle: function( newTitle ) |
---|
69 | { |
---|
70 | this.divTitle.html( newTitle ); |
---|
71 | }, |
---|
72 | |
---|
73 | getContent: function() |
---|
74 | { |
---|
75 | return this.divContent.html(); |
---|
76 | }, |
---|
77 | |
---|
78 | setContent: function( newContent ) |
---|
79 | { |
---|
80 | this.divContent.html( newContent ); |
---|
81 | }, |
---|
82 | |
---|
83 | getDivContent: function() |
---|
84 | { |
---|
85 | return this.divContent; |
---|
86 | }, |
---|
87 | |
---|
88 | getDivContainer: function() |
---|
89 | { |
---|
90 | return this.divContainer; |
---|
91 | }, |
---|
92 | |
---|
93 | isContentVisible: function() |
---|
94 | { |
---|
95 | return (this.divContent.css( "display" ) == "block"); |
---|
96 | }, |
---|
97 | |
---|
98 | // public |
---|
99 | onDbClickTitle: function() |
---|
100 | { |
---|
101 | if( this.width == this.divContainer.width() ) |
---|
102 | this.enlargeContainer(); |
---|
103 | else |
---|
104 | this.reduceContainer(); |
---|
105 | }, |
---|
106 | |
---|
107 | enlargeContainer: function() |
---|
108 | { |
---|
109 | this.divContainer.animate( { |
---|
110 | height:'500px', |
---|
111 | width:'500px' |
---|
112 | }, 1000, function() |
---|
113 | { |
---|
114 | } ); |
---|
115 | this.divTitle.animate( { |
---|
116 | width:'493px' |
---|
117 | }, 1000, function() |
---|
118 | { |
---|
119 | } ); |
---|
120 | }, |
---|
121 | |
---|
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 ); |
---|
141 | } |
---|
142 | } ); |
---|