Skip to content
This repository has been archived by the owner on Sep 21, 2022. It is now read-only.

Commit

Permalink
Fix #19 - Using binding in <sortable-column> does not work.
Browse files Browse the repository at this point in the history
  • Loading branch information
@stevenrskelton
stevenrskelton committed Nov 2, 2014
1 parent fbd51cd commit ac17062
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 31 deletions.
41 changes: 40 additions & 1 deletion examples/dom-elements.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<link rel="import" href="fruit-icon.html">
<link rel="import" href="project-docs.html">
<style shim-shadowdom>
.indent { margin-left: 65px; }
sortable-table { width: 500px; margin-left: 65px; }
sortable-table::shadow td.column-alice,
sortable-table::shadow td.column-bill,
Expand Down Expand Up @@ -47,7 +48,7 @@ <h1>DOM Elements</h1>
{ "fruit":"pear", "alice": 4, "bill": 2, "casey": 8 },
{ "fruit":"strawberry", "alice": 0, "bill": 14, "casey": 0 }
]
&lt;/sortable-table&gt; </prism-js>
&lt;/sortable-table&gt;</prism-js>

<p>

Expand Down Expand Up @@ -96,5 +97,43 @@ <h1>DOM Elements</h1>
[ "pear", 4, 2, 8 ],
[ "strawberry", 0, 14, 0 ]]
</sortable-table>

<h2>Binding in DOM Elements</h2>

All attributes (excluding <code>name</code>) in each <code>sortable-column</code> can be bound to.

<prism-js language="markup">&lt;sortable-table&gt;
&lt;sortable-column name="fruit" title="{{column1}}"&gt;&lt;/sortable-column&gt;
&lt;sortable-column name="alice"&gt;{{column2}}&lt;/sortable-column&gt;
[
{ "fruit":"apple", "alice": 4, "bill": 10, "casey": 2 },
{ "fruit":"banana", "alice": 0, "bill": 4, "casey": 0 },
{ "fruit":"grape", "alice": 2, "bill": 3, "casey": 5 },
{ "fruit":"pear", "alice": 4, "bill": 2, "casey": 8 },
{ "fruit":"strawberry", "alice": 0, "bill": 14, "casey": 0 }
]
&lt;/sortable-table&gt;</prism-js>

<template is="auto-binding">
<table class="indent">
<tr>
<td>Column 1 title : </td><td><input type="text" value="{{column1}}"></td>
</tr>
<tr>
<td>Column 2 #text : </td><td><input type="text" value="{{column2}}"></td>
</tr>
</table>
<sortable-table class="default">
<sortable-column name="fruit" title="{{column1}}"></sortable-column>
<sortable-column name="alice">{{column2}}</sortable-column>
[
{ "fruit":"apple", "alice": 4, "bill": 10, "casey": 2 },
{ "fruit":"banana", "alice": 0, "bill": 4, "casey": 0 },
{ "fruit":"grape", "alice": 2, "bill": 3, "casey": 5 },
{ "fruit":"pear", "alice": 4, "bill": 2, "casey": 8 },
{ "fruit":"strawberry", "alice": 0, "bill": 14, "casey": 0 }
]
</sortable-table>
</template>
</body>
</html>
108 changes: 78 additions & 30 deletions sortable-table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,37 +436,30 @@
var columnNodes = this.querySelectorAll('sortable-column');
var c = [];
var self = this;
if(columnNodes.length > 0){
[].forEach.call(columnNodes, function(n, index) {
var name = n.getAttribute('name');
if(!name || name === '') name = index;
if(String(name).indexOf(' ') > -1) alert('Column name `'+name+'` contains an illegal character (` `)');
var title = n.getAttribute('title');
if(!title || title === '') title = n.textContent.trim();
if(title === '') title = name;
var formula = n.getAttribute('formula');
if(formula){
var match = formula.match(/function[^\(]*\(([^\)]*)\)[^\{]*{([^\}]*)\}/);
if (match) {
var args = match[1].split(',').map(function(arg) { return arg.replace(/\s+/, ''); });
formula = new Function(args, match[2]);
}else if(self[formula]){
//not an inlined function, assume it's a member of this
formula = self[formula]
}else if(PolymerExpressions.prototype[formula]){
//not an inlined function, or member of this, check PolymerExpressions.prototype
formula = PolymerExpressions.prototype[formula];
}else if(formula.substring(0,29) === 'PolymerExpressions.prototype.'){
var f = formula.substring(29);
formula = PolymerExpressions.prototype[f];
if(!formula) alert('Could not load formula `'+ formula +'` from PolymerExpressions.prototype for column `' + name + '`');
}else alert('Could not load formula `'+ formula +'` for column `' + name + '`');
if(this.columnObserver) this.columnObserver.disconnect();
this.columnObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
var sortableColumn = null;
if(m.type === 'attributes' && m.target.nodeName === 'SORTABLE-COLUMN'){
sortableColumn = self.readSortableColumn.call(self, m.target, null);
}else if(m.type === "characterData"){
sortableColumn = self.readSortableColumn.call(self, m.target.parentNode, null);
}
if(sortableColumn){
var i = self.columns.findIndex(function(e){
return e.name === sortableColumn.name;
});
self.columns.splice(i, 1, sortableColumn);
}
c.push({
name: name, title: title, formula: formula,
cellTemplate: n.getAttribute('cellTemplate'),
headerTemplate: n.getAttribute('headerTemplate'),
footerTemplate: n.getAttribute('footerTemplate')
});
});
if(columnNodes.length > 0){
[].forEach.call(columnNodes, function(n, index){
c.push(self.readSortableColumn.call(self, n, index));
self.columnObserver.observe(n, {
attributes: true,
subtree: true,
characterData: true
});
});
this.columns = c;
Expand All @@ -485,6 +478,38 @@
}
}
},
readSortableColumn: function(n, index){
var name = n.getAttribute('name');
if(!name || name === '') name = index;
if(String(name).indexOf(' ') > -1) alert('Column name `'+name+'` contains an illegal character (` `)');
var title = n.getAttribute('title');
if(!title || title === '') title = n.textContent.trim();
if(title === '') title = name;
var formula = n.getAttribute('formula');
if(formula){
var match = formula.match(/function[^\(]*\(([^\)]*)\)[^\{]*{([^\}]*)\}/);
if (match) {
var args = match[1].split(',').map(function(arg) { return arg.replace(/\s+/, ''); });
formula = new Function(args, match[2]);
}else if(this[formula]){
//not an inlined function, assume it's a member of this
formula = this[formula]
}else if(PolymerExpressions.prototype[formula]){
//not an inlined function, or member of this, check PolymerExpressions.prototype
formula = PolymerExpressions.prototype[formula];
}else if(formula.substring(0,29) === 'PolymerExpressions.prototype.'){
var f = formula.substring(29);
formula = PolymerExpressions.prototype[f];
if(!formula) alert('Could not load formula `'+ formula +'` from PolymerExpressions.prototype for column `' + name + '`');
}else alert('Could not load formula `'+ formula +'` for column `' + name + '`');
}
return {
name: name, title: title, formula: formula,
cellTemplate: n.getAttribute('cellTemplate'),
headerTemplate: n.getAttribute('headerTemplate'),
footerTemplate: n.getAttribute('footerTemplate')
};
},
/**
* Change Observers
*/
Expand Down Expand Up @@ -1035,5 +1060,28 @@
this.forceFooterRefresh++;
}
});
//polyfills
if (!Array.prototype.findIndex) {
Array.prototype.findIndex = function(predicate) {
if (this == null) {
throw new TypeError('Array.prototype.find called on null or undefined');
}
if (typeof predicate !== 'function') {
throw new TypeError('predicate must be a function');
}
var list = Object(this);
var length = list.length >>> 0;
var thisArg = arguments[1];
var value;

for (var i = 0; i < length; i++) {
value = list[i];
if (predicate.call(thisArg, value, i, list)) {
return i;
}
}
return -1;
};
}
</script>
</polymer-element>

0 comments on commit ac17062

Please sign in to comment.