Skip to content

Commit ea1ca3e

Browse files
author
Justin Moore
committed
Add potential fix to template stamping issue
1 parent de23af0 commit ea1ca3e

16 files changed

Lines changed: 410 additions & 128 deletions

‎src/mm-dropdown/mm-dropdown.html‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,8 @@
4444
<mm-item-recycler
4545
id="itemRecycler"
4646
data="{{data}}"
47-
hidden$="{{!_hideInsertionPoints(data)}}"
48-
item-template="templateItem">
49-
<template id="templateItem">
47+
hidden$="{{!_hideInsertionPoints(data)}}">
48+
<template is="dom-template" id="templateItem">
5049
<mm-list-item
5150
value$="{{model.value}}"
5251
selected$="{{model.selected}}"

‎src/mm-grid/index.html‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
</style>
3838
</head>
3939
<body>
40-
<mm-grid id="mmTestGrid" gpu="4d" selectable expandable="false" item-template="customTemplate" unresolved>
40+
<mm-grid id="mmTestGrid" gpu="4d" selectable expandable="false" unresolved>
4141
<mm-grid-column width="20%" field="name" sort resize>Name</mm-grid-column>
4242
<mm-grid-column width="10%" field="id" sort resize>Id</mm-grid-column>
4343
<mm-grid-column width="20%" field="advertiser" sort resize>Advertiser</mm-grid-column>
@@ -46,19 +46,19 @@
4646
<mm-grid-column width="15%" field="dimensions">Dimensions</mm-grid-column>
4747
<mm-grid-column width="10%" field="actions"></mm-grid-column>
4848
<!-- Any custom template provided as lightDOM needs to be a Polymer element -->
49-
<template is="custom-template" id="customTemplate">
49+
<template is="dom-bind">
5050
<!-- <mm-grid-item model="{{model}}" scope="{{scope}}" style$="{{model.style}}"> -->
5151
<mm-grid-item model="{{model}}" scope="{{scope}}">
5252
<div field="actions">
5353
<!--
54-
<mm-icon width="15" height="15" type="actions" id="{{createId('tooltip', model.id)}}"></mm-icon>
55-
<mm-tooltip model="{{model}}" target$="{{createId('#tooltip', model.id)}}">
54+
<mm-icon width="15" height="15" type="actions" id="{{scope.createId('tooltip', model.id)}}"></mm-icon>
55+
<mm-tooltip model="{{model}}" target$="{{scope.createId('#tooltip', model.id)}}">
5656
<label>I'm a tooltip for Creative - <span>{{model.name}}</span></label>
5757
</mm-tooltip>
5858
-->
5959
<!--
60-
<mm-icon type="actions" id="{{_createId('menu', model.id)}}" width="15" height="15"></mm-icon>
61-
<mm-menu id="testMenu" direction="s" offset="15" target$="{{_createId('#menu', model.id)}}">
60+
<mm-icon type="actions" id="{{scope.createId('menu', model.id)}}" width="15" height="15"></mm-icon>
61+
<mm-menu id="testMenu" direction="s" offset="15" target$="{{scope.createId('#menu', model.id)}}">
6262
<mm-list-item value="m1">menu item 1</mm-list-item>
6363
<mm-list-item value="m2">menu item 2</mm-list-item>
6464
<mm-list-item value="m3">menu item 3</mm-list-item>
@@ -139,14 +139,6 @@ <h4>Expanded Concept</h4>
139139
});
140140
}
141141

142-
// Any custom template provided as lightDOM needs to be a Polymer element
143-
HTMLImports.whenReady(function(){
144-
Polymer({
145-
is:'custom-template',
146-
extends: 'template'
147-
});
148-
});
149-
150142
window.addEventListener("WebComponentsReady", function() {
151143
app = document.querySelector("#mmTestGrid");
152144
app.data = data;

‎src/mm-grid/mm-grid.html‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,18 @@
66
-->
77
<link rel="import" href="../../bower_components/polymer/polymer.html">
88
<link rel="import" href="../shared/behaviors/resolvable.html">
9+
<link rel="import" href="../shared/behaviors/patternhelpable.html"/>
910
<link rel="import" href="../mm-item-recycler/mm-item-recycler.html">
1011
<link rel="import" href="../mm-grid-column/mm-grid-column.html">
1112
<link rel="import" href="../mm-grid-item/mm-grid-item.html">
1213
<link rel="import" href="../mm-checkbox/mm-checkbox.html">
1314
<link rel="import" href="../mm-icon/mm-icon.html">
1415
<link rel="import" href="../mm-loader/mm-loader.html">
16+
1517
<dom-module id="mm-grid">
1618
<link rel="import" type="css" href="mm-grid.css"/>
1719
<template>
18-
<mm-item-recycler id="viewport" gpu="{{gpu}}" item-template-element="{{itemTemplateElement}}" data="{{data}}" scope="{{scope}}" index="{{index}}">
20+
<mm-item-recycler id="viewport" gpu="{{gpu}}" data="{{data}}" scope="{{scope}}" index="{{index}}" pattern-helper="{{patternHelper}}" pattern-helpable="{{patternHelpable}}">
1921
<div id="header">
2022
<div class="_mm_column checkbox" hidden$="{{!selectable}}">
2123
<mm-checkbox id="selectAll" on-tap="_toggleAllSelections" state="{{_selectAllState}}"></mm-checkbox>
@@ -27,15 +29,16 @@
2729
<content id="columns" select="mm-grid-column"></content>
2830
</div>
2931
</div>
32+
<content select="template"></content>
33+
<template is="dom-template" id="defaultTemplate">
34+
<mm-grid-item model="{{model}}" scope="{{scope}}"></mm-grid-item>
35+
</template>
3036
</mm-item-recycler>
31-
<content select="template"></content>
32-
<template id="defaultTemplate">
33-
<mm-grid-item model="{{model}}" scope="{{scope}}"></mm-grid-item>
34-
</template>
3537
<template is="dom-if" if="{{isLoading}}">
3638
<mm-loader id="loader"><label>Loading...</label></mm-loader>
3739
</template>
3840
<div id="separator"></div>
3941
</template>
4042
</dom-module>
43+
4144
<script src="mm-grid.js"></script>

‎src/mm-grid/mm-grid.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,6 @@
3131
}
3232
},
3333
index: Number,
34-
itemTemplate: String,
35-
itemTemplateElement: Object,
3634
_selectAllState: {
3735
type: String,
3836
value: 'unchecked'
@@ -70,7 +68,10 @@
7068
}
7169
},
7270

73-
behaviors: [ StrandTraits.Resolvable ],
71+
behaviors: [
72+
StrandTraits.Resolvable,
73+
StrandTraits.PatternHelpable,
74+
],
7475

7576
listeners: {
7677
'column-resize-start': '_onColumnResizeStart',
@@ -85,18 +86,11 @@
8586
"_onSortChanged(sortField, sortOrder)",
8687
],
8788

88-
8989
_expansionChanged: function (expanded) {
9090
this.toggleClass("expanded", !!expanded, this.$.carat);
9191
},
9292

9393
attached: function() {
94-
if(this.itemTemplate && typeof this.itemTemplate === "string") {
95-
this.itemTemplateElement = this.querySelector("#" + this.itemTemplate);
96-
}
97-
98-
this.itemTemplateElement = this.itemTemplateElement || this.$.defaultTemplate;
99-
10094
this.async(this._initialize);
10195
},
10296

‎src/mm-item-recycler/index.html‎

Lines changed: 35 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -44,27 +44,33 @@
4444
</head>
4545
<body>
4646
<button id="switch">toggle</button>
47-
<div id="toggle" style="display: none">
48-
<mm-item-recycler id="itemRecycler" item-template="templateItem" unresolved>
49-
<template is="custom-template" id="templateItem">
47+
<div id="toggle" style="display: notnone">
48+
<mm-item-recycler id="itemRecycler" pattern-uri="./pattern.html" unresolved>
49+
<div id="header" recycler="header">Header <br/> Text</div>
50+
<div id="footer" recycler="footer">Footer <br/> Text <br/> Too</div>
51+
Hello World
52+
</mm-item-recycler>
53+
54+
<mm-item-recycler id="itemRecycler2" unresolved>
55+
<div id="header" recycler="header">Header <br/> Text</div>
56+
<div id="footer" recycler="footer">Footer <br/> Text <br/> Too</div>
57+
Hello World
58+
<template is="dom-bind">
5059
<div class="_mm_item" data-id="{{model.id}}" style$="{{model.style}}">
51-
<mm-input value="{{model.name}}"></mm-input><span>{{model.num}}</span>
52-
53-
<mm-dropdown placeholder="Some Very Long Name" data="{{model.dd.dropdownData}}" value="{{model.dd.dropDownValue}}"></mm-dropdown>
54-
55-
<!--
56-
<mm-dropdown placeholder="{{model.name}}" value="{{model.value}}">
57-
<mm-list-item value="0">JPEG</mm-list-item>
58-
<mm-list-item value="1">GIF</mm-list-item>
59-
<mm-list-item value="2">SWF</mm-list-item>
60-
<mm-list-item value="3">PNG</mm-list-item>
61-
</mm-dropdown>
62-
-->
60+
<span>{{model.num}}</span><mm-input value="{{model.name}}"></mm-input>
6361
</div>
6462
</template>
63+
</mm-item-recycler>
64+
65+
<mm-item-recycler id="itemRecycler3" pattern-uri="./pattern.html" unresolved>
6566
<div id="header" recycler="header">Header <br/> Text</div>
6667
<div id="footer" recycler="footer">Footer <br/> Text <br/> Too</div>
6768
Hello World
69+
<template is="dom-bind">
70+
<div class="_mm_item" data-id="{{model.id}}" style$="{{model.style}}">
71+
<span>{{model.num}}</span><mm-input value="{{model.name}}"></mm-input>
72+
</div>
73+
</template>
6874
</mm-item-recycler>
6975
</div>
7076
<script type="text/javascript">
@@ -106,25 +112,28 @@
106112
});
107113
}
108114

109-
// Any custom template provided as lightDOM needs to be a Polymer element
110-
HTMLImports.whenReady(function(){
111-
Polymer({
112-
is:'custom-template',
113-
extends: 'template'
114-
});
115-
});
116-
117115
window.addEventListener("WebComponentsReady", function() {
116+
var all = [
117+
document.querySelector("#itemRecycler"),
118+
document.querySelector("#itemRecycler2"),
119+
document.querySelector("#itemRecycler3"),
120+
];
118121
toggle = document.querySelector("#toggle");
119-
itemRecycler = document.querySelector("#itemRecycler");
120-
itemRecycler.data = data;
122+
itemRecycler = all[2];
123+
(itemRecycler || {}).data = data;
124+
itemRecycler = all[1];
125+
(itemRecycler || {}).data = data;
126+
itemRecycler = all[0];
127+
(itemRecycler || {}).data = data;
121128

122129
document.querySelector("#switch").onclick = function () {
123130
if (toggle.style.display !== "none") {
124131
toggle.style.display = "none"
125132
} else {
126133
toggle.style.display = "";
127-
itemRecycler.initialize();
134+
all.forEach(function (recycler) {
135+
recycler && recycler.initialize();
136+
});
128137
}
129138
};
130139

‎src/mm-item-recycler/mm-item-recycler.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,18 @@
88
<link rel="import" href="../shared/js/recycler.html"/>
99
<link rel="import" href="../shared/js/continuum.html"/>
1010
<link rel="import" href="../shared/behaviors/resolvable.html"/>
11-
<link rel="import" href="../shared/behaviors/stampbindable.html"/>
11+
<link rel="import" href="../shared/behaviors/patternhelpable.html"/>
1212
<link rel="import" href="../shared/behaviors/sizeresponsible.html"/>
1313
<link rel="import" href="../shared/behaviors/windownotifier.html"/>
14+
<link rel="import" href="../mm-pattern-helper/mm-pattern-helper.html"/>
1415

1516
<dom-module id="mm-item-recycler">
1617
<link rel="import" type="css" href="mm-item-recycler.css"/>
1718
<template>
19+
<mm-pattern-helper pattern-helper="{{patternHelper}}" pattern-helpable="{{patternHelpable}}">
20+
<content select="template"></content>
21+
</mm-pattern-helper>
22+
1823
<div id="pane">
1924
<div id="constrainer">
2025
<div id="middle"></div>

‎src/mm-item-recycler/mm-item-recycler.js‎

Lines changed: 22 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ found here: https://github.com/Polymer/core-list
5959

6060
behaviors: [
6161
StrandTraits.Resolvable,
62-
StrandTraits.StampBindable,
6362
StrandTraits.WindowNotifier,
63+
StrandTraits.PatternHelpable,
6464
StrandTraits.SizeResponsible,
6565
],
6666

@@ -80,20 +80,6 @@ found here: https://github.com/Polymer/core-list
8080
value: null,
8181
notify: true,
8282
},
83-
itemTemplate: {
84-
type: String,
85-
// value: ""
86-
value: false
87-
},
88-
itemTemplateElement: {
89-
type: Object,
90-
value: null,
91-
},
92-
_templatized: {
93-
type: Object,
94-
value: null,
95-
readOnly: true,
96-
},
9783
index: {
9884
type: Number,
9985
value: 0,
@@ -188,7 +174,7 @@ found here: https://github.com/Polymer/core-list
188174
},
189175

190176
observers: [
191-
"_needsInitialization(data, itemTemplate, itemTemplateElement)",
177+
"_needsInitialization(data, _pattern)",
192178
"_scopeChanged(scope.*)",
193179
"_dataChanged(data.*)",
194180
],
@@ -207,6 +193,9 @@ found here: https://github.com/Polymer/core-list
207193

208194
if (modelChanged &&
209195
delimiter > offset) {
196+
if (path.charCodeAt(offset) === "#".charCodeAt(0)) {
197+
offset += 1;
198+
}
210199
num = Number(path.slice(offset, delimiter));
211200
if (!isNaN(num)) {
212201
for (index; index < count; index++) {
@@ -273,7 +262,9 @@ found here: https://github.com/Polymer/core-list
273262
if (delta) {
274263
itemRecycler._viewportHeight += delta;
275264

276-
itemRecycler._recycler.resizeFrame(itemRecycler._viewportHeight);
265+
if (itemRecycler.hasPattern()) {
266+
itemRecycler._recycler.resizeFrame(itemRecycler._viewportHeight);
267+
}
277268
itemRecycler._repositionFooter();
278269
itemRecycler.debounce("settle-down", itemRecycler._settleDown, 1);
279270
}
@@ -287,7 +278,9 @@ found here: https://github.com/Polymer/core-list
287278
itemRecycler._headerHeight += delta;
288279
itemRecycler._viewportHeight -= delta;
289280

290-
itemRecycler._recycler.resizeFrame(itemRecycler._viewportHeight);
281+
if (itemRecycler.hasPattern()) {
282+
itemRecycler._recycler.resizeFrame(itemRecycler._viewportHeight);
283+
}
291284
itemRecycler._repositionMiddle();
292285
itemRecycler._repositionFooter();
293286
itemRecycler.debounce("settle-down", itemRecycler._settleDown, 1);
@@ -302,7 +295,9 @@ found here: https://github.com/Polymer/core-list
302295
itemRecycler._footerHeight += delta;
303296
itemRecycler._viewportHeight -= delta;
304297

305-
itemRecycler._recycler.resizeFrame(itemRecycler._viewportHeight);
298+
if (itemRecycler.hasPattern()) {
299+
itemRecycler._recycler.resizeFrame(itemRecycler._viewportHeight);
300+
}
306301
itemRecycler._repositionFooter();
307302
itemRecycler.debounce("settle-down", itemRecycler._settleDown, 1);
308303
}
@@ -421,15 +416,15 @@ found here: https://github.com/Polymer/core-list
421416
}
422417
},
423418

424-
_needsInitialization: function () {
419+
_needsInitialization: function (data, _pattern) {
425420
this._initializable = false;
426421
this.initialize();
427422
},
428423

429424
initialize: function () {
430425
if (!this.data) {
431426
return 0|false;
432-
} else if (!this.initializeTemplateBind()) {
427+
} else if (!this.hasPattern()) {
433428
return 0|false;
434429
} else if (this.$.extent.offsetHeight < 1) {
435430
this._waiting = true;
@@ -441,24 +436,6 @@ found here: https://github.com/Polymer/core-list
441436
}
442437
},
443438

444-
initializeTemplateBind: function () {
445-
if (!this.itemTemplateElement &&
446-
this.itemTemplate &&
447-
typeof this.itemTemplate === "string") {
448-
this.itemTemplateElement = Polymer.dom(this).querySelector("template#" + this.itemTemplate);
449-
}
450-
451-
if(!this.itemTemplateElement) {
452-
return 0|false;
453-
} else {
454-
if (this._templatized !== this.itemTemplateElement) {
455-
this._set_templatized(this.itemTemplateElement);
456-
this.templatize(this.itemTemplateElement);
457-
}
458-
return 0|true;
459-
}
460-
},
461-
462439
initializeRecycler: function() {
463440
if (!this._initializable) {
464441
if (this._recycler.truncate(0)) {
@@ -644,13 +621,16 @@ found here: https://github.com/Polymer/core-list
644621
}
645622
count = binds.push(bound = new BoundReference(this, id));
646623
bound.value = new BoundValue(null, this.scope);
647-
bound.instance = this.stamp(bound.value);
624+
bound.instance = content = this.clonePattern(bound.value) || null;
625+
626+
if (!bound.instance) {
627+
bound.instance = this.stampPattern(bound.value);
628+
content = Polymer.dom(bound.instance.root).querySelector("*");
629+
}
648630

649-
// assigning to the bound.value pre-stamp() is not sufficient -- must use bound.instance.set()
650631
bound.instance.set("scope", this.scope);
651632
bound.instance.set("model", this.data[young]);
652633

653-
content = Polymer.dom(bound.instance.root).querySelector("*");
654634
bound.element = document.createElement("DIV");
655635
this.toggleClass("recycler-panel", true, bound.element);
656636
Polymer.dom(bound.element).appendChild(content);

0 commit comments

Comments
 (0)