|
239 | 239 |
|
240 | 240 |
|
241 | 241 | <!-- repeating urth-core-query elements to be stamped as children of myDataframe -->
|
242 |
| - <template id="queries" is="dom-repeat" items="{{queries}}" as="query" |
| 242 | + <template id="queryTemplate" is="dom-repeat" items="{{queries}}" as="query" |
243 | 243 | filter="_isQueryValid" observe="col op val">
|
244 | 244 | <!-- group -->
|
245 | 245 | <template is="dom-if" if="{{query.group}}">
|
|
258 | 258 | </template>
|
259 | 259 |
|
260 | 260 | <!-- sort -->
|
261 |
| - <template id="sort" is="dom-if" if="{{sortAttrs.by}}"> |
262 |
| - <urth-core-query-sort by="{{sortAttrs.by}}" |
263 |
| - direction="{{sortAttrs.direction}}"></urth-core-query-sort> |
| 261 | + <template id="sortTemplate" is="dom-if" if="{{sortAttrs.by}}"> |
| 262 | + <urth-core-query-sort by="{{sortAttrs.by}}" direction="{{sortAttrs.direction}}"></urth-core-query-sort> |
264 | 263 | </template>
|
265 | 264 |
|
266 | 265 | <!-- user declares dataframe here -->
|
|
499 | 498 | },
|
500 | 499 |
|
501 | 500 | ready: function() {
|
502 |
| - // move filters template to user-supplied urth-core-dataframe in light DOM |
503 |
| - var dataframe = Polymer.dom(this.$.myDataframe).getDistributedNodes()[0]; |
504 |
| - dataframe.appendChild(this.$.queries); |
505 |
| - dataframe.appendChild(this.$.sort); |
| 501 | + var dataframe = this.getContentChildNodes('#myDataframe')[0]; |
| 502 | + |
| 503 | + if (document.head.attachShadow) { |
| 504 | + // move query templates to user-supplied urth-core-dataframe in light DOM |
| 505 | + dataframe.appendChild(this.$.queryTemplate); |
| 506 | + dataframe.appendChild(this.$.sortTemplate); |
| 507 | + |
| 508 | + // tell dataframe to observe its new children whenever the templates change |
| 509 | + dataframe.ready(); |
| 510 | + } else { |
| 511 | + // relocated template only seems to work with native shadow DOM support |
| 512 | + // on every change, manually copy template contents into dataframe for shady DOM support |
| 513 | + |
| 514 | + var moveModifiedQueries = function(node, tagName) { |
| 515 | + var newQueries = Array.prototype.slice.call(node.parentNode.querySelectorAll(tagName)), |
| 516 | + oldQueries = Array.prototype.slice.call(node.querySelectorAll(tagName)); |
| 517 | + |
| 518 | + oldQueries.forEach(function(query) { Polymer.dom(dataframe).removeChild(query); }); |
| 519 | + newQueries.forEach(function(query) { Polymer.dom(dataframe).appendChild(query); }); |
| 520 | + if (newQueries.length) dataframe._handleQueryChildrenChanged(); |
| 521 | + }; |
| 522 | + |
| 523 | + this.$.queryTemplate.addEventListener('dom-change', function() { |
| 524 | + moveModifiedQueries(this, 'urth-core-query-filter'); |
| 525 | + moveModifiedQueries(this, 'urth-core-query-group'); |
| 526 | + }); |
| 527 | + |
| 528 | + this.$.sortTemplate.addEventListener('dom-change', function() { |
| 529 | + moveModifiedQueries(this, 'urth-core-query-sort'); |
| 530 | + }); |
| 531 | + } |
506 | 532 |
|
507 | 533 | // ignore the first one or two occurrances of an event since they
|
508 | 534 | // are related to instantiation and will corrupt the queries if a
|
|
0 commit comments