ItEr14S13RFComportamentoGraficoPlanificador: Adjust scroll positions and sizes based on screen size recalculated with javascript

* Two separate vertical and horizontal scrollbars have been defined to be positioned permanently on the navigator right and bottom window borders. * Taskdetails and timetracker legend are now permanently shown while scrolling. * Pending fixes on watermark height recalculation. * Delete/add task behaviour to be reviewed unless changed for a tree.
2009-06-30 20:31:08 +02:00 · 2009-06-30 20:31:08 +02:00 · d97bc603d7
commit d97bc603d7
parent 6e3dbd2886
15 changed files with 257 additions and 75 deletions
--- a/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/ListDetails.java
+++ b/navalplanner-gantt-zk/src/main/java/org/zkoss/ganttz/ListDetails.java
@ -7,6 +7,7 @@ import java.util.List;
 import org.apache.commons.logging.Log;
 import org.apache.commons.logging.LogFactory;
 import org.zkoss.ganttz.util.TaskBean;
+import org.zkoss.zk.ui.Component;
 import org.zkoss.zk.ui.HtmlMacroComponent;

 public class ListDetails extends HtmlMacroComponent {
@ -26,7 +27,7 @@ public class ListDetails extends HtmlMacroComponent {
    }

    private List<TaskDetail> getTaskDetails() {
-        List<Object> children = getChildren();
+        List<Object> children = getInsertionPoint().getChildren();
        return Planner.findComponentsOfType(TaskDetail.class, children);
    }

@ -42,7 +43,7 @@ public class ListDetails extends HtmlMacroComponent {
    }

    private void removeDetail(TaskDetail taskDetail) {
-        getChildren().remove(taskDetail);
+        getInsertionPoint().getChildren().remove(taskDetail);
    }

    public void addTask() {
@ -73,9 +74,13 @@ public class ListDetails extends HtmlMacroComponent {

    private TaskDetail addTask(TaskBean taskBean) {
        TaskDetail taskDetail = TaskDetail.create(taskBean);
-        appendChild(taskDetail);
+        getInsertionPoint().appendChild(taskDetail);
        taskDetail.afterCompose();
        return taskDetail;
    }

-}
+    private Component getInsertionPoint() {
+        return getFellow("insertionPoint");
+    }
+
+}
--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/dependencylist.dsp
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/dependencylist.dsp
@ -11,4 +11,6 @@
    </c:forEach>
 </div>

+</div>
+
 </div>
--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/ganttpanel.dsp
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/ganttpanel.dsp
@ -9,4 +9,11 @@
            ${z:redraw(child, null)}
        </c:forEach>
    </div>
-</div>
+</div>
+
+<br/>
+
+<div id="ganttpanel_scroller_x">
+    <div id="ganttpanel_inner_scroller_x"></div>
+</div>
+<div id="ganttpanel_scroller_y"><div id="ganttpanel_inner_scroller_y" /></div>
--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/planner.dsp
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/planner.dsp
@ -9,7 +9,7 @@
 /*]]> */
 </script>

-<div id="${self.uuid}" z.type="ganttz.planner.Planner" ${self.outerAttrs}">
+<div id="${self.uuid}" z.type="ganttz.planner.Planner" ${self.outerAttrs}>
    <c:forEach var="child" items="${self.children}">
        ${z:redraw(child, null)}
    </c:forEach>
--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/tasklist.dsp
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/tasklist.dsp
@ -28,7 +28,7 @@ document.body.class = "yui-skin-sam";
 var myLogReader = new YAHOO.widget.LogReader(myContainer);*/
 </script>

-
+<div id="scroll_container">

 <c:set var="self" value="${requestScope.arg.self}"/>

--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/listdetails.zul
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/listdetails.zul
@ -1,6 +1,9 @@
 <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
-<zk>
-        <button label="${c:l('listdetails.add_task')}"
-                        onClick="self.getParent().addTask();" />
-
-</zk>
+<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
+            <button label="${c:l('listdetails.add_task')}"
+                        onClick="insertionPoint.getParent().getParent().addTask();" />
+    <n:div id="listdetails_container">
+        <vbox class="listdetails" id="insertionPoint">
+        </vbox>
+    </n:div>
+</zk>
--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/taskdetail.zul
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/taskdetail.zul
@ -19,4 +19,4 @@
   top.endDateTextBox = endDateTextBox;
 ]]>
 </zscript>
-</zk>
+</zk>
--- a/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/timetracker.zul
+++ b/navalplanner-gantt-zk/src/main/resources/web/ganttz/zul/timetracker.zul
@ -1,5 +1,6 @@
 <?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
-<zk>
+<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
+
 <zscript><![CDATA[
     top = self;
 ]]>
@ -14,6 +15,8 @@

 </style>

+<n:div id="timetracker">
+
 <vbox>
    <hbox>
        <button image="/zkau/web/ganttz/img/zoom_in.gif" forward="onIncrease"/>
@ -35,7 +38,7 @@
        </columns>

        <rows>
-            <row id="fake_row" style="height: 100px;">
+            <row id="fake_row" style="height: 100px;" class="fake_column timetracker_column${(each.even?'_myeven':'')}">
                 <div class="fake_column timetracker_column${(each.even?'_even':'')}" style="height: 100px;" forEach="${top.detailsSecondLevel}" />
            </row>
        </rows>
@ -49,4 +52,7 @@
 </zscript>

 </vbox>
+
+</n:div>
+
 </zk>
--- a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/task.js
+++ b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/task.js
@ -11,6 +11,8 @@ zkTask.HEIGHT = 10;
 zkTask.HALF_HEIGHT = 5;
 zkTask.DEPENDENCY_PADDING = 4;
 zkTask.HALF_DEPENDENCY_PADDING = 2;
+// Task borders are default 1px
+

 zkTask.getDD = function(cmp) {
    if (typeof (cmp.created_dd) == 'undefined') {
@ -70,7 +72,7 @@ zkTask.init = function(cmp) {
        var resize2 = new YAHOO.util.Resize(cmp2, {
            handles : [ 'r' ],
            proxy : true,
-            maxWidth: cmp.clientWidth - 2
+            maxWidth: cmp.clientWidth - 2  // Considering 1px borders
        });

        resize2.on('resize', function(ev) {
@ -89,7 +91,7 @@ zkTask.init = function(cmp) {
            resize2 = new YAHOO.util.Resize(cmp2, {
                handles : [ 'r' ],
                proxy : true,
-                maxWidth: cmp.clientWidth - 2
+                maxWidth: cmp.clientWidth - 2 // Considering 1px borders
            });
            if ( (cmp.clientWidth) < (cmp2.clientWidth) ) {
                cmp2.style.width = cmp.clientWidth - 2  + 'px';
@ -181,7 +183,7 @@ zkTask.createArrow = function(cmp) {
    mouseClickListener = function(e) {
        var parentNode = arrow.parentNode;
        var task;
-        if (task = zkTask.isOverTask(cmp, arrow)) {
+        if ((task = zkTask.isOverTask(cmp, arrow))) {
            zkau.send( {
                uuid : cmp.id,
                cmd : "addDependency",
@ -198,27 +200,23 @@ zkTask.createArrow = function(cmp) {
    YAHOO.util.Event.on(document.body, 'click', mouseClickListener);
 };

+/* This method is binded to the mouse click listener to
+ * determine if it is positioned over any task */
 zkTask.isOverTask = function(cmp, arrow) {

    var listtasksNode = document.getElementById("listtasks");
-    var ganttPanelNode = document.getElementById("ganttpanel");
+//    var ganttPanelNode = document.getElementById("ganttpanel");
+    var ganttPanelNode = document.getElementById("scroll_container");

-    arrayTasks = zkTask.getElementsByAttribute(listtasksNode, "div", "z.type",
-        "ganttz.task.Task");
+    arrayTasks = zkTask.getElementsByAttribute(
+        listtasksNode, "div", "z.type","ganttz.task.Task");

-    /* Cursor relative positions to #listtasks (439,160) and ganttPanel scroll */
-    var xpos = zkTask.xMouse - listtasksNode.offsetLeft
-    + ganttPanelNode.scrollLeft;
-    var ypos = zkTask.yMouse - listtasksNode.offsetTop;
-    /*
-     * This way of getting cursor coordinates, is unable to calculate scrollbar
-     * offset.
-     */
+    var xpos = zkTask.xMouse - ganttPanelNode.offsetLeft + ganttPanelNode.scrollLeft;
+    var ypos = zkTask.yMouse - ganttPanelNode.offsetTop + ganttPanelNode.scrollTop
+        - listtasksNode.offsetTop;

    for ( var i = 0; i < arrayTasks.length; i++) {
-
        var task = arrayTasks[i];
-        
        if (((xpos) > (task.offsetLeft))
            && ((xpos) < (task.offsetLeft + task.offsetWidth))
            && (ypos > (task.offsetTop))
--- a/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/tasklist.js
+++ b/navalplanner-gantt-zk/src/main/resources/web/js/ganttz/tasklist.js
@ -1,6 +1,14 @@
 HEIGHT_PER_ROW = 15;
 HEIGHT_TIME_TRACKER = 120;

+MIN_RESOLUTION_X = 600;
+MIN_RESOLUTION_Y = 600;
+
+TASKDETAILS_WIDTH = 300
+TIMETRACKER_OFFSET_TOP = 200
+SCROLLBAR_WIDTH = 15
+
+
 zkTasklist = {};

 zkTasklist.init = function(cmp) {
@ -17,7 +25,7 @@ zkTasklist.adjust_height = function(cmp) {
            offset = 0;
        }
        var newheigth = parseInt(height) + offset;
-        element.style["height"] = newheigth + 'px';
+        element.style["height"] = document.getElementById('scroll_container').style["height"];
    }

    setHeight(document.getElementById('ganttpanel'), HEIGHT_TIME_TRACKER);
@ -30,3 +38,73 @@ zkTasklist.adjust_height = function(cmp) {
        setHeight(element,HEIGHT_PER_ROW);
    });
 }
+
+
+//document.getElementById('scroll-container').onscroll = scrollEvent;
+document.getElementById('ganttpanel_scroller_x').onscroll = scrollEvent;
+function scrollEvent() {
+    //scroller = document.getElementById('scroll-container');
+    scroller = document.getElementById('ganttpanel_scroller_x');
+   document.getElementById('timetracker').scrollLeft = scroller.scrollLeft;
+   document.getElementById('scroll_container').scrollLeft = scroller.scrollLeft;
+
+   }
+
+document.getElementById('ganttpanel_scroller_y').onscroll = scrollEvent_y;
+function scrollEvent_y() {
+    //scroller = document.getElementById('scroll-container');
+    scroller = document.getElementById('ganttpanel_scroller_y');
+    document.getElementById('listdetails_container').scrollTop = scroller.scrollTop ;
+   document.getElementById('scroll_container').scrollTop = scroller.scrollTop ;
+   }
+
+window.onresize = relocateScrolls;
+window.onload = relocateScrolls;
+// document.body.onresize = relocateScrolls;
+function relocateScrolls() {
+
+    scroller_y = document.getElementById('ganttpanel_scroller_y');
+    scroller_x = document.getElementById('ganttpanel_scroller_x');
+    timetracker = document.getElementById('timetracker');
+    listdetails = document.getElementById('listdetails_container');
+    scroll_container = document.getElementById('scroll_container');
+
+
+    // Reposition scroll-y and scroll-x width (Width change)
+    if ( window.innerWidth > MIN_RESOLUTION_X ) {
+        scroller_y.style["left"] =
+            (window.innerWidth - SCROLLBAR_WIDTH*2) +"px";
+        scroller_x.style["width"] =
+            (window.innerWidth - TASKDETAILS_WIDTH - SCROLLBAR_WIDTH ) +"px";
+        timetracker.style["width"] = (window.innerWidth - TASKDETAILS_WIDTH
+            - SCROLLBAR_WIDTH - SCROLLBAR_WIDTH*2 ) +"px";
+        scroll_container.style["width"] = timetracker.style["width"];
+    }
+
+    // Reposition scroll-y and scroll-x width (Height change)
+    if ( window.innerHeight > MIN_RESOLUTION_Y ) {
+        scroller_x.style["top"] = (window.innerHeight - SCROLLBAR_WIDTH*2) +"px";
+        scroller_y.style["height"] = (window.innerHeight - TASKDETAILS_WIDTH ) +"px";
+
+        timetracker.style["height"] = (window.innerHeight - TIMETRACKER_OFFSET_TOP ) +"px";
+
+        listdetails.style["height"] = scroller_y.style["height"];
+        scroll_container.style["height"] = (window.innerHeight - TIMETRACKER_OFFSET_TOP - 90 ) +"px";
+    }
+
+    /* FIX: Needed to recalculate native watermark td */
+
+    adjustScrolls();
+}
+
+
+function adjustScrolls() {
+
+    // Resize scroller inner divs to adapt scrollbars lenght
+    document.getElementById('ganttpanel_inner_scroller_y').style["height"]
+        = document.getElementById('listdetails_container').scrollHeight + "px";
+
+    document.getElementById('ganttpanel_inner_scroller_x').style["width"]
+        = document.getElementById('timetracker').scrollWidth + "px";
+
+}
--- a/navalplanner-webapp/src/main/java/org/navalplanner/web/planner/DataForPlanner.java
+++ b/navalplanner-webapp/src/main/java/org/navalplanner/web/planner/DataForPlanner.java
@ -22,7 +22,7 @@ public class DataForPlanner {
    }

    public DependencyRegistry getLightLoad() {
-        return getModelWith(40);
+        return getModelWith(20);
    }

    public DependencyRegistry getMediumLoad() {
--- a/navalplanner-webapp/src/main/webapp/common/layout/template.zul
+++ b/navalplanner-webapp/src/main/webapp/common/layout/template.zul
@ -4,7 +4,7 @@
            <n:div class="logo"></n:div>
            <n:div class="vision"></n:div>
        </n:div>
-    	<menubar id="menubar" width="900px" top="0px" left="320px"
+        <menubar id="menubar" width="800px" top="0px" left="320px"
            ctrlKeys="^k#f2" onCtrlKey="doCtrlKey()" sclass="mainmenu">

            <menu label="${c:l('mainmenu.plannification')}">
--- a/navalplanner-webapp/src/main/webapp/orders/_orderElementTree.zul
+++ b/navalplanner-webapp/src/main/webapp/orders/_orderElementTree.zul
@ -1,4 +1,3 @@
-<vbox id="orderElementTree">
    <vbox>
        <hbox>
            <button label="New order element"
--- a/navalplanner-webapp/src/main/webapp/planner/css/productionmanagement.css
+++ b/navalplanner-webapp/src/main/webapp/planner/css/productionmanagement.css
@ -1,23 +1,26 @@
-/* Planificator specific styles */
+/* Planificator specific styles

-/*** Tasks ***/
-#listtasks {
-    position:relative;
-    width:600px;
-    top:70px;
-}
+The next constants are used within the planner styling:

+LISTDETAILS_W = 280
+
+HEIGHT_PER_ROW = 15;
+HEIGHT_TIME_TRACKER = 120;
+
+
+
+*/
+
+
+
+/****** Tasks and dependencies ******/
 .listdetails {
-    width:280px;
+    width:280px; /* LISTDETAILS_W */
    float:left;
-    margin-top:46px;
+    margin-top:  0px;
    border-bottom: 1px solid #86A4BE;
   font-size:10px !important;
-}
-
-.taskdetail_grid table {
-    height:30px;
-    width:280px;
+    margin-top:0px;
 }

 .listdetails img {
@ -25,7 +28,7 @@
 }

 .listdetails td {
-    padding-left:0px; /* 3 */
+    padding-left:0px;
 }

 .listdetails input {
@ -36,10 +39,6 @@
   height:17px;
 }

-.task_title {
-   width: 120px !important;
-}
-
 .listdetails .z-datebox-inp {
   font-family:"Verdana,Tahoma,Arial,Helvetica,sans-serif";
   font-size:10px !important;
@ -47,6 +46,22 @@
   border-right:0px;
 }

+.task_title {
+   width: 120px !important;
+}
+
+.taskdetail_grid table {
+    height:30px;
+    width:280px; /* LISTDETAILS_W */
+}
+
+
+#listtasks {
+    position:relative;
+    width:600px;
+    top:0px;
+}
+
 /* Task box properties */
 .yui-resize, .box {
    border: 1px solid;
@ -67,7 +82,7 @@
 }


-/*** Dependencies ***/
+/****** Dependencies *******/
 #listdependencies {
    position:relative;
    width:400px;
@ -94,14 +109,37 @@
    width:1px;
 }

+.completion {
+    display: none;
+    width: 30%;
+    margin-top:0px;
+    height: 10px;
+    background-color: #FFCC99;
+    z-index:5;
+    border:0px;
+}
+
+.row span {
+    display:none;
+    position:relative;
+    z-index:5;
+    color:#BBBBBB;
+    white-space:nowrap;
+}
+
+.zk #ganttpanel .z-button-cm {
+    border: 0px;
+}
+
+
 /* Width: ganttpanel constant,
 Height: is recalculated on number of tasks */
 #ganttpanel {
-    height:800px;
+    height:400px; /* 800 */
    width: 900px;
-    overflow-x: scroll;
 }

+
 #ganttpanel table {
    float:left;
    padding:0;
@ -127,24 +165,70 @@ table {
    border:0px;
 }

-.completion {
-    display: none;
-    width: 30%;
-    margin-top:0px;
-    height: 10px;
-    background-color: #FFCC99;
-    z-index:5;
-    border:0px;
-}

-.row span {
-    display:none;
+#listdetails_container {
+    float:left;
+    overflow:hidden;
+    height:300px;
    position:relative;
-    z-index:5;
-    color:#BBBBBB;
-    white-space:nowrap;
+    top:50px;
+    overflow: hidden;
+    border-bottom: 1px solid #86A4BE;
+    border-right: 1px solid #86A4BE;
 }

-.zk #ganttpanel .z-button-cm {
-    border: 0px;
-}
+
+
+#scroll_container {
+    margin-top:70px;
+/*    border:solid green 1px; */
+    height:300px; /* Recalculate based on window */
+    width:500px; /* Recalculate based on window */
+    overflow:hidden;
+    float:left;
+    position:absolute;
+    left:300px;
+
+}
+
+#timetracker {
+    position:absolute;
+    left:300px;
+        width:600px;
+        height:400px;
+        position:absolute;
+        overflow-x:hidden;
+        float:left;
+/*        border: solid 1px red; */
+    }
+
+
+#ganttpanel_scroller_x, #ganttpanel_scroller_y {
+    position:absolute;
+    float:left;
+    overflow:auto;
+}
+
+#ganttpanel_scroller_x {
+    top: 600px;  /* Calculate initial settings */
+    left: 280px;
+    width:635px;
+    height:15px;
+}
+
+#ganttpanel_inner_scroller_x {
+       /* must be resized on ganttpanel javascript adjust size */
+        width:1900px; /* Real canvas dimensions */
+        height:15px; /* Scroll constant */
+}
+
+#ganttpanel_scroller_y {
+    top: 270px; /* Calculate initial settings */
+    left: 920px;
+    width:15px;
+    height:330px;
+}
+#ganttpanel_inner_scroller_y {
+        width:15px; /* Scroll constant */
+        height:1350px; /* Modified when added or removed tasks, or zoom adjustments */
+}
--- a/navalplanner-webapp/src/main/webapp/planner/main.zul
+++ b/navalplanner-webapp/src/main/webapp/planner/main.zul
@ -12,7 +12,7 @@
 </zscript>
    <!-- choose lightLoad, mediumLoad or highLoad.
     -->
-    <planner id="planner" self="@{define(content)}" dependencyRegistry="${plannerData.lightLoad}">
+    <planner id="planner" self="@{define(content)}" dependencyRegistry="${plannerData.mediumLoad}">
        <div id="idContextMenuTaskAssigment"
            use="org.zk.myhello.pages.MyHelloPageListener">
        </div>