Skip to content

Commit de23af0

Browse files
anthonykoerberanthonykoerber
committed
custom templates exploration
1 parent d398f04 commit de23af0

6 files changed

Lines changed: 226 additions & 233 deletions

File tree

‎src/mm-grid/example.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,14 @@ <h4>Expanded Concept</h4>
9696
});
9797
}
9898

99+
// Any custom template provided as lightDOM needs to be a Polymer element
100+
HTMLImports.whenReady(function(){
101+
Polymer({
102+
is:'custom-template',
103+
extends: 'template'
104+
});
105+
});
106+
99107
window.addEventListener("WebComponentsReady", function() {
100108
grid1.data = grid1Data;
101109
grid2.data = grid2Data;

‎src/mm-grid/index.html‎

Lines changed: 58 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -37,68 +37,67 @@
3737
</style>
3838
</head>
3939
<body>
40-
41-
<mm-grid id="mmTestGrid" gpu="4d" selectable expandable="false" item-template="customTemplate" unresolved>
42-
<mm-grid-column width="20%" field="name" sort resize>Name</mm-grid-column>
43-
<mm-grid-column width="10%" field="id" sort resize>Id</mm-grid-column>
44-
<mm-grid-column width="20%" field="advertiser" sort resize>Advertiser</mm-grid-column>
45-
<mm-grid-column width="15%" field="concept" sort resize>Concept</mm-grid-column>
46-
<mm-grid-column width="10%" field="type" resize>Type</mm-grid-column>
47-
<mm-grid-column width="15%" field="dimensions">Dimensions</mm-grid-column>
48-
<mm-grid-column width="10%" field="actions"></mm-grid-column>
49-
<!-- Any custom template provided as lightDOM needs to be a Polymer element -->
50-
<template is="custom-template" id="customTemplate">
51-
<!-- <mm-grid-item model="{{model}}" scope="{{scope}}" style$="{{model.style}}"> -->
52-
<mm-grid-item model="{{model}}" scope="{{scope}}">
53-
<div field="actions">
54-
<!--
55-
<mm-icon width="15" height="15" type="actions" id="{{createId('tooltip', model.id)}}"></mm-icon>
56-
<mm-tooltip model="{{model}}" target$="{{createId('#tooltip', model.id)}}">
57-
<label>I'm a tooltip for Creative - <span>{{model.name}}</span></label>
58-
</mm-tooltip>
59-
-->
60-
<!--
61-
<mm-icon type="actions" id="{{_createId('menu', model.id)}}" width="15" height="15"></mm-icon>
62-
<mm-menu id="testMenu" direction="s" offset="15" target$="{{_createId('#menu', model.id)}}">
63-
<mm-list-item value="m1">menu item 1</mm-list-item>
64-
<mm-list-item value="m2">menu item 2</mm-list-item>
65-
<mm-list-item value="m3">menu item 3</mm-list-item>
66-
<mm-list-item value="m4">menu item 4</mm-list-item>
67-
<mm-list-item value="m5">menu item 5</mm-list-item>
68-
</mm-menu>
69-
-->
70-
<mm-dropdown>
71-
<mm-list-item>List Item</mm-list-item>
72-
<mm-list-item>List Item</mm-list-item>
73-
<mm-list-item>List Item</mm-list-item>
74-
<mm-list-item>List Item</mm-list-item>
75-
</mm-dropdown>
76-
</div>
77-
<div field="name">
78-
Creative - <span>{{model.name}}</span>
79-
</div>
80-
<div class="expansion">
81-
<div class="expansion-row">
82-
<div class="expansion-col">
83-
<h4>Expanded Content</h4>
84-
<span>{{model.name}}</span>
85-
</div>
86-
<div class="expansion-col">
87-
<h4>Expanded Advertiser</h4>
88-
<span>{{model.advertiser}}</span>
40+
<mm-grid id="mmTestGrid" gpu="4d" selectable expandable="false" item-template="customTemplate" unresolved>
41+
<mm-grid-column width="20%" field="name" sort resize>Name</mm-grid-column>
42+
<mm-grid-column width="10%" field="id" sort resize>Id</mm-grid-column>
43+
<mm-grid-column width="20%" field="advertiser" sort resize>Advertiser</mm-grid-column>
44+
<mm-grid-column width="15%" field="concept" sort resize>Concept</mm-grid-column>
45+
<mm-grid-column width="10%" field="type" resize>Type</mm-grid-column>
46+
<mm-grid-column width="15%" field="dimensions">Dimensions</mm-grid-column>
47+
<mm-grid-column width="10%" field="actions"></mm-grid-column>
48+
<!-- Any custom template provided as lightDOM needs to be a Polymer element -->
49+
<template is="custom-template" id="customTemplate">
50+
<!-- <mm-grid-item model="{{model}}" scope="{{scope}}" style$="{{model.style}}"> -->
51+
<mm-grid-item model="{{model}}" scope="{{scope}}">
52+
<div field="actions">
53+
<!--
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)}}">
56+
<label>I'm a tooltip for Creative - <span>{{model.name}}</span></label>
57+
</mm-tooltip>
58+
-->
59+
<!--
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)}}">
62+
<mm-list-item value="m1">menu item 1</mm-list-item>
63+
<mm-list-item value="m2">menu item 2</mm-list-item>
64+
<mm-list-item value="m3">menu item 3</mm-list-item>
65+
<mm-list-item value="m4">menu item 4</mm-list-item>
66+
<mm-list-item value="m5">menu item 5</mm-list-item>
67+
</mm-menu>
68+
-->
69+
<mm-dropdown>
70+
<mm-list-item>List Item</mm-list-item>
71+
<mm-list-item>List Item</mm-list-item>
72+
<mm-list-item>List Item</mm-list-item>
73+
<mm-list-item>List Item</mm-list-item>
74+
</mm-dropdown>
75+
</div>
76+
<div field="name">
77+
Creative - <span>{{model.name}}</span>
78+
</div>
79+
<div class="expansion">
80+
<div class="expansion-row">
81+
<div class="expansion-col">
82+
<h4>Expanded Content</h4>
83+
<span>{{model.name}}</span>
84+
</div>
85+
<div class="expansion-col">
86+
<h4>Expanded Advertiser</h4>
87+
<span>{{model.advertiser}}</span>
88+
</div>
89+
<div class="expansion-col">
90+
<h4>Expanded Concept</h4>
91+
<span>{{model.concept}}</span>
92+
</div>
8993
</div>
90-
<div class="expansion-col">
91-
<h4>Expanded Concept</h4>
92-
<span>{{model.concept}}</span>
94+
<div class="expansion-row">
95+
<div class="expansion-col">Expanded Content - <span>{{model.concept}}</span></div>
9396
</div>
9497
</div>
95-
<div class="expansion-row">
96-
<div class="expansion-col">Expanded Content - <span>{{model.concept}}</span></div>
97-
</div>
98-
</div>
99-
</mm-grid-item>
100-
</template>
101-
</mm-grid>
98+
</mm-grid-item>
99+
</template>
100+
</mm-grid>
102101

103102
<script type="text/javascript">
104103
var data = [],

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
<button id="switch">toggle</button>
4747
<div id="toggle" style="display: none">
4848
<mm-item-recycler id="itemRecycler" item-template="templateItem" unresolved>
49-
<template id="templateItem">
49+
<template is="custom-template" id="templateItem">
5050
<div class="_mm_item" data-id="{{model.id}}" style$="{{model.style}}">
5151
<mm-input value="{{model.name}}"></mm-input><span>{{model.num}}</span>
5252

@@ -106,6 +106,14 @@
106106
});
107107
}
108108

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+
109117
window.addEventListener("WebComponentsReady", function() {
110118
toggle = document.querySelector("#toggle");
111119
itemRecycler = document.querySelector("#itemRecycler");

‎src/mm-tabs/index.html‎

Lines changed: 37 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -97,40 +97,28 @@
9797
<div style="padding-right: 20px;">
9898
<mm-tabs tab-bar-offset="4" id="tabSection" tab-bar-position="left" unresolved>
9999
<mm-tab id="ext" tab-label="External URL with tabs" icon="apps" url="tab-content.html"></mm-tab>
100-
<mm-tab tab-label="Content in Light DOM" icon="pixels" active>
100+
<mm-tab tab-label="Content in Light DOM" icon="pixels">
101101
<div class="col c4">
102102
<p>The ostensible reason why Ahab did not go on board of the whaler we had spoken was this: the wind and sea betokened storms. But even had this not been the case, he would not after all, perhaps, have boarded her&mdash;judging by his subsequent conduct on similar occasions&mdash;if so it had been that, by the process of hailing, he had obtained a negative answer to the question he put. For, as it eventually turned out, he cared not to consort, even for five minutes, with any stranger captain, except he could contribute some of that information he so absorbingly sought. But all this might remain inadequately estimated, were not something said here of the peculiar usages of whaling-vessels when meeting each other in foreign seas, and especially on a common cruising-ground.</p>
103103
</div>
104104
</mm-tab>
105-
<mm-tab id="sameContent" tab-label="Same Content as Next Tab" url="tab-content-alt.html"></mm-tab>
106-
<mm-tab id="jsContent" tab-label="JS Content Load"></mm-tab>
107-
<mm-tab id="gridTest" tab-label="This one has a light dom grid">
105+
<mm-tab id="sameContent" tab-label="Loaded template" url="tab-content-alt.html"></mm-tab>
106+
<mm-tab id="jsContent" tab-label="Loaded template via JS" active></mm-tab>
107+
<mm-tab id="gridTest" tab-label="LightDOM grid">
108108
<mm-grid id="mmTestGrid1" selectable expandable item-template="customTemplate" style="width: 100%; height: 300px;">
109109
<mm-grid-column width="20%" field="name" sort resize>Name</mm-grid-column>
110110
<mm-grid-column width="20%" field="id" sort resize>Id</mm-grid-column>
111111
<mm-grid-column width="20%" field="advertiser" sort resize>Advertiser</mm-grid-column>
112112
<mm-grid-column width="20%" field="concept" sort resize>Concept</mm-grid-column>
113113
<mm-grid-column width="10%" field="type" resize>Type</mm-grid-column>
114114
<mm-grid-column width="10%" field="actions"></mm-grid-column>
115-
<template id="customTemplate">
115+
<template is="custom-template" id="customTemplate">
116116
<mm-grid-item model="{{model}}" scope="{{scope}}">
117117
<div field="actions">
118-
<!-- Using mm-tooltip in a custom grid item -->
119118
<mm-icon width="15" height="15" type="actions" id="{{createId('tooltip', model.id)}}"></mm-icon>
120119
<mm-tooltip model="{{model}}" target$="{{createId('#tooltip', model.id)}}">
121120
<label>I'm a tooltip for Creative - <span>{{model.name}}</span></label>
122121
</mm-tooltip>
123-
<!-- Using mm-menu in a custom grid item - uncomment to try -->
124-
<!--
125-
<mm-icon type="actions" id="{{createId('menu', model.id)}}" width="15" height="15"></mm-icon>
126-
<mm-menu id="testMenu" direction="s" offset="15" target$="{{createId('#menu', model.id)}}">
127-
<mm-list-item value="m1">menu item 1</mm-list-item>
128-
<mm-list-item value="m2">menu item 2</mm-list-item>
129-
<mm-list-item value="m3">menu item 3</mm-list-item>
130-
<mm-list-item value="m4">menu item 4</mm-list-item>
131-
<mm-list-item value="m5">menu item 5</mm-list-item>
132-
</mm-menu>
133-
-->
134122
</div>
135123
<div field="name">
136124
Creative - <span>{{model.name}}</span>
@@ -158,39 +146,25 @@ <h4>Expanded Concept</h4>
158146
</template>
159147
</mm-grid>
160148
</mm-tab>
161-
162-
163149
</mm-tabs>
164150
</div>
165151

166152
<script>
167153

168-
document.addEventListener('WebComponentsReady', function() {
169-
170-
var grid1 = document.querySelector("#mmTestGrid1"),
171-
grid1Data = [];
172-
173-
for(var i=0; i<33; i++) {
174-
grid1Data.push({
175-
id: i,
176-
name: "Name",
177-
content: "Content",
178-
advertiser: "Advertiser No. " + i,
179-
concept: "Concept No. " + i,
180-
type: "swf",
181-
file: "Creative_File_" + i + ".swf",
182-
selected: false,
183-
expanded: false
154+
// Any custom template provided as lightDOM needs to be a Polymer element
155+
HTMLImports.whenReady(function(){
156+
Polymer({
157+
is:'custom-template',
158+
extends: 'template'
184159
});
185-
}
186-
187-
grid1.data = grid1Data;
160+
});
188161

189-
document.querySelector('#jsContent').loadExternal('tab-content-alt.html', function(dataHost) {
190-
var grid2Data = [];
162+
document.addEventListener('WebComponentsReady', function() {
163+
var grid1 = document.querySelector("#mmTestGrid1"),
164+
grid1Data = [];
191165

192166
for(var i=0; i<33; i++) {
193-
grid2Data.push({
167+
grid1Data.push({
194168
id: i,
195169
name: "Name",
196170
content: "Content",
@@ -203,9 +177,29 @@ <h4>Expanded Concept</h4>
203177
});
204178
}
205179

206-
dataHost.set("data",grid2Data);
180+
grid1.data = grid1Data;
181+
182+
document.querySelector('#jsContent').loadExternal('tab-content-alt.html', function(dataHost) {
183+
var grid2Data = [];
184+
185+
for(var i=0; i<33; i++) {
186+
grid2Data.push({
187+
id: i,
188+
name: "Name",
189+
content: "Content",
190+
advertiser: "Advertiser No. " + i,
191+
concept: "Concept No. " + i,
192+
type: "swf",
193+
file: "Creative_File_" + i + ".swf",
194+
selected: false,
195+
expanded: false
196+
});
197+
}
198+
199+
dataHost.set("data",grid2Data);
200+
});
207201
});
208-
});
202+
209203
</script>
210204
</body>
211205
</html>

‎src/mm-tabs/tab-content-alt.html‎

Lines changed: 39 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,44 @@
11
<template>
2-
3-
<mm-grid data="{{data}}" id="mmTestGrid2" selectable expandable item-template="customTemplate" style="width: 100%; height: 300px;">
4-
<mm-grid-column width="20%" field="name" sort resize>Name</mm-grid-column>
5-
<mm-grid-column width="20%" field="id" sort resize>Id</mm-grid-column>
6-
<mm-grid-column width="20%" field="advertiser" sort resize>Advertiser</mm-grid-column>
7-
<mm-grid-column width="20%" field="concept" sort resize>Concept</mm-grid-column>
8-
<mm-grid-column width="10%" field="type" resize>Type</mm-grid-column>
9-
<mm-grid-column width="10%" field="actions"></mm-grid-column>
10-
<template id="customTemplate">
11-
<mm-grid-item model="{{model}}" scope="{{scope}}">
12-
<div field="actions">
13-
<!-- Using mm-tooltip in a custom grid item -->
14-
<mm-icon width="15" height="15" type="actions" id="{{createId('tooltip', model.id)}}"></mm-icon>
15-
<mm-tooltip model="{{model}}" target$="{{createId('#tooltip', model.id)}}">
16-
<label>I'm a tooltip for Creative - <span>{{model.name}}</span></label>
17-
</mm-tooltip>
18-
<!-- Using mm-menu in a custom grid item - uncomment to try -->
19-
<!--
20-
<mm-icon type="actions" id="{{createId('menu', model.id)}}" width="15" height="15"></mm-icon>
21-
<mm-menu id="testMenu" direction="s" offset="15" target$="{{createId('#menu', model.id)}}">
22-
<mm-list-item value="m1">menu item 1</mm-list-item>
23-
<mm-list-item value="m2">menu item 2</mm-list-item>
24-
<mm-list-item value="m3">menu item 3</mm-list-item>
25-
<mm-list-item value="m4">menu item 4</mm-list-item>
26-
<mm-list-item value="m5">menu item 5</mm-list-item>
27-
</mm-menu>
28-
-->
29-
</div>
30-
<div field="name">
31-
Creative - <span>{{model.name}}</span>
32-
</div>
33-
<div class="expansion">
34-
<div class="expansion-row">
35-
<div class="expansion-col">
36-
<h4>Expanded Content</h4>
37-
<span>{{model.name}}</span>
38-
</div>
39-
<div class="expansion-col">
40-
<h4>Expanded Advertiser</h4>
41-
<span>{{model.advertiser}}</span>
2+
<mm-grid data="{{data}}" id="mmTestGrid2" selectable expandable item-template="customTemplate" style="width: 100%; height: 300px;">
3+
<mm-grid-column width="20%" field="name" sort resize>Name</mm-grid-column>
4+
<mm-grid-column width="20%" field="id" sort resize>Id</mm-grid-column>
5+
<mm-grid-column width="20%" field="advertiser" sort resize>Advertiser</mm-grid-column>
6+
<mm-grid-column width="20%" field="concept" sort resize>Concept</mm-grid-column>
7+
<mm-grid-column width="10%" field="type" resize>Type</mm-grid-column>
8+
<mm-grid-column width="10%" field="actions"></mm-grid-column>
9+
10+
<template is="custom-template" id="customTemplate">
11+
<mm-grid-item model="{{model}}" scope="{{scope}}">
12+
<div field="actions">
13+
<mm-icon width="15" height="15" type="actions" id="{{createId('tooltip', model.id)}}"></mm-icon>
14+
<mm-tooltip model="{{model}}" target$="{{createId('#tooltip', model.id)}}">
15+
<label>I'm a tooltip for Creative - <span>{{model.name}}</span></label>
16+
</mm-tooltip>
17+
</div>
18+
<div field="name">
19+
Creative - <span>{{model.name}}</span>
20+
</div>
21+
<div class="expansion">
22+
<div class="expansion-row">
23+
<div class="expansion-col">
24+
<h4>Expanded Content</h4>
25+
<span>{{model.name}}</span>
26+
</div>
27+
<div class="expansion-col">
28+
<h4>Expanded Advertiser</h4>
29+
<span>{{model.advertiser}}</span>
30+
</div>
31+
<div class="expansion-col">
32+
<h4>Expanded Concept</h4>
33+
<span>{{model.concept}}</span>
34+
</div>
4235
</div>
43-
<div class="expansion-col">
44-
<h4>Expanded Concept</h4>
45-
<span>{{model.concept}}</span>
36+
<div class="expansion-row">
37+
<div class="expansion-col">Expanded Content - <span>{{model.concept}}</span></div>
4638
</div>
4739
</div>
48-
<div class="expansion-row">
49-
<div class="expansion-col">Expanded Content - <span>{{model.concept}}</span></div>
50-
</div>
51-
</div>
52-
</mm-grid-item>
53-
</template>
54-
</mm-grid>
55-
40+
</mm-grid-item>
41+
</template>
42+
43+
</mm-grid>
5644
</template>

0 commit comments

Comments
 (0)