Browse Source

Applied node style dependency management, using browserify now to bundle the code

css_transitions
josdejong 11 years ago
parent
commit
6590e2cd2e
25 changed files with 2262 additions and 2116 deletions
  1. +48
    -73
      Jakefile.js
  2. +12
    -4
      README.md
  3. +7
    -2
      package.json
  4. +3
    -1
      src/component/component.js
  5. +2
    -1
      src/component/item/item.js
  6. +4
    -1
      src/component/item/itembox.js
  7. +4
    -1
      src/component/item/itempoint.js
  8. +4
    -1
      src/component/item/itemrange.js
  9. +17
    -2
      src/component/itemset.js
  10. +4
    -1
      src/component/panel.js
  11. +4
    -1
      src/component/rootpanel.js
  12. +5
    -1
      src/component/timeaxis.js
  13. +5
    -1
      src/controller.js
  14. +3
    -1
      src/dataset.js
  15. +1
    -2
      src/events.js
  16. +0
    -24
      src/module.js
  17. +4
    -1
      src/range.js
  18. +3
    -1
      src/stack.js
  19. +6
    -3
      src/timestep.js
  20. +2
    -3
      src/util.js
  21. +31
    -0
      src/vis.js
  22. +10
    -1
      src/visualization/timeline.js
  23. +7
    -0
      test/timeline.html
  24. +2071
    -1985
      vis.js
  25. +5
    -5
      vis.min.js

+ 48
- 73
Jakefile.js View File

@ -2,16 +2,20 @@
* Jake build script * Jake build script
*/ */
var jake = require('jake'), var jake = require('jake'),
fs = require('fs'),
browserify = require('browserify'),
path = require('path'); path = require('path');
require('jake-utils'); require('jake-utils');
// constants
var VIS = './vis.js';
var VIS_MIN = './vis.min.js';
/** /**
* default task * default task
*/ */
desc('Execute all tasks: build all libraries'); desc('Execute all tasks: build all libraries');
task('default', ['vis'], function () {
task('default', ['build', 'minify'], function () {
console.log('done'); console.log('done');
}); });
@ -19,10 +23,7 @@ task('default', ['vis'], function () {
* build the visualization library vis.js * build the visualization library vis.js
*/ */
desc('Build the visualization library vis.js'); desc('Build the visualization library vis.js');
task('vis', function () {
var VIS = './vis.js';
var VIS_MIN = './vis.min.js';
task('build', {async: true}, function () {
// concatenate and stringify css files // concatenate and stringify css files
var result = concat({ var result = concat({
src: [ src: [
@ -35,44 +36,36 @@ task('vis', function () {
}); });
var cssText = JSON.stringify(result.code); var cssText = JSON.stringify(result.code);
// concatenate the script files
concat({
dest: VIS,
src: [
'./src/module.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',
// TODO: do not package moment.js with vis.js.
'./lib/moment.js'
],
header: read('./src/header.js') + '\n' +
'(function () { ', // start of closure
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: 'loadCss(' + cssText + ');\n' +
'})();' // end of closure
// bundle the script files
// TODO: do not package moment.js with vis.js.
var b = browserify();
b.add('./src/vis.js');
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
// write bundled file
write(VIS, lib);
console.log('created ' + VIS);
// update version number and stuff in the javascript files
replacePlaceholders(VIS);
complete();
}); });
});
/**
* minify the visualization library vis.js
*/
desc('Minify the visualization library vis.js');
task('minify', function () {
// minify javascript // minify javascript
minify({ minify({
src: VIS, src: VIS,
@ -81,40 +74,22 @@ task('vis', function () {
}); });
// update version number and stuff in the javascript files // update version number and stuff in the javascript files
[VIS, VIS_MIN].forEach(function (file) {
replace({
replacements: [
{pattern: '@@name', replacement: 'vis.js'},
{pattern: '@@date', replacement: today()},
{pattern: '@@version', replacement: version()}
],
src: file
});
});
replacePlaceholders(VIS_MIN);
console.log('created vis.js library');
console.log('created ' + VIS_MIN);
}); });
/** /**
* Recursively remove a directory and its files
* https://gist.github.com/tkihira/2367067
* @param {String} dir
* replace version, date, and name placeholders in the provided file
* @param {String} filename
*/ */
var rmdir = function(dir) {
var list = fs.readdirSync(dir);
for(var i = 0; i < list.length; i++) {
var filename = path.join(dir, list[i]);
var stat = fs.statSync(filename);
if(filename == "." || filename == "..") {
// pass these files
} else if(stat.isDirectory()) {
// rmdir recursively
rmdir(filename);
} else {
// rm fiilename
fs.unlinkSync(filename);
}
}
fs.rmdirSync(dir);
var replacePlaceholders = function (filename) {
replace({
replacements: [
{pattern: '@@name', replacement: 'vis.js'},
{pattern: '@@date', replacement: today()},
{pattern: '@@version', replacement: version()}
],
src: filename
});
}; };

+ 12
- 4
README.md View File

@ -111,18 +111,26 @@ To build the library from source, clone the project from github
git clone git://github.com/almende/vis.git git clone git://github.com/almende/vis.git
The project uses [jake](https://github.com/mde/jake) as build tool. The project uses [jake](https://github.com/mde/jake) as build tool.
The build script uses [Browserify](http://browserify.org/) to
bundle the source code into a library,
and uses [UglifyJS](http://lisperator.net/uglifyjs/) to minify the code.
The source code uses the module style of node (require and module.exports) to
organize dependencies.
To install all dependencies and build the library, run `npm install` in the
root of the project.
cd vis
npm install
To be able to run jake from the command line, jake must be installed globally: To be able to run jake from the command line, jake must be installed globally:
sudo npm install -g jake sudo npm install -g jake
Then, the project can be build by executing jake in the root of the project: Then, the project can be build by executing jake in the root of the project:
cd vis
jake jake
This will build the library for each of the components. The built libraries can
be found in the directory `bin`, and includes examples.
## License ## License

+ 7
- 2
package.json View File

@ -1,6 +1,6 @@
{ {
"name": "vis", "name": "vis",
"version": "0.0.5",
"version": "0.0.6",
"description": "A dynamic, browser-based visualization library.", "description": "A dynamic, browser-based visualization library.",
"homepage": "http://visjs.org/", "homepage": "http://visjs.org/",
"repository": { "repository": {
@ -20,7 +20,12 @@
"network", "network",
"browser" "browser"
], ],
"dependencies": {},
"scripts": {
"prepublish": "jake"
},
"dependencies": {
"moment": "latest"
},
"devDependencies": { "devDependencies": {
"jake": ">= 0.5.9", "jake": ">= 0.5.9",
"jake-utils": ">= 0.0.18", "jake-utils": ">= 0.0.18",

+ 3
- 1
src/component/component.js View File

@ -1,3 +1,5 @@
var util = require('./../util');
/** /**
* Prototype for visual components * Prototype for visual components
*/ */
@ -116,4 +118,4 @@ Component.prototype.on = function (event, callback) {
}; };
// exports // exports
vis.component.Component = Component;
module.exports = exports = Component;

+ 2
- 1
src/component/item/item.js View File

@ -1,3 +1,4 @@
var Component = require('../component');
/** /**
* @constructor Item * @constructor Item
@ -33,4 +34,4 @@ Item.prototype.unselect = function () {
}; };
// exports // exports
vis.component.item.Item = Item;
module.exports = exports = Item;

+ 4
- 1
src/component/item/itembox.js View File

@ -1,3 +1,6 @@
var util = require('../../util'),
Item = require('./item');
/** /**
* @constructor ItemBox * @constructor ItemBox
* @extends Item * @extends Item
@ -272,4 +275,4 @@ ItemBox.prototype.reposition = function () {
}; };
// exports // exports
vis.component.item.box = ItemBox;
module.exports = exports = ItemBox;

+ 4
- 1
src/component/item/itempoint.js View File

@ -1,3 +1,6 @@
var util = require('../../util'),
Item = require('./item');
/** /**
* @constructor ItemPoint * @constructor ItemPoint
* @extends Item * @extends Item
@ -208,4 +211,4 @@ ItemPoint.prototype.reposition = function () {
}; };
// exports // exports
vis.component.item.point = ItemPoint;
module.exports = exports = ItemPoint;

+ 4
- 1
src/component/item/itemrange.js View File

@ -1,3 +1,6 @@
var util = require('../../util'),
Item = require('./item');
/** /**
* @constructor ItemRange * @constructor ItemRange
* @extends Item * @extends Item
@ -217,4 +220,4 @@ ItemRange.prototype.reposition = function () {
}; };
// exports // exports
vis.component.item.range = ItemRange;
module.exports = exports = ItemRange;

+ 17
- 2
src/component/itemset.js View File

@ -1,3 +1,11 @@
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 * 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 * range. The width is determined by the parent of the ItemSet, and the height
@ -54,6 +62,13 @@ function ItemSet(parent, depends, options) {
ItemSet.prototype = new Panel(); ItemSet.prototype = new Panel();
// available item types will be registered here
ItemSet.types = {
box: ItemBox,
range: ItemRange,
point: ItemPoint
};
/** /**
* Set options for the ItemSet. Existing options will be extended/overwritten. * Set options for the ItemSet. Existing options will be extended/overwritten.
* @param {Object} [options] The following options are available: * @param {Object} [options] The following options are available:
@ -189,7 +204,7 @@ ItemSet.prototype.repaint = function () {
var type = itemData.type || var type = itemData.type ||
(itemData.start && itemData.end && 'range') || (itemData.start && itemData.end && 'range') ||
'box'; 'box';
var constructor = vis.component.item[type];
var constructor = ItemSet.types[type];
// TODO: how to handle items with invalid data? hide them and give a warning? or throw an error? // TODO: how to handle items with invalid data? hide them and give a warning? or throw an error?
if (item) { if (item) {
@ -499,4 +514,4 @@ ItemSet.prototype.toScreen = function(time) {
}; };
// exports // exports
vis.component.ItemSet = ItemSet;
module.exports = exports = ItemSet;

+ 4
- 1
src/component/panel.js View File

@ -1,3 +1,6 @@
var util = require('../util'),
Component = require('./component');
/** /**
* A panel can contain components * A panel can contain components
* @param {Component} [parent] * @param {Component} [parent]
@ -101,4 +104,4 @@ Panel.prototype.reflow = function () {
}; };
// exports // exports
vis.component.Panel = Panel;
module.exports = exports = Panel;

+ 4
- 1
src/component/rootpanel.js View File

@ -1,3 +1,6 @@
var util = require('../util'),
Panel = require('./panel');
/** /**
* A root panel can hold components. The root panel must be initialized with * A root panel can hold components. The root panel must be initialized with
* a DOM element as container. * a DOM element as container.
@ -200,4 +203,4 @@ RootPanel.prototype._updateEventEmitters = function () {
}; };
// exports // exports
vis.component.RootPanel = RootPanel;
module.exports = exports = RootPanel;

+ 5
- 1
src/component/timeaxis.js View File

@ -1,3 +1,7 @@
var util = require('../util'),
TimeStep = require('../timestep'),
Component = require('./component');
/** /**
* A horizontal time axis * A horizontal time axis
* @param {Component} parent * @param {Component} parent
@ -524,4 +528,4 @@ TimeAxis.prototype._updateConversion = function() {
}; };
// exports // exports
vis.component.TimeAxis = TimeAxis;
module.exports = exports = TimeAxis;

+ 5
- 1
src/controller.js View File

@ -1,3 +1,6 @@
var util = require('./util'),
Component = require('./component/component');
/** /**
* @constructor Controller * @constructor Controller
* *
@ -139,4 +142,5 @@ Controller.prototype.reflow = function () {
}; };
// exports // exports
vis.Controller = Controller;
module.exports = exports = Controller;

+ 3
- 1
src/dataset.js View File

@ -1,3 +1,5 @@
var util = require('./util');
/** /**
* DataSet * DataSet
* *
@ -547,4 +549,4 @@ DataSet.prototype._appendRow = function (dataTable, columns, item) {
}; };
// exports // exports
vis.DataSet = DataSet;
module.exports = exports = DataSet;

+ 1
- 2
src/events.js View File

@ -1,4 +1,3 @@
/** /**
* Event listener (singleton) * Event listener (singleton)
*/ */
@ -116,4 +115,4 @@ var events = {
}; };
// exports // exports
vis.events = events;
module.exports = exports = events;

+ 0
- 24
src/module.js View File

@ -1,19 +1,3 @@
// Define namespace vis
var vis = {
component: {
item: {}
}
};
/**
* CommonJS module exports
*/
if (typeof exports !== 'undefined') {
exports = vis;
}
if (typeof module !== 'undefined') {
module.exports = vis;
}
/** /**
* AMD module exports * AMD module exports
@ -24,14 +8,6 @@ if (typeof(define) === 'function') {
}); });
} }
/**
* Window exports
*/
if (typeof window !== 'undefined') {
// attach the module to the window, load as a regular javascript file
window['vis'] = vis;
}
/** /**
* load css from text * load css from text
* @param {String} css Text containing css * @param {String} css Text containing css

+ 4
- 1
src/range.js View File

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

+ 3
- 1
src/stack.js View File

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

+ 6
- 3
src/timestep.js View File

@ -1,4 +1,7 @@
/**
var util = require('./util'),
moment = require('moment');
/**
* @constructor TimeStep * @constructor TimeStep
* The class TimeStep is an iterator for dates. You provide a start date and an * 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 * end date. The class itself determines the best scale (step size) based on the
@ -449,5 +452,5 @@ TimeStep.prototype.getLabelMajor = function(date) {
} }
}; };
// export
vis.TimeStep = TimeStep;
// exports
module.exports = exports = TimeStep;

+ 2
- 3
src/util.js View File

@ -780,6 +780,5 @@ if(!Array.isArray) {
}; };
} }
// export
vis.util = util;
// exports
module.exports = exports = util;

+ 31
- 0
src/vis.js View File

@ -0,0 +1,31 @@
/**
* 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;

+ 10
- 1
src/visualization/timeline.js View File

@ -1,3 +1,12 @@
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 * Create a timeline visualization
* @param {HTMLElement} container * @param {HTMLElement} container
@ -140,4 +149,4 @@ Timeline.prototype.setData = function(data) {
}; };
// exports // exports
vis.Timeline = Timeline;
module.exports = exports = Timeline;

+ 7
- 0
test/timeline.html View File

@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title></title> <title></title>
<script>
function require() {}
var module = {
exports: {}
};
var exports = module.exports;
</script>
<script src="../lib/moment.min.js"></script> <script src="../lib/moment.min.js"></script>
<script src="../src/module.js"></script> <script src="../src/module.js"></script>
<script src="../src/util.js"></script> <script src="../src/util.js"></script>

+ 2071
- 1985
vis.js
File diff suppressed because it is too large
View File


+ 5
- 5
vis.min.js
File diff suppressed because it is too large
View File


Loading…
Cancel
Save