|
1 function IncResize() |
|
2 { |
|
3 this.content; |
|
4 this.top; |
|
5 this.middle; |
|
6 this.middleContainer; |
|
7 this.bottom; |
|
8 this.footer; |
|
9 this.minTopBottomHeight; |
|
10 this.ratio; |
|
11 this.preMiddleSizeFunc; |
|
12 this.postMiddleSizeFunc; |
|
13 |
|
14 this.init = function(contantId, topId, middleId, bottomId, footerId, minTopBottomHeight, ratio, preMiddleSizeFunc, postMiddleSizeFunc) |
|
15 { |
|
16 this.content = $('#' + contantId); |
|
17 if (topId != null) { |
|
18 this.top = $('#' + topId); |
|
19 } |
|
20 this.middle = $('#' + middleId); |
|
21 this.middleContainer = $(this.middle).parent(); |
|
22 if (bottomId != null) { |
|
23 this.bottom = $('#' + bottomId); |
|
24 } |
|
25 this.footer = $('#' + footerId); |
|
26 this.minTopBottomHeight = minTopBottomHeight; |
|
27 this.ratio = ratio; |
|
28 this.preMiddleSizeFunc = preMiddleSizeFunc; |
|
29 this.postMiddleSizeFunc = postMiddleSizeFunc; |
|
30 |
|
31 $(window).resize(this.resizeElements); |
|
32 window.onorientationchange = function() { |
|
33 incResize.resizeElements(); |
|
34 } |
|
35 }; |
|
36 |
|
37 this.resizeElements = function() |
|
38 { |
|
39 var self = incResize; |
|
40 |
|
41 // Compute maximun middle element height |
|
42 var heightForTopMiddleBotom = $(self.content).height() - $(self.footer).height() - 70; |
|
43 var maxMiddleHeight = heightForTopMiddleBotom - self.minTopBottomHeight * 2; |
|
44 |
|
45 // Get the middle element parent width nad test if it is not to big (to let place for top and bottom without adding scroll bars) |
|
46 var middleRatio = 1 / self.ratio; |
|
47 var newMiddleWidth = $(self.middleContainer).width(); |
|
48 var newMiddleHeight = newMiddleWidth * middleRatio; |
|
49 |
|
50 /* |
|
51 if (newMiddleHeight > maxMiddleHeight) { |
|
52 newMiddleHeight = maxMiddleHeight; |
|
53 newMiddleWidth = newMiddleHeight * 1 / middleRatio; |
|
54 } |
|
55 */ |
|
56 |
|
57 // Pre register the middle element size change |
|
58 if (self.preMiddleSizeFunc !== undefined && self.preMiddleSizeFunc !== null) { |
|
59 self.preMiddleSizeFunc(newMiddleWidth, newMiddleHeight); |
|
60 } |
|
61 |
|
62 // Change middle element size and the height of its parent |
|
63 $(self.middle).attr('width', newMiddleWidth); |
|
64 $(self.middle).attr('height', newMiddleHeight); |
|
65 $(self.middleContainer).attr('width', newMiddleWidth); |
|
66 $(self.middleContainer).attr('height', newMiddleHeight); |
|
67 |
|
68 // Change children size of the middle element |
|
69 var children = $(self.middle).children(); |
|
70 if (children.length > 0) { |
|
71 children.attr('width', newMiddleWidth); |
|
72 children.attr('height', newMiddleHeight); |
|
73 } |
|
74 |
|
75 // Post register the middle element size change |
|
76 if (self.postMiddleSizeFunc !== undefined && self.postMiddleSizeFunc !== null) { |
|
77 self.postMiddleSizeFunc(newMiddleWidth, newMiddleHeight); |
|
78 } |
|
79 |
|
80 // Change top and bottom heights |
|
81 if (this.top != undefined && this.bottom != undefined) { |
|
82 // Get the full height and compute heigth for top and bottom |
|
83 var remainingHeight = $(self.content).height() - $(self.footer).height() - newMiddleHeight - 70; |
|
84 var newOtherHeight = remainingHeight / 2.0; |
|
85 if (newOtherHeight < self.minTopBottomHeight) { |
|
86 newOtherHeight = self.minTopBottomHeight; |
|
87 } |
|
88 $(self.top).css({"height" : +newOtherHeight+'px', "lineHeight" : +newOtherHeight+'px'}); |
|
89 $(self.bottom).css({"height" : +newOtherHeight+'px', "lineHeight" : +newOtherHeight+'px'}); |
|
90 } |
|
91 } |
|
92 } |
|
93 |
|
94 var incResize = new IncResize(); |
|
95 |
|
96 |