Add scrolling support vertically and horizontally #449
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,6 +5,7 @@ var crossvent = require('crossvent'); | |
| var classes = require('./classes'); | ||
| var doc = document; | ||
| var documentElement = doc.documentElement; | ||
| var _autoScrollingInterval; // reference to auto scrolling | ||
|
|
||
| function dragula (initialContainers, options) { | ||
| var len = arguments.length; | ||
|
|
@@ -218,6 +219,7 @@ function dragula (initialContainers, options) { | |
|
|
||
| function end () { | ||
| if (!drake.dragging) { | ||
| clearInterval(_autoScrollingInterval); | ||
| return; | ||
| } | ||
| var item = _copy || _item; | ||
|
|
@@ -303,6 +305,7 @@ function dragula (initialContainers, options) { | |
|
|
||
| function cleanup () { | ||
| var item = _copy || _item; | ||
| clearInterval(_autoScrollingInterval); | ||
| ungrab(); | ||
| removeMirrorImage(); | ||
| if (item) { | ||
|
|
@@ -355,9 +358,12 @@ function dragula (initialContainers, options) { | |
| } | ||
|
|
||
| function drag (e) { | ||
| if (!_mirror) { return; } | ||
| // For iframe. When dragging an item and mouse moves out of the iframe and | ||
| // mouseup, then decides to move back, the event will be 0 so we should | ||
| // just call cancel. | ||
| if (whichMouseButton(e) === 0) { cancel(); } | ||
|
|
||
| e.preventDefault(); | ||
|
|
||
| var clientX = getCoord('clientX', e); | ||
|
|
@@ -409,6 +415,8 @@ function dragula (initialContainers, options) { | |
| function moved (type) { drake.emit(type, item, _lastDropTarget, _source); } | ||
| function over () { if (changed) { moved('over'); } } | ||
| function out () { if (_lastDropTarget) { moved('out'); } } | ||
|
|
||
| startScroll(_item, e); | ||
| } | ||
|
|
||
| function spillOver (el) { | ||
|
|
@@ -605,4 +613,66 @@ function getCoord (coord, e) { | |
| return host[coord]; | ||
| } | ||
|
|
||
| function getScrollContainer(node) { | ||
| if (node === null) { return null; } | ||
| if (node.scrollHeight > node.clientHeight) { | ||
| return node; | ||
| } else { | ||
| if (!/(body|html)/i.test(node.parentNode.tagName)) { | ||
|
There was a problem hiding this comment. I don't understand why I need a variable for this. Why would you want to hold on to the reference if it's not going to be used unless we're scrolling? There was a problem hiding this comment. I created a commit for it, e9e4e5a; but I'm not sure if I'm happy with this path. I'm open to suggestions. There was a problem hiding this comment. @nguyenj I just meant putting it in a variable like this: var rbodyhtml = /(body|html)/i
if (!rbodyhtml.test(node.parentNode.tagName)) {
// ...I avoid inline regular expressions in conditionals because they dampen readability. There's no need to hoist it to the top of the file, certainly. |
||
| return getScrollContainer(node.parentNode); | ||
| } else { | ||
|
There was a problem hiding this comment.
|
||
| return null; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| function startAutoScrolling(node, amount, direction) { | ||
| _autoScrollingInterval = setInterval(function() { | ||
| node[direction] += (amount * 0.25); | ||
| }, 15); | ||
| } | ||
|
|
||
| function startScroll(item, event) { | ||
| var scrollEdge = 20; | ||
| var scrollSpeed = 20; | ||
| var scrollContainer = getScrollContainer(item); | ||
|
|
||
| clearInterval(_autoScrollingInterval); | ||
|
|
||
| // If a container contains the list that is scrollable | ||
| if (scrollContainer) { | ||
|
|
||
| // Scrolling vertically | ||
| if (event.pageY - getOffset(scrollContainer).top < scrollEdge) { | ||
| startAutoScrolling(scrollContainer, -scrollSpeed, 'scrollTop'); | ||
| } else if ((getOffset(scrollContainer).top + scrollContainer.getBoundingClientRect().height) - event.pageY < scrollEdge) { | ||
| startAutoScrolling(scrollContainer, scrollSpeed, 'scrollTop'); | ||
| } | ||
|
|
||
| // Scrolling horizontally | ||
| if (event.pageX - scrollContainer.getBoundingClientRect().left < scrollEdge) { | ||
| startAutoScrolling(scrollContainer, -scrollSpeed, 'scrollLeft'); | ||
| } else if ((getOffset(scrollContainer).left + scrollContainer.getBoundingClientRect().width) - event.pageX < scrollEdge) { | ||
| startAutoScrolling(scrollContainer, scrollSpeed, 'scrollLeft'); | ||
| } | ||
|
|
||
| // If the window contains the list | ||
| } else { | ||
|
|
||
| // Scrolling vertically | ||
| if ((event.pageY - window.scrollY) < scrollEdge) { | ||
| startAutoScrolling(document.body, -scrollSpeed, 'scrollTop'); | ||
| } else if ((window.innerHeight - (event.pageY - window.scrollY)) < scrollEdge) { | ||
| startAutoScrolling(document.body, scrollSpeed, 'scrollTop'); | ||
| } | ||
|
|
||
| // Scrolling horizontally | ||
| if ((event.pageX - window.scrollX) < scrollEdge) { | ||
| startAutoScrolling(document.body, -scrollSpeed, 'scrollLeft'); | ||
| } else if ((window.innerWidth - (event.pageX - window.scrollX)) < scrollEdge) { | ||
| startAutoScrolling(document.body, scrollSpeed, 'scrollLeft'); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| module.exports = dragula; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
elsehere is redundant, please remove