Skip to content

Commit

Permalink
Merge pull request #2717 from Polymer/bicknellr/activeElement
Browse files Browse the repository at this point in the history
Adds support for `activeElement` to `Polymer.dom`.
  • Loading branch information
Steve Orvell committed Jan 8, 2016
2 parents d7567b7 + 47ee2ca commit 44232bd
Show file tree
Hide file tree
Showing 8 changed files with 597 additions and 2 deletions.
2 changes: 1 addition & 1 deletion bower.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"url": "https://github.com/Polymer/polymer.git"
},
"dependencies": {
"webcomponentsjs": "^0.7.18"
"webcomponentsjs": "^0.7.20"
},
"devDependencies": {
"web-component-tester": "*"
Expand Down
12 changes: 12 additions & 0 deletions src/lib/dom-api-shadow.html
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,18 @@

Object.defineProperties(DomApi.prototype, {

activeElement: {
get: function() {
var node = DomApi.wrap(this.node);
var activeElement = node.activeElement;
// Prevents `activeElement` from returning elements outside of the
// ShadowRoot, even if they would become descendants of the ShadowRoot
// in the composed tree. See w3c/webcomponents#358.
return node.contains(activeElement) ? activeElement : null;
},
configurable: true
},

childNodes: {
get: function() {
return TreeApi.arrayCopyChildNodes(this.node);
Expand Down
43 changes: 42 additions & 1 deletion src/lib/dom-api-shady.html
Original file line number Diff line number Diff line change
Expand Up @@ -422,6 +422,47 @@

Object.defineProperties(DomApi.prototype, {

activeElement: {
get: function() {
var active = document.activeElement;
if (!active) {
return null;
}
var isShadyRoot = !!this.node._isShadyRoot;
if (this.node !== document) {
// If this node isn't a document or shady root, then it doesn't have
// an active element.
if (!isShadyRoot) {
return null;
}
// If this shady root's host is the active element or the active
// element is not a descendant of the host (in the composed tree),
// then it doesn't have an active element.
if (this.node.host === active ||
!this.node.host.contains(active)) {
return null;
}
}
// This node is either the document or a shady root of which the active
// element is a (composed) descendant of its host; iterate upwards to
// find the active element's most shallow host within it.
var activeRoot = dom(active).getOwnerRoot();
while (activeRoot && activeRoot !== this.node) {
active = activeRoot.host;
activeRoot = dom(active).getOwnerRoot();
}
if (this.node === document) {
// This node is the document, so activeRoot should be null.
return activeRoot ? null : active;
} else {
// This node is a non-document shady root, and it should be
// activeRoot.
return activeRoot === this.node ? active : null;
}
},
configurable: true
},

childNodes: {
get: function() {
var c$ = TreeApi.Logical.getChildNodes(this.node);
Expand Down Expand Up @@ -569,4 +610,4 @@
};

})();
</script>
</script>
242 changes: 242 additions & 0 deletions test/unit/polymer-dom-elements.html
Original file line number Diff line number Diff line change
Expand Up @@ -357,3 +357,245 @@
});
</script>
</dom-module>


<dom-module id="x-shadow-host-root-0-0">
<template>
<content></content>
</template>
<script>
Polymer({
is: 'x-shadow-host-root-0-0',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-0-0-light-0">
<script>
Polymer({
is: 'x-shadow-host-root-0-0-light-0',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-0-0-light">
<template>
<div>
<div>
<x-shadow-host-root-0-0-light-0></x-shadow-host-root-0-0-light-0>
</div>
</div>
</template>
<script>
Polymer({
is: 'x-shadow-host-root-0-0-light',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-0-1">
<template>
<content></content>
</template>
<script>
Polymer({
is: 'x-shadow-host-root-0-1',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-0-1-light">
<script>
Polymer({
is: 'x-shadow-host-root-0-1-light',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-0">
<template>
<content></content>
<div>
<x-shadow-host-root-0-0>
<x-shadow-host-root-0-0-light></x-shadow-host-root-0-0-light>
</x-shadow-host-root-0-0>
</div>
<x-shadow-host-root-0-1>
<x-shadow-host-root-0-1-light></x-shadow-host-root-0-1-light>
</x-shadow-host-root-0-1>
</template>
<script>
Polymer({
is: 'x-shadow-host-root-0',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-0-light">
<script>
Polymer({
is: 'x-shadow-host-root-0-light',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-1-0">
<template>
<content></content>
</template>
<script>
Polymer({
is: 'x-shadow-host-root-1-0',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-1-0-light">
<script>
Polymer({
is: 'x-shadow-host-root-1-0-light',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-1-1">
<template>
<content></content>
</template>
<script>
Polymer({
is: 'x-shadow-host-root-1-1',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-1-1-light">
<script>
Polymer({
is: 'x-shadow-host-root-1-1-light',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-1">
<template>
<content></content>
<div>
<x-shadow-host-root-1-0>
<x-shadow-host-root-1-0-light></x-shadow-host-root-1-0-light>
</x-shadow-host-root-1-0>
</div>
<div>
<div>
<div>
<x-shadow-host-root-1-1>
<x-shadow-host-root-1-1-light></x-shadow-host-root-1-1-light>
</x-shadow-host-root-1-1>
</div>
</div>
</div>
</template>
<script>
Polymer({
is: 'x-shadow-host-root-1',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-1-light-0">
<script>
Polymer({
is: 'x-shadow-host-root-1-light-0',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-1-light">
<template>
<x-shadow-host-root-1-light-0></x-shadow-host-root-1-light-0>
</template>
<script>
Polymer({
is: 'x-shadow-host-root-1-light',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root">
<template>
<content></content>
<div>
<div>
<x-shadow-host-root-0>
<x-shadow-host-root-0-light></x-shadow-host-root-0-light>
</x-shadow-host-root-0>
</div>
</div>
<div>
<x-shadow-host-root-1>
<x-shadow-host-root-1-light></x-shadow-host-root-1-light>
</x-shadow-host-root-1>
</div>
</template>
<script>
Polymer({
is: 'x-shadow-host-root',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>

<dom-module id="x-shadow-host-root-light">
<script>
Polymer({
is: 'x-shadow-host-root-light',
hostAttributes: {
tabindex: '-1'
}
});
</script>
</dom-module>
4 changes: 4 additions & 0 deletions test/unit/polymer-dom-native-shadow.html
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@

<x-wrapped></x-wrapped>

<x-shadow-host-root>
<x-shadow-host-root-light></x-shadow-host-root-light>
</x-shadow-host-root>

<script src="polymer-dom.js"></script>

</body>
Expand Down
4 changes: 4 additions & 0 deletions test/unit/polymer-dom-shadow.html
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@

<x-wrapped></x-wrapped>

<x-shadow-host-root>
<x-shadow-host-root-light></x-shadow-host-root-light>
</x-shadow-host-root>

<script src="polymer-dom.js"></script>

</body>
Expand Down
4 changes: 4 additions & 0 deletions test/unit/polymer-dom.html
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@

<x-wrapped></x-wrapped>

<x-shadow-host-root>
<x-shadow-host-root-light></x-shadow-host-root-light>
</x-shadow-host-root>

<script src="polymer-dom.js"></script>

</body>
Expand Down
Loading

0 comments on commit 44232bd

Please sign in to comment.