Merge pull request #2 from jsGanttImproved/master

Update from jsGanttImproved

Author: joules457

Documentation.md

@@ -299,7 +299,7 @@ The following options take a single numeric parameter; a value of 1 will enable
 |_setShowEndWeekDate():_|Controls whether the major heading in "Day" view displays the week end-date in the appropriate format (see [below](#user-content-display-date-formats)), defaults to 1 (show date)|
 |_setShowWeekends():_|Controls whether shows the weekend days in the Day view Format, defaults to 1 (show weekends)|
 |_setShowDeps():_  |Controls display of dependancy lines, defaults to 1 (show dependencies)|
-|_setEvents():_  |Controls events when a task is click in table data. You have to pass an object with the column and function. ex.: ` vEvents: { taskname: console.log, res: console.log }`|
+|_setEvents():_  |Controls events when a task is click in table data. You have to pass an object with the column and function. If the user click in the header, the event willbe triggered btu instead of the task will be a object about the header. ex.: ` vEvents: { taskname: console.log, res: console.log }`|
 |_setEventClickRow():_  |Controls events when a task row is clicked. Pass a function to execute ex.: `vEventClickRow: function(e){console.log(e)}`|
 |setEventClickCollapse():_  |Controls events when a group task is collapsed (open or close events). Pass a function to execute ex.: `vEventClickCollapse: function(e){console.log(e)}`|
 |_setEventsChange():_  |Controls events when a task row is cliked. Pass a function to execute ex.: `vEventsChange: { taskname: function(task, event, cell, column){ console.log(task, event, cell, column); } }`|
@@ -505,6 +505,7 @@ g.setOptions({
     planstart: console.log,
     planend: console.log,
     cost: console.log,
+    additional_category: console.log, // for additional fields
     beforeDraw: ()=>console.log('before draw listener'),
     afterDraw: ()=>console.log('before after listener')
   },

dist/jsgantt.css

@@ -25,6 +25,7 @@ div.gantt {
 .gminorheading,
 .gminorheadingwkend,
 .gtaskcell,
+.gtaskcellcurrent,
 .gtaskcellwkend {
   height: 19px;
   font-size: 12px;
@@ -43,6 +44,9 @@ div.gantt {
   border-right: none;
 }
 
+.gtasknolist-label{
+  padding: 10px 50px;
+}
 /* all three width values set just to make sure - helps resizing code */
 
 /* Additional values for some cell elements */
@@ -57,13 +61,18 @@ div.gantt {
 }
 
 .gtaskcellwkend,
+.gtaskcellcurrent,
 .gminorheadingwkend {
   background-color: #f7f7f7;
   font-weight: bold;
   font-size: 9px;
   white-space: nowrap;
 }
 
+.gtaskcellcurrent {
+  background-color: #e1e0f7;
+}
+
 td.gtaskcell {
   text-align: left;
 }
@@ -82,9 +91,9 @@ td.gspanning {
 .gtaskheading,
 .gname,
 .gtaskname,
-.gresource,
-.gduration,
-.gpccomplete,
+.gres,
+.gdur,
+.gcomp,
 .gstartdate,
 .gplanstartdate,
 .gplanenddate,
@@ -98,9 +107,9 @@ td.gspanning {
 .gtaskheading div,
 .gname div,
 .gtaskname div,
-.gresource div,
-.gduration div,
-.gpccomplete div,
+.gres div,
+.gdur div,
+.gcomp div,
 .gstartdate div,
 .gplanstartdate div,
 .gplanenddate div,
@@ -756,9 +765,9 @@ td.gspanning div {
 }
 
 .gadditional,
-.gresource,
-.gduration,
-.gpccomplete,
+.gres,
+.gdur,
+.gcomp,
 .gcost {
   text-align: center;
   width: 70px;

dist/jsgantt.js

@@ -86,6 +86,7 @@ function start(e) {
         planstart: console.log,
         planend: console.log,
         cost: console.log,
+        additional_category: console.log,
         beforeDraw: () => console.log('before draw listener'),
         afterDraw: () => {
           console.log('after draw listener');

docs/index.js

@@ -1,6 +1,6 @@
 {
   "name": "jsgantt-improved",
-  "version": "2.6.4",
+  "version": "2.7.2",
   "description": "jsgantt-improved",
   "main": "dist/index.js",
   "scripts": {

package.json

@@ -15,12 +15,13 @@ import {
   removeListener
 } from './events';
 import {
+  calculateCurrentDateOffset,
   getOffset, getScrollbarWidth
 } from './utils/general_utils';
 import { createTaskInfo, AddTaskItem, AddTaskItemObject, RemoveTaskItem, processRows, ClearTasks } from './task';
 
 import { getXMLProject, getXMLTask } from './xml';
-import { COLUMN_ORDER, draw_list_headings, draw_header, draw_bottom, draw_task_headings } from './draw_columns';
+import { COLUMN_ORDER, draw_header, draw_bottom, draw_task_headings } from './draw_columns';
 import { newNode, makeInput, getArrayLocationByID, CalcTaskXY, sLine, drawSelector } from './utils/draw_utils';
 import { drawDependency, DrawDependencies } from './draw_dependencies';
 import { includeGetSet } from './options';
@@ -208,7 +209,7 @@ export const GanttChart = function (pDiv, pFormat) {
 
     this.getColumnOrder().forEach(column => {
       if (this[column] == 1 || column === 'vAdditionalHeaders') {
-        draw_task_headings(column, vTmpRow, this.vLangs, this.vLang, this.vAdditionalHeaders);
+        draw_task_headings(column, vTmpRow, this.vLangs, this.vLang, this.vAdditionalHeaders, this.vEvents);
       }
     });
     return gListLbl;
@@ -291,6 +292,19 @@ export const GanttChart = function (pDiv, pFormat) {
       }
     }
 
+    // Render no daa in the chart
+    if (this.vTaskList.length == 0) {
+
+      let totalColumns = this.getColumnOrder()
+        .filter(column => this[column] == 1 || column === 'vAdditionalHeaders')
+        .length
+      let vTmpRow = newNode(vTmpContentTBody, 'tr', this.vDivId + 'child_', 'gname ');
+      // this.vTaskList[i].setListChildRow(vTmpRow);
+      let vTmpCell = newNode(vTmpRow, 'td', null, 'gtasknolist', '', null, null, null, totalColumns);
+      let vOutput = document.createDocumentFragment();
+      newNode(vOutput, 'div', null, 'gtasknolist-label', this.vLangs[this.vLang]['nodata'] + '.');
+      vTmpCell.appendChild(vOutput);
+    }
     // DRAW the date format selector at bottom left.
     let vTmpRow = newNode(vTmpContentTBody, 'tr');
     newNode(vTmpRow, 'td', null, 'gtasklist', '\u00A0');
@@ -490,7 +504,7 @@ export const GanttChart = function (pDiv, pFormat) {
    *
    */
   this.drawCharBody = function (vTaskLeftPx, vTmpContentTabWrapper, gChartLbl, gListLbl,
-    vMinDate, vSingleCell, vNumCols, vColWidth, vDateRow) {
+    vMinDate, vMaxDate, vSingleCell, vNumCols, vColWidth, vDateRow) {
     let vRightTable = document.createDocumentFragment();
     const vTmpDiv = newNode(vRightTable, 'div', this.vDivId + 'gchartbody', 'gchartgrid gcontainercol');
     this.setChartBody(vTmpDiv);
@@ -564,7 +578,7 @@ export const GanttChart = function (pDiv, pFormat) {
 
         vCaptClass = 'gmilecaption';
         if (!vSingleCell && !vComb) {
-          this.drawColsChart(vNumCols, vTmpRow, taskCellWidth)
+          this.drawColsChart(vNumCols, vTmpRow, taskCellWidth, vMinDate, vMaxDate)
         }
       }
       else {
@@ -599,7 +613,7 @@ export const GanttChart = function (pDiv, pFormat) {
           }
 
           if (!vSingleCell && !vComb) {
-            this.drawColsChart(vNumCols, vTmpRow, taskCellWidth);
+            this.drawColsChart(vNumCols, vTmpRow, taskCellWidth, vMinDate, vMaxDate);
           }
         }
         else {
@@ -656,8 +670,8 @@ export const GanttChart = function (pDiv, pFormat) {
           if (!vComb || (vComb && this.vTaskList[i].getParItem().getEnd() == this.vTaskList[i].getEnd())) vCaptClass = 'gcaption';
 
           // Background cells
-          if (!vSingleCell && !vComb) {
-           if(vTmpRow) this.drawColsChart(vNumCols, vTmpRow, taskCellWidth);
+          if (!vSingleCell && !vComb && vTmpRow) {
+            this.drawColsChart(vNumCols, vTmpRow, taskCellWidth, vMinDate, vMaxDate);
           }
         }
       }
@@ -677,24 +691,28 @@ export const GanttChart = function (pDiv, pFormat) {
       if (this.vTaskList[i].getTaskDiv() && vTmpDiv) {
         const vTmpDiv2 = newNode(vTmpDiv, 'div', this.vDivId + 'tt' + vID, null, null, null, null, 'none');
         const { component, callback } = this.createTaskInfo(this.vTaskList[i], this.vTooltipTemplate);
-        vTmpDiv2.appendChild(component);
+        const el = document.createElement('div');
+        el.appendChild(component);
+        vTmpDiv2.setAttribute('data-tooltip', el.innerHTML)
         addTooltipListeners(this, this.vTaskList[i].getTaskDiv(), vTmpDiv2, callback);
       }
       // Add Plan Task Info div for tooltip
       if (this.vTaskList[i].getPlanTaskDiv() && vTmpDiv) {
         const vTmpDiv2 = newNode(vTmpDiv, 'div', this.vDivId + 'tt' + vID, null, null, null, null, 'none');
         const { component, callback } = this.createTaskInfo(this.vTaskList[i], this.vTooltipTemplate);
-        vTmpDiv2.appendChild(component);
+        const el = document.createElement('div');
+        el.appendChild(component);
+        vTmpDiv2.setAttribute('data-tooltip', el.innerHTML)
         addTooltipListeners(this, this.vTaskList[i].getPlanTaskDiv(), vTmpDiv2, callback);
       }
     }
 
     // Include the footer with the days/week/month...
     if (vSingleCell) {
-      const vTmpTFootTRow =  newNode(vTmpTFoot, 'tr');
-      const vTmpTFootTCell =  newNode(vTmpTFootTRow, 'td', null, null, null, '100%');
-      const vTmpTFootTCellTable =  newNode(vTmpTFootTCell, 'table', null, 'gcharttableh', null, '100%');
-      const vTmpTFootTCellTableTBody =  newNode(vTmpTFootTCellTable, 'tbody');
+      const vTmpTFootTRow = newNode(vTmpTFoot, 'tr');
+      const vTmpTFootTCell = newNode(vTmpTFootTRow, 'td', null, null, null, '100%');
+      const vTmpTFootTCellTable = newNode(vTmpTFootTCell, 'table', null, 'gcharttableh', null, '100%');
+      const vTmpTFootTCellTableTBody = newNode(vTmpTFootTCellTable, 'tbody');
       vTmpTFootTCellTableTBody.appendChild(vDateRow.cloneNode(true));
     } else {
       vTmpTFoot.appendChild(vDateRow.cloneNode(true));
@@ -703,15 +721,34 @@ export const GanttChart = function (pDiv, pFormat) {
     return { vRightTable }
   }
 
-  this.drawColsChart = function(vNumCols, vTmpRow, taskCellWidth){
-    let vCellFormat = '';
+  this.drawColsChart = function (vNumCols, vTmpRow, taskCellWidth, pStartDate = null, pEndDate = null) {
+    let columnCurrentDay = null;
+    // Find the Current day cell to put a different class
+    if (this.vShowWeekends !== false && pStartDate && pEndDate && (
+      this.vFormat == 'day' || this.vFormat == 'week'
+    )) {
+      let curTaskStart = new Date(pStartDate.getTime());
+      let curTaskEnd = new Date();
+      let onePeriod = 3600000;
+      if (this.vFormat == 'day') {
+        onePeriod *= 24;
+      } else if (this.vFormat == 'week') {
+        onePeriod *= 24 * 7;
+      }
+      columnCurrentDay = Math.floor(calculateCurrentDateOffset(curTaskStart, curTaskEnd) / onePeriod) - 1;
+    }
+
     for (let j = 0; j < vNumCols - 1; j++) {
-      if (this.vShowWeekends !== false && this.vFormat == 'day' && ((j % 7 == 4) || (j % 7 == 5))) vCellFormat = 'gtaskcellwkend';
-      else vCellFormat = 'gtaskcell gtaskcellcols';
+      let vCellFormat = 'gtaskcell gtaskcellcols';
+      if (this.vShowWeekends !== false && this.vFormat == 'day' && ((j % 7 == 4) || (j % 7 == 5))) {
+        vCellFormat = 'gtaskcellwkend';
+      }
+      //When is the column is the current day/week,give a different class
+      else if ((this.vFormat == 'week' || this.vFormat == 'day') && j === columnCurrentDay) {
+        vCellFormat = 'gtaskcellcurrent';
+      }
       newNode(vTmpRow, 'td', null, vCellFormat, '\u00A0\u00A0', taskCellWidth);
     }
-
-
   }
 
   /**
@@ -736,11 +773,6 @@ export const GanttChart = function (pDiv, pFormat) {
       console.info('before draw', bd);
     }
 
-    if (this.vTaskList.length === 0) {
-      this.drawComplete(vMinDate, vColWidth, bd);
-      return;
-    }
-
     // Process all tasks, reset parent date and completion % if task list has altered
     if (this.vProcessNeeded) processRows(this.vTaskList, 0, -1, 1, 1, this.getUseSort(), this.vDebug);
     this.vProcessNeeded = false;
@@ -784,7 +816,7 @@ export const GanttChart = function (pDiv, pFormat) {
      * CHART GRID
      */
     const { vRightTable } = this.drawCharBody(vTaskLeftPx, vTmpContentTabWrapper, gChartLbl, gListLbl,
-      vMinDate, vSingleCell, vNumCols, vColWidth, vDateRow)
+      vMinDate, vMaxDate, vSingleCell, vNumCols, vColWidth, vDateRow)
 
     if (this.vDebug) {
       const ad = new Date();
@@ -850,8 +882,9 @@ export const GanttChart = function (pDiv, pFormat) {
       this.getChartBody().scrollLeft = vScrollPx;
     }
 
-    if (vMinDate.getTime() <= (new Date()).getTime() && vMaxDate.getTime() >= (new Date()).getTime()) this.vTodayPx = getOffset(vMinDate, new Date(), vColWidth, this.vFormat, this.vShowWeekends);
-    else this.vTodayPx = -1;
+    if (vMinDate.getTime() <= (new Date()).getTime() && vMaxDate.getTime() >= (new Date()).getTime()) {
+      this.vTodayPx = getOffset(vMinDate, new Date(), vColWidth, this.vFormat, this.vShowWeekends);
+    } else this.vTodayPx = -1;
 
     // DEPENDENCIES: Draw lines of Dependencies
     let bdd;