strand-list-item with fake content

src/shared/sass/_mixins.scss

@@ -111,3 +111,11 @@
 @mixin background-opacity($color, $opacity: 0.5) {
 	background: rgba($color, $opacity);
 }
+
+// fake content
+@mixin fake-content() {
+	.fake-content {
+		display: block;
+		background: $color-A10;
+	}
+}

src/strand-dropdown/index.html

@@ -332,6 +332,8 @@
 				dataTestShort = document.querySelector("#dataTestShort");
 				smallDataTest = document.querySelector("#smallDataTest");
 				dataTest.data = dataTestHidden.data = dataTestShort.data = smallDataTest.data = dataItems;
+				// dataTest.data = new Array(100);
+				// dataTest.data = dataItems;
 				dataTest.value = dataTestHidden.value = 1;
 
 				// init jQuery test:

src/strand-dropdown/strand-dropdown.html

@@ -56,15 +56,16 @@
 						index="{{index}}">
 						<template preserve-content>
 							<strand-list-item
+								model="{{model}}"
 								value$="{{model.value}}"
 								_keyselectable
 								selected$="{{model.selected}}"
 								highlighted$="{{model.highlighted}}">
-									<strand-highlight 
-										text="{{model.name}}" 
-										highlight="{{scope.highlight}}">
-									</strand-highlight>
-								</strand-list-item>
+								<strand-highlight 
+									text="{{model.name}}" 
+									highlight="{{scope.highlight}}">
+								</strand-highlight>
+							</strand-list-item>
 						</template>
 					</strand-item-recycler>
 				</div>

src/strand-grid-item/strand-grid-item.scss

@@ -50,10 +50,7 @@ polyfill-next-selector { content: ':host ._mm_item'; }
 	margin: auto;
 }
 
-.fake-content {
-	display: block;
-	background: $color-A10;
-}
+@include fake-content();
 
 .right .fake-content {
 	float: right;

src/strand-list-item/strand-list-item.html

@@ -15,6 +15,9 @@
 	<link rel="import" type="css" href="strand-list-item.css"/>
 	<template>
 		<content id="content"></content>
+		<template is="dom-if" if="{{!model}}">
+			<span class="fake-content" style$="width:[[randomWidth]];">&nbsp;</span>
+		</template>
 	</template>
 </dom-module>
 <script src="strand-list-item.js"></script>

src/strand-list-item/strand-list-item.js

@@ -45,6 +45,16 @@
 			value: {
 				type: String,
 				value: false
+			},
+			model: {
+				type: Object,
+				value: null
+			},
+			randomWidth: {
+				type: String,
+				value: function(){
+					return this._setRandomWidth();
+				}
 			}
 		},
 
@@ -63,6 +73,12 @@
 			this.debounce("update-title",this.updateTitle,0);
 		},
 
+		_setRandomWidth: function() {
+			var n = 0.5;
+			var width = Math.random() * (1.0 - n) + n;
+			return String(Math.round(width*100) + "%");
+		},
+
 		updateTitle: function() {
 			var m = StrandLib.Measure;
 			var computed = m.textWidth(this, this.textContent);

src/strand-list-item/strand-list-item.scss

@@ -64,3 +64,5 @@
 :host > ::content .highlight {
 	background: $color-E13;
 }
+
+@include fake-content();