Implemented option validator for Timeline

HISTORY.md

@@ -13,6 +13,7 @@ http://visjs.org
 
 ### Timeline
 
+- Integrated an option configurator and validator.
 - Implemented option `multiselect`, which is false by default.
 - Added method `setData({groups: groups, items: items})`.
 - Fixed range items not being displayed smaller than 10 pixels (twice the
@@ -92,7 +93,6 @@ http://visjs.org
 
 ### Timeline
 
-- Integrated an option configurator.
 - Implemented orientation option `'both'`, displaying a time axis both on top
   and bottom (#665).
 - Implemented creating new range items by dragging in an empty space with the

lib/timeline/Core.js

@@ -290,7 +290,6 @@ Core.prototype.setOptions = function (options) {
     this.components.forEach(function (component) {
       util.deepExtend(appliedOptions, component.options);
     });
-    console.log('options', appliedOptions)
     this.configurationSystem.setModuleOptions({global: appliedOptions});
   }
 

lib/timeline/Timeline.js

@@ -9,8 +9,10 @@ var TimeAxis = require('./component/TimeAxis');
 var CurrentTime = require('./component/CurrentTime');
 var CustomTime = require('./component/CustomTime');
 var ItemSet = require('./component/ItemSet');
-var ConfigurationSystem = require('../network/modules/ConfigurationSystem');
 
+var ConfigurationSystem = require('../network/modules/ConfigurationSystem');
+var Validator = require('../network/modules/Validator').default;
+var printStyle = require('../network/modules/Validator').printStyle;
 var allOptions = require('./options').allOptions;
 var configureOptions = require('./options').configureOptions;
 
@@ -151,6 +153,13 @@ Timeline.prototype.redraw = function() {
 };
 
 Timeline.prototype.setOptions = function (options) {
+  // validate options
+  let errorFound = Validator.validate(options, allOptions);
+  if (errorFound === true) {
+    options = {};
+    console.log('%cErrors have been found in the supplied options object. None of the options will be used.', printStyle);
+  }
+
   Core.prototype.setOptions.call(this, options);
 
   if ('type' in options) {
@@ -159,8 +168,10 @@ Timeline.prototype.setOptions = function (options) {
 
       // force recreation of all items
       var itemsData = this.itemsData;
-      this.setItems(null);      // remove all
-      this.setItems(itemsData); // add all
+      if (itemsData) {
+        this.setItems(null);      // remove all
+        this.setItems(itemsData); // add all
+      }
     }
   }
 };
@@ -339,9 +350,9 @@ Timeline.prototype.focus = function(id, options) {
  */
 Timeline.prototype.getItemRange = function() {
   // calculate min from start filed
-  var dataset = this.itemsData.getDataSet(),
-    min = null,
-    max = null;
+  var dataset = this.itemsData && this.itemsData.getDataSet();
+  var min = null;
+  var max = null;
 
   if (dataset) {
     // calculate the minimum value of the field 'start'

lib/timeline/component/TimeAxis.js

@@ -65,14 +65,16 @@ TimeAxis.prototype = new Component();
 TimeAxis.prototype.setOptions = function(options) {
   if (options) {
     // copy all options that we know
-    util.selectiveDeepExtend([
+    util.selectiveExtend([
       'showMinorLabels',
       'showMajorLabels',
       'hiddenDates',
-      'format',
       'timeAxis'
     ], this.options, options);
 
+    // deep copy the format options
+    util.selectiveDeepExtend(['format'], this.options, options);
+
     if ('orientation' in options) {
       if (typeof options.orientation === 'string') {
         this.options.orientation.axis = options.orientation;

lib/timeline/options.js

@@ -31,30 +31,33 @@ let allOptions = {
   align: {string},
   autoResize: {boolean},
   clickToUse: {boolean},
-  dataAttributes: {string, Array},
+  dataAttributes: {string, array},
   editable: {boolean, object},
-  end: {number, Date, string, moment},
+  end: {number, date, string, moment},
   format: {
     minorLabels: {
-      millisecond: {string},
-      second: {string},
-      minute: {string},
-      hour: {string},
-      weekday: {string},
-      day: {string},
-      month: {string},
-      year: {string}
+      millisecond: {string,undef},
+      second: {string,undef},
+      minute: {string,undef},
+      hour: {string,undef},
+      weekday: {string,undef},
+      day: {string,undef},
+      month: {string,undef},
+      year: {string,undef},
+      __type__: {object}
     },
     majorLabels: {
-      millisecond: {string},
-      second: {string},
-      minute: {string},
-      hour: {string},
-      weekday: {string},
-      day: {string},
-      month: {string},
-      year: {string}
-    }
+      millisecond: {string,undef},
+      second: {string,undef},
+      minute: {string,undef},
+      hour: {string,undef},
+      weekday: {string,undef},
+      day: {string,undef},
+      month: {string,undef},
+      year: {string,undef},
+      __type__: {object}
+    },
+    __type__: {object}
   },
   groupOrder: {string, fn},
   height: {string, number},
@@ -83,7 +86,7 @@ let allOptions = {
   onUpdate: {fn},
   onMove: {fn},
   onMoving: {fn},
-  onRename: {fn},
+  onRemove: {fn},
   order: {fn},
   orientation: {
     axis: {string},