vis-rails 0.0.4 → 0.0.5

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

@@ -20,7 +20,6 @@ function Component () {
  * set.
  * @param {Object} options  Available parameters:
  *                          {String | function} [className]
- *                          {EventBus} [eventBus]
  *                          {String | Number | function} [left]
  *                          {String | Number | function} [top]
  *                          {String | Number | function} [width]
@@ -55,6 +54,23 @@ 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
@@ -126,7 +142,7 @@ Component.prototype.show = function show() {
  */
 Component.prototype.requestRepaint = function requestRepaint() {
   if (this.controller) {
-    this.controller.requestRepaint();
+    this.controller.emit('request-repaint');
   }
   else {
     throw new Error('Cannot request a repaint: no controller configured');
@@ -139,7 +155,7 @@ Component.prototype.requestRepaint = function requestRepaint() {
  */
 Component.prototype.requestReflow = function requestReflow() {
   if (this.controller) {
-    this.controller.requestReflow();
+    this.controller.emit('request-reflow');
   }
   else {
     throw new Error('Cannot request a reflow: no controller configured');

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

@@ -56,7 +56,7 @@ CurrentTime.prototype.repaint = function () {
       delete this.frame;
     }
 
-    return;
+    return false;
   }
 
   if (!bar) {

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

@@ -19,12 +19,14 @@ function CustomTime (parent, depends, options) {
     showCustomTime: false
   };
 
-  this.listeners = [];
   this.customTime = new Date();
+  this.eventParams = {}; // stores state parameters while dragging the bar
 }
 
 CustomTime.prototype = new Component();
 
+Emitter(CustomTime.prototype);
+
 CustomTime.prototype.setOptions = Component.prototype.setOptions;
 
 /**
@@ -42,13 +44,13 @@ CustomTime.prototype.getContainer = function () {
  */
 CustomTime.prototype.repaint = function () {
   var bar = this.frame,
-      parent = this.parent,
-      parentContainer = parent.parent.getContainer();
+      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');
   }
@@ -59,7 +61,7 @@ CustomTime.prototype.repaint = function () {
       delete this.frame;
     }
 
-    return;
+    return false;
   }
 
   if (!bar) {
@@ -81,7 +83,13 @@ CustomTime.prototype.repaint = function () {
 
     this.frame = bar;
 
-    this.subscribe(this, 'movetime');
+    // 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) {
@@ -100,7 +108,7 @@ CustomTime.prototype.repaint = function () {
  * Set custom time.
  * @param {Date} time
  */
-CustomTime.prototype._setCustomTime = function(time) {
+CustomTime.prototype.setCustomTime = function(time) {
   this.customTime = new Date(time.valueOf());
   this.repaint();
 };
@@ -109,147 +117,58 @@ CustomTime.prototype._setCustomTime = function(time) {
  * Retrieve the current custom time.
  * @return {Date} customTime
  */
-CustomTime.prototype._getCustomTime = function() {
+CustomTime.prototype.getCustomTime = function() {
   return new Date(this.customTime.valueOf());
 };
 
-/**
- * Add listeners for mouse and touch events to the component
- * @param {Component} component
- */
-CustomTime.prototype.subscribe = function (component, event) {
-  var me = this;
-  var listener = {
-    component: component,
-    event: event,
-    callback: function (event) {
-      me._onMouseDown(event, listener);
-    },
-    params: {}
-  };
-
-  component.on('mousedown', listener.callback);
-  me.listeners.push(listener);
-
-};
-
-/**
- * Event handler
- * @param {String} event       name of the event, for example 'click', 'mousemove'
- * @param {function} callback  callback handler, invoked with the raw HTML Event
- *                             as parameter.
- */
-CustomTime.prototype.on = function (event, callback) {
-  var bar = this.frame;
-  if (!bar) {
-    throw new Error('Cannot add event listener: no parent attached');
-  }
-
-  events.addListener(this, event, callback);
-  util.addEventListener(bar, event, callback);
-};
-
 /**
  * Start moving horizontally
  * @param {Event} event
- * @param {Object} listener   Listener containing the component and params
  * @private
  */
-CustomTime.prototype._onMouseDown = function(event, listener) {
-  event = event || window.event;
-  var params = listener.params;
-
-  // only react on left mouse button down
-  var leftButtonDown = event.which ? (event.which == 1) : (event.button == 1);
-  if (!leftButtonDown) {
-    return;
-  }
-
-  // get mouse position
-  params.mouseX = util.getPageX(event);
-  params.moved = false;
-
-  params.customTime = this.customTime;
-
-  // add event listeners to handle moving the custom time bar
-  var me = this;
-  if (!params.onMouseMove) {
-    params.onMouseMove = function (event) {
-      me._onMouseMove(event, listener);
-    };
-    util.addEventListener(document, 'mousemove', params.onMouseMove);
-  }
-  if (!params.onMouseUp) {
-    params.onMouseUp = function (event) {
-      me._onMouseUp(event, listener);
-    };
-    util.addEventListener(document, 'mouseup', params.onMouseUp);
-  }
+CustomTime.prototype._onDragStart = function(event) {
+  this.eventParams.customTime = this.customTime;
 
-  util.stopPropagation(event);
-  util.preventDefault(event);
+  event.stopPropagation();
+  event.preventDefault();
 };
 
 /**
  * Perform moving operating.
- * This function activated from within the funcion CustomTime._onMouseDown().
  * @param {Event} event
- * @param {Object} listener
  * @private
  */
-CustomTime.prototype._onMouseMove = function (event, listener) {
-  event = event || window.event;
-  var params = listener.params;
-  var parent = this.parent;
+CustomTime.prototype._onDrag = function (event) {
+  var deltaX = event.gesture.deltaX,
+      x = this.parent.toScreen(this.eventParams.customTime) + deltaX,
+      time = this.parent.toTime(x);
 
-  // calculate change in mouse position
-  var mouseX = util.getPageX(event);
-
-  if (params.mouseX === undefined) {
-    params.mouseX = mouseX;
-  }
-
-  var diff = mouseX - params.mouseX;
-
-  // if mouse movement is big enough, register it as a "moved" event
-  if (Math.abs(diff) >= 1) {
-    params.moved = true;
-  }
-
-  var x = parent.toScreen(params.customTime);
-  var xnew = x + diff;
-  var time = parent.toTime(xnew);
-  this._setCustomTime(time);
+  this.setCustomTime(time);
 
   // fire a timechange event
-  events.trigger(this, 'timechange', {customTime: this.customTime});
+  if (this.controller) {
+    this.controller.emit('timechange', {
+      time: this.customTime
+    })
+  }
 
-  util.preventDefault(event);
+  event.stopPropagation();
+  event.preventDefault();
 };
 
 /**
  * Stop moving operating.
- * This function activated from within the function CustomTime._onMouseDown().
  * @param {event} event
- * @param {Object} listener
  * @private
  */
-CustomTime.prototype._onMouseUp = function (event, listener) {
-  event = event || window.event;
-  var params = listener.params;
-
-  // remove event listeners here, important for Safari
-  if (params.onMouseMove) {
-    util.removeEventListener(document, 'mousemove', params.onMouseMove);
-    params.onMouseMove = null;
-  }
-  if (params.onMouseUp) {
-    util.removeEventListener(document, 'mouseup', params.onMouseUp);
-    params.onMouseUp = null;
+CustomTime.prototype._onDragEnd = function (event) {
+  // fire a timechanged event
+  if (this.controller) {
+    this.controller.emit('timechanged', {
+      time: this.customTime
+    })
   }
 
-  if (params.moved) {
-    // fire a timechanged event
-    events.trigger(this, 'timechanged', {customTime: this.customTime});
-  }
+  event.stopPropagation();
+  event.preventDefault();
 };

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

@@ -132,7 +132,7 @@ GroupSet.prototype.setGroups = function setGroups(groups) {
     // subscribe to new dataset
     var id = this.id;
     util.forEach(this.listeners, function (callback, event) {
-      me.groupsData.subscribe(event, callback, id);
+      me.groupsData.on(event, callback, id);
     });
 
     // draw all new groups
@@ -216,6 +216,7 @@ GroupSet.prototype.repaint = function repaint() {
   if (!frame) {
     frame = document.createElement('div');
     frame.className = 'groupset';
+    frame['timeline-groupset'] = this;
     this.dom.frame = frame;
 
     var className = options.className;
@@ -544,3 +545,36 @@ GroupSet.prototype._toQueue = function _toQueue(ids, action) {
     this.requestRepaint();
   }
 };
+
+/**
+ * Find the Group from an event target:
+ * searches for the attribute 'timeline-groupset' in the event target's element
+ * tree, then finds the right group in this groupset
+ * @param {Event} event
+ * @return {Group | null} group
+ */
+GroupSet.groupFromTarget = function groupFromTarget (event) {
+  var groupset,
+      target = event.target;
+
+  while (target) {
+    if (target.hasOwnProperty('timeline-groupset')) {
+      groupset = target['timeline-groupset'];
+      break;
+    }
+    target = target.parentNode;
+  }
+
+  if (groupset) {
+    for (var groupId in groupset.groups) {
+      if (groupset.groups.hasOwnProperty(groupId)) {
+        var group = groupset.groups[groupId];
+        if (group.itemset && ItemSet.itemSetFromTarget(event) == group.itemset) {
+          return group;
+        }
+      }
+    }
+  }
+
+  return null;
+};

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

@@ -16,6 +16,13 @@ function ItemSet(parent, depends, options) {
   this.parent = parent;
   this.depends = depends;
 
+  // event listeners
+  this.eventListeners = {
+    dragstart: this._onDragStart.bind(this),
+    drag: this._onDrag.bind(this),
+    dragend: this._onDragEnd.bind(this)
+  };
+
   // one options object is shared by this itemset and all its items
   this.options = options || {};
   this.defaultOptions = {
@@ -35,6 +42,7 @@ function ItemSet(parent, depends, options) {
   this.itemsData = null;  // DataSet
   this.range = null;      // Range or Object {start: number, end: number}
 
+  // data change listeners
   this.listeners = {
     'add': function (event, params, senderId) {
       if (senderId != me.id) {
@@ -59,6 +67,8 @@ function ItemSet(parent, depends, options) {
   this.stack = new Stack(this, Object.create(this.options));
   this.conversion = null;
 
+  this.touchParams = {}; // stores properties while dragging
+
   // TODO: ItemSet should also attach event listeners for rangechange and rangechanged, like timeaxis
 }
 
@@ -96,9 +106,61 @@ ItemSet.types = {
  *                           {Number} padding
  *                              Padding of the contents of an item in pixels.
  *                              Must correspond with the items css. Default is 5.
+ *                           {Function} snap
+ *                              Function to let items snap to nice dates when
+ *                              dragging items.
  */
 ItemSet.prototype.setOptions = Component.prototype.setOptions;
 
+
+
+/**
+ * Set controller for this component
+ * @param {Controller | null} controller
+ */
+ItemSet.prototype.setController = function setController (controller) {
+  var event;
+
+  // unregister old event listeners
+  if (this.controller) {
+    for (event in this.eventListeners) {
+      if (this.eventListeners.hasOwnProperty(event)) {
+        this.controller.off(event, this.eventListeners[event]);
+      }
+    }
+  }
+
+  this.controller = controller || null;
+
+  // register new event listeners
+  if (this.controller) {
+    for (event in this.eventListeners) {
+      if (this.eventListeners.hasOwnProperty(event)) {
+        this.controller.on(event, this.eventListeners[event]);
+      }
+    }
+  }
+};
+
+// attach event listeners for dragging items to the controller
+(function (me) {
+  var _controller = null;
+  var _onDragStart = null;
+  var _onDrag = null;
+  var _onDragEnd = null;
+
+  Object.defineProperty(me, 'controller', {
+    get: function () {
+      return _controller;
+    },
+
+    set: function (controller) {
+
+    }
+  });
+}) (this);
+
+
 /**
  * Set range (start and end).
  * @param {Range | Object} range  A Range or an object containing start and end.
@@ -144,12 +206,6 @@ ItemSet.prototype.setSelection = function setSelection(ids) {
       }
     }
 
-    // trigger a select event
-    selection = this.selection.concat([]);
-    events.trigger(this, 'select', {
-      ids: selection
-    });
-
     if (this.controller) {
       this.requestRepaint();
     }
@@ -195,6 +251,7 @@ ItemSet.prototype.repaint = function repaint() {
   if (!frame) {
     frame = document.createElement('div');
     frame.className = 'itemset';
+    frame['timeline-itemset'] = this;
 
     var className = options.className;
     if (className) {
@@ -389,8 +446,8 @@ ItemSet.prototype.getAxis = function getAxis() {
 ItemSet.prototype.reflow = function reflow () {
   var changed = 0,
       options = this.options,
-      marginAxis = options.margin && options.margin.axis || this.defaultOptions.margin.axis,
-      marginItem = options.margin && options.margin.item || this.defaultOptions.margin.item,
+      marginAxis = (options.margin && 'axis' in options.margin) ? options.margin.axis : this.defaultOptions.margin.axis,
+      marginItem = (options.margin && 'item' in options.margin) ? options.margin.item : this.defaultOptions.margin.item,
       update = util.updateProperty,
       asNumber = util.option.asNumber,
       asSize = util.option.asSize,
@@ -501,7 +558,7 @@ ItemSet.prototype.setItems = function setItems(items) {
     // subscribe to new dataset
     var id = this.id;
     util.forEach(this.listeners, function (callback, event) {
-      me.itemsData.subscribe(event, callback, id);
+      me.itemsData.on(event, callback, id);
     });
 
     // draw all new items
@@ -518,6 +575,24 @@ ItemSet.prototype.getItems = function getItems() {
   return this.itemsData;
 };
 
+/**
+ * Remove an item by its id
+ * @param {String | Number} id
+ */
+ItemSet.prototype.removeItem = function removeItem (id) {
+  var item = this.itemsData.get(id),
+      dataset = this._myDataSet();
+
+  if (item) {
+    // confirm deletion
+    this.options.onRemove(item, function (item) {
+      if (item) {
+        dataset.remove(item);
+      }
+    });
+  }
+};
+
 /**
  * Handle updated items
  * @param {Number[]} ids
@@ -610,3 +685,191 @@ ItemSet.prototype.toScreen = function toScreen(time) {
   var conversion = this.conversion;
   return (time.valueOf() - conversion.offset) * conversion.scale;
 };
+
+/**
+ * Start dragging the selected events
+ * @param {Event} event
+ * @private
+ */
+ItemSet.prototype._onDragStart = function (event) {
+  if (!this.options.editable) {
+    return;
+  }
+
+  var item = ItemSet.itemFromTarget(event),
+      me = this;
+
+  if (item && item.selected) {
+    var dragLeftItem = event.target.dragLeftItem;
+    var dragRightItem = event.target.dragRightItem;
+
+    if (dragLeftItem) {
+      this.touchParams.itemProps = [{
+        item: dragLeftItem,
+        start: item.data.start.valueOf()
+      }];
+    }
+    else if (dragRightItem) {
+      this.touchParams.itemProps = [{
+        item: dragRightItem,
+        end: item.data.end.valueOf()
+      }];
+    }
+    else {
+      this.touchParams.itemProps = this.getSelection().map(function (id) {
+        var item = me.items[id];
+        var props = {
+          item: item
+        };
+
+        if ('start' in item.data) {
+          props.start = item.data.start.valueOf()
+        }
+        if ('end' in item.data)   {
+          props.end = item.data.end.valueOf()
+        }
+
+        return props;
+      });
+    }
+
+    event.stopPropagation();
+  }
+};
+
+/**
+ * Drag selected items
+ * @param {Event} event
+ * @private
+ */
+ItemSet.prototype._onDrag = function (event) {
+  if (this.touchParams.itemProps) {
+    var snap = this.options.snap || null,
+        deltaX = event.gesture.deltaX,
+        offset = deltaX / this.conversion.scale;
+
+    // move
+    this.touchParams.itemProps.forEach(function (props) {
+      if ('start' in props) {
+        var start = new Date(props.start + offset);
+        props.item.data.start = snap ? snap(start) : start;
+      }
+      if ('end' in props) {
+        var end = new Date(props.end + offset);
+        props.item.data.end = snap ? snap(end) : end;
+      }
+    });
+
+    // TODO: implement onMoving handler
+
+    // TODO: implement dragging from one group to another
+
+    this.requestReflow();
+
+    event.stopPropagation();
+  }
+};
+
+/**
+ * End of dragging selected items
+ * @param {Event} event
+ * @private
+ */
+ItemSet.prototype._onDragEnd = function (event) {
+  if (this.touchParams.itemProps) {
+    // prepare a change set for the changed items
+    var changes = [],
+        me = this,
+        dataset = this._myDataSet(),
+        type;
+
+    this.touchParams.itemProps.forEach(function (props) {
+      var id = props.item.id,
+          item = me.itemsData.get(id);
+
+      var changed = false;
+      if ('start' in props.item.data) {
+        changed = (props.start != props.item.data.start.valueOf());
+        item.start = util.convert(props.item.data.start, dataset.convert['start']);
+      }
+      if ('end' in props.item.data) {
+        changed = changed  || (props.end != props.item.data.end.valueOf());
+        item.end = util.convert(props.item.data.end, dataset.convert['end']);
+      }
+
+      // only apply changes when start or end is actually changed
+      if (changed) {
+        me.options.onMove(item, function (item) {
+          if (item) {
+            // apply changes
+            changes.push(item);
+          }
+          else {
+            // restore original values
+            if ('start' in props) props.item.data.start = props.start;
+            if ('end' in props)   props.item.data.end   = props.end;
+            me.requestReflow();
+          }
+        });
+      }
+    });
+    this.touchParams.itemProps = null;
+
+    // apply the changes to the data (if there are changes)
+    if (changes.length) {
+      dataset.update(changes);
+    }
+
+    event.stopPropagation();
+  }
+};
+
+/**
+ * Find an item from an event target:
+ * searches for the attribute 'timeline-item' in the event target's element tree
+ * @param {Event} event
+ * @return {Item | null} item
+ */
+ItemSet.itemFromTarget = function itemFromTarget (event) {
+  var target = event.target;
+  while (target) {
+    if (target.hasOwnProperty('timeline-item')) {
+      return target['timeline-item'];
+    }
+    target = target.parentNode;
+  }
+
+  return null;
+};
+
+/**
+ * Find the ItemSet from an event target:
+ * searches for the attribute 'timeline-itemset' in the event target's element tree
+ * @param {Event} event
+ * @return {ItemSet | null} item
+ */
+ItemSet.itemSetFromTarget = function itemSetFromTarget (event) {
+  var target = event.target;
+  while (target) {
+    if (target.hasOwnProperty('timeline-itemset')) {
+      return target['timeline-itemset'];
+    }
+    target = target.parentNode;
+  }
+
+  return null;
+};
+
+/**
+ * Find the DataSet to which this ItemSet is connected
+ * @returns {null | DataSet} dataset
+ * @private
+ */
+ItemSet.prototype._myDataSet = function _myDataSet() {
+  // find the root DataSet
+  var dataset = this.itemsData;
+  while (dataset instanceof DataView) {
+    dataset = dataset.data;
+  }
+  return dataset;
+};