IDEMPIERE-4793 Implement drag beyond page (scroll) in trees (Trek 1007493) (#693)

org.adempiere.ui.zk/WEB-INF/src/metainfo/zk/lang-addon.xml

@@ -48,7 +48,7 @@ Copyright (C) 2007 Ashley G Ramdass (ADempiere WebUI).
 	<javascript-module name="jawwa.atmosphere" version="202102091500"/>
 	<javascript-module name="adempiere.local.storage" version="202011151100"/>
 	<javascript-moudle name="html2canvas" version="1.0.0.rc7"/>
-	<javascript-module name="org.idempiere.commons" version="202105200826"/>
+	<javascript-module name="org.idempiere.commons" version="202105201416"/>
 	<javascript-module name="jquery.maskedinput" version="1.4.1" />
 	<javascript-module name="photobooth"	version="0.7-rsd3" />
 	<javascript-module name="chosenbox" version="202012041500"/>

org.adempiere.ui.zk/WEB-INF/src/web/js/org/idempiere/commons/tree.js

@@ -0,0 +1,131 @@
+zk.afterLoad("zul.sel", function () {
+    var _tWgt = {},
+        _tiWgt = {};
+    zk.override(zul.sel.Treerow.prototype, _tiWgt, {
+        getDragOptions_: function (map) {
+            var copy = map.constructor(),
+                wgt = this;
+            // clone map
+            for (var attr in map) {
+                if (map.hasOwnProperty(attr)) copy[attr] = map[attr];
+            }
+            // change functions as needed
+            var oldChange = copy.change,
+                oldEnd = copy.endeffect;
+            copy.change =  function (drag, pt, evt) {
+                var tree = wgt.getTree();
+                oldChange(drag, pt, evt);
+                tree.triggerAutoScroll(evt.pageX, evt.pageY);
+            };
+            copy.endeffect = function (drag, evt) {
+                var tree = wgt.getTree();
+                oldEnd(drag, evt);
+                tree.stopAutoScroll();
+            }
+            return copy;
+        }
+    });
+    
+    zk.override(zul.sel.Tree.prototype, _tWgt, {
+        scrollValue: 10,
+        scrollDelay: 0,
+        initialScrollDelay: 200,        
+        currentY: 0,
+        previousY: 0,
+        delayCount: 0,
+        speedGap: 50,
+        speedGapCounter: 0,
+        triggerAutoScroll: function (x, y) {
+            var $n = jq(this.$n()),
+                offset = $n.offset(),
+                top = offset.top + (this.$n('head')? 10 : 0),
+                bottom = $n.outerHeight(true);
+            if (y < top)
+                this.startScrollToTop(y);
+            else if (y > bottom)
+                this.startScrollToBottom(y);
+            else
+                this.stopAutoScroll();
+        },
+        stopAutoScroll: function () {
+            this.clearScrollToTopTimer();
+            this.clearScrollToBottomTimer();
+        },
+        startScrollToTop: function (y) {
+            var wgt = this;
+            this.clearScrollToBottomTimer();
+            if (!this._scrollToTopTimer) {
+            	this.scrollDelay = this.initialScrollDelay;
+            	this.previousY = this.currentY = y;
+            	this.delayCount = this.speedGapCounter = 0;
+                this._scrollToTopTimer = setInterval(function () {
+                	wgt.delayCount = wgt.delayCount + 5;
+                	if (wgt.delayCount >= wgt.scrollDelay) {
+                		wgt.delayCount = 0;
+                		wgt.speedGapCounter++;
+                    	wgt.$n('body').scrollTop -= wgt.scrollValue;
+                    	if (wgt.speedGapCounter == 5) {
+                    		wgt.speedGapCounter = 0;
+                    		if (wgt.scrollDelay > wgt.speedGap) {
+	                    		wgt.scrollDelay = wgt.scrollDelay - wgt.speedGap;
+	                    	} else if (wgt.scrollDelay == wgt.speedGap) {
+	                    		wgt.scrollDelay = 10;
+	                    	}
+                    	} 
+                    }
+                }, 5);
+            } else {
+            	this.previousY = this.currentY;
+            	this.currentY = y;
+            	if (this.previousY != this.currentY) {
+            		this.scrollDelay = this.initialScrollDelay;
+            		this.speedGapCounter = 0;
+            	}
+            }
+        },
+        startScrollToBottom: function (y) {
+            var wgt = this;
+            this.clearScrollToTopTimer();
+            if (!this._scrollToBottomTimer) {
+            	this.scrollDelay = this.initialScrollDelay;
+            	this.previousY = this.currentY = y;
+            	this.delayCount = this.speedGapCounter = 0;
+                this._scrollToBottomTimer = setInterval(function () {
+                    wgt.delayCount = wgt.delayCount + 5;
+                	if (wgt.delayCount >= wgt.scrollDelay) {
+                		wgt.delayCount = 0;
+                		wgt.speedGapCounter++;
+                    	wgt.$n('body').scrollTop += wgt.scrollValue;
+                    	if (wgt.speedGapCounter == 5) {
+                    		wgt.speedGapCounter = 0;
+                    		if (wgt.scrollDelay > wgt.speedGap) {
+	                    		wgt.scrollDelay = wgt.scrollDelay - wgt.speedGap;
+	                    	} else if (wgt.scrollDelay == wgt.speedGap) {
+	                    		wgt.scrollDelay = 10;
+	                    	}
+                    	} 
+                    }
+                }, 5);
+            } else {
+            	this.previousY = this.currentY;
+            	this.currentY = y;
+            	if (this.previousY != this.currentY) {
+            		this.scrollDelay = this.initialScrollDelay;
+            		this.speedGapCounter = 0;
+            	}
+            }
+        },
+        clearScrollToTopTimer: function () {
+            var timer = this._scrollToTopTimer;
+            if (timer)
+                clearInterval(timer);
+            this._scrollToTopTimer = null;
+        },
+        clearScrollToBottomTimer: function () {
+            var timer = this._scrollToBottomTimer;
+            if (timer)
+                clearInterval(timer);
+            this._scrollToBottomTimer = null;
+        }
+    });
+});

org.adempiere.ui.zk/WEB-INF/src/web/js/org/idempiere/commons/zk.wpd

@@ -4,4 +4,5 @@
 	<script src="layout.js" />
 	<script src="report.js" />
 	<script src="window.js" />
+	<script src="tree.js" />
 </package>