Added HTML data example

11 years ago · e0aa8eec53
--- a/HISTORY.md
+++ b/HISTORY.md
@ -2,19 +2,25 @@ vis.js history
 http://visjs.org


 ## 2012-04-25, version 0.0.7
 ## 2013-05-03, version 0.0.8

 - Performance improvements: only visible items are rendered.
 - Minor bug fixes and improvements.


 ## 2013-04-25, version 0.0.7

 - Sanitized the published packages on npm and bower.


 ## 2012-04-25, version 0.0.6
 ## 2013-04-25, version 0.0.6

 - Css is now packaged in the javascript file, and automatically loaded.
 - The library uses node style dependency management for modules now, used
  with Browserify.


 ## 2012-04-16, version 0.0.5
 ## 2013-04-16, version 0.0.5

 - First working version of the Timeline
 - Website created.
--- a/examples/timeline/03_much_data.html
+++ b/examples/timeline/03_much_data.html
@ -51,6 +51,7 @@
    var options = {
        start: now.clone().add('days', -3),
        end: now.clone().add('days', 11),
        zoomMin: 1000 * 60 * 60 * 24,          // a day
        zoomMax: 1000 * 60 * 60 * 24 * 30 * 3  // three months
        //maxHeight: 300,
        //height: '300px',
--- a/examples/timeline/04_html_data.html
+++ b/examples/timeline/04_html_data.html
@ -0,0 +1,69 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | HTML data</title>

    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }
        span {
            color: red;
        }
        span.large {
            font-size: 200%;
        }
    </style>

    <script src="../../vis.js"></script>
 </head>
 <body>
 <p>
    Load HTML contents in the Timeline
 </p>
 <div id="visualization"></div>

 <script>
    // create a couple of HTML items in various ways

    var item1 = document.createElement('div');
    item1.appendChild(document.createTextNode('item 1'));

    var item2 = document.createElement('div');
    item2.innerHTML = '<span>item 2</span>';

    var item3 = document.createElement('div');
    var span3 = document.createElement('span');
    span3.className = 'large';
    span3.appendChild(document.createTextNode('item 3'));
    item3.appendChild(span3);

    var item4 = 'item <span class="large">4</span>';

    var item5 = document.createElement('div');
    item5.appendChild(document.createTextNode('item 5'));
    item5.appendChild(document.createElement('br'));
    var img5 = document.createElement('img');
    img5.src = 'img/attachment-icon.png';
    img5.style.width = '48px';
    img5.style.height = '48px';
    item5.appendChild(img5);

    var item6 = 'item6<br><img src="img/comments-icon.png" style="width: 48px; height: 48px;">';

    // create data and a Timeline
    var container = document.getElementById('visualization');
    var data = [
        {id: 1, content: item1, start: '2013-04-20'},
        {id: 2, content: item2, start: '2013-04-14'},
        {id: 3, content: item3, start: '2013-04-18'},
        {id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
        {id: 5, content: item5, start: '2013-04-25'},
        {id: 6, content: item6, start: '2013-04-27'}
    ];
    var options = {};
    var timeline = new vis.Timeline(container, data, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/img/Hardware-Mobile-Phone-icon.png
+++ b/examples/timeline/img/Hardware-Mobile-Phone-icon.png
--- a/examples/timeline/img/attachment-icon.png
+++ b/examples/timeline/img/attachment-icon.png
--- a/examples/timeline/img/blog-post-edit-icon.png
+++ b/examples/timeline/img/blog-post-edit-icon.png
--- a/examples/timeline/img/comments-icon.png
+++ b/examples/timeline/img/comments-icon.png
--- a/examples/timeline/img/community-users-icon.png
+++ b/examples/timeline/img/community-users-icon.png
--- a/examples/timeline/img/license.txt
+++ b/examples/timeline/img/license.txt
@ -0,0 +1,17 @@
 IMAGE LICENSES

 REFRESH CL
 http://www.iconarchive.com/category/system/refresh-cl-icons-by-tpdkdesign.net.html

 License: Free for non-commercial use.
 http://www.iconarchive.com/icons/tpdkdesign.net/refresh-cl/readme_eng.txt



 AESTHETICA 2
 http://www.iconarchive.com/category/application/aesthetica-2-icons-by-dryicons.html

 License: 
 DryIcons Terms of Use
 http://dryicons.com/terms/

--- a/examples/timeline/img/license_aesthetica-2.txt
+++ b/examples/timeline/img/license_aesthetica-2.txt
@ -0,0 +1,36 @@
 Aesthetica Icon Set, version 2.0
 http://dryicons.com/free-icons/preview/aesthetica-version-2/

 Information
 ----------------------

 This icon set contains 181 quality icons in the following formats:
 	Transparent PNG
 		16 x 16 px
 		24 x 24 px
 		32 x 32 px
 		48 x 48 px
 		128 x 128 px
 	


 Licensing
 ----------------------

 The usage of DryIcons' work (icons, icon sets and graphics) is limited to the terms of the "Free License" and "Commercial License" use.
 The DryIcons Free License means that you can use our icons, icon sets and graphics in any publicly accesible web site, web application or any form of presentation publicly accessible through the World Wide Web only according to the DryIcons Free License Terms and Conditions:

 * You must put a back link with credits to http://dryicons.com on every page where DryIcons' Works are used (example: Icons by http://dryicons.com);

 * You must include the correct back link to DryIcons website, which is: http://dryicons.com;

 * You must place the link on an easy-to-see, recognizable place, so there is no confusion about the Original Author of the Works (DryIcons);

 * When copying, or paraphrasing description text (or title) on one of the Works, you must make sure there are no spelling mistakes;

 * Do not try to take credit or imply in any way that you and not DryIcons is the Original Author of the Works (icons, icon sets and graphics).

 For a more detailed look at our Free License Agreement, please follow the link: http://dryicons.com/terms/#free-license


 The DryIcons Commercial License means that you can use our Free Icon Sets and Free Graphics without being obligated to put a back link to DryIcons.com for a certain fee. After you complete yourpayment transaction DryIcons grants you a Commercial License.
--- a/examples/timeline/img/license_refresh-cl.txt
+++ b/examples/timeline/img/license_refresh-cl.txt
@ -0,0 +1,26 @@
 RefreshCL Icon Pack by TPDK ©2005 www.tpdkdesign.net
 All rights reserved.
 version 1.0  2005/18/11


 Terms of use
 Theses icons are copyrighted, and for personal use only.
 Until now, COMMERCIAL USE is strictly forbidden.

 You cannot (non-exhaustive list) :
 - Use my icons in commercial website
 - Use my icons in a professional website layout
 - Sell or distribute those icons

 For any other use, such as :
 - using in non-commercial website
 - using icon in free software under GPL licence
 you need my authorization to use them. If you have my permission, you need to credit me in your terms and put a link to my website.
 I would not be responsible fo any damage you may encounter while using this product.
 For any question or request about the pack, please send me an email to tpdk@tpdkdesign.net.

 Special thanks to customxp's & crystalxp's teams and members for help and support ;)
 http://crystalxp.net
 http://customxp.net
 http://pngfactory.net
 visit my deviantart webpage : http://tpdkcasimir.deviantart.com/
--- a/examples/timeline/img/mail-icon.png
+++ b/examples/timeline/img/mail-icon.png
--- a/examples/timeline/img/notes-edit-icon.png
+++ b/examples/timeline/img/notes-edit-icon.png
--- a/examples/timeline/img/product-icon.png
+++ b/examples/timeline/img/product-icon.png
--- a/examples/timeline/img/truck-icon.png
+++ b/examples/timeline/img/truck-icon.png
--- a/src/util.js
+++ b/src/util.js
@ -95,11 +95,9 @@ util.extend = function (a, b) {
 /**
 * Cast an object to another type
 * @param {Boolean | Number | String | Date | Moment | Null | undefined} object
 * @param {String | function | undefined} type   Name of the type or a cast
 *                                               function. Available types:
 *                                               'Boolean', 'Number', 'String',
 *                                               'Date', 'Moment', ISODate',
 *                                               'ASPDate'.
 * @param {String | undefined} type   Name of the type. Available types:
 *                                    'Boolean', 'Number', 'String',
 *                                    'Date', 'Moment', ISODate', 'ASPDate'.
 * @return {*} object
 * @throws Error
 */
@ -116,8 +114,8 @@ util.cast = function cast(object, type) {
    if (!type) {
        return object;
    }
    if (typeof type == 'function') {
        return type(object);
    if (!(typeof type === 'string') && !(type instanceof String)) {
        throw new Error('Type must be a string');
    }

    //noinspection FallthroughInSwitchStatementJS
--- a/vis.js
+++ b/vis.js
@ -126,11 +126,9 @@ util.extend = function (a, b) {
 /**
 * Cast an object to another type
 * @param {Boolean | Number | String | Date | Moment | Null | undefined} object
 * @param {String | function | undefined} type   Name of the type or a cast
 *                                               function. Available types:
 *                                               'Boolean', 'Number', 'String',
 *                                               'Date', 'Moment', ISODate',
 *                                               'ASPDate'.
 * @param {String | undefined} type   Name of the type. Available types:
 *                                    'Boolean', 'Number', 'String',
 *                                    'Date', 'Moment', ISODate', 'ASPDate'.
 * @return {*} object
 * @throws Error
 */
@ -147,8 +145,8 @@ util.cast = function cast(object, type) {
    if (!type) {
        return object;
    }
    if (typeof type == 'function') {
        return type(object);
    if (!(typeof type === 'string') && !(type instanceof String)) {
        throw new Error('Type must be a string');
    }

    //noinspection FallthroughInSwitchStatementJS