vis-rails 0.0.6 → 1.0.0

data/vendor/assets/vis/timeline/component/Component.js

@@ -4,17 +4,18 @@
 function Component () {
   this.id = null;
   this.parent = null;
-  this.depends = null;
-  this.controller = null;
+  this.childs = null;
   this.options = null;
 
-  this.frame = null; // main DOM element
   this.top = 0;
   this.left = 0;
   this.width = 0;
   this.height = 0;
 }
 
+// Turn the Component into an event emitter
+Emitter(Component.prototype);
+
 /**
  * Set parameters for the frame. Parameters will be merged in current parameter
  * set.
@@ -29,10 +30,7 @@ Component.prototype.setOptions = function setOptions(options) {
   if (options) {
     util.extend(this.options, options);
 
-    if (this.controller) {
-      this.requestRepaint();
-      this.requestReflow();
-    }
+    this.repaint();
   }
 };
 
@@ -54,46 +52,18 @@ Component.prototype.getOption = function getOption(name) {
   return value;
 };
 
-/**
- * Set controller for this component, or remove current controller by passing
- * null as parameter value.
- * @param {Controller | null} controller
- */
-Component.prototype.setController = function setController (controller) {
-  this.controller = controller || null;
-};
-
-/**
- * Get controller of this component
- * @return {Controller} controller
- */
-Component.prototype.getController = function getController () {
-  return this.controller;
-};
-
-/**
- * Get the container element of the component, which can be used by a child to
- * add its own widgets. Not all components do have a container for childs, in
- * that case null is returned.
- * @returns {HTMLElement | null} container
- */
-// TODO: get rid of the getContainer and getFrame methods, provide these via the options
-Component.prototype.getContainer = function getContainer() {
-  // should be implemented by the component
-  return null;
-};
-
 /**
  * Get the frame element of the component, the outer HTML DOM element.
  * @returns {HTMLElement | null} frame
  */
 Component.prototype.getFrame = function getFrame() {
-  return this.frame;
+  // should be implemented by the component
+  return null;
 };
 
 /**
  * Repaint the component
- * @return {Boolean} changed
+ * @return {boolean} Returns true if the component is resized
  */
 Component.prototype.repaint = function repaint() {
   // should be implemented by the component
@@ -101,64 +71,16 @@ Component.prototype.repaint = function repaint() {
 };
 
 /**
- * Reflow the component
- * @return {Boolean} resized
+ * Test whether the component is resized since the last time _isResized() was
+ * called.
+ * @return {Boolean} Returns true if the component is resized
+ * @protected
  */
-Component.prototype.reflow = function reflow() {
-  // should be implemented by the component
-  return false;
-};
+Component.prototype._isResized = function _isResized() {
+  var resized = (this._previousWidth !== this.width || this._previousHeight !== this.height);
 
-/**
- * Hide the component from the DOM
- * @return {Boolean} changed
- */
-Component.prototype.hide = function hide() {
-  if (this.frame && this.frame.parentNode) {
-    this.frame.parentNode.removeChild(this.frame);
-    return true;
-  }
-  else {
-    return false;
-  }
-};
-
-/**
- * Show the component in the DOM (when not already visible).
- * A repaint will be executed when the component is not visible
- * @return {Boolean} changed
- */
-Component.prototype.show = function show() {
-  if (!this.frame || !this.frame.parentNode) {
-    return this.repaint();
-  }
-  else {
-    return false;
-  }
-};
+  this._previousWidth = this.width;
+  this._previousHeight = this.height;
 
-/**
- * Request a repaint. The controller will schedule a repaint
- */
-Component.prototype.requestRepaint = function requestRepaint() {
-  if (this.controller) {
-    this.controller.emit('request-repaint');
-  }
-  else {
-    throw new Error('Cannot request a repaint: no controller configured');
-    // TODO: just do a repaint when no parent is configured?
-  }
-};
-
-/**
- * Request a reflow. The controller will schedule a reflow
- */
-Component.prototype.requestReflow = function requestReflow() {
-  if (this.controller) {
-    this.controller.emit('request-reflow');
-  }
-  else {
-    throw new Error('Cannot request a reflow: no controller configured');
-    // TODO: just do a reflow when no parent is configured?
-  }
+  return resized;
 };

data/vendor/assets/vis/timeline/component/CurrentTime.js

@@ -1,23 +1,22 @@
 /**
  * A current time bar
- * @param {Component} parent
- * @param {Component[]} [depends]   Components on which this components depends
- *                                  (except for the parent)
+ * @param {Range} range
  * @param {Object} [options]        Available parameters:
  *                                  {Boolean} [showCurrentTime]
  * @constructor CurrentTime
  * @extends Component
  */
 
-function CurrentTime (parent, depends, options) {
+function CurrentTime (range, options) {
   this.id = util.randomUUID();
-  this.parent = parent;
-  this.depends = depends;
 
+  this.range = range;
   this.options = options || {};
   this.defaultOptions = {
     showCurrentTime: false
   };
+
+  this._create();
 }
 
 CurrentTime.prototype = new Component();
@@ -25,77 +24,73 @@ CurrentTime.prototype = new Component();
 CurrentTime.prototype.setOptions = Component.prototype.setOptions;
 
 /**
- * Get the container element of the bar, which can be used by a child to
- * add its own widgets.
- * @returns {HTMLElement} container
+ * Create the HTML DOM for the current time bar
+ * @private
  */
-CurrentTime.prototype.getContainer = function () {
-  return this.frame;
+CurrentTime.prototype._create = function _create () {
+  var bar = document.createElement('div');
+  bar.className = 'currenttime';
+  bar.style.position = 'absolute';
+  bar.style.top = '0px';
+  bar.style.height = '100%';
+
+  this.bar = bar;
+};
+
+/**
+ * Get the frame element of the current time bar
+ * @returns {HTMLElement} frame
+ */
+CurrentTime.prototype.getFrame = function getFrame() {
+  return this.bar;
 };
 
 /**
  * Repaint the component
- * @return {Boolean} changed
+ * @return {boolean} Returns true if the component is resized
  */
-CurrentTime.prototype.repaint = function () {
-  var bar = this.frame,
-      parent = this.parent,
-      parentContainer = parent.parent.getContainer();
+CurrentTime.prototype.repaint = function repaint() {
+  var parent = this.parent;
 
-  if (!parent) {
-    throw new Error('Cannot repaint bar: no parent attached');
-  }
+  var now = new Date();
+  var x = this.options.toScreen(now);
 
-  if (!parentContainer) {
-    throw new Error('Cannot repaint bar: parent has no container element');
-  }
+  this.bar.style.left = x + 'px';
+  this.bar.title = 'Current time: ' + now;
 
-  if (!this.getOption('showCurrentTime')) {
-    if (bar) {
-      parentContainer.removeChild(bar);
-      delete this.frame;
-    }
+  return false;
+};
 
-    return false;
-  }
+/**
+ * Start auto refreshing the current time bar
+ */
+CurrentTime.prototype.start = function start() {
+  var me = this;
 
-  if (!bar) {
-    bar = document.createElement('div');
-    bar.className = 'currenttime';
-    bar.style.position = 'absolute';
-    bar.style.top = '0px';
-    bar.style.height = '100%';
+  function update () {
+    me.stop();
 
-    parentContainer.appendChild(bar);
-    this.frame = bar;
-  }
+    // determine interval to refresh
+    var scale = me.range.conversion(me.parent.width).scale;
+    var interval = 1 / scale / 10;
+    if (interval < 30)   interval = 30;
+    if (interval > 1000) interval = 1000;
 
-  if (!parent.conversion) {
-    parent._updateConversion();
-  }
+    me.repaint();
 
-  var now = new Date();
-  var x = parent.toScreen(now);
+    // start a timer to adjust for the new time
+    me.currentTimeTimer = setTimeout(update, interval);
+  }
 
-  bar.style.left = x + 'px';
-  bar.title = 'Current time: ' + now;
+  update();
+};
 
-  // start a timer to adjust for the new time
+/**
+ * Stop auto refreshing the current time bar
+ */
+CurrentTime.prototype.stop = function stop() {
   if (this.currentTimeTimer !== undefined) {
     clearTimeout(this.currentTimeTimer);
     delete this.currentTimeTimer;
   }
-
-  var timeline = this;
-  var interval = 1 / parent.conversion.scale / 2;
-
-  if (interval < 30) {
-    interval = 30;
-  }
-
-  this.currentTimeTimer = setTimeout(function() {
-    timeline.repaint();
-  }, interval);
-
-  return false;
 };

data/vendor/assets/vis/timeline/component/CustomTime.js

@@ -1,18 +1,13 @@
 /**
  * A custom time bar
- * @param {Component} parent
- * @param {Component[]} [depends]   Components on which this components depends
- *                                  (except for the parent)
  * @param {Object} [options]        Available parameters:
  *                                  {Boolean} [showCustomTime]
  * @constructor CustomTime
  * @extends Component
  */
 
-function CustomTime (parent, depends, options) {
+function CustomTime (options) {
   this.id = util.randomUUID();
-  this.parent = parent;
-  this.depends = depends;
 
   this.options = options || {};
   this.defaultOptions = {
@@ -21,85 +16,61 @@ function CustomTime (parent, depends, options) {
 
   this.customTime = new Date();
   this.eventParams = {}; // stores state parameters while dragging the bar
+
+  // create the DOM
+  this._create();
 }
 
 CustomTime.prototype = new Component();
 
-Emitter(CustomTime.prototype);
-
 CustomTime.prototype.setOptions = Component.prototype.setOptions;
 
 /**
- * Get the container element of the bar, which can be used by a child to
- * add its own widgets.
- * @returns {HTMLElement} container
+ * Create the DOM for the custom time
+ * @private
+ */
+CustomTime.prototype._create = function _create () {
+  var bar = document.createElement('div');
+  bar.className = 'customtime';
+  bar.style.position = 'absolute';
+  bar.style.top = '0px';
+  bar.style.height = '100%';
+  this.bar = bar;
+
+  var drag = document.createElement('div');
+  drag.style.position = 'relative';
+  drag.style.top = '0px';
+  drag.style.left = '-10px';
+  drag.style.height = '100%';
+  drag.style.width = '20px';
+  bar.appendChild(drag);
+
+  // attach event listeners
+  this.hammer = Hammer(bar, {
+    prevent_default: true
+  });
+  this.hammer.on('dragstart', this._onDragStart.bind(this));
+  this.hammer.on('drag',      this._onDrag.bind(this));
+  this.hammer.on('dragend',   this._onDragEnd.bind(this));
+};
+
+/**
+ * Get the frame element of the custom time bar
+ * @returns {HTMLElement} frame
  */
-CustomTime.prototype.getContainer = function () {
-  return this.frame;
+CustomTime.prototype.getFrame = function getFrame() {
+  return this.bar;
 };
 
 /**
  * Repaint the component
- * @return {Boolean} changed
+ * @return {boolean} Returns true if the component is resized
  */
 CustomTime.prototype.repaint = function () {
-  var bar = this.frame,
-      parent = this.parent;
-
-  if (!parent) {
-    throw new Error('Cannot repaint bar: no parent attached');
-  }
-
-  var parentContainer = parent.parent.getContainer();
-  if (!parentContainer) {
-    throw new Error('Cannot repaint bar: parent has no container element');
-  }
-
-  if (!this.getOption('showCustomTime')) {
-    if (bar) {
-      parentContainer.removeChild(bar);
-      delete this.frame;
-    }
-
-    return false;
-  }
-
-  if (!bar) {
-    bar = document.createElement('div');
-    bar.className = 'customtime';
-    bar.style.position = 'absolute';
-    bar.style.top = '0px';
-    bar.style.height = '100%';
-
-    parentContainer.appendChild(bar);
-
-    var drag = document.createElement('div');
-    drag.style.position = 'relative';
-    drag.style.top = '0px';
-    drag.style.left = '-10px';
-    drag.style.height = '100%';
-    drag.style.width = '20px';
-    bar.appendChild(drag);
-
-    this.frame = bar;
-
-    // attach event listeners
-    this.hammer = Hammer(bar, {
-      prevent_default: true
-    });
-    this.hammer.on('dragstart', this._onDragStart.bind(this));
-    this.hammer.on('drag',      this._onDrag.bind(this));
-    this.hammer.on('dragend',   this._onDragEnd.bind(this));
-  }
-
-  if (!parent.conversion) {
-    parent._updateConversion();
-  }
-
-  var x = parent.toScreen(this.customTime);
-
-  bar.style.left = x + 'px';
-  bar.title = 'Time: ' + this.customTime;
+  var x = this.options.toScreen(this.customTime);
+
+  this.bar.style.left = x + 'px';
+  this.bar.title = 'Time: ' + this.customTime;
 
   return false;
 };
@@ -127,6 +98,7 @@ CustomTime.prototype.getCustomTime = function() {
  * @private
  */
 CustomTime.prototype._onDragStart = function(event) {
+  this.eventParams.dragging = true;
   this.eventParams.customTime = this.customTime;
 
   event.stopPropagation();
@@ -139,18 +111,18 @@ CustomTime.prototype._onDragStart = function(event) {
  * @private
  */
 CustomTime.prototype._onDrag = function (event) {
+  if (!this.eventParams.dragging) return;
+
   var deltaX = event.gesture.deltaX,
-      x = this.parent.toScreen(this.eventParams.customTime) + deltaX,
-      time = this.parent.toTime(x);
+      x = this.options.toScreen(this.eventParams.customTime) + deltaX,
+      time = this.options.toTime(x);
 
   this.setCustomTime(time);
 
   // fire a timechange event
-  if (this.controller) {
-    this.controller.emit('timechange', {
-      time: this.customTime
-    })
-  }
+  this.emit('timechange', {
+    time: new Date(this.customTime.valueOf())
+  });
 
   event.stopPropagation();
   event.preventDefault();
@@ -162,12 +134,12 @@ CustomTime.prototype._onDrag = function (event) {
  * @private
  */
 CustomTime.prototype._onDragEnd = function (event) {
+  if (!this.eventParams.dragging) return;
+
   // fire a timechanged event
-  if (this.controller) {
-    this.controller.emit('timechanged', {
-      time: this.customTime
-    })
-  }
+  this.emit('timechanged', {
+    time: new Date(this.customTime.valueOf())
+  });
 
   event.stopPropagation();
   event.preventDefault();