Merge pull request #15 from yotamberk/fix-examples

Fix examples
yotamberk · Jul 18, 2018 · 27cafa3 · 27cafa3
2 parents 28ab469 + 94764de
commit 27cafa3
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 53 deletions.
diff --git a/dist/timeline.js b/dist/timeline.js
@@ -2,8 +2,8 @@
  * timeline plus
  * https://yotamberk.github.io/timeline-plus
  *
- * @version 1.0.1
- * @date    2018-07-03
+ * @version 2.0.0
+ * @date    2018-07-18
  *
  */
 
@@ -9724,9 +9724,10 @@ var Range = function (_Component) {
 
         var interval = me.end - me.start;
         var t = util.convert(new Date(), 'Date').valueOf();
+        var rollingModeOffset = me.options.rollingMode && me.options.rollingMode.offset || 0.5;
 
-        var start = t - interval * me.options.rollingMode.offset;
-        var end = t + interval * (1 - me.options.rollingMode.offset);
+        var start = t - interval * rollingModeOffset;
+        var end = t + interval * (1 - rollingModeOffset);
 
         var options = {
           animation: false
@@ -10253,7 +10254,8 @@ var Range = function (_Component) {
         // calculate center, the date to zoom around
         var pointerDate = void 0;
         if (this.rolling) {
-          pointerDate = this.start + (this.end - this.start) * this.options.rollingMode.offset;
+          var rollingModeOffset = this.options.rollingMode && this.options.rollingMode.offset || 0.5;
+          pointerDate = this.start + (this.end - this.start) * rollingModeOffset;
         } else {
           var pointer = this.getPointer({ x: event.clientX, y: event.clientY }, this.body.dom.center);
           pointerDate = this._pointerToDate(pointer);
@@ -17298,7 +17300,7 @@ var timeline = exports.timeline = {
 };
 
 // bundled external libraries
-var moment = exports.moment = __webpack_require__(8);
+var moment = exports.moment = __webpack_require__(8)['default'];
 
 var Hammer = exports.Hammer = __webpack_require__(16);
 var keycharm = exports.keycharm = __webpack_require__(73);
@@ -22989,18 +22991,12 @@ var Timeline = function (_Core) {
 
     var me = _this;
     _this.defaultOptions = {
-      start: null,
-      end: null,
       autoResize: true,
       orientation: {
         axis: 'bottom', // axis orientation: 'bottom', 'top', or 'both'
         item: 'bottom' // not relevant
       },
-      moment: _moment2['default'],
-      width: null,
-      height: null,
-      maxHeight: null,
-      minHeight: null
+      moment: _moment2['default']
     };
     _this.options = util.deepExtend({}, _this.defaultOptions);
 
@@ -23019,10 +23015,20 @@ var Timeline = function (_Core) {
       _this.options.rtl = options.rtl;
     }
 
-    _this.options.rollingMode = options && options.rollingMode;
-    _this.options.onInitialDrawComplete = options && options.onInitialDrawComplete;
-    _this.options.onTimeout = options && options.onTimeout;
-    _this.options.loadingScreenTemplate = options && options.loadingScreenTemplate;
+    if (options) {
+      if (options.rollingMode) {
+        _this.options.rollingMode = options.rollingMode;
+      }
+      if (options.onInitialDrawComplete) {
+        _this.options.onInitialDrawComplete = options.onInitialDrawComplete;
+      }
+      if (options.onTimeout) {
+        _this.options.onTimeout = options.onTimeout;
+      }
+      if (options.loadingScreenTemplate) {
+        _this.options.loadingScreenTemplate = options.loadingScreenTemplate;
+      }
+    }
 
     // Prepare loading screen
     var loadingScreenFragment = document.createElement('div');

diff --git a/dist/timeline.js.map b/dist/timeline.js.map
diff --git a/examples/editing/tooltipOnItemChange.html b/examples/editing/tooltipOnItemChange.html
@@ -2,6 +2,7 @@
 <head>
   <title>Timeline | Tooltip on item onUpdateTime Option</title>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
   <script src="../../dist/timeline.js"></script>
   <link href="../../dist/timeline.css" rel="stylesheet" type="text/css" />
@@ -42,7 +43,7 @@ <h2>With groups</h2>
 
 
   for (var order = 0; order < numberOfItems; order++) {
-    var date = timeline.moment();
+    var date = moment();
 
 
     date.add(Math.round(Math.random() * 2), 'hour');

diff --git a/examples/groups/verticalItemsHide.html b/examples/groups/verticalItemsHide.html
@@ -31,7 +31,6 @@ <h3 id="visibleItemsContainer"></h3>
 <script>
   function showVisibleItems() {
     var a = timeline.getVisibleItems();
-    console.log(a);
     document.getElementById("visibleItemsContainer").innerHTML = ""
     document.getElementById("visibleItemsContainer").innerHTML += a;
   };
@@ -108,7 +107,6 @@ <h3 id="visibleItemsContainer"></h3>
     end: new Date(1000*60*60*24 + (new Date()).valueOf()),
   };
 
-
   // create a Timeline
   var container = document.getElementById('mytimeline');
   timeline = new timeline.Timeline(container, null, options);

diff --git a/examples/items/itemOrdering.html b/examples/items/itemOrdering.html
@@ -12,6 +12,7 @@
     }
   </style>
 
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
   <script src="../../dist/timeline.js"></script>
   <link href="../../dist/timeline.min.css" rel="stylesheet" type="text/css" />
 
@@ -45,7 +46,7 @@ <h1>Item ordering</h1>
 
   // Create a DataSet (allows two way data-binding)
   var items = new timeline.DataSet();
-  var date = timeline.moment('2015-03-02');
+  var date = moment('2015-03-02');
   for (var i = 0; i < 100; i++) {
     date.add(Math.round(Math.random() * 2), 'hour');
     items.add({

diff --git a/examples/items/visibleFrameTemplateContent.html b/examples/items/visibleFrameTemplateContent.html
@@ -45,7 +45,7 @@
     {id: 1, value: 0.2, content: 'item 1', start: '2014-04-20', end: '2014-04-26'},
     {id: 2, value: 0.6, content: 'item 2', start: '2014-05-14', end: '2014-05-18'},
     {id: 3, type: 'point', content: 'item 3', start: '2014-04-15', end: '2014-05-18'},
-    {id: 4, content: 'item 4 with visibleFrameTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFrameTemplate: '<div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80 per cent<label></div>'
+    {id: 4, content: 'item 4 with visibleFrameTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFrameTemplate: '<div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80%<label></div>'
     }
   ]);
 

diff --git a/examples/other/loadingScreen.html b/examples/other/loadingScreen.html
@@ -47,6 +47,8 @@ <h1>Timeline with loading screen</h1>
   // create visualization
   var container = document.getElementById('visualization');
   var options = {
+    start: new Date(),
+    end: new Date(100000*60*60*24 + (new Date()).valueOf()),
     loadingScreenTemplate: function() {
       return '<h1>Loading...</h1>'
     }

diff --git a/examples/other/onTimeout.html b/examples/other/onTimeout.html
@@ -40,7 +40,7 @@
   var options = {
     stack: true,
     onTimeout: {
-      timeoutMs: 1000,
+      timeoutMs: 10,
       callback: function(callback) {
         var didUserCancel;
         var didUserCancel = confirm("Too many items loaded! Would you like to continue rendering (this might take a while)?");

diff --git a/index.js b/index.js
@@ -41,7 +41,7 @@ export var timeline = {
 };
 
 // bundled external libraries
-export var moment = require('./lib/module/moment');
+export var moment = require('./lib/module/moment').default;
 
 export var Hammer = require('./lib/module/hammer');
 export var keycharm = require('keycharm');
diff --git a/lib/timeline/.eslintrc b/lib/timeline/.eslintrc
@@ -18,21 +18,7 @@
     "max-statements": [2, 115],
     "no-unreachable": 1,
     "no-useless-escape": 0,
-    "no-console": 0,
-    "require-jsdoc": ["error", {
-        "require": {
-            "FunctionDeclaration": true,
-            "MethodDefinition": true,
-            "ClassDeclaration": true,
-            "ArrowFunctionExpression": true
-        }
-    }],
-    "valid-jsdoc": [2, {
-      "requireReturnDescription": false,
-      "requireReturn": false,
-      "requireParamDescription": false,
-      "requireReturnType": true
-      }],
+    "no-console": 0
     }
     // To flag presence of console.log without breaking linting:
     //"no-console": ["warn", { allow: ["warn", "error"] }],

diff --git a/lib/timeline/Range.js b/lib/timeline/Range.js
@@ -131,9 +131,10 @@ export default class Range extends Component {
 
       let interval = me.end - me.start;
       const t = util.convert(new Date(), 'Date').valueOf();
+      const rollingModeOffset = me.options.rollingMode && me.options.rollingMode.offset || 0.5
 
-      const start = t - interval * (me.options.rollingMode.offset);
-      const end = t + interval * (1 - me.options.rollingMode.offset);
+      const start = t - interval * (rollingModeOffset);
+      const end = t + interval * (1 - rollingModeOffset);
 
       const options = {
         animation: false
@@ -643,7 +644,8 @@ export default class Range extends Component {
       // calculate center, the date to zoom around
       let pointerDate;
       if (this.rolling) {
-        pointerDate = this.start + ((this.end - this.start) * this.options.rollingMode.offset);
+        const rollingModeOffset = this.options.rollingMode && this.options.rollingMode.offset || 0.5;
+        pointerDate = this.start + ((this.end - this.start) * rollingModeOffset);
       } else {
         const pointer = this.getPointer({x: event.clientX, y: event.clientY}, this.body.dom.center);
         pointerDate = this._pointerToDate(pointer);

diff --git a/lib/timeline/Timeline.js b/lib/timeline/Timeline.js
@@ -50,18 +50,12 @@ export default class Timeline extends Core {
 
     const me = this;
     this.defaultOptions = {
-      start: null,
-      end:   null,
       autoResize: true,
       orientation: {
         axis: 'bottom',   // axis orientation: 'bottom', 'top', or 'both'
         item: 'bottom'    // not relevant
       },
       moment,
-      width: null,
-      height: null,
-      maxHeight: null,
-      minHeight: null,
     };
     this.options = util.deepExtend({}, this.defaultOptions);
 
@@ -80,10 +74,12 @@ export default class Timeline extends Core {
       this.options.rtl = options.rtl;
     }
 
-    this.options.rollingMode = options && options.rollingMode;
-    this.options.onInitialDrawComplete = options && options.onInitialDrawComplete;
-    this.options.onTimeout = options && options.onTimeout;
-    this.options.loadingScreenTemplate = options && options.loadingScreenTemplate;
+    if (options) {
+      if (options.rollingMode) { this.options.rollingMode = options.rollingMode; }
+      if (options.onInitialDrawComplete) { this.options.onInitialDrawComplete = options.onInitialDrawComplete; }
+      if (options.onTimeout) { this.options.onTimeout = options.onTimeout; }
+      if (options.loadingScreenTemplate) { this.options.loadingScreenTemplate = options.loadingScreenTemplate; }
+    }
 
     // Prepare loading screen
     const loadingScreenFragment = document.createElement('div');