update for the calculation of layer position
Showing
1 changed file
with
42 additions
and
47 deletions
@@ -18,6 +18,46 @@ var $search = $searchBox.children('input[type="text"]'), | @@ -18,6 +18,46 @@ var $search = $searchBox.children('input[type="text"]'), | ||
18 | $cancelSearch = $box.children('.no-search'), | 18 | $cancelSearch = $box.children('.no-search'), |
19 | $searchIcon = $searchBox.children('.search-icon'); | 19 | $searchIcon = $searchBox.children('.search-icon'); |
20 | 20 | ||
21 | +var updateLayerPosition = (function() { | ||
22 | + var init = false, | ||
23 | + windowViewHeight = 0; | ||
24 | + | ||
25 | + | ||
26 | + return function() { | ||
27 | + var winHeight = window.innerHeight, | ||
28 | + bodyHeight = $doc.height(), | ||
29 | + scrollTopPosition = $win.scrollTop(), | ||
30 | + layerContentHeight = $appFloatLayer.height(), | ||
31 | + layerPaddingTop = parseInt($appFloatLayer.css('padding-top')), | ||
32 | + layerPaddingBottom = parseInt($appFloatLayer.css('padding-bottom')), | ||
33 | + layerHeight = layerContentHeight + layerPaddingTop + layerPaddingBottom, | ||
34 | + newPosition; | ||
35 | + | ||
36 | + if (init) { | ||
37 | + | ||
38 | + //keyboard is shown | ||
39 | + if (windowViewHeight - winHeight > 200) { | ||
40 | + newPosition = bodyHeight - winHeight - scrollTopPosition - layerHeight; | ||
41 | + } else { | ||
42 | + newPosition = bodyHeight - winHeight - scrollTopPosition; | ||
43 | + } | ||
44 | + | ||
45 | + if (scrollTopPosition + winHeight === bodyHeight) { | ||
46 | + newPosition = 0; | ||
47 | + } | ||
48 | + } else { | ||
49 | + windowViewHeight = winHeight; | ||
50 | + newPosition = bodyHeight - winHeight - scrollTopPosition + layerHeight; | ||
51 | + init = true; | ||
52 | + } | ||
53 | + | ||
54 | + $appFloatLayer.css({ | ||
55 | + position: 'relative', | ||
56 | + bottom: newPosition + 'px' | ||
57 | + }); | ||
58 | + }; | ||
59 | +})(); | ||
60 | + | ||
21 | require('../common'); | 61 | require('../common'); |
22 | 62 | ||
23 | $search.on('focus', function() { | 63 | $search.on('focus', function() { |
@@ -68,56 +108,11 @@ $channelLink.on('touchstart', function() { | @@ -68,56 +108,11 @@ $channelLink.on('touchstart', function() { | ||
68 | borderColor: '#fff' | 108 | borderColor: '#fff' |
69 | }); | 109 | }); |
70 | }); | 110 | }); |
71 | -var updateLayerPosition = (function() { | ||
72 | - var init = false; | ||
73 | - var windowViewHeight = 0; | ||
74 | - return function() { | ||
75 | - var winHeight = window.innerHeight; | ||
76 | - var bodyHeight = $doc.height(); | ||
77 | - var scrollTopPosition = $win.scrollTop(); | ||
78 | - var layerHeight = $appFloatLayer.height(); | ||
79 | - var layerPaddingTop = parseInt($appFloatLayer.css('padding-top')); | ||
80 | - var layerPaddingBottom = parseInt($appFloatLayer.css('padding-bottom')); | ||
81 | - var newPosition; | ||
82 | - | ||
83 | - if(init){ | ||
84 | - if (windowViewHeight - winHeight > 200){//keyboard is shown | ||
85 | - newPosition = bodyHeight - winHeight - scrollTopPosition - (layerHeight + layerPaddingTop + layerPaddingBottom); | ||
86 | - } else { | ||
87 | - newPosition = bodyHeight - winHeight -scrollTopPosition; | ||
88 | - } | ||
89 | - | ||
90 | - if (scrollTopPosition + winHeight === bodyHeight) { | ||
91 | - console.log('got end'); | ||
92 | - newPosition = 0; | ||
93 | - } | ||
94 | - }else{ | ||
95 | - windowViewHeight = winHeight; | ||
96 | - newPosition = bodyHeight - winHeight - scrollTopPosition + layerHeight + layerPaddingTop + layerPaddingBottom; | ||
97 | - init = true; | ||
98 | - } | ||
99 | - $appFloatLayer.css({ | ||
100 | - 'position': 'relative', | ||
101 | - 'bottom': newPosition + 'px' | ||
102 | - }); | ||
103 | - }; | ||
104 | -})(); | ||
105 | 111 | ||
106 | -$win.scroll(function() { | ||
107 | 112 | ||
108 | - updateLayerPosition(); | ||
109 | - //clearTimeout($.data(this, 'scrollTimer')); | ||
110 | - //$.data(this, 'scrollTimer', setTimeout(function() { | ||
111 | - // updateLayerPosition(); | ||
112 | - //}, 2)); | 113 | +$win.scroll(function() { |
114 | + updateLayerPosition(); | ||
113 | }); | 115 | }); |
114 | 116 | ||
115 | -//$search.focusin(function() { | ||
116 | -// $body.css('overflow','hidden'); | ||
117 | -//}); | ||
118 | -// | ||
119 | -//$search.focusout(function() { | ||
120 | -// $body.css('overflow','auto'); | ||
121 | -//}); | ||
122 | 117 | ||
123 | $doc.on('ready', updateLayerPosition); | 118 | $doc.on('ready', updateLayerPosition); |
-
Please register or login to post a comment