Isolated the local classes in a single namespace (using commonjs for referring local classes does not work that handy)

Jakefile.js

@@ -3,12 +3,14 @@
  */
 var jake = require('jake'),
     browserify = require('browserify'),
-    path = require('path');
+    path = require('path'),
+    fs = require('fs');
 
 require('jake-utils');
 
 // constants
 var VIS = './vis.js';
+var VIS_TMP = './vis.js.tmp';
 var VIS_MIN = './vis.min.js';
 
 /**
@@ -36,24 +38,57 @@ task('build', {async: true}, function () {
     });
     var cssText = JSON.stringify(result.code);
 
+    // concatenate the script files
+    concat({
+        dest: VIS_TMP,
+        src: [
+            './src/imports.js',
+
+            './src/util.js',
+            './src/events.js',
+            './src/timestep.js',
+            './src/dataset.js',
+            './src/stack.js',
+            './src/range.js',
+            './src/controller.js',
+
+            './src/component/component.js',
+            './src/component/panel.js',
+            './src/component/rootpanel.js',
+            './src/component/timeaxis.js',
+            './src/component/itemset.js',
+            './src/component/item/*.js',
+
+            './src/visualization/timeline.js',
+
+            './src/exports.js'
+        ],
+
+        separator: '\n',
+
+        // Note: we insert the css as a string in the javascript code here
+        //       the css will be injected on load of the javascript library
+        footer: '// inject css\n' +
+            'util.loadCss(' + cssText + ');\n'
+    });
+
     // bundle the script files
     // TODO: do not package moment.js with vis.js.
     var b = browserify();
-    b.add('./src/vis.js');
+    b.add(VIS_TMP);
     b.bundle({
         standalone: 'vis'
     }, function (err, code) {
         // add header and footer
-        var lib =
-            read('./src/header.js') +
-            code +
-            read('./src/module.js') +
-            '\nloadCss(' + cssText + ');\n';  // inline css
+        var lib = read('./src/header.js') + code;
 
         // write bundled file
         write(VIS, lib);
         console.log('created ' + VIS);
 
+        // remove temporary file
+        fs.unlinkSync(VIS_TMP);
+
         // update version number and stuff in the javascript files
         replacePlaceholders(VIS);
 

src/component/component.js

@@ -1,5 +1,3 @@
-var util = require('./../util');
-
 /**
  * Prototype for visual components
  */
@@ -116,6 +114,3 @@ Component.prototype.on = function (event, callback) {
         throw new Error('Cannot attach event: no root panel found');
     }
 };
-
-// exports
-module.exports = exports = Component;

src/component/item/item.js

@@ -1,5 +1,3 @@
-var Component = require('../component');
-
 /**
  * @constructor Item
  * @param {ItemSet} parent
@@ -32,6 +30,3 @@ Item.prototype.select = function () {
 Item.prototype.unselect = function () {
     this.selected = false;
 };
-
-// exports
-module.exports = exports = Item;

src/component/item/itembox.js

@@ -1,6 +1,3 @@
-var util = require('../../util'),
-    Item = require('./item');
-
 /**
  * @constructor ItemBox
  * @extends Item
@@ -273,6 +270,3 @@ ItemBox.prototype.reposition = function () {
         dot.style.top = props.dot.top + 'px';
     }
 };
-
-// exports
-module.exports = exports = ItemBox;

src/component/item/itempoint.js

@@ -1,6 +1,3 @@
-var util = require('../../util'),
-    Item = require('./item');
-
 /**
  * @constructor ItemPoint
  * @extends Item
@@ -209,6 +206,3 @@ ItemPoint.prototype.reposition = function () {
         dom.dot.style.top = props.dot.top + 'px';
     }
 };
-
-// exports
-module.exports = exports = ItemPoint;

src/component/item/itemrange.js

@@ -1,6 +1,3 @@
-var util = require('../../util'),
-    Item = require('./item');
-
 /**
  * @constructor ItemRange
  * @extends Item
@@ -218,6 +215,3 @@ ItemRange.prototype.reposition = function () {
         dom.content.style.left = props.content.left + 'px';
     }
 };
-
-// exports
-module.exports = exports = ItemRange;

src/component/itemset.js

@@ -1,11 +1,3 @@
-var util = require('../util'),
-    DataSet = require('../dataset'),
-    Panel = require('./panel'),
-    Stack = require('../stack'),
-    ItemBox = require('./item/itembox'),
-    ItemRange = require('./item/itemrange'),
-    ItemPoint = require('./item/itempoint');
-
 /**
  * An ItemSet holds a set of items and ranges which can be displayed in a
  * range. The width is determined by the parent of the ItemSet, and the height
@@ -512,6 +504,3 @@ ItemSet.prototype.toScreen = function(time) {
     var conversion = this.conversion;
     return (time.valueOf() - conversion.offset) * conversion.factor;
 };
-
-// exports
-module.exports = exports = ItemSet;

src/component/panel.js

@@ -1,6 +1,3 @@
-var util = require('../util'),
-    Component = require('./component');
-
 /**
  * A panel can contain components
  * @param {Component} [parent]
@@ -102,6 +99,3 @@ Panel.prototype.reflow = function () {
 
     return (changed > 0);
 };
-
-// exports
-module.exports = exports = Panel;

src/component/rootpanel.js

@@ -1,6 +1,3 @@
-var util = require('../util'),
-    Panel = require('./panel');
-
 /**
  * A root panel can hold components. The root panel must be initialized with
  * a DOM element as container.
@@ -201,6 +198,3 @@ RootPanel.prototype._updateEventEmitters = function () {
         // TODO: be able to move event listeners to a parent when available
     }
 };
-
-// exports
-module.exports = exports = RootPanel;

src/component/timeaxis.js

@@ -1,7 +1,3 @@
-var util = require('../util'),
-    TimeStep = require('../timestep'),
-    Component = require('./component');
-
 /**
  * A horizontal time axis
  * @param {Component} parent
@@ -526,6 +522,3 @@ TimeAxis.prototype._updateConversion = function() {
         this.conversion = Range.conversion(range.start, range.end, this.width);
     }
 };
-
-// exports
-module.exports = exports = TimeAxis;

src/controller.js

@@ -1,6 +1,3 @@
-var util = require('./util'),
-    Component = require('./component/component');
-
 /**
  * @constructor Controller
  *
@@ -140,7 +137,3 @@ Controller.prototype.reflow = function () {
     }
     // TODO: limit the number of nested reflows/repaints, prevent loop
 };
-
-// exports
-module.exports = exports = Controller;
-

src/dataset.js

@@ -1,5 +1,3 @@
-var util = require('./util');
-
 /**
  * DataSet
  *
@@ -547,6 +545,3 @@ DataSet.prototype._appendRow = function (dataTable, columns, item) {
         dataTable.setValue(row, col, item[field]);
     });
 };
-
-// exports
-module.exports = exports = DataSet;

src/events.js

@@ -113,6 +113,3 @@ var events = {
         }
     }
 };
-
-// exports
-module.exports = exports = events;

src/exports.js

@@ -0,0 +1,57 @@
+/**
+ * vis.js library exports
+ */
+var vis = {
+    util: util,
+    events: events,
+
+    Controller: Controller,
+    DataSet: DataSet,
+    Range: Range,
+    Stack: Stack,
+    TimeStep: TimeStep,
+
+    components: {
+        items: {
+            Item: Item,
+            ItemBox: ItemBox,
+            ItemPoint: ItemPoint,
+            ItemRange: ItemRange
+        },
+
+        Component: Component,
+        Panel: Panel,
+        RootPanel: RootPanel,
+        ItemSet: ItemSet,
+        TimeAxis: TimeAxis
+    },
+
+    Timeline: Timeline
+};
+
+/**
+ * CommonJS module exports
+ */
+if (typeof exports !== 'undefined') {
+    exports = vis;
+}
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
+    module.exports = vis;
+}
+
+/**
+ * AMD module exports
+ */
+if (typeof(define) === 'function') {
+    define(function () {
+        return vis;
+    });
+}
+
+/**
+ * Window exports
+ */
+if (typeof window !== 'undefined') {
+    // attach the module to the window, load as a regular javascript file
+    window['vis'] = vis;
+}

src/imports.js

@@ -0,0 +1,4 @@
+/**
+ * vis.js library imports
+ */
+var moment = require('moment');

src/module.js

@@ -1,33 +0,0 @@
-
-/**
- * AMD module exports
- */
-if (typeof(define) === 'function') {
-    define(function () {
-        return vis;
-    });
-}
-
-/**
- * load css from text
- * @param {String} css    Text containing css
- */
-var loadCss = function (css) {
-    // get the script location, and built the css file name from the js file name
-    // http://stackoverflow.com/a/2161748/1262753
-    var scripts = document.getElementsByTagName('script');
-    // var jsFile = scripts[scripts.length-1].src.split('?')[0];
-    // var cssFile = jsFile.substring(0, jsFile.length - 2) + 'css';
-
-    // inject css
-    // http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
-    var style = document.createElement('style');
-    style.type = 'text/css';
-    if (style.styleSheet){
-        style.styleSheet.cssText = css;
-    } else {
-        style.appendChild(document.createTextNode(css));
-    }
-
-    document.getElementsByTagName('head')[0].appendChild(style);
-};

src/range.js

@@ -1,6 +1,3 @@
-var util = require('./util'),
-    events = require('./events');
-
 /**
  * @constructor Range
  * A Range controls a numeric range with a start and end value.
@@ -525,6 +522,3 @@ Range.prototype.move = function(moveFactor) {
     this.start = newStart;
     this.end = newEnd;
 };
-
-// exports
-module.exports = exports = Range;

src/stack.js

@@ -1,5 +1,3 @@
-var util = require('./util');
-
 /**
  * @constructor Stack
  * Stacks items on top of each other.
@@ -157,6 +155,3 @@ Stack.prototype.collision = function(a, b, margin) {
         (a.top - margin) < (b.top + b.height) &&
         (a.top + a.height + margin) > b.top);
 };
-
-// exports
-module.exports = exports = Stack;

src/timestep.js

@@ -1,7 +1,4 @@
-var util = require('./util'),
-    moment = require('moment');
-
-    /**
+/**
  * @constructor  TimeStep
  * The class TimeStep is an iterator for dates. You provide a start date and an
  * end date. The class itself determines the best scale (step size) based on the
@@ -451,6 +448,3 @@ TimeStep.prototype.getLabelMajor = function(date) {
         default:                        return '';
     }
 };
-
-// exports
-module.exports = exports = TimeStep;

src/util.js

@@ -592,6 +592,30 @@ util.option.asElement = function (value, defaultValue) {
     return value || defaultValue || null;
 };
 
+/**
+ * load css from text
+ * @param {String} css    Text containing css
+ */
+util.loadCss = function (css) {
+    // get the script location, and built the css file name from the js file name
+    // http://stackoverflow.com/a/2161748/1262753
+    var scripts = document.getElementsByTagName('script');
+    // var jsFile = scripts[scripts.length-1].src.split('?')[0];
+    // var cssFile = jsFile.substring(0, jsFile.length - 2) + 'css';
+
+    // inject css
+    // http://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
+    var style = document.createElement('style');
+    style.type = 'text/css';
+    if (style.styleSheet){
+        style.styleSheet.cssText = css;
+    } else {
+        style.appendChild(document.createTextNode(css));
+    }
+
+    document.getElementsByTagName('head')[0].appendChild(style);
+};
+
 
 // Internet Explorer 8 and older does not support Array.indexOf, so we define
 // it here in that case.
@@ -780,6 +804,3 @@ if(!Array.isArray) {
         return Object.prototype.toString.call(vArg) === "[object Array]";
     };
 }
-
-// exports
-module.exports = exports = util;

src/vis.js

@@ -1,31 +0,0 @@
-/**
- * vis.js library exports
- */
-var vis = {
-    Controller: require('./controller'),
-    DataSet: require('./dataset'),
-    events: require('./events'),
-    Range: require('./range'),
-    Stack: require('./stack'),
-    TimeStep: require('./timestep'),
-    util: require('./util'),
-
-    component: {
-        item: {
-            Item: '../../Item',
-            ItemBox: '../../ItemBox',
-            ItemPoint: '../../ItemPoint',
-            ItemRange: '../../ItemRange'
-        },
-
-        Component: require('./component/component'),
-        Panel: require('./component/panel'),
-        RootPanel: require('./component/rootpanel'),
-        ItemSet: require('./component/itemset'),
-        TimeAxis: require('./component/timeaxis')
-    },
-
-    Timeline: require('./visualization/timeline')
-};
-
-module.exports = exports = vis;

src/visualization/timeline.js

@@ -1,12 +1,3 @@
-var util = require('./../util'),
-    moment = require('moment'),
-    Range = require('../range'),
-    Controller = require('../controller'),
-    Component = require('../component/component'),
-    RootPanel = require('../component/rootpanel'),
-    TimeAxis = require('../component/timeaxis'),
-    ItemSet = require('../component/itemset');
-
 /**
  * Create a timeline visualization
  * @param {HTMLElement} container
@@ -147,6 +138,3 @@ Timeline.prototype.setData = function(data) {
         this.itemset.setData(data);
     }
 };
-
-// exports
-module.exports = exports = Timeline;