Merge pull request #14 from netopyr/master

Possibility to render arbitrary HTML in a cell

Author: liuwenchao

dist/aha-table.html

@@ -309,9 +309,16 @@
 											checked$="{{getValue(row,column.name)}}" />
 									</template>
 								</div>
-							 	<div
+                                <div
 									on-click="click"
-									class$="{{getReaderClass(row, column.name)}}">{{readContent(row, column)}}</div>
+									class$="{{getReaderClass(row, column.name)}}">
+                                    <template is="dom-if" if="{{!isEqual(column.type, 'html')}}">
+                                        <span>{{readContent(row, column)}}</span>
+                                    </template>
+                                    <template is="dom-if" if="{{isEqual(column.type, 'html')}}">
+                                        <aha-html-echo html="{{readContent(row, column)}}"></aha-html-echo>
+                                    </template>
+                                </div>
 							</td>
 						</template>
 					</tr>
@@ -759,6 +766,7 @@
 			var row    = e.model.row;
 			var column = e.model.column;
 			if(row){
+				this.fire('before-save', {"event": e, "row" : row, "column" : column});
 				if ("CHECKBOX" === e.target.type.toUpperCase()) {
 					this.set(column.name, e.target.checked, row);
 				} else {
@@ -1184,3 +1192,42 @@
 		}
 	});
 </script>
+
+
+
+
+<!--
+/**
+ * @module aha-html-echo
+ *
+ *
+ * Generates html elements dynamically, inspired by sortable-table
+ * https://github.com/stevenrskelton/sortable-table
+ *
+ * WARNING! Potential XSS vulnerability if `html` comes from an untrusted source
+ *
+ *    <aha-html-echo
+ *         html="html">
+ *    </aha-html-echo>
+ *
+ * @class aha-html-echo
+ * @author Michael Heinrichs<[email protected]>
+ *
+ */
+-->
+<script>
+    Polymer({
+        is: "aha-html-echo",
+        properties: {
+            //column name
+            html: {
+                type: String,
+                value: "",
+                observer: "onHtmlChanged"
+            }
+        },
+        onHtmlChanged: function() {
+            this.innerHTML = this.html;
+        }
+    });
+</script>

index.html

@@ -132,6 +132,13 @@ <h2>Advanced usage: themed, customized columns, customized attributes, customize
 			hint="Keep it short"
 			placeholder="Event Content"
 			default=""></aha-column>
+        <aha-column name="html"
+            type="html"
+
+            required
+
+            placeholder=""
+            default=""></aha-column>
 	</aha-table>
 	<BUTTON id="create" onclick="themed.create();">Create</BUTTON>
 
@@ -140,7 +147,7 @@ <h2><a href="demo/performance.html">Performance Test</a></h2>
 
 	<script>
 		var events = [
-			{ title: "gym", date: new Date().toISOString().slice(0, 10), type: "private", content: "5*20 situps, 5 miles running, 5 minutes PLANKS", enabled: true },
+			{ 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>" },
 			{ title: "breakfast", date: new Date().toISOString().slice(0, 10), type: "private", enabled: true },
 			{ title: "work", date: new Date().toISOString().slice(0, 10), type: "public", content: "implement aha-table plymer element", enabled: true },
 			{ title: "lunch", date: new Date().toISOString().slice(0, 10), type: "public", content: null, enabled: false },

src/aha-table.html

@@ -309,9 +309,16 @@
 											checked$="{{getValue(row,column.name)}}" />
 									</template>
 								</div>
-							 	<div
+                                <div
 									on-click="click"
-									class$="{{getReaderClass(row, column.name)}}">{{readContent(row, column)}}</div>
+									class$="{{getReaderClass(row, column.name)}}">
+                                    <template is="dom-if" if="{{!isEqual(column.type, 'html')}}">
+                                        <span>{{readContent(row, column)}}</span>
+                                    </template>
+                                    <template is="dom-if" if="{{isEqual(column.type, 'html')}}">
+                                        <aha-html-echo html="{{readContent(row, column)}}"></aha-html-echo>
+                                    </template>
+                                </div>
 							</td>
 						</template>
 					</tr>
@@ -1185,3 +1192,42 @@
 		}
 	});
 </script>
+
+
+
+
+<!--
+/**
+ * @module aha-html-echo
+ *
+ *
+ * Generates html elements dynamically, inspired by sortable-table
+ * https://github.com/stevenrskelton/sortable-table
+ *
+ * WARNING! Potential XSS vulnerability if `html` comes from an untrusted source
+ *
+ *    <aha-html-echo
+ *         html="html">
+ *    </aha-html-echo>
+ *
+ * @class aha-html-echo
+ * @author Michael Heinrichs<[email protected]>
+ *
+ */
+-->
+<script>
+    Polymer({
+        is: "aha-html-echo",
+        properties: {
+            //column name
+            html: {
+                type: String,
+                value: "",
+                observer: "onHtmlChanged"
+            }
+        },
+        onHtmlChanged: function() {
+            this.innerHTML = this.html;
+        }
+    });
+</script>