Changed build script to generate a single library vis.js in the project root

11 years ago · 7489ae0ab1
--- a/Jakefile.js
+++ b/Jakefile.js
@ -11,24 +11,22 @@ require('jake-utils');
 * default task
 */
 desc('Execute all tasks: build all libraries');
 task('default', ['timeline'], function () {
 task('default', ['vis'], function () {
    console.log('done');
 });

 /**
 * timeline
 * vis.js, vis.css
 */
 desc('Build the timeline visualization');
 task('timeline', function () {
    var TIMELINE = './bin/timeline/timeline.js';
    var TIMELINE_MIN = './bin/timeline/timeline.min.js';
    var DIR = './bin/timeline';
    jake.rmRf(DIR);
    jake.mkdirP(DIR);
 desc('Build the visualization library vis.js');
 task('vis', function () {
    var VIS = './vis.js';
    var VIS_MIN = './vis.min.js';
    var VIS_CSS = './vis.css';

    // concatenate the script files
    concat({
        dest: TIMELINE,
        dest: VIS,
        src: [
            './src/header.js',
            './src/util.js',
@ -46,7 +44,7 @@ task('timeline', function () {
            './src/component/itemset.js',
            './src/component/item/*.js',

            './src/visualization/timeline/timeline.js',
            './src/visualization/timeline.js',

            './lib/moment.js'
        ],
@ -55,7 +53,7 @@ task('timeline', function () {

    // concatenate the css files
    concat({
        dest: './bin/timeline/timeline.css',
        dest: VIS_CSS,
        src: [
            './src/component/css/panel.css',
            './src/component/css/item.css',
@ -66,16 +64,16 @@ task('timeline', function () {

    // minify javascript
    minify({
        src: TIMELINE,
        dest: TIMELINE_MIN,
        src: VIS,
        dest: VIS_MIN,
        header: read('./src/header.js')
    });

    // update version number and stuff in the javascript files
    [TIMELINE, TIMELINE_MIN].forEach(function (file) {
    [VIS, VIS_MIN].forEach(function (file) {
        replace({
            replacements: [
                {pattern: '@@name',    replacement: 'timeline'},
                {pattern: '@@name',    replacement: 'vis.js'},
                {pattern: '@@date',    replacement: today()},
                {pattern: '@@version', replacement: version()}
            ],
@ -83,10 +81,7 @@ task('timeline', function () {
        });
    });

    // copy examples
    jake.cpR('./src/visualization/timeline/examples', './bin/timeline/examples/');

    console.log('created timeline library');
    console.log('created vis.js library');
 });

 /**
--- a/README.md
+++ b/README.md
@ -23,12 +23,11 @@ Or download the library from the github project:
 ## Load


 To use a component, include the javascript and css file of the component
 in your webpage. For example for the Timeline:
 To use a component, include the javascript and css file of vis in your webpage.

 ```html
 <script src="components/vis/bin/timeline/timeline.js"></script>
 <link href="components/vis/bin/timeline/timeline.css" rel="stylesheet" type="text/css" />
 <script src="components/vis/vis.js"></script>
 <link href="components/vis/vis.css" rel="stylesheet" type="text/css" />
 ```

 A timeline can be instantiated as:
@ -45,15 +44,16 @@ component.
 ## Example

 A basic example on loading a Timeline is shown below. More examples can be
 found in the examples directories of each component.
 found in the [examples directory](https://github.com/almende/vis/tree/master/examples)
 of the project.

 ```html
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline basic demo</title>
    <script src="components/vis/bin/timeline/timeline.js"></script>
    <link href="components/vis/bin/timeline/timeline.css" rel="stylesheet" type="text/css" />
    <script src="components/vis/vis.js"></script>
    <link href="components/vis/vis.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        body, html {
--- a/bin/timeline/examples/01_basic.html
+++ b/bin/timeline/examples/01_basic.html
@ -2,8 +2,8 @@
 <html>
 <head>
    <title>Timeline basic demo</title>
    <script src="../timeline.js"></script>
    <link href="../timeline.css" rel="stylesheet" type="text/css" />
    <script src="../../vis.js"></script>
    <link href="../../vis.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        body, html {
--- a/bin/timeline/examples/02_dataset.html
+++ b/bin/timeline/examples/02_dataset.html
--- a/src/visualization/timeline/timeline.js
+++ b/src/visualization/timeline/timeline.js
--- a/src/visualization/timeline/examples/01_basic.html
+++ b/src/visualization/timeline/examples/01_basic.html
@ -1,31 +0,0 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline basic demo</title>
    <script src="../timeline.js"></script>
    <link href="../timeline.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }
    </style>
 </head>
 <body>
 <div id="visualization"></div>

 <script type="text/javascript">
    var container = document.getElementById('visualization');
    var data = [
        {id: 1, content: 'item 1', start: '2013-04-20'},
        {id: 2, content: 'item 2', start: '2013-04-14'},
        {id: 3, content: 'item 3', start: '2013-04-18'},
        {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: 'item 5', start: '2013-04-25'},
        {id: 6, content: 'item 6', start: '2013-04-27'}
    ];
    var options = {};
    var timeline = new Timeline(container, data, options);
 </script>
 </body>
 </html>
--- a/src/visualization/timeline/examples/02_dataset.html
+++ b/src/visualization/timeline/examples/02_dataset.html
@ -1,62 +0,0 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline demo</title>
    <script src="../timeline.js"></script>
    <link href="../timeline.css" rel="stylesheet" type="text/css" />

    <style>
        body, html {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            font-family: arial, sans-serif;
            font-size: 12pt;
        }

        #visualization {
            box-sizing: border-box;
            padding: 10px;
            width: 100%;
            height: 300px;
        }

        #visualization .itemset {
            /*background: rgba(255, 255, 0, 0.5);*/
        }
    </style>

 </head>
 <body>
 <div id="visualization"></div>

 <script>
    // create a dataset with items
    var now = moment().minutes(0).seconds(0).milliseconds(0);
    var data = new DataSet({
        fieldTypes: {
            start: 'Date',
            end: 'Date'
        }
    });
    data.add([
        {id: 1, content: 'item 1<br>start', start: now.clone().add('days', 4).toDate()},
        {id: 2, content: 'item 2', start: now.clone().add('days', -2).toDate() },
        {id: 3, content: 'item 3', start: now.clone().add('days', 2).toDate()},
        {id: 4, content: 'item 4', start: now.clone().add('days', 0).toDate(), end: now.clone().add('days', 3).toDate()},
        {id: 5, content: 'item 5', start: now.clone().add('days', 9).toDate(), type:'point'},
        {id: 6, content: 'item 6', start: now.clone().add('days', 11).toDate()}
    ]);

    var container = document.getElementById('visualization');
    var options = {
        start: now.clone().add('days', -3).valueOf(),
        end: now.clone().add('days', 7).valueOf()
    };

    var timeline = new Timeline(container, data, options);

 </script>
 </body>
 </html>
--- a/bin/timeline/timeline.css
+++ b/bin/timeline/timeline.css
--- a/bin/timeline/timeline.js
+++ b/bin/timeline/timeline.js
@ -1,5 +1,5 @@
 /**
 * timeline
 * vis.js
 * https://github.com/almende/vis
 *
 * A dynamic, browser-based visualization library.
--- a/bin/timeline/timeline.min.js
+++ b/bin/timeline/timeline.min.js
@ -1,5 +1,5 @@
 /**
 * timeline
 * vis.js
 * https://github.com/almende/vis
 *
 * A dynamic, browser-based visualization library.