third_party/polymer/components/core-scroll-header-panel/core-scroll-header-panel.html - Issue 592603004: Revert "Polymer elements added to third_party/polymer."

Side by Side Diff: third_party/polymer/components/core-scroll-header-panel/core-scroll-header-panel.html

Issue 592603004: Revert "Polymer elements added to third_party/polymer." (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 6 years, 3 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/polymer/components/core-scroll-header-panel/core-scroll-header-panel.css ('k') | third_party/polymer/components/core-scroll-header-panel/demo.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!--

2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.

3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

6 Code distributed by Google as part of the polymer project is also

7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

8 -->

9

10 <!--

11 `core-scroll-header-panel` contains a header section and a content section. The

12 header is initially on the top part of the view but it scrolls away with the

13 rest of the scrollable content. Upon scrolling slightly up at any point, the

14 header scrolls back into view. This saves screen space and allows users to

15 access important controls by easily moving them back to the view.

16

17 __Important:__ The `core-scroll-header-panel` will not display if its parent doe s not have a height.

18

19 Using [layout attributes](http://www.polymer-project.org/docs/polymer/layout-att rs.html), you can easily make the `core-scroll-header-panel` fill the screen

20

21 <body fullbleed layout vertical>

22 <core-scroll-header-panel flex>

23 <core-toolbar>

24 <div>Hello World!</div>

25 </core-toolbar>

26 </core-scroll-header-panel>

27 </body>

28

29 or, if you would prefer to do it in CSS, just give `html`, `body`, and `core-scr oll-header-panel` a height of 100%:

30

31 html, body {

32 height: 100%;

33 margin: 0;

34 }

35 core-scroll-header-panel {

36 height: 100%;

37 }

38

39 `core-scroll-header-panel` works well with `core-toolbar` but can use any elemen t

40 that represents a header by adding a `core-header` class to it. Use the attribu te

41 or class `content` to delineate the content section.

42

43 <core-scroll-header-panel>

44 <core-toolbar>Header</core-toolbar>

45 <div content>Content goes here...</div>

46 </core-scroll-header-panel>

47

48 @group Polymer Core Elements

49 @element core-scroll-header-panel

50 @homepage github.io

51 -->

52

53 <link rel="import" href="../polymer/polymer.html">

54

55 <polymer-element name="core-scroll-header-panel">

56 <template>

57

58 <link rel="stylesheet" href="core-scroll-header-panel.css">

59

60 <div id="mainContainer" on-scroll="{{scroll}}">

61

62 <content id="mainContent" select="[content], .content"></content>

63

64 </div>

65

66 <div id="headerContainer">

67

68 <div class="bg-container">

69 <div id="condensedHeaderBg"></div>

70 <div id="headerBg"></div>

71 </div>

72

73 <content id="headerContent" select="core-toolbar, .core-header"></content>

74

75 </div>

76

77 </template>

78 <script>

79

80 Polymer('core-scroll-header-panel', {

81

82 /**

83 * Fired when the content has been scrolled.

84 *

85 * @event scroll

86 */

87

88 /**

89 * Fired when the header is transformed.

90 *

91 * @event core-header-transform

92 */

93

94 publish: {

95 /**

96 * If true, the header's height will condense to `_condensedHeaderHeight`

97 * as the user scrolls down from the top of the content area.

98 *

99 * @attribute condenses

100 * @type boolean

101 * @default false

102 */

103 condenses: false,

104

105 /**

106 * If true, no cross-fade transition from one background to another.

107 *

108 * @attribute noDissolve

109 * @type boolean

110 * @default false

111 */

112 noDissolve: false,

113

114 /**

115 * If true, the header doesn't slide back in when scrolling back up.

116 *

117 * @attribute noReveal

118 * @type boolean

119 * @default false

120 */

121 noReveal: false,

122

123 /**

124 * If true, the header is fixed to the top and never moves away.

125 *

126 * @attribute fixed

127 * @type boolean

128 * @default false

129 */

130 fixed: false,

131

132 /**

133 * If true, the condensed header is always shown and does not move away.

134 *

135 * @attribute keepCondensedHeader

136 * @type boolean

137 * @default false

138 */

139 keepCondensedHeader: false,

140

141 /**

142 * The height of the header when it is at its full size.

143 *

144 * By default, the height will be measured when it is ready. If the heigh t

145 * changes later the user needs to either set this value to reflect the

146 * new height or invoke `measureHeaderHeight()`.

147 *

148 * @attribute headerHeight

149 * @type number

150 */

151 headerHeight: 0,

152

153 /**

154 * The height of the header when it is condensed.

155 *

156 * By default, `_condensedHeaderHeight` is 1/3 of `headerHeight` unless

157 * this is specified.

158 *

159 * @attribute condensedHeaderHeight

160 * @type number

161 */

162 condensedHeaderHeight: 0

163 },

164

165 prevScrollTop: 0,

166

167 headerMargin: 0,

168

169 y: 0,

170

171 observe: {

172 'headerMargin fixed': 'setup'

173 },

174

175 domReady: function() {

176 this.async('measureHeaderHeight');

177 },

178

179 get header() {

180 return this.$.headerContent.getDistributedNodes()[0];

181 },

182

183 get scroller() {

184 return this.$.mainContainer;

185 },

186

187 measureHeaderHeight: function() {

188 var header = this.header;

189 if (this.header) {

190 this.headerHeight = header.offsetHeight;

191 }

192 },

193

194 headerHeightChanged: function() {

195 if (!this.condensedHeaderHeight) {

196 // assume _condensedHeaderHeight is 1/3 of the headerHeight

197 this._condensedHeaderHeight = this.headerHeight * 1 / 3;

198 }

199 this.condensedHeaderHeightChanged();

200 },

201

202 condensedHeaderHeightChanged: function() {

203 if (this.condensedHeaderHeight) {

204 this._condensedHeaderHeight = this.condensedHeaderHeight;

205 }

206 if (this.headerHeight) {

207 this.headerMargin = this.headerHeight - this._condensedHeaderHeight;

208 }

209 },

210

211 condensesChanged: function() {

212 if (this.condenses) {

213 this.scroll();

214 } else {

215 // reset transform/opacity set on the header

216 this.condenseHeader(null);

217 }

218 },

219

220 setup: function() {

221 var s = this.scroller.style;

222 s.paddingTop = this.fixed ? '' : this.headerHeight + 'px';

223 s.top = this.fixed ? this.headerHeight + 'px' : '';

224 if (this.fixed) {

225 this.transformHeader(null);

226 } else {

227 this.scroll();

228 }

229 },

230

231 transformHeader: function(y) {

232 var s = this.$.headerContainer.style;

233 this.translateY(s, -y);

234

235 if (this.condenses) {

236 this.condenseHeader(y);

237 }

238

239 this.fire('core-header-transform', {y: y, height: this.headerHeight,

240 condensedHeight: this._condensedHeaderHeight});

241 },

242

243 condenseHeader: function(y) {

244 var reset = y == null;

245 // adjust top bar in core-header so the top bar stays at the top

246 if (this.header.$ && this.header.$.topBar) {

247 this.translateY(this.header.$.topBar.style,

248 reset ? null : Math.min(y, this.headerMargin));

249 }

250 // transition header bg

251 var hbg = this.$.headerBg.style;

252 if (!this.noDissolve) {

253 hbg.opacity = reset ? '' : (this.headerMargin - y) / this.headerMargin;

254 }

255 // adjust header bg so it stays at the center

256 this.translateY(hbg, reset ? null : y / 2);

257 // transition condensed header bg

258 var chbg = this.$.condensedHeaderBg.style;

259 if (!this.noDissolve) {

260 chbg = this.$.condensedHeaderBg.style;

261 chbg.opacity = reset ? '' : y / this.headerMargin;

262 // adjust condensed header bg so it stays at the center

263 this.translateY(chbg, reset ? null : y / 2);

264 }

265 },

266

267 translateY: function(s, y) {

268 s.transform = s.webkitTransform = y == null ? '' :

269 'translate3d(0, ' + y + 'px, 0)';

270 },

271

272 scroll: function(event) {

273 if (!this.header) {

274 return;

275 }

276

277 var sTop = this.scroller.scrollTop;

278

279 var y = Math.min(this.keepCondensedHeader ?

280 this.headerMargin : this.headerHeight, Math.max(0,

281 (this.noReveal ? sTop : this.y + sTop - this.prevScrollTop)));

282

283 if (this.condenses && this.prevScrollTop >= sTop && sTop > this.headerMarg in) {

284 y = Math.max(y, this.headerMargin);

285 }

286

287 if (!event \|\| !this.fixed && y !== this.y) {

288 requestAnimationFrame(this.transformHeader.bind(this, y));

289 }

290

291 this.prevScrollTop = sTop;

292 this.y = y;

293

294 if (event) {

295 this.fire('scroll', {target: this.scroller}, this, false);

296 }

297 }

298

299 });

300

301 </script>

302 </polymer-element>

OLD	NEW