Merge pull request #14 from frappe/hustcc-master

Custom class for tasks (hustcc pr enhancement)

README.md

@@ -17,7 +17,7 @@ Include it in your html:
 ```
 
 And start hacking:
-```
+```js
 var tasks = [
   {
     id: 'Task 1',
@@ -25,7 +25,8 @@ var tasks = [
     start: '2016-12-28',
     end: '2016-12-31',
     progress: 20,
-    dependencies: 'Task 2, Task 3'
+    dependencies: 'Task 2, Task 3',
+    custom_class: 'bar-milestone' // optional
   },
   ...
 ]

dist/frappe-gantt.js

@@ -804,7 +804,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 * Gantt:
 	 * 	element: querySelector string, required
 	 * 	tasks: array of tasks, required
-	 *   task: { id, name, start, end, progress, dependencies }
+	 *   task: { id, name, start, end, progress, dependencies, custom_class }
 	 * 	config: configuration options, optional
 	 */
 	module.exports = exports['default'];
@@ -1206,7 +1206,7 @@ return /******/ (function(modules) { // webpackBootstrap
 			self.duration = (self.task._end.diff(self.task._start, 'hours') + 24) / gt.config.step;
 			self.width = gt.config.column_width * self.duration;
 			self.progress_width = gt.config.column_width * self.duration * (self.task.progress / 100) || 0;
-			self.group = gt.canvas.group().addClass('bar-wrapper');
+			self.group = gt.canvas.group().addClass('bar-wrapper').addClass(self.task.custom_class || '');
 			self.bar_group = gt.canvas.group().addClass('bar-group').appendTo(self.group);
 			self.handle_group = gt.canvas.group().addClass('handle-group').appendTo(self.group);
 		}

index.html

@@ -15,6 +15,10 @@
 		.gantt-container {
 			overflow: scroll;
 		}
+		/* custom class */
+		.gantt .bar-milestone .bar-progress {
+			fill: tomato;
+		}
 	</style>
 	<script src="node_modules/moment/min/moment.min.js"></script>
 	<script src="node_modules/snapsvg/dist/snap.svg-min.js"></script>
@@ -56,6 +60,7 @@
 		tasks[2].dependencies = "Task 1"
 		tasks[3].dependencies = "Task 2"
 		tasks[5].dependencies = "Task 4"
+		tasks[5].custom_class = "bar-milestone";
 
 		var gantt_chart = Gantt("#gantt", tasks, {
 			on_click: function (task) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-gantt",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A simple, modern, interactive gantt library for the web",
   "main": "dist/frappe-gantt.js",
   "scripts": {

src/Bar.js

@@ -37,7 +37,7 @@ export default function Bar(gt, task) {
 		self.duration = (self.task._end.diff(self.task._start, 'hours') + 24) / gt.config.step;
 		self.width = gt.config.column_width * self.duration;
 		self.progress_width = gt.config.column_width * self.duration * (self.task.progress / 100) || 0;
-		self.group = gt.canvas.group().addClass('bar-wrapper');
+		self.group = gt.canvas.group().addClass('bar-wrapper').addClass(self.task.custom_class || '');
 		self.bar_group = gt.canvas.group().addClass('bar-group').appendTo(self.group);
 		self.handle_group = gt.canvas.group().addClass('handle-group').appendTo(self.group);
 	}

src/Gantt.js

@@ -3,7 +3,7 @@
  * Gantt:
  * 	element: querySelector string, required
  * 	tasks: array of tasks, required
- *   task: { id, name, start, end, progress, dependencies }
+ *   task: { id, name, start, end, progress, dependencies, custom_class }
  * 	config: configuration options, optional
  */
 import './gantt.scss';

webpack.config.js

@@ -14,7 +14,7 @@ if (env === 'build') {
 	outputFile = libraryName + '.js';
 }
 
-let config = {
+var config = {
 	entry: __dirname + '/src/Gantt.js',
 	devtool: 'source-map',
 	output: {