diff --git a/HISTORY.md b/HISTORY.md index 173f4445..a6da520c 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -4,6 +4,8 @@ http://visjs.org ## , version 0.3.0 +- Moved the generated library to folder `./dist` +- Css stylesheet must be loaded explicitly now. - Implemented options `showCurrentTime` and `showCustomTime`. Thanks fi0dor. - Implemented touch support for Timeline. - Fixed broken Timeline options `min` and `max`. diff --git a/Jakefile.js b/Jakefile.js index d5599feb..5aabf9a1 100644 --- a/Jakefile.js +++ b/Jakefile.js @@ -9,9 +9,10 @@ var jake = require('jake'), require('jake-utils'); // constants -var VIS = './vis.js'; +var VIS = './dist/vis.js'; +var VIS_CSS = './dist/vis.css'; var VIS_TMP = './vis.js.tmp'; -var VIS_MIN = './vis.min.js'; +var VIS_MIN = './dist/vis.min.js'; /** * default task @@ -27,7 +28,7 @@ task('default', ['build', 'minify', 'test'], function () { desc('Build the visualization library vis.js'); task('build', {async: true}, function () { // concatenate and stringify the css files - var result = concat({ + concat({ src: [ './src/timeline/component/css/timeline.css', './src/timeline/component/css/panel.css', @@ -38,10 +39,10 @@ task('build', {async: true}, function () { './src/timeline/component/css/currenttime.css', './src/timeline/component/css/customtime.css' ], - header: '/* vis.js stylesheet */', + dest: VIS_CSS, separator: '\n' }); - var cssText = JSON.stringify(result.code); + console.log('created ' + VIS_CSS); // concatenate the script files concat({ @@ -84,12 +85,7 @@ task('build', {async: true}, function () { './src/module/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' + separator: '\n' }); // bundle the concatenated script and dependencies into one file diff --git a/docs/graph.html b/docs/graph.html index fec8affb..9d298eb1 100644 --- a/docs/graph.html +++ b/docs/graph.html @@ -53,7 +53,13 @@

Example

- Here a basic graph example. More examples can be found in the + Here a basic graph example. Note that unlike the + Timeline, the Graph does not need the vis.css + file. +

+ +

+ More examples can be found in the examples directory.

@@ -62,7 +68,7 @@ <head> <title>Graph | Basic usage</title> - <script type="text/javascript" src="../../vis.js"></script> + <script type="text/javascript" src="../../dist/vis.js"></script> </head> <body> diff --git a/docs/index.html b/docs/index.html index 8be44e9c..bbaf818b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -84,13 +84,14 @@ bower install vis

Load

- To use a component, include the javascript file of vis in your web page: + To load vis.js, include the javascript and css files of vis in your web page: 

<!DOCTYPE HTML>
 <html>
 <head>
   <script src="components/vis/vis.js"></script>
+  <link href="components/vis/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <script type="text/javascript">
@@ -144,7 +145,9 @@ var timeline = new vis.Timeline(container, data, options);
 <html>
 <head>
   <title>Timeline basic demo</title>
+
   <script src="components/vis/vis.js"></script>
+  <link href="components/vis/vis.css" rel="stylesheet" type="text/css" />
 
   <style type="text/css">
     body, html {
diff --git a/docs/timeline.html b/docs/timeline.html
index ae3d1370..c2335c60 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -59,7 +59,8 @@
     }
   </style>
 
-  <script src="../../vis.js"></script>
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="visualization"></div>
@@ -85,11 +86,13 @@
 
Loading

 

   Install or download the vis.js library.
-  in a subfolder of your project. Include the library script in the head of your html code:
+  in a subfolder of your project. Include the libraries script and css files in the
+  head of your html code:
 

 
 
-<script type="text/javascript" src="vis/vis.js"></script>
+<script src="vis/dist/vis.js"></script>
+<link href="vis/dist/vis.css" rel="stylesheet" type="text/css" />
 

 
 The constructor of the Timeline is vis.Timeline
diff --git a/examples/graph/01_basic_usage.html b/examples/graph/01_basic_usage.html
index 0698b9cb..83b15d06 100644
--- a/examples/graph/01_basic_usage.html
+++ b/examples/graph/01_basic_usage.html
@@ -3,7 +3,7 @@
 
   Graph | Basic usage
 
-  
+  
 
   
 
-  
+  
 
   
+  
 
   
+  
 
   
+  
 
   
-  
+  
 
   
+  
 
   
 
-  
+  
 
   
+  
 
   
+  
 
   
+  
 
   
+  
 
   
+  
 
 
 

diff --git a/examples/graph/15_dot_language_playground.html b/examples/graph/15_dot_language_playground.html
index dc5c6931..d0c5912b 100644
--- a/examples/graph/15_dot_language_playground.html
+++ b/examples/graph/15_dot_language_playground.html
@@ -3,7 +3,7 @@
 
   Graph | DOT language playground
 
-  
+  
 
   
 
   
-  
+  
 
   
+  
 
   
-  
+  
 
   
+  
 
-    
+  
+  
 
 
 

 
 
 
 
\ No newline at end of file
diff --git a/examples/timeline/02_dataset.html b/examples/timeline/02_dataset.html
index 5ce3ab8f..e493663d 100644
--- a/examples/timeline/02_dataset.html
+++ b/examples/timeline/02_dataset.html
@@ -1,61 +1,62 @@
 
 
 
-    Timeline | Dataset example
-
-    
-
-    
-    
-
-    
+  Timeline | Dataset example
+
+  
+
+  
+  
+
+  
+  
 
 
 

 
 
 
diff --git a/examples/timeline/03_much_data.html b/examples/timeline/03_much_data.html
index 45c4f40e..60005819 100644
--- a/examples/timeline/03_much_data.html
+++ b/examples/timeline/03_much_data.html
@@ -13,7 +13,8 @@
     
     
 
-    
+  
+  
 
 
 

diff --git a/examples/timeline/04_html_data.html b/examples/timeline/04_html_data.html
index 48ed4dd2..47997fd3 100644
--- a/examples/timeline/04_html_data.html
+++ b/examples/timeline/04_html_data.html
@@ -1,72 +1,74 @@
 
 
 
-    Timeline | HTML data
+  Timeline | HTML data
 
-    
+  
+
+  
+  
 
-    
 
 
 

-    Load HTML contents in the Timeline
+  Load HTML contents in the Timeline
 

 

 
 
 
 
\ No newline at end of file
diff --git a/examples/timeline/05_groups.html b/examples/timeline/05_groups.html
index da1c582d..a103d1a3 100644
--- a/examples/timeline/05_groups.html
+++ b/examples/timeline/05_groups.html
@@ -1,71 +1,72 @@
 
 
 
-    Timeline | Group example
+  Timeline | Group example
 
-    
+    #visualization {
+      box-sizing: border-box;
+      width: 100%;
+      height: 300px;
+    }
+  
 
-    
-    
+  
+  
 
-    
+  
+  
 
 
 

-    This example demonstrate using groups. Note that a DataSet is used for both
-    items and groups, allowing to dynamically add, update or remove both items
-    and groups via the DataSet.
+  This example demonstrate using groups. Note that a DataSet is used for both
+  items and groups, allowing to dynamically add, update or remove both items
+  and groups via the DataSet.
 

 

 
 
 
diff --git a/examples/timeline/index.html b/examples/timeline/index.html
index 937d5dab..91b28ffe 100644
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@@ -2,21 +2,21 @@
 
 
 
-    vis.js | timeline examples
+  vis.js | timeline examples
 
-    
+  
 
 
 
 
 
diff --git a/examples/timeline/requirejs/requirejs_example.html b/examples/timeline/requirejs/requirejs_example.html
index 764a75ba..d4e85f08 100644
--- a/examples/timeline/requirejs/requirejs_example.html
+++ b/examples/timeline/requirejs/requirejs_example.html
@@ -1,11 +1,13 @@
 
 
 
-    Timeline requirejs demo
+  Timeline requirejs demo
 
-    
+  
+
+  
 
 
-    

+

 
 
diff --git a/examples/timeline/requirejs/scripts/main.js b/examples/timeline/requirejs/scripts/main.js
index 15e1d872..ff6d5108 100644
--- a/examples/timeline/requirejs/scripts/main.js
+++ b/examples/timeline/requirejs/scripts/main.js
@@ -1,19 +1,19 @@
 require.config({
-    paths: {
-        vis: '../../../../vis'
-    }
+  paths: {
+    vis: '../../../../dist/vis'
+  }
 });
 
 require(['vis'], function (vis) {
-    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 vis.Timeline(container, data, options);
+  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 vis.Timeline(container, data, options);
 });
diff --git a/src/util.js b/src/util.js
index 67647a88..9036691e 100644
--- a/src/util.js
+++ b/src/util.js
@@ -671,31 +671,3 @@ util.option.asElement = function (value, defaultValue) {
 
   return value || defaultValue || null;
 };
-
-/**
- * load css from text
- * @param {String} css    Text containing css
- */
-util.loadCss = function (css) {
-  if (typeof document === 'undefined') {
-    return;
-  }
-
-  // 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);
-};
diff --git a/test/dataset.html b/test/dataset.html
index ceff8219..c18ce0b9 100644
--- a/test/dataset.html
+++ b/test/dataset.html
@@ -2,7 +2,7 @@
 
 
   
-  
+  
   
 
 
diff --git a/test/timeline.html b/test/timeline.html
index 471e41f7..0e22470a 100644
--- a/test/timeline.html
+++ b/test/timeline.html
@@ -3,7 +3,8 @@
 
   
   
-  
+  
+