expose index for paging

MediaMath · Mar 21, 2016 · c2cc603 · c2cc603
1 parent 305c231
commit c2cc603
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 18 deletions.
diff --git a/src/mm-dropdown/mm-dropdown.html b/src/mm-dropdown/mm-dropdown.html
@@ -27,9 +27,9 @@
 	<link href="mm-dropdown.css" rel="import" type="css"/>
 	<template>
 		<div
-			id="target" 
-			class$="{{_updateButtonClass(direction, fitparent, error, state, _type)}}" 
-			tabindex="0" 
+			id="target"
+			class$="{{_updateButtonClass(direction, fitparent, error, state, _type)}}"
+			tabindex="0"
 			title$="{{_updateTitle(selectedIndex)}}">
 			<span class="left-items">
 				<content select="mm-icon" id="icon"></content>
@@ -42,13 +42,14 @@
 				<content hidden$="{{_hideInsertionPoints(data)}}" id="search" select="mm-input"></content>
 				<div id="list">
 					<content hidden$="{{_hideInsertionPoints(data)}}" id="content" select="mm-list-item"></content>
-					<mm-item-recycler 
-						id="itemRecycler" 
-						data="{{data}}" 
-						hidden$="{{!_hideInsertionPoints(data)}}">
+					<mm-item-recycler
+						id="itemRecycler"
+						data="{{data}}"
+						hidden$="{{!_hideInsertionPoints(data)}}"
+						index="{{index}}">
 						<template preserve-content>
-							<mm-list-item 
-								value$="{{model.value}}" 
+							<mm-list-item
+								value$="{{model.value}}"
 								selected$="{{model.selected}}"
 								highlighted$="{{model.highlighted}}">{{model.name}}</mm-list-item>
 						</template>
@@ -58,4 +59,4 @@
 		</div>
 	</template>
 </dom-module>
-<script src="mm-dropdown.js"></script>
+<script src="mm-dropdown.js"></script>
diff --git a/src/mm-dropdown/mm-dropdown.js b/src/mm-dropdown/mm-dropdown.js
@@ -70,6 +70,10 @@
 				notify: true,
 				observer: '_dataChanged'
 			},
+			index: {
+				type:Number,
+				notify:true,
+			},
 			size: {
 				type: String,
 				reflectToAttribute: true
@@ -138,7 +142,7 @@
 					valueStr = value.toString();
 
 				if (!this._widthLocked) this._lockWidth();
-				
+
 				if (this.data) {
 					item = this._getDataItemByValue(valueStr);
 				} else {
@@ -236,10 +240,10 @@
 				var newSelected = this.items[newIndex],
 					value = newSelected.value ? newSelected.value.toString() : newSelected.textContent.trim(),
 					name = newSelected.name ? newSelected.name : newSelected.textContent.trim();
-				
+
 				this.value = value;
 
-				if (this.data) { 
+				if (this.data) {
 					this.set('data.' + newIndex + '.selected', true);
 				} else {
 					newSelected.selected = true;
@@ -259,13 +263,13 @@
 			if (typeof oldIndex === 'number') {
 				var oldSelected = this.items[oldIndex];
 
-				if (this.data) { 
+				if (this.data) {
 					this.set('data.' + oldIndex + '.selected', false);
 				} else {
 					oldSelected.selected = false;
 				}
 			}
-			
+
 			if (this.state === this.STATE_OPENED) this.close();
 		},
 
@@ -289,7 +293,7 @@
 
 			if (typeof selectedIndex === 'number') {
 				var selectedItem = this.items[selectedIndex];
-					
+
 				label = this.data ? selectedItem.name : selectedItem.textContent.trim();
 			}
 			return label;
@@ -336,9 +340,9 @@
 
 	 	_setMaxHeight: function(maxItems) {
 			var actualMax = Math.min(this.items.length, maxItems);
-			
+
 			this.$.list.style.height = this.itemHeight * actualMax + 'px';
-			
+
 			if (this.data) {
 				this._itemRecycler.style.height = this.itemHeight * actualMax + 'px';
 				this.$.list.style.overflowY = "hidden";