Browse Source

Added vis-light bundle

v3_develop
jos 10 years ago
parent
commit
c8e8691d68
18 changed files with 45900 additions and 19341 deletions
  1. +16
    -0
      README.md
  2. +26556
    -0
      dist/vis-light.js
  3. +1
    -0
      dist/vis-light.map
  4. +36
    -0
      dist/vis-light.min.js
  5. +19170
    -19310
      dist/vis.js
  6. +1
    -1
      dist/vis.map
  7. +16
    -16
      dist/vis.min.js
  8. +55
    -0
      examples/timeline/19_vis_light_bundle.html
  9. +1
    -0
      examples/timeline/index.html
  10. +41
    -6
      gulpfile.js
  11. +0
    -1
      lib/module/hammer.js
  12. +1
    -1
      lib/network/Network.js
  13. +1
    -1
      lib/timeline/Graph2d.js
  14. +1
    -1
      lib/timeline/Timeline.js
  15. +1
    -1
      lib/timeline/component/CustomTime.js
  16. +1
    -1
      lib/timeline/component/ItemSet.js
  17. +1
    -1
      lib/timeline/component/item/Item.js
  18. +1
    -1
      lib/timeline/component/item/ItemRange.js

+ 16
- 0
README.md View File

@ -76,6 +76,22 @@ Where `container` is an HTML element, `data` is an Array with data or a DataSet,
and `options` is an optional object with configuration options for the and `options` is an optional object with configuration options for the
component. component.
### Bundles
The folder `dist` contains bundled versions of vis.js for direct use in the browser. In general, to use vis, load the files `vis.js` and `vis.css`.
vis.js offers various bundled files: default or light version, and minified or non-minified. The source code of vis.js consists of commonjs modules, which makes it possible to create custom bundles using tools like [Browserify](http://browserify.org/) or [Webpack](http://webpack.github.io/). This can be bundling just one visualization like the Timeline, or bundling vis.js as part of your own browserified web application.
Bundle | Files | Description
------ | ----- | -----------
default | vis.js, vis.css | The default bundle, fully standalone. Code is not minified, use this version for development.
default minified | vis.min.js, vis.min.css | The default bundle, fully standalone. Code is minified, use this version for production.
light | vis-light.js, vis.css | The light bundle. External libraries [moment.js](http://momentjs.com/) and [hammer.js](http://hammerjs.github.io/) are excluded and need to be loaded before loading vis. Code is not minified, use this version for development.
light minified | vis-light.min.js, vis.min.css | The light bundle. External libraries [moment.js](http://momentjs.com/) and [hammer.js](http://hammerjs.github.io/) are excluded and need to be loaded before loading vis. Codee is minified, use this version for production.
## Example ## Example

+ 26556
- 0
dist/vis-light.js
File diff suppressed because it is too large
View File


+ 1
- 0
dist/vis-light.map
File diff suppressed because it is too large
View File


+ 36
- 0
dist/vis-light.min.js
File diff suppressed because it is too large
View File


+ 19170
- 19310
dist/vis.js
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 16
- 16
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 55
- 0
examples/timeline/19_vis_light_bundle.html View File

@ -0,0 +1,55 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Timeline | Light bundle</title>
<style type="text/css">
body, html {
font-family: arial;
}
p {
max-width: 600px;
}
</style>
<!--
load external libraries
-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.5/hammer.min.js"></script>
<script src="../../dist/vis-light.min.js"></script>
<link href="../../dist/vis.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>
The light bundle of vis.js (<code>vis-light.js</code> or <code>vis-light.min.js</code>) don't have the external dependencies of moment.js and hammer.js bundled. You have to load these yourself before loading vis-light.js. This is useful in the case that your application is using moment.js and/or hammer.js itself too, in order not to load these libraries twice. Note that it is possible too to create your own vis.js bundle: the source code consists of common.js modules which is browserifiable.
</p>
<div id="visualization"></div>
<script type="text/javascript">
// DOM element where the Timeline will be attached
var container = document.getElementById('visualization');
// Create a DataSet (allows two way data-binding)
var items = new vis.DataSet([
{id: 1, content: 'item 1', start: '2014-04-20'},
{id: 2, content: 'item 2', start: '2014-04-14'},
{id: 3, content: 'item 3', start: '2014-04-18'},
{id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
{id: 5, content: 'item 5', start: '2014-04-25'},
{id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
]);
// Configuration for the Timeline
var options = {
editable: true
};
// Create a Timeline
var timeline = new vis.Timeline(container, items, options);
</script>
</body>
</html>

+ 1
- 0
examples/timeline/index.html View File

@ -30,6 +30,7 @@
<p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p> <p><a href="16_navigation_menu.html">16_navigation_menu.html</a></p>
<p><a href="17_data_serialization.html">17_data_serialization.html</a></p> <p><a href="17_data_serialization.html">17_data_serialization.html</a></p>
<p><a href="18_range_overflow.html">18_range_overflow.html</a></p> <p><a href="18_range_overflow.html">18_range_overflow.html</a></p>
<p><a href="19_vis_light_bundle.html">19_vis_light_bundle.html</a></p>
<p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p> <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>

+ 41
- 6
gulpfile.js View File

@ -15,10 +15,12 @@ var HEADER = './lib/header.js';
var DIST = './dist'; var DIST = './dist';
var VIS_JS = 'vis.js'; var VIS_JS = 'vis.js';
var VIS_MAP = 'vis.map'; var VIS_MAP = 'vis.map';
var VIS_MIN_JS = 'vis.min.js';
var VIS_LIGHT_JS = 'vis-light.js';
var VIS_LIGHT_MAP = 'vis-light.map';
var VIS_LIGHT_MIN_JS = 'vis-light.min.js';
var VIS_CSS = 'vis.css'; var VIS_CSS = 'vis.css';
var VIS_MIN_CSS = 'vis.min.css'; var VIS_MIN_CSS = 'vis.min.css';
var DIST_VIS_MIN_JS = DIST + '/vis.min.js';
var DIST_VIS_MAP = DIST + '/' + VIS_MAP;
// generate banner with today's date and correct version // generate banner with today's date and correct version
function createBanner() { function createBanner() {
@ -49,6 +51,23 @@ var webpackConfig = {
cache: true cache: true
}; };
var webpackConfigLight = {
entry: ENTRY,
output: {
library: 'vis',
libraryTarget: 'umd',
path: DIST,
filename: VIS_LIGHT_JS,
sourcePrefix: ' '
},
externals: [
'hammerjs',
'moment'
],
plugins: [ bannerPlugin ],
cache: true
};
var uglifyConfig = { var uglifyConfig = {
outSourceMap: VIS_MAP, outSourceMap: VIS_MAP,
output: { output: {
@ -58,6 +77,7 @@ var uglifyConfig = {
// create a single instance of the compiler to allow caching // create a single instance of the compiler to allow caching
var compiler = webpack(webpackConfig); var compiler = webpack(webpackConfig);
var compilerLight = webpack(webpackConfigLight);
// clean the dist/img directory // clean the dist/img directory
gulp.task('clean', function (cb) { gulp.task('clean', function (cb) {
@ -74,6 +94,16 @@ gulp.task('bundle-js', ['clean'], function (cb) {
}); });
}); });
gulp.task('bundle-js-light', ['clean'], function (cb) {
// update the banner contents (has a date in it which should stay up to date)
bannerPlugin.banner = createBanner();
compilerLight.run(function (err, stats) {
if (err) gutil.log(err);
cb();
});
});
// bundle and minify css // bundle and minify css
gulp.task('bundle-css', ['clean'], function () { gulp.task('bundle-css', ['clean'], function () {
var files = [ var files = [
@ -104,7 +134,7 @@ gulp.task('bundle-css', ['clean'], function () {
.pipe(gulp.dest(DIST)); .pipe(gulp.dest(DIST));
}); });
gulp.task('copy-img', ['clean'], function () {
gulp.task('copy', ['clean'], function () {
var network = gulp.src('./lib/network/img/**/*') var network = gulp.src('./lib/network/img/**/*')
.pipe(gulp.dest(DIST + '/img/network')); .pipe(gulp.dest(DIST + '/img/network'));
@ -115,15 +145,20 @@ gulp.task('copy-img', ['clean'], function () {
}); });
gulp.task('minify', ['bundle-js'], function (cb) { gulp.task('minify', ['bundle-js'], function (cb) {
// minify full version of vis.js
var result = uglify.minify([DIST + '/' + VIS_JS], uglifyConfig); var result = uglify.minify([DIST + '/' + VIS_JS], uglifyConfig);
fs.writeFileSync(DIST + '/' + VIS_MIN_JS, result.code);
fs.writeFileSync(DIST + '/' + VIS_MAP, result.map);
fs.writeFileSync(DIST_VIS_MIN_JS, result.code);
fs.writeFileSync(DIST_VIS_MAP, result.map);
// minify light version of vis.js (external dependencies excluded)
var result = uglify.minify([DIST + '/' + VIS_LIGHT_JS], uglifyConfig);
fs.writeFileSync(DIST + '/' + VIS_LIGHT_MIN_JS, result.code);
fs.writeFileSync(DIST + '/' + VIS_LIGHT_MAP, result.map);
cb(); cb();
}); });
gulp.task('bundle', ['bundle-js', 'bundle-css', 'copy-img']);
gulp.task('bundle', ['bundle-js', 'bundle-js-light', 'bundle-css', 'copy']);
// read command line arguments --bundle and --minify // read command line arguments --bundle and --minify
var bundle = 'bundle' in argv; var bundle = 'bundle' in argv;

+ 0
- 1
lib/module/hammer.js View File

@ -2,7 +2,6 @@
// (loading hammer.js in a node.js environment gives errors) // (loading hammer.js in a node.js environment gives errors)
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
module.exports = window['Hammer'] || require('hammerjs'); module.exports = window['Hammer'] || require('hammerjs');
// TODO: throw an error when hammerjs is not available?
} }
else { else {
module.exports = function () { module.exports = function () {

+ 1
- 1
lib/network/Network.js View File

@ -1,5 +1,5 @@
var Emitter = require('emitter-component'); var Emitter = require('emitter-component');
var Hammer = require('hammerjs');
var Hammer = require('../module/hammer');
var mousetrap = require('mousetrap'); var mousetrap = require('mousetrap');
var util = require('../util'); var util = require('../util');
var DataSet = require('../DataSet'); var DataSet = require('../DataSet');

+ 1
- 1
lib/timeline/Graph2d.js View File

@ -1,5 +1,5 @@
var Emitter = require('emitter-component'); var Emitter = require('emitter-component');
var Hammer = require('hammerjs');
var Hammer = require('../module/hammer');
var util = require('../util'); var util = require('../util');
var DataSet = require('../DataSet'); var DataSet = require('../DataSet');
var DataView = require('../DataView'); var DataView = require('../DataView');

+ 1
- 1
lib/timeline/Timeline.js View File

@ -1,5 +1,5 @@
var Emitter = require('emitter-component'); var Emitter = require('emitter-component');
var Hammer = require('hammerjs');
var Hammer = require('../module/hammer');
var util = require('../util'); var util = require('../util');
var DataSet = require('../DataSet'); var DataSet = require('../DataSet');
var DataView = require('../DataView'); var DataView = require('../DataView');

+ 1
- 1
lib/timeline/component/CustomTime.js View File

@ -1,4 +1,4 @@
var Hammer = require('hammerjs');
var Hammer = require('../../module/hammer');
var util = require('../../util'); var util = require('../../util');
var Component = require('./Component'); var Component = require('./Component');

+ 1
- 1
lib/timeline/component/ItemSet.js View File

@ -1,4 +1,4 @@
var Hammer = require('hammerjs');
var Hammer = require('../../module/hammer');
var util = require('../../util'); var util = require('../../util');
var DataSet = require('../../DataSet'); var DataSet = require('../../DataSet');
var DataView = require('../../DataView'); var DataView = require('../../DataView');

+ 1
- 1
lib/timeline/component/item/Item.js View File

@ -1,4 +1,4 @@
var Hammer = require('hammerjs');
var Hammer = require('../../../module/hammer');
/** /**
* @constructor Item * @constructor Item

+ 1
- 1
lib/timeline/component/item/ItemRange.js View File

@ -1,4 +1,4 @@
var Hammer = require('hammerjs');
var Hammer = require('../../../module/hammer');
var Item = require('./Item'); var Item = require('./Item');
/** /**

Loading…
Cancel
Save