Skip to content

Commit f897c46

Browse files
committed
query filter and sort working on safari, firefox jupyter-incubator#92
(c) Copyright IBM Corp. 2016
1 parent 96ea689 commit f897c46

File tree

2 files changed

+41
-11
lines changed

2 files changed

+41
-11
lines changed

urth-viz-explorer.html

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -708,11 +708,15 @@
708708
this.options = this._optionsMap[this.type];
709709

710710
if (this.ref) {
711-
// template not ready until dom-if is stamped, so use microtask
712-
this.async(function() {
711+
// template not ready until dom-if is stamped
712+
var listener;
713+
this.addEventListener('dom-change', listener = function() {
714+
this.removeEventListener('dom-change', listener);
713715
// Move template-generated dataframe from shadow DOM to content DOM
714716
// and trigger state restore
715-
Polymer.dom(this).appendChild(this.$$('urth-viz-query')).restoreState();
717+
var query = this.$$('urth-viz-query');
718+
Polymer.dom(this).appendChild(query);
719+
query.restoreState();
716720

717721
// Call ready() directly to bind to new DOM document
718722
var dataframe = this.querySelector('urth-core-dataframe');

urth-viz-query.html

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@
239239

240240

241241
<!-- 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"
243243
filter="_isQueryValid" observe="col op val">
244244
<!-- group -->
245245
<template is="dom-if" if="{{query.group}}">
@@ -258,9 +258,8 @@
258258
</template>
259259

260260
<!-- 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>
264263
</template>
265264

266265
<!-- user declares dataframe here -->
@@ -499,10 +498,37 @@
499498
},
500499

501500
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+
}
506532

507533
// ignore the first one or two occurrances of an event since they
508534
// are related to instantiation and will corrupt the queries if a

0 commit comments

Comments
 (0)