Skip to content
This repository has been archived by the owner on Dec 19, 2024. It is now read-only.

Commit

Permalink
Merge pull request #49 from PolymerElements/fix-scroll-lock-detection
Browse files Browse the repository at this point in the history 
Fixes scroll lock detection in ShadowDOM
  • Loading branch information
@cdata
cdata committed Feb 6, 2016
2 parents 0a93942 + e6cf173 commit 39af26e
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 22 deletions.
18 changes: 9 additions & 9 deletions iron-dropdown-scroll-manager.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@
_scrollInteractionHandler: function(event) {
if (Polymer
.IronDropdownScrollManager
.elementIsScrollLocked(event.target)) {
.elementIsScrollLocked(Polymer.dom(event).rootTarget)) {
if (event.type === 'keydown' &&
!Polymer.IronDropdownScrollManager._isScrollingKeypress(event)) {
return;
Expand All @@ -204,13 +204,13 @@
document.body.style.overflowY = 'hidden';

// Modern `wheel` event for mouse wheel scrolling:
window.addEventListener('wheel', this._scrollInteractionHandler, true);
document.addEventListener('wheel', this._scrollInteractionHandler, true);
// Older, non-standard `mousewheel` event for some FF:
window.addEventListener('mousewheel', this._scrollInteractionHandler, true);
document.addEventListener('mousewheel', this._scrollInteractionHandler, true);
// IE:
window.addEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
document.addEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
// Mobile devices can scroll on touch move:
window.addEventListener('touchmove', this._scrollInteractionHandler, true);
document.addEventListener('touchmove', this._scrollInteractionHandler, true);
// Capture keydown to prevent scrolling keys (pageup, pagedown etc.)
document.addEventListener('keydown', this._scrollInteractionHandler, true);
},
Expand All @@ -220,10 +220,10 @@
document.body.style.overflowX = this._originalBodyStyles.overflowX;
document.body.style.overflowY = this._originalBodyStyles.overflowY;

window.removeEventListener('wheel', this._scrollInteractionHandler, true);
window.removeEventListener('mousewheel', this._scrollInteractionHandler, true);
window.removeEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
window.removeEventListener('touchmove', this._scrollInteractionHandler, true);
document.removeEventListener('wheel', this._scrollInteractionHandler, true);
document.removeEventListener('mousewheel', this._scrollInteractionHandler, true);
document.removeEventListener('DOMMouseScroll', this._scrollInteractionHandler, true);
document.removeEventListener('touchmove', this._scrollInteractionHandler, true);
document.removeEventListener('keydown', this._scrollInteractionHandler, true);
}
};
Expand Down
72 changes: 59 additions & 13 deletions test/iron-dropdown-scroll-manager.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,13 @@

<link rel="import" href="../iron-dropdown-scroll-manager.html">
<link rel="import" href="../../test-fixture/test-fixture.html">
<link rel="import" href="x-scrollable-element.html">
</head>
<body>

<test-fixture id="DOMSubtree">
<template>
<div id="Parent">
<div id="ChildOne">
<div id="GrandchildOne"></div>
</div>
<div id="ChildTwo">
<div id="GrandchildTwo"></div>
</div>
</div>
<x-scrollable-element id="Parent"></x-scrollable-element>
</template>
</test-fixture>
<script>
Expand All @@ -47,14 +41,14 @@

setup(function() {
parent = fixture('DOMSubtree');
childOne = parent.querySelector('#ChildOne');
childTwo = parent.querySelector('#ChildTwo');
grandChildOne = parent.querySelector('#GrandchildOne');
grandChildTwo = parent.querySelector('#GrandchildTwo');
childOne = parent.$$('#ChildOne');
childTwo = parent.$$('#ChildTwo');
grandChildOne = parent.$$('#GrandchildOne');
grandChildTwo = parent.$$('#GrandchildTwo');
ancestor = document.body;
});

suite('contraining scroll in the DOM', function() {
suite('constraining scroll in the DOM', function() {
setup(function() {
Polymer.IronDropdownScrollManager.pushScrollLock(childOne);
});
Expand Down Expand Up @@ -99,6 +93,58 @@
expect(Polymer.IronDropdownScrollManager.elementIsScrollLocked(parent))
.to.be.equal(false);
});

test('does not check locked elements when there are no locking elements', function() {
sinon.spy(Polymer.IronDropdownScrollManager, 'elementIsScrollLocked');
childOne.dispatchEvent(new CustomEvent('wheel', {
bubbles: true,
cancelable: true
}));
expect(Polymer.IronDropdownScrollManager
.elementIsScrollLocked.callCount).to.be.eql(1);
Polymer.IronDropdownScrollManager.removeScrollLock(childOne);
childOne.dispatchEvent(new CustomEvent('wheel', {
bubbles: true,
cancelable: true
}));
expect(Polymer.IronDropdownScrollManager
.elementIsScrollLocked.callCount).to.be.eql(1);
});

suite('various scroll events', function() {
var scrollEvents;
var events;

setup(function() {
scrollEvents = [
'wheel',
'mousewheel',
'DOMMouseScroll',
'touchmove'
];

events = scrollEvents.map(function(scrollEvent) {
return new CustomEvent(scrollEvent, {
bubbles: true,
cancelable: true
});
});
});

test('prevents wheel events from locked elements', function() {
events.forEach(function(event) {
childTwo.dispatchEvent(event);
expect(event.defaultPrevented).to.be.eql(true);
});
});

test('allows wheel events from unlocked elements', function() {
events.forEach(function(event) {
childOne.dispatchEvent(event);
expect(event.defaultPrevented).to.be.eql(false);
});
});
});
});
});
</script>
Expand Down
27 changes: 27 additions & 0 deletions test/x-scrollable-element.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<link rel="import" href="../../polymer/polymer.html">

<dom-module id="x-scrollable-element">
<template>
<div id="ChildOne">
<div id="GrandchildOne"></div>
</div>
<div id="ChildTwo">
<div id="GrandchildTwo"></div>
</div>
</template>
<script>
Polymer({
is: 'x-scrollable-element'
});
</script>
</dom-module>

0 comments on commit 39af26e

Please sign in to comment.