v2 with TS, demo, browserify and npm project (#115)

* Change the source to use Typescript and organizing in small modules
* Start/End Dates with Planned and Executed values
* Now Tasks has Cost value as well, showed in a column
* Gantt now shows two bars for each task, planned and executed, one is full background and other has transparency
* Fixing small layout bugs

.gitignore

@@ -0,0 +1,4 @@
+dist/
+node_modules/
+*.log
+/jsgantt.js

.travis.yml

@@ -0,0 +1,23 @@
+language: node_js
+node_js:
+  - "9"
+addons:
+  chrome: stable
+before_script:
+  - "export DISPLAY=:99.0"
+  - "sh -e /etc/init.d/xvfb start"
+  - sleep 3 # give xvfb some time to start
+  - npm run dist
+  - cp jsgantt.js docs/ && cp src/jsgantt.css docs/ && cd docs && http-server &  # start a Web server
+  - sleep 3 # give Web server some time to bind to sockets, etc
+
+before_install:
+  - npm install -g http-server browserify webdriver-manager
+  - "/sbin/start-stop-daemon --start --quiet --pidfile /tmp/custom_xvfb_99.pid --make-pidfile --background --exec /usr/bin/Xvfb -- :99 -ac -screen 0 1280x1024x16"
+  - google-chrome-stable --headless --disable-gpu --remote-debugging-port=9222 http://localhost &
+
+install:
+  - npm install
+  - webdriver-manager update
+  - node node_modules/protractor/bin/webdriver-manager update
+  - node_modules/protractor/bin/webdriver-manager update

README.md

@@ -1,21 +1,124 @@
-A fully featured gantt chart component built entirely in Javascript, CSS and AJAX. It is lightweight and there is no need of external libraries or additional images.
+[![Build Status](https://travis-ci.com/jsGanttImproved/jsgantt-improved.svg?branch=master)](https://travis-ci.com/jsGanttImproved/jsgantt-improved)
 
-You can view a live example at https://jsGanttImproved.github.io/jsgantt-improved
 
-Features include:
+A fully featured gantt chart component built entirely in Javascript, CSS and AJAX. It is lightweight and there is no need of external libraries or additional images. 
+
+
+![Demo Image](/docs/demo.png)
+
+
+Start using with including the files `jsgantt.js` and `jsgantt.css` that are inside `docs/` folder.
+
+Or install and use in JS 
+
+`npm install jsgantt-improved`
+
+Import in your JS `import {JSGantt} from 'jsgantt-improved';`
+
+For **Angular** use the component [ng-gantt](https://github.com/mariohmol/ng-gantt) 
+
+
+
+
+## Example
+
+Take a look at this Landing Page with docs and live examples:
+
+* https://jsganttimproved.github.io/jsgantt-improved/docs
+
+You can view a Solo live example at:
+
+https://jsganttimproved.github.io/jsgantt-improved/docs/demo.html
+
+
+## Easy to Use
+
+```html
+<link href="jsgantt.css" rel="stylesheet" type="text/css"/>
+<script src="jsgantt.js" type="text/javascript"></script>
+
+<div style="position:relative" class="gantt" id="GanttChartDIV"></div>
+
+<script>
+
+var g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'day');
+
+g.setOptions({
+  vCaptionType: 'Complete',  // Set to Show Caption : None,Caption,Resource,Duration,Complete,     
+  vQuarterColWidth: 36,
+  vDateTaskDisplayFormat: 'day dd month yyyy', // Shown in tool tip box
+  vDayMajorDateDisplayFormat: 'mon yyyy - Week ww',// Set format to dates in the "Major" header of the "Day" view
+  vWeekMinorDateDisplayFormat: 'dd mon', // Set format to display dates in the "Minor" header of the "Week" view
+  vLang: 'en',
+  vShowTaskInfoLink: 1, // Show link in tool tip (0/1)
+  vShowEndWeekDate: 0,  // Show/Hide the date for the last day of the week in header for daily
+  vUseSingleCell: 10000, // Set the threshold cell per table row (Helps performance for large data.
+  vFormatArr: ['Day', 'Week', 'Month', 'Quarter'], // Even with setUseSingleCell using Hour format on such a large chart can cause issues in some browsers
+});
+
+// Load from a Json url
+JSGantt.parseJSON('./fixes/data.json', g);
+
+// Or Adding  Manually
+g.AddTaskItemObject({
+  "pID": 1,
+  "pName": "Define Chart <strong>API</strong>",
+  "pStart": "2017-02-25",
+  "pEnd": "2017-03-17",
+  "pPlanStart": "2017-04-01",
+  "pPlanEnd": "2017-04-15 12:00",
+  "pClass": "ggroupblack",
+  "pLink": "",
+  "pMile": 0,
+  "pRes": "Brian",
+  "pComp": 0,
+  "pGroup": 1,
+  "pParent": 0,
+  "pOpen": 1,
+  "pDepend": "",
+  "pCaption": "",
+  "pCost": 1000,
+  "pNotes": "Some Notes text"
+});
+
+g.Draw();
+
+</script>
+```
+
+## Features
+
   * Tasks & Collapsible Task Groups
   * Dependencies
   * Task Completion
-  * Task Styling
+  * Task Styling or as HTML tags
   * Milestones
   * Resources
+  * Costs
+  * Plan Start and End Dates
+  * Gantt with Planned vs Executed
   * Dynamic Loading of Tasks
   * Dynamic change of format: Hour, Day, Week, Month, Quarter
-  * Load Gantt from XML
+  * Load Gantt from XML and JSON
     * From external files (including experimental support for MS Project XML files)
     * From JavaScript Strings
-  * Support for Internationalization (all hard coded strings can be overridden)
+  * Support for Internationalization 
+
+## Documentation
+
+See the [Documentation](./Documentation.md) wiki page or the included ``docs/index.html`` file for instructions on use.
+
+Project based on https://code.google.com/p/jsgantt/.
+
+
+## Want to Collaborate?
+
+Its easy to get it set:
 
-Project forked as I was unable to contact the original maintainers. This work was done to support a personal project that didn't warrant a more heavyweight system (e.g. the dojo toolkit gantt chart features).
+* Clone this repo
+* Install lib dependencies: `npm i` 
+* Install global dependencies: `npm i -g browserify nodemon` 
+* Run the demo, This will start a `localhost:8080` with a live  example:  `npm start`. 
+* Use `npm run watch:dist` or do your change in `src` and restart this command refresh the changes.
 
-See the [Documentation](https://github.com/jsGanttImproved/jsgantt-improved/wiki/Documentation) wiki page or the included ``index.html`` file for instructions on use.
+For testing use `npm run test` with e2e tests.

docs/demo.html

@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="en" class="no-js">
+
+<!-- Head -->
+
+<head>
+  <!-- Meta data -->
+  <meta charset="utf-8">
+  <title>jsGantt Improved</title>
+  <meta name="description" content="FREE javascript gantt - jsGantt Improved HTML, CSS and AJAX only">
+  <meta name="keywords" content="jsgantt-improved free javascript gantt-chart html css ajax">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <style>
+    .row [type=checkbox] {
+      margin-right: 10px
+    }
+
+    .row {
+      width: 100%
+    }
+  </style>
+  <!-- External resources -->
+  <!-- jQuery + Ajax [required by Bootstrap] -->
+  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
+    crossorigin="anonymous"></script>
+  <!-- Required by smooth scrolling -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+  <!-- Bootstrap v4.0.0 Alpha -->
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
+    crossorigin="anonymous" />
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
+    crossorigin="anonymous"></script>
+  <!-- Font Awesome -->
+  <script src="https://use.fontawesome.com/78d1e57168.js"></script>
+  <!-- Google's Code Prettify -->
+  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&amp;skin=sunburst"></script>
+  <!-- Google Fonts -->
+  <link href="https://fonts.googleapis.com/css?family=Cookie|Satisfy|Kelly+Slab|Overlock" rel="stylesheet">
+
+  <!-- jsGanttImproved App -->
+  <link href="jsgantt.css" rel="stylesheet" type="text/css" />
+  <script src="jsgantt.js" type="text/javascript"></script>
+</head>
+
+<!-- Content -->
+
+<body data-spy="scroll" data-target="#my-navbar-nav" style="padding: 30px;">
+
+
+  <div class="row">
+    <h3 class="row">Hide and Show Properties</h3>
+
+    <div class="row">
+      <span>
+        <label for="vShowRes">Responsible</label>
+        <input type="checkbox" id="vShowRes" checked onchange="start(event)" />
+      </span>
+
+      <span>
+        <label for="vShowDur">Duration</label>
+        <input type="checkbox" id="vShowDur" checked onchange="start(event)" />
+      </span>
+
+      <span>
+        <label for="vShowCost">Cost</label>
+        <input type="checkbox" id="vShowCost" checked onchange="start(event)" />
+      </span>
+
+      <span>
+        <label for="vShowComp">Comp</label>
+        <input type="checkbox" id="vShowComp" checked onchange="start(event)" />
+      </span>
+
+      <span>
+        <label for="vShowTaskInfoLink">tooltip</label>
+        <input type="checkbox" id="vShowTaskInfoLink" checked onchange="start(event)" />
+      </span>
+
+      <span>
+        <label for="vShowEndWeekDate">date for the last day of the week</label>
+        <input type="checkbox" id="vShowEndWeekDate" onchange="start(event)" />
+      </span>
+
+
+
+    </div>
+
+    <span>
+      <label for="vShowStartDate">StartDate</label>
+      <input type="checkbox" id="vShowStartDate" checked onchange="start(event)" />
+    </span>
+
+    <span>
+      <label for="vShowEndDate">EndDate</label>
+      <input type="checkbox" id="vShowEndDate" checked onchange="start(event)" />
+    </span>
+
+    <span>
+      <label for="vShowPlanStartDate">Planned StartDate</label>
+      <input type="checkbox" id="vShowPlanStartDate" checked onchange="start(event)" />
+    </span>
+
+    <span>
+      <label for="vShowPlanEndDate">Planned EndDate</label>
+      <input type="checkbox" id="vShowPlanEndDate" checked onchange="start(event)" />
+    </span>
+  </div>
+
+
+  <br>
+
+  Choose a language:
+  <select id="lang" onchange="start(event)">
+    <option value='pt'>pt</option>
+    <option value='en'>en</option>
+    <option value='ru'>ru</option>
+    <option value='es'>es</option>
+    <option value='fr'>fr</option>
+    <option value='de'>de</option>
+  </select>
+
+  <br />
+  Data getting from a URL, <a href="fixes/data.json">JSON Data</a>
+
+  <br />
+
+  Delay for tooltip to hide (in ms): <input id="delay" onchange="start(event)" value="150" type="number">
+
+  <br />
+  <div id="embedded-Gantt">
+  </div>
+
+</body>
+<script type="text/javascript" src="index.js"></script>
+
+</html>