Skip to content

Commit f7bddf5

Browse files
committed
Merge pull request #14 from netopyr/master
Possibility to render arbitrary HTML in a cell
2 parents 95a97eb + 2ae9269 commit f7bddf5

File tree

3 files changed

+105
-5
lines changed

3 files changed

+105
-5
lines changed

dist/aha-table.html

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -309,9 +309,16 @@
309309
checked$="{{getValue(row,column.name)}}" />
310310
</template>
311311
</div>
312-
<div
312+
<div
313313
on-click="click"
314-
class$="{{getReaderClass(row, column.name)}}">{{readContent(row, column)}}</div>
314+
class$="{{getReaderClass(row, column.name)}}">
315+
<template is="dom-if" if="{{!isEqual(column.type, 'html')}}">
316+
<span>{{readContent(row, column)}}</span>
317+
</template>
318+
<template is="dom-if" if="{{isEqual(column.type, 'html')}}">
319+
<aha-html-echo html="{{readContent(row, column)}}"></aha-html-echo>
320+
</template>
321+
</div>
315322
</td>
316323
</template>
317324
</tr>
@@ -759,6 +766,7 @@
759766
var row = e.model.row;
760767
var column = e.model.column;
761768
if(row){
769+
this.fire('before-save', {"event": e, "row" : row, "column" : column});
762770
if ("CHECKBOX" === e.target.type.toUpperCase()) {
763771
this.set(column.name, e.target.checked, row);
764772
} else {
@@ -1184,3 +1192,42 @@
11841192
}
11851193
});
11861194
</script>
1195+
1196+
1197+
1198+
1199+
<!--
1200+
/**
1201+
* @module aha-html-echo
1202+
*
1203+
*
1204+
* Generates html elements dynamically, inspired by sortable-table
1205+
* https://github.com/stevenrskelton/sortable-table
1206+
*
1207+
* WARNING! Potential XSS vulnerability if `html` comes from an untrusted source
1208+
*
1209+
* <aha-html-echo
1210+
* html="html">
1211+
* </aha-html-echo>
1212+
*
1213+
* @class aha-html-echo
1214+
* @author Michael Heinrichs<[email protected]>
1215+
*
1216+
*/
1217+
-->
1218+
<script>
1219+
Polymer({
1220+
is: "aha-html-echo",
1221+
properties: {
1222+
//column name
1223+
html: {
1224+
type: String,
1225+
value: "",
1226+
observer: "onHtmlChanged"
1227+
}
1228+
},
1229+
onHtmlChanged: function() {
1230+
this.innerHTML = this.html;
1231+
}
1232+
});
1233+
</script>

index.html

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,13 @@ <h2>Advanced usage: themed, customized columns, customized attributes, customize
132132
hint="Keep it short"
133133
placeholder="Event Content"
134134
default=""></aha-column>
135+
<aha-column name="html"
136+
type="html"
137+
138+
required
139+
140+
placeholder=""
141+
default=""></aha-column>
135142
</aha-table>
136143
<BUTTON id="create" onclick="themed.create();">Create</BUTTON>
137144

@@ -140,7 +147,7 @@ <h2><a href="demo/performance.html">Performance Test</a></h2>
140147

141148
<script>
142149
var events = [
143-
{ title: "gym", date: new Date().toISOString().slice(0, 10), type: "private", content: "5*20 situps, 5 miles running, 5 minutes PLANKS", enabled: true },
150+
{ title: "gym", date: new Date().toISOString().slice(0, 10), type: "private", content: "5*20 situps, 5 miles running, 5 minutes PLANKS", enabled: true, html: "<a href='http://www.google.com'>Search</a>" },
144151
{ title: "breakfast", date: new Date().toISOString().slice(0, 10), type: "private", enabled: true },
145152
{ title: "work", date: new Date().toISOString().slice(0, 10), type: "public", content: "implement aha-table plymer element", enabled: true },
146153
{ title: "lunch", date: new Date().toISOString().slice(0, 10), type: "public", content: null, enabled: false },

src/aha-table.html

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -309,9 +309,16 @@
309309
checked$="{{getValue(row,column.name)}}" />
310310
</template>
311311
</div>
312-
<div
312+
<div
313313
on-click="click"
314-
class$="{{getReaderClass(row, column.name)}}">{{readContent(row, column)}}</div>
314+
class$="{{getReaderClass(row, column.name)}}">
315+
<template is="dom-if" if="{{!isEqual(column.type, 'html')}}">
316+
<span>{{readContent(row, column)}}</span>
317+
</template>
318+
<template is="dom-if" if="{{isEqual(column.type, 'html')}}">
319+
<aha-html-echo html="{{readContent(row, column)}}"></aha-html-echo>
320+
</template>
321+
</div>
315322
</td>
316323
</template>
317324
</tr>
@@ -1185,3 +1192,42 @@
11851192
}
11861193
});
11871194
</script>
1195+
1196+
1197+
1198+
1199+
<!--
1200+
/**
1201+
* @module aha-html-echo
1202+
*
1203+
*
1204+
* Generates html elements dynamically, inspired by sortable-table
1205+
* https://github.com/stevenrskelton/sortable-table
1206+
*
1207+
* WARNING! Potential XSS vulnerability if `html` comes from an untrusted source
1208+
*
1209+
* <aha-html-echo
1210+
* html="html">
1211+
* </aha-html-echo>
1212+
*
1213+
* @class aha-html-echo
1214+
* @author Michael Heinrichs<[email protected]>
1215+
*
1216+
*/
1217+
-->
1218+
<script>
1219+
Polymer({
1220+
is: "aha-html-echo",
1221+
properties: {
1222+
//column name
1223+
html: {
1224+
type: String,
1225+
value: "",
1226+
observer: "onHtmlChanged"
1227+
}
1228+
},
1229+
onHtmlChanged: function() {
1230+
this.innerHTML = this.html;
1231+
}
1232+
});
1233+
</script>

0 commit comments

Comments
 (0)