Added vis-light bundle

10 years ago · c8e8691d68
--- a/README.md
+++ b/README.md
@ -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
 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

--- a/dist/vis-light.js
+++ b/dist/vis-light.js
--- a/dist/vis-light.map
+++ b/dist/vis-light.map
--- a/dist/vis-light.min.js
+++ b/dist/vis-light.min.js
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/dist/vis.map
+++ b/dist/vis.map
--- a/dist/vis.min.js
+++ b/dist/vis.min.js
--- a/examples/timeline/19_vis_light_bundle.html
+++ b/examples/timeline/19_vis_light_bundle.html
@ -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>
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@ -30,6 +30,7 @@
  <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="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>

--- a/gulpfile.js
+++ b/gulpfile.js
@ -15,10 +15,12 @@ var HEADER            = './lib/header.js';
 var DIST              = './dist';
 var VIS_JS            = 'vis.js';
 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_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
 function createBanner() {
@ -49,6 +51,23 @@ var webpackConfig = {
  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 = {
  outSourceMap: VIS_MAP,
  output: {
@ -58,6 +77,7 @@ var uglifyConfig = {

 // create a single instance of the compiler to allow caching
 var compiler = webpack(webpackConfig);
 var compilerLight = webpack(webpackConfigLight);

 // clean the dist/img directory
 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
 gulp.task('bundle-css', ['clean'], function () {
  var files = [
@ -104,7 +134,7 @@ gulp.task('bundle-css', ['clean'], function () {
      .pipe(gulp.dest(DIST));
 });

 gulp.task('copy-img', ['clean'], function () {
 gulp.task('copy', ['clean'], function () {
  var network = gulp.src('./lib/network/img/**/*')
      .pipe(gulp.dest(DIST + '/img/network'));

@ -115,15 +145,20 @@ gulp.task('copy-img', ['clean'], function () {
 });

 gulp.task('minify', ['bundle-js'], function (cb) {
  // minify full version of vis.js
  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();
 });

 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
 var bundle = 'bundle' in argv;
--- a/lib/module/hammer.js
+++ b/lib/module/hammer.js
@ -2,7 +2,6 @@
 // (loading hammer.js in a node.js environment gives errors)
 if (typeof window !== 'undefined') {
  module.exports = window['Hammer'] || require('hammerjs');
  // TODO: throw an error when hammerjs is not available?
 }
 else {
  module.exports = function () {
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@ -1,5 +1,5 @@
 var Emitter = require('emitter-component');
 var Hammer = require('hammerjs');
 var Hammer = require('../module/hammer');
 var mousetrap = require('mousetrap');
 var util = require('../util');
 var DataSet = require('../DataSet');
--- a/lib/timeline/Graph2d.js
+++ b/lib/timeline/Graph2d.js
@ -1,5 +1,5 @@
 var Emitter = require('emitter-component');
 var Hammer = require('hammerjs');
 var Hammer = require('../module/hammer');
 var util = require('../util');
 var DataSet = require('../DataSet');
 var DataView = require('../DataView');
--- a/lib/timeline/Timeline.js
+++ b/lib/timeline/Timeline.js
@ -1,5 +1,5 @@
 var Emitter = require('emitter-component');
 var Hammer = require('hammerjs');
 var Hammer = require('../module/hammer');
 var util = require('../util');
 var DataSet = require('../DataSet');
 var DataView = require('../DataView');
--- a/lib/timeline/component/CustomTime.js
+++ b/lib/timeline/component/CustomTime.js
@ -1,4 +1,4 @@
 var Hammer = require('hammerjs');
 var Hammer = require('../../module/hammer');
 var util = require('../../util');
 var Component = require('./Component');

--- a/lib/timeline/component/ItemSet.js
+++ b/lib/timeline/component/ItemSet.js
@ -1,4 +1,4 @@
 var Hammer = require('hammerjs');
 var Hammer = require('../../module/hammer');
 var util = require('../../util');
 var DataSet = require('../../DataSet');
 var DataView = require('../../DataView');
--- a/lib/timeline/component/item/Item.js
+++ b/lib/timeline/component/item/Item.js
@ -1,4 +1,4 @@
 var Hammer = require('hammerjs');
 var Hammer = require('../../../module/hammer');

 /**
 * @constructor Item
--- a/lib/timeline/component/item/ItemRange.js
+++ b/lib/timeline/component/item/ItemRange.js
@ -1,4 +1,4 @@
 var Hammer = require('hammerjs');
 var Hammer = require('../../../module/hammer');
 var Item = require('./Item');

 /**