polymer-sectioned-list: list with sticky headers

googlearchive · Nov 2, 2013 · 313425d · 313425d
1 parent f367388
commit 313425d
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 0 deletions.
diff --git a/list/elements/polymer-sectioned-list/index.html b/list/elements/polymer-sectioned-list/index.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+<head>
+	<link href="polymer-sectioned-list.html" rel="import">
+	<script src="../../../../polymer/polymer.js"></script>
+</head>
+<body>
+	<polymer-element name="sectioned-list-demo">
+		<template>
+			<style>
+				:host {
+					width: 480px;
+					margin: 0 auto;
+					position: absolute;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
+					overflow: scroll;
+				}
+				polymer-sectioned-list {
+					height: 100%;
+				}
+				polymer-sectioned-list ^ #sticky,
+				polymer-sectioned-list > div {
+					background: white;
+					border-style: solid;
+					border-color: black;
+					border-width: 0 1px 1px 1px;
+					padding: 16px;
+					user-select: none;
+				}
+				polymer-sectioned-list ^ #sticky,
+				polymer-sectioned-list > div.header {
+					font-weight: bold;
+				}
+			</style>
+			<polymer-sectioned-list data="{{data}}" listData="{{listData}}">
+				<template repeat="{{listData}}">
+					<template if="{{header}}">
+						<div class="header {{page}}">{{header}}</div>
+					</template>
+					<template if="{{!header}}">
+						<div class="{{page}}">section: {{section}}, item: {{value}}</div>
+					</template>
+				</template>
+			</polymer-sectioned-list>
+		</template>
+		<script>
+			Polymer('sectioned-list-demo', {
+				created: function() {
+					var data = [];
+					for (var i = 1; i < 20; i++) {
+						data.push({header: i});
+						var nItems = Math.floor(Math.random() * 20) + 5;
+						for (var j = 1; j < nItems; j++) {
+							data.push({section: i, value: j});
+						}
+					}
+					this.data = data;
+				}
+			});
+		</script>
+	</polymer-element>
+	<sectioned-list-demo></sectioned-list-demo>
+</body>
+</html>
diff --git a/list/elements/polymer-sectioned-list/polymer-sectioned-list.html b/list/elements/polymer-sectioned-list/polymer-sectioned-list.html
@@ -0,0 +1,46 @@
+<link href="../polymer-list/polymer-list.html" rel="import">
+
+<polymer-element name="polymer-sectioned-list" extends="polymer-list" on-polymer-list-scroll="{{scrollAction}}">
+	<template>
+		<style>
+			#sticky {
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				z-index: 10;
+				opacity: 0.95;
+			}
+		</style>
+		<div id="sticky" hidden?="{{!stickyContent}}">{{stickyContent}}</div>
+		<shadow><content></content></shadow>
+	</template>
+	<script>
+		Polymer('polymer-sectioned-list', {
+			scrollAction: function() {
+				var items = this.querySelectorAll(':not(template)');
+				var scrollTop = this.scrollOffset;
+				var lastHeader;
+				for (var i = 0, item; item = items[i]; i++) {
+					var offset = item.offsetTop + (item.offsetParent ? item.offsetParent.offsetTop : 0);
+					var isHeader = item.classList.contains('header');
+					if (offset > this.scrollOffset) {
+						if (lastHeader) {
+							this.stickyContent = lastHeader.textContent;
+						}
+						var transY = offset - this.scrollOffset - this.$.sticky.offsetHeight;
+						if (transY < 0 && isHeader) {
+							this.$.sticky.style['-webkit-transform'] = 'translateY(' + transY + 'px)';
+						} else {
+							this.$.sticky.style['-webkit-transform'] = null;
+						}
+						break;
+					}
+					if (isHeader) {
+						lastHeader = item;
+					}
+				}
+			}
+		});
+	</script>
+</polymer-element>