ItEr22S12CUVistaRecursosTempoPorProxectoItEr21S07:Synchronizing the scroll of resources load list with the timetracker and the left pane

ganttzk/src/main/resources/web/ganttz/resourceload/resourceloadleftpane.dsp

@@ -3,7 +3,8 @@
 
 <c:set var="self" value="${requestScope.arg.self}"/>
 
-<div id="${self.uuid}" ${self.outerAttrs} class="resourceloadleftpane">
+<div id="${self.uuid}" ${self.outerAttrs} class="resourceloadleftpane"
+    z.type="ganttz.resourceload.resourcesloadleftpane.ResourcesLoadLeftPane" >
     <c:forEach var="child" items="${self.children}">
         ${z:redraw(child, null)}
     </c:forEach>

ganttzk/src/main/resources/web/js/ganttz/planner.js

@@ -1,3 +1,40 @@
+function ScrollSync(element){
+    var xChanges = [];
+    var yChanges = [];
+    var notifyScrollX = function(){
+        for ( var i = 0; i < xChanges.length; i++) {
+            xChanges[i]();
+        }
+    };
+    var notifyScrollY = function(){
+        for ( var i = 0; i < yChanges.length; i++) {
+            yChanges[i]();
+        }
+    };
+    var notifyListeners = function(){
+        notifyScrollX();
+        notifyScrollY();
+    };
+    var toFunction = function(value){
+        var result = value;
+        if(typeof(value) !== 'function'){
+            result = function(){return synched};
+        }
+        return result;
+    };
+
+    this.synchXChangeTo = function(synched){
+        var target = toFunction(synched);
+        xChanges.push(function(){ target().scrollLeft = element.scrollLeft; });
+    };
+    this.synchYChangeTo = function(synched){
+        var target = toFunction(synched);
+        yChanges.push(function(){ target().scrollTop = element.scrollTop; });
+    };
+    YAHOO.util.Event.addListener(element,'scroll', notifyListeners);
+    return this;
+}
+
 /**
  * Javascript behaviuor for Planner elements
  * @author Lorenzo Tilve Álvaro <ltilve@igalia.com>

ganttzk/src/main/resources/web/js/ganttz/resourceload/resourcesloadleftpane.js

@@ -0,0 +1,13 @@
+zkResourcesLoadLeftPane = {};
+
+addResourcesLoadLeftPaneMethods({});
+
+function addResourcesLoadLeftPaneMethods(object) {
+    var scrollSync;
+
+    object.init = function(cmp) {
+        scrollSync = new ScrollSync(cmp);
+        scrollSync.synchYChangeTo(cmp);
+    };
+    return object;
+}

ganttzk/src/main/resources/web/js/ganttz/resourceload/resourcesloadlist.js

@@ -1,8 +1,10 @@
 var TIMETRACKER_OFFSET_TOP = 120;
 
-zkResourcesLoadList = initializeClass( {});
+zkResourcesLoadList = addResourcesLoadListMethods({});
+
+function addResourcesLoadListMethods(object) {
+    var scrollSync;
 
-function initializeClass(classObject) {
     function watermark() {
         return document.getElementById('watermark');
     }
@@ -11,15 +13,17 @@ function initializeClass(classObject) {
         return document.getElementById('timetracker');
     }
 
-    classObject.init = function(cmp) {
+    object.init = function(cmp) {
         this.adjustTimeTrackerSize(cmp);
         YAHOO.util.Event.addListener(window, 'resize',
                 zkResourcesLoadList.adjustTimeTrackerSize, cmp);
+        scrollSync = new ScrollSync(cmp);
+        scrollSync.synchXChangeTo(timetracker);
     }
 
-    classObject.adjustTimeTrackerSize = function(cmp) {
+    object.adjustTimeTrackerSize = function(cmp) {
         watermark().style["height"] = cmp.clientHeight + "px";
         timetracker().style["width"] = cmp.clientWidth + "px";
     }
-    return classObject;
+    return object;
 }