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